Retours css mobile 🎨

MTES-MCT · Oct 17, 2024 · 21039cb · 21039cb
1 parent 122c99b
commit 21039cb
Show file tree

Hide file tree

Showing 17 changed files with 178 additions and 103 deletions.
diff --git a/client/components/carte/Map.vue b/client/components/carte/Map.vue
@@ -3,7 +3,6 @@ import * as maplibregl from 'maplibre-gl';
 import { Ref } from 'vue';
 import { PMTiles, Protocol } from 'pmtiles';
 import api from '../../api';
-import niveauxGravite from '../../dto/niveauGravite';
 import { useRefDataStore } from '../../store/refData';
 
 const props = defineProps<{
@@ -206,7 +205,7 @@ const typeEauTags: Ref<any[]> = ref([{
 }, {
   label: 'Eau superficielle',
   value: 'SUP',
-  text: `d'un cours d'eau, d'une rivière`,
+  text: `des cours d'eau, rivières`,
 }, {
   label: 'Eau souterraine',
   value: 'SOU',
@@ -455,18 +454,7 @@ watch(() => props.area, () => {
                  tag-name="button" />
       </div>
     </div>
-    <div class="fr-grid-row map-legend fr-mb-1w show-sm">
-      <template v-for="legend in niveauxGravite">
-        <DsfrTooltip on-hover
-                     :content="legend.description">
-          <DsfrBadge small
-                     class="fr-mr-1w"
-                     :class="legend.class"
-                     type=""
-                     :label="legend.text" />
-        </DsfrTooltip>
-      </template>
-    </div>
+    <MixinsNiveauGraviteLegende class="map-legend fr-mb-1w show-sm" />
     <div class="map-wrap" :class="{'map-wrap--loading': loading, 'map-wrap--full-actions': !hideTypeEau}">
       <div class="map" ref="mapContainer"></div>
     </div>
@@ -481,18 +469,7 @@ watch(() => props.area, () => {
                  tag-name="button" />
       </div>
     </div>
-    <div class="fr-grid-row map-legend fr-mt-1w hide-sm">
-      <template v-for="legend in niveauxGravite">
-        <DsfrTooltip on-hover
-                     :content="legend.description">
-          <DsfrBadge small
-                     class="fr-mr-1w"
-                     :class="legend.class"
-                     type=""
-                     :label="legend.text" />
-        </DsfrTooltip>
-      </template>
-    </div>
+    <MixinsNiveauGraviteLegende class="map-legend fr-mt-1w hide-sm" />
 
     <div v-if="!hideDownloadBtn"
          data-html2canvas-ignore="true"
@@ -598,10 +575,6 @@ h6 {
   }
 }
 
-.map-legend :deep(.fr-link) {
-  background: none;
-}
-
 @media screen and (max-width: 767px) {
   .map-wrap {
     height: calc(100% - 230px);

diff --git a/client/components/carte/Table.vue b/client/components/carte/Table.vue
@@ -155,7 +155,7 @@ watch(() => props, () => {
                    :rows="rowsFiltered"
                    :pagination="true"
                    :key="componentKey"
-                   class="fr-table--layout-fixed fr-table--no-title" />
+                   class="fr-table--sm fr-table--no-title" />
       </div>
 
       <div class="text-align-right fr-mt-1w">
@@ -191,7 +191,6 @@ watch(() => props, () => {
   }
 
   &-body {
-    background: var(--grey-1000-50);
     padding-bottom: 1rem;
   }
 
@@ -214,4 +213,15 @@ watch(() => props, () => {
     margin: 0 -0.5rem;
   }
 }
+
+.fr-table {
+  overflow: auto;
+}
+
+@media screen and (min-width: 768px) {
+  .fr-table > :deep(table) {
+    display: table;
+    table-layout: fixed;
+  }
+}
 </style>
diff --git a/client/components/carte/commune/Filter.vue b/client/components/carte/commune/Filter.vue
@@ -151,7 +151,7 @@ watch(() => refDataStore.departements, () => {
 
 <template>
   <div class="fr-grid-row fr-grid-row--gutters">
-    <div class="fr-col-lg-3 fr-col-12">
+    <div class="fr-col-lg-3 fr-col-md-6 fr-col-12">
       <DsfrInputGroup :error-message="utils.showInputError(v$, 'area')">
         <DsfrSelect label="Territoire"
                     v-model="formData.area"
@@ -160,7 +160,7 @@ watch(() => refDataStore.departements, () => {
                     required />
       </DsfrInputGroup>
     </div>
-    <div class="fr-col-lg-3 fr-col-6">
+    <div class="fr-col-lg-3 fr-col-md-6 fr-col-12">
       <DsfrInputGroup :error-message="utils.showInputError(v$, 'dateDebut')">
         <DsfrInput
           id="dateDebut"
@@ -176,7 +176,7 @@ watch(() => refDataStore.departements, () => {
         />
       </DsfrInputGroup>
     </div>
-    <div class="fr-col-lg-3 fr-col-6">
+    <div class="fr-col-lg-3 fr-col-md-6 fr-col-12">
       <DsfrInputGroup :error-message="utils.showInputError(v$, 'dateFin')">
         <DsfrInput
           id="dateFin"

diff --git a/client/components/carte/commune/Map.vue b/client/components/carte/commune/Map.vue
@@ -475,7 +475,7 @@ watch(() => [props.dateBegin, props.dateEnd, props.area], () => {
                      :closeable="false"
           />
         </div>
-        <div class="map-pre-actions-card fr-p-1w fr-m-1w">
+        <div class="map-pre-actions-card fr-p-1w fr-m-1w hide-sm">
           <h6 class="fr-mb-1w fr-mr-2w">Raccourcis :</h6>
           <DsfrTag v-for="tag in mapTags"
                    :label="tag.label"
@@ -485,6 +485,14 @@ watch(() => [props.dateBegin, props.dateEnd, props.area], () => {
                    tag-name="button" />
         </div>
       </div>
+      <div class="map-legend fr-grid-row fr-grid-row--middle fr-grid-row--gutters show-sm">
+        <div class="fr-col-3">Zones non concernées par la sécheresse</div>
+        <div class="fr-col-1" v-for="legend of legende">
+          <div :style="{'background-color': legend.color}"
+               class="map-legend-carre"></div>
+        </div>
+        <div class="fr-col-3">Situation extrème</div>
+      </div>
       <div class="fr-grid-row fr-grid-row--gutters">
         <div class="fr-col-12" style="position:relative;"
              :style="embedded ? 'height: calc(100vh - 125px)' : 'height: 75vh'">
@@ -495,12 +503,24 @@ watch(() => [props.dateBegin, props.dateEnd, props.area], () => {
           </div>
         </div>
       </div>
-      <div class="map-legend fr-grid-row fr-grid-row--middle">
-        <div>Zones non concernées par la sécheresse</div>
-        <div v-for="legend of legende"
-             :style="{'background-color': legend.color}"
-             class="map-legend-carre fr-mx-1w"></div>
-        <div>Situation extrème</div>
+      <div class="map-post-actions">
+        <div class="map-post-actions-card fr-p-1w fr-m-1w fr-mt-4w show-sm">
+          <h6 class="fr-mb-1w fr-mr-2w">Raccourcis :</h6>
+          <DsfrTag v-for="tag in mapTags"
+                   :label="tag.label"
+                   class="fr-m-1w"
+                   small
+                   @click="flyToLocation(tag.bounds)"
+                   tag-name="button" />
+        </div>
+      </div>
+      <div class="map-legend fr-grid-row fr-grid-row--middle fr-grid-row--gutters hide-sm">
+        <div class="fr-col-3">Zones non concernées par la sécheresse</div>
+        <div class="fr-col-1" v-for="legend of legende">
+          <div :style="{'background-color': legend.color}"
+               class="map-legend-carre"></div>
+        </div>
+        <div class="fr-col-3">Situation extrème</div>
       </div>
 
       <div data-html2canvas-ignore="true" class="text-align-right">
@@ -613,10 +633,11 @@ watch(() => [props.dateBegin, props.dateEnd, props.area], () => {
   .map {
     width: 100%;
     height: 100%;
+    border-radius: 15px;
   }
 }
 
-.map-pre-actions {
+.map-pre-actions, .map-post-actions {
   position: absolute;
   top: 10px;
   left: 10px;
@@ -657,13 +678,16 @@ h6 {
 
 .map-legend {
   font-weight: bold;
+  text-align: center;
+  max-width: 750px;
 
   &-carre {
     height: 20px;
     width: 40px;
     border: 1px solid var(--grey-425-625);;
     border-radius: .25rem;
     display: inline-block;
+    pading: auto;
   }
 }
 
@@ -687,11 +711,14 @@ h6 {
       display: initial;
     }
   }
-}
 
-@media screen and (max-width: 991px) {
   .map-legend {
-    margin-top: 2rem;
+    font-size: 0.6rem;
+
+    &-carre {
+      height: 15px;
+      width: 25px;
+    }
   }
 }
 </style>
diff --git a/client/components/donnees/AreaChart.vue b/client/components/donnees/AreaChart.vue
@@ -187,7 +187,7 @@ const tooltipTitle = (tooltipItems: any[]): string => {
 
 const chartLineOptions: ChartOptions = {
   responsive: true,
-  maintainAspectRatio: true,
+  maintainAspectRatio: false,
   scales: {
     x: {
       type: 'time',
@@ -275,7 +275,7 @@ watch(() => refDataStore.departements, () => {
 <template>
   <div ref="screenshotZone">
     <div class="fr-grid-row fr-grid-row--gutters">
-      <div class="fr-col-lg-2 fr-col-6">
+      <div class="fr-col-lg-2 fr-col-md-6 fr-col-12">
         <DsfrInputGroup :error-message="utils.showInputError(v$, 'typeEau')">
           <DsfrSelect label="Type d'eau"
                       v-model="formData.typeEau"
@@ -284,7 +284,7 @@ watch(() => refDataStore.departements, () => {
                       required />
         </DsfrInputGroup>
       </div>
-      <div class="fr-col-lg-2 fr-col-6">
+      <div class="fr-col-lg-2 fr-col-md-6 fr-col-12">
         <DsfrInputGroup :error-message="utils.showInputError(v$, 'area')">
           <DsfrSelect label="Territoire"
                       v-model="formData.area"
@@ -293,7 +293,7 @@ watch(() => refDataStore.departements, () => {
                       required />
         </DsfrInputGroup>
       </div>
-      <div class="fr-col-lg-3 fr-col-6">
+      <div class="fr-col-lg-3 fr-col-md-6 fr-col-12">
         <DsfrInputGroup :error-message="utils.showInputError(v$, 'dateDebut')">
           <DsfrInput
             id="dateDebut"
@@ -309,7 +309,7 @@ watch(() => refDataStore.departements, () => {
           />
         </DsfrInputGroup>
       </div>
-      <div class="fr-col-lg-3 fr-col-6">
+      <div class="fr-col-lg-3 fr-col-md-6 fr-col-12">
         <DsfrInputGroup :error-message="utils.showInputError(v$, 'dateFin')">
           <DsfrInput
             id="dateFin"
@@ -375,4 +375,9 @@ watch(() => refDataStore.departements, () => {
     margin-bottom: 0;
   }
 }
+
+#area-chart-line {
+  height: 600px;
+  max-height: 600px;
+}
 </style>
diff --git a/client/components/donnees/AreaTable.vue b/client/components/donnees/AreaTable.vue
@@ -61,11 +61,24 @@ watch(() => [props.typeEau, props.dataArea], () => {
              :rows="rows"
              :pagination="true"
              :key="componentKey"
-             class="fr-table--layout-fixed fr-table--no-title" />
+             class="fr-table--sm fr-table--no-title" />
 
   <div class="text-align-right fr-mt-1w">
     <DsfrButton @click="downloadCsv()">
       Télécharger les données (CSV)
     </DsfrButton>
   </div>
-</template>
+</template>
+
+<style lang="scss" scoped>
+.fr-table {
+  overflow: auto;
+}
+
+@media screen and (min-width: 768px) {
+  .fr-table > :deep(table) {
+    display: table;
+    table-layout: fixed;
+  }
+}
+</style>
diff --git a/client/components/donnees/ArretesRestrictionsTable.vue b/client/components/donnees/ArretesRestrictionsTable.vue
@@ -92,6 +92,7 @@ watch(() => props, () => {
                  :headers="headers"
                  :rows="rows"
                  :pagination="true"
+                 class="fr-table--sm"
                  :key="componentKey" />
 
       <div class="text-align-right fr-mt-1w">
@@ -106,4 +107,10 @@ watch(() => props, () => {
       </div>
     </template>
   </div>
-</template>
+</template>
+
+<style lang="scss" scoped>
+.fr-table {
+  overflow: auto;
+}
+</style>