Browse Source

@media teaser ressource image

ouidade 3 days ago
parent
commit
c084bf159f

+ 93 - 3
web/themes/custom/eql/dist/assets/css/bundle.css

@@ -5868,6 +5868,17 @@ svg.ext {
   }
 }
 
+div.view-type-slide:nth-child(2) > div:nth-child(4) {
+  padding-left: 0 !important;
+}
+div.view-type-slide:nth-child(2) > div:nth-child(4) .slick-list {
+  padding-left: 8% !important;
+  padding-right: 8% !important;
+}
+div.view-type-slide:nth-child(2) > div:nth-child(4) article {
+  padding-right: 0;
+}
+
 .carousel {
   display: none;
 }
@@ -7083,7 +7094,86 @@ 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;
+
+.type-les-projets-en-images.views-row {
+  width: 50% !important;
+  min-width: 550px !important;
+  max-width: 0 !important;
+}
+@media (max-width: 479px) {
+  .type-les-projets-en-images.views-row {
+    min-width: 100% !important;
+  }
+}
+.type-les-projets-en-images.views-row article.node-type-ressource.type-les-projets-en-images .wrapper-ressource {
+  display: grid;
+  grid-template-columns: 3fr 1fr !important;
+  width: 100%;
+  max-width: 100%;
+  gap: 1rem;
+  align-items: start;
+}
+@media (max-width: 479px) {
+  .type-les-projets-en-images.views-row article.node-type-ressource.type-les-projets-en-images .wrapper-ressource {
+    display: flex;
+    flex-direction: column;
+  }
+}
+.type-les-projets-en-images.views-row article.node-type-ressource.type-les-projets-en-images .wrapper-ressource .field--name-field-images {
+  grid-column: 1;
+  grid-row: 3/span 8;
+  width: 100%;
+}
+.type-les-projets-en-images.views-row article.node-type-ressource.type-les-projets-en-images .wrapper-ressource .field--name-field-images img {
+  width: 100%;
+  height: auto;
+  object-fit: cover;
+  border: 1px solid #ccc;
+}
+@media (max-width: 479px) {
+  .type-les-projets-en-images.views-row article.node-type-ressource.type-les-projets-en-images .wrapper-ressource .field--name-field-images .field__item {
+    height: auto;
+  }
+}
+.type-les-projets-en-images.views-row article.node-type-ressource.type-les-projets-en-images .wrapper-ressource .field--name-field-type-de-media {
+  grid-column: 1/span 2;
+  grid-row: 2;
+}
+.type-les-projets-en-images.views-row article.node-type-ressource.type-les-projets-en-images .wrapper-ressource .field--name-field-type-de-ressource {
+  grid-column: 1/span 2;
+  grid-row: 1;
+}
+.type-les-projets-en-images.views-row article.node-type-ressource.type-les-projets-en-images .wrapper-ressource .field--name-title,
+.type-les-projets-en-images.views-row article.node-type-ressource.type-les-projets-en-images .wrapper-ressource .field--name-field-sous-titre,
+.type-les-projets-en-images.views-row article.node-type-ressource.type-les-projets-en-images .wrapper-ressource .field--name-field-auteur-s-,
+.type-les-projets-en-images.views-row article.node-type-ressource.type-les-projets-en-images .wrapper-ressource .field--name-field-edition,
+.type-les-projets-en-images.views-row article.node-type-ressource.type-les-projets-en-images .wrapper-ressource .field--name-field-date-de-parution,
+.type-les-projets-en-images.views-row article.node-type-ressource.type-les-projets-en-images .wrapper-ressource .field--name-field-mots-clefs {
+  grid-column: 2;
+  width: 100%;
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+}
+.type-les-projets-en-images.views-row article.node-type-ressource.type-les-projets-en-images .wrapper-ressource .field--name-title {
+  grid-row: 3;
+}
+.type-les-projets-en-images.views-row article.node-type-ressource.type-les-projets-en-images .wrapper-ressource .field--name-field-sous-titre {
+  grid-row: 4;
+}
+.type-les-projets-en-images.views-row article.node-type-ressource.type-les-projets-en-images .wrapper-ressource .field--name-field-auteur-s- {
+  grid-row: 5;
+}
+.type-les-projets-en-images.views-row article.node-type-ressource.type-les-projets-en-images .wrapper-ressource .field--name-field-edition {
+  grid-row: 6;
+}
+.type-les-projets-en-images.views-row article.node-type-ressource.type-les-projets-en-images .wrapper-ressource .field--name-field-date-de-parution {
+  grid-row: 7;
+}
+.type-les-projets-en-images.views-row article.node-type-ressource.type-les-projets-en-images .wrapper-ressource .field--name-field-mots-clefs {
+  grid-row: 8;
+}
+.type-les-projets-en-images.views-row article.node-type-ressource.type-les-projets-en-images .wrapper-ressource h2, .type-les-projets-en-images.views-row article.node-type-ressource.type-les-projets-en-images .wrapper-ressource p {
+  margin: 0;
+  padding: 0;
 }

+ 13 - 1
web/themes/custom/eql/scss/pages/ressources.scss

@@ -579,6 +579,7 @@
                                                 } 
                                                 
                                             }
+                                            
                                             .views-row-wrapper{
                                                 display: flex;
                                                 flex-direction: row;
@@ -593,7 +594,7 @@
                                                         max-width: 500px ;
                                                     }
                                                 }
-                                                
+                                              
                                                 @media (max-width: 810px){
                                                     padding-left: 2rem;
                                                     flex-direction: column;
@@ -644,6 +645,7 @@
                                                 } 
                                                 
                                             }
+                                            
                                         }                                                                          
                                     }
                                 }
@@ -655,3 +657,13 @@
         }
     }
 }
+div.view-type-slide:nth-child(2) > div:nth-child(4){
+    padding-left: 0 !important;
+        .slick-list{
+            padding-left: 8% !important;
+            padding-right: 8% !important;
+        }
+        article{
+            padding-right: 0;
+        }
+}

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

@@ -257,9 +257,98 @@ article.node-type-ressource{
         }
     }
 
-    article.node-type-ressource.type-les-projets-en-images .views-row-wrapper {
-        display: flex;
-       background: lawngreen;
-      }
 
-}
+
+
+}
+.type-les-projets-en-images.views-row{
+    width: 50% !important;
+    // min-width: 0 !important;
+    min-width: 550px !important;
+    max-width: 0 !important;
+    @media (max-width: 479px) {
+        min-width: 100% !important;
+    } 
+
+    article.node-type-ressource.type-les-projets-en-images {
+        .wrapper-ressource {
+        display: grid;
+        grid-template-columns: 3fr 1fr !important; // ✅ 85% pour image, 15% pour texte
+        width: 100%; // ✅ force la grille à s'étaler sur toute la ligne
+        max-width: 100%; // ✅ limite d'expansion
+        gap: 1rem;
+        align-items: start;
+        @media (max-width: 479px) {
+            display: flex;
+            flex-direction: column;
+        }
+    
+        .field--name-field-images {
+            grid-column: 1;
+            grid-row: 3 / span 8;
+            width: 100%;
+            img {
+            width: 100%;
+            height: auto;
+            object-fit: cover;
+            border: 1px solid #ccc;
+            
+            }
+           
+            .field__item{
+                @media (max-width: 479px) {
+                    // margin-bottom: 4rem;
+                    height: auto;
+                }
+            }
+        }
+        .field--name-field-type-de-media{
+            grid-column: 1 /span 2;
+            grid-row: 2;
+        }
+        .field--name-field-type-de-ressource{
+            grid-column: 1 /span 2;
+            grid-row: 1;
+        }
+        // Forcer les champs texte à ne pas déborder
+
+        .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;
+            width: 100%; // ✅ évite que ça casse la colonne
+            box-sizing: border-box;
+            padding: 0;
+            margin: 0;
+        }
+        .field--name-title{
+            grid-row: 3;
+        }
+        .field--name-field-sous-titre{
+            grid-row: 4;
+        }
+        .field--name-field-auteur-s-{
+            grid-row: 5;
+        }
+        .field--name-field-edition{
+            grid-row: 6;
+        }
+        .field--name-field-date-de-parution{
+            grid-row: 7;
+        }
+        .field--name-field-mots-clefs{
+            grid-row: 8;
+        }
+    
+        // Supprimer les marges internes de h2, p, etc.
+        h2, p {
+            margin: 0;
+            padding: 0;
+        }
+        }
+    }
+}  
+