header vm js

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

@@ -243,7 +243,7 @@ header {
 }
 @media (max-width: 810px) {
   header {
-    height: 170px;
+    height: 100vh;
   }
 }
 header .contextual-region {
@@ -378,6 +378,7 @@ header .header_nav_container #block-quartiers-de-demain-entete ul {
 @media (max-width: 810px) {
   header .header_nav_container #block-quartiers-de-demain-entete ul {
     top: 27.5px;
+    padding-left: 15%;
   }
 }
 @media (max-width: 1090px) {
@@ -421,38 +422,79 @@ header .header:hover + .header_nav_container {
 }
 
 .shrink {
-  height: 260px !important;
+  height: 260px;
+}
+@media (max-width: 810px) {
+  .shrink {
+    height: 170px;
+  }
 }
 
 /* Taille définitive du header après l'animation */
 .header--collapsed {
   height: 320px; /* Ou la hauteur que vous souhaitez pour votre header */
   width: 45%;
-  transform-origin: bottom right; /* Origine de la transformation à l'angle bas droit */
+  transform-origin: bottom right;
   transition: all 1s ease-in-out;
 }
+@media (max-width: 810px) {
+  .header--collapsed {
+    width: 100%;
+    height: 170px;
+  }
+}
 .header--collapsed .header_left_container {
   flex: 0 0 60%;
-  transform-origin: bottom right; /* Origine de la transformation à l'angle bas droit */
+  transform-origin: bottom right;
+}
+@media (max-width: 810px) {
+  .header--collapsed .header_left_container {
+    flex: 1 0 100%;
+  }
 }
 .header--collapsed .header_nav_container {
   flex: 0 0 30%;
-  transform-origin: bottom right; /* Origine de la transformation à l'angle bas droit */
+  transform-origin: bottom right;
+}
+@media (max-width: 810px) {
+  .header--collapsed .header_nav_container {
+    flex: 1 0 100%;
+    position: relative;
+    left: -100%;
+  }
 }
 
 .header--collapsed-already {
   height: 320px; /* Ou la hauteur que vous souhaitez pour votre header */
   width: 45%;
-  transform-origin: bottom right; /* Origine de la transformation à l'angle bas droit */
+  transform-origin: bottom right;
   transition: all 0s ease-in-out;
 }
+@media (max-width: 810px) {
+  .header--collapsed-already {
+    width: 100%;
+    height: 170px;
+  }
+}
 .header--collapsed-already .header_left_container {
   flex: 0 0 60%;
-  transform-origin: bottom right; /* Origine de la transformation à l'angle bas droit */
+  transform-origin: bottom right;
+}
+@media (max-width: 810px) {
+  .header--collapsed-already .header_left_container {
+    flex: 1 0 100%;
+  }
 }
 .header--collapsed-already .header_nav_container {
   flex: 0 0 30%;
-  transform-origin: bottom right; /* Origine de la transformation à l'angle bas droit */
+  transform-origin: bottom right;
+}
+@media (max-width: 810px) {
+  .header--collapsed-already .header_nav_container {
+    flex: 1 0 100%;
+    position: relative;
+    left: -100%;
+  }
 }
 
 footer {
@@ -800,7 +842,7 @@ footer {
 }
 @media (max-width: 810px) {
   .slick-prev {
-    left: 29%;
+    left: 35%;
   }
 }
 [dir=rtl] .slick-prev {
@@ -809,9 +851,13 @@ footer {
 }
 .slick-prev:before {
   content: url("../img/prev.svg ");
+  display: block;
+  transform: scale(0.8);
 }
 [dir=rtl] .slick-prev:before {
   content: url("../img/next.svg ");
+  display: block;
+  transform: scale(0.8);
 }
 
 .slick-next {
@@ -828,9 +874,13 @@ footer {
 }
 .slick-next:before {
   content: url("../img/next.svg ");
+  display: block;
+  transform: scale(0.8);
 }
 [dir=rtl] .slick-next:before {
   content: url("../img/prev.svg ");
+  display: block;
+  transform: scale(0.8);
 }
 
 /* Dots */
@@ -1199,7 +1249,7 @@ footer {
   display: flex;
   flex-direction: column;
   align-items: center;
-  padding-bottom: 3rem;
+  padding-bottom: 6rem;
 }
 #actus-caroussel h2 {
   width: fit-content;
@@ -1222,6 +1272,7 @@ footer {
 @media (max-width: 550px) {
   #actus-caroussel .content-actus .views-row {
     width: 296px !important;
+    padding-top: 3rem;
   }
 }
 #actus-caroussel .content-actus .views-row article.node-type-actualite {
@@ -1328,6 +1379,11 @@ footer {
   position: relative;
   top: 60px;
 }
+@media (max-width: 550px) {
+  #actus-caroussel .content-actus .views-row:nth-child(odd) {
+    top: 0;
+  }
+}
 
 header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-header.animated {
   transform: scale(2);
@@ -1767,6 +1823,7 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
   #home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto {
     grid-template-rows: repeat(10 auto);
     grid-template-columns: repeat(2 1fr);
+    padding-left: 0;
   }
 }
 #home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto h5 {
@@ -1963,19 +2020,19 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
 }
 @media (max-width: 500px) {
   #consultation .layout-content .content_container .node-type-static #paragraph-id--10 .colone-picto p:not(:last-of-type) {
-    flex: 1 25%;
+    flex: 0 40%;
   }
 }
 #consultation .layout-content .content_container .node-type-static #paragraph-id--10 .colone-picto p:not(:last-of-type)::before {
   content: "";
   display: block;
   border-left: solid 1px rgb(7, 50, 194);
-  height: 20%;
+  height: 30px;
   margin-bottom: 0.5rem;
 }
 @media (max-width: 500px) {
   #consultation .layout-content .content_container .node-type-static #paragraph-id--10 .colone-picto p:not(:last-of-type)::before {
-    height: 15%;
+    height: 30px;
   }
 }
 #consultation .layout-content .content_container .node-type-static #paragraph-id--10 .colone-picto p:last-of-type {

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

@@ -0,0 +1,93 @@
+  //////// header ////////////
+
+  document.addEventListener('DOMContentLoaded', function() {
+
+    const header = document.querySelector('header');
+ // Vérifier si la page a été rechargée ou si c'est une navigation interne
+ const isFirstLoad = !performance.getEntriesByType("navigation")[0].type.includes('back_forward');
+ // Vérifier si nous sommes sur la page cible
+ const isTargetPath = window.location.pathname === '/'; // Remplacez '/votre-chemin-cible' par le chemin réel
+
+    // Si ce n'est pas la première charge ou si le chemin n'est pas le chemin cible, ajouter la classe immédiatement
+    if (!isFirstLoad || !isTargetPath) {
+      header.classList.add('header--collapsed-already');
+  } else {
+      // Sinon, appliquer la transition après un délai
+      setTimeout(() => {
+          header.classList.add('header--collapsed');
+      }, 1000); // Attendre 1 seconde avant de réduire la taille du header
+  }
+
+
+       // Gestion du scroll pour afficher/masquer le header nav
+    const headerNavContainer = document.querySelector('.header_nav_container');
+    const headerLeftContainer = document.querySelector('header');
+    let lastScrollTop = 0;
+    let threshold = 100; // Change this value as needed
+    let isHidden = false;
+  
+    function slideOut() {
+      headerNavContainer.animate([
+        { transform: 'translateX(0)' },
+        { transform: 'translateX(-100%)' }
+      ], {
+        duration: 300,
+        fill: 'forwards'
+      });
+      isHidden = true;
+    }
+  
+    function slideIn() {
+      headerNavContainer.animate([
+        { transform: 'translateX(-100%)' },
+        { transform: 'translateX(0)' }
+      ], {
+        duration: 300,
+        fill: 'forwards'
+      });
+      isHidden = false;
+    }
+  
+    function handleScroll() {
+      let scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+  
+      if (scrollTop > threshold && !isHidden) {
+        slideOut();
+      } else if (scrollTop <= threshold && isHidden) {
+        slideIn();
+      }
+  
+      lastScrollTop = scrollTop <= 0 ? 0 : scrollTop; // For Mobile or negative scrolling
+    }
+  
+    function handleTouchAndMouseEnter() {
+      if (isHidden) {
+        slideIn();
+      }
+    }
+  
+    function handleTouchAndMouseLeave() {
+      if (lastScrollTop > threshold && !isHidden) {
+        slideOut();
+      }
+    }
+  
+    window.addEventListener('scroll', handleScroll);
+  
+    // Mouse events for desktop
+    headerLeftContainer.addEventListener('mouseenter', handleTouchAndMouseEnter);
+    headerLeftContainer.addEventListener('mouseleave', handleTouchAndMouseLeave);
+  
+    // Touch events for tablets and mobile devices
+    headerLeftContainer.addEventListener('touchstart', handleTouchAndMouseEnter);
+    headerLeftContainer.addEventListener('touchend', handleTouchAndMouseLeave);
+  
+    // Initial check to see if we're at the top of the page
+    if (window.pageYOffset <= threshold) {
+      slideIn();
+    } else {
+      slideOut();
+    }
+  });
+  
+  

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

@@ -122,6 +122,30 @@
       isHidden = false;
     }
     
+    function slideDown() {
+      // headerNavContainer.style.display = 'block';
+      headerNavContainer.animate([
+        { transform: 'translateY(0%)' },
+        { transform: 'translateY(+100%)' }
+      ], {
+        duration: 300,
+        fill: 'forwards'
+      });
+      isHidden = false;
+    }
+  
+    function slideUp() {
+      headerNavContainer.animate([
+        { transform: 'translateY(100%)' },
+        { transform: 'translateY(0%)' }
+      ], {
+        duration: 300,
+        fill: 'forwards'
+      }).onfinish = function() {
+        // headerNavContainer.style.display = 'none';
+      };
+      isHidden = true;
+    }
       // Fonction pour ajuster la hauteur du header lors du défilement
       function adjustHeaderHeight() {
         if (window.scrollY > 0) {
@@ -133,27 +157,45 @@
 
     function handleScroll() {
       let scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+      const isMobile = window.innerWidth < 810;
 
       if (scrollTop > threshold && !isHidden) {
+        if (isMobile) {
+          slideUp();
+        } else {
           slideOut();
+        }
       } else if (scrollTop <= threshold && isHidden) {
+        if (isMobile) {
+          slideDown();
+        } else {
           slideIn();
         }
+      }
+  
   
       lastScrollTop = scrollTop <= 0 ? 0 : scrollTop; // For Mobile or negative scrolling
     }
   
     function handleTouchAndMouseEnter() {
       if (isHidden) {
+        if (window.innerWidth < 810) {
+          slideDown();
+        } else {
           slideIn();
         }
       }
+    }
   
     function handleTouchAndMouseLeave() {
       if (lastScrollTop > threshold && !isHidden) {
+        if (window.innerWidth < 810) {
+          slideUp();
+        } else {
           slideOut();
         }
       }
+    }
   
     window.addEventListener('scroll', handleScroll);
     window.addEventListener('scroll', adjustHeaderHeight);
@@ -168,9 +210,17 @@
   
     // Initial check to see if we're at the top of the page
     if (window.pageYOffset <= threshold) {
-      slideIn();
+      if (window.innerWidth < 810) {
+        slideDown();
       } else { 
-      slideOut();
+        slideIn();
+      } 
+    } else {
+      if (window.innerWidth < 810) {
+        slideUp();
+      } else {
+        slideIn();
+      }
     }
   
   });

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

@@ -64,16 +64,16 @@
                             padding: 0.5rem;
                             margin-top: 0;
                             @media(max-width: 500px){
-                                flex: 1 25%;
+                                flex: 0 40%;
                             }
                             &::before{
                                 content:"";
                                 display: block;
                                 border-left: solid 1px $blue_QDD;
-                                height: 20%;
+                                height: 30px;
                                 margin-bottom: 0.5rem;
                                 @media(max-width: 500px){
-                                    height: 15%;
+                                    height: 30px;
                                 }
                             }
                         }

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

@@ -347,6 +347,7 @@
                     @media(max-width: 700px){
                         grid-template-rows: repeat(10 auto);
                         grid-template-columns: repeat(2 1fr);
+                        padding-left: 0;
                     }
                     
                     h5{

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

@@ -2,7 +2,7 @@
     display: flex;
     flex-direction: column;
     align-items: center;
-    padding-bottom: 3rem;
+    padding-bottom: 6rem;
     h2{
         width: fit-content;
         padding-bottom: 1.5rem;
@@ -17,7 +17,6 @@
             flex-direction: row;
             flex-wrap: nowrap;
             width: 100vw;
-            
         }
         .views-row{
             width: 650px !important;
@@ -25,6 +24,7 @@
             
             @media(max-width: 550px){
                 width: 296px !important;
+                padding-top: 3rem;
             }
             article.node-type-actualite{
                 display: flex;
@@ -132,6 +132,9 @@
         .views-row:nth-child(odd){
             position: relative;
             top: 60px;
+            @media(max-width: 550px){
+                top: 0;
+            }
         } 
 
 

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

@@ -12,7 +12,7 @@ header{
     // transition: height 2s ease-in-out, width 2s ease-in-out; /* Transition pour le changement de taille */
     // transition: height 0.3s, padding 0.3s; /* Add transition for smooth resizing */
     @media(max-width: 810px){
-        height: 170px;
+        height: 100vh;
     }
 
     .contextual-region{
@@ -128,6 +128,7 @@ header{
                 margin: 0;
                 @media(max-width: 810px){
                     top: calc($header-height-pad / 4 );
+                    padding-left: 15%;
                 }
                 li{
                     @media(max-width: 1090px){
@@ -190,36 +191,63 @@ header{
   }
 }
 .shrink{
-    height: 260px !important;
+    height: 260px ;
+    @media(max-width: 810px){
+        height: 170px;
+       }
 }
 /* Taille définitive du header après l'animation */
 .header--collapsed {
     height: $header-height; /* Ou la hauteur que vous souhaitez pour votre header */
     width: 45%;
-    transform-origin: bottom right; /* Origine de la transformation à l'angle bas droit */
+    transform-origin: bottom right; 
     transition: all 1s ease-in-out;
+    @media(max-width: 810px){
+     width: 100%;
+     height: 170px;
+    }
     .header_left_container{
         flex: 0 0 60%;
-        transform-origin: bottom right; /* Origine de la transformation à l'angle bas droit */
+        transform-origin: bottom right; 
+        @media(max-width: 810px){
+            flex: 1 0 100%;
+        }
     }
     .header_nav_container{
         flex: 0 0 30%;
-        transform-origin: bottom right; /* Origine de la transformation à l'angle bas droit */
+        transform-origin: bottom right; 
+        @media(max-width: 810px){
+            flex: 1 0 100%;
+            position: relative;
+            left: -100%;
+        }
     }
     
 }
 .header--collapsed-already{
     height: $header-height; /* Ou la hauteur que vous souhaitez pour votre header */
     width: 45%;
-    transform-origin: bottom right; /* Origine de la transformation à l'angle bas droit */
+    transform-origin: bottom right; 
     transition: all 0s ease-in-out;
+    @media(max-width: 810px){
+        width: 100%;
+        height: 170px;
+       }
     .header_left_container{
         flex: 0 0 60%;
-        transform-origin: bottom right; /* Origine de la transformation à l'angle bas droit */
+        transform-origin: bottom right; 
+        @media(max-width: 810px){
+            flex: 1 0 100%;
+        }
     }
     .header_nav_container{
         flex: 0 0 30%;
-        transform-origin: bottom right; /* Origine de la transformation à l'angle bas droit */
+        transform-origin: bottom right; 
+        @media(max-width: 810px){
+            flex: 1 0 100%;
+            position: relative;
+            left: -100%;
+        }
     }
 
 }

web/themes/custom/quartiers_de_demain/src/assets/scss/partials/slick-theme.scss

@@ -115,7 +115,8 @@ $slick-opacity-not-active: 0.25 !default;
 .slick-prev {
     left: 46%;
     @media(max-width:810px){
-        left: 29%;
+        left: 35%;
+        
     }
     [dir="rtl"] & {
         left: auto;
@@ -123,8 +124,13 @@ $slick-opacity-not-active: 0.25 !default;
     }
     &:before {
         content: $slick-prev-character;
+        display: block;
+        transform: scale(0.8);
         [dir="rtl"] & {
             content: $slick-next-character;
+            display: block;
+            transform: scale(0.8);
+
         }
     }
 }
@@ -140,8 +146,14 @@ $slick-opacity-not-active: 0.25 !default;
     }
     &:before {
         content: $slick-next-character;
+        display: block;
+        transform: scale(0.8);
+
         [dir="rtl"] & {
             content: $slick-prev-character;
+            display: block;
+            transform: scale(0.8);
+
         }
     }
 }