From b2fb2527fc653fd3624428741c14569e8b789e25 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Vincent=20Lain=C3=A9?= <vincent.laine.utc@gmail.com>
Date: Wed, 29 May 2024 17:54:19 +0200
Subject: [PATCH] =?UTF-8?q?CSS=20historique=20=F0=9F=8E=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/components/carte/Map.vue     |  2 +-
 client/components/carte/Wrapper.vue | 41 ++++++++++++++++++++---------
 2 files changed, 30 insertions(+), 13 deletions(-)

diff --git a/client/components/carte/Map.vue b/client/components/carte/Map.vue
index 0832aa4..0dd77dd 100644
--- 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
index 7224671..ad32536 100644
--- 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>
\ No newline at end of file