css actus

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

@@ -1594,9 +1594,6 @@ footer {
   padding-right: 0.3rem;
   padding-bottom: 0.2rem;
 }
-#actus-caroussel .content-actus .views-row article.node-type-actualite .infos-actu {
-  order: 2;
-}
 #actus-caroussel .content-actus .views-row article.node-type-actualite .field_field_date {
   color: red;
   display: inline-flex;
@@ -1609,7 +1606,6 @@ footer {
   padding-right: 0.3rem;
 }
 #actus-caroussel .content-actus .views-row article.node-type-actualite .field_title {
-  order: 3;
   padding-top: 0.2rem;
 }
 #actus-caroussel .content-actus .views-row article.node-type-actualite .field_title h2 {
@@ -1622,7 +1618,6 @@ footer {
   color: rgb(7, 50, 194);
 }
 #actus-caroussel .content-actus .views-row article.node-type-actualite .field_body {
-  order: 4;
   opacity: 1 !important;
   transform: none !important;
   font-family: "gilroy-regular";
@@ -1632,9 +1627,6 @@ footer {
   margin-bottom: 1rem;
   font-size: 0.7rem;
 }
-#actus-caroussel .content-actus .views-row article.node-type-actualite .field_field_liens {
-  order: 5;
-}
 #actus-caroussel .content-actus .views-row:nth-child(odd) {
   position: relative;
   top: 60px;
@@ -1912,9 +1904,6 @@ body {
     transform: scale(1.3);
   }
 }
-#home .content_container #block-quartiers-de-demain-titredepage {
-  display: none;
-}
 #home .paragraph--type--static-parts {
   padding-top: 4rem;
   padding-bottom: 2rem;

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

@@ -232,7 +232,6 @@
       chapeau :  document.querySelectorAll('.field_body'),
       paragraph: document.querySelectorAll('.field_field_textes .paragraph--type--static-parts'),
       enjeux : document.querySelectorAll('.field_field_textes .paragraph--type--static-parts .enjeux'),
-      live : document.querySelectorAll('#live-youtube'),
       // mapHome : document.querySelectorAll('.field_field_map_block #block-sitesmapblock'),
       // mapSite : document.querySelectorAll('#sites-map-container'),
       lienDoc : document.querySelectorAll('.field_field_documents'),
@@ -386,7 +385,6 @@
     });
   });
 
-
   
 
  //////////// start slideshow home  ////////////////////////// 
@@ -703,6 +701,91 @@ document.addEventListener("DOMContentLoaded", function () {
 });
 
 
+//////////////////////////////////////////
+
+
+/////////// Start script ressources ////////////////////////////////
+
+document.addEventListener("DOMContentLoaded", () => {
+    const view = document.querySelector(".view");
+    const elements = Array.from(view.children);
+
+    let newView = document.createElement("div");
+    newView.classList.add("view");
+
+    let group = null;
+    let groupContent = null;
+
+    elements.forEach((el) => {
+        if (el.tagName === "H3") {
+            if (group) {
+                newView.appendChild(group);
+            }
+
+            group = document.createElement("div");
+            group.classList.add("group");
+
+            groupContent = document.createElement("div");
+            groupContent.classList.add("group-content");
+
+            groupContent.appendChild(el);
+            group.appendChild(groupContent);
+        } else if (el.classList.contains("views-row")) {
+            groupContent.appendChild(el);
+        }
+    });
+
+    if (group) {
+        newView.appendChild(group);
+    }
+
+    view.replaceWith(newView);
+
+    // Ajouter un bouton "Voir plus" dans chaque groupe
+    document.querySelectorAll(".group").forEach((group) => {
+        const rows = group.querySelectorAll(".views-row");
+        const button = document.createElement("button");
+        button.classList.add("toggle-btn");
+        button.textContent = "Voir plus de";
+
+        rows.forEach((row, index) => {
+            if (index >= 3) {
+                row.classList.add("hidden");
+                row.style.maxHeight = "0";
+                row.style.opacity = "0";
+            }
+        });
+
+        button.addEventListener("click", () => {
+            const isExpanded = button.textContent === "Voir moins de";
+            const hiddenRows = group.querySelectorAll(".views-row.hidden");
+
+            if (isExpanded) {
+                // Cacher les lignes avec un délai pour l'effet de transition
+                hiddenRows.forEach((row) => {
+                    row.style.maxHeight = "0";
+                    row.style.opacity = "0";
+                    setTimeout(() => row.classList.add("hidden"), 500); // Délai pour la transition
+                });
+            } else {
+                // Afficher les lignes
+                hiddenRows.forEach((row) => {
+                    row.classList.remove("hidden");
+                    row.style.maxHeight = row.scrollHeight + "px";
+                    row.style.opacity = "1";
+                });
+            }
+
+            button.textContent = isExpanded ? "Voir plus de" : "Voir moins de";
+        });
+
+        group.appendChild(button);
+    });
+});
+
+
+/////////// end script ressources ////////////////////////////////
+
 })(jQuery, window);
 
 

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

@@ -52,7 +52,7 @@
     }
     .content_container{
         #block-quartiers-de-demain-titredepage{
-            display: none;
+            // display: none;
         }
     }
     .paragraph--type--static-parts{

web/themes/custom/quartiers_de_demain/src/assets/scss/partials/actu-caroussel-home.scss

@@ -99,7 +99,7 @@
                     }
                 }
                 .infos-actu{
-                    order: 2;
+                    // order: 2;
                 }
                 .field_field_date{
                     
@@ -117,7 +117,7 @@
             
 
                 .field_title{
-                    order: 3;
+                    // order: 3;
                     padding-top: 0.2rem;
                     h2{
                         margin: 0;
@@ -130,7 +130,7 @@
                     } 
                 }
                 .field_body{
-                    order: 4;
+                    // order: 4;
                     // visibility: visible;
                     opacity: 1 !important;
                     transform: none !important;
@@ -142,7 +142,7 @@
                     }
                 }
                 .field_field_liens{
-                    order: 5;
+                    // order: 5;
                 }
             }