Merge pull request #187 from ecolabdata/feat/param-searches

feat: allow secondary search rerouting to another page
opendatateam · Nov 29, 2023 · b7cdc9d · b7cdc9d
2 parents 035dd52 + ef4a24b
commit b7cdc9d
Show file tree

Hide file tree

Showing 3 changed files with 81 additions and 6 deletions.
diff --git a/configs/ecospheres/config.yaml b/configs/ecospheres/config.yaml
@@ -26,6 +26,13 @@ website:
   logo_operator:
   homepage_title: 'Ecosphères'
   homepage_subtitle: 'Explorez les données ouvertes et restreintes de la **Transition écologique**, de la **Cohésion des territoires**, de la **Transition énergétique** et de la **Mer**'
+  search_bar: 
+    display: true
+    placeholder: 'Rechercher un jeu de données'
+  secondary_search: 
+    display: false
+    name:
+    link:
   menu_items:
     - name: 'Accueil'
       id: 'home'

diff --git a/configs/meteo-france/config.yaml b/configs/meteo-france/config.yaml
@@ -22,9 +22,14 @@ website:
   # leave empty if not pertinent
   logo_operator: 'https://static.data.gouv.fr/avatars/81/6374003e904fad9ddac7436315fd15-100.png'
   homepage_title: 'La météo et le climat en Open Data'
-  homepage_subtitle: |
-    meteo.data.gouv.fr centralise et structure les données publiques relatives à la météo et au climat.  
-    Vous y trouverez des données brutes téléchargeables et utilisable de manière libre et gratuite.
+  homepage_subtitle: 'meteo.data.gouv.fr centralise et structure les données publiques relatives à la météo et au climat.<br />Vous y trouverez des données brutes téléchargeables et utilisable de manière libre et gratuite.'
+  search_bar: 
+    display: true
+    placeholder: 'Rechercher un jeu de données'
+  secondary_search:     
+    display: true
+    name: 'Recherche guidée'
+    link: '/form'
   menu_items:
     - name: 'Accueil'
       id: 'home'

diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
@@ -29,6 +29,12 @@ const topics = config.website.list_highlighted_topics
 const buttons = config.website.home_buttons
 const showTopicChart = config.website.show_topic_charts
 const colorsBanner = config.website.home_banner_colors
+const searchConfig = config.website.search_bar
+const secondarySearchConfig = config.website.secondary_search
+
+const goToPage = (page) => {
+  window.location.href = page
+}
 </script>
 
 <template>
@@ -49,14 +55,28 @@ const colorsBanner = config.website.home_banner_colors
       <div class="subtitle fr-mt-4w fr-mb-4w">
         <span v-html="markdown.render(homepageSubTitle)" />
       </div>
-      <div class="search-bar">
+      <div class="search-bar" v-if="searchConfig.display">
         <DsfrSearchBar
           button-text="Rechercher"
-          placeholder="Rechercher un jeu de données"
-          :large="true"
+          :placeholder="searchConfig.placeholder"
+          :large="false"
           @search="doSearch"
           @update:modelValue="updateQuery"
+          class="search-bar-input"
+          :style="
+            secondarySearchConfig.display
+              ? 'min-width: 80%;'
+              : 'min-width: 100%;'
+          "
         />
+        <div v-if="secondarySearchConfig.display" class="or-sep">ou</div>
+        <div
+          v-if="secondarySearchConfig.display"
+          @click="goToPage(secondarySearchConfig.link)"
+          class="button-search-guided"
+        >
+          {{ secondarySearchConfig.name }}
+        </div>
       </div>
     </div>
   </div>
@@ -73,6 +93,27 @@ const colorsBanner = config.website.home_banner_colors
 </template>
 
 <style scoped lang="scss">
+@media (min-width: 1180px) {
+  .search-bar {
+    display: flex;
+    width: 100%;
+  }
+  .or-sep {
+    max-width: 30px;
+    margin-left: 20px;
+    margin-right: 20px;
+  }
+}
+@media (max-width: 1180px) {
+  .or-sep {
+    width: 100%;
+    margin-top: 10px;
+  }
+  .button-search-guided {
+    margin-top: 10px;
+  }
+}
+
 .fr-container {
   text-align: center;
 }
@@ -101,4 +142,26 @@ const colorsBanner = config.website.home_banner_colors
   background-color: white;
   border-radius: 10px;
 }
+.search-bar-input {
+  flex-wrap: nowrap;
+  height: 40px;
+}
+.button-search-guided {
+  background-color: #060091;
+  padding-left: 10px;
+  padding-right: 10px;
+  color: white;
+  font-weight: bold;
+  vertical-align: middle;
+  line-height: 40px;
+  height: 40px;
+  border-radius: 20px;
+}
+.button-search-guided:hover {
+  cursor: pointer;
+}
+.or-sep {
+  text-align: 'center';
+  line-height: 40px;
+}
 </style>