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 2a09963..b7179ce 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 document.addEventListener('DOMContentLoaded', function() {\n\n const header = document.querySelector('header');\n // Vérifier si la page a été rechargée ou si c'est une navigation interne\n const isFirstLoad = !performance.getEntriesByType(\"navigation\")[0].type.includes('back_forward');\n // Vérifier si nous sommes sur la page cible\n const isTargetPath = window.location.pathname === '/'; // Remplacez '/votre-chemin-cible' par le chemin réel\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 } else {\n // Sinon, appliquer la transition après un délai\n setTimeout(() => {\n header.classList.add('header--collapsed');\n }, 1000); // Attendre 1 seconde avant de réduire la taille du header\n }\n\n\n // Gestion du scroll pour afficher/masquer le header nav\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 + 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 // 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: 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 //////// header ////////////\n\n document.addEventListener('DOMContentLoaded', function() {\n\n const header = document.querySelector('header');\n // Vérifier si la page a été rechargée ou si c'est une navigation interne\n const isFirstLoad = !performance.getEntriesByType(\"navigation\")[0].type.includes('back_forward');\n // Vérifier si nous sommes sur la page cible\n const isTargetPath = window.location.pathname === '/'; // Remplacez '/votre-chemin-cible' par le chemin réel\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 } else {\n // Sinon, appliquer la transition après un délai\n setTimeout(() => {\n header.classList.add('header--collapsed');\n }, 1000); // Attendre 1 seconde avant de réduire la taille du header\n }\n\n\n // Gestion du scroll pour afficher/masquer le header nav\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\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\n\n ////////////////// Timeline ///////////////////////\n\n\n document.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 + 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 // 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\n document.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 /////////////////// 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 806a265..3138667 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 @@ -732,7 +732,7 @@ footer { cursor: pointer; background: transparent; color: transparent; - top: -1rem; + top: -2rem; -webkit-transform: translate(0, -1rem); -ms-transform: translate(0, -1rem); transform: translate(0, -1rem); @@ -977,7 +977,7 @@ footer { #home * { box-sizing: border-box; } -#home .config_pages--type--deroulement { +#home .__container-deroulement { background-color: #f3f5fc; background-image: url(../../../dist/assets/img/pillier-1.svg); background-repeat: no-repeat; @@ -985,14 +985,21 @@ footer { background-position-x: -20%; } @media (max-width: 1090px) { - #home .config_pages--type--deroulement { + #home .__container-deroulement { cursor: grab; } } +#home .__container-deroulement h2 { + width: fit-content; + margin: auto; + padding-top: 3rem; + font-size: 1.7rem; + font-weight: bold; +} #home .timeline { white-space: nowrap; overflow: hidden; - padding-top: 10rem; + padding-top: 5rem; padding-bottom: 4rem; } @media (max-width: 1090px) { @@ -1006,6 +1013,7 @@ footer { margin: auto; position: relative; top: -115px; + padding-bottom: 2rem; } @media (max-width: 1090px) { #home .timeline .__timeline-arrows { @@ -1020,9 +1028,6 @@ footer { #home .timeline .__timeline-arrows button:hover { opacity: 0.5; } -#home .timeline .__timeline-arrows button svg { - padding: 0.5rem; -} #home .timeline .__timeline-content { width: 100vw; padding-top: 7rem; @@ -1153,8 +1158,9 @@ footer { } #home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .text .field_field_titre { font-size: 0.5rem; + font-weight: 800; } -@media (max-width: 10900px) { +@media (max-width: 1090px) { #home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .text .field_field_titre { font-size: 1rem; } @@ -1176,10 +1182,11 @@ footer { display: flex; flex-direction: column; align-items: center; + padding-bottom: 3rem; } #actus-caroussel h2 { width: fit-content; - padding-bottom: 0.6rem; + padding-bottom: 0.4rem; margin-top: 3rem; margin-bottom: 3rem; font-size: 1.7rem; @@ -1193,7 +1200,7 @@ footer { } #actus-caroussel .content-actus .views-row { width: 500px !important; - padding: 1rem; + padding: 2rem; } @media (max-width: 550px) { #actus-caroussel .content-actus .views-row { @@ -1248,6 +1255,7 @@ footer { color: red; display: inline-flex; align-items: center; + font-size: 0.6rem; } #actus-caroussel .content-actus .views-row article.node-type-actualite .field_field_date::before { content: url("../img/date-actu.svg"); @@ -1261,6 +1269,10 @@ footer { font-size: 0.8rem; color: rgb(7, 50, 194); } +#actus-caroussel .content-actus .views-row article.node-type-actualite .field_body { + opacity: 1 !important; + transform: none !important; +} #actus-caroussel .content-actus .views-row article.node-type-actualite .field_body p { margin: 0; } 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 742ae94..9204d16 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 @@ -150,133 +150,149 @@ }); -//////////////////////// smooth apparition des textes + //////////////////////// smooth apparition des textes -function scrollReaveal(){ + function scrollReaveal(){ - const nodes = { - logo : document.querySelectorAll('#logo-animated-container'), - chapeau : document.querySelectorAll('.field_body'), - paragraph: document.querySelectorAll('.field_field_textes .paragraph--type--static-parts'), - } - - const showUp = { - origin: 'bottom', - delay: 100, - duration: 1000, - distance: '50px', - easing: 'cubic-bezier(0.5, 0, 0, 1)' - } - - const Show = { - delay: 100, - duration: 600, - easing: 'cubic-bezier(0.5, 0, 0, 1)' - } - - console.log(nodes); - - ScrollReveal().reveal(nodes.logo, Show); - ScrollReveal().reveal(nodes.chapeau, showUp); - ScrollReveal().reveal(nodes.paragraph, showUp); -} - - -$( document ).ready(function() { - scrollReaveal(); -}); - - - -////////////////// Timeline /////////////////////// - - -document.addEventListener('DOMContentLoaded', function() { - let currentSlide = 0; - - 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 + const nodes = { + logo : document.querySelectorAll('#logo-animated-container'), + chapeau : document.querySelectorAll('.field_body'), + paragraph: document.querySelectorAll('.field_field_textes .paragraph--type--static-parts'), } + + const showUp = { + origin: 'bottom', + delay: 100, + duration: 1000, + distance: '50px', + easing: 'cubic-bezier(0.5, 0, 0, 1)' + } + + const Show = { + delay: 100, + duration: 600, + easing: 'cubic-bezier(0.5, 0, 0, 1)' + } + + console.log(nodes); + + ScrollReveal().reveal(nodes.logo, Show); + ScrollReveal().reveal(nodes.chapeau, showUp); + ScrollReveal().reveal(nodes.paragraph, showUp); } - function showSlides(index) { - const slides = document.querySelectorAll('.paragraph--type--phase-deroulement'); - const totalSlides = slides.length; - const visibleSlides = getVisibleSlides(); - const maxSlide = totalSlides - visibleSlides + 1; - // Adjust the index to ensure it stays within bounds - currentSlide = Math.max(0.6, Math.min(index, maxSlide)); + $( document ).ready(function() { + scrollReaveal(); + }); - // 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); - } + ////////////////// Timeline /////////////////////// - function nextSlide() { - showSlides(currentSlide + 1); - } - // Attach event listeners - document.getElementById('arrowPrev').addEventListener('click', prevSlide); - document.getElementById('arrowNext').addEventListener('click', nextSlide); + document.addEventListener('DOMContentLoaded', function() { + let currentSlide = 0; - // 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 monthField = paragraph.querySelector('.field_field_date_de_moi div:nth-of-type(2)'); - if (monthField) { - const monthText = monthField.textContent.trim(); - if (monthText.length >= 3) { - monthField.textContent = monthText.slice(0, 3); + 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 } } - }); - // Handle window resize - window.addEventListener('resize', function() { - showSlides(currentSlide); // Recalculate the slides on resize - }); -// }); + function showSlides(index) { + const slides = document.querySelectorAll('.paragraph--type--phase-deroulement'); + const totalSlides = slides.length; + const visibleSlides = getVisibleSlides(); + const maxSlide = totalSlides - visibleSlides + 1; + // Adjust the index to ensure it stays within bounds + currentSlide = Math.max(0.6, Math.min(index, maxSlide)); - // Initialize - showSlides(currentSlide); -}); + // Calculate the offset for the transform + const offset = currentSlide * -70 / visibleSlides; + document.querySelector('.__timeline-content').style.transform = `translateX(${offset}%)`; -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'); + // 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); + } + + function nextSlide() { + 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 + showSlides(currentSlide); + + // Update month field to only show the first 3 letters + document.querySelectorAll('.paragraph--type--phase-deroulement').forEach(function(paragraph) { + const monthField = paragraph.querySelector('.field_field_date_de_moi div:nth-of-type(2)'); + 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); + }); + + 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'); + } + }); }); -}); -// slideshow home + /////////////////// caracteres body actus///////////////////////// + + document.addEventListener('DOMContentLoaded', function() { + // Maximum number of characters to display + const maxChars = 140; // Adjust this value as needed + + document.querySelectorAll('#actus-caroussel .node-type-actualite .field_body p').forEach(function(paragraph) { + let text = paragraph.textContent.trim(); + if (text.length > maxChars) { + let truncatedText = text.slice(0, maxChars) + '...'; + paragraph.textContent = truncatedText; + } + }); + }); + + + //////////// slideshow home ////////////////////////// $(document).ready(function(){ $('.content-actus .view').slick({ diff --git a/web/themes/custom/quartiers_de_demain/src/assets/scss/pages/actualite.scss b/web/themes/custom/quartiers_de_demain/src/assets/scss/pages/actualite.scss index 842ce85..e373df1 100644 --- a/web/themes/custom/quartiers_de_demain/src/assets/scss/pages/actualite.scss +++ b/web/themes/custom/quartiers_de_demain/src/assets/scss/pages/actualite.scss @@ -1,5 +1,4 @@ #page-node{ - // .node-id-11{ .content_container{ width: 60%; display: flex; 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 5594272..48d23af 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 @@ -2,9 +2,10 @@ display: flex; flex-direction: column; align-items: center; + padding-bottom: 3rem; h2{ width: fit-content; - padding-bottom: 0.6rem; + padding-bottom: 0.4rem; margin-top: 3rem; margin-bottom: 3rem; font-size: 1.7rem; @@ -20,10 +21,10 @@ } .views-row{ width: 500px !important; + padding: 2rem; @media(max-width: 550px){ width: 296px !important; } - padding: 1rem; article.node-type-actualite{ display: flex; flex-direction: column; @@ -68,6 +69,7 @@ color: red; display: inline-flex; align-items: center; + font-size: 0.6rem; &::before{ content: url('../img/date-actu.svg'); padding-right: 0.2rem; @@ -86,7 +88,9 @@ } } .field_body{ - + // visibility: visible; + opacity: 1 !important; + transform: none !important; p{ margin: 0; } @@ -99,5 +103,6 @@ top: 60px; } + } } \ No newline at end of file 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 027b2ce..23b9f20 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 @@ -76,7 +76,7 @@ $slick-opacity-not-active: 0.25 !default; cursor: pointer; background: transparent; color: transparent; - top: -1rem; + top: -2rem; -webkit-transform: translate(0, -1rem); -ms-transform: translate(0, -1rem); transform: translate(0, -1rem); 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 6ba8a6b..3a6c0a3 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 @@ -4,7 +4,7 @@ #home{ * { box-sizing: border-box; } - .config_pages--type--deroulement{ + .__container-deroulement{ background-color: #f3f5fcff; background-image: url(../../../dist/assets/img/pillier-1.svg); background-repeat: no-repeat; @@ -13,12 +13,19 @@ @media(max-width:1090px){ cursor:grab; } + h2{ + width: fit-content; + margin: auto; + padding-top: 3rem; + font-size: 1.7rem; + font-weight: bold; + } } .timeline { white-space: nowrap; overflow: hidden; - padding-top: 10rem; + padding-top: 5rem; padding-bottom: 4rem; @media(max-width:1090px){ padding-top: 18rem; @@ -29,6 +36,7 @@ margin: auto; position: relative; top: -115px; + padding-bottom: 2rem; @media(max-width:1090px){ top: -211px; display: none; @@ -39,10 +47,10 @@ &:hover{ opacity: 0.5; } - svg{ - padding: 0.5rem; + // svg{ + // padding: 0.5rem; - } + // } } } .__timeline-content{ @@ -179,7 +187,8 @@ min-width: 65%; .field_field_titre{ font-size: 0.5rem; - @media(max-width:10900px){ + font-weight: 800; + @media(max-width:1090px){ font-size: 1rem; } } diff --git a/web/themes/custom/quartiers_de_demain/templates/block--config-pages--deroulement.html.twig b/web/themes/custom/quartiers_de_demain/templates/block--config-pages--deroulement.html.twig new file mode 100644 index 0000000..47114e0 --- /dev/null +++ b/web/themes/custom/quartiers_de_demain/templates/block--config-pages--deroulement.html.twig @@ -0,0 +1,40 @@ +{# +/** + * @file + * Default theme implementation to display a block. + * + * Available variables: + * - plugin_id: The ID of the block implementation. + * - label: The configured label of the block if visible. + * - configuration: A list of the block's configuration values. + * - label: The configured label for the block. + * - label_display: The display settings for the label. + * - provider: The module or other provider that provided this block plugin. + * - Block plugin specific settings will also be stored here. + * - in_preview: Whether the plugin is being rendered in preview mode. + * - content: The content of this block. + * - attributes: array of HTML attributes populated by modules, intended to + * be added to the main container tag of this template. + * - id: A valid HTML ID and guaranteed unique. + * - title_attributes: Same as attributes, except applied to the main title + * tag that appears in the template. + * - title_prefix: Additional output populated by modules, intended to be + * displayed in front of the main title tag that appears in the template. + * - title_suffix: Additional output populated by modules, intended to be + * displayed after the main title tag that appears in the template. + * + * @see template_preprocess_block() + * + * @ingroup themeable + */ +#} +