debut css & js /ressources : class wrapper et h3, position filtres

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

@@ -132,10 +132,6 @@ jQuery(function($) {
   });
  });
 
-
-
-
-
 // /////////////////
 //// ancre dans texte au click parragraphe correspondant arrive en dessous du header 
 
@@ -213,5 +209,33 @@ jQuery(function($) {
       });
       console.log('salut slick projets');
   });
+
+
+// //////// start class à views-row-wrapper ////////
+$(document).ready(function () {
+  $(".views-row-wrapper").each(function () {
+    let h3 = $(this).prev("h3");
+    let link = h3.find("a");
+    if (link.length) {
+      let text = link.text().trim();
+      let className = text
+        .toLowerCase()
+        .normalize("NFD").replace(/[\u0300-\u036f]/g, "") // enlever les accents
+        .replace(/[^a-z0-9]+/g, '-') // remplacer tout ce qui n'est pas a-z0-9 par -
+        .replace(/(^-|-$)/g, ''); // enlever tirets début/fin
+
+      $(this).addClass('type-' + className);
+            // Ajouter la même classe sur le <h3>
+            h3.addClass('type-' + className);
+    }
+  });
+});
+// /////// end class à views-row-wrapper ///////
+
+
+
+
+
+
 })(jQuery, window);
 

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

@@ -3,15 +3,17 @@
     .layout-content{
         width: 100vw;
         .region-content{
-            width: 80%;
+            width: 100%;
             margin: auto;
             #block-contenudelapageprincipale{
 
                 .layout--onecol{
                     .layout__region--content{
                         .block-region-content{
-                            display: grid;
-                            grid-template-columns: 1fr repeat(4, 1fr) 1fr;
+                            // display: grid;
+                            // grid-template-columns: 1fr repeat(4, 1fr) 1fr;
+                            display: flex;
+                            flex-direction: column;
                             @media (max-width: 479px){
                                 display: flex;
                                 flex-direction: column;
@@ -19,8 +21,8 @@
 
                             // texte présentation
                            .block-config-pages-block{
-                            grid-column: 1 / span 4;
-                            margin-left: 1rem;
+                            width: 60%;
+                            margin: auto;
                             @media (max-width:479px) {
                                 order: 1;
                                 margin-left: 0;
@@ -100,239 +102,238 @@
                             .block-views-blockbase-de-donnees-block-1{
                                 margin-top: 2rem;
                                 width: 100%;
-                                grid-column: 1 / span 6;
+
                                 @media (max-width:479px) {
                                     order: 3;
                                 }
-                                .view-filters{
+                                .view-base-de-donnees{
                                     display: flex;
                                     flex-direction: row;
-                                    flex-wrap: wrap;
-                                    background-color: $white;
-                                    margin-top: 2rem;
-                                    margin-left: 1rem;
-                                    margin-bottom: 5rem;
-                                    @media (max-width: 479px) {
-                                        margin-left: 0;                                                
-                                    }
-                                    &::before{
-                                        content: "Filtrer par : ";
-                                        padding-right: 1rem;
-                                        @media (max-width: 479px){
-                                            padding-bottom: 1rem;
-                                        }
-                                    }
-                                    #views-exposed-form-base-de-donnees-block-1{
-
-                                        width: fit-content;
-                                        display: flex;
-                                        flex-direction: row;
-                                        flex-wrap: wrap;
-                                        margin-top: 1rem;
-                                        @media (max-width: 479px){
-                                            justify-content: center;
+                                    .view-filters{
+                                        width: 20%;
+                                        background-color: $white;
+                                        margin-top: 2rem;
+                                        margin-left: 1rem;
+                                        margin-bottom: 5rem;
+                                        @media (max-width: 479px) {
+                                            margin-left: 0;                                                
                                         }
-                                        .form-item{
-                                            padding: 0.5rem;
-                                            align-self: center;
-                                        }
-                                        input, label{
-                                            margin: 0.5rem;
-                                        }
-                                        select, input{
-                                            padding: 0.3rem;
-                                            margin:0.5rem;
-                                        }
-                                     
-                                        #edit-field-mots-clefs-target-id{
+                                        &::before{
+                                            content: "Filtrer par : ";
+                                            padding-right: 1rem;
                                             @media (max-width: 479px){
-                                                width: 75vw;
+                                                padding-bottom: 1rem;
                                             }
                                         }
+                                        #views-exposed-form-base-de-donnees-block-1{
 
-                                        #edit-actions{
+                                            // max-width: 20%;
                                             display: flex;
                                             flex-direction: column;
-                                            justify-content: space-between;
-                                            align-self: center;
-                                            margin-left: auto;
+                                            flex-wrap: wrap;
+                                            margin-top: 1rem;
                                             @media (max-width: 479px){
                                                 justify-content: center;
-                                                margin: auto;
                                             }
-                                            #edit-submit-base-de-donnees{
-                                                background-color: $blue-light; 
-                                                color: white;
-                                                text-transform: uppercase;
-                                                border: none;
-                                                padding: 0.3rem 0.7rem;
-                                                margin-left: 2rem;
+                                            .js-form-item{
+                                                display: flex;
+                                                flex-direction: column;
+                                                max-width: 100%;
+                                            }
+
 
+                                            #edit-actions{
+                                                display: flex;
+                                                flex-direction: column;
+                                                justify-content: space-between;
+                                                align-self: center;
+                                                margin-left: auto;
                                                 @media (max-width: 479px){
+                                                    justify-content: center;
                                                     margin: auto;
-                                                    margin-top: 1rem;
                                                 }
-                                            }
-                                            #edit-reset{
-                                                background-color: $blue-light; 
-                                                color: white;
-                                                text-transform: uppercase;
-                                                border: none;
-                                                padding: 0.3rem 0.7rem;
-                                                margin-top: 1rem;
-                                                margin-left: 1rem;
-                                                @media (max-width: 479px){
-                                                    margin: auto;
-                                                    margin-top: 1rem;
+                                                #edit-submit-base-de-donnees{
+                                                    background-color: $blue-light; 
+                                                    color: white;
+                                                    text-transform: uppercase;
+                                                    border: none;
+                                                    padding: 0.3rem 0.7rem;
+                                                    margin-left: 2rem;
+
+                                                    @media (max-width: 479px){
+                                                        margin: auto;
+                                                        margin-top: 1rem;
+                                                    }
                                                 }
-                                            }    
+                                                #edit-reset{
+                                                    background-color: $blue-light; 
+                                                    color: white;
+                                                    text-transform: uppercase;
+                                                    border: none;
+                                                    padding: 0.3rem 0.7rem;
+                                                    margin-top: 1rem;
+                                                    margin-left: 1rem;
+                                                    @media (max-width: 479px){
+                                                        margin: auto;
+                                                        margin-top: 1rem;
+                                                    }
+                                                }    
+                                            }
+                                            
                                         }
-                                        
                                     }
-                                }
-                                .view-content{
-                                    width: 100%;
-                                    display: flex;
-                                    flex-direction: row;
-                                    flex-wrap: wrap;
-                                    .views-row{
-                                        width: 25%;
-                                        flex: 0 0 25%;  
-                                                                              
-                                        .node-type-ressource{
+                                    .view-content{
+                                        width: 100%;
+                                        display: flex;
+                                        flex-direction: row;
+                                        flex-wrap: wrap;
+                                        .views-row-wrapper{
                                             display: flex;
-                                            flex-direction: column;
-                                            border: 2px solid $blue-light;
-                                            margin-left: 1rem;
-                                            margin-bottom: 1rem ;
-                                            padding: 1rem;  
-                                            .ext{
-                                                color: black;
-                                            }
-                                            svg.ext{
-                                                display: none;
-                                            }
-                                            &.type-de-ressource-Publication-issue-du-programme-EQLD{
-                                                background-color: $background-actus;
-                                            }
-                                            &.type-de-ressource-Paroles-de-lauréats{
-                                                background-color: $background-actus;
-                                            }
-                                            @media (max-width: 479px) {
-                                                margin-left: 0;                                                
-                                            }
-                                            &:hover{
-                                                background-color: $black15;    
-                                            }                                      
-                                            
-                                            .field--name-field-type-de-ressource{
-                                                text-transform: uppercase;
-                                                line-height: 1.1rem;
-                                                margin-top: 0.5rem;                                              
-                                                a{
-                                                    color: $blue-light;
-                                                    font-weight: 900;
-                                                    font-size: 0.8rem;
-                                                    pointer-events: none;
-                                                    cursor: default;
+                                            flex-direction: row;
+                                        }
+                                        h3{
+                                            text-transform: uppercase;
+                                            color: rgb(9, 57, 139);
+                                        }
+                                        .views-row{
+                                            width: 25%;
+                                            flex: 0 0 25%;  
+                                                                                
+                                            .node-type-ressource{
+                                                display: flex;
+                                                flex-direction: column;
+                                                border: 2px solid $blue-light;
+                                                margin-left: 1rem;
+                                                margin-bottom: 1rem ;
+                                                padding: 1rem;  
+                                                .ext{
+                                                    color: black;
                                                 }
-                                            }
-                                            .field--name-title{
-                                                margin-top: 0.5rem;
-
-                                                h2{
-                                                    margin: 0;
-                                                    line-height: 1rem;
+                                                svg.ext{
+                                                    display: none;
+                                                }
+                                                &.type-de-ressource-Publication-issue-du-programme-EQLD{
+                                                    background-color: $background-actus;
+                                                }
+                                                &.type-de-ressource-Paroles-de-lauréats{
+                                                    background-color: $background-actus;
+                                                }
+                                                @media (max-width: 479px) {
+                                                    margin-left: 0;                                                
+                                                }
+                                                &:hover{
+                                                    background-color: $black15;    
+                                                }                                      
+                                                
+                                                .field--name-field-type-de-ressource{
+                                                    text-transform: uppercase;
+                                                    line-height: 1.1rem;
+                                                    margin-top: 0.5rem;                                              
                                                     a{
-                                                        color: $black;
-                                                        font-size: 1rem;
+                                                        color: $blue-light;
                                                         font-weight: 900;
-                                                        font-style: italic;
+                                                        font-size: 0.8rem;
+                                                        pointer-events: none;
+                                                        cursor: default;
                                                     }
-            
                                                 }
-                                            }
-                                            .field--name-field-auteur-s-{
-                                                margin-top: 0.5rem;
-                                                font-weight: 800;
-                                                line-height: 1.1rem;
-                                                p{
-                                                    margin: 0;
-                                                    
+                                                .field--name-title{
+                                                    margin-top: 0.5rem;
+
+                                                    h2{
+                                                        margin: 0;
+                                                        line-height: 1rem;
+                                                        a{
+                                                            color: $black;
+                                                            font-size: 1rem;
+                                                            font-weight: 900;
+                                                            font-style: italic;
+                                                        }
+                
+                                                    }
                                                 }
-                                                .field__label{
-                                                    display:none;
+                                                .field--name-field-auteur-s-{
+                                                    margin-top: 0.5rem;
+                                                    font-weight: 800;
+                                                    line-height: 1.1rem;
+                                                    p{
+                                                        margin: 0;
+                                                        
+                                                    }
+                                                    .field__label{
+                                                        display:none;
+                                                    }
                                                 }
-                                            }
-                                            .field--name-field-sous-titre{
-                                                margin-top: 0.5rem;
-                                            }
-                                            .field--name-field-edition{
-                                                margin-top: 0.5rem;
-                                                p{
-                                                    margin: 0;
+                                                .field--name-field-sous-titre{
+                                                    margin-top: 0.5rem;
                                                 }
-                                                .field__label{
-                                                    display:none;
+                                                .field--name-field-edition{
+                                                    margin-top: 0.5rem;
+                                                    p{
+                                                        margin: 0;
+                                                    }
+                                                    .field__label{
+                                                        display:none;
+                                                    }
                                                 }
-                                            }
-                                            .field--name-field-images{
-                                                // display: none;
-                                                // width: 30%;
-                                                width: fit-content;
-                                                border: 1px solid #a3a3a3;
-                                                height: 100px;
-                                                .field__item{
+                                                .field--name-field-images{
+                                                    // display: none;
+                                                    // width: 30%;
+                                                    width: fit-content;
+                                                    border: 1px solid #a3a3a3;
                                                     height: 100px;
+                                                    .field__item{
+                                                        height: 100px;
+                                                    }
+                                                    img{
+                                                        height: 100%;
+                                                        width: auto;
+                                                        // width: 100%;
+                                                        // height: auto;
+                                                    }
                                                 }
-                                                img{
-                                                    height: 100%;
-                                                    width: auto;
-                                                    // width: 100%;
-                                                    // height: auto;
+                                                .field--name-field-date-de-parution{
+                                                    margin-top: 0.3rem;
                                                 }
-                                            }
-                                            .field--name-field-date-de-parution{
-                                                margin-top: 0.3rem;
-                                            }
-                                            .field--name-field-mots-clefs{
-                                                display: flex;
-                                                margin-top: 1rem;
-                                                flex-direction: row;
-                                                flex-wrap: wrap;
-                                              
-                                                .field__item{
-                                                    margin-right: 0.5rem;
-                                                    padding-left: 0.3rem;
-                                                    padding-right: 0.3rem;
-                                                    font-size: 0.7rem;
+                                                .field--name-field-mots-clefs{
+                                                    display: flex;
+                                                    margin-top: 1rem;
+                                                    flex-direction: row;
+                                                    flex-wrap: wrap;
                                                 
-                                                    a{
-                                                        background: $blue-dark;
-                                                        color: $white;
-                                                        font-weight: 800;
-                                                        vertical-align: super;
-                                                        padding-left: 0.1rem;
-                                                        padding-right: 0.1rem;
-                                                        display: inline-flex;
-                                                        pointer-events: none;
-                                                        cursor: default;
+                                                    .field__item{
+                                                        margin-right: 0.5rem;
+                                                        padding-left: 0.3rem;
+                                                        padding-right: 0.3rem;
+                                                        font-size: 0.7rem;
+                                                    
+                                                        a{
+                                                            background: $blue-dark;
+                                                            color: $white;
+                                                            font-weight: 800;
+                                                            vertical-align: super;
+                                                            padding-left: 0.1rem;
+                                                            padding-right: 0.1rem;
+                                                            display: inline-flex;
+                                                            pointer-events: none;
+                                                            cursor: default;
+                                                        }
                                                     }
                                                 }
+                                                ul.links.inline{
+                                                    display: none;
+                                                }
                                             }
-                                            ul.links.inline{
-                                                display: none;
+                                            
+                                        } 
+                                        @media (max-width: 810px){
+                                            flex-direction: column;
+                                            .views-row{
+                                                width: 100%;
                                             }
-                                        }
+                                        }  
                                         
-                                    } 
-                                    @media (max-width: 810px){
-                                        flex-direction: column;
-                                        .views-row{
-                                            width: 100%;
-                                        }
-                                    }  
-                                    
+                                    }
                                 }
                             }
 

web/themes/custom/eql/scss/partials/_footer.scss → web/themes/custom/eql/scss/partials/footer.scss

@@ -36,8 +36,7 @@
             margin-left: 0rem;
         }
         .view-id-partenaires{
-            .view-content{
-              
+            .view-content {
                 display: flex;
                 flex-direction: row;
                 justify-content:flex-start;
@@ -131,7 +130,7 @@
             width: 100%;
         }
         .view-id-partenaires{
-            .view-content{
+            .views-row-wrapper{
                 display: flex;
                 flex-direction: row;
                 justify-content:flex-start;

web/themes/custom/eql/scss/styles.scss

@@ -57,7 +57,7 @@
 
 /*partials*/
 @import "partials/_header";
-@import "partials/_footer";
+@import "partials/footer";
 @import "partials/_slick_custom.scss";
 @import "partials/_slick";
 @import "partials/_slick-theme";

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

@@ -15,22 +15,31 @@
  * @see template_preprocess_views_view_unformatted()
  */
 #}
+
+{%
+  set view_wrapper_class = [
+  default_row_class ? 'views-row-wrapper',
+  ]
+%}
+
 {% if title %}
   <h3>{{ title }}</h3>
 {% endif %}
-{% for row in rows %}
-  {%
-    set row_classes = [
-      default_row_class ? 'views-row',
-    ]
-  %}
+<div {{ attributes.addClass(view_wrapper_class) }}>
+  {% for row in rows %}
+    {%
+      set row_classes = [
+        default_row_class ? 'views-row',
+      ]
+    %}
 
-  {# {%
-    set collection = '#collection-id--' ~ a.content
-  %} #}
-  <div{{ row.attributes.addClass(row_classes) }}>
-    {{- row.content -}}
-  </div>
-  {# <button class="slick-next slick-arrow" aria-label="Next" type="button" style="">Next</button> #}
+    {# {%
+      set collection = '#collection-id--' ~ a.content
+    %} #}
+    <div{{ row.attributes.addClass(row_classes) }}>
+      {{- row.content -}}
+    </div>
+    {# <button class="slick-next slick-arrow" aria-label="Next" type="button" style="">Next</button> #}
 
 {% endfor %}
+</div>