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

css timeline

This commit is contained in:
ouidade 2024-11-12 15:23:22 +01:00
parent 8c9c666444
commit ff34737ccb
7 changed files with 63 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/modules/custom/q2d_mod/assets/css/carte-interactive-qdd.css
View File

@ -74,7 +74,7 @@
content: url("../img/noun-arrow-to-right.svg"); content: url("../img/noun-arrow-to-right.svg");
padding-right: 0.2rem; padding-right: 0.2rem;
padding-left: 0.2rem; padding-left: 0.2rem;
padding-top: 1rem; padding-top: 0.5rem;
} }
#popup-content { #popup-content {
width: 300px; width: 300px;

BIN
web/modules/custom/q2d_mod/assets/img/noun-arrow-to-right.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 887 B

34
web/modules/custom/q2d_mod/assets/img/noun-arrow-to-right.svg
View File

@ -2,44 +2,18 @@
<!-- Created with Inkscape (http://www.inkscape.org/) --> <!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg <svg
width="35px" width="18.174984"
height="35px" height="14.947381"
viewBox="0 0 10.531931 10.531931" viewBox="0 0 5.4690765 4.497851"
version="1.1" version="1.1"
id="svg1" id="svg1"
inkscape:version="1.3.2 (091e20ef0f, 2023-11-25, custom)"
sodipodi:docname="noun-arrow-to-right.svg"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg"> xmlns:svg="http://www.w3.org/2000/svg">
<sodipodi:namedview
id="namedview1"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:showpageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
inkscape:document-units="mm"
inkscape:zoom="0.86234568"
inkscape:cx="20.293486"
inkscape:cy="19.713672"
inkscape:window-width="1920"
inkscape:window-height="1172"
inkscape:window-x="1920"
inkscape:window-y="0"
inkscape:window-maximized="1"
inkscape:current-layer="layer1" />
<defs <defs
id="defs1" /> id="defs1" />
<g <g
inkscape:label="Calque 1"
inkscape:groupmode="layer"
id="layer1" id="layer1"
transform="translate(-99.747912,-143.13958)"> transform="translate(-102.27891,-146.15662)">
<path <path
d="m 105.44397,146.39759 1.82265,1.86476 h -4.84236 a 0.14436835,0.14436835 0 1 0 0,0.28873 h 4.84236 l -1.82265,1.86476 a 0.14436835,0.14436835 0 0 0 0,0.19851 0.1503837,0.1503837 0 0 0 0.20452,0 l 2.06326,-2.10537 a 0.1624144,0.1624144 0 0 0 0,-0.20452 l -2.06326,-2.10538 a 0.14436835,0.14436835 0 0 0 -0.20452,0 0.14436835,0.14436835 0 0 0 0,0.19851 z" d="m 105.44397,146.39759 1.82265,1.86476 h -4.84236 a 0.14436835,0.14436835 0 1 0 0,0.28873 h 4.84236 l -1.82265,1.86476 a 0.14436835,0.14436835 0 0 0 0,0.19851 0.1503837,0.1503837 0 0 0 0.20452,0 l 2.06326,-2.10537 a 0.1624144,0.1624144 0 0 0 0,-0.20452 l -2.06326,-2.10538 a 0.14436835,0.14436835 0 0 0 -0.20452,0 0.14436835,0.14436835 0 0 0 0,0.19851 z"
id="path2-2" id="path2-2"

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.7 KiB

After

Width:  |  Height:  |  Size: 871 B

36
web/themes/custom/quartiers_de_demain/dist/assets/css/bundle.css vendored
View File

@ -938,6 +938,11 @@ footer {
.slick-prev { .slick-prev {
left: 45%; left: 45%;
} }
@media (min-width: 1480px) {
.slick-prev {
left: 47%;
}
}
@media (max-width: 1080px) { @media (max-width: 1080px) {
.slick-prev { .slick-prev {
left: 45%; left: 45%;
@ -945,7 +950,12 @@ footer {
} }
@media (max-width: 510px) { @media (max-width: 510px) {
.slick-prev { .slick-prev {
right: 39%; left: 39%;
}
}
@media (max-width: 310px) {
.slick-prev {
left: 54%;
} }
} }
[dir=rtl] .slick-prev { [dir=rtl] .slick-prev {
@ -985,6 +995,11 @@ footer {
right: 45%; right: 45%;
} }
} }
@media (max-width: 390px) {
.slick-next {
right: 42%;
}
}
[dir=rtl] .slick-next { [dir=rtl] .slick-next {
left: -25px; left: -25px;
right: auto; right: auto;
@ -1188,10 +1203,11 @@ footer {
margin: auto; margin: auto;
padding-top: 4rem; padding-top: 4rem;
font-size: 1.7rem; font-size: 1.7rem;
padding-left: 0.5rem;
} }
#home .__container-deroulement .config_pages--type--deroulement { #home .__container-deroulement .config_pages--type--deroulement {
height: 550px; height: 550px;
margin-top: 4.5rem; margin-top: 3.5rem;
} }
#home .__container-deroulement .config_pages--type--deroulement .field_field_phase { #home .__container-deroulement .config_pages--type--deroulement .field_field_phase {
height: 100%; height: 100%;
@ -1219,11 +1235,12 @@ footer {
align-items: center; align-items: center;
padding-right: 1rem; padding-right: 1rem;
} }
@media (max-width: 500px) { @media (max-width: 1100px) {
#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 {
flex-direction: column; flex-direction: column;
align-items: baseline; align-items: baseline;
padding-bottom: 1rem; padding-bottom: 1rem;
padding-left: 4rem;
} }
} }
#home .__container-deroulement .config_pages--type--deroulement .field_field_phase .timeline .__timeline-content .slick-track .paragraph--type--phase-deroulement .border-symbol { #home .__container-deroulement .config_pages--type--deroulement .field_field_phase .timeline .__timeline-content .slick-track .paragraph--type--phase-deroulement .border-symbol {
@ -1233,6 +1250,11 @@ footer {
line-height: 0; /* Assure que la hauteur est minimale */ line-height: 0; /* Assure que la hauteur est minimale */
transform: translateX(1rem); transform: translateX(1rem);
} }
@media (max-width: 1100px) {
#home .__container-deroulement .config_pages--type--deroulement .field_field_phase .timeline .__timeline-content .slick-track .paragraph--type--phase-deroulement .border-symbol {
transform: translateY(18.6rem);
}
}
@media (max-width: 500px) { @media (max-width: 500px) {
#home .__container-deroulement .config_pages--type--deroulement .field_field_phase .timeline .__timeline-content .slick-track .paragraph--type--phase-deroulement .border-symbol { #home .__container-deroulement .config_pages--type--deroulement .field_field_phase .timeline .__timeline-content .slick-track .paragraph--type--phase-deroulement .border-symbol {
align-self: center; align-self: center;
@ -1243,6 +1265,11 @@ footer {
padding-right: 3rem; padding-right: 3rem;
} }
} }
@media (max-width: 810px) {
#home .__container-deroulement .config_pages--type--deroulement .field_field_phase .timeline .__timeline-content .slick-track .paragraph--type--phase-deroulement .border-symbol {
transform: translateY(21.2rem);
}
}
#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;
display: flex; display: flex;
@ -1365,11 +1392,12 @@ footer {
} }
#actus-caroussel h2 { #actus-caroussel h2 {
width: fit-content; width: fit-content;
padding-bottom: 1.5rem; padding-bottom: 0.5rem;
margin-top: 4rem; margin-top: 4rem;
margin-bottom: 3rem; margin-bottom: 3rem;
font-size: 1.7rem; font-size: 1.7rem;
font-family: "gilroy-semibold"; font-family: "gilroy-semibold";
padding-left: 0.5rem;
} }
#actus-caroussel .content-actus .view { #actus-caroussel .content-actus .view {
display: flex; display: flex;

4
web/themes/custom/quartiers_de_demain/src/assets/scss/partials/actu-caroussel-home.scss
View File

@ -5,11 +5,13 @@
padding-bottom: 6rem; padding-bottom: 6rem;
h2{ h2{
width: fit-content; width: fit-content;
padding-bottom: 1.5rem; padding-bottom: 0.5rem;
margin-top: 4rem; margin-top: 4rem;
margin-bottom: 3rem; margin-bottom: 3rem;
font-size: 1.7rem; font-size: 1.7rem;
font-family: 'gilroy-semibold'; font-family: 'gilroy-semibold';
padding-left: 0.5rem;
} }
.content-actus{ .content-actus{
.view{ .view{

12
web/themes/custom/quartiers_de_demain/src/assets/scss/partials/slick-theme.scss
View File

@ -114,11 +114,17 @@ $slick-opacity-not-active: 0.25 !default;
.slick-prev { .slick-prev {
left: 45%; left: 45%;
@media(min-width:1480px){
left: 47%;
}
@media(max-width:1080px){ @media(max-width:1080px){
left: 45%; left: 45%;
} }
@media(max-width:510px){ @media(max-width:510px){
right: 39%; left: 39%;
}
@media(max-width:310px){
left: 54%;
} }
[dir="rtl"] & { [dir="rtl"] & {
left: auto; left: auto;
@ -137,6 +143,7 @@ $slick-opacity-not-active: 0.25 !default;
left: 45%; left: 45%;
transform: scale(0.8); transform: scale(0.8);
} }
} }
} }
@ -150,6 +157,9 @@ $slick-opacity-not-active: 0.25 !default;
@media(max-width:510px){ @media(max-width:510px){
right: 45%; right: 45%;
} }
@media(max-width:390px){
right: 42%;
}
[dir="rtl"] & { [dir="rtl"] & {
left: -25px; left: -25px;
right: auto; right: auto;

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

@ -19,11 +19,12 @@
margin: auto; margin: auto;
padding-top: 4rem; padding-top: 4rem;
font-size: 1.7rem; font-size: 1.7rem;
padding-left: 0.5rem;
} }
.config_pages--type--deroulement{ .config_pages--type--deroulement{
height: 550px; height: 550px;
margin-top: 4.5rem; margin-top: 3.5rem;
.field_field_phase{ .field_field_phase{
height: 100%; height: 100%;
.timeline{ .timeline{
@ -51,10 +52,11 @@
align-items: center; align-items: center;
padding-right: 1rem; padding-right: 1rem;
// padding-bottom: 1rem; // padding-bottom: 1rem;
@media(max-width:500px){ @media(max-width:1100px){
flex-direction: column; flex-direction: column;
align-items: baseline; align-items: baseline;
padding-bottom: 1rem; padding-bottom: 1rem;
padding-left: 4rem;
} }
.border-symbol{ .border-symbol{
align-self: end; align-self: end;
@ -62,6 +64,10 @@
display: inline-block; /* Permet d'utiliser height */ display: inline-block; /* Permet d'utiliser height */
line-height: 0; /* Assure que la hauteur est minimale */ line-height: 0; /* Assure que la hauteur est minimale */
transform: translateX(1rem); transform: translateX(1rem);
@media(max-width:1100px){
transform: translateY(18.6rem);
}
@media(max-width:500px){ @media(max-width:500px){
align-self: center; align-self: center;
font-size: 2.5rem; font-size: 2.5rem;
@ -70,6 +76,10 @@
transform: translateY(22.5rem); transform: translateY(22.5rem);
padding-right: 3rem; padding-right: 3rem;
} }
@media(max-width:810px){
transform: translateY(21.2rem);
}
} }
// border-bottom: solid black 1px; // border-bottom: solid black 1px;
// &:before{ // &:before{