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 8d02732..34851c1 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\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 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})(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\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 function showSlides(index) {\n const slides = document.querySelectorAll('.view');\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('.content-actus').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 \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?"); /***/ }) 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 853246a..b9385df 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 @@ -728,11 +728,12 @@ footer span.totop #toTop .arrow-up::before { cursor: pointer; background: transparent; color: transparent; - top: 50%; - -webkit-transform: translate(0, -50%); - -ms-transform: translate(0, -50%); - transform: translate(0, -50%); + top: -20px; + -webkit-transform: translate(0, -20px); + -ms-transform: translate(0, -20px); + transform: translate(0, -20px); padding: 0; + padding-bottom: 2rem; border: none; outline: none; } @@ -757,14 +758,14 @@ footer span.totop #toTop .arrow-up::before { font-family: "slick"; font-size: 20px; line-height: 1; - color: white; + color: red; opacity: 0.75; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .slick-prev { - left: -25px; + left: 45%; } [dir=rtl] .slick-prev { left: auto; @@ -778,7 +779,7 @@ footer span.totop #toTop .arrow-up::before { } .slick-next { - right: -25px; + right: 45%; } [dir=rtl] .slick-next { left: -25px; @@ -1096,6 +1097,7 @@ footer span.totop #toTop .arrow-up::before { } #actus-caroussel h2 { width: fit-content; + padding-bottom: 2rem; } #actus-caroussel .content-actus .view { display: flex; @@ -1104,7 +1106,7 @@ footer span.totop #toTop .arrow-up::before { width: 100vw; } #actus-caroussel .content-actus .views-row { - width: 25%; + width: 500px !important; padding: 1rem; } #actus-caroussel .content-actus .views-row .node-type-actualite .field_field_images { @@ -1113,13 +1115,13 @@ footer span.totop #toTop .arrow-up::before { -webkit-border-radius: 9px; /* pour Safari sur Mac */ border-radius: 9px; /* CSS3 */ background-color: red; - height: 160px; + height: 250px; margin-bottom: 0.6rem; } #actus-caroussel .content-actus .views-row .node-type-actualite .field_field_images img { width: 100%; - height: auto; - max-height: 160px; + height: fit-content; + max-height: 250px; object-fit: cover; } #actus-caroussel .content-actus .views-row .node-type-actualite .field_field_type_d_actualite { 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 37ab7e4..4bea74b 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 @@ -118,6 +118,24 @@ document.addEventListener('DOMContentLoaded', function() { document.getElementById('arrowNext').disabled = currentSlide === maxSlide; } + function showSlides(index) { + const slides = document.querySelectorAll('.view'); + const totalSlides = slides.length; + const visibleSlides = 3; // Number of slides to show at a time + const maxSlide = totalSlides - visibleSlides; + + // Adjust the index to ensure it stays within bounds + currentSlide = Math.max(0, Math.min(index, maxSlide)); + + // Calculate the offset for the transform + const offset = currentSlide * -100 / visibleSlides; + document.querySelector('.content-actus').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); } @@ -154,6 +172,36 @@ document.addEventListener('DOMContentLoaded', function() { showSlides(currentSlide); }); + + + +// slideshow home + + $(document).ready(function(){ + $('.content-actus .view').slick({ + slidesToShow: 3, + // slidesToScroll: 1, + dots: false, + arrows: true, + centerMode: true, + adaptiveHeight: true, + // centerPadding: '100px', + responsive: [ + { + breakpoint: 810, + settings: { + slidesToShow: 1, + adaptiveHeight: true, + arrows: false, + draggable: true, + centerMode: true, + } + }] + }); + console.log('salut slick home'); + + }); + })(jQuery, window); 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 e6596ca..2e25eda 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 @@ -20,8 +20,8 @@ } h2{ width: fit-content; + padding-bottom: 2rem; } - // html.js.sr body div.dialog-off-canvas-main-canvas div.layout-container.home main#home div.layout-content div.content_container div.layout.layout--onecol div.layout__region.layout__region--content div.block-region-content div#actus-caroussel.views-element-container div.content-actus div div.js-view-dom-id-b0034e5565032847800e2aa5b7dc6211f2b856c751ed2284dfe542976a01c20c .content-actus{ .view{ display: flex; @@ -31,7 +31,7 @@ } .views-row{ - width: 25%; + width: 500px !important; padding: 1rem; .node-type-actualite{ .field_field_images{ @@ -40,12 +40,12 @@ -webkit-border-radius: 9px; /* pour Safari sur Mac */ border-radius: 9px; /* CSS3 */ background-color: red; - height: 160px; + height: 250px; margin-bottom: 0.6rem; img{ width: 100%; - height: auto; - max-height: 160px; + height: fit-content; + max-height: 250px; object-fit: cover; } } 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 7fe63e1..51f0894 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 @@ -10,11 +10,15 @@ $slick-font-path: "./fonts/" !default; $slick-font-family: "slick" !default; $slick-loader-path: "./" !default; -$slick-arrow-color: white !default; +$slick-arrow-color: red !default; $slick-dot-color: black !default; $slick-dot-color-active: $slick-dot-color !default; $slick-prev-character: "\2190" !default; $slick-next-character: "\2192" !default; + +// $slick-prev-character: url('../../img/prev.svg ') !default; + + $slick-dot-character: "\2022" !default; $slick-dot-size: 6px !default; $slick-opacity-default: 0.75 !default; @@ -71,11 +75,12 @@ $slick-opacity-not-active: 0.25 !default; cursor: pointer; background: transparent; color: transparent; - top: 50%; - -webkit-transform: translate(0, -50%); - -ms-transform: translate(0, -50%); - transform: translate(0, -50%); + top: -20px; + -webkit-transform: translate(0, -20px); + -ms-transform: translate(0, -20px); + transform: translate(0, -20px); padding: 0; + padding-bottom: 2rem; border: none; outline: none; &:hover, &:focus { @@ -101,7 +106,7 @@ $slick-opacity-not-active: 0.25 !default; } .slick-prev { - left: -25px; + left: 45%; [dir="rtl"] & { left: auto; right: -25px; @@ -115,7 +120,7 @@ $slick-opacity-not-active: 0.25 !default; } .slick-next { - right: -25px; + right: 45%; [dir="rtl"] & { left: -25px; right: auto; diff --git a/web/themes/custom/quartiers_de_demain/templates/block--views-block--actus-block-1.html.twig b/web/themes/custom/quartiers_de_demain/templates/block--views-block--actus-block-1.html.twig index 9c3f6c1..c5b90ce 100644 --- a/web/themes/custom/quartiers_de_demain/templates/block--views-block--actus-block-1.html.twig +++ b/web/themes/custom/quartiers_de_demain/templates/block--views-block--actus-block-1.html.twig @@ -34,14 +34,14 @@ {{ label }} {% endif %} {{ title_suffix }} -
+ {#
-
+
#} {% block content %}
{{ content }}
{% endblock %}