WIP

opendatateam · Jan 22, 2025 · 25cf943 · 25cf943
1 parent 208e556
commit 25cf943
Showing 1 changed file with 79 additions and 99 deletions.
diff --git a/src/custom/ecospheres/views/HomeView.vue b/src/custom/ecospheres/views/HomeView.vue
@@ -11,9 +11,6 @@ import type { Topic } from '@/model/topic'
 
 import { useTopicStore } from '@/store/TopicStore'
 
-import contributeSvg from '../assets/contribuer.svg'
-import explorerSvg from '../assets/explorer.svg'
-
 const topicStore = useTopicStore()
 const router = useRouter()
 const lastTopics: ComputedRef<Topic[]> = computed(() =>
@@ -57,51 +54,59 @@ const dropdown = config.website.header_search.dropdown
         </p>
       </div>
     </section>
-    <section class="fr-container explore-contribute fr-px-0">
-      <ul class="fr-grid-row fr-grid-row--gutters fr-pb-12v" role="list">
-        <li class="fr-col-12 fr-col-md-6">
-          <DsfrCard
-            :no-arrow="true"
-            title="Explorer"
-            description="Accéder aux données des services et opérateurs de l’État et d’une sélection d’organisations publiant des données utiles aux politiques du Ministère en charge de l&rsquo;environnement."
-            size="small"
-            :horizontal="true"
-            :img-src="explorerSvg"
-            alt-img=""
-            class="explorer"
-            :links-group="[
-              {
-                label: 'Parcourir les données',
-                to: router.resolve({ name: 'datasets' }).href
-              },
-              {
-                label: 'Découvrir des usages',
-                to: router.resolve({ name: 'bouquets' }).href
-              }
-            ]"
-          />
+    <section class="fr-container explore-contribute">
+      <ul class="fr-grid-row flex-gap fr-pb-12v" role="list">
+        <li class="home-card border fr-p-6v">
+          <img src="../assets/explorer.svg" alt="" />
+          <div class="card__content">
+            <h2 class="h3">Explorer</h2>
+            <p>
+              Accéder aux données des services et opérateurs de l’État et d’une
+              sélection d’organisations publiant des données utiles aux
+              politiques du Ministère en charge de l&rsquo;environnement.
+            </p>
+            <RouterLink
+              :to="{
+                name: 'datasets'
+              }"
+              class="fr-link fr-icon-arrow-right-line fr-link--icon-right"
+            >
+              Parcourir les données
+            </RouterLink>
+            <RouterLink
+              :to="{
+                name: 'bouquets'
+              }"
+              class="fr-link fr-icon-arrow-right-line fr-link--icon-right"
+            >
+              Découvrir des usages
+            </RouterLink>
+          </div>
         </li>
-        <li class="fr-col-12 fr-col-md-6">
-          <DsfrCard
-            :no-arrow="true"
-            title="Contribuer"
-            description="Participez au référencement et à l’articulation des données utiles à l’appui des politiques publiques grâce aux fonctionnalités de catalogage de data.gouv.fr et au concept de bouquet de données."
-            size="small"
-            :horizontal="true"
-            :img-src="contributeSvg"
-            alt-img=""
-            class="contribute"
-            :links-group="[
-              {
-                label: 'Publier des données',
-                link: 'https://www.data.gouv.fr/fr/pages/onboarding/producteurs/'
-              },
-              {
-                label: 'Partager des usages',
-                to: router.resolve({ name: 'bouquets_add' }).href
-              }
-            ]"
-          />
+
+        <li class="home-card border fr-p-6v">
+          <img src="../assets/contribuer.svg" alt="" />
+          <div class="card__content">
+            <h2 class="h3">Contribuer</h2>
+            <p>
+              Participez au référencement et à l’articulation des données utiles
+              à l’appui des politiques publiques grâce aux fonctionnalités de
+              catalogage de data.gouv.fr et au concept de bouquet de données.
+            </p>
+            <a
+              href="https://www.data.gouv.fr/fr/pages/onboarding/producteurs/"
+              class="fr-link fr-icon-arrow-right-line fr-link--icon-right"
+              >Publier des données</a
+            >
+            <RouterLink
+              :to="{
+                name: 'bouquets_add'
+              }"
+              class="fr-link fr-icon-arrow-right-line fr-link--icon-right"
+            >
+              Partager des usages
+            </RouterLink>
+          </div>
         </li>
       </ul>
     </section>
@@ -276,70 +281,45 @@ const dropdown = config.website.header_search.dropdown
   }
 }
 
-:deep(.fr-card__content) {
-  padding-left: 1rem;
-  padding-bottom: 0;
+.explore-contribute {
+  --gap: clamp(1.5rem, 0.7241rem + 3.8793vw, 3.75rem);
 
-  .fr-card__desc {
-    font-size: 1rem;
+  .fr-grid-row > li {
+    flex: 1 1 45%;
+    min-inline-size: 26ch;
+    container-type: inline-size;
+    container-name: card;
   }
 }
-:deep(.fr-card--sm .fr-card__footer) {
-  padding: 0 0 2rem;
-}
-
-.explore-contribute :deep(.fr-card__body) {
-  padding-left: 1.5rem;
-}
-.explore-contribute .fr-grid-row--gutters .fr-col-12 {
-  padding: 1.75rem;
-}
 
 :deep(.fr-card__header) {
-  flex: 0 0 33%;
-
-  .fr-card__img img {
-    object-fit: contain;
-    object-position: bottom;
+  padding: 1.5rem 0 0 1.5rem;
+  flex: 0 1 33%;
+
+  .fr-card__img {
+    max-inline-size: 200px;
+    img {
+      min-inline-size: 33cqi;
+      object-fit: contain;
+      object-position: bottom left;
+    }
   }
 }
-
-.explorer :deep(.fr-card__img) {
-  overflow: hidden;
+:deep(.fr-card__body) {
+  flex: 1 1 66%;
+  min-inline-size: 50%;
 }
-.explorer :deep(.fr-card__img img) {
-  object-position: -25px 65%;
-  transform: scale(1.3);
-}
-
-@media (max-width: 768px) {
-  :deep(.fr-card__header) {
-    flex: 0 0 25%;
-  }
-
-  :deep(.fr-card__header .fr-card__img) {
-    height: 120px;
-    overflow: hidden;
-  }
 
-  :deep(.fr-card__header .fr-card__img img) {
-    object-position: left bottom;
-    transform: inherit;
-  }
-
-  .explorer :deep(.fr-card__img img) {
-    position: relative;
-    top: 25%;
-    left: 1rem;
-    height: 65%;
-  }
+@container card (inline-size > 28rem) {
+  :deep(.fr-card) {
+    flex-direction: row;
 
-  .contribute :deep(.fr-card__img img) {
-    position: relative;
-    left: 1rem;
-    height: 120%;
+    .fr-card__img {
+      max-inline-size: 200px;
+    }
   }
 }
+
 .main-title-v2 {
   text-align: center;
   font-size: clamp(1.375rem, 0.4698rem + 4.5259vw, 4rem);