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 419e1c4..15f17a8 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("\nfunction setLogoContainerSize() {\n let svgContainer = document.query \**********************************************/ /***/ (() => { -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 //////// header ////////////\n\n\n document.addEventListener('DOMContentLoaded', function() {\n const headerNavContainer = document.querySelector('.header_nav_container');\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 handleScroll() {\n let scrollTop = window.pageYOffset || document.documentElement.scrollTop;\n \n if (scrollTop > threshold && !isHidden) {\n slideOut();\n } else if (scrollTop <= threshold && isHidden) {\n slideIn();\n }\n \n lastScrollTop = scrollTop <= 0 ? 0 : scrollTop; // For Mobile or negative scrolling\n }\n \n window.addEventListener('scroll', function() {\n handleScroll();\n });\n\n const headerLeftContainer = document.querySelector('header');\n headerLeftContainer.addEventListener('mouseenter', function() {\n slideIn(); // Slide out on mouse enter\n });\n \n headerLeftContainer.addEventListener('mouseleave', function() {\n if (lastScrollTop <= threshold) {\n slideOut(); // Slide in on mouse leave if not scrolled down\n }\n });\n // Initial check to see if we're at the top of the page\n if (window.pageYOffset <= threshold) {\n slideIn();\n } else {\n slideOut();\n }\n\n });\n \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//////////////////////// smooth apparition des textes\n\n\nfunction 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\n\n////////////////// Timeline ///////////////////////\n\ndocument.addEventListener('DOMContentLoaded', function() {\n let currentSlide = 0;\n\n function showSlides(index) {\n const slides = document.querySelectorAll('.paragraph--type--phase-deroulement');\n const totalSlides = slides.length;\n const visibleSlides = 3; // Number of slides to show at a time\n const maxSlide = totalSlides - visibleSlides;\n\n // Adjust the index to ensure it stays within bounds\n currentSlide = Math.max(0, Math.min(index, maxSlide));\n\n // Calculate the offset for the transform\n const offset = currentSlide * -100 / 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\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 \n // Check and replace empty day fields\n document.querySelectorAll('.paragraph--type--phase-deroulement').forEach(function(paragraph) {\n const dateElement = paragraph.querySelector('.date');\n const monthField = paragraph.querySelector('.field_field_date_de_moi div:nth-of-type(2)');\n const monthText = monthField.textContent.trim();\n if (monthText.length >= 3) {\n monthField.textContent = monthText.slice(0, 3);\n console.log(monthField)\n }\n });\n\n // Initialize\n showSlides(currentSlide);\n});\n\ndocument.addEventListener('DOMContentLoaded', function() {\n // Iterate over each .date element\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\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: true,\n arrows: false,\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 //////// header ////////////\n\n document.addEventListener('DOMContentLoaded', function() {\n const headerNavContainer = document.querySelector('.header_nav_container');\n const headerLeftContainer = document.querySelector('header');\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 handleScroll() {\n let scrollTop = window.pageYOffset || document.documentElement.scrollTop;\n \n if (scrollTop > threshold && !isHidden) {\n slideOut();\n } else if (scrollTop <= threshold && isHidden) {\n slideIn();\n }\n \n lastScrollTop = scrollTop <= 0 ? 0 : scrollTop; // For Mobile or negative scrolling\n }\n \n function handleTouchAndMouseEnter() {\n if (isHidden) {\n slideIn();\n }\n }\n \n function handleTouchAndMouseLeave() {\n if (lastScrollTop > threshold && !isHidden) {\n slideOut();\n }\n }\n \n window.addEventListener('scroll', handleScroll);\n \n // Mouse events for desktop\n headerLeftContainer.addEventListener('mouseenter', handleTouchAndMouseEnter);\n headerLeftContainer.addEventListener('mouseleave', handleTouchAndMouseLeave);\n \n // Touch events for tablets and mobile devices\n headerLeftContainer.addEventListener('touchstart', handleTouchAndMouseEnter);\n headerLeftContainer.addEventListener('touchend', handleTouchAndMouseLeave);\n \n // Initial check to see if we're at the top of the page\n if (window.pageYOffset <= threshold) {\n slideIn();\n } else {\n slideOut();\n }\n });\n \n \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//////////////////////// smooth apparition des textes\n\n\nfunction 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\n\n////////////////// Timeline ///////////////////////\n\n\ndocument.addEventListener('DOMContentLoaded', function() {\n let currentSlide = 0;\n\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;\n\n // Adjust the index to ensure it stays within bounds\n currentSlide = Math.max(1, 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 // Initialize the first view of the slides\n showSlides(currentSlide);\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 // 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\ndocument.addEventListener('DOMContentLoaded', function() {\n // Iterate over each .date element\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\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: true,\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 9804224..16c1f29 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 @@ -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; - height: 12px; + width: 17px; + 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-column: 1; + grid-row: 4; + 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; } } 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 ee7f32f..bb2366e 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 @@ -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() { - handleScroll(); - }); - - 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 + function handleTouchAndMouseEnter() { + if (isHidden) { + slideIn(); } - }); - // Initial check to see if we're at the top of the page - if (window.pageYOffset <= threshold) { - slideIn(); - } else { - slideOut(); - } - + } + + 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(); + } }); + // ///////////////// //// 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) { - const slides = document.querySelectorAll('.paragraph--type--phase-deroulement'); - const totalSlides = slides.length; - const visibleSlides = 3; // Number of slides to show at a time - const maxSlide = totalSlides - visibleSlides; - - // Adjust the index to ensure it stays within bounds - 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 getVisibleSlides() { + if (window.innerWidth <= 600) { + return 1; // Show 1 slide on small screens + } else if (window.innerWidth <= 900) { + return 2; // Show 2 slides on medium screens + } else { + return 3; // Show 3 slides on large screens + } } + 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); - - // Check and replace empty day fields + // Initialize the first view of the slides + 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 (monthText.length >= 3) { - monthField.textContent = monthText.slice(0, 3); - console.log(monthField) + if (monthField) { + const monthText = monthField.textContent.trim(); + if (monthText.length >= 3) { + 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, } 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 809067c..89828b1 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 @@ -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-column: 1 ; + grid-row: 4; + 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; } } diff --git a/web/themes/custom/quartiers_de_demain/src/assets/scss/partials/actu-caroussel-home.scss b/web/themes/custom/quartiers_de_demain/src/assets/scss/partials/actu-caroussel-home.scss index 2e25eda..fa01484 100644 --- a/web/themes/custom/quartiers_de_demain/src/assets/scss/partials/actu-caroussel-home.scss +++ b/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{ diff --git a/web/themes/custom/quartiers_de_demain/src/assets/scss/partials/header.scss b/web/themes/custom/quartiers_de_demain/src/assets/scss/partials/header.scss index 51bddda..dac16b0 100644 --- a/web/themes/custom/quartiers_de_demain/src/assets/scss/partials/header.scss +++ b/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{ diff --git a/web/themes/custom/quartiers_de_demain/src/assets/scss/partials/slick-theme.scss b/web/themes/custom/quartiers_de_demain/src/assets/scss/partials/slick-theme.scss index 947cbcd..32e1f8c 100644 --- a/web/themes/custom/quartiers_de_demain/src/assets/scss/partials/slick-theme.scss +++ b/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; 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 7763bc3..14990b8 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 @@ -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; - height: 12px; + width: 17px; + 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;