From 2bd90ffdac7d046e02d7649ec293870ce56d465c Mon Sep 17 00:00:00 2001 From: ouidade Date: Fri, 12 Jul 2024 20:09:17 +0200 Subject: [PATCH] vm css --- .../quartiers_de_demain/dist/assets/bundle.js | 2 +- .../dist/assets/css/bundle.css | 41 ++++---- .../src/assets/js/header.js | 93 ------------------- .../src/assets/js/quartiers_de_demain.js | 6 ++ .../src/assets/scss/pages/home.scss | 29 +++--- .../scss/partials/animation-logo-header.scss | 3 + .../src/assets/scss/partials/timeline.scss | 13 ++- 7 files changed, 51 insertions(+), 136 deletions(-) delete mode 100644 web/themes/custom/quartiers_de_demain/src/assets/js/header.js diff --git a/web/themes/custom/quartiers_de_demain/dist/assets/bundle.js b/web/themes/custom/quartiers_de_demain/dist/assets/bundle.js index c968cd2..e7a25ee 100644 --- a/web/themes/custom/quartiers_de_demain/dist/assets/bundle.js +++ b/web/themes/custom/quartiers_de_demain/dist/assets/bundle.js @@ -36,7 +36,7 @@ eval("document.addEventListener('scroll', function() {\n const scrolled = win \**********************************************/ /***/ (() => { -eval("/**\n * @file\n * quartiers_de_demain behaviors.\n */\n (function (Drupal) {\n\n 'use strict';\n \n Drupal.behaviors.quartiers_de_demain = {\n attach: function (context, settings) {\n console.log('It works!');\n }\n };\n } (Drupal));\n\n \n // jQuery(document).ready(function($){\n\n // $('.open-block').click(function(){\n // $(this).toggleClass('opened');\n\n // $('.header_nav_container').toggleClass('display-nav-opened');\n \n // if(mobile == true){\n // $(\"body\").css(\"overflow\",\"hidden\");\n // }\n\n // });\n \n // // Hide the header_nav_container when a link inside it is clicked\n // $('.header_nav_container li').click(function() {\n // $('.header_nav_container').fadeOut();\n // });\n\n\n\n\n // });\n\n //////// start header ////////////\n document.addEventListener('DOMContentLoaded', function() {\n\n const header = document.querySelector('header');\n const logo = document.querySelector('#block-quartiers-de-demain-logoquartiersdedemain > div:nth-child(1) > div:nth-child(1) > a:nth-child(1) > svg:nth-child(1)');\n const headerNavContainer = document.querySelector('.header_nav_container');\n const isFirstLoad = !performance.getEntriesByType(\"navigation\")[0].type.includes('back_forward');\n const isTargetPath = window.location.pathname === '/';\n\n // Fonction pour démarrer l'animation du logo SVG\n function startLogoAnimation() {\n logo.classList.add('animated');\n }\n \n // Fonction pour arrêter l'animation du logo SVG\n function stopLogoAnimation() {\n logo.classList.remove('animated');\n }\n \n // Vérifier si le header a la classe header--collapse\n function checkHeaderCollapse() {\n if (header.classList.contains('header--collapsed')) {\n stopLogoAnimation();\n } else if (header.classList.contains('header--collapsed-already')) {\n stopLogoAnimation();\n } else {\n startLogoAnimation();\n }\n\n }\n \n // Appeler la fonction au chargement initial\n checkHeaderCollapse();\n \n // Observer les changements de classe sur le header\n const observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(mutation) {\n if (mutation.attributeName === 'class') {\n checkHeaderCollapse();\n }\n });\n });\n observer.observe(header, { attributes: true });\n \n\n // Si ce n'est pas la première charge ou si le chemin n'est pas le chemin cible, ajouter la classe immédiatement\n if (!isFirstLoad || !isTargetPath) {\n header.classList.add('header--collapsed-already');\n // logo.classList.remove('animated');\n stopLogoAnimation();\n } else {\n // Sinon, appliquer la transition après un délai\n setTimeout(() => {\n header.classList.add('header--collapsed');\n }, 5000);\n }\n\n ////////////// \n\n let lastScrollTop = 0;\n let threshold = 100; // Change this value as needed\n let isHidden = false;\n \n function slideOut() {\n headerNavContainer.animate([\n { transform: 'translateX(0)' },\n { transform: 'translateX(-100%)' }\n ], {\n duration: 300,\n fill: 'forwards'\n });\n isHidden = true;\n }\n \n function slideIn() {\n headerNavContainer.animate([\n { transform: 'translateX(-100%)' },\n { transform: 'translateX(0)' }\n ], {\n duration: 300,\n fill: 'forwards'\n });\n isHidden = false;\n }\n \n function slideDown() {\n // headerNavContainer.style.display = 'block';\n headerNavContainer.animate([\n { transform: 'translateY(0%)' },\n { transform: 'translateY(+100%)' }\n ], {\n duration: 300,\n fill: 'forwards'\n });\n isHidden = false;\n }\n \n function slideUp() {\n headerNavContainer.animate([\n { transform: 'translateY(100%)' },\n { transform: 'translateY(0%)' }\n ], {\n duration: 300,\n fill: 'forwards'\n }).onfinish = function() {\n // headerNavContainer.style.display = 'none';\n };\n isHidden = true;\n }\n // Fonction pour ajuster la hauteur du header lors du défilement\n function adjustHeaderHeight() {\n if (window.scrollY > 0) {\n header.classList.add('shrink');\n } else {\n header.classList.remove('shrink');\n }\n }\n\n function handleScroll() {\n let scrollTop = window.pageYOffset || document.documentElement.scrollTop;\n const isMobile = window.innerWidth < 811;\n\n if (scrollTop > threshold && !isHidden) {\n if (isMobile) {\n slideUp();\n } else {\n slideOut();\n }\n } else if (scrollTop <= threshold && isHidden) {\n if (isMobile) {\n slideDown();\n } else {\n slideIn();\n }\n }\n \n \n lastScrollTop = scrollTop <= 0 ? 0 : scrollTop; // For Mobile or negative scrolling\n }\n \n function handleTouchAndMouseEnter() {\n if (isHidden) {\n if (window.innerWidth < 811) {\n slideDown();\n } else {\n slideIn();\n }\n }\n }\n \n function handleTouchAndMouseLeave() {\n if (lastScrollTop > threshold && !isHidden) {\n if (window.innerWidth < 811) {\n slideUp();\n } else {\n slideOut();\n }\n }\n }\n \n window.addEventListener('scroll', handleScroll);\n window.addEventListener('scroll', adjustHeaderHeight);\n \n // Mouse events for desktop\n header.addEventListener('mouseenter', handleTouchAndMouseEnter);\n header.addEventListener('mouseleave', handleTouchAndMouseLeave);\n \n // Touch events for tablets and mobile devices\n header.addEventListener('touchstart', handleTouchAndMouseEnter);\n header.addEventListener('touchend', handleTouchAndMouseLeave);\n \n // Initial check to see if we're at the top of the page\n if (window.pageYOffset <= threshold) {\n if (window.innerWidth < 811) {\n slideDown();\n } else { \n slideIn();\n } \n } else {\n if (window.innerWidth < 811) {\n slideUp();\n } else {\n slideIn();\n }\n }\n \n });\n\n //////// end header ////////////\n \n\n\n//// ancre dans texte au click parragraphe correspondant arrive en dessous du header \n\n\n(function($, window) {\n var adjustAnchor = function() {\n var $anchor = $('.sidebar_first_container'),\n fixedElementHeight = 500;\n if ($anchor.length > 0) {\n $('html, body').stop().animate({scrollTop: $anchor.offset().top - fixedElementHeight }, 0);\n }\n };\n\n $(window).on('hashchange', function() {\n adjustAnchor();\n });\n\n\n //////////////////////// start script smooth apparition des textes /////////////////\n\n function scrollReaveal(){\n\n const nodes = {\n logo : document.querySelectorAll('#logo-animated-container'),\n chapeau : document.querySelectorAll('.field_body'),\n paragraph: document.querySelectorAll('.field_field_textes .paragraph--type--static-parts'),\n }\n\n const showUp = {\n origin: 'bottom',\n delay: 100,\n duration: 1000,\n distance: '50px',\n easing: 'cubic-bezier(0.5, 0, 0, 1)'\n }\n\n const Show = {\n delay: 100,\n duration: 600,\n easing: 'cubic-bezier(0.5, 0, 0, 1)'\n }\n\n console.log(nodes);\n\n ScrollReveal().reveal(nodes.logo, Show);\n ScrollReveal().reveal(nodes.chapeau, showUp);\n ScrollReveal().reveal(nodes.paragraph, showUp);\n }\n\n\n $( document ).ready(function() {\n scrollReaveal();\n });\n\n //////////////////////// end script smooth apparition des textes /////////////////\n\n //////////////////// start Timeline script ///////////////////////\n\n\n document.addEventListener('DOMContentLoaded', function() {\n let currentSlide = 0;\n\n //// responsive ///\n function getVisibleSlides() {\n if (window.innerWidth <= 600) {\n return 1; // Show 1 slide on small screens\n } else if (window.innerWidth <= 900) {\n return 2; // Show 2 slides on medium screens\n } else {\n return 3; // Show 3 slides on large screens\n }\n }\n\n function showSlides(index) {\n const slides = document.querySelectorAll('.paragraph--type--phase-deroulement');\n const totalSlides = slides.length;\n const visibleSlides = getVisibleSlides();\n const maxSlide = totalSlides - visibleSlides + 1;\n\n // Adjust the index to ensure it stays within bounds\n currentSlide = Math.max(0.6, Math.min(index, maxSlide));\n\n // Calculate the offset for the transform\n const offset = currentSlide * -70 / visibleSlides;\n document.querySelector('.__timeline-content').style.transform = `translateX(${offset}%)`;\n\n // Enable/disable arrows based on the current slide\n document.getElementById('arrowPrev').disabled = currentSlide === 0;\n document.getElementById('arrowNext').disabled = currentSlide === maxSlide;\n }\n\n function prevSlide() {\n showSlides(currentSlide - 1);\n }\n\n function nextSlide() {\n showSlides(currentSlide + 1);\n }\n\n // Attach event listeners\n document.getElementById('arrowPrev').addEventListener('click', prevSlide);\n document.getElementById('arrowNext').addEventListener('click', nextSlide);\n\n // Update month field to only show the first 3 letters\n document.querySelectorAll('.paragraph--type--phase-deroulement').forEach(function(paragraph) {\n const monthField = paragraph.querySelector('.field_field_date_de_moi div:nth-of-type(2)');\n if (monthField) {\n const monthText = monthField.textContent.trim();\n if (monthText.length >= 3) {\n monthField.textContent = monthText.slice(0, 3);\n }\n }\n });\n\n // for each .date element add or remove ::before \n document.querySelectorAll('.date').forEach(function(dateElement) {\n const date2Element = dateElement.querySelector('.date2');\n const yearElement = dateElement.querySelector('.field_field_date_de_annee');\n\n // Check if the .date2 element is empty\n if (date2Element && !date2Element.textContent.trim()) {\n // Add the .only class to the year element\n yearElement.classList.add('only');\n }\n });\n\n // Handle window resize\n window.addEventListener('resize', function() {\n showSlides(currentSlide); // Recalculate the slides on resize\n });\n // });\n\n\n // Initialize\n showSlides(currentSlide);\n });\n\n\n //////////////////////// end Timeline script /////////////////////////////////////////////\n\n /////////////////// caracteres body actus/////////////////////////\n\n document.addEventListener('DOMContentLoaded', function() {\n // Maximum number of characters to display\n const maxChars = 140; // Adjust this value as needed\n \n document.querySelectorAll('#actus-caroussel .node-type-actualite .field_body p').forEach(function(paragraph) {\n let text = paragraph.textContent.trim();\n if (text.length > maxChars) {\n let truncatedText = text.slice(0, maxChars) + '...';\n paragraph.textContent = truncatedText;\n }\n });\n });\n \n\n //////////// slideshow home ////////////////////////// \n\n $(document).ready(function(){\n $('.content-actus .view').slick({\n slidesToShow: 3,\n // slidesToScroll: 1,\n dots: false,\n arrows: true,\n centerMode: true,\n adaptiveHeight: true,\n // centerPadding: '100px',\n responsive: [\n {\n breakpoint: 810,\n settings: {\n slidesToShow: 1,\n adaptiveHeight: false,\n arrows: true,\n draggable: true,\n centerMode: true,\n }\n }]\n });\n console.log('salut slick home');\n\n });\n\n})(jQuery, window);\n\n\n\n\n//# sourceURL=webpack://quartiers_de_demain/./src/assets/js/quartiers_de_demain.js?"); +eval("/**\n * @file\n * quartiers_de_demain behaviors.\n */\n (function (Drupal) {\n\n 'use strict';\n \n Drupal.behaviors.quartiers_de_demain = {\n attach: function (context, settings) {\n console.log('It works!');\n }\n };\n } (Drupal));\n\n \n // jQuery(document).ready(function($){\n\n // $('.open-block').click(function(){\n // $(this).toggleClass('opened');\n\n // $('.header_nav_container').toggleClass('display-nav-opened');\n \n // if(mobile == true){\n // $(\"body\").css(\"overflow\",\"hidden\");\n // }\n\n // });\n \n // // Hide the header_nav_container when a link inside it is clicked\n // $('.header_nav_container li').click(function() {\n // $('.header_nav_container').fadeOut();\n // });\n\n\n\n\n // });\n\n //////// start header ////////////\n document.addEventListener('DOMContentLoaded', function() {\n\n const header = document.querySelector('header');\n const logo = document.querySelector('#block-quartiers-de-demain-logoquartiersdedemain > div:nth-child(1) > div:nth-child(1) > a:nth-child(1) > svg:nth-child(1)');\n const headerNavContainer = document.querySelector('.header_nav_container');\n const isFirstLoad = !performance.getEntriesByType(\"navigation\")[0].type.includes('back_forward');\n const isTargetPath = window.location.pathname === '/';\n\n // Fonction pour démarrer l'animation du logo SVG\n function startLogoAnimation() {\n logo.classList.add('animated');\n }\n \n // Fonction pour arrêter l'animation du logo SVG\n function stopLogoAnimation() {\n logo.classList.remove('animated');\n }\n \n // Vérifier si le header a la classe header--collapse\n function checkHeaderCollapse() {\n if (header.classList.contains('header--collapsed')) {\n stopLogoAnimation();\n } else if (header.classList.contains('header--collapsed-already')) {\n stopLogoAnimation();\n } else {\n startLogoAnimation();\n }\n\n }\n \n // Appeler la fonction au chargement initial\n checkHeaderCollapse();\n \n // Observer les changements de classe sur le header\n const observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(mutation) {\n if (mutation.attributeName === 'class') {\n checkHeaderCollapse();\n }\n });\n });\n observer.observe(header, { attributes: true });\n \n\n // Si ce n'est pas la première charge ou si le chemin n'est pas le chemin cible, ajouter la classe immédiatement\n if (!isFirstLoad || !isTargetPath) {\n header.classList.add('header--collapsed-already');\n // logo.classList.remove('animated');\n stopLogoAnimation();\n } else {\n // Sinon, appliquer la transition après un délai\n setTimeout(() => {\n header.classList.add('header--collapsed');\n }, 5000);\n }\n\n ////////////// \n\n let lastScrollTop = 0;\n let threshold = 100; // Change this value as needed\n let isHidden = false;\n \n function slideOut() {\n headerNavContainer.animate([\n { transform: 'translateX(0)' },\n { transform: 'translateX(-100%)' }\n ], {\n duration: 300,\n fill: 'forwards'\n });\n isHidden = true;\n }\n \n function slideIn() {\n headerNavContainer.animate([\n { transform: 'translateX(-100%)' },\n { transform: 'translateX(0)' }\n ], {\n duration: 300,\n fill: 'forwards'\n });\n isHidden = false;\n }\n \n function slideDown() {\n // headerNavContainer.style.display = 'block';\n headerNavContainer.animate([\n { transform: 'translateY(0%)' },\n { transform: 'translateY(+100%)' }\n ], {\n duration: 300,\n fill: 'forwards'\n });\n isHidden = false;\n }\n \n function slideUp() {\n headerNavContainer.animate([\n { transform: 'translateY(100%)' },\n { transform: 'translateY(0%)' }\n ], {\n duration: 300,\n fill: 'forwards'\n }).onfinish = function() {\n // headerNavContainer.style.display = 'none';\n };\n isHidden = true;\n }\n // Fonction pour ajuster la hauteur du header lors du défilement\n function adjustHeaderHeight() {\n if (window.scrollY > 0) {\n header.classList.add('shrink');\n } else {\n header.classList.remove('shrink');\n }\n }\n\n function handleScroll() {\n let scrollTop = window.pageYOffset || document.documentElement.scrollTop;\n const isMobile = window.innerWidth < 811;\n\n if (scrollTop > threshold && !isHidden) {\n if (isMobile) {\n slideUp();\n } else {\n slideOut();\n }\n } else if (scrollTop <= threshold && isHidden) {\n if (isMobile) {\n slideDown();\n } else {\n slideIn();\n }\n }\n \n \n lastScrollTop = scrollTop <= 0 ? 0 : scrollTop; // For Mobile or negative scrolling\n }\n \n function handleTouchAndMouseEnter() {\n if (isHidden) {\n if (window.innerWidth < 811) {\n slideDown();\n } else {\n slideIn();\n }\n }\n }\n \n function handleTouchAndMouseLeave() {\n if (lastScrollTop > threshold && !isHidden) {\n if (window.innerWidth < 811) {\n slideUp();\n } else {\n slideOut();\n }\n }\n }\n \n window.addEventListener('scroll', handleScroll);\n window.addEventListener('scroll', adjustHeaderHeight);\n \n // Mouse events for desktop\n header.addEventListener('mouseenter', handleTouchAndMouseEnter);\n header.addEventListener('mouseleave', handleTouchAndMouseLeave);\n \n // Touch events for tablets and mobile devices\n header.addEventListener('touchstart', handleTouchAndMouseEnter);\n header.addEventListener('touchend', handleTouchAndMouseLeave);\n \n // Initial check to see if we're at the top of the page\n if (window.pageYOffset <= threshold) {\n if (window.innerWidth < 811) {\n slideDown();\n } else { \n slideIn();\n } \n } else {\n if (window.innerWidth < 811) {\n slideUp();\n } else {\n slideIn();\n }\n }\n \n });\n\n //////// end header ////////////\n \n\n\n//// ancre dans texte au click parragraphe correspondant arrive en dessous du header \n\n\n(function($, window) {\n var adjustAnchor = function() {\n var $anchor = $('.sidebar_first_container'),\n fixedElementHeight = 500;\n if ($anchor.length > 0) {\n $('html, body').stop().animate({scrollTop: $anchor.offset().top - fixedElementHeight }, 0);\n }\n };\n\n $(window).on('hashchange', function() {\n adjustAnchor();\n });\n\n\n //////////////////////// start script smooth apparition des textes /////////////////\n\n function scrollReaveal(){\n\n const nodes = {\n logo : document.querySelectorAll('#logo-animated-container'),\n chapeau : document.querySelectorAll('.field_body'),\n paragraph: document.querySelectorAll('.field_field_textes .paragraph--type--static-parts'),\n }\n\n const showUp = {\n origin: 'bottom',\n delay: 100,\n duration: 1000,\n distance: '50px',\n easing: 'cubic-bezier(0.5, 0, 0, 1)'\n }\n\n const Show = {\n delay: 100,\n duration: 600,\n easing: 'cubic-bezier(0.5, 0, 0, 1)'\n }\n\n console.log(nodes);\n\n ScrollReveal().reveal(nodes.logo, Show);\n ScrollReveal().reveal(nodes.chapeau, showUp);\n ScrollReveal().reveal(nodes.paragraph, showUp);\n }\n\n\n $( document ).ready(function() {\n scrollReaveal();\n });\n\n //////////////////////// end script smooth apparition des textes /////////////////\n\n //////////////////// start Timeline script ///////////////////////\n\n\n document.addEventListener('DOMContentLoaded', function() {\n let currentSlide = 0;\n\n //// responsive ///\n function getVisibleSlides() {\n if (window.innerWidth <= 600) {\n return 1; // Show 1 slide on small screens\n } else if (window.innerWidth <= 900) {\n return 2; // Show 2 slides on medium screens\n } else {\n return 3; // Show 3 slides on large screens\n }\n }\n\n function showSlides(index) {\n const slides = document.querySelectorAll('.paragraph--type--phase-deroulement');\n const totalSlides = slides.length;\n const visibleSlides = getVisibleSlides();\n const maxSlide = totalSlides - visibleSlides + 1;\n\n // Adjust the index to ensure it stays within bounds\n currentSlide = Math.max(0.6, Math.min(index, maxSlide));\n\n // Calculate the offset for the transform\n const offset = currentSlide * -70 / visibleSlides;\n const offsetmobile = currentSlide * -130 / visibleSlides;\n if (window.innerWidth <= 600){\n document.querySelector('.__timeline-content').style.transform = `translateX(${offsetmobile}%)`;\n } else {\n document.querySelector('.__timeline-content').style.transform = `translateX(${offset}%)`;\n }\n \n\n // Enable/disable arrows based on the current slide\n document.getElementById('arrowPrev').disabled = currentSlide === 0;\n document.getElementById('arrowNext').disabled = currentSlide === maxSlide;\n }\n\n function prevSlide() {\n showSlides(currentSlide - 1);\n }\n\n function nextSlide() {\n showSlides(currentSlide + 1);\n }\n\n // Attach event listeners\n document.getElementById('arrowPrev').addEventListener('click', prevSlide);\n document.getElementById('arrowNext').addEventListener('click', nextSlide);\n\n // Update month field to only show the first 3 letters\n document.querySelectorAll('.paragraph--type--phase-deroulement').forEach(function(paragraph) {\n const monthField = paragraph.querySelector('.field_field_date_de_moi div:nth-of-type(2)');\n if (monthField) {\n const monthText = monthField.textContent.trim();\n if (monthText.length >= 3) {\n monthField.textContent = monthText.slice(0, 3);\n }\n }\n });\n\n // for each .date element add or remove ::before \n document.querySelectorAll('.date').forEach(function(dateElement) {\n const date2Element = dateElement.querySelector('.date2');\n const yearElement = dateElement.querySelector('.field_field_date_de_annee');\n\n // Check if the .date2 element is empty\n if (date2Element && !date2Element.textContent.trim()) {\n // Add the .only class to the year element\n yearElement.classList.add('only');\n }\n });\n\n // Handle window resize\n window.addEventListener('resize', function() {\n showSlides(currentSlide); // Recalculate the slides on resize\n });\n // });\n\n\n // Initialize\n showSlides(currentSlide);\n });\n\n\n //////////////////////// end Timeline script /////////////////////////////////////////////\n\n /////////////////// caracteres body actus/////////////////////////\n\n document.addEventListener('DOMContentLoaded', function() {\n // Maximum number of characters to display\n const maxChars = 140; // Adjust this value as needed\n \n document.querySelectorAll('#actus-caroussel .node-type-actualite .field_body p').forEach(function(paragraph) {\n let text = paragraph.textContent.trim();\n if (text.length > maxChars) {\n let truncatedText = text.slice(0, maxChars) + '...';\n paragraph.textContent = truncatedText;\n }\n });\n });\n \n\n //////////// slideshow home ////////////////////////// \n\n $(document).ready(function(){\n $('.content-actus .view').slick({\n slidesToShow: 3,\n // slidesToScroll: 1,\n dots: false,\n arrows: true,\n centerMode: true,\n adaptiveHeight: true,\n // centerPadding: '100px',\n responsive: [\n {\n breakpoint: 810,\n settings: {\n slidesToShow: 1,\n adaptiveHeight: false,\n arrows: true,\n draggable: true,\n centerMode: true,\n }\n }]\n });\n console.log('salut slick home');\n\n });\n\n})(jQuery, window);\n\n\n\n\n//# sourceURL=webpack://quartiers_de_demain/./src/assets/js/quartiers_de_demain.js?"); /***/ }) diff --git a/web/themes/custom/quartiers_de_demain/dist/assets/css/bundle.css b/web/themes/custom/quartiers_de_demain/dist/assets/css/bundle.css index 48a6e64..f520611 100644 --- a/web/themes/custom/quartiers_de_demain/dist/assets/css/bundle.css +++ b/web/themes/custom/quartiers_de_demain/dist/assets/css/bundle.css @@ -1067,7 +1067,7 @@ footer { } @media (max-width: 1090px) { #home .timeline { - padding-top: 18rem; + padding-top: 14rem; overflow: scroll; } } @@ -1081,7 +1081,6 @@ footer { @media (max-width: 1090px) { #home .timeline .__timeline-arrows { top: -211px; - display: none; } } #home .timeline .__timeline-arrows button { @@ -1091,6 +1090,11 @@ footer { #home .timeline .__timeline-arrows button:hover { opacity: 0.5; } +@media (max-width: 1090px) { + #home .timeline .__timeline-arrows button svg { + padding: 0.5rem; + } +} #home .timeline .__timeline-content { width: 100vw; padding-top: 7rem; @@ -1141,6 +1145,7 @@ footer { @media (max-width: 550px) { #home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement { padding-left: 0rem; + width: 240px; } } #home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .date { @@ -1385,6 +1390,11 @@ footer { header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-header.animated { transform: scale(2); } +@media (max-width: 820px) { + header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-header.animated { + transform: scale(1); + } +} header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-header.animated .blink-blue { animation-delay: 0.2s; animation-name: blink; @@ -2008,7 +2018,7 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h } @media (max-width: 700px) { #home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto svg:nth-of-type(1) { - width: 260px; + width: 230px; top: 50px; position: relative; } @@ -2025,8 +2035,9 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h #home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto svg:nth-of-type(2) { grid-row: 4; grid-column: 1/span 2; - width: 260px; + width: 230px; padding-left: 1rem; + top: -10px; } } #home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto svg:nth-of-type(3) { @@ -2041,7 +2052,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 svg:nth-of-type(3) { grid-row: 8; grid-column: 1/span 2; - width: 260px; + width: 230px; top: -50px; left: 0rem; padding-left: 1rem; @@ -2084,30 +2095,22 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h #home article.node-type-static #paragraph-id--7 .colone-picto svg #pillier-1-path365 { stroke-dasharray: 1000; /* Longueur totale du chemin */ stroke-dashoffset: 1000; /* Décalage initial pour cacher le chemin */ - animation: fillAnimation2 10s ease forwards; /* Animation de remplissage sur 2 secondes */ - animation-delay: 5s; + animation: fillAnimation 10s ease forwards; /* Animation de remplissage sur 2 secondes */ + animation-delay: 3s; } #home article.node-type-static #paragraph-id--7 .colone-picto svg #pillier-2-path367 { stroke-dasharray: 0; /* Longueur totale du chemin */ stroke-dashoffset: 1000; /* Décalage initial pour cacher le chemin */ - animation: fillAnimation2 10s ease forwards; /* Animation de remplissage sur 2 secondes */ - animation-delay: 8s; + animation: fillAnimation 10s ease forwards; /* Animation de remplissage sur 2 secondes */ + animation-delay: 7s; } #home article.node-type-static #paragraph-id--7 .colone-picto svg #pillier-3-path369 { stroke-dasharray: 0; /* Longueur totale du chemin */ stroke-dashoffset: 1000; /* Décalage initial pour cacher le chemin */ - animation: fillAnimation2 10s ease forwards; /* Animation de remplissage sur 2 secondes */ + animation: fillAnimation 10s ease forwards; /* Animation de remplissage sur 2 secondes */ animation-delay: 10s; } -@keyframes fillAnimation1 { - from { - stroke-dashoffset: 0; /* Début du chemin de décalage complet */ - } - to { - stroke-dashoffset: 1000; /* Aucun décalage, le chemin est complètement visible */ - } -} -@keyframes fillAnimation2 { +@keyframes fillAnimation { from { stroke-dashoffset: 1000; /* Début du chemin de décalage complet */ } diff --git a/web/themes/custom/quartiers_de_demain/src/assets/js/header.js b/web/themes/custom/quartiers_de_demain/src/assets/js/header.js deleted file mode 100644 index a2d908b..0000000 --- a/web/themes/custom/quartiers_de_demain/src/assets/js/header.js +++ /dev/null @@ -1,93 +0,0 @@ - //////// 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(); - } - }); - - diff --git a/web/themes/custom/quartiers_de_demain/src/assets/js/quartiers_de_demain.js b/web/themes/custom/quartiers_de_demain/src/assets/js/quartiers_de_demain.js index 9448c99..930a0e5 100644 --- a/web/themes/custom/quartiers_de_demain/src/assets/js/quartiers_de_demain.js +++ b/web/themes/custom/quartiers_de_demain/src/assets/js/quartiers_de_demain.js @@ -312,7 +312,13 @@ // Calculate the offset for the transform const offset = currentSlide * -70 / visibleSlides; + const offsetmobile = currentSlide * -130 / visibleSlides; + if (window.innerWidth <= 600){ + document.querySelector('.__timeline-content').style.transform = `translateX(${offsetmobile}%)`; + } else { document.querySelector('.__timeline-content').style.transform = `translateX(${offset}%)`; + } + // Enable/disable arrows based on the current slide document.getElementById('arrowPrev').disabled = currentSlide === 0; diff --git a/web/themes/custom/quartiers_de_demain/src/assets/scss/pages/home.scss b/web/themes/custom/quartiers_de_demain/src/assets/scss/pages/home.scss index c240a95..6cfc889 100644 --- a/web/themes/custom/quartiers_de_demain/src/assets/scss/pages/home.scss +++ b/web/themes/custom/quartiers_de_demain/src/assets/scss/pages/home.scss @@ -502,7 +502,7 @@ grid-column: 1 /span 2; padding: 1rem; @media(max-width: 700px){ - width: 260px; + width: 230px; top: 50px; position: relative; } @@ -518,8 +518,9 @@ @media(max-width: 700px){ grid-row: 4; grid-column: 1 /span 2 ; - width: 260px; + width: 230px; padding-left: 1rem; + top: -10px; } @@ -535,7 +536,7 @@ @media(max-width: 700px){ grid-row: 8 ; grid-column: 1 /span 2; - width: 260px; + width: 230px; top: -50px; left: 0rem; padding-left: 1rem; @@ -578,33 +579,25 @@ #paragraph-id--7 .colone-picto svg #pillier-1-path365{ stroke-dasharray: 1000; /* Longueur totale du chemin */ stroke-dashoffset: 1000; /* Décalage initial pour cacher le chemin */ - animation: fillAnimation2 10s ease forwards; /* Animation de remplissage sur 2 secondes */ - animation-delay: 5s; + animation: fillAnimation 10s ease forwards; /* Animation de remplissage sur 2 secondes */ + animation-delay: 3s; } #paragraph-id--7 .colone-picto svg #pillier-2-path367{ stroke-dasharray: 0; /* Longueur totale du chemin */ stroke-dashoffset: 1000; /* Décalage initial pour cacher le chemin */ - animation: fillAnimation2 10s ease forwards; /* Animation de remplissage sur 2 secondes */ - animation-delay: 8s; + animation: fillAnimation 10s ease forwards; /* Animation de remplissage sur 2 secondes */ + animation-delay: 7s; } #paragraph-id--7 .colone-picto svg #pillier-3-path369{ stroke-dasharray: 0; /* Longueur totale du chemin */ stroke-dashoffset: 1000; /* Décalage initial pour cacher le chemin */ - animation: fillAnimation2 10s ease forwards; /* Animation de remplissage sur 2 secondes */ + animation: fillAnimation 10s ease forwards; /* Animation de remplissage sur 2 secondes */ animation-delay: 10s; } - - @keyframes fillAnimation1 { - from { - stroke-dashoffset: 0; /* Début du chemin de décalage complet */ - } - to { - stroke-dashoffset: 1000; /* Aucun décalage, le chemin est complètement visible */ - } - } - @keyframes fillAnimation2 { + + @keyframes fillAnimation { from { stroke-dashoffset: 1000; /* Début du chemin de décalage complet */ } diff --git a/web/themes/custom/quartiers_de_demain/src/assets/scss/partials/animation-logo-header.scss b/web/themes/custom/quartiers_de_demain/src/assets/scss/partials/animation-logo-header.scss index a9d3653..cfa3d04 100644 --- a/web/themes/custom/quartiers_de_demain/src/assets/scss/partials/animation-logo-header.scss +++ b/web/themes/custom/quartiers_de_demain/src/assets/scss/partials/animation-logo-header.scss @@ -5,6 +5,9 @@ header{ &.animated{ transform: scale(2); + @media(max-width:820px) { + transform: scale(1); + } .blink-blue { // animation: blink 3s 3; animation-delay: 0.2s; diff --git a/web/themes/custom/quartiers_de_demain/src/assets/scss/partials/timeline.scss b/web/themes/custom/quartiers_de_demain/src/assets/scss/partials/timeline.scss index 0813ba1..18eb629 100644 --- a/web/themes/custom/quartiers_de_demain/src/assets/scss/partials/timeline.scss +++ b/web/themes/custom/quartiers_de_demain/src/assets/scss/partials/timeline.scss @@ -29,7 +29,7 @@ padding-top: 5rem; padding-bottom: 8rem; @media(max-width:1090px){ - padding-top: 18rem; + padding-top: 14rem; overflow: scroll; } .__timeline-arrows{ @@ -40,7 +40,7 @@ padding-bottom: 2rem; @media(max-width:1090px){ top: -211px; - display: none; + // display: none; } button{ background-color: transparent; @@ -48,10 +48,12 @@ &:hover{ opacity: 0.5; } - // svg{ - // padding: 0.5rem; + @media(max-width:1090px){ + svg{ + padding: 0.5rem; - // } + } + } } } .__timeline-content{ @@ -105,6 +107,7 @@ padding-right: 2rem; @media(max-width:550px){ padding-left: 0rem; + width:240px; } .date{ width: fit-content;