responsive slide ressources

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

@@ -5293,7 +5293,7 @@ svg.ext {
 }
 @media (max-width: 810px) {
   .path-ressources .layout-content .region-content #block-contenudelapageprincipale h2 {
-    margin-left: 0;
+    margin-left: 2rem;
     text-align: left;
     line-height: 4rem;
   }
@@ -5315,14 +5315,14 @@ svg.ext {
 }
 @media (max-width: 810px) {
   .path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-config-pages-block {
-    margin-left: 0;
-    width: 90%;
+    margin-left: 2rem;
+    width: 85%;
   }
 }
 @media (max-width: 479px) {
   .path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-config-pages-block {
     order: 1;
-    margin-left: 0;
+    margin-left: 2rem;
   }
 }
 .path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-config-pages-block .config_pages--base-de-donnees--full {
@@ -5331,7 +5331,6 @@ svg.ext {
 @media (max-width: 810px) {
   .path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-config-pages-block .config_pages--base-de-donnees--full {
     padding-top: 1rem;
-    padding-left: 2rem;
     margin-top: 1rem;
   }
 }
@@ -5711,6 +5710,11 @@ svg.ext {
   width: 110vw;
   z-index: 0;
 }
+@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)::before {
+    left: 0;
+  }
+}
 .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) > * {
   position: relative;
   z-index: 1;
@@ -5729,6 +5733,12 @@ 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) h3 {
     padding-left: 2rem;
+    width: 70%;
+  }
+}
+@media (max-width: 479px) {
+  .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 {
+    width: 65% !important;
   }
 }
 .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 {
@@ -5773,7 +5783,12 @@ 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) .tout-voir {
     left: 81vw;
-    top: -4.3rem;
+  }
+}
+@media (max-width: 479px) {
+  .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: 76vw;
+    top: -1.5rem;
   }
 }
 .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 {
@@ -5797,18 +5812,31 @@ svg.ext {
     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 {
-    width: 100%;
+    width: 100% !important;
   }
 }
 .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-next::before {
   content: url("../images/pictos/fleche-droite-dans-rond.png");
-  display: block;
+  display: inline-block;
+}
+@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 .slick-next::before {
+    transform: scale(0.5); /* Réduction à 50% */
+    transform-origin: top left; /* Point d’ancrage du redimensionnement */
+  }
 }
 .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-prev::before {
   content: url("../images/pictos/fleche-droite-dans-rond.png");
   display: block;
+  display: inline-block;
   transform: scaleX(-1);
 }
+@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 .slick-prev::before {
+    transform: scale(-0.5, 0.5);
+    transform-origin: top right; /* Point d’ancrage du redimensionnement */
+  }
+}
 .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-prev.slick-disabled::before,
 .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-next.slick-disabled::before {
   opacity: 0 !important;
@@ -5816,6 +5844,19 @@ 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-content .view-type-slide:not(footer) .views-row-wrapper .slick-next {
   right: 10%;
 }
+@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 .slick-prev {
+    left: -10%;
+  }
+  .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-next {
+    right: 2%;
+  }
+}
+@media (max-width: 479px) {
+  .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-prev {
+    left: -15%;
+  }
+}
 
 .carousel {
   display: none;
@@ -6804,6 +6845,11 @@ article.node-type-ressource .wrapper-ressource .field--name-title h2 a {
   font-weight: 900;
   font-style: normal;
 }
+@media (max-width: 810px) {
+  article.node-type-ressource .wrapper-ressource .field--name-title h2 {
+    line-height: 0 !important;
+  }
+}
 article.node-type-ressource .wrapper-ressource .field--name-field-auteur-s- {
   grid-column: 2;
   margin-top: 0.5rem;
@@ -6965,4 +7011,8 @@ article.node-type-ressource.type-paroles-de-laureats .wrapper-ressource .field--
 }
 article.node-type-ressource.type-presse .field--name-field-images {
   display: none;
+}
+article.node-type-ressource article.node-type-ressource.type-les-projets-en-images .views-row-wrapper {
+  display: flex;
+  background: lawngreen;
 }

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

@@ -122,10 +122,12 @@ jQuery(function ($) {
         responsive: [{
           breakpoint: 810,
           settings: {
-            slidesToShow: 3,
-            arrows: true,
+            slidesToShow: 1,
+            dots: true,
+            arrows: false,
             draggable: true,
-            centerMode: false,
+            centerMode: true,
+
           }
         }]
       });

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

@@ -20,7 +20,7 @@
                     margin-left: 28%;
                     
                     @media (max-width:810px) {
-                     margin-left: 0;
+                     margin-left: 2rem;
                      text-align: left;
                      line-height: 4rem;
                     }
@@ -43,19 +43,20 @@
                             margin: auto;
                             margin-left: 28%;
                             @media (max-width:810px) {
-                                margin-left: 0;
-                                width: 90%;
+                                margin-left: 2rem;
+                                width: 85%;
                                }
                             @media (max-width:479px) {
                                 order: 1;
-                                margin-left: 0;
+                                margin-left: 2rem;
+                                // margin-right: 2rem;
                             }
 
                                 .config_pages--base-de-donnees--full{
                                     grid-column: 1 / span 5;
                                     @media (max-width: 810px){
                                         padding-top: 1rem;
-                                        padding-left: 2rem;
+                                        // padding-left: 2rem;
                                         margin-top:1rem;
                                     }
                                     @media (max-width: 479px){
@@ -486,6 +487,9 @@
                                                 height: 100%;
                                                 width: 110vw;
                                                 z-index: 0;
+                                                @media (max-width: 810px){
+                                                    left: 0;
+                                                } 
                                             }
                                             > * {
                                                 position: relative;
@@ -505,6 +509,10 @@
                                                 margin-block: 0em;
                                                 @media (max-width: 810px){
                                                     padding-left: 2rem;
+                                                    width: 70%;
+                                                } 
+                                                @media (max-width: 479px){
+                                                    width: 65% !important;
                                                 } 
                                             }
                                             h3.type-publications-issues-du-programme-eqld {
@@ -518,6 +526,7 @@
                                                 &:before{
                                                     content:url("../images/pictos/picto-ressource-paroleslaureats.svg");
                                                     padding-right: 1rem;
+
                                                 }
                                             }
                                             h3.type-les-projets-en-images {
@@ -525,12 +534,14 @@
                                                 &:before{
                                                     content:url("../images/pictos/picto-ressource-projetsimages.svg");
                                                     padding-right: 1rem;
+
                                                 }
                                             }
                                             h3.type-presse {
                                                 &:before{
                                                     content:url("../images/pictos/picto-ressource-presse.svg");
                                                     padding-right: 1rem;
+                                                   
                                                 }
                                             }
 
@@ -557,7 +568,11 @@
                                                 }
                                                 @media (max-width: 810px){
                                                     left: 81vw;
-                                                    top: -4.3rem;
+                                                    // top: -4.3rem;
+                                                } 
+                                                @media (max-width: 479px){
+                                                    left: 76vw;
+                                                    top: -1.5rem;
                                                 } 
                                                 
                                             }
@@ -580,19 +595,29 @@
                                                     padding-left: 2rem;
                                                     flex-direction: column;
                                                     .views-row{
-                                                        width: 100%;
+                                                        width: 100% !important;
                                                     }
                                                 } 
                                                 .slick-next::before{
                                                     content:url("../images/pictos/fleche-droite-dans-rond.png");
-                                                    display: block;
+                                                    // display: block;
+                                                    display: inline-block;
+                                                    @media (max-width: 810px){
+                                                        transform: scale(0.5); /* Réduction à 50% */
+                                                    transform-origin: top left; /* Point d’ancrage du redimensionnement */
+                                                    } 
                                                 }
                                                 
                                                 .slick-prev::before{
                                                     content:url("../images/pictos/fleche-droite-dans-rond.png");
                                                     display: block;
+                                                    display: inline-block;
                                                     transform: scaleX(-1);
-                                                    // display: none;
+                                                    @media (max-width: 810px){
+                                                        transform: scale(-0.5, 0.5);
+                                                        transform-origin: top right; /* Point d’ancrage du redimensionnement */  
+                                                    } 
+
                                                 }
                                                 .slick-prev.slick-disabled::before,
                                                 .slick-next.slick-disabled::before{
@@ -601,6 +626,20 @@
                                                 .slick-next {
                                                     right: 10%;
                                                 }
+                                                @media (max-width: 810px){
+                                                    .slick-prev {
+                                                        left: -10%;
+                                                    }  
+                                                    .slick-next{
+                                                        right: 2%;
+                                                    }
+                                                } 
+                                                @media (max-width: 479px){
+                                                    .slick-prev {
+                                                        left: -15%;
+                                                    }  
+                                                } 
+                                                
                                             }
                                         }                                                                          
                                     }

web/themes/custom/eql/scss/partials/_node-type-ressource-teaser.scss

@@ -1,7 +1,9 @@
 article.node-type-ressource{
     margin-bottom: 1rem ;
     padding-right: 1rem;  
-    h2{text-align: left !important}
+    h2{
+        text-align: left !important; 
+    }
     .ext{
         color: black;
     }
@@ -55,7 +57,9 @@ article.node-type-ressource{
                     font-weight: 900;
                     font-style: normal;
                 }
-
+                @media (max-width: 810px) {
+                    line-height: 0 !important;                                       
+                } 
             }
         }
         .field--name-field-auteur-s-{
@@ -253,45 +257,9 @@ article.node-type-ressource{
         }
     }
 
-    // &.type-les-projets-en-images{
-    //     width: 500px !important;
-    //     .wrapper-ressource{
-    //         display: grid;
-    //         grid-template-columns: 3fr 1fr; 
-    //         // grid-template-rows: repeat(5, 1fr);
-    //         .field--name-field-type-de-ressource{
-    //             order: 2;
-    //             grid-row: 2;
-    //             grid-column: 1 /span 2;
-    //             margin-bottom: 0.5rem;
-    //         }
-    //         .field--name-field-type-de-media{
-    //             order: 1;
-    //             grid-row: 1;
-    //             grid-column: 1 /span 2;
-    //         }
-    //         .field--name-field-images{
-    //             order: 3;
-    //             grid-column: 1 ;
-    //             grid-row: 3 /span 5;
-    //             height: auto;
-    //             // width: 90%;
-    //             width: 400px !important;
-    //             img{
-    //                 height: auto;
-    //                 width: 90%;
-    //                 border: 1px solid #a3a3a3;
-    //             }
-    //         }
-    //         .field--name-title,
-    //         .field--name-field-sous-titre,
-    //         .field--name-field-auteur-s-,
-    //         .field--name-field-edition,
-    //         .field--name-field-date-de-parution,
-    //         .field--name-field-mots-clefs{
-    //             grid-column: 2;
-    //         }
+    article.node-type-ressource.type-les-projets-en-images .views-row-wrapper {
+        display: flex;
+       background: lawngreen;
+      }
 
-    //     }
-    // }
 }