feat: colored banner in homepage

configs/ecospheres/config.yaml

@@ -56,6 +56,10 @@ website:
     organizations_list: 9
     topics_list: 100
   contact_email: [email protected]
+  home_banner_colors:
+    - '#D6E3A1'
+    - '#BFDCB7'
+    - '#A7D4CD'
 
 # For step 2 of bouquet creation
 themes:

configs/meteo-france/config.yaml

@@ -20,9 +20,11 @@ website:
   rf_title: 'RÉPUBLIQUE<br>
     FRANÇAISE'
   # leave empty if not pertinent
-  logo_operator: 'https://upload.wikimedia.org/wikipedia/fr/4/47/Logo_M%C3%A9t%C3%A9o_France_2016.svg'
-  homepage_title: 'Données météo'
-  homepage_subtitle: 'Portail des données publiques open data de Météo-France'
+  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.
   menu_items:
     - name: 'Accueil'
       id: 'home'
@@ -63,7 +65,11 @@ website:
   # display settings
   pagination_sizes:
     organizations_list: 9
-    topics_list: 100
+    topics_list: 100  
+  home_banner_colors:
+    - '#F7EED4'
+    - '#ECEEE6'
+    - '#E2EEF8'
 
 # list of organisations' ids that should be handled by the portal
 # to find an id go to https://www.data.gouv.fr/fr/organizations/ministere-de-la-transition-ecologique/

src/App.vue

@@ -90,6 +90,8 @@ const logoOperator = ref(config.website.logo_operator)
   <div class="fr-header__body">
     <div class="fr-container width-inherit">
       <Navigation />
+    </div>
+    <div>
       <RouterView />
     </div>
   </div>

src/views/AboutView.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="about">
+  <div class="fr-container width-inherit about">
     <h1>This is an about page</h1>
   </div>
 </template>

src/views/HomeView.vue

@@ -28,21 +28,39 @@ const homepageSubTitle = config.website.homepage_subtitle
 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
 </script>
 
 <template>
-  <div class="fr-container fr-mt-8w fr-mb-16w">
-    <h1>{{ homepageTitle }}</h1>
-    <div class="es__hero fr-mt-4w fr-mb-4w">
-      <span v-html="markdown.render(homepageSubTitle)" />
+  <div
+    class="banner"
+    :style="
+      'background: linear-gradient(0.25turn, ' +
+      colorsBanner[0] +
+      ', ' +
+      colorsBanner[1] +
+      ', ' +
+      colorsBanner[2] +
+      ');'
+    "
+  >
+    <div class="fr-container">
+      <h1 class="main-title">{{ homepageTitle }}</h1>
+      <div class="subtitle fr-mt-4w fr-mb-4w">
+        <span v-html="markdown.render(homepageSubTitle)" />
+      </div>
+      <div class="search-bar">
+        <DsfrSearchBar
+          button-text="Rechercher"
+          placeholder="Rechercher un jeu de données"
+          :large="true"
+          @search="doSearch"
+          @update:modelValue="updateQuery"
+        />
+      </div>
     </div>
-    <DsfrSearchBar
-      button-text="Rechercher"
-      placeholder="Rechercher un jeu de données"
-      :large="true"
-      @search="doSearch"
-      @update:modelValue="updateQuery"
-    />
+  </div>
+  <div class="fr-container width-inherit">
     <HomeThemes
       v-if="config.themes"
       class-name="home-tile-list"
@@ -62,4 +80,25 @@ const showTopicChart = config.website.show_topic_charts
   font-size: 1.5rem;
   line-height: 1.5rem;
 }
+.banner {
+  padding-top: 5%;
+  padding-bottom: 5%;
+}
+.main-title {
+  text-align: left;
+  font-size: 48px;
+  line-height: 50px;
+  font-weight: bold;
+}
+.subtitle {
+  text-align: left;
+  font-size: 20px;
+  line-height: 28px;
+  font-style: italic;
+}
+.search-bar {
+  padding: 20px;
+  background-color: white;
+  border-radius: 10px;
+}
 </style>

src/views/LoginView.vue

@@ -38,7 +38,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="about">
+  <div class="fr-container width-inherit about">
     <h1>This is a login page</h1>
   </div>
 </template>

src/views/LogoutView.vue

@@ -24,7 +24,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="about">
+  <div class="fr-container width-inherit about">
     <h1>This is a logout page</h1>
   </div>
 </template>

src/views/SimplePageView.vue

@@ -21,7 +21,7 @@ onBeforeUpdate(() => {
 </script>
 
 <template>
-  <div>
+  <div class="fr-container width-inherit">
     <br /><br />
     <div v-html="markdown.render(content)" />
   </div>

src/views/bouquets/BouquetDetailView.vue

@@ -119,7 +119,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="fr-container--fluid fr-mt-4w fr-mb-4w">
+  <div class="fr-container width-inherit fr-container--fluid fr-mt-4w fr-mb-4w">
     <DsfrBreadcrumb :links="breadcrumbLinks" class="fr-mb-2w" />
     <DsfrButton
       class="backToPage fr-pl-0 fr-mb-2w"

src/views/bouquets/BouquetEditView.vue

@@ -288,7 +288,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="fr-container fr-mt-4w fr-mb-4w">
+  <div class="fr-container width-inherit fr-mt-4w fr-mb-4w">
     <div class="fr-grid-row">
       <div class="fr-col-12 fr-col-lg-7">
         <DsfrStepper :steps="steps" :current-step="currentStep" />

src/views/bouquets/BouquetsListView.vue

@@ -22,7 +22,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="fr-container--fluid fr-mt-4w fr-mb-4w">
+  <div class="fr-container width-inherit fr-container--fluid fr-mt-4w fr-mb-4w">
     <div class="fr-grid-row fr-mb-1w">
       <DsfrButton
         class="fr-mb-1w"

src/views/datasets/DatasetDetailView.vue

@@ -110,7 +110,7 @@ watchEffect(async () => {
 </script>
 
 <template>
-  <div class="fr-container--fluid fr-mt-4w fr-mb-4w">
+  <div class="fr-container width-inherit fr-container--fluid fr-mt-4w fr-mb-4w">
     <div class="fr-grid-row">
       <div
         v-if="dataset.organization"

src/views/datasets/DatasetsListView.vue

@@ -62,7 +62,7 @@ watchEffect(() => {
 </script>
 
 <template>
-  <div class="fr-container--fluid fr-mt-4w fr-mb-4w">
+  <div class="fr-container width-inherit fr-container--fluid fr-mt-4w fr-mb-4w">
     <h2 v-if="query">Résultats de recherche pour "{{ query }}"</h2>
     <h2 v-else>Jeux de données</h2>
     <div v-if="query && datasets?.length === 0" class="fr-mb-4w">
@@ -95,6 +95,7 @@ watchEffect(() => {
     </div>
   </div>
   <DsfrPagination
+    class="fr-container width-inherit"
     v-if="pages.length"
     :current-page="currentPage - 1"
     :pages="pages"

src/views/organizations/OrganizationDetailView.vue

@@ -51,7 +51,7 @@ watchEffect(() => {
 </script>
 
 <template>
-  <div class="fr-container--fluid fr-mt-4w fr-mb-4w">
+  <div class="fr-container width-inherit fr-container--fluid fr-mt-4w fr-mb-4w">
     <h1>{{ org.name }}</h1>
     <div v-html="description"></div>
 

src/views/organizations/OrganizationsListView.vue

@@ -25,7 +25,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="fr-container--fluid fr-mt-4w fr-mb-4w">
+  <div class="fr-container width-inherit fr-container--fluid fr-mt-4w fr-mb-4w">
     <ul class="fr-grid-row fr-grid-row--gutters es__tiles__list">
       <li v-for="org in organizations" class="fr-col-12 fr-col-lg-4">
         <Tile
@@ -39,6 +39,7 @@ onMounted(() => {
     </ul>
   </div>
   <DsfrPagination
+    class="fr-container width-inherit"
     v-if="pages.length"
     :current-page="currentPage - 1"
     :pages="pages"