diff --git a/web/modules/custom/q2d_mod/assets/css/carte-interactive-qdd.scss b/web/modules/custom/q2d_mod/assets/css/carte-interactive-qdd.scss index a9f7b30..09af117 100644 --- a/web/modules/custom/q2d_mod/assets/css/carte-interactive-qdd.scss +++ b/web/modules/custom/q2d_mod/assets/css/carte-interactive-qdd.scss @@ -3,7 +3,7 @@ src: url('../css/fonts/Gilroy/gilroy-semibold-webfont.woff') format('woff'); } #sites-map-container { - background-color: #f6f7f3; + background-color: transparent; text-align: center; position: relative; width: 100%; /* Prend toute la largeur du conteneur parent */ @@ -83,6 +83,8 @@ #popup-content{ width: 300px; + padding-right: 30px; + p{ font-size: 0.7rem; } diff --git a/web/modules/custom/q2d_mod/assets/css/fontface.scss b/web/modules/custom/q2d_mod/assets/css/fontface.scss deleted file mode 100644 index e69de29..0000000 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 1f4e32b..26a6547 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 \**********************************************/ /***/ (function() { -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 //////// 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 paragraphe 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 enjeux : document.querySelectorAll('.field_field_textes .paragraph--type--static-parts .enjeux'),\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 ScrollReveal().reveal(nodes.enjeux, 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 // 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 === \"juillet\") {\n monthField.textContent = monthText.slice(0, 4);\n monthField.classList.add('after');\n } else if (monthText === \"juin\") {\n monthField.textContent = monthText.slice(0, 4);\n } else if (monthText.length > 3) {\n monthField.textContent = monthText.slice(0, 3);\n monthField.classList.add('after');\n }\n }\n });\n \n // Fonction pour ajouter ou retirer la classe .only\n function updateDateClasses() {\n document.querySelectorAll('.paragraph--type--phase-deroulement .date').forEach(function(dateElement) {\n const date2Element = dateElement.querySelector('.date2');\n const yearElement = dateElement.querySelector('.field_field_date_de_annee');\n \n if (date2Element && !date2Element.textContent.trim()) {\n if (yearElement) {\n yearElement.classList.add('only');\n }\n } else {\n if (yearElement) {\n yearElement.classList.remove('only');\n }\n }\n });\n }\n \n // Exécuter la fonction une première fois pour le contenu déjà présent\n updateDateClasses();\n \n // MutationObserver pour surveiller les changements dans le DOM\n const observer = new MutationObserver(function(mutationsList, observer) {\n for(let mutation of mutationsList) {\n if (mutation.type === 'childList') {\n updateDateClasses();\n }\n }\n });\n\n\n // ////////////////////// start calendrier home /////////////////////////////////\n $(document).ready(function(){\n $('.__timeline-content').slick({\n slidesToShow: 3,\n slidesToScroll: 1,\n dots: false,\n arrows: true,\n centerMode: false,\n draggable: true,\n infinite: false,\n responsive: [\n {\n breakpoint: 810,\n settings: {\n slidesToShow: 1,\n adaptiveHeight: false,\n arrows: true,\n draggable: true,\n centerMode: false,\n infinite: false,\n }\n }]\n });\n console.log('salut slick calendrier');\n \n });\n \n //////////////////////// end calendrier home /////////////////////////////////\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 //////////// start slideshow home ////////////////////////// \n\n\n\n $(document).ready(function(){\n let actuview = $('.content-actus .view')\n if (actuview) {\n actuview.slick({\n slidesToShow: 3,\n // slidesToScroll: 1,\n dots: false,\n arrows: true,\n centerMode: true,\n adaptiveHeight: false,\n autoplay: false,\n // autoplaySpeed: 1500,\n // infinite: 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 autoplay: false,\n // autoplaySpeed: 2000,\n }\n }]\n });\n console.log('salut slick home');\n \n }\n $('.slick-carousel').slick({\n lazyLoad: 'progressive', // Option 'ondemand' ou 'progressive'\n });\n\n });\n\n\n\n\n $(document).ready(function () {\n let diapohome = $('.config_pages--type--diaporama-home .diaporama');\n\n if (diapohome.length) {\n // Initialisation de Slick\n diapohome.slick({\n slidesToShow: 1,\n dots: false,\n arrows: false,\n // centerMode: true,\n adaptiveHeight: false,\n autoplay: true, // Activer l'autoplay\n autoplaySpeed: 4000, // Changement de slide toutes les 4 secondes\n // infinite: true,\n pauseOnHover: false, // Ne pas arrêter l'autoplay lors du survol\n pauseOnFocus: false,\n responsive: [\n {\n breakpoint: 810,\n settings: {\n slidesToShow: 1,\n adaptiveHeight: false,\n arrows: false,\n draggable: true,\n centerMode: false,\n }\n }]\n });\n\n }\n});\n\n //////////// end slideshow home ////////////////////////// \n\n//////////////// start lightbox galerie image page site////////////////////////\n\n // Sélectionne uniquement les images à l'intérieur de '.paragraph--type--site-diapo'\n let images = document.querySelectorAll('.paragraph--type--site-diapo .lightbox-trigger');\n let currentIndex;\n\n // Créer le lightbox et ses éléments\n const lightbox = document.createElement('div');\n lightbox.id = 'lightbox';\n lightbox.classList.add('lightbox');\n document.body.appendChild(lightbox);\n\n const img = document.createElement('img');\n lightbox.appendChild(img);\n\n const closeBtn = document.createElement('span');\n closeBtn.classList.add('close');\n closeBtn.innerHTML = '×';\n lightbox.appendChild(closeBtn);\n\n const prevBtn = document.createElement('a');\n prevBtn.classList.add('prev');\n prevBtn.innerHTML = '❮';\n lightbox.appendChild(prevBtn);\n\n const nextBtn = document.createElement('a');\n nextBtn.classList.add('next');\n nextBtn.innerHTML = '❯';\n lightbox.appendChild(nextBtn);\n\n // Ajouter un écouteur d'événement sur chaque image pour ouvrir le lightbox\n images.forEach((image, index) => {\n image.addEventListener('click', () => {\n lightbox.style.display = 'flex';\n img.src = image.src;\n currentIndex = index;\n });\n });\n\n // Fermer le lightbox\n closeBtn.addEventListener('click', () => {\n lightbox.style.display = 'none';\n });\n\n // Naviguer vers l'image précédente\n prevBtn.addEventListener('click', () => {\n currentIndex = (currentIndex > 0) ? currentIndex - 1 : images.length - 1;\n img.src = images[currentIndex].src;\n });\n\n // Naviguer vers l'image suivante\n nextBtn.addEventListener('click', () => {\n currentIndex = (currentIndex < images.length - 1) ? currentIndex + 1 : 0;\n img.src = images[currentIndex].src;\n });\n\n // Fermer le lightbox quand on clique en dehors de l'image\n lightbox.addEventListener('click', (e) => {\n if (e.target === lightbox) {\n lightbox.style.display = 'none';\n }\n });\n\n//////////////// end lightbox galerie image page site////////////////////////\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 //////// 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 paragraphe 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 enjeux : document.querySelectorAll('.field_field_textes .paragraph--type--static-parts .enjeux'),\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 ScrollReveal().reveal(nodes.enjeux, 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 // 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 === \"juillet\") {\n monthField.textContent = monthText.slice(0, 4);\n monthField.classList.add('after');\n } else if (monthText === \"juin\") {\n monthField.textContent = monthText.slice(0, 4);\n } else if (monthText.length > 3) {\n monthField.textContent = monthText.slice(0, 3);\n monthField.classList.add('after');\n }\n }\n });\n \n // Fonction pour ajouter ou retirer la classe .only\n function updateDateClasses() {\n document.querySelectorAll('.paragraph--type--phase-deroulement .date').forEach(function(dateElement) {\n const date2Element = dateElement.querySelector('.date2');\n const yearElement = dateElement.querySelector('.field_field_date_de_annee');\n \n if (date2Element && !date2Element.textContent.trim()) {\n if (yearElement) {\n yearElement.classList.add('only');\n }\n } else {\n if (yearElement) {\n yearElement.classList.remove('only');\n }\n }\n });\n }\n \n // Exécuter la fonction une première fois pour le contenu déjà présent\n updateDateClasses();\n \n // MutationObserver pour surveiller les changements dans le DOM\n const observer = new MutationObserver(function(mutationsList, observer) {\n for(let mutation of mutationsList) {\n if (mutation.type === 'childList') {\n updateDateClasses();\n }\n }\n });\n\n\n // ////////////////////// start calendrier home /////////////////////////////////\n $(document).ready(function(){\n $('.__timeline-content').slick({\n slidesToShow: 3,\n slidesToScroll: 1,\n dots: false,\n arrows: true,\n centerMode: false,\n draggable: true,\n infinite: false,\n responsive: [\n {\n breakpoint: 810,\n settings: {\n slidesToShow: 1,\n adaptiveHeight: false,\n arrows: true,\n draggable: true,\n centerMode: false,\n infinite: false,\n }\n }]\n });\n console.log('salut slick calendrier');\n \n });\n \n //////////////////////// end calendrier home /////////////////////////////////\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 //////////// start slideshow home ////////////////////////// \n\n\n\n $(document).ready(function(){\n let actuview = $('.content-actus .view ')\n if (actuview) {\n actuview.slick({\n slidesToShow: 3,\n // slidesToScroll: 1,\n dots: false,\n arrows: true,\n // centerMode: true,\n adaptiveHeight: false,\n autoplay: false,\n // autoplaySpeed: 1500,\n // infinite: 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: false,\n autoplay: false,\n // autoplaySpeed: 2000,\n }\n }]\n });\n console.log('salut slick home');\n \n }\n $('.slick-carousel').slick({\n lazyLoad: 'progressive', // Option 'ondemand' ou 'progressive'\n });\n\n });\n\n\n\n\n $(document).ready(function () {\n let diapohome = $('.config_pages--type--diaporama-home .diaporama');\n\n if (diapohome.length) {\n // Initialisation de Slick\n diapohome.slick({\n slidesToShow: 1,\n dots: false,\n arrows: false,\n // centerMode: true,\n adaptiveHeight: false,\n autoplay: true, // Activer l'autoplay\n autoplaySpeed: 4000, // Changement de slide toutes les 4 secondes\n // infinite: true,\n pauseOnHover: false, // Ne pas arrêter l'autoplay lors du survol\n pauseOnFocus: false,\n responsive: [\n {\n breakpoint: 810,\n settings: {\n slidesToShow: 1,\n adaptiveHeight: false,\n arrows: false,\n draggable: true,\n centerMode: false,\n }\n }]\n });\n\n }\n});\n\n //////////// end slideshow home ////////////////////////// \n\n//////////////// start lightbox galerie image page site////////////////////////\n\n // Sélectionne uniquement les images à l'intérieur de '.paragraph--type--site-diapo'\n let images = document.querySelectorAll('.paragraph--type--site-diapo .lightbox-trigger');\n let currentIndex;\n\n // Créer le lightbox et ses éléments\n const lightbox = document.createElement('div');\n lightbox.id = 'lightbox';\n lightbox.classList.add('lightbox');\n document.body.appendChild(lightbox);\n\n const img = document.createElement('img');\n lightbox.appendChild(img);\n\n const closeBtn = document.createElement('span');\n closeBtn.classList.add('close');\n closeBtn.innerHTML = '×';\n lightbox.appendChild(closeBtn);\n\n const prevBtn = document.createElement('a');\n prevBtn.classList.add('prev');\n prevBtn.innerHTML = '❮';\n lightbox.appendChild(prevBtn);\n\n const nextBtn = document.createElement('a');\n nextBtn.classList.add('next');\n nextBtn.innerHTML = '❯';\n lightbox.appendChild(nextBtn);\n\n // Ajouter un écouteur d'événement sur chaque image pour ouvrir le lightbox\n images.forEach((image, index) => {\n image.addEventListener('click', () => {\n lightbox.style.display = 'flex';\n img.src = image.src;\n currentIndex = index;\n });\n });\n\n // Fermer le lightbox\n closeBtn.addEventListener('click', () => {\n lightbox.style.display = 'none';\n });\n\n // Naviguer vers l'image précédente\n prevBtn.addEventListener('click', () => {\n currentIndex = (currentIndex > 0) ? currentIndex - 1 : images.length - 1;\n img.src = images[currentIndex].src;\n });\n\n // Naviguer vers l'image suivante\n nextBtn.addEventListener('click', () => {\n currentIndex = (currentIndex < images.length - 1) ? currentIndex + 1 : 0;\n img.src = images[currentIndex].src;\n });\n\n // Fermer le lightbox quand on clique en dehors de l'image\n lightbox.addEventListener('click', (e) => {\n if (e.target === lightbox) {\n lightbox.style.display = 'none';\n }\n });\n\n//////////////// end lightbox galerie image page site////////////////////////\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 5660dc9..5b21bef 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 @@ -1350,7 +1350,6 @@ footer { width: 100vw; } #actus-caroussel .content-actus .views-row { - width: 500px !important; padding: 1rem; } @media (max-width: 550px) { @@ -2922,6 +2921,9 @@ body { flex-direction: column; align-items: center; } +.node-type-site .layout--threecol-25-50-25 .layout__region--first .block-region-first { + position: fixed; +} .node-type-site .layout--threecol-25-50-25 .layout__region--first .block-region-first .views-element-container { margin-bottom: 3rem; } @@ -2930,10 +2932,12 @@ body { margin-bottom: 0.5rem; } .node-type-site .layout--threecol-25-50-25 .layout__region--first div #sites-map-container { - position: fixed; width: auto; left: 0.3rem; } +.node-type-site .layout--threecol-25-50-25 .layout__region--first div:has(.field_field_documents) { + margin: auto; +} @media (max-width: 500px) { .node-type-site .layout--threecol-25-50-25 .layout__region--first div:has(.field_field_documents) { margin-top: 1rem; @@ -2967,28 +2971,38 @@ body { content: url("../img/noun-arrow-to-right.svg"); padding-right: 0.2rem; padding-left: 0.2rem; + padding-bottom: 0.2rem; } -.node-type-site .layout--threecol-25-50-25 .layout__region--first .field_field_liens_site div div { - width: fit-content; - padding-left: 0.5rem; +.node-type-site .layout--threecol-25-50-25 .layout__region--first div:has(.field_field_liens_site) { + margin: auto; +} +@media (max-width: 500px) { + .node-type-site .layout--threecol-25-50-25 .layout__region--first div:has(.field_field_liens_site) { + margin-top: 1rem; + } +} +.node-type-site .layout--threecol-25-50-25 .layout__region--first div:has(.field_field_liens_site) h2, .node-type-site .layout--threecol-25-50-25 .layout__region--first div:has(.field_field_liens_site) .visually-hidden, .node-type-site .layout--threecol-25-50-25 .layout__region--first div:has(.field_field_liens_site) .field--label-above, .node-type-site .layout--threecol-25-50-25 .layout__region--first div:has(.field_field_liens_site) span:not(.file) { + display: none; +} +.node-type-site .layout--threecol-25-50-25 .layout__region--first div:has(.field_field_liens_site) .field_field_liens_site { background: black; } @media (max-width: 810px) { - .node-type-site .layout--threecol-25-50-25 .layout__region--first .field_field_liens_site div div { + .node-type-site .layout--threecol-25-50-25 .layout__region--first div:has(.field_field_liens_site) .field_field_liens_site { margin-left: 0; } } -.node-type-site .layout--threecol-25-50-25 .layout__region--first .field_field_liens_site div div a { +.node-type-site .layout--threecol-25-50-25 .layout__region--first div:has(.field_field_liens_site) .field_field_liens_site a { display: inline-flex; align-items: center; color: white; text-transform: uppercase; font-size: 0.6rem; } -.node-type-site .layout--threecol-25-50-25 .layout__region--first .field_field_liens_site div div a svg { +.node-type-site .layout--threecol-25-50-25 .layout__region--first div:has(.field_field_liens_site) .field_field_liens_site a svg { display: none; } -.node-type-site .layout--threecol-25-50-25 .layout__region--first .field_field_liens_site div div a::after { +.node-type-site .layout--threecol-25-50-25 .layout__region--first div:has(.field_field_liens_site) .field_field_liens_site a::after { display: inline-flex; content: url("../img/noun-arrow-to-right.svg"); padding-right: 0.2rem; @@ -3205,7 +3219,7 @@ main { #lessites .content_container .view .header_view .view { width: 100vw; } -#lessites .content_container .view .grille--views-row { +#lessites .content_container .view div:has(.views-row) { display: flex; flex-direction: row; flex-wrap: wrap; @@ -3216,15 +3230,15 @@ main { padding-top: 3rem; font-size: 0.6rem; } -#lessites .content_container .view .grille--views-row .views-row { +#lessites .content_container .view div:has(.views-row) .views-row { width: 20%; } -#lessites .content_container .view .grille--views-row .views-row .views-field-title .field-content a { +#lessites .content_container .view div:has(.views-row) .views-row .views-field-title .field-content a { color: rgb(7, 50, 194); font-family: "gilroy-bold"; padding-top: 0.5rem; } -#lessites .content_container .view .grille--views-row .views-row .views-field-field-images .field-content img { +#lessites .content_container .view div:has(.views-row) .views-row .views-field-field-images .field-content img { width: 200px; height: 200px; object-fit: cover; @@ -3235,7 +3249,7 @@ main { src: url("../css/fonts/Gilroy/gilroy-semibold-webfont.woff") format("woff"); } #sites-map-container { - background-color: #f6f7f3; + background-color: transparent; text-align: center; position: relative; width: 100%; /* Prend toute la largeur du conteneur parent */ @@ -3318,6 +3332,7 @@ main { #popup-content { width: 300px; + padding-right: 30px; } #popup-content p { font-size: 0.7rem; 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 ba9ecc7..130c9c4 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 @@ -367,14 +367,14 @@ $(document).ready(function(){ - let actuview = $('.content-actus .view') + let actuview = $('.content-actus .view ') if (actuview) { actuview.slick({ slidesToShow: 3, // slidesToScroll: 1, dots: false, arrows: true, - centerMode: true, + // centerMode: true, adaptiveHeight: false, autoplay: false, // autoplaySpeed: 1500, @@ -388,7 +388,7 @@ adaptiveHeight: false, arrows: true, draggable: true, - centerMode: true, + centerMode: false, autoplay: false, // autoplaySpeed: 2000, } diff --git a/web/themes/custom/quartiers_de_demain/src/assets/scss/pages/lessites.scss b/web/themes/custom/quartiers_de_demain/src/assets/scss/pages/lessites.scss index a706b10..00da5fd 100644 --- a/web/themes/custom/quartiers_de_demain/src/assets/scss/pages/lessites.scss +++ b/web/themes/custom/quartiers_de_demain/src/assets/scss/pages/lessites.scss @@ -2,8 +2,8 @@ main{ background-color: #f6f7f3; } #lessites{ - .content_container{ + // background-color: red; display: flex; flex-direction: column; align-items: center; @@ -23,46 +23,43 @@ main{ } } - .view{ - display: flex; - flex-direction: column; - - .header_view { - position: relative !important; - height: fit-content; - z-index: none; - .view{ - width: 100vw; - } - } - .grille--views-row{ + .view{ display: flex; - flex-direction: row; - flex-wrap: wrap; - gap: 10px; - width: 80%; - margin: auto; - justify-content: space-between; - padding-top: 3rem; - font-size: 0.6rem; - .views-row{ - width: 20%; - .views-field-title .field-content a{ - color: $blue_QDD; - font-family: "gilroy-bold"; - padding-top: 0.5rem; - } - .views-field-field-images .field-content img{ - width: 200px; - height: 200px; - object-fit: cover; - } - + flex-direction: column; + .header_view { + position: relative !important; + height: fit-content; + z-index: none; + .view{ + width: 100vw; + } + } + div:has(.views-row){ + display: flex; + flex-direction: row; + flex-wrap: wrap; + gap: 10px; + width: 80%; + margin: auto; + justify-content: space-between; + padding-top: 3rem; + font-size: 0.6rem; + .views-row{ + width: 20%; + .views-field-title .field-content a{ + color: $blue_QDD; + font-family: "gilroy-bold"; + padding-top: 0.5rem; + } + .views-field-field-images .field-content img{ + width: 200px; + height: 200px; + object-fit: cover; + } + } } } - - } } } diff --git a/web/themes/custom/quartiers_de_demain/src/assets/scss/pages/node-type-site.scss b/web/themes/custom/quartiers_de_demain/src/assets/scss/pages/node-type-site.scss index e857fd6..96f248b 100644 --- a/web/themes/custom/quartiers_de_demain/src/assets/scss/pages/node-type-site.scss +++ b/web/themes/custom/quartiers_de_demain/src/assets/scss/pages/node-type-site.scss @@ -21,7 +21,7 @@ align-items: center; .block-region-first{ - + position: fixed; .views-element-container{ margin-bottom: 3rem; } @@ -29,17 +29,13 @@ div{ width: fit-content; margin-bottom: 0.5rem; - // #sites-map-container.fixed{ - // width: auto; - // left: 1.3rem; - // } #sites-map-container{ - position: fixed; width: auto; left: 0.3rem; } } div:has(.field_field_documents){ + margin: auto; @media(max-width: 500px){ margin-top: 1rem; } @@ -69,38 +65,48 @@ content: url("../img/noun-arrow-to-right.svg"); padding-right: 0.2rem; padding-left: 0.2rem; - + padding-bottom: 0.2rem; } } } } - .field_field_liens_site div div{ - width: fit-content; - padding-left: 0.5rem; - background: black; - @media (max-width:810px) { - margin-left: 0; + div:has(.field_field_liens_site){ + margin: auto; + @media(max-width: 500px){ + margin-top: 1rem; } - - a{ - display: inline-flex; - align-items: center; - color: white; - text-transform: uppercase; - font-size: 0.6rem; - svg{ - display: none; + + h2, .visually-hidden, .field--label-above, span:not(.file){ + display: none; + } + .field_field_liens_site{ + background: black; + @media (max-width:810px) { + margin-left: 0; } - &::after{ + + a{ display: inline-flex; - content: url("../img/noun-arrow-to-right.svg"); - padding-right: 0.2rem; - padding-left: 0.2rem; - - } - } + align-items: center; + color: white; + text-transform: uppercase; + font-size: 0.6rem; + svg{ + display: none; + } + &::after{ + display: inline-flex; + content: url("../img/noun-arrow-to-right.svg"); + padding-right: 0.2rem; + padding-left: 0.2rem; + + } + } + } + } + } .layout__region--second{ flex: 0 1 60% !important; 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 0e3080d..c278818 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 @@ -19,7 +19,7 @@ width: 100vw; } .views-row{ - width: 500px !important; + // width: 500px !important; padding: 1rem; @media(max-width: 550px){ diff --git a/web/themes/custom/quartiers_de_demain/templates/views-view-unformatted.html.twig b/web/themes/custom/quartiers_de_demain/templates/views-view-unformatted.html.twig deleted file mode 100644 index 514fa56..0000000 --- a/web/themes/custom/quartiers_de_demain/templates/views-view-unformatted.html.twig +++ /dev/null @@ -1,36 +0,0 @@ -{# -/** - * @file - * Default theme implementation to display a view of unformatted rows. - * - * Available variables: - * - title: The title of this group of rows. May be empty. - * - rows: A list of the view's row items. - * - attributes: The row's HTML attributes. - * - content: The row's content. - * - view: The view object. - * - default_row_class: A flag indicating whether default classes should be - * used on rows. - * - * @see template_preprocess_views_view_unformatted() - * - * @ingroup themeable - */ -#} -{% if title %} -

{{ title }}

-{% endif %} -
- -{% for row in rows %} - {% - set row_classes = [ - default_row_class ? 'views-row', - - ] - %} - - {{- row.content -}} -
-{% endfor %} -