Améliore l'affichage responsive du sticky header (#678)

bellangerq · web-flow · commit bd97d60a16ba · 2024-03-07T16:17:45.000+01:00
* remove slot in audit header

* add items in header dropdown in small viewports

* improve filters display on small viewports

* set all media queries in rem

* harmonize usage of media queries

* document media queries usage

* update changelog
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,6 +4,10 @@ Tous les changements notables de Ara sont documentés ici avec leur date, leur c
 
 ## 07/03/2024
 
+### Corrections 🐛
+
+- Améliorer l’affichage sur mobile du header sticky sur la page de génération de l’audit ([#678](https://github.com/DISIC/Ara/pull/678))
+
 ### Autres changements ⚙️
 
 - Supprime la rubrique des ressources ([#675](https://github.com/DISIC/Ara/pull/675))
diff --git a/confiture-web-app/README.md b/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) {
+    ...
+  }
+  ```
diff --git a/confiture-web-app/src/components/SummaryCard.vue b/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;
   }
diff --git a/confiture-web-app/src/components/audit/AuditGenerationHeader.vue b/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>
diff --git a/confiture-web-app/src/components/audit/TestEnvironmentSelection/TestEnvironmentSelection.vue b/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;
   }
diff --git a/confiture-web-app/src/components/overview/AuditStep.vue b/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;
diff --git a/confiture-web-app/src/components/overview/StatementStep.vue b/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%;
   }
diff --git a/confiture-web-app/src/components/report/ReportErrors.vue b/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;
   }
diff --git a/confiture-web-app/src/components/report/ReportResults.vue b/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>
diff --git a/confiture-web-app/src/components/ui/CopyBlock.vue b/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;
diff --git a/confiture-web-app/src/pages/audit/AuditGenerationPage.vue b/confiture-web-app/src/pages/audit/AuditGenerationPage.vue

Original file line number	Diff line number	Diff line change
`@@ -86,11 +86,7 @@ const uniqueId = useUniqueId();`
`86`	`86`	`color: var(--text-mention-grey);`
`87`	`87`	`}`
`88`	`88`
`89`		`-@media (max-width: 992px) {`
`90`		`- .card {`
`91`		`- flex-direction: column;`
`92`		`- }`
`93`		`-`
	`89`	`+@media (width < 48rem) {`
`94`	`90`	`.card-info {`
`95`	`91`	`text-align: center;`
`96`	`92`	`}`
Original file line number	Diff line number	Diff line change
`@@ -455,13 +455,13 @@ function combineEnvironments(`
`455`	`455`	`grid-column: 1 / -1;`
`456`	`456`	`}`
`457`	`457`
`458`		`-@media (max-width: 992px) {`
	`458`	`+@media (width < 62rem) {`
`459`	`459`	`.suggested-environments {`
`460`	`460`	`grid-template-columns: 1fr 1fr;`
`461`	`461`	`}`
`462`	`462`	`}`
`463`	`463`
`464`		`-@media (max-width: 576px) {`
	`464`	`+@media (width < 36rem) {`
`465`	`465`	`.suggested-environments {`
`466`	`466`	`grid-template-columns: 1fr;`
`467`	`467`	`}`
Original file line number	Diff line number	Diff line change
`@@ -266,7 +266,7 @@ const auditIsInProgress = computed(() => {`
`266`	`266`	`grid-column: 1;`
`267`	`267`	`}`
`268`	`268`
`269`		`-@media (max-width: 48rem) {`
	`269`	`+@media (width < 48rem) {`
`270`	`270`	`.audit-step-charts {`
`271`	`271`	`grid-template-columns: 1fr;`
`272`	`272`	`gap: 1rem;`
Original file line number	Diff line number	Diff line change
`@@ -166,7 +166,7 @@ const auditIsPublishable = computed(() => {`
`166`	`166`	`grid-row: 4;`
`167`	`167`	`}`
`168`	`168`
`169`		`-@media (max-width: 48rem) {`
	`169`	`+@media (width < 48rem) {`
`170`	`170`	`.statement-step-actions > li:first-child {`
`171`	`171`	`width: 100%;`
`172`	`172`	`}`
Original file line number	Diff line number	Diff line change
`@@ -786,7 +786,7 @@ function updateActiveAnchorLink(id: string, event: MouseEvent) {`
`786`	`786`	`content: none;`
`787`	`787`	`}`
`788`	`788`
`789`		`-@media (max-width: 768px) {`
	`789`	`+@media (width < 48rem) {`
`790`	`790`	`.main {`
`791`	`791`	`grid-template-columns: 1fr;`
`792`	`792`	`}`
Original file line number	Diff line number	Diff line change
`@@ -239,10 +239,14 @@ const auditInProgress = computed(`
`239`	`239`	`}`
`240`	`240`
`241`	`241`	/* To avoid JS based MQ, we replicate `fr-table--layout-fixed` */
`242`		`-@media (min-width: 37.5rem) {`
	`242`	`+.fr-table table {`
	`243`	`+ display: table;`
	`244`	`+ table-layout: fixed;`
	`245`	`+}`
	`246`	`+`
	`247`	`+@media (width < 36rem) {`
`243`	`248`	`.fr-table table {`
`244`		`- display: table;`
`245`		`- table-layout: fixed;`
	`249`	`+ display: block;`
`246`	`250`	`}`
`247`	`251`	`}`
`248`	`252`	`</style>`
Original file line number	Diff line number	Diff line change
`@@ -94,7 +94,7 @@ function onClose() {`
`94`	`94`	`flex-shrink: 0;`
`95`	`95`	`}`
`96`	`96`
`97`		`-@media (max-width: 37.5rem) {`
	`97`	`+@media (width < 36rem) {`
`98`	`98`	`.copy-block {`
`99`	`99`	`align-items: start;`
`100`	`100`	`flex-direction: column;`