CSS historique 🎨

MTES-MCT · May 29, 2024 · b2fb252 · b2fb252
1 parent ea95ea8
commit b2fb252
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 13 deletions.
diff --git a/client/components/carte/Map.vue b/client/components/carte/Map.vue
@@ -286,7 +286,7 @@ watch(() => selectedTypeEau.value, () => {
 
 watch(() => props.date, () => {
   const date = new Date(props.date);
-  if (!date && !map.value) {
+  if (!date || !map.value) {
     return;
   }
   resetZoneSelected();

diff --git a/client/components/carte/Wrapper.vue b/client/components/carte/Wrapper.vue
@@ -22,18 +22,23 @@ const currentDate = new Date();
 <template>
   <div :class="embedded ? '' : 'carte-wrapper fr-py-4w'">
     <div class="fr-container">
-      <div v-if="!embedded" class="section-title fr-mb-4w">
-        <h2 class="fr-mb-0">Carte et historique</h2>
-        <DsfrInput
-          id="dateCarte"
-          v-model="dateCarte"
-          label="Situation en date du"
-          label-visible
-          type="date"
-          name="dateCarte"
-          min="2012-01-01"
-          :max="currentDate.toISOString().split('T')[0]"
-        />
+      <div v-if="!embedded" class="fr-mb-4w">
+        <div class="fr-col-12 fr-col-lg-9 fr-grid-row fr-grid-row--middle header-wrapper">
+          <h2 class="fr-mb-0">Carte et historique</h2>
+          <div class="full-width fr-hidden-lg" />
+          <div>
+            <DsfrInput
+              id="dateCarte"
+              v-model="dateCarte"
+              label="Filtrer par date"
+              label-visible
+              type="date"
+              name="dateCarte"
+              min="2012-01-01"
+              :max="currentDate.toISOString().split('T')[0]"
+            />
+          </div>
+        </div>
       </div>
       <DsfrTabs :tab-titles="tabTitles"
                 :initial-selected-index="selectedTabIndex"
@@ -59,6 +64,10 @@ const currentDate = new Date();
 <style scoped lang="scss">
 .carte-wrapper {
   background: var(--yellow-tournesol-975-75);
+
+  .header-wrapper {
+    justify-content: space-between;
+  }
 }
 
 .fr-tabs {
@@ -77,4 +86,12 @@ const currentDate = new Date();
     }
   }
 }
+
+@media screen and (max-width: 991px) {
+  .carte-wrapper {
+    .header-wrapper {
+      justify-content: center;
+    }
+  }
+}
 </style>