grille si filtered

web/themes/custom/eql/dist/assets/css/bundle.css

@@ -5533,6 +5533,18 @@ svg.ext {
   flex-wrap: wrap;
   width: 100%;
 }
+.path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-views-blockbase-de-donnees-block-1 .view-base-de-donnees .view-content .grid-layout,
+.path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-views-blockbase-de-donnees-block-1 .view-base-de-donnees .view-content .grid-layout-inner {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  gap: 2rem;
+}
+.path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-views-blockbase-de-donnees-block-1 .view-base-de-donnees .view-content .grid-layout .views-row,
+.path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-views-blockbase-de-donnees-block-1 .view-base-de-donnees .view-content .grid-layout-inner .views-row {
+  background: #fff;
+  border: 1px solid #ccc;
+  padding: 1rem;
+}
 .path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-views-blockbase-de-donnees-block-1 .view-base-de-donnees .view-content .view-type-slide.type-publication-issue-du-programme-eqld {
   order: 1;
 }

web/themes/custom/eql/eql.theme

@@ -261,6 +261,7 @@ function eql_preprocess_views_view_unformatted(array &$variables) {
 
   $variables['unclassified_rows'] = $unclassified_rows;
   $variables['rows'] = []; // désactive affichage par défaut
+  $variables['is_filtered'] = !$filter_slides;
 }
 
 

web/themes/custom/eql/scripts/main.js

@@ -110,26 +110,32 @@ jQuery(function ($) {
         }
       }
     });
+    document.addEventListener('DOMContentLoaded', () => {
+      const wrapper = document.querySelector('.view-content');
     
-    $('.path-ressources .view:not(.view-partenaires) .view-content .view-type-slide .views-row-wrapper').slick({
+      if (wrapper && !wrapper.classList.contains('grid-layout')) {
-      slidesToShow: 3,
+        $('.path-ressources .view:not(.view-partenaires) .view-content .view-type-slide .views-row-wrapper').slick({
-      dots: false,
-      arrows: true,
-      infinite: false,
-      centerMode: false,
-      draggable: true,
-
-      responsive: [{
-        breakpoint: 810,
-        settings: {
           slidesToShow: 3,
-          arrows: false,
+          dots: false,
+          arrows: true,
+          infinite: false,
+          centerMode: false,
           draggable: true,
-          centerMode: true,
+    
-        }
+          responsive: [{
-      }]
+            breakpoint: 810,
+            settings: {
+              slidesToShow: 3,
+              arrows: false,
+              draggable: true,
+              centerMode: true,
+            }
+          }]
+        });
+      }
     });
 
+
   // Classes media → .wrapper-ressource
   $(".wrapper-ressource").each(function () {
     const media = $(this).find(".field--name-field-type-de-media").text().trim();

web/themes/custom/eql/scss/pages/ressources.scss

@@ -293,6 +293,19 @@
                                         flex-direction: row;
                                         flex-wrap: wrap;
                                         width: 100%;
+                                        .grid-layout,
+                                        .grid-layout-inner {
+                                          display: grid;
+                                          grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+                                          gap: 2rem;
+                                        
+                                          .views-row {
+                                            background: #fff;
+                                            border: 1px solid #ccc;
+                                            padding: 1rem;
+                                          }
+                                        }
+                                        
                                         .view-type-slide.type-publication-issue-du-programme-eqld{
                                             order: 1;
                                             &::before{

web/themes/custom/eql/templates/views-view-unformatted--base-de-donnees.html.twig

@@ -16,30 +16,42 @@
  */
 #}
 
+{#
+/**
+ * Custom template to display unformatted rows for the view "base_de_donnees".
+ */
+#}
+
 {%
   set view_wrapper_class = [
-  default_row_class ? 'views-row-wrapper',
+    default_row_class ? 'views-row-wrapper',
   ]
 %}
-{% if grouped_rows is defined %}
-  {% for type_class, group in grouped_rows %}
-    <div class="view-type-slide {{ type_class }}">
-      <h3 class="{{ type_class }}">{{ group.label }}</h3>
-      <button class="tout-voir" type="button" style="" target="_blank"><a href="https://stage.eql.figli.io/ressources?field_type_de_media_target_id=All&field_type_de_ressource_target_id=595&field_mots_clefs_target_id=All&field_date_de_parution_value=&combine="> Tout voir</a></button>
 
-      <div class="views-row-wrapper">
+<div class="view-content {{ is_filtered ? 'grid-layout' : 'use-slider' }}">
-        {% for row in group.rows %}
+  {% if grouped_rows is defined %}
-          <div{{ row.attributes.addClass('views-row') }}>
+    {% for type_class, group in grouped_rows %}
-            {{ row.content }}
+      <div class="view-type-slide {{ type_class }}">
-          </div>
+        <h3 class="{{ type_class }}">{{ group.label }}</h3>
-        {% endfor %}
+{% if not is_filtered %}
-      </div>
+        <button class="tout-voir" type="button" style="" target="_blank"><a href="http://dev.eql.fr//ressources?field_type_de_media_target_id=All&field_type_de_ressource_target_id=595&field_mots_clefs_target_id=All&field_date_de_parution_value=&combine="> Tout voir</a></button>
-    </div>
-  {% endfor %}
-{% else %}
-  {% for row in rows %}
-    <div{{ row.attributes.addClass('views-row') }}>
-      {{ row.content }}
-    </div>
-  {% endfor %}
 {% endif %}
+        <div class="{{ is_filtered ? 'grid-layout-inner' : 'views-row-wrapper' }}">
+          {% for row in group.rows %}
+            <div{{ row.attributes.addClass('views-row') }}>
+              {{ row.content }}
+            </div>
+          {% endfor %}
+        </div>
+      </div>
+    {% endfor %}
+  {% else %}
+    <div class="grid-layout-inner">
+      {% for row in rows %}
+        <div{{ row.attributes.addClass('views-row') }}>
+          {{ row.content }}
+        </div>
+      {% endfor %}
+    </div>
+  {% endif %}
+</div>