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;
}
#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 {
display: flex;
@ -1163,13 +1174,24 @@ footer {
align-items: center;
padding-right: 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 {
content: ".";
font-size: 4rem;
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 {
width: fit-content !important;
@ -1177,6 +1199,11 @@ footer {
flex-direction: column;
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 {
font-size: 2.5rem;
line-height: 0.3rem;

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

@ -288,83 +288,6 @@
// //////////////////// 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
document.querySelectorAll('.paragraph--type--phase-deroulement').forEach(function(paragraph) {
@ -412,21 +335,7 @@
}
}
});
// // 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 /////////////////////////////////
$(document).ready(function(){
@ -444,7 +353,7 @@
// centerPadding: '100px',
responsive: [
{
breakpoint: 810,
breakpoint: 500,
settings: {
slidesToShow: 1,
adaptiveHeight: false,
@ -453,6 +362,8 @@
centerMode: true,
autoplay: false,
// autoplaySpeed: 2000,
// centerPadding: '100px',
}
}]
});
@ -517,31 +428,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);

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

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