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

deroulement new css

This commit is contained in:
ouidade 2024-07-18 12:04:24 +02:00
parent 2c7bb085f8
commit ce0b9b07b0
5 changed files with 46 additions and 40 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

@ -1079,10 +1079,13 @@ footer {
font-size: 1.7rem;
}
#home .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) {
#home .timeline {
@ -1093,8 +1096,7 @@ footer {
#home .timeline .__timeline-arrows {
width: fit-content;
margin: auto;
position: relative;
top: -115px;
margin-top: 0;
padding-bottom: 2rem;
}
@media (max-width: 1090px) {
@ -1115,21 +1117,19 @@ footer {
}
}
#home .timeline .__timeline-content {
width: 100vw;
width: fit-content;
padding-top: 7rem;
padding-bottom: 2rem;
padding-left: 3rem;
transition: all 1s;
}
#home .timeline .__timeline-content .__paragraphs {
position: relative;
display: inline-flex;
width: 500px;
width: 700px;
height: 1px;
background: black;
}
#home .timeline .__timeline-content .__paragraphs:first-of-type {
height: 0px;
}
#home .timeline .__timeline-content .__paragraphs:not(:first-child) {
margin-left: 14px;
}
@ -1137,7 +1137,7 @@ footer {
content: "";
position: absolute;
top: 50%;
left: 100%;
left: -18px;
bottom: 0;
width: 17px;
height: 17px;
@ -1151,20 +1151,18 @@ footer {
}
}
#home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement {
display: flex;
flex-direction: row;
position: absolute;
left: 65%;
padding-bottom: 1rem;
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;
}
@media (max-width: 550px) {
#home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement {
@ -1249,7 +1247,8 @@ footer {
border-radius: 5%;
padding: 0.6rem 0.6rem;
line-height: 1.1;
min-width: 65%;
width: fit-content;
min-width: 35%;
}
@media (max-width: 1090px) {
#home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .text {

2
web/themes/custom/quartiers_de_demain/dist/assets/img/formes-animees.svg vendored
View File

@ -51,7 +51,7 @@
id="path148"
d="M 0,0 211.55,177.512"
style="fill:none;stroke:#0833c2;stroke-width:70;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
transform="matrix(1.3333333,0,0,-1.3333333,1686.6035,8250)" />
transform="matrix(1.3333333,0,0,-1.3333333,1686.6035,8050)" />
<path
id="path151"
d="M 0,0 V -174.775"

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.0 KiB

After

Width:  |  Height:  |  Size: 4.0 KiB

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;
}