responsive view-content

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

@@ -5294,7 +5294,6 @@ svg.ext {
 @media (max-width: 810px) {
   .path-ressources .layout-content .region-content #block-contenudelapageprincipale h2 {
     margin-left: 0;
-    line-height: 4rem;
   }
 }
 .path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content {
@@ -5456,13 +5455,6 @@ svg.ext {
     padding-bottom: 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-filters .buttons-filtres-ressources button.is-active {
-  background-color: rgb(9, 57, 139);
-  color: white;
-}
-.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-filters .buttons-filtres-ressources button.is-active a {
-  color: white;
-}
 .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-filters .buttons-filtres-ressources button {
   background-color: transparent;
   border: 1px solid black;
@@ -5529,6 +5521,13 @@ svg.ext {
 .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-filters .buttons-filtres-ressources button.button-publications---rapports a:hover::before {
   content: url("../images/pictos/ecrits-blanc.svg");
 }
+.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-filters .buttons-filtres-ressources button.is-active {
+  background-color: rgb(9, 57, 139);
+  color: white;
+}
+.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-filters .buttons-filtres-ressources button.is-active a {
+  color: white;
+}
 .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-filters .buttons-filtres-ressources button.is-active.button-videos {
   margin-top: 1rem;
 }
@@ -5674,6 +5673,11 @@ svg.ext {
   align-items: center;
   font-size: 1.7rem;
 }
+@media (max-width: 810px) {
+  .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:not(footer) h3 {
+    padding-left: 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 .view-type-slide:not(footer) h3.type-publications-issues-du-programme-eqld {
   border: none;
 }
@@ -5715,6 +5719,12 @@ svg.ext {
   display: inline-flex;
   align-items: center;
 }
+@media (max-width: 810px) {
+  .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:not(footer) .tout-voir {
+    left: 81vw;
+    top: -4.3rem;
+  }
+}
 .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:not(footer) .views-row-wrapper {
   display: flex;
   flex-direction: row;
@@ -5723,6 +5733,7 @@ svg.ext {
   width: 100% !important;
   display: flex;
   flex-direction: row;
+  transform: none;
 }
 .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:not(footer) .views-row-wrapper .slick-track .views-row {
   width: 20%;
@@ -5731,6 +5742,7 @@ svg.ext {
 }
 @media (max-width: 810px) {
   .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:not(footer) .views-row-wrapper {
+    padding-left: 2rem;
     flex-direction: column;
   }
   .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:not(footer) .views-row-wrapper .views-row {

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

@@ -123,9 +123,9 @@ jQuery(function ($) {
           breakpoint: 810,
           settings: {
             slidesToShow: 3,
-            arrows: false,
+            arrows: true,
             draggable: true,
-            centerMode: true,
+            centerMode: false,
           }
         }]
       });

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

@@ -20,7 +20,7 @@
                     margin-left: 28%;
                     @media (max-width:810px) {
                      margin-left: 0;
-                     line-height: 4rem;
+                    //  line-height: 4rem;
                     }
                 }
                 .layout--onecol{
@@ -174,14 +174,7 @@
                                                     padding-bottom: 1rem;
                                                 }
                                             }
-                                            button.is-active {
-                                                background-color: $blue-dark;
-                                                color: white;
-                                              
-                                                a {
-                                                  color: white;
-                                                }
-                                              }
+                                      
                                             button{
                                                 background-color: transparent;
                                                 // border-radius: 30px;
@@ -280,6 +273,12 @@
 
                                             }
                                             button.is-active{
+                                                background-color: $blue-dark;
+                                                color: white;
+                                              
+                                                a {
+                                                  color: white;
+                                                }
                                                 &.button-videos{
                                                     margin-top: 1rem;
                                                     a {
@@ -442,6 +441,9 @@
                                                 flex-direction: row;
                                                 align-items: center;
                                                 font-size: 1.7rem;
+                                                @media (max-width: 810px){
+                                                    padding-left: 2rem;
+                                                } 
                                             }
                                             h3.type-publications-issues-du-programme-eqld {
                                                 border: none;
@@ -492,6 +494,11 @@
                                                     //     content: url('data:image/svg+xml,<svg width="40" height="20" xmlns="http://www.w3.org/2000/svg" version="1.1"><polyline points="71.9,49 24.3,49 24.3,51 71.9,51 58.1,64.8 59.5,66.2 75.7,50 59.5,33.8 58.1,35.2" transform="scale(0.5) translate(0,-25)" fill="rgb(0,158,227)" stroke="rgb(0,158,227)" stroke-width="0.7"/></svg>');
                                                     // }
                                                 }
+                                                @media (max-width: 810px){
+                                                    left: 81vw;
+                                                    top: -4.3rem;
+                                                } 
+                                                
                                             }
                                             .views-row-wrapper{
                                                 display: flex;
@@ -500,6 +507,7 @@
                                                     width: 100% !important;
                                                     display: flex;
                                                     flex-direction: row;
+                                                    transform: none;
                                                     .views-row{
                                                         width: 20% ;
                                                         min-width: 250px ;
@@ -508,6 +516,7 @@
                                                 }
                                                 
                                                 @media (max-width: 810px){
+                                                    padding-left: 2rem;
                                                     flex-direction: column;
                                                     .views-row{
                                                         width: 100%;