bachir
/
drupal-quartiersdedemain
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

slick calendrier mobile

This commit is contained in:
ouidade 2024-09-26 14:30:53 +02:00
parent cbfd54cd9b
commit 4b0d27fb10
4 changed files with 62 additions and 131 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/themes/custom/quartiers_de_demain/dist/assets/bundle.js vendored
View File

File diff suppressed because one or more lines are too long

33
web/themes/custom/quartiers_de_demain/dist/assets/css/bundle.css vendored
View File

@ -1155,7 +1155,18 @@ footer {
padding-top: 2rem; padding-top: 2rem;
} }
#home .__container-deroulement .config_pages--type--deroulement .field_field_phase .timeline .__timeline-content .slick-track { #home .__container-deroulement .config_pages--type--deroulement .field_field_phase .timeline .__timeline-content .slick-track {
height: 350px; height: fit-content;
border-bottom: solid black 1px;
margin-bottom: 1rem;
}
@media (max-width: 500px) {
#home .__container-deroulement .config_pages--type--deroulement .field_field_phase .timeline .__timeline-content .slick-track {
flex-direction: column;
height: fit-content;
}
}
#home .__container-deroulement .config_pages--type--deroulement .field_field_phase .timeline .__timeline-content .slick-track.__paragraphs ::before {
content: ".";
} }
#home .__container-deroulement .config_pages--type--deroulement .field_field_phase .timeline .__timeline-content .slick-track .paragraph--type--phase-deroulement { #home .__container-deroulement .config_pages--type--deroulement .field_field_phase .timeline .__timeline-content .slick-track .paragraph--type--phase-deroulement {
display: flex; display: flex;
@ -1163,13 +1174,24 @@ footer {
align-items: center; align-items: center;
padding-right: 1rem; padding-right: 1rem;
padding-bottom: 1rem; padding-bottom: 1rem;
border-bottom: solid black 1px; }
@media (max-width: 500px) {
#home .__container-deroulement .config_pages--type--deroulement .field_field_phase .timeline .__timeline-content .slick-track .paragraph--type--phase-deroulement {
flex-direction: column;
align-items: baseline;
}
} }
#home .__container-deroulement .config_pages--type--deroulement .field_field_phase .timeline .__timeline-content .slick-track .paragraph--type--phase-deroulement:before { #home .__container-deroulement .config_pages--type--deroulement .field_field_phase .timeline .__timeline-content .slick-track .paragraph--type--phase-deroulement:before {
content: "."; content: ".";
font-size: 4rem; font-size: 4rem;
position: absolute; position: absolute;
top: 216px; top: 50%;
transform: translateY(-50%); /* Centrer parfaitement verticalement */
}
@media (max-width: 550px) {
#home .__container-deroulement .config_pages--type--deroulement .field_field_phase .timeline .__timeline-content .slick-track .paragraph--type--phase-deroulement:before {
display: none;
}
} }
#home .__container-deroulement .config_pages--type--deroulement .field_field_phase .timeline .__timeline-content .slick-track .paragraph--type--phase-deroulement .date { #home .__container-deroulement .config_pages--type--deroulement .field_field_phase .timeline .__timeline-content .slick-track .paragraph--type--phase-deroulement .date {
width: fit-content !important; width: fit-content !important;
@ -1177,6 +1199,11 @@ footer {
flex-direction: column; flex-direction: column;
padding-right: 1rem; padding-right: 1rem;
} }
@media (max-width: 500px) {
#home .__container-deroulement .config_pages--type--deroulement .field_field_phase .timeline .__timeline-content .slick-track .paragraph--type--phase-deroulement .date {
padding-right: 0rem;
}
}
#home .__container-deroulement .config_pages--type--deroulement .field_field_phase .timeline .__timeline-content .slick-track .paragraph--type--phase-deroulement .date .field_field_date_de_jour { #home .__container-deroulement .config_pages--type--deroulement .field_field_phase .timeline .__timeline-content .slick-track .paragraph--type--phase-deroulement .date .field_field_date_de_jour {
font-size: 2.5rem; font-size: 2.5rem;
line-height: 0.3rem; line-height: 0.3rem;

120
web/themes/custom/quartiers_de_demain/src/assets/js/quartiers_de_demain.js
View File

@ -288,83 +288,6 @@
// //////////////////// start Timeline script /////////////////////// // //////////////////// start Timeline script ///////////////////////
// // document.addEventListener('DOMContentLoaded', function() {
// // let currentSlide = 0;
// // //// responsive ///
// // function getVisibleSlides() {
// // if (window.innerWidth <= 600) {
// // return 1; // Show 1 slide on small screens
// // } else if (window.innerWidth <= 900) {
// // return 4; // Show 4 slides on medium screens
// // } else {
// // return 4; // Show 4 slides on large screens
// // }
// // }
// // function showSlides(index) {
// // const slides = document.querySelectorAll('.__paragraphs');
// // const totalSlides = slides.length;
// // const visibleSlides = getVisibleSlides();
// // const maxSlide = totalSlides - visibleSlides;
// // // Adjust the index to ensure it loops
// // if (index > maxSlide) {
// // currentSlide = 0; // Go back to the first slide
// // } else if (index < 0) {
// // currentSlide = maxSlide; // Go to the last slide
// // } else {
// // currentSlide = index;
// // }
// // // Calculate the offset for the transform
// // const offset = currentSlide * -50 / visibleSlides;
// // const offsetmobile = currentSlide * -10 / visibleSlides;
// // let timeline = document.querySelector('.__timeline-content');
// // if (timeline) {
// // if (window.innerWidth <= 600){
// // timeline.style.transform = `translateX(${offsetmobile}%)`;
// // } else {
// // timeline.style.transform = `translateX(${offset}%)`;
// // }
// // }
// // // Enable/disable arrows based on the current slide
// // // document.getElementById('arrowPrev').disabled = false; // Always enabled now
// // // document.getElementById('arrowNext').disabled = false; // Always enabled now
// // // Attach event listeners
// // let arrowprev = document.getElementById('arrowPrev');
// // if (arrowprev) {
// // arrowprev.disabled = false; // Always enabled now
// // }
// // let arrownext = document.getElementById('arrowNext')
// // if (arrownext) {
// // arrownext.disabled = false; // Always enabled now
// // }
// // }
// // // 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);
// // // Attach event listeners
// // let arrowprev = document.getElementById('arrowPrev');
// // if (arrowprev) {
// // arrowprev.addEventListener('click', prevSlide);
// // }
// // let arrownext = document.getElementById('arrowNext')
// // if (arrownext) {
// // arrownext.addEventListener('click', nextSlide);
// // }
// Update month field to only show the first 3 letters // Update month field to only show the first 3 letters
document.querySelectorAll('.paragraph--type--phase-deroulement').forEach(function(paragraph) { document.querySelectorAll('.paragraph--type--phase-deroulement').forEach(function(paragraph) {
@ -413,20 +336,6 @@
} }
}); });
// // Configuration de l'observateur
// const config = { childList: true, subtree: true };
// // Démarrer l'observateur sur le document entier ou sur un conteneur spécifique
// observer.observe(document.body, config);
// // // Handle window resize
// // window.addEventListener('resize', function() {
// // showSlides(currentSlide); // Recalculate the slides on resize
// // });
// // // Initialize
// // showSlides(currentSlide);
// // });
// ////////////////////// start calendrier home ///////////////////////////////// // ////////////////////// start calendrier home /////////////////////////////////
$(document).ready(function(){ $(document).ready(function(){
@ -444,7 +353,7 @@
// centerPadding: '100px', // centerPadding: '100px',
responsive: [ responsive: [
{ {
breakpoint: 810, breakpoint: 500,
settings: { settings: {
slidesToShow: 1, slidesToShow: 1,
adaptiveHeight: false, adaptiveHeight: false,
@ -453,6 +362,8 @@
centerMode: true, centerMode: true,
autoplay: false, autoplay: false,
// autoplaySpeed: 2000, // autoplaySpeed: 2000,
// centerPadding: '100px',
} }
}] }]
}); });
@ -518,31 +429,6 @@
}); });
////////////////////// start diaporama home swiper /////////////////////////////////
// PAS DE SWIPER CHARGÉ DANS L'ENV JS ...
// $(document).ready(function () {
// //initialize swiper when document ready
// let mySwiper = new Swiper ('.swiper-container', {
// speed: 400,
// spaceBetween: 100,
// // Optional parameters
// autoplay: {
// delay: 3000,
// disableOnInteraction: false,
// },
// direction: 'horizontal',
// loop: true,
// })
// });
////////////////////// end diaporama home swiper /////////////////////////////////
})(jQuery, window); })(jQuery, window);

36
web/themes/custom/quartiers_de_demain/src/assets/scss/partials/timeline.scss
View File

@ -32,25 +32,39 @@
padding-top: 2rem; padding-top: 2rem;
.slick-track{ .slick-track{
height: 350px; height: fit-content;
// border-bottom: solid black 1px; border-bottom: solid black 1px;
// &.__paragraphs{ margin-bottom: 1rem;
// ::before{ @media(max-width:500px){
// content: '.'; flex-direction: column;
// } height: fit-content;
// } }
&.__paragraphs{
::before{
content: '.';
}
}
.paragraph--type--phase-deroulement{ .paragraph--type--phase-deroulement{
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
padding-right: 1rem; padding-right: 1rem;
padding-bottom: 1rem; padding-bottom: 1rem;
border-bottom: solid black 1px; @media(max-width:500px){
flex-direction: column;
align-items: baseline;
}
// border-bottom: solid black 1px;
&:before{ &:before{
content:"."; content:".";
font-size: 4rem; font-size: 4rem;
position: absolute; position: absolute;
top: 216px; top: 50%;
transform: translateY(-50%); /* Centrer parfaitement verticalement */
@media(max-width:550px){
display: none;
}
} }
@ -59,6 +73,9 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding-right: 1rem; padding-right: 1rem;
@media(max-width:500px){
padding-right: 0rem;
}
.field_field_date_de_jour{ .field_field_date_de_jour{
font-size: 2.5rem; font-size: 2.5rem;
line-height: 0.3rem; line-height: 0.3rem;
@ -79,6 +96,7 @@
&::after{ &::after{
content: '.'; content: '.';
} }
} }
} }