retrouve page lessites

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

@@ -202,7 +202,7 @@ h2, h3 {
 }
 @media (max-width: 810px) {
   .layout-container main#home {
-    padding-top: 380px;
+    padding-top: 300px;
   }
 }
 @media (max-width: 810px) {
@@ -432,17 +432,17 @@ header .header_nav_container {
   transform: translateX(0);
   transition: transform 0.3s ease-in-out;
   z-index: -1;
-}
-@media (max-width: 1090px) {
-  header .header_nav_container {
-    height: fit-content;
-  }
+  display: flex;
+  flex-direction: column;
 }
 @media (max-width: 500px) {
   header .header_nav_container {
     flex: 0 0 40%;
   }
 }
+header .header_nav_container #block-quartiers-de-demain-entete {
+  margin: auto;
+}
 header .header_nav_container #block-quartiers-de-demain-entete h2 {
   display: none;
 }
@@ -564,7 +564,6 @@ header .header:hover + .header_nav_container {
     flex: 1 0 100%;
     position: relative;
     left: -100%;
-    top: -45px;
   }
 }
 
@@ -607,7 +606,11 @@ header .header:hover + .header_nav_container {
     flex: 1 0 100%;
     position: relative;
     left: -100%;
-    top: -75px;
+  }
+}
+@media (max-width: 550px) {
+  .header--collapsed-already .header_nav_container {
+    top: 0px;
   }
 }
 
@@ -1511,9 +1514,19 @@ footer {
 #actus-caroussel button {
   top: -2.5rem;
 }
+@media (max-width: 810px) {
+  #actus-caroussel button {
+    top: -1.5rem;
+  }
+}
 #actus-caroussel .content-actus .slick-list {
   padding-bottom: 4rem;
 }
+@media (max-width: 810px) {
+  #actus-caroussel .content-actus .slick-list {
+    padding-bottom: 0rem;
+  }
+}
 #actus-caroussel .content-actus .view {
   display: flex;
   flex-direction: row;
@@ -3172,7 +3185,12 @@ body {
   width: 100%;
   padding-bottom: 7rem;
 }
+#page-node .content_container .node-type-actualite a {
+  display: flex;
+  flex-direction: column;
+}
 #page-node .content_container .node-type-actualite .infos-actu {
+  order: 1;
   display: flex;
   flex-direction: row;
   border-top: solid red 1px;
@@ -3203,15 +3221,20 @@ body {
   padding-right: 0.4rem;
 }
 #page-node .content_container .node-type-actualite .field_body {
+  order: 2;
   padding-bottom: 2rem;
 }
 #page-node .content_container .node-type-actualite .field_body p {
   font-size: 0.8rem;
 }
 #page-node .content_container .node-type-actualite .field_field_liens {
+  order: 3;
   padding-bottom: 2rem;
+  padding-top: 2rem;
 }
 #page-node .content_container .node-type-actualite .field_field_liens a {
+  display: flex;
+  flex-direction: row;
   padding-left: 0.5rem;
   display: inline-flex;
   align-items: center;
@@ -3229,6 +3252,12 @@ body {
   padding-right: 0.2rem;
   padding-left: 0.2rem;
 }
+#page-node .content_container .node-type-actualite .field_field_liens a:not(.ext) {
+  display: none;
+}
+#page-node .content_container .node-type-actualite .field_field_images {
+  order: 5;
+}
 #page-node .content_container .node-type-actualite .field_field_images img {
   width: 100%;
   height: auto;

web/themes/custom/quartiers_de_demain/dist/assets/img/rect4.svg

@@ -0,0 +1,129 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   version="1.1"
+   id="svg1"
+   width="1801.0212"
+   height="4029.4231"
+   viewBox="0 0 1801.0212 4029.4232"
+   sodipodi:docname="formes-animees.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview1"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1">
+    <inkscape:page
+       x="0"
+       y="0"
+       width="1801.0212"
+       height="4029.4231"
+       id="page2"
+       margin="0"
+       bleed="0" />
+  </sodipodi:namedview>
+  <defs
+     id="defs1">
+    <clipPath
+       clipPathUnits="userSpaceOnUse"
+       id="clipPath258">
+      <path
+         d="M 0,0 H 1920 V 9000 H 0 Z"
+         transform="translate(-1095.6993,-8098.7595)"
+         id="path258" />
+    </clipPath>
+    <clipPath
+       clipPathUnits="userSpaceOnUse"
+       id="clipPath301">
+      <path
+         d="M 0,0 H 1920 V 9000 H 0 Z"
+         transform="translate(-1476.5001,-5895.4337)"
+         id="path301" />
+    </clipPath>
+    <clipPath
+       clipPathUnits="userSpaceOnUse"
+       id="clipPath303">
+      <path
+         d="M 0,0 H 1920 V 9000 H 0 Z"
+         transform="translate(-1623.8512,-4272.9005)"
+         id="path303" />
+    </clipPath>
+  </defs>
+  <g
+     id="g2"
+     transform="translate(-299.16899,-2519.6031)">
+    <g
+       id="g1"
+       transform="translate(0.17944336,-2.9196463)">
+      <path
+         id="path256"
+         d="m 321.27266,3336.1817 182.91889,175.8201"
+         style="fill:none;stroke:#0833c2;stroke-width:64.3111;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+         inkscape:export-filename="formes-animees.svg"
+         inkscape:export-xdpi="300"
+         inkscape:export-ydpi="300" />
+      <path
+         id="path256-3"
+         d="m 1852.1683,6336.9184 -163.0856,194.3583"
+         style="fill:none;stroke:#0833c2;stroke-width:64.3111;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+      <path
+         id="path257"
+         d="M 0,0 C -205.098,0 -371.361,-166.265 -371.361,-371.362"
+         style="fill:none;stroke:#f7002b;stroke-width:137.482;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+         transform="matrix(-0.80902482,0,0,-0.80902482,1743.8143,2885.2905)"
+         clip-path="url(#clipPath258)" />
+      <path
+         id="path300"
+         d="M 0,0 C 0,-126.805 102.795,-229.6 229.6,-229.6"
+         style="fill:none;stroke:#f7002b;stroke-width:85;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+         transform="matrix(0.72647042,0,0,-0.72647042,1836.7965,4740.0583)"
+         clip-path="url(#clipPath301)" />
+      <path
+         id="path302"
+         d="M 0,0 C 0,126.805 -102.795,229.6 -229.6,229.6"
+         style="fill:none;stroke:#0833c2;stroke-width:85;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+         transform="matrix(0.82260013,0,0,-0.82260013,2025.1937,5635.4927)"
+         clip-path="url(#clipPath303)" />
+      <path
+         id="path311"
+         d="M 456.65311,5469.771 V 5209.7705"
+         style="fill:none;stroke:#000000;stroke-width:78.092;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+    </g>
+  </g>
+  <rect
+     style="fill:none;stroke:none;stroke-width:0;paint-order:fill markers stroke"
+     id="rect2"
+     width="1550.348"
+     height="114.74608"
+     x="122.31378"
+     y="-9.4031076e-13" />
+  <rect
+     style="fill:none;stroke:none;stroke-width:0;paint-order:fill markers stroke"
+     id="rect1"
+     width="1540.1483"
+     height="112.19624"
+     x="73.095963"
+     y="68.049309" />
+  <rect
+     style="fill:none;stroke-width:0;paint-order:stroke fill markers"
+     id="rect3"
+     width="1559.4871"
+     height="238.19258"
+     x="108.70975"
+     y="3395.3674" />
+  <rect
+     style="fill:none;stroke-width:0;paint-order:stroke fill markers"
+     id="rect4"
+     width="1801.0212"
+     height="252.14297"
+     x="1.3299257e-06"
+     y="4.5025892" />
+</svg>

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

@@ -358,35 +358,19 @@
 ///////////////////  caracteres  body actus/////////////////////////
 
 document.addEventListener('DOMContentLoaded', function() {
-    // Nombre maximum de caractères à afficher
-    const maxChars = 140; // Ajustez cette valeur selon vos besoins
+  // Maximum number of characters to display
+  const maxChars = 140; // Adjust this value as needed
 
-    document.querySelectorAll('#actus-caroussel .node-type-actualite').forEach(function(node) {
-        let paragraphs = node.querySelectorAll('.field_body p');
-        let fullText = "";
-        
-        // Concaténer tous les paragraphes
-        paragraphs.forEach(p => fullText += p.textContent.trim() + " ");
-        fullText = fullText.trim();
-
-        // Vérifier si le texte dépasse la limite
-        if (fullText.length > maxChars) {
-            let truncatedText = fullText.slice(0, maxChars) + '...';
-
-            // Vider tout le contenu et insérer seulement le texte tronqué
-            let firstParagraph = paragraphs[0];
-            firstParagraph.textContent = truncatedText;
-
-            // Masquer les autres paragraphes
-            for (let i = 1; i < paragraphs.length; i++) {
-                paragraphs[i].style.display = "none";
-            }
+  document.querySelectorAll('#actus-caroussel .node-type-actualite .field_body p').forEach(function(paragraph) {
+    let text = paragraph.textContent.trim();
+    if (text.length > maxChars) {
+      let truncatedText = text.slice(0, maxChars) + '...';
+      paragraph.textContent = truncatedText;
     }
   });
 });
 
 
-
 //////////// start slideshow home  ////////////////////////// 
 
 
@@ -701,91 +685,6 @@ 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/global/_layout.scss

@@ -45,7 +45,7 @@ $width-menu-slidedown : 550px;
                 
             
             @media(max-width: 810px){
-                padding-top: 380px;
+                padding-top: 300px;
             }
         }
     }

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

@@ -33,7 +33,13 @@
             .node-type-actualite{
                 width: 100%;
                 padding-bottom: 7rem;
+                a{
+                    display: flex;
+                    flex-direction: column;
+                }
+
                 .infos-actu{
+                    order: 1;
                     display: flex;
                     flex-direction: row;
                     border-top: solid red 1px;
@@ -65,14 +71,19 @@
         
                 }
                 .field_body {
+                    order: 2;
                     padding-bottom: 2rem;
                     p{
                     font-size: 0.8rem;
                     }
                 }
                 .field_field_liens{
+                    order: 3;
                     padding-bottom: 2rem;
+                    padding-top: 2rem;
                     a{  
+                        display: flex;
+                        flex-direction: row;
                         padding-left: 0.5rem;
                         display: inline-flex;
                         align-items: center;
@@ -91,9 +102,14 @@
                             
                         }
                     }
+                    
+                    a:not(.ext){
+                        display: none;
+                    }
                 }
 
                 .field_field_images{
+                    order: 5;
                     img{
                         width: 100%;
                         height: auto;

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

@@ -16,10 +16,16 @@
     }
     button{
         top: -2.5rem;
+        @media(max-width: 810px){
+            top: -1.5rem;
+        }
     }
     .content-actus{
         .slick-list{
             padding-bottom: 4rem;
+            @media(max-width: 810px){
+                padding-bottom: 0rem;
+            }
         }
         .view{
             display: flex;

web/themes/custom/quartiers_de_demain/src/assets/scss/partials/header.scss

@@ -184,14 +184,18 @@ header{
         transform: translateX(0);
         transition: transform 0.3s ease-in-out;
         z-index: -1 ;
+        display: flex;
+        flex-direction: column;
+
         @media(max-width: 1090px){
             // text-align:left;
-            height: fit-content;
+            // height: fit-content;
         }
         @media(max-width: 500px){
             flex: 0 0 40%;
         }
         #block-quartiers-de-demain-entete{
+            margin: auto;
             h2{
                 display: none;
             }
@@ -307,7 +311,7 @@ header{
             flex: 1 0 100%;
             position: relative;
             left: -100%;
-            top: -45px;
+            // top: -45px;  /* a remettre et faire varier si ajoute éléments dans menu */
 
         }
     }
@@ -343,7 +347,10 @@ header{
             flex: 1 0 100%;
             position: relative;
             left: -100%;
-            top: -75px;
+            // top: -75px;
+        }
+        @media(max-width: 550px){
+            top: 0px;
         }
     }
 

web/themes/custom/quartiers_de_demain/templates/node--actualite.html.twig

@@ -92,22 +92,17 @@
     {# {{ content }} #}
   {# </div> #}
   {% block content %}
-
   <a href="{{ url }}" rel="bookmark">{{ label }}
   {{content.field_images}}
   <div class="infos-actu">
     {{content.field_type_d_actualite}}
     {{content.field_date}}
   </div>
-    <h2{{ title_attributes }}>
-     
-    </h2>
     {{content.body}}
    {{content.field_liens}}
     
    
 </a>
-
   {% endblock %}
 
 </article>