fix(homepage): better discover responsive

opendatateam · Jan 22, 2025 · 208e556 · 208e556
1 parent f8b155e
commit 208e556
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 16 deletions.
diff --git a/src/components/bouquets/BouquetCard.vue b/src/components/bouquets/BouquetCard.vue
@@ -47,9 +47,7 @@ const { themeColors } = useThemeOptions(theme)
 </script>
 
 <template>
-  <article
-    class="fr-my-1w fr-px-3w fr-py-2w border border-default-grey fr-enlarge-link"
-  >
+  <article class="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"

diff --git a/src/components/bouquets/BouquetList.vue b/src/components/bouquets/BouquetList.vue
@@ -170,8 +170,8 @@ defineExpose({
       </div>
     </div>
   </div>
-  <div class="bouquets-list-container fr-container fr-mb-4w border-top">
-    <ul class="fr-mt-3w fr-pl-0" role="list">
+  <div class="fr-mb-4w border-top">
+    <ul class="fr-grid-row flex-gap fr-mt-3w fr-pl-0" role="list">
       <li v-for="bouquet in bouquets" :key="bouquet.id" class="fr-col-12">
         <BouquetCard :bouquet="bouquet" />
       </li>
@@ -180,9 +180,7 @@ defineExpose({
 </template>
 
 <style scoped>
-/* "revert" gutters — simpler than w/o gutters */
-.bouquets-list-container {
-  padding-right: 0;
-  padding-left: 0;
+.fr-grid-row {
+  --gap: 1rem;
 }
 </style>
diff --git a/src/custom/ecospheres/views/HomeView.vue b/src/custom/ecospheres/views/HomeView.vue
@@ -112,7 +112,7 @@ const dropdown = config.website.header_search.dropdown
           territoriales
         </h2>
 
-        <div class="bg-white fr-py-4w">
+        <div class="bg-white border fr-py-4w">
           <div class="bg-grey">
             <ul class="fr-grid-row flex-gap organize-data" role="list">
               <li class="fr-grid-row">
@@ -178,12 +178,8 @@ const dropdown = config.website.header_search.dropdown
     </section>
     <section class="fr-container fr-py-12v">
       <h2>Les bouquets à découvrir</h2>
-      <ul class="fr-grid-row fr-grid-row--gutters fr-mb-2w" role="list">
-        <li
-          v-for="topic in lastTopics"
-          :key="topic.id"
-          class="fr-col-12 fr-col-xl-4"
-        >
+      <ul class="fr-grid-row discover fr-mb-2w" role="list">
+        <li v-for="topic in lastTopics" :key="topic.id">
           <BouquetCard :bouquet="topic" :hide-description="true" />
         </li>
       </ul>
@@ -245,6 +241,18 @@ const dropdown = config.website.header_search.dropdown
     margin-bottom: 0;
   }
 }
+.discover {
+  gap: 1.5rem;
+
+  & > li {
+    flex: 1 1 30%;
+    min-inline-size: 24ch;
+  }
+}
+
+.discover :deep(article) {
+  block-size: 100%;
+}
 
 :deep(.fr-links-group) {
   li {