css & js galerie photo /ressources

web/themes/custom/quartiers_de_demain/dist/assets/bundle.js

@@ -851,6 +851,12 @@ $(document).ready(function () {
           let typeClass = container.attr("class").split(" ").find(cls => cls.startsWith("type-"));
           let typeName = typeClass ? typeClass.replace("type-", "").replace(/-/g, " ") : "contenu"; // Nettoyer le nom
 
+          // >>> Exception : tout afficher pour type-Galerie-photos (pas de bouton)
+          if (typeClass && typeClass.toLowerCase() === "type-galerie-photos") {
+            items.show(); // aucun masquage
+            return;       // on sort : pas de "voir plus"
+          }
+
           // Ajuster le nombre d'éléments visibles en fonction du type
           if (typeClass && (typeClass === "type-podcast" || typeClass.toLowerCase() === "type-vidéo")) {
               visibleCount = 2; // Pour Podcast et Vidéo

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

@@ -4687,8 +4687,8 @@ main {
   font-family: "gilroy-medium";
 }
 #ressources .layout-content .content_container .views-element-container {
-  margin-left: 15%;
+  margin-left: 20%;
-  width: 60%;
+  width: 70%;
 }
 @media (max-width: 810px) {
   #ressources .layout-content .content_container .views-element-container {
@@ -4950,6 +4950,33 @@ main {
   width: 100%;
   background-color: rgb(7, 50, 194);
 }
+#ressources .layout-content .content_container .views-element-container .view-rows-wrapper.type-Galerie-photos {
+  justify-content: space-between;
+}
+#ressources .layout-content .content_container .views-element-container .view-rows-wrapper.type-Galerie-photos .views-row {
+  width: 18%;
+  justify-content: space-between;
+}
+@media (max-width: 810px) {
+  #ressources .layout-content .content_container .views-element-container .view-rows-wrapper.type-Galerie-photos .views-row {
+    width: 100%;
+  }
+}
+#ressources .layout-content .content_container .views-element-container .view-rows-wrapper.type-Galerie-photos .views-row img {
+  max-width: 100%;
+  height: auto;
+  object-fit: cover;
+  border-radius: 9px;
+}
+#ressources .layout-content .content_container .views-element-container .view-rows-wrapper.type-Galerie-photos .views-row iframe {
+  border-radius: 9px;
+}
+#ressources .layout-content .content_container .views-element-container .view-rows-wrapper.type-Galerie-photos .views-row .views-field-title-1 {
+  margin-top: 1rem;
+}
+#ressources .layout-content .content_container .views-element-container .view-rows-wrapper.type-Galerie-photos .views-row .views-field-field-liens {
+  display: none;
+}
 
 .type-documentation .views-field-body-1,
 .type-documentation .views-field-field-images,

web/themes/custom/quartiers_de_demain/src/assets/js/quartiers_de_demain.js

@@ -793,6 +793,12 @@ $(document).ready(function () {
           let typeClass = container.attr("class").split(" ").find(cls => cls.startsWith("type-"));
           let typeName = typeClass ? typeClass.replace("type-", "").replace(/-/g, " ") : "contenu"; // Nettoyer le nom
 
+          // >>> Exception : tout afficher pour type-Galerie-photos (pas de bouton)
+          if (typeClass && typeClass.toLowerCase() === "type-galerie-photos") {
+            items.show(); // aucun masquage
+            return;       // on sort : pas de "voir plus"
+          }
+
           // Ajuster le nombre d'éléments visibles en fonction du type
           if (typeClass && (typeClass === "type-podcast" || typeClass.toLowerCase() === "type-vidéo")) {
               visibleCount = 2; // Pour Podcast et Vidéo

web/themes/custom/quartiers_de_demain/src/assets/scss/pages/ressources.scss

@@ -40,8 +40,8 @@
                 
             }
             .views-element-container{
-                margin-left: 15%;
+                margin-left: 20%;
-                width: 60%;
+                width: 70%;
                 @media(max-width: 810px){
                     margin-left: 0%;
                     width: 90%;
@@ -310,11 +310,33 @@
                         width: 100%;
                         background-color: $blue_QDD;
                     }
-
+                    &.type-Galerie-photos{
+                        justify-content: space-between;
+                        .views-row{
+                            width: 18%;
+                            // margin: 0.5rem;
+                            justify-content: space-between;
+                            @media(max-width: 810px){
+                                width: 100%;
+                            }
+                            img{
+                                max-width: 100%;
+                                height: auto;
+                                object-fit: cover;
+                                border-radius: 9px;
+                            }
+                            iframe{
+                                border-radius: 9px;
+                            }
+                            .views-field-title-1{margin-top: 1rem;}
+                            .views-field-field-liens{
+                                display: none;
                             }
                             
+                        }
+                    }
 
-
+                }
                 // }
                 
             }
@@ -334,53 +356,3 @@
 
 
 
-
-// .type-kit-de-communication{
-//    div.content-ressource{
-//         display: flex;
-//         flex-direction: column;
-//         align-items: center;
-//         background-color: $blue_QDD;
-//         color: white;
-//         padding: 1rem 3rem;
-        
-//         .field_title{
-//             display: none;
-//         }
-//         .field_field_sous_titre{
-//             text-align: center;
-//             font-size: 0.9rem;
-//             font-family: 'gilroy-light';
-//             color: white;
-//         }
-//         .field_body{
-//             text-align: center;
-//             font-size: 0.7rem;
-//             font-family: 'gilroy-light';
-//         }
-//         .field_field_liens{
-//             width: fit-content;
-//             a{  
-//                 display: flex;
-//                 flex-direction: row;
-//                 padding-left: 0.5rem;
-//                 display: inline-flex;
-//                 align-items: center;
-//                 color: white;
-//                 background: black;
-//                 text-transform: uppercase;
-//                 font-size: 0.6rem;
-//                 svg{
-//                     display: none;
-//                 }
-//                 &::after{
-//                     display: inline-flex;
-//                     content: url("../img/noun-arrow-to-right.svg");
-//                     padding-right: 0.2rem;
-//                     padding-left: 0.2rem;
-//                 }
-//             }
-//         }
-//     }
-// }
-