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 358605d..419e1c4 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\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 dayField = paragraph.querySelector('.field_field_date_de_jour');\n const monthField = paragraph.querySelector('.field_field_date_de_moi div:nth-of-type(2)');\n\n if (dayField && dayField.textContent.trim()) {\n dateElement.classList.add('jour');\n } else {\n dateElement.classList.add('mois');\n const monthText = monthField.textContent.trim();\n // console.log(monthText)\n if (monthText.length >= 3) {\n monthField.textContent = monthText.slice(0, 3);\n console.log(monthField)\n }\n }\n });\n\n // Initialize\n showSlides(currentSlide);\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\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?"); /***/ }) 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 d79edc1..d4936ed 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 @@ -965,36 +965,61 @@ footer { display: flex; flex-direction: row; padding-bottom: 1rem; + padding-left: 2rem; } #home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .date { width: fit-content; display: flex; flex-direction: column; margin: auto; - align-items: center; + align-items: flex-start; padding-right: 1rem; + margin-bottom: 2rem; } -#home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .date.jour .moi-annee { - display: inline-flex; - font-size: 0.6rem; +#home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .date .field_field_date_de_jour { + font-size: 2rem; + line-height: 0.3rem; } -#home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .date.jour .moi-annee .field_field_date_de_moi { +#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; } -#home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .date.jour .field_field_date_de_jour { - font-size: 5rem; +#home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .date .field_field_date_de_moi::after { + content: "."; } -#home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .date.mois .moi-annee { +#home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .date .annee { display: flex; + align-items: center; font-size: 0.6rem; - flex-direction: column; + position: relative; + top: -10px; +} +#home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .date .annee .field_field_date_de_annee { + display: inline-flex; align-items: center; } -#home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .date.mois .moi-annee .field_field_date_de_moi { +#home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .date .annee .field_field_date_de_annee::after { + content: url("../img/noun-arrow-to-right-black.svg"); + display: flex; +} +#home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .date .annee .field_field_date_de_annee.only { + display: inline-flex; + align-items: center; +} +#home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .date .annee .field_field_date_de_annee.only::after { + content: ""; + display: flex; +} +#home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .date .annee .date2 { + display: inline-flex; +} +#home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .date .annee .date2 .field_field_date_a_jour { + padding-right: 0.2rem; +} +#home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .date .annee .date2 .field_field_date_a_moi { padding-right: 0.2rem; - text-transform: uppercase; - font-size: 4rem; } #home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .text { border: solid rgb(7, 50, 194) 1px; @@ -1357,6 +1382,7 @@ footer { flex: 1 15%; color: rgb(7, 50, 194); padding: 0.5rem; + margin-top: 0; } #consultation .layout-content .content_container .node-type-static #paragraph-id--10 .colone-picto p:not(:last-of-type)::before { content: ""; diff --git a/web/themes/custom/quartiers_de_demain/dist/assets/img/noun-arrow-to-right-black.svg b/web/themes/custom/quartiers_de_demain/dist/assets/img/noun-arrow-to-right-black.svg new file mode 100644 index 0000000..ff10a1d --- /dev/null +++ b/web/themes/custom/quartiers_de_demain/dist/assets/img/noun-arrow-to-right-black.svg @@ -0,0 +1,48 @@ + + + + + + + + + + + diff --git a/web/themes/custom/quartiers_de_demain/dist/assets/img/noun-arrow-to-right.svg b/web/themes/custom/quartiers_de_demain/dist/assets/img/noun-arrow-to-right.svg index 05d69b4..c4efa01 100644 --- a/web/themes/custom/quartiers_de_demain/dist/assets/img/noun-arrow-to-right.svg +++ b/web/themes/custom/quartiers_de_demain/dist/assets/img/noun-arrow-to-right.svg @@ -39,12 +39,7 @@ inkscape:groupmode="layer" id="layer1" transform="translate(-99.747912,-143.13958)"> - + = 3) { - monthField.textContent = monthText.slice(0, 3); - console.log(monthField) - } + const monthText = monthField.textContent.trim(); + if (monthText.length >= 3) { + monthField.textContent = monthText.slice(0, 3); + console.log(monthField) } }); @@ -216,6 +214,19 @@ document.addEventListener('DOMContentLoaded', function() { showSlides(currentSlide); }); +document.addEventListener('DOMContentLoaded', function() { + // Iterate over each .date element + document.querySelectorAll('.date').forEach(function(dateElement) { + const date2Element = dateElement.querySelector('.date2'); + const yearElement = dateElement.querySelector('.field_field_date_de_annee'); + + // Check if the .date2 element is empty + if (date2Element && !date2Element.textContent.trim()) { + // Add the .only class to the year element + yearElement.classList.add('only'); + } + }); +}); diff --git a/web/themes/custom/quartiers_de_demain/src/assets/scss/pages/consultation.scss b/web/themes/custom/quartiers_de_demain/src/assets/scss/pages/consultation.scss index a324279..1136488 100644 --- a/web/themes/custom/quartiers_de_demain/src/assets/scss/pages/consultation.scss +++ b/web/themes/custom/quartiers_de_demain/src/assets/scss/pages/consultation.scss @@ -56,6 +56,7 @@ flex: 1 15%; color: $blue_QDD; padding: 0.5rem; + margin-top: 0; &::before{ content:""; display: block; 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 b33efdf..7763bc3 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 @@ -80,41 +80,67 @@ display: flex; flex-direction: row; padding-bottom: 1rem; + padding-left: 2rem; .date{ - width: fit-content; display: flex; flex-direction: column; margin: auto; - align-items: center; + align-items: flex-start; padding-right: 1rem; - - &.jour{ - .moi-annee{ + margin-bottom: 2rem; + .field_field_date_de_jour{ + font-size: 2rem; + line-height: 0.3rem; + } + .field_field_date_de_moi{ + padding-right: 0.2rem; + text-transform: uppercase; + font-size: 3rem; + display: inline-flex; + &::after{ + content: '.'; + } + } + .annee{ + display: flex; + align-items: center; + font-size: 0.6rem; + position: relative; + top: -10px; + .field_field_date_de_annee{ display: inline-flex; - font-size: 0.6rem; - .field_field_date_de_moi{ - padding-right: 0.2rem; - text-transform: uppercase; - } - } - .field_field_date_de_jour{ - font-size: 5rem; - } - } - &.mois{ - .moi-annee{ - display: flex; - font-size: 0.6rem; - flex-direction: column; align-items: center; - .field_field_date_de_moi{ + &::after{ + content: url('../img/noun-arrow-to-right-black.svg'); + display: flex; + } + + } + .field_field_date_de_annee.only{ + display: inline-flex; + align-items: center; + &::after{ + content: ''; + display: flex; + } + + } + .date2{ + display: inline-flex; + + .field_field_date_a_jour{ padding-right: 0.2rem; - text-transform: uppercase; - font-size: 4rem; + } + .field_field_date_a_moi{ + padding-right: 0.2rem; + } } + } + + } @@ -132,7 +158,7 @@ .field_field_description{ p{ font-size: 0.5rem !important; - margin: 0; + margin: 0; } .field--label-above{ display: none; diff --git a/web/themes/custom/quartiers_de_demain/templates/paragraph--phase-deroulement.html.twig b/web/themes/custom/quartiers_de_demain/templates/paragraph--phase-deroulement.html.twig index d31a78d..03a3f78 100644 --- a/web/themes/custom/quartiers_de_demain/templates/paragraph--phase-deroulement.html.twig +++ b/web/themes/custom/quartiers_de_demain/templates/paragraph--phase-deroulement.html.twig @@ -55,15 +55,16 @@ {# {{ content }} #}
{{ content.field_date_de_jour}} -
+ {{ content.field_date_de_moi}} - {{ content.field_date_de_annee}} -
- {{ content.field_date_a_jour}} -
- {{ content.field_date_a_moi}} - {{ content.field_date_a_annee}} -
+
+ {{ content.field_date_de_annee}} +
+ {{ content.field_date_a_jour}} + {{ content.field_date_a_moi}} + {{ content.field_date_a_annee}} +
+