new design timelien

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

@@ -14,7 +14,7 @@
   } (Drupal));
 
   
-  jQuery(document).ready(function($){
+  // jQuery(document).ready(function($){
 
   //   $('.open-block').click(function(){
   //     $(this).toggleClass('opened');
@@ -35,7 +35,7 @@
 
 
 
-  });
+  // });
 
   //////// header ////////////
 
@@ -94,6 +94,12 @@
         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) {
+    slideIn();
+  } else {
+    slideOut();
+  }
 
   });
   
@@ -117,7 +123,7 @@
   });
 
 
-//////////////////////////////////////////// smooth apparition des textes
+//////////////////////// smooth apparition des textes
 
 
 function scrollReaveal(){
@@ -196,19 +202,11 @@ document.addEventListener('DOMContentLoaded', function() {
   // Check and replace empty day fields
   document.querySelectorAll('.paragraph--type--phase-deroulement').forEach(function(paragraph) {
     const dateElement = paragraph.querySelector('.date');
-    const dayField = paragraph.querySelector('.field_field_date_de_jour');
     const monthField = paragraph.querySelector('.field_field_date_de_moi div:nth-of-type(2)');
-
-    if (dayField && dayField.textContent.trim()) {
-      dateElement.classList.add('jour');
-    } else {
-      dateElement.classList.add('mois');
-      const monthText = monthField.textContent.trim();
-      // console.log(monthText)
-      if (monthText.length >= 3) {
-      monthField.textContent = monthText.slice(0, 3);
-      console.log(monthField)
-      }
+    const monthText = monthField.textContent.trim();
+    if (monthText.length >= 3) {
+    monthField.textContent = monthText.slice(0, 3);
+    console.log(monthField)
     }
   });
 
@@ -216,6 +214,19 @@ document.addEventListener('DOMContentLoaded', function() {
   showSlides(currentSlide);
 });
 
+document.addEventListener('DOMContentLoaded', function() {
+  // Iterate over each .date element
+  document.querySelectorAll('.date').forEach(function(dateElement) {
+    const date2Element = dateElement.querySelector('.date2');
+    const yearElement = dateElement.querySelector('.field_field_date_de_annee');
+
+    // Check if the .date2 element is empty
+    if (date2Element && !date2Element.textContent.trim()) {
+      // Add the .only class to the year element
+      yearElement.classList.add('only');
+    }
+  });
+});
 
 
 

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

@@ -56,6 +56,7 @@
                             flex: 1 15%;
                             color: $blue_QDD;
                             padding: 0.5rem;
+                            margin-top: 0;
                             &::before{
                                 content:"";
                                 display: block;

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

@@ -80,41 +80,67 @@
                     display: flex;
                     flex-direction: row;
                     padding-bottom: 1rem;
+                    padding-left: 2rem;
                     .date{
-                        
                         width: fit-content;
                         display: flex;
                         flex-direction: column;
                         margin: auto;
-                        align-items: center;
+                        align-items: flex-start;
                         padding-right: 1rem;
-
-                        &.jour{
-                            .moi-annee{
+                        margin-bottom: 2rem;
+                        .field_field_date_de_jour{
+                            font-size: 2rem;
+                            line-height: 0.3rem;
+                        }
+                        .field_field_date_de_moi{
+                            padding-right: 0.2rem;
+                            text-transform: uppercase;
+                            font-size: 3rem;
+                            display: inline-flex;
+                            &::after{
+                                content: '.';
+                            }
+                        }
+                        .annee{
+                            display: flex;
+                            align-items: center;
+                            font-size: 0.6rem;
+                            position: relative;
+                            top: -10px;
+                            .field_field_date_de_annee{
                                 display: inline-flex;
-                                font-size: 0.6rem;
-                                .field_field_date_de_moi{
-                                    padding-right: 0.2rem;
-                                    text-transform: uppercase;
-                                }
-                            }
-                            .field_field_date_de_jour{
-                                font-size: 5rem;
-                            }
-                        }
-                        &.mois{
-                            .moi-annee{
-                                display: flex;
-                                font-size: 0.6rem;
-                                flex-direction: column;
                                 align-items: center;
-                                .field_field_date_de_moi{
+                                &::after{
+                                    content: url('../img/noun-arrow-to-right-black.svg');
+                                    display: flex;
+                                }
+                                
+                            }
+                            .field_field_date_de_annee.only{
+                                display: inline-flex;
+                                align-items: center;
+                                &::after{
+                                    content: '';
+                                    display: flex;
+                                }
+                                
+                            }
+                            .date2{
+                                display: inline-flex;
+                                
+                                .field_field_date_a_jour{
                                     padding-right: 0.2rem;
-                                    text-transform: uppercase;
-                                    font-size: 4rem;
+                                }
+                                .field_field_date_a_moi{
+                                    padding-right: 0.2rem;
+
                                 }
                             }
+
                         }
+                            
+    
 
 
                     }
@@ -132,7 +158,7 @@
                         .field_field_description{
                             p{
                                 font-size: 0.5rem !important;
-                                margin: 0;
+                                margin: 0;  
                             }
                             .field--label-above{
                                 display: none;