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; font-size: 1.7rem;
} }
#home .timeline { #home .timeline {
display: flex;
flex-direction: column;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
padding-top: 5rem; padding-top: 2rem;
padding-bottom: 8rem; padding-bottom: 8rem;
height: 950px;
} }
@media (max-width: 1090px) { @media (max-width: 1090px) {
#home .timeline { #home .timeline {
@ -1093,8 +1096,7 @@ footer {
#home .timeline .__timeline-arrows { #home .timeline .__timeline-arrows {
width: fit-content; width: fit-content;
margin: auto; margin: auto;
position: relative; margin-top: 0;
top: -115px;
padding-bottom: 2rem; padding-bottom: 2rem;
} }
@media (max-width: 1090px) { @media (max-width: 1090px) {
@ -1115,21 +1117,19 @@ footer {
} }
} }
#home .timeline .__timeline-content { #home .timeline .__timeline-content {
width: 100vw; width: fit-content;
padding-top: 7rem; padding-top: 7rem;
padding-bottom: 2rem; padding-bottom: 2rem;
padding-left: 3rem;
transition: all 1s; transition: all 1s;
} }
#home .timeline .__timeline-content .__paragraphs { #home .timeline .__timeline-content .__paragraphs {
position: relative; position: relative;
display: inline-flex; display: inline-flex;
width: 500px; width: 700px;
height: 1px; height: 1px;
background: black; background: black;
} }
#home .timeline .__timeline-content .__paragraphs:first-of-type {
height: 0px;
}
#home .timeline .__timeline-content .__paragraphs:not(:first-child) { #home .timeline .__timeline-content .__paragraphs:not(:first-child) {
margin-left: 14px; margin-left: 14px;
} }
@ -1137,7 +1137,7 @@ footer {
content: ""; content: "";
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 100%; left: -18px;
bottom: 0; bottom: 0;
width: 17px; width: 17px;
height: 17px; height: 17px;
@ -1151,20 +1151,18 @@ footer {
} }
} }
#home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement { #home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement {
display: flex;
flex-direction: row;
position: absolute; position: absolute;
left: 65%; padding-bottom: 1rem;
left: -18px;
top: -16px; top: -16px;
transform: translateY(-100%); transform: translateY(-100%);
width: 400px; width: 600px;
height: 300px; height: 300px;
font-size: 1rem; font-size: 1rem;
white-space: normal; white-space: normal;
color: black; color: black;
display: flex;
flex-direction: row;
padding-bottom: 1rem;
padding-left: 2rem;
padding-right: 2rem;
} }
@media (max-width: 550px) { @media (max-width: 550px) {
#home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement { #home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement {
@ -1249,7 +1247,8 @@ footer {
border-radius: 5%; border-radius: 5%;
padding: 0.6rem 0.6rem; padding: 0.6rem 0.6rem;
line-height: 1.1; line-height: 1.1;
min-width: 65%; width: fit-content;
min-width: 35%;
} }
@media (max-width: 1090px) { @media (max-width: 1090px) {
#home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .text { #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" id="path148"
d="M 0,0 211.55,177.512" 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" 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 <path
id="path151" id="path151"
d="M 0,0 V -174.775" 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) { function showSlides(index) {
const slides = document.querySelectorAll('.paragraph--type--phase-deroulement'); const slides = document.querySelectorAll('.__paragraphs');
const totalSlides = slides.length; const totalSlides = slides.length;
const visibleSlides = getVisibleSlides(); const visibleSlides = getVisibleSlides();
const maxSlide = totalSlides - visibleSlides + 1; const maxSlide = totalSlides - visibleSlides;
// Adjust the index to ensure it stays within bounds // 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 // Calculate the offset for the transform
const offset = currentSlide * -70 / visibleSlides; 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 { .timeline {
display: flex;
flex-direction: column;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
padding-top: 5rem; padding-top: 2rem;
padding-bottom: 8rem; padding-bottom: 8rem;
height: 950px;
@media(max-width:1090px){ @media(max-width:1090px){
padding-top: 14rem; padding-top: 14rem;
overflow: scroll; overflow: scroll;
@ -35,8 +38,7 @@
.__timeline-arrows{ .__timeline-arrows{
width: fit-content; width: fit-content;
margin: auto; margin: auto;
position: relative; margin-top: 0;
top: -115px;
padding-bottom: 2rem; padding-bottom: 2rem;
@media(max-width:1090px){ @media(max-width:1090px){
top: -211px; top: -211px;
@ -58,19 +60,21 @@
} }
.__timeline-content{ .__timeline-content{
// font-size: 0; // font-size: 0;
width: 100vw; // width: 100vw;
width: fit-content;
padding-top: 7rem; padding-top: 7rem;
padding-bottom: 2rem; padding-bottom: 2rem;
padding-left: 3rem;
transition: all 1s; transition: all 1s;
.__paragraphs{ .__paragraphs{
position: relative; position: relative;
display: inline-flex; display: inline-flex;
width: 500px; width: 700px;
height: 1px; height: 1px;
background: black; background: black;
&:first-of-type{ // &:last-of-type{
height: 0px; // height: 0px;
} // }
// &:last-child { // &:last-child {
// width: 20px; // width: 20px;
// } // }
@ -81,7 +85,7 @@
content: ""; content: "";
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 100%; left: -18px;
bottom: 0; bottom: 0;
width: 17px; width: 17px;
height: 17px; height: 17px;
@ -94,20 +98,23 @@
} }
.paragraph--type--phase-deroulement{ .paragraph--type--phase-deroulement{
display: flex;
flex-direction: row;
position: absolute; position: absolute;
left: 65%; padding-bottom: 1rem;
// left: 65%;
left: -18px;
top: -16px; top: -16px;
transform: translateY(-100%); transform: translateY(-100%);
width: 400px; width: 600px;
height: 300px; height: 300px;
font-size: 1rem; font-size: 1rem;
white-space: normal; white-space: normal;
color: black; color: black;
display: flex;
flex-direction: row; // padding-bottom: 1rem;
padding-bottom: 1rem; // padding-left: 2rem;
padding-left: 2rem; // padding-right: 2rem;
padding-right: 2rem;
@media(max-width:550px){ @media(max-width:550px){
padding-left: 0rem; padding-left: 0rem;
width: 240px; width: 240px;
@ -198,8 +205,8 @@
border-radius: 5%; border-radius: 5%;
padding: 0.6rem 0.6rem; padding: 0.6rem 0.6rem;
line-height: 1.1; line-height: 1.1;
// width: fit-content; width: fit-content;
min-width: 65%; min-width: 35%;
@media(max-width:1090px){ @media(max-width:1090px){
height: 200px; height: 200px;
} }