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

css timeline

Browse Source
This commit is contained in:
Ouidade Soussi Chiadmi
2024-07-05 15:35:25 +02:00
parent 48942e3e1d
commit d4172ff07f
19 changed files with 626 additions and 111 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
web/themes/custom/quartiers_de_demain/src/assets/img/grandes_fleches_next.svg Normal file
View File

@@ -0,0 +1,22 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="17.028627mm"
height="34.876175mm"
viewBox="0 0 17.028627 34.876175"
version="1.1"
id="svg1"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<defs
id="defs1" />
<g
id="layer1"
transform="translate(-137.03258,-135.34556)">
<path
style="color:#000000;fill:#000000;stroke-width:0.488961;stroke-linecap:round;stroke-linejoin:round;-inkscape-stroke:none"
d="m 137.65113,135.34577 a 0.48896116,0.48896116 0 0 0 -0.34953,0.13274 0.48896116,0.48896116 0 0 0 -0.02,0.69142 l 15.61906,16.54541 -15.73557,16.68294 a 0.48896116,0.48896116 0 0 0 0.021,0.69046 0.48896116,0.48896116 0 0 0 0.69046,-0.02 l 16.05168,-17.01814 a 0.48901006,0.48901006 0 0 0 0,-0.67042 l -15.93517,-16.88156 a 0.48896116,0.48896116 0 0 0 -0.34189,-0.15281 z"
id="path1" />
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 969 B

22
web/themes/custom/quartiers_de_demain/src/assets/img/grandes_fleches_prev.svg Normal file
View File

@@ -0,0 +1,22 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="17.028627mm"
height="34.876175mm"
viewBox="0 0 17.028627 34.876175"
version="1.1"
id="svg1"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<defs
id="defs1" />
<g
id="layer1"
transform="translate(-137.03258,-135.34556)">
<path
style="color:#000000;fill:#000000;stroke-width:0.488961;stroke-linecap:round;stroke-linejoin:round;-inkscape-stroke:none"
d="m 153.44264,135.34577 a 0.48896116,0.48896116 0 0 1 0.34953,0.13274 0.48896116,0.48896116 0 0 1 0.02,0.69142 l -15.61906,16.54541 15.73557,16.68294 a 0.48896116,0.48896116 0 0 1 -0.021,0.69046 0.48896116,0.48896116 0 0 1 -0.69046,-0.02 L 137.16554,153.0506 a 0.48901006,0.48901006 0 0 1 0,-0.67042 l 15.93517,-16.88156 a 0.48896116,0.48896116 0 0 1 0.34189,-0.15281 z"
id="path1" />
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 967 B

41
web/themes/custom/quartiers_de_demain/src/assets/img/next.svg Normal file
View File

@@ -0,0 +1,41 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
version="1.1"
id="svg1"
width="90.491943"
height="90.492188"
viewBox="0 0 90.491943 90.492186"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<defs
id="defs1">
<clipPath
clipPathUnits="userSpaceOnUse"
id="clipPath390">
<path
d="M 0,0 H 1920 V 9000 H 0 Z"
transform="translate(-1010.0718,-2163.9844)"
id="path390" />
</clipPath>
</defs>
<g
id="g1"
transform="translate(-1301.517,-9024.7618)">
<g
id="g697">
<path
id="path389"
d="M 0,0 C 18.507,0 33.51,15.003 33.51,33.51 33.51,52.016 18.507,67.019 0,67.019 -18.507,67.019 -33.509,52.016 -33.509,33.51 -33.509,15.003 -18.507,0 0,0 Z"
style="fill:none;stroke:#000000;stroke-width:0.85;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
transform="matrix(1.3333333,0,0,-1.3333333,1346.7623,9114.6875)"
clip-path="url(#clipPath390)" />
<path
id="path391"
d="M 0,0 9.997,-8.944 0,-17.887"
style="fill:none;stroke:#000000;stroke-width:0.85;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
transform="matrix(1.3333333,0,0,-1.3333333,1342.4113,9058.0833)" />
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

41
web/themes/custom/quartiers_de_demain/src/assets/img/prev.svg Normal file
View File

@@ -0,0 +1,41 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
version="1.1"
id="svg1"
width="90.490723"
height="90.492188"
viewBox="0 0 90.490723 90.492186"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<defs
id="defs1">
<clipPath
clipPathUnits="userSpaceOnUse"
id="clipPath393">
<path
d="M 0,0 H 1920 V 9000 H 0 Z"
transform="translate(-918.03445,-2163.9844)"
id="path393" />
</clipPath>
</defs>
<g
id="g1"
transform="translate(-1178.8005,-9024.7618)">
<g
id="g696">
<path
id="path392"
d="m 0,0 c -18.507,0 -33.509,15.003 -33.509,33.51 0,18.506 15.002,33.509 33.509,33.509 18.507,0 33.509,-15.003 33.509,-33.509 C 33.509,15.003 18.507,0 0,0 Z"
style="fill:none;stroke:#000000;stroke-width:0.85;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
transform="matrix(1.3333333,0,0,-1.3333333,1224.0459,9114.6875)"
clip-path="url(#clipPath393)" />
<path
id="path394"
d="M 0,0 -9.997,-8.944 0,-17.887"
style="fill:none;stroke:#000000;stroke-width:0.85;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
transform="matrix(1.3333333,0,0,-1.3333333,1228.3967,9058.0833)" />
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

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

@@ -95,36 +95,39 @@ $( document ).ready(function() {
// slideshow home
////////////////// Timeline ///////////////////////
(function($, window) {
console.log('hello slick')
$(document).ready(function(){
$('.field_field_phase .__deroulement-container .paragraph--type--phase-deroulement').slick({
slidesToShow: 1,
// slidesToScroll: 1,
dots: false,
arrows: true,
centerMode: true,
adaptiveHeight: true,
// centerPadding: '100px',
responsive: [
{
breakpoint: 810,
settings: {
slidesToShow: 1,
adaptiveHeight: true,
arrows: false,
draggable: true,
centerMode: true,
}
}]
});
console.log('salut slick home');
// let currentSlide = 0;
// function showSlides(index) {
// const slides = document.querySelectorAll('.__timeline-content');
// const totalSlides = slides.length;
// const visibleSlides = 3; // Number of slides to show at a time
// const maxSlide = totalSlides - visibleSlides;
// // Adjust the index to ensure it stays within bounds
// currentSlide = Math.max(0, Math.min(index, maxSlide));
// // const offset = currentSlide * -40; // Calculate the offset for the transform
// document.querySelector('.paragraph--type--phase-deroulement').style.transform = `translateX(50%)`;
// // Enable/disable arrows based on the current slide
// document.querySelector('.arrow__prev').disabled = currentSlide === 0;
// document.querySelector('.arrow__next').disabled = currentSlide === maxSlide;
// }
// function prevSlide() {
// showSlides(currentSlide - 1);
// }
// function nextSlide() {
// showSlides(currentSlide + 1);
// }
// // Initialize
// showSlides(currentSlide);
});
});

77
web/themes/custom/quartiers_de_demain/src/assets/scss/pages/home.scss
View File

@@ -65,7 +65,7 @@
p{
padding-right: 2rem;
padding-bottom: 1rem;
width: 25%;
width: 30%;
display: flex;
flex-direction: column;
&:nth-of-type(1)::before{
@@ -114,7 +114,7 @@
}
#paragraph-id--6{
#paragraph-id--6{ /////// quartier 2030
display: flex;
flex-direction: column;
margin: auto;
@@ -221,7 +221,6 @@
}
}
}
#paragraph-id--9{display: none;}
}
.paragraph--type--static-parts:not(#paragraph-id--7){
@@ -230,44 +229,44 @@
}
}
.config_pages--type--deroulement{
.field_field_phase{
.__deroulement-container{
display: flex;
flex-direction: row;
.paragraph--type--phase-deroulement{
width: 30%;
display: grid;
grid-template-columns: auto auto;
grid-template-rows: auto auto auto;
.field_field_date_de_jour{
grid-row: 1 /span 3;
grid-column: 1;
}
.field_field_date_de_moi{
grid-row: 2 /span 3;
grid-column: 1;
// .config_pages--type--deroulement{
// .field_field_phase{
// .__timeline{
// display: flex;
// flex-direction: row;
// .paragraph--type--phase-deroulement{
// width: 30%;
// display: grid;
// grid-template-columns: auto auto;
// grid-template-rows: auto auto auto;
// .field_field_date_de_jour{
// grid-row: 1 /span 3;
// grid-column: 1;
// }
// .field_field_date_de_moi{
// grid-row: 2 /span 3;
// grid-column: 1;
}
.field_field_date_de_annee{
grid-row: 3;
grid-column: 1;
}
.field_field_titre{
grid-column: 2;
grid-row: 1;
}
.field_field_description{
grid-row: 2 /span 3;
grid-column: 2;
}
}
#paragraph-id--16{
// }
// .field_field_date_de_annee{
// grid-row: 3;
// grid-column: 1;
// }
// .field_field_titre{
// grid-column: 2;
// grid-row: 1;
// }
// .field_field_description{
// grid-row: 2 /span 3;
// grid-column: 2;
// }
// }
// #paragraph-id--16{
}
}
// }
// }
}
}
// }
// }
}

96
web/themes/custom/quartiers_de_demain/src/assets/scss/partials/timeline.scss Normal file
View File

@@ -0,0 +1,96 @@
/* TIMELINE
–––––––––––––––––––––––––––––––––––––––––––––––––– */
#home{
* { box-sizing: border-box; }
.timeline {
white-space: nowrap;
overflow: hidden;
padding-top: 10rem;
padding-bottom: 10rem;
.__timeline-arrows{
width: fit-content;
margin: auto;
position: relative;
top: -220px;
button{
background-color: white;
border: none;
&:hover{
opacity: 0.5;
} }
}
.__timeline-content{
// font-size: 0;
width: 100vw;
padding: 250px 0;
transition: all 1s;
.__paragraphs{
position: relative;
display: inline-block;
width: 500px;
height: 1px;
background: black;
&:first-of-type{
height: 0px;
}
&:last-child {
width: 20px;
}
&:not(:first-child) {
margin-left: 14px;
}
&:not(:last-child)::after {
content: "";
position: absolute;
top: 50%;
left: 101%;
bottom: 0;
width: 12px;
height: 12px;
transform: translateY(-50%);
border-radius: 50%;
background: black;
}
.paragraph--type--phase-deroulement{
position: absolute;
left: 65%;
top: -16px;
transform: translateY(-100%);
width: 400px;
height: 300px;
font-size: 1rem;
white-space: normal;
color: black;
display: flex;
flex-direction: row;
padding-bottom: 1rem;
.date{
width: 50%;
.moi-annee{
display: inline-flex;
font-size: 0.8rem;
.field_field_date_de_moi{
padding-right: 0.5rem;
text-transform: uppercase;
}
}
}
.text{
border: solid $blue_QDD 1px;
border-radius: 5%;
padding: 0.6rem 0.6rem;
width: 45%;
.field_field_description{
.field--label-above{display: none;}
}
}
}
}
}
}
}

2
web/themes/custom/quartiers_de_demain/src/assets/scss/quartiers_de_demain.scss
View File

@@ -27,6 +27,8 @@
@import "partials/animation-logo";
@import "partials/slick-theme";
@import "partials/slick";
@import "partials/timeline";
// @import "partials/slick_custom";