Améliore l'affichage responsive du sticky header

confiture-web-app/README.md

@@ -48,3 +48,12 @@ Les tests peuvent être lancés de 2 manières :
   ```sh
   yarn cypress run
   ```
+
+## Guidelines
+
+- Utiliser les media queries en "desktop first" et avec la notation suivante avec les [valeurs de points de rupture du DSFR](https://www.systeme-de-design.gouv.fr/elements-d-interface/fondamentaux-techniques/grille-et-points-de-rupture) :
+  ```css
+  @media (width < 62rem) {
+    ...
+  }
+  ```

confiture-web-app/src/components/SummaryCard.vue

@@ -86,11 +86,7 @@ const uniqueId = useUniqueId();
   color: var(--text-mention-grey);
 }
 
-@media (max-width: 992px) {
-  .card {
-    flex-direction: column;
-  }
-
+@media (width < 48rem) {
   .card-info {
     text-align: center;
   }

confiture-web-app/src/components/audit/AuditGenerationHeader.vue

@@ -21,6 +21,7 @@ import AuditProgressBar from "./AuditProgressBar.vue";
 import DeleteModal from "./DeleteModal.vue";
 import Dropdown from "../ui/Dropdown.vue";
 import DuplicateModal from "./DuplicateModal.vue";
+import NotesModal from "../../components/audit/NotesModal.vue";
 import SaveIndicator from "./SaveIndicator.vue";
 import SummaryCard from "../SummaryCard.vue";
 import CopyIcon from "../icons/CopyIcon.vue";
@@ -128,6 +129,40 @@ function confirmDelete() {
     });
 }
 
+/**
+ * Update audit notes
+ */
+const notesModal = ref<InstanceType<typeof NotesModal>>();
+const isNotesLoading = ref(false);
+
+function openNotesModal() {
+  notesModal.value?.show();
+}
+
+const updateAuditNotes = async (notes: string) => {
+  isNotesLoading.value = true;
+  try {
+    await auditStore.updateAuditNotes(uniqueId.value, {
+      notes
+    });
+    notify(
+      "success",
+      undefined,
+      "Annotation de l’audit mise à jour avec succès"
+    );
+  } catch (error) {
+    console.error(error);
+    notify(
+      "error",
+      "Une erreur est survenue",
+      "Un problème empêche la sauvegarde de vos données. Contactez-nous à l'adresse ara@design.numerique.gouv.fr si le problème persiste."
+    );
+  } finally {
+    isNotesLoading.value = false;
+    notesModal.value?.hide();
+  }
+};
+
 const route = useRoute();
 const uniqueId = computed(() => route.params.uniqueId as string);
 
@@ -191,8 +226,6 @@ onMounted(() => {
 
   <h1>{{ auditName }}</h1>
 
-  <!-- TODO: Link to actions somehow -->
-
   <div
     id="sticky-indicator"
     class="sticky-indicator fr-grid-row fr-p-0 fr-mb-3w"
@@ -212,7 +245,7 @@ onMounted(() => {
     </div>
 
     <div
-      class="indicator-left-side fr-col-12 fr-col-md-3"
+      class="indicator-left-side fr-col-12 fr-col-sm-5 fr-col-md-3"
       :class="{ 'with-border': showLeftSideBorders }"
     >
       <AuditProgressBar
@@ -249,13 +282,13 @@ onMounted(() => {
       </div>
     </div>
 
-    <div class="fr-col-12 fr-col-md-9 sub-header">
+    <div class="fr-col-12 fr-col-sm-7 fr-col-md-9 sub-header">
       <SaveIndicator
         v-if="route.name === 'audit-generation'"
         class="fr-ml-2w"
       />
       <ul class="top-actions fr-my-0 fr-p-0" role="list">
-        <li>
+        <li class="fr-p-0 settings-item">
           <RouterLink
             class="fr-btn fr-btn--tertiary-no-outline fr-btn--icon-left fr-icon-settings-5-line"
             :to="{
@@ -267,39 +300,71 @@ onMounted(() => {
           </RouterLink>
         </li>
 
-        <li>
+        <li class="fr-p-0">
           <Dropdown
             ref="optionsDropdownRef"
             title="Actions"
             :disabled="isOffline"
-            :align-left="route.name === 'audit-generation'"
           >
             <ul role="list" class="fr-p-0 fr-m-0 dropdown-list">
-              <template v-if="!!auditPublicationDate">
-                <li class="dropdown-item">
-                  <RouterLink
-                    :to="{
-                      name: 'audit-generation',
-                      params: { uniqueId: editUniqueId }
-                    }"
-                    class="fr-btn fr-btn--tertiary-no-outline fr-btn--icon-left fr-icon-edit-line fr-m-0"
-                  >
-                    Modifier l’audit
-                  </RouterLink>
-                </li>
-              </template>
+              <li class="dropdown-item mobile-dropdown-item">
+                <button
+                  class="fr-btn fr-btn--tertiary-no-outline fr-btn--icon-left fr-icon-draft-line"
+                  :disabled="isOffline"
+                  @click="openNotesModal"
+                >
+                  Annoter l’audit
+                </button>
+              </li>
+              <li
+                aria-hidden="true"
+                class="dropdown-separator mobile-dropdown-item"
+              />
               <li class="dropdown-item">
                 <button
-                  class="fr-btn fr-btn--tertiary-no-outline fr-m-0"
+                  class="fr-btn fr-btn--tertiary-no-outline"
                   @click="duplicateModal?.show()"
                 >
                   <CopyIcon class="fr-mr-2v" />
                   Créer une copie
                 </button>
               </li>
+              <li class="fr-p-0 settings-item mobile-dropdown-item">
+                <RouterLink
+                  class="fr-btn fr-btn--tertiary-no-outline fr-btn--icon-left fr-icon-settings-5-line"
+                  :to="{
+                    name: 'audit-settings',
+                    params: { uniqueId: editUniqueId }
+                  }"
+                >
+                  Accéder aux paramètres
+                </RouterLink>
+              </li>
+              <li
+                aria-hidden="true"
+                class="dropdown-separator mobile-dropdown-item"
+              />
+              <li class="fr-p-0 report-item mobile-dropdown-item">
+                <component
+                  :is="isOffline ? 'button' : 'RouterLink'"
+                  class="fr-btn fr-btn--tertiary-no-outline fr-btn--icon-left fr-icon-eye-line no-external-icon"
+                  :to="{
+                    name: 'report',
+                    params: {
+                      uniqueId: auditStore.currentAudit?.consultUniqueId
+                    }
+                  }"
+                  target="_blank"
+                  :disabled="isOffline"
+                >
+                  Consulter le rapport
+                  <span class="sr-only">(Nouvelle fenêtre)</span>
+                </component>
+              </li>
+              <li aria-hidden="true" class="dropdown-separator" />
               <li class="dropdown-item">
                 <a
-                  class="fr-btn fr-btn--tertiary-no-outline fr-btn--icon-left fr-icon-download-fill fr-m-0 download-link"
+                  class="fr-btn fr-btn--tertiary-no-outline fr-btn--icon-left fr-icon-download-fill download-link"
                   :href="csvExportUrl"
                   :download="csvExportFilename"
                 >
@@ -322,7 +387,31 @@ onMounted(() => {
           </Dropdown>
         </li>
 
-        <slot name="actions" />
+        <li class="fr-p-0 notes-item">
+          <button
+            class="fr-btn fr-btn--secondary fr-btn--icon-left fr-icon-draft-line"
+            :disabled="isOffline"
+            @click="openNotesModal"
+          >
+            Annoter l’audit
+          </button>
+        </li>
+
+        <li class="fr-p-0 report-item">
+          <component
+            :is="isOffline ? 'button' : 'RouterLink'"
+            class="fr-btn fr-btn--secondary fr-btn--icon-left fr-icon-eye-line no-external-icon"
+            :to="{
+              name: 'report',
+              params: { uniqueId: auditStore.currentAudit?.consultUniqueId }
+            }"
+            target="_blank"
+            :disabled="isOffline"
+          >
+            Consulter le rapport
+            <span class="sr-only">(Nouvelle fenêtre)</span>
+          </component>
+        </li>
       </ul>
     </div>
   </div>
@@ -382,6 +471,12 @@ onMounted(() => {
       optionsDropdownRef?.closeOptions();
     "
   />
+
+  <NotesModal
+    ref="notesModal"
+    :is-loading="isNotesLoading"
+    @confirm="updateAuditNotes"
+  />
 </template>
 
 <style scoped>
@@ -416,9 +511,6 @@ onMounted(() => {
   flex-basis: 100%;
   color: var(--text-mention-grey);
 }
-:deep(.top-actions > li) {
-  padding-bottom: 0;
-}
 
 .delete-button {
   color: var(--error-425-625);
@@ -456,12 +548,6 @@ onMounted(() => {
   min-height: 4rem;
 }
 
-@media (min-width: 62em) {
-  .sticky-indicator {
-    z-index: 3;
-  }
-}
-
 .audit-status {
   display: flex;
   align-items: center;
@@ -497,4 +583,21 @@ onMounted(() => {
 .progress-bar {
   flex-grow: 1;
 }
+
+/* Display / Hide items from the menu in the toolbar or in the dropdown */
+.mobile-dropdown-item {
+  display: none;
+}
+
+@media (width < 62rem) {
+  .mobile-dropdown-item {
+    display: block;
+  }
+
+  .settings-item:not(.mobile-dropdown-item),
+  .notes-item:not(.mobile-dropdown-item),
+  .report-item:not(.mobile-dropdown-item) {
+    display: none;
+  }
+}
 </style>

confiture-web-app/src/components/audit/TestEnvironmentSelection/TestEnvironmentSelection.vue

@@ -455,13 +455,13 @@ function combineEnvironments(
   grid-column: 1 / -1;
 }
 
-@media (max-width: 992px) {
+@media (width < 62rem) {
   .suggested-environments {
     grid-template-columns: 1fr 1fr;
   }
 }
 
-@media (max-width: 576px) {
+@media (width < 36rem) {
   .suggested-environments {
     grid-template-columns: 1fr;
   }

confiture-web-app/src/components/overview/AuditStep.vue

@@ -266,7 +266,7 @@ const auditIsInProgress = computed(() => {
   grid-column: 1;
 }
 
-@media (max-width: 48rem) {
+@media (width < 48rem) {
   .audit-step-charts {
     grid-template-columns: 1fr;
     gap: 1rem;

confiture-web-app/src/components/overview/StatementStep.vue

@@ -166,7 +166,7 @@ const auditIsPublishable = computed(() => {
   grid-row: 4;
 }
 
-@media (max-width: 48rem) {
+@media (width < 48rem) {
   .statement-step-actions > li:first-child {
     width: 100%;
   }

confiture-web-app/src/components/report/ReportErrors.vue

@@ -786,7 +786,7 @@ function updateActiveAnchorLink(id: string, event: MouseEvent) {
   content: none;
 }
 
-@media (max-width: 768px) {
+@media (width < 48rem) {
   .main {
     grid-template-columns: 1fr;
   }

confiture-web-app/src/components/report/ReportResults.vue

@@ -239,10 +239,14 @@ const auditInProgress = computed(
 }
 
 /* To avoid JS based MQ, we replicate `fr-table--layout-fixed` */
-@media (min-width: 37.5rem) {
+.fr-table table {
+  display: table;
+  table-layout: fixed;
+}
+
+@media (width < 36rem) {
   .fr-table table {
-    display: table;
-    table-layout: fixed;
+    display: block;
   }
 }
 </style>

confiture-web-app/src/components/ui/CopyBlock.vue

@@ -94,7 +94,7 @@ function onClose() {
   flex-shrink: 0;
 }
 
-@media (max-width: 37.5rem) {
+@media (width < 36rem) {
   .copy-block {
     align-items: start;
     flex-direction: column;