slide ressources

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

@@ -5330,6 +5330,7 @@ svg.ext {
 .path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-config-pages-block {
   width: 60%;
   margin: auto;
+  margin-left: 30%;
 }
 @media (max-width: 479px) {
   .path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-config-pages-block {
@@ -5423,11 +5424,16 @@ svg.ext {
   flex-direction: 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-filters {
+  position: fixed;
+  top: 13rem;
+  left: 0;
   width: 20%;
   background-color: rgb(255, 255, 255);
   margin-top: 2rem;
   margin-left: 1rem;
   margin-bottom: 5rem;
+  padding: 0.5rem;
+  padding-right: 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-filters {
@@ -5437,6 +5443,7 @@ 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::before {
   content: "Filtrer par : ";
   padding-right: 1rem;
+  font-weight: 800;
 }
 @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-filters::before {
@@ -5507,25 +5514,30 @@ svg.ext {
   flex-direction: row;
   flex-wrap: wrap;
 }
+.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-ressource-slide {
+  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 .view-type-ressource-slide h3 {
+  margin-left: 30%;
   text-transform: uppercase;
 }
 .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-ressource-slide h3 a {
   color: rgb(9, 57, 139) !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-ressource-slide .views-row-wrapper {
+  margin-left: 30%;
   display: flex;
   flex-direction: 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 .view-type-ressource-slide .views-row-wrapper .views-row {
+  display: flex;
   width: 25%;
-  flex: 0 0 25%;
+  max-width: fit-content;
 }
 .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-ressource-slide .views-row-wrapper .views-row .node-type-ressource {
   display: flex;
   flex-direction: column;
-  border: 2px solid rgb(0, 158, 227);
-  margin-left: 1rem;
+  margin-left: 3rem;
   margin-bottom: 1rem;
   padding: 1rem;
 }
@@ -5535,21 +5547,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-content .view-type-ressource-slide .views-row-wrapper .views-row .node-type-ressource svg.ext {
   display: 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-ressource-slide .views-row-wrapper .views-row .node-type-ressource.type-de-ressource-Publication-issue-du-programme-EQLD {
-  background-color: rgba(0, 158, 227, 0.2);
-}
-.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-ressource-slide .views-row-wrapper .views-row .node-type-ressource.type-de-ressource-Paroles-de-lauréats {
-  background-color: rgba(0, 158, 227, 0.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-ressource-slide .views-row-wrapper .views-row .node-type-ressource {
     margin-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-ressource-slide .views-row-wrapper .views-row .node-type-ressource:hover {
-  background-color: rgba(0, 0, 0, 0.15);
-}
 .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-ressource-slide .views-row-wrapper .views-row .node-type-ressource .field--name-field-type-de-ressource {
+  grid-column: 1;
   text-transform: uppercase;
   line-height: 1.1rem;
   margin-top: 0.5rem;
@@ -5562,6 +5566,7 @@ svg.ext {
   cursor: default;
 }
 .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-ressource-slide .views-row-wrapper .views-row .node-type-ressource .field--name-title {
+  grid-column: 2;
   margin-top: 0.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-ressource-slide .views-row-wrapper .views-row .node-type-ressource .field--name-title h2 {
@@ -5575,6 +5580,7 @@ svg.ext {
   font-style: italic;
 }
 .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-ressource-slide .views-row-wrapper .views-row .node-type-ressource .field--name-field-auteur-s- {
+  grid-column: 2;
   margin-top: 0.5rem;
   font-weight: 800;
   line-height: 1.1rem;
@@ -5586,9 +5592,11 @@ svg.ext {
   display: 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-ressource-slide .views-row-wrapper .views-row .node-type-ressource .field--name-field-sous-titre {
+  grid-column: 2;
   margin-top: 0.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-ressource-slide .views-row-wrapper .views-row .node-type-ressource .field--name-field-edition {
+  grid-column: 2;
   margin-top: 0.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-ressource-slide .views-row-wrapper .views-row .node-type-ressource .field--name-field-edition p {
@@ -5598,6 +5606,7 @@ svg.ext {
   display: 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-ressource-slide .views-row-wrapper .views-row .node-type-ressource .field--name-field-images {
+  grid-column: 1;
   width: fit-content;
   border: 1px solid #a3a3a3;
   height: 100px;
@@ -5610,9 +5619,11 @@ svg.ext {
   width: auto;
 }
 .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-ressource-slide .views-row-wrapper .views-row .node-type-ressource .field--name-field-date-de-parution {
+  grid-column: 2;
   margin-top: 0.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-ressource-slide .views-row-wrapper .views-row .node-type-ressource .field--name-field-mots-clefs {
+  grid-column: 2;
   display: flex;
   margin-top: 1rem;
   flex-direction: row;
@@ -5646,6 +5657,19 @@ svg.ext {
     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 .view-type-ressource-slide .views-row-wrapper .slick-next::before {
+  content: url("../images/pictos/fleche-droite-dans-rond.png");
+  display: block;
+}
+.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-ressource-slide .views-row-wrapper .slick-prev::before {
+  content: url("../images/pictos/fleche-droite-dans-rond.png");
+  display: block;
+  transform: scaleX(-1);
+  display: 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-ressource-slide .views-row-wrapper .slick-next {
+  right: 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-ressource-slide:has(.type-publication-issue-du-programme-eqld) {
   background-color: rgba(0, 158, 227, 0.2);
 }

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

@@ -208,6 +208,24 @@ jQuery(function($) {
           }]
       });
       console.log('salut slick projets');
+
+      $('.path-ressources .view-type-ressource-slide .views-row-wrapper').slick({
+        slidesToShow: 3,
+        dots: false,
+        arrows: true,
+        centerMode: true,
+        // responsive: [
+        //   {
+        //     breakpoint: 810,
+        //     settings: {
+        //       slidesToShow: 3,
+        //       arrows: false,
+        //       draggable: true,
+        //       centerMode: true,
+        //     }
+        //   }]
+        });
+      console.log('salut slick ressource');
   });
 
 
@@ -236,6 +254,5 @@ $(document).ready(function () {
 
 
 
-
 })(jQuery, window);
 

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

@@ -23,6 +23,8 @@
                            .block-config-pages-block{
                             width: 60%;
                             margin: auto;
+                            margin-left: 30%;
+
                             @media (max-width:479px) {
                                 order: 1;
                                 margin-left: 0;
@@ -110,17 +112,23 @@
                                     display: flex;
                                     flex-direction: row;
                                     .view-filters{
+                                        position: fixed;
+                                        top: 13rem;
+                                        left: 0;
                                         width: 20%;
                                         background-color: $white;
                                         margin-top: 2rem;
                                         margin-left: 1rem;
                                         margin-bottom: 5rem;
+                                        padding: 0.5rem;
+                                        padding-right: 3rem;
                                         @media (max-width: 479px) {
                                             margin-left: 0;                                                
                                         }
                                         &::before{
                                             content: "Filtrer par : ";
                                             padding-right: 1rem;
+                                            font-weight: 800;
                                             @media (max-width: 479px){
                                                 padding-bottom: 1rem;
                                             }
@@ -188,25 +196,33 @@
                                         flex-direction: row;
                                         flex-wrap: wrap;
                                         .view-type-ressource-slide{
-
+                                            width: 100%;
+                                           
                                             h3{
+                                                margin-left: 30%;
                                                 text-transform: uppercase;
                                                 a{color: rgb(9, 57, 139) !important;}
                                             }
                                             .views-row-wrapper{
+                                                margin-left: 30%;
                                                 display: flex;
                                                 flex-direction: row;
+                                                
                                                 .views-row{
+                                                    display: flex;
                                                     width: 25%;
-                                                    flex: 0 0 25%;  
+                                                    max-width: fit-content;
                                                                                         
                                                     .node-type-ressource{
                                                         display: flex;
                                                         flex-direction: column;
-                                                        border: 2px solid $blue-light;
-                                                        margin-left: 1rem;
+                                                        // border: 2px solid $blue-light;
+                                                        // display: grid;
+                                                        // grid-template-columns: 1fr 1.2fr;
+                                                        margin-left: 3rem;
                                                         margin-bottom: 1rem ;
                                                         padding: 1rem;  
+                                                       
                                                         .ext{
                                                             color: black;
                                                         }
@@ -214,19 +230,20 @@
                                                             display: none;
                                                         }
                                                         &.type-de-ressource-Publication-issue-du-programme-EQLD{
-                                                            background-color: $background-actus;
+                                                            // background-color: $background-actus;
                                                         }
                                                         &.type-de-ressource-Paroles-de-lauréats{
-                                                            background-color: $background-actus;
+                                                            // background-color: $background-actus;
                                                         }
                                                         @media (max-width: 479px) {
                                                             margin-left: 0;                                                
                                                         }
-                                                        &:hover{
-                                                            background-color: $black15;    
-                                                        }                                      
+                                                        // &:hover{
+                                                        //     background-color: $black15;    
+                                                        // }                                      
                                                         
                                                         .field--name-field-type-de-ressource{
+                                                            grid-column: 1;
                                                             text-transform: uppercase;
                                                             line-height: 1.1rem;
                                                             margin-top: 0.5rem;                                              
@@ -239,6 +256,7 @@
                                                             }
                                                         }
                                                         .field--name-title{
+                                                            grid-column: 2;
                                                             margin-top: 0.5rem;
         
                                                             h2{
@@ -254,6 +272,7 @@
                                                             }
                                                         }
                                                         .field--name-field-auteur-s-{
+                                                            grid-column: 2;
                                                             margin-top: 0.5rem;
                                                             font-weight: 800;
                                                             line-height: 1.1rem;
@@ -266,9 +285,11 @@
                                                             }
                                                         }
                                                         .field--name-field-sous-titre{
+                                                            grid-column: 2;
                                                             margin-top: 0.5rem;
                                                         }
                                                         .field--name-field-edition{
+                                                            grid-column: 2;
                                                             margin-top: 0.5rem;
                                                             p{
                                                                 margin: 0;
@@ -278,6 +299,7 @@
                                                             }
                                                         }
                                                         .field--name-field-images{
+                                                            grid-column: 1;
                                                             // display: none;
                                                             // width: 30%;
                                                             width: fit-content;
@@ -294,9 +316,11 @@
                                                             }
                                                         }
                                                         .field--name-field-date-de-parution{
+                                                            grid-column: 2;
                                                             margin-top: 0.3rem;
                                                         }
                                                         .field--name-field-mots-clefs{
+                                                            grid-column: 2;
                                                             display: flex;
                                                             margin-top: 1rem;
                                                             flex-direction: row;
@@ -333,7 +357,25 @@
                                                         width: 100%;
                                                     }
                                                 } 
+                                               
+                                                    
+                                                .slick-next::before{
+                                                    content:url("../images/pictos/fleche-droite-dans-rond.png");
+                                                    display: block;
+                                                }
+                                                
+                                                .slick-prev::before{
+                                                    content:url("../images/pictos/fleche-droite-dans-rond.png");
+                                                    display: block;
+                                                    transform: scaleX(-1);
+                                                    display: none;
+                                                }
+                                                
+                                                .slick-next {
+                                                    right: 10%;
+                                                  }
                                             }
+
                                         }
 
                                         .view-type-ressource-slide:has(.type-publication-issue-du-programme-eqld){