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

deroulement new css

Browse Source
This commit is contained in:
Ouidade Soussi Chiadmi
2024-07-18 12:04:24 +02:00
parent 2c7bb085f8
commit ce0b9b07b0
5 changed files with 46 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -304,13 +304,13 @@
}
function showSlides(index) {
const slides = document.querySelectorAll('.paragraph--type--phase-deroulement');
const slides = document.querySelectorAll('.__paragraphs');
const totalSlides = slides.length;
const visibleSlides = getVisibleSlides();
const maxSlide = totalSlides - visibleSlides + 1;
const maxSlide = totalSlides - visibleSlides;
// Adjust the index to ensure it stays within bounds
currentSlide = Math.max(0.6, Math.min(index, maxSlide));
currentSlide = Math.max(0, Math.min(index, maxSlide));
// Calculate the offset for the transform
const offset = currentSlide * -70 / visibleSlides;

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

@@ -24,10 +24,13 @@
}
.timeline {
display: flex;
flex-direction: column;
white-space: nowrap;
overflow: hidden;
padding-top: 5rem;
padding-top: 2rem;
padding-bottom: 8rem;
height: 950px;
@media(max-width:1090px){
padding-top: 14rem;
overflow: scroll;
@@ -35,8 +38,7 @@
.__timeline-arrows{
width: fit-content;
margin: auto;
position: relative;
top: -115px;
margin-top: 0;
padding-bottom: 2rem;
@media(max-width:1090px){
top: -211px;
@@ -58,19 +60,21 @@
}
.__timeline-content{
// font-size: 0;
width: 100vw;
// width: 100vw;
width: fit-content;
padding-top: 7rem;
padding-bottom: 2rem;
padding-left: 3rem;
transition: all 1s;
.__paragraphs{
position: relative;
display: inline-flex;
width: 500px;
width: 700px;
height: 1px;
background: black;
&:first-of-type{
height: 0px;
}
// &:last-of-type{
// height: 0px;
// }
// &:last-child {
// width: 20px;
// }
@@ -81,7 +85,7 @@
content: "";
position: absolute;
top: 50%;
left: 100%;
left: -18px;
bottom: 0;
width: 17px;
height: 17px;
@@ -94,20 +98,23 @@
}
.paragraph--type--phase-deroulement{
display: flex;
flex-direction: row;
position: absolute;
left: 65%;
padding-bottom: 1rem;
// left: 65%;
left: -18px;
top: -16px;
transform: translateY(-100%);
width: 400px;
width: 600px;
height: 300px;
font-size: 1rem;
white-space: normal;
color: black;
display: flex;
flex-direction: row;
padding-bottom: 1rem;
padding-left: 2rem;
padding-right: 2rem;
// padding-bottom: 1rem;
// padding-left: 2rem;
// padding-right: 2rem;
@media(max-width:550px){
padding-left: 0rem;
width: 240px;
@@ -198,8 +205,8 @@
border-radius: 5%;
padding: 0.6rem 0.6rem;
line-height: 1.1;
// width: fit-content;
min-width: 65%;
width: fit-content;
min-width: 35%;
@media(max-width:1090px){
height: 200px;
}