mobile carroussel actus

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

@@ -232,7 +232,7 @@ header {
   transition: height 0.3s, padding 0.3s; /* Add transition for smooth resizing */
   /* Classes for scroll effect */
 }
-@media (max-width: 700px) {
+@media (max-width: 500px) {
   header {
     height: 110px;
   }
@@ -345,6 +345,11 @@ header .header_nav_container {
   transition: transform 0.3s ease-in-out;
   z-index: -1;
 }
+@media (max-width: 500px) {
+  header .header_nav_container {
+    flex: 0 0 40%;
+  }
+}
 header .header_nav_container #block-quartiers-de-demain-entete h2 {
   display: none;
 }
@@ -363,7 +368,7 @@ header .header_nav_container #block-quartiers-de-demain-entete ul {
     top: 27.5px;
   }
 }
-@media (max-width: 500px) {
+@media (max-width: 1090px) {
   header .header_nav_container #block-quartiers-de-demain-entete ul li {
     padding-top: 0.3rem;
   }
@@ -373,11 +378,17 @@ header .header_nav_container #block-quartiers-de-demain-entete ul li a {
   color: white;
   font-size: 0.5rem;
 }
+@media (max-width: 1090px) {
+  header .header_nav_container #block-quartiers-de-demain-entete ul li a {
+    font-size: 0.9rem;
+  }
+}
 @media (max-width: 500px) {
   header .header_nav_container #block-quartiers-de-demain-entete ul li a {
     display: flex;
     flex-direction: column;
     align-items: flex-start;
+    font-size: 0.6rem;
   }
 }
 header .header_nav_container #block-quartiers-de-demain-entete ul li:not(:last-of-type) ::after {
@@ -681,6 +692,7 @@ footer {
 .slick-next {
   position: absolute;
   display: block;
+  z-index: 99;
   height: 20px;
   width: 20px;
   line-height: 0px;
@@ -921,18 +933,35 @@ footer {
   background-size: contain;
   background-position-x: -20%;
 }
+@media (max-width: 1090px) {
+  #home .config_pages--type--deroulement {
+    cursor: grab;
+  }
+}
 #home .timeline {
   white-space: nowrap;
   overflow: hidden;
   padding-top: 10rem;
   padding-bottom: 4rem;
 }
+@media (max-width: 1090px) {
+  #home .timeline {
+    padding-top: 18rem;
+    overflow: scroll;
+  }
+}
 #home .timeline .__timeline-arrows {
   width: fit-content;
   margin: auto;
   position: relative;
   top: -115px;
 }
+@media (max-width: 1090px) {
+  #home .timeline .__timeline-arrows {
+    top: -211px;
+    display: none;
+  }
+}
 #home .timeline .__timeline-arrows button {
   background-color: transparent;
   border: none;
@@ -966,10 +995,10 @@ footer {
   content: "";
   position: absolute;
   top: 50%;
-  left: 101%;
+  left: 100%;
   bottom: 0;
-  width: 12px;
+  width: 17px;
-  height: 12px;
+  height: 17px;
   transform: translateY(-50%);
   border-radius: 50%;
   background: black;
@@ -988,6 +1017,12 @@ footer {
   flex-direction: row;
   padding-bottom: 1rem;
   padding-left: 2rem;
+  padding-right: 2rem;
+}
+@media (max-width: 550px) {
+  #home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement {
+    padding-left: 0rem;
+  }
 }
 #home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .date {
   width: fit-content;
@@ -1002,12 +1037,23 @@ footer {
   font-size: 2rem;
   line-height: 0.3rem;
 }
+@media (max-width: 550px) {
+  #home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .date .field_field_date_de_jour {
+    font-size: 3rem;
+    line-height: 1.3rem;
+  }
+}
 #home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .date .field_field_date_de_moi {
   padding-right: 0.2rem;
   text-transform: uppercase;
   font-size: 3rem;
   display: inline-flex;
 }
+@media (max-width: 550px) {
+  #home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .date .field_field_date_de_moi {
+    font-size: 4rem;
+  }
+}
 #home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .date .field_field_date_de_moi::after {
   content: ".";
 }
@@ -1018,6 +1064,11 @@ footer {
   position: relative;
   top: -10px;
 }
+@media (max-width: 550px) {
+  #home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .date .annee {
+    font-size: 1.2rem;
+  }
+}
 #home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .date .annee .field_field_date_de_annee {
   display: inline-flex;
   align-items: center;
@@ -1047,16 +1098,25 @@ footer {
   border: solid rgb(7, 50, 194) 1px;
   border-radius: 5%;
   padding: 0.6rem 0.6rem;
-  width: fit-content;
   min-width: 50%;
 }
 #home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .text .field_field_titre {
   font-size: 0.6rem;
 }
+@media (max-width: 700px) {
+  #home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .text .field_field_titre {
+    font-size: 1rem;
+  }
+}
 #home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .text .field_field_description p {
   font-size: 0.5rem !important;
   margin: 0;
 }
+@media (max-width: 700px) {
+  #home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .text .field_field_description p {
+    font-size: 1rem !important;
+  }
+}
 #home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .text .field_field_description .field--label-above {
   display: none;
 }
@@ -1094,6 +1154,11 @@ footer {
   width: 500px !important;
   padding: 1rem;
 }
+@media (max-width: 550px) {
+  #actus-caroussel .content-actus .views-row {
+    width: 296px !important;
+  }
+}
 #actus-caroussel .content-actus .views-row .node-type-actualite .field_field_images {
   -moz-border-radius: 9px; /* pour Mozilla */
   -khtml-border-radius: 9px; /* pour Safari et Chrome */
@@ -1103,12 +1168,22 @@ footer {
   height: 250px;
   margin-bottom: 0.6rem;
 }
+@media (max-width: 550px) {
+  #actus-caroussel .content-actus .views-row .node-type-actualite .field_field_images {
+    height: 170px;
+  }
+}
 #actus-caroussel .content-actus .views-row .node-type-actualite .field_field_images img {
   width: 100%;
   height: fit-content;
   max-height: 250px;
   object-fit: cover;
 }
+@media (max-width: 550px) {
+  #actus-caroussel .content-actus .views-row .node-type-actualite .field_field_images img {
+    max-height: 170px;
+  }
+}
 #actus-caroussel .content-actus .views-row .node-type-actualite .field_field_type_d_actualite {
   text-transform: uppercase;
   color: red;
@@ -1497,7 +1572,8 @@ footer {
 @media (max-width: 700px) {
   #home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto h5:nth-of-type(2) {
     grid-row: 4;
-    grid-column: 1;
+    grid-column: 2;
+    margin: auto;
   }
 }
 #home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto h5:nth-of-type(3) {
@@ -1506,7 +1582,7 @@ footer {
 }
 @media (max-width: 700px) {
   #home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto h5:nth-of-type(3) {
-    grid-row: 9;
+    grid-row: 8;
     grid-column: 1;
   }
 }
@@ -1533,8 +1609,8 @@ footer {
 }
 @media (max-width: 700px) {
   #home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto svg:nth-of-type(2) {
-    grid-row: 5;
+    grid-row: 4;
-    grid-column: 1;
+    grid-column: 1/span 2;
     width: 315px;
   }
 }
@@ -1544,7 +1620,7 @@ footer {
 }
 @media (max-width: 700px) {
   #home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto svg:nth-of-type(3) {
-    grid-row: 9/span 9;
+    grid-row: 8;
     grid-column: 1/span 2;
     width: 315px;
   }
@@ -1568,7 +1644,7 @@ footer {
 }
 @media (max-width: 700px) {
   #home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto p:nth-of-type(3) {
-    grid-row: 8;
+    grid-row: 9;
     grid-column: 1/span 2;
   }
 }

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

@@ -39,9 +39,9 @@
 
   //////// header ////////////
 
-
   document.addEventListener('DOMContentLoaded', function() {
     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;
@@ -70,40 +70,48 @@
   
     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
     }
   
-    window.addEventListener('scroll', function() {
+    function handleTouchAndMouseEnter() {
-      handleScroll();
+      if (isHidden) {
-    });
+        slideIn();
-
-    const headerLeftContainer = document.querySelector('header');
-    headerLeftContainer.addEventListener('mouseenter', function() {
-      slideIn(); // Slide out on mouse enter
-    });
-  
-    headerLeftContainer.addEventListener('mouseleave', function() {
-      if (lastScrollTop <= threshold) {
-        slideOut(); // Slide in on mouse leave if not scrolled down
       }
-    });
+    }
-     // Initial check to see if we're at the top of the page
+  
-  if (window.pageYOffset <= threshold) {
+    function handleTouchAndMouseLeave() {
-    slideIn();
+      if (lastScrollTop > threshold && !isHidden) {
-  } else {
+        slideOut();
-    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();
+    }
   });
   
   
+  
 
 // /////////////////
 //// ancre dans texte au click parragraphe correspondant arrive en dessous du header 
@@ -164,52 +172,71 @@ $( document ).ready(function() {
 
 ////////////////// Timeline ///////////////////////
 
+
 document.addEventListener('DOMContentLoaded', function() {
   let currentSlide = 0;
 
-  function showSlides(index) {
+  function getVisibleSlides() {
-      const slides = document.querySelectorAll('.paragraph--type--phase-deroulement');
+    if (window.innerWidth <= 600) {
-      const totalSlides = slides.length;
+      return 1; // Show 1 slide on small screens
-      const visibleSlides = 3; // Number of slides to show at a time
+    } else if (window.innerWidth <= 900) {
-      const maxSlide = totalSlides - visibleSlides;
+      return 2; // Show 2 slides on medium screens
-
+    } else {
-      // Adjust the index to ensure it stays within bounds
+      return 3; // Show 3 slides on large screens
-      currentSlide = Math.max(0, Math.min(index, maxSlide));
+    }
-
-      // Calculate the offset for the transform
-      const offset = currentSlide * -100 / visibleSlides;
-      document.querySelector('.__timeline-content').style.transform = `translateX(${offset}%)`;
-
-      // Enable/disable arrows based on the current slide
-      document.getElementById('arrowPrev').disabled = currentSlide === 0;
-      document.getElementById('arrowNext').disabled = currentSlide === maxSlide;
   }
 
+  function showSlides(index) {
+    const slides = document.querySelectorAll('.paragraph--type--phase-deroulement');
+    const totalSlides = slides.length;
+    const visibleSlides = getVisibleSlides();
+    const maxSlide = totalSlides - visibleSlides;
+
+    // Adjust the index to ensure it stays within bounds
+    currentSlide = Math.max(1, Math.min(index, maxSlide));
+
+    // Calculate the offset for the transform
+    const offset = currentSlide * -70 / visibleSlides;
+    document.querySelector('.__timeline-content').style.transform = `translateX(${offset}%)`;
+
+    // Enable/disable arrows based on the current slide
+    document.getElementById('arrowPrev').disabled = currentSlide === 0;
+    document.getElementById('arrowNext').disabled = currentSlide === maxSlide;
+  }
 
   function prevSlide() {
-      showSlides(currentSlide - 1);
+    showSlides(currentSlide - 1);
   }
 
   function nextSlide() {
-      showSlides(currentSlide + 1);
+    showSlides(currentSlide + 1);
   }
 
   // Attach event listeners
   document.getElementById('arrowPrev').addEventListener('click', prevSlide);
   document.getElementById('arrowNext').addEventListener('click', nextSlide);
 
-  
+  // Initialize the first view of the slides
-  // Check and replace empty day fields
+  showSlides(currentSlide);
+
+  // Update month field to only show the first 3 letters
   document.querySelectorAll('.paragraph--type--phase-deroulement').forEach(function(paragraph) {
-    const dateElement = paragraph.querySelector('.date');
     const monthField = paragraph.querySelector('.field_field_date_de_moi div:nth-of-type(2)');
-    const monthText = monthField.textContent.trim();
+    if (monthField) {
-    if (monthText.length >= 3) {
+      const monthText = monthField.textContent.trim();
-    monthField.textContent = monthText.slice(0, 3);
+      if (monthText.length >= 3) {
-    console.log(monthField)
+        monthField.textContent = monthText.slice(0, 3);
+      }
     }
   });
 
+  // Handle window resize
+  window.addEventListener('resize', function() {
+    showSlides(currentSlide); // Recalculate the slides on resize
+  });
+// });
+
+
   // Initialize
   showSlides(currentSlide);
 });
@@ -247,7 +274,7 @@ document.addEventListener('DOMContentLoaded', function() {
             settings: {
               slidesToShow: 1,
               adaptiveHeight: true,
-              arrows: false,
+              arrows: true,
               draggable: true,
               centerMode: true,
             }

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

@@ -330,14 +330,15 @@
                         grid-column: 3;
                         @media(max-width: 700px){
                             grid-row: 4;
-                            grid-column: 1;
+                            grid-column: 2;
+                            margin: auto;
                         }
                     }
                     h5:nth-of-type(3){
                         grid-row: 1;
                         grid-column: 5;
                         @media(max-width: 700px){
-                            grid-row: 9;
+                            grid-row: 8;
                             grid-column: 1;
                         }
                     }
@@ -360,8 +361,8 @@
                         grid-row: 3;
                         grid-column: inherit;
                         @media(max-width: 700px){
-                            grid-row: 5;
+                            grid-row: 4;
-                            grid-column: 1 ;
+                            grid-column: 1 /span 2 ;
                             width: 315px;
                         }
                     }
@@ -369,7 +370,7 @@
                         grid-row: 1 /span 2;
                         grid-column: 5 /span 6;
                         @media(max-width: 700px){
-                            grid-row: 9/span 9;
+                            grid-row: 8 ;
                             grid-column: 1 /span 2;
                             width: 315px;
                         }
@@ -389,7 +390,7 @@
                         grid-row: 3;
                         grid-column: 5;
                         @media(max-width: 700px){
-                            grid-row: 8;
+                            grid-row: 9;
                             grid-column:  1 /span 2;
                         }
                     }

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

@@ -32,6 +32,9 @@
         }
         .views-row{
             width: 500px !important;
+            @media(max-width: 550px){
+                width: 296px !important;
+            }
             padding: 1rem;
             .node-type-actualite{
                 .field_field_images{
@@ -42,11 +45,17 @@
                     background-color: red;
                     height: 250px;
                     margin-bottom: 0.6rem;
+                    @media(max-width: 550px){
+                        height: 170px;
+                    }
                     img{
                         width: 100%;
                         height: fit-content;
                         max-height: 250px;
                         object-fit: cover;
+                        @media(max-width: 550px){
+                            max-height: 170px;
+                        }
                     }
                 }
                 .field_field_type_d_actualite{

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

@@ -9,7 +9,7 @@ header{
     position: fixed;
     top: 0;
     transition: height 0.3s, padding 0.3s; /* Add transition for smooth resizing */
-    @media(max-width: 700px){
+    @media(max-width: 500px){
         height: $header-height-pad;
     }
 
@@ -106,7 +106,9 @@ header{
         transform: translateX(0);
         transition: transform 0.3s ease-in-out;
         z-index: -1 ;
-    
+        @media(max-width: 500px){
+            flex: 0 0 40%;
+        }
         #block-quartiers-de-demain-entete{
             h2{
                 display: none;
@@ -125,7 +127,7 @@ header{
                     top: calc($header-height-pad / 4 );
                 }
                 li{
-                    @media(max-width: 500px){
+                    @media(max-width: 1090px){
                         padding-top: 0.3rem;
                     }
                     a{
@@ -133,11 +135,16 @@ header{
                         text-transform: uppercase;
                         color: white;
                         font-size: 0.5rem;
+                        @media(max-width:1090px){
+                            font-size: 0.9rem;
+                        }
                         @media(max-width: 500px){
                             display: flex;
                             flex-direction: column;
                             align-items: flex-start;
+                            font-size: 0.6rem;
                         }
+                       
                     }
                     &:not(:last-of-type){
                         ::after{

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

@@ -68,6 +68,7 @@ $slick-opacity-not-active: 0.25 !default;
 .slick-next {
     position: absolute;
     display: block;
+    z-index: 99;
     height: 20px;
     width: 20px;
     line-height: 0px;

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

@@ -10,6 +10,9 @@
         background-repeat: no-repeat;
         background-size: contain;
         background-position-x: -20%;
+        @media(max-width:1090px){
+            cursor:grab;
+    }
 
     }
     .timeline {
@@ -17,11 +20,19 @@
         overflow: hidden;
         padding-top: 10rem;
         padding-bottom: 4rem;
+        @media(max-width:1090px){
+            padding-top: 18rem;
+            overflow: scroll;
+        }
         .__timeline-arrows{
             width: fit-content;
             margin: auto;
             position: relative;
             top: -115px;
+            @media(max-width:1090px){
+                top: -211px;
+                display: none;
+            }
             button{
                 background-color: transparent;
                 border: none; 
@@ -59,14 +70,15 @@
                     content: "";
                     position: absolute;
                     top: 50%;
-                    left: 101%;
+                    left: 100%;
                     bottom: 0;
-                    width: 12px;
+                    width: 17px;
-                    height: 12px;
+                    height: 17px;
                     transform: translateY(-50%);
                     border-radius: 50%;
                     background: black;
                 }
+
                 .paragraph--type--phase-deroulement{
                     position: absolute;
                     left: 65%;
@@ -81,6 +93,10 @@
                     flex-direction: row;
                     padding-bottom: 1rem;
                     padding-left: 2rem;
+                    padding-right: 2rem;
+                    @media(max-width:550px){
+                        padding-left: 0rem;
+                    }
                     .date{
                         width: fit-content;
                         display: flex;
@@ -92,12 +108,19 @@
                         .field_field_date_de_jour{
                             font-size: 2rem;
                             line-height: 0.3rem;
+                            @media(max-width:550px){
+                                font-size: 3rem;
+                                line-height: 1.3rem;
+                            }
                         }
                         .field_field_date_de_moi{
                             padding-right: 0.2rem;
                             text-transform: uppercase;
                             font-size: 3rem;
                             display: inline-flex;
+                            @media(max-width:550px){
+                                font-size: 4rem;
+                            }
                             &::after{
                                 content: '.';
                             }
@@ -108,6 +131,9 @@
                             font-size: 0.6rem;
                             position: relative;
                             top: -10px;
+                            @media(max-width:550px){
+                                font-size: 1.2rem;
+                            }
                             .field_field_date_de_annee{
                                 display: inline-flex;
                                 align-items: center;
@@ -149,16 +175,21 @@
                         border: solid $blue_QDD 1px;
                         border-radius: 5%;
                         padding: 0.6rem 0.6rem;
-                        
+                        // width: fit-content;
-                        width: fit-content;
                         min-width: 50%;
                         .field_field_titre{
                             font-size: 0.6rem;
+                            @media(max-width:700px){
+                                font-size: 1rem;
+                            }
                         }
                         .field_field_description{
                             p{
                                 font-size: 0.5rem !important;
                                 margin: 0;  
+                                @media(max-width:700px){
+                                    font-size: 1rem !important;
+                                }
                             }
                             .field--label-above{
                                 display: none;