Feat/home design 2024

configs/defis/config.yaml

@@ -223,7 +223,7 @@ website:
       href: 'https://www.data.gouv.fr/fr/suivi/'
     - label: 'Accessibilité : non conforme'
       to: '/accessibility'
-  logo_operator: ''
+  logo_operator:
   notice:
     display: false
     content: Notice avec un [lien beta](/beta) et du _style_

configs/ecospheres/config.yaml

@@ -28,8 +28,13 @@ website:
     style: 'blue-cumulus'
   # leave empty if not pertinent
   logo_operator:
+    src: '/logos/ecospheres-logo.svg'
+    show_in_header: false
+    footer:
+      width: '40px'
+      height: '219px'
   homepage:
-    title: 'La plateforme des données de la transition écologique'
+    title:
     subtitle:
     sections:
       - title:
@@ -47,25 +52,28 @@ website:
     display: true
     placeholder: Rechercher...
     dropdown:
-      - text: Rechercher {} dans les <strong>bouquets</strong>
-        route: bouquets
       - text: Rechercher {} dans les <strong>jeux de données</strong>
         route: datasets
+      - text: Rechercher {} dans les <strong>bouquets</strong>
+        route: bouquets
   search_bar:
     display: true
     placeholder: Rechercher une donnée environnementale
   secondary_search:
     display: false
     name:
     link:
-  footer_phrase: "Ce site est une déclinaison thématique de data.gouv.fr sur les données relatives à l'écologie."
+  footer_phrase: 'Ce site est une déclinaison thématique de data.gouv.fr sur les données relatives à la transition écologique et énergétique, réalisé par le Ministère de la Transition écologique, de l’Énergie, du Climat et de la Prévention des risques.'
   footer_external_links:
-    - label: 'ecologie.gouv.fr'
-      href: 'https://ecologie.gouv.fr'
-      title: 'ecologie.gouv.fr - nouvelle fenêtre'
     - label: 'data.gouv.fr'
       href: 'https://www.data.gouv.fr'
       title: 'data.gouv.fr - nouvelle fenêtre'
+    - label: 'legifrance.gouv.fr'
+      href: 'https://www.legifrance.gouv.fr/'
+      title: 'legifrance - nouvelle fenêtre'
+    - label: 'ecologie.gouv.fr'
+      href: 'https://ecologie.gouv.fr'
+      title: 'ecologie.gouv.fr - nouvelle fenêtre'
     - label: 'gouvernement.fr'
       href: 'https://www.gouvernement.fr'
       title: 'gouvernement.fr - nouvelle fenêtre'
@@ -89,6 +97,8 @@ website:
       to: /datasets
     - text: Bouquets
       to: /bouquets
+    - text: Organisations
+      to: /organizations
     - text: A propos
       to: /about
   router:

configs/meteo-france/config.yaml

@@ -132,7 +132,14 @@ website:
       href: 'https://www.data.gouv.fr/fr/suivi/'
     - label: 'Accessibilité : non conforme'
       to: '/accessibility'
-  logo_operator: 'https://static.data.gouv.fr/avatars/81/6374003e904fad9ddac7436315fd15-100.png'
+  logo_operator:
+    src: 'https://static.data.gouv.fr/avatars/81/6374003e904fad9ddac7436315fd15-100.png'
+    header:
+      width: '60px'
+      height: '60px'
+    footer:
+      width: '92px'
+      height: '92px'
   notice:
     display: false
     content: Notice avec un [lien beta](/beta) et du _style_

src/App.vue

@@ -41,13 +41,15 @@ const quickLinks = computed(() => {
   const headerButton = {
     label: button.label,
     icon: 'ri-lightbulb-line',
-    href: button.link
+    href: button.link,
+    iconRight: true
   }
 
   const logLink = {
     label: isLoggedIn.value ? 'Déconnexion' : 'Se connecter',
     icon: isLoggedIn.value ? 'ri-logout-box-r-line' : 'ri-account-circle-line',
-    to: isLoggedIn.value ? '/logout' : '/login'
+    to: isLoggedIn.value ? '/logout' : '/login',
+    iconRight: true
   }
 
   if (!config.website.oauth_option) {
@@ -63,7 +65,8 @@ onMounted(() => {
 
 const logotext = config.website.rf_title
 const servicetitle = config.website.title
-const logoOperator = config.website.logo_operator
+const logoOperator = config.website.logo_operator?.src
+const showLogoOperatorInHeader = config.website.logo_operator?.show_in_header
 const logoService = config.website.service_logo
 const showBadge = config.website.badge.display
 const badgeText = config.website.badge.text
@@ -130,7 +133,11 @@ watch(
     :show-search="config.website.header_search.display"
     :logo-text="logotext"
     :operator-img-src="logoOperator"
-    :operator-img-style="{ height: '60px', width: '60px' }"
+    :show-operator-logo="showLogoOperatorInHeader"
+    :operator-img-style="{
+      height: config.website.logo_operator?.header?.width,
+      width: config.website.logo_operator?.header?.height
+    }"
     :service-logo-src="logoService"
     :show-badge="showBadge"
     :badge-text="badgeText"
@@ -149,7 +156,10 @@ watch(
     class="fr-mt-16w"
     :logo-text="logotext"
     :operator-img-src="logoOperator"
-    :operator-img-style="{ height: '92px', width: '92px' }"
+    :operator-img-style="{
+      height: config.website.logo_operator?.footer?.width,
+      width: config.website.logo_operator?.footer?.height
+    }"
     :service-logo-src="logoService"
     :desc-text="footerPhrase"
     :ecosystem-links="footerExternalLinks"
@@ -165,4 +175,11 @@ watch(
 .justify-end {
   justify-content: flex-end;
 }
+
+.fr-footer__brand-link {
+  box-sizing: content-box;
+}
+.fr-footer__logo {
+  max-width: 100%;
+}
 </style>

src/components.d.ts

@@ -8,6 +8,7 @@ export {}
 declare module 'vue' {
   export interface GlobalComponents {
     BouquetCard: typeof import('./components/bouquets/BouquetCard.vue')['default']
+    BouquetCardHome: typeof import('./components/bouquets/BouquetCardHome.vue')['default']
     BouquetDatasetAccordionTitle: typeof import('./components/bouquets/BouquetDatasetAccordionTitle.vue')['default']
     BouquetDatasetCard: typeof import('./components/bouquets/BouquetDatasetCard.vue')['default']
     BouquetDatasetList: typeof import('./components/bouquets/BouquetDatasetList.vue')['default']
@@ -61,6 +62,7 @@ declare module 'vue' {
     ReusesList: typeof import('./components/ReusesList.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
+    SearchComponent: typeof import('./components/SearchComponent.vue')['default']
     SelectDataset: typeof import('./components/forms/dataset/SelectDataset.vue')['default']
     SelectSpatialCoverage: typeof import('./components/forms/SelectSpatialCoverage.vue')['default']
     SkipLinks: typeof import('./components/SkipLinks.vue')['default']

src/components/header/HeaderSearch.vue → src/components/SearchComponent.vue

@@ -14,12 +14,19 @@ defineProps({
   searchLabel: {
     type: String,
     required: true
+  },
+  placeholder: {
+    type: String,
+    default: ''
+  },
+  id: {
+    type: String,
+    required: true
   }
 })
 
 const emits = defineEmits(['search'])
 
-const placeholder = config.website.header_search.placeholder
 const dropdown = config.website.header_search.dropdown
 const query = ref('')
 const selectedMultiSearch = ref()
@@ -58,21 +65,21 @@ const dropdownLabel = (text: string) => {
   />
 
   <div v-else>
-    <label id="search-label" for="select-search" class="fr-sr-only"
-      >Rechercher. Saisissez un mot clé puis choisissez une des options situés
+    <label :id="`${id}-label`" :for="id" class="fr-sr-only">
+      Rechercher. Saisissez un mot clé puis choisissez une des options situés
       après le champ pour lancer la recherche dans la rubrique souhaitée</label
     >
     <Multiselect
-      id="select-search"
+      :id="id"
       v-model="selectedMultiSearch"
       class="select-search"
       :options="dropdown"
       label="text"
       track-by="route"
-      placeholder=""
+      :placeholder="placeholder"
       select-label=""
       deselect-label=""
-      aria-labelledby="search-label"
+      :aria-labelledby="`${id}-label`"
       aria-owns=""
       :multiple="false"
       :searchable="true"
@@ -93,7 +100,7 @@ const dropdownLabel = (text: string) => {
         <span class="fr-icon-search-line search-icon"></span>
       </template>
       <template #placeholder>
-        <span aria-hidden="true" class="visible-label">Rechercher</span>
+        <span aria-hidden="true" class="visible-label">{{ placeholder }}</span>
       </template>
     </Multiselect>
   </div>
@@ -115,6 +122,19 @@ const dropdownLabel = (text: string) => {
   .visible-label {
     margin-left: var(--icon-width);
   }
+  .multiselect__placeholder {
+    margin-inline-start: var(--icon-width);
+    font-style: italic;
+    color: var(--text-mention-grey);
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    width: 100%;
+    overflow: hidden;
+  }
+  ::placeholder {
+    font-style: italic;
+    color: var(--text-mention-grey);
+  }
 }
 :deep(.multiselect__tags) {
   border: 0;

src/components/bouquets/BouquetCardHome.vue

@@ -0,0 +1,144 @@
+<script setup lang="ts">
+import {
+  formatRelativeIfRecentDate,
+  OrganizationNameWithCertificate,
+  useOwnerName
+} from '@datagouv/components'
+import { toRef } from 'vue'
+import type { RouteLocationRaw } from 'vue-router'
+
+import OrganizationLogo from '@/components/OrganizationLogo.vue'
+import type { Topic } from '@/model/topic'
+import { getOwnerAvatar } from '@/utils/avatar'
+import { useExtras } from '@/utils/bouquet'
+import { useTopicsConf } from '@/utils/config'
+import { useSpatialCoverage } from '@/utils/spatial'
+import { useThemeOptions } from '@/utils/theme'
+
+const { topicsSlug } = useTopicsConf()
+
+const props = defineProps({
+  bouquet: {
+    type: Object as () => Topic,
+    required: true
+  }
+})
+
+const bouquetRef = toRef(props, 'bouquet')
+const spatialCoverage = useSpatialCoverage(bouquetRef)
+
+const ownerName = useOwnerName(props.bouquet)
+
+const { theme, subtheme, datasetsProperties } = useExtras(bouquetRef)
+
+const nbData: number = datasetsProperties.value.length
+
+const bouquetLink: RouteLocationRaw = {
+  name: `${topicsSlug}_detail`,
+  params: { bid: props.bouquet.slug }
+}
+
+const { themeColors } = useThemeOptions(theme)
+</script>
+
+<template>
+  <article
+    class="fr-my-md-3w fr-px-3w fr-py-2w border border-default-grey fr-enlarge-link"
+  >
+    <div
+      v-if="bouquet.private"
+      class="absolute top-0 fr-grid-row fr-grid-row--middle fr-mt-n3v"
+    >
+      <p class="fr-badge fr-badge--mention-grey fr-mr-1w">Brouillon</p>
+    </div>
+    <div class="fr-grid-row">
+      <div class="fr-col-12">
+        <DsfrTag
+          class="fr-card__detail fr-mt-1w fr-mb-1w card__tag"
+          :label="subtheme"
+        />
+      </div>
+    </div>
+    <div class="fr-grid-row fr-pt-2v">
+      <div class="fr-col-12 fr-col-sm-3">
+        <OrganizationLogo
+          v-if="bouquet.organization"
+          :size="64"
+          :object="bouquet"
+        />
+        <div v-else class="border fr-p-1-5v fr-mr-1-5v" style="width: 77px">
+          <img
+            :src="getOwnerAvatar(bouquet)"
+            alt=""
+            loading="lazy"
+            class="owner-avatar"
+            height="64"
+            width="64"
+          />
+        </div>
+      </div>
+      <div class="fr-col-12 fr-col-sm-9 fr-pl-2v">
+        <h3 class="fr-mb-1v fr-grid-row h4">
+          <RouterLink :to="bouquetLink" class="text-grey-500">
+            {{ bouquet.name }}
+          </RouterLink>
+        </h3>
+        <p
+          v-if="bouquet.organization || bouquet.owner"
+          class="fr-m-0 fr-text--sm"
+        >
+          Par
+          <template v-if="bouquet.organization">
+            <OrganizationNameWithCertificate
+              :organization="bouquet.organization"
+            />
+          </template>
+          <template v-else>{{ ownerName }}</template>
+        </p>
+      </div>
+    </div>
+    <div class="fr-grid-row fr-grid-row--gutters fr-grid-row--center">
+      <div class="fr-col-12">
+        <p class="fr-m-0 fr-text--sm flex align-center fr-pt-3v">
+          <VIcon name="ri:time-line" class="fr-mr-1v text-grey-380" />
+          mis à jour {{ formatRelativeIfRecentDate(bouquet.last_modified) }}
+        </p>
+        <p class="fr-tag fr-mt-2v">
+          <VIcon name="ri-database-2-line" class="fr-mr-1v" />
+          <span class="fr-mr-1v">
+            {{
+              `${nbData > 0 ? nbData : 'Aucune'} donnée${nbData > 1 ? 's' : ''}`
+            }}
+          </span>
+        </p>
+        <p v-if="spatialCoverage" class="fr-tag fr-ml-1w">
+          <VIcon name="ri-map-2-line" class="fr-mr-1v" />
+          <span class="fr-mr-1v">
+            {{ spatialCoverage.name }}
+          </span>
+        </p>
+      </div>
+    </div>
+  </article>
+</template>
+
+<style scoped>
+.owner-avatar {
+  margin-bottom: -6px;
+  display: inline-block;
+}
+.card__tag {
+  color: v-bind('themeColors.color');
+  background-color: v-bind('themeColors.background');
+}
+
+.fr-card__detail,
+:deep(h3) {
+  max-width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: block;
+  line-height: inherit;
+}
+</style>