slick calendrier mobile
This commit is contained in:
parent
cbfd54cd9b
commit
4b0d27fb10
File diff suppressed because one or more lines are too long
|
@ -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;
|
||||||
|
|
|
@ -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) {
|
||||||
|
@ -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 /////////////////////////////////
|
// ////////////////////// 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',
|
||||||
|
|
||||||
}
|
}
|
||||||
}]
|
}]
|
||||||
});
|
});
|
||||||
|
@ -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);
|
})(jQuery, window);
|
||||||
|
|
|
@ -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: '.';
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue