Merge pull request #240 from ecolabdata/feat/harmonize-titles

Harmonize titles and containers

src/App.vue

@@ -100,12 +100,7 @@ const badgeStyle = ref(config.website.badge.style)
     </template>
   </Header>
 
-  <div class="fr-header__body">
-    <div class="fr-container width-inherit"></div>
-    <div>
-      <RouterView />
-    </div>
-  </div>
+  <RouterView />
 
   <DsfrFooter class="fr-mt-8w" :mandatory-links="[]"></DsfrFooter>
 </template>

src/components/TopicList.vue

@@ -21,7 +21,7 @@
       <a href="/admin/bouquets/add" target="_blank">en créant un</a>
     </p>
   </div>
-  <div class="fr-container--fluid fr-mt-4w fr-mb-4w">
+  <div class="fr-container fr-mt-4w fr-mb-4w">
     <ul class="fr-grid-row fr-grid-row--gutters es__tiles__list fr-mt-1w">
       <li v-for="bouquet in bouquets" class="fr-col-12 fr-col-lg-6">
         <Tile

src/components/header/Header.vue

@@ -97,7 +97,7 @@ defineEmits<{
 <template>
   <header role="banner" class="fr-header">
     <div class="fr-header__body">
-      <div class="fr-container width-inherit">
+      <div class="fr-container">
         <div class="fr-header__body-row">
           <div class="fr-header__brand fr-enlarge-link">
             <div class="fr-header__brand-top">

src/custom/meteo/views/FormMF.vue

@@ -125,8 +125,9 @@ const showLoader = ref(false)
 </script>
 
 <template>
-  <div class="fr-container">
-    <br />
+  <div class="fr-container fr-mt-4w fr-mb-4w">
+    <h1>Recherche guidée</h1>
+    <p>Utilisez ce formulaire pour trouver un fichier en particulier.</p>
     <DsfrSelect
       :model-value="selectedDataPack"
       :options="optionsDataPack"

src/views/AboutView.vue

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

src/views/HomeView.vue

@@ -80,7 +80,7 @@ const goToPage = (page) => {
       </div>
     </div>
   </div>
-  <div class="fr-container width-inherit">
+  <div class="fr-container">
     <HomeThemes
       v-if="config.themes"
       :selected-theme-name="$route.query.theme"

src/views/LoginView.vue

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

src/views/LogoutView.vue

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

src/views/SimplePageView.vue

@@ -21,8 +21,7 @@ watchEffect(async () => {
 </script>
 
 <template>
-  <div class="fr-container width-inherit">
-    <br /><br />
+  <div class="fr-container fr-mt-4w fr-mb-4w">
     <!-- eslint-disable-next-line vue/no-v-html -->
     <div v-html="markdown.render(content)" />
   </div>

src/views/bouquets/BouquetDetailView.vue

@@ -119,7 +119,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="fr-container width-inherit fr-container--fluid fr-mt-4w fr-mb-4w">
+  <div class="fr-container 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 width-inherit fr-mt-4w fr-mb-4w">
+  <div class="fr-container 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

@@ -1,5 +1,5 @@
 <template>
-  <div class="fr-container width-inherit fr-container--fluid fr-mt-4w fr-mb-4w">
+  <div class="fr-container fr-mt-4w fr-mb-4w">
     <DsfrBreadcrumb class="breadcrumb" :links="breadcrumbList" />
     <div :class="classDependingOnBreadcrumb">
       <div className="fr-grid-row topicListView">

src/views/datasets/DatasetDetailView.vue

@@ -187,20 +187,18 @@ watchEffect(async () => {
 </script>
 
 <template>
-  <div class="fr-container fr-container--fluid fr-pl-2v">
-    <DsfrBreadcrumb class="fr-pl-2v" :links="links" />
+  <div class="fr-container">
+    <DsfrBreadcrumb :links="links" />
   </div>
-  <div
-    class="fr-container datagouv-components width-inherit fr-container--fluid fr-mt-2w fr-mb-4w fr-p-2v"
-  >
-    <div class="fr-grid-row">
-      <div class="fr-col-12 fr-col-md-8 fr-p-1w">
+  <div class="fr-container datagouv-components fr-mb-4w">
+    <div class="fr-grid-row fr-grid-row--gutters">
+      <div class="fr-col-12 fr-col-md-8">
         <h1>{{ dataset.title }}</h1>
         <ReadMore max-height="600">
           <div v-html="description"></div>
         </ReadMore>
       </div>
-      <div v-if="dataset.organization" class="fr-col-12 fr-col-md-4 fr-p-1w">
+      <div v-if="dataset.organization" class="fr-col-12 fr-col-md-4">
         <h2 id="producer" class="subtitle fr-mb-1v">Producteur</h2>
         <div class="fr-grid-row fr-grid-row--middle">
           <div class="fr-col-auto">

src/views/datasets/DatasetsListView.vue

@@ -20,6 +20,7 @@ const selectedTopicId = ref(null)
 const datasets = computed(() => store.datasets)
 const pages = computed(() => store.pagination)
 
+const title = config.website.title
 const topicsConf = config.website.list_highlighted_topics
 const topicOptions = computed(() => {
   if (!topicsConf?.length) return
@@ -62,9 +63,12 @@ watchEffect(() => {
 </script>
 
 <template>
-  <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 class="fr-container fr-mt-4w fr-mb-4w">
+    <h1>Jeux de données</h1>
+    <p v-if="query">Résultats de recherche pour "{{ query }}".</p>
+    <p v-else>
+      Rechercher parmi tous les jeux de données présents sur {{ title }}.
+    </p>
     <div v-if="query && datasets?.length === 0" class="fr-mb-4w">
       Aucun résultat pour cette recherche.
     </div>
@@ -95,7 +99,7 @@ watchEffect(() => {
     </div>
   </div>
   <DsfrPagination
-    class="fr-container width-inherit"
+    class="fr-container"
     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 width-inherit fr-container--fluid fr-mt-4w fr-mb-4w">
+  <div class="fr-container fr-mt-4w fr-mb-4w">
     <h1>{{ org.name }}</h1>
     <div v-html="description"></div>
 

src/views/organizations/OrganizationsListView.vue

@@ -2,6 +2,8 @@
 import { ref, onMounted } from 'vue'
 import { useLoading } from 'vue-loading-overlay'
 
+import config from '@/config'
+
 import Tile from '../../components/Tile.vue'
 import { useOrganizationStore } from '../../store/OrganizationStore'
 
@@ -12,6 +14,8 @@ const currentPage = ref(1)
 const pages = store.getPagination()
 const organizations = ref([])
 
+const title = config.website.title
+
 async function onUpdatePage(page) {
   const loader = $loading.show()
   currentPage.value = page + 1
@@ -25,7 +29,9 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="fr-container width-inherit fr-container--fluid fr-mt-4w fr-mb-4w">
+  <div class="fr-container fr-mt-4w fr-mb-4w">
+    <h1>Organisations</h1>
+    <p>Rechercher parmi toutes les organisations présentes sur {{ title }}.</p>
     <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,7 +45,7 @@ onMounted(() => {
     </ul>
   </div>
   <DsfrPagination
-    class="fr-container width-inherit"
+    class="fr-container"
     v-if="pages.length"
     :current-page="currentPage - 1"
     :pages="pages"