From ff34737ccbb67802308f4ac9060871ad7cd10f06 Mon Sep 17 00:00:00 2001
From: ouidade <ouidade@figureslibres.io>
Date: Tue, 12 Nov 2024 15:23:22 +0100
Subject: [PATCH] css timeline

---
 .../assets/css/carte-interactive-qdd.css      |   2 +-
 .../assets/img/noun-arrow-to-right.png        | Bin 0 -> 887 bytes
 .../assets/img/noun-arrow-to-right.svg        |  34 ++---------------
 .../dist/assets/css/bundle.css                |  36 ++++++++++++++++--
 .../scss/partials/actu-caroussel-home.scss    |   4 +-
 .../src/assets/scss/partials/slick-theme.scss |  12 +++++-
 .../src/assets/scss/partials/timeline.scss    |  14 ++++++-
 7 files changed, 63 insertions(+), 39 deletions(-)
 create mode 100644 web/modules/custom/q2d_mod/assets/img/noun-arrow-to-right.png

diff --git a/web/modules/custom/q2d_mod/assets/css/carte-interactive-qdd.css b/web/modules/custom/q2d_mod/assets/css/carte-interactive-qdd.css
index 443b799..c1540d5 100644
--- a/web/modules/custom/q2d_mod/assets/css/carte-interactive-qdd.css
+++ b/web/modules/custom/q2d_mod/assets/css/carte-interactive-qdd.css
@@ -74,7 +74,7 @@
     content: url("../img/noun-arrow-to-right.svg");
     padding-right: 0.2rem;
     padding-left: 0.2rem;
-    padding-top: 1rem;
+    padding-top: 0.5rem;
   }
   #popup-content {
     width: 300px;
diff --git a/web/modules/custom/q2d_mod/assets/img/noun-arrow-to-right.png b/web/modules/custom/q2d_mod/assets/img/noun-arrow-to-right.png
new file mode 100644
index 0000000000000000000000000000000000000000..610673182fb33c4002dbc09d7e44d0467336069a
GIT binary patch
literal 887
zcmV--1Bm>IP)<h;3K|Lk000e1NJLTq0021v001ut1^@s6S(jo100009a7bBm001r{
z001r{0eGc9b^rhX8FWQhbW?9;ba!ELWdL_~cP?peYja~^aAhuUa%Y?FJQ@H10|ZG#
zK~!jg-P+lUTtyVe@y`S`iNqyFqqs!`aYJ+j!42HvsN}^!9%2F^p!g^e@(=iszrhzp
zpA^LH$r$4XDscggC=v|_ibkUtmkFq-IX;}a>6uO(d%7>vb>~3Q{p+qeb-$cjb*oO@
ziHI;}I}f{YGB)DfwmVqTw!<N83YTLIUdDB8cTfZ5PJCOwpN3tSY_o$JAiu|LI8gLT
zypC(z>YxTl*pJ&KFq|%L-7DL0UJE3AF30CjMV}=jdc~-YYl4JNuoj1kUM)c{8^vjD
zkg!*R{#^9g@)2|Kunud4gpaTe(?y?;H*nD~&T55(J-7#li@p$V%IE34tY%1f2lwLl
zqSwe<_uTn7sT~qtlc0YTeTkfm&KcA}7a-vktjC{4Us`@UbCAYefg~3P_u;RiufnTX
z^?wb!1PL!-6aFsxYB@$%&ef=Eknk)v<Da4@@e)q`uLfO&glF&ojud^p+|8VFyvkjL
zgeUPJnqB{mGNLQ`D|Q(Y9>=yB`er$9m(Qvd5sRU0i`lj-B9=A(kNe`<EZh4)cSgk0
z#Re%N9_a&pJ|a$>h=?87j*}K_BrU8xHW3lijx!@IB0IbUkLs-;7Nb2k?lH6=lh3#>
zs?G9nAK=l)$ha@8t@2PG;O>Z6-uyrAi)*9Y9}!1p0KOd&D`wW2h#32U&nUK4F72A-
z=^osrmjHuKLvFzndVufA<n(X-6}t+#0Z-$EqW9tsy`=Ok>*6kCJ)Y77{MhWQ`!UwF
zNZySXv9#!YxD^NIYSg7jPRYGu1NenJ37Zp;?m(`U5nNXEetD+(-5`y-aJ$|l(~-?4
z;w#)zJ_oYeBYA^NP&I&G%Lon(NZpZ~lt%<jPW2lZ!7u0QsMbhcBeUZT;6dDJ2tewD
zY|{T{6#avoMfVNsur|o%Ag4Ls_))H8J{!epO_2RZa=*xj|EHrmt_8CHaP?O?20v`W
zc@4AcYJ4D%%Spf~yx&#_HAHfq9^kZmPoOnG>WJh8dT&W?##?Q7@Gp{>R&6k$j~xI2
N002ovPDHLkV1jpqnjQcE

literal 0
HcmV?d00001

diff --git a/web/modules/custom/q2d_mod/assets/img/noun-arrow-to-right.svg b/web/modules/custom/q2d_mod/assets/img/noun-arrow-to-right.svg
index 3084e74..e6e842e 100644
--- a/web/modules/custom/q2d_mod/assets/img/noun-arrow-to-right.svg
+++ b/web/modules/custom/q2d_mod/assets/img/noun-arrow-to-right.svg
@@ -2,44 +2,18 @@
 <!-- Created with Inkscape (http://www.inkscape.org/) -->
 
 <svg
-   width="35px"
-   height="35px"
-   viewBox="0 0 10.531931 10.531931"
+   width="18.174984"
+   height="14.947381"
+   viewBox="0 0 5.4690765 4.497851"
    version="1.1"
    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: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
      id="defs1" />
   <g
-     inkscape:label="Calque 1"
-     inkscape:groupmode="layer"
      id="layer1"
-     transform="translate(-99.747912,-143.13958)">
-  
+     transform="translate(-102.27891,-146.15662)">
     <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"
        id="path2-2"
diff --git a/web/themes/custom/quartiers_de_demain/dist/assets/css/bundle.css b/web/themes/custom/quartiers_de_demain/dist/assets/css/bundle.css
index a7cb5d0..8ef2f70 100644
--- a/web/themes/custom/quartiers_de_demain/dist/assets/css/bundle.css
+++ b/web/themes/custom/quartiers_de_demain/dist/assets/css/bundle.css
@@ -938,6 +938,11 @@ footer {
 .slick-prev {
   left: 45%;
 }
+@media (min-width: 1480px) {
+  .slick-prev {
+    left: 47%;
+  }
+}
 @media (max-width: 1080px) {
   .slick-prev {
     left: 45%;
@@ -945,7 +950,12 @@ footer {
 }
 @media (max-width: 510px) {
   .slick-prev {
-    right: 39%;
+    left: 39%;
+  }
+}
+@media (max-width: 310px) {
+  .slick-prev {
+    left: 54%;
   }
 }
 [dir=rtl] .slick-prev {
@@ -985,6 +995,11 @@ footer {
     right: 45%;
   }
 }
+@media (max-width: 390px) {
+  .slick-next {
+    right: 42%;
+  }
+}
 [dir=rtl] .slick-next {
   left: -25px;
   right: auto;
@@ -1188,10 +1203,11 @@ footer {
   margin: auto;
   padding-top: 4rem;
   font-size: 1.7rem;
+  padding-left: 0.5rem;
 }
 #home .__container-deroulement .config_pages--type--deroulement {
   height: 550px;
-  margin-top: 4.5rem;
+  margin-top: 3.5rem;
 }
 #home .__container-deroulement .config_pages--type--deroulement .field_field_phase {
   height: 100%;
@@ -1219,11 +1235,12 @@ footer {
   align-items: center;
   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 {
     flex-direction: column;
     align-items: baseline;
     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 {
@@ -1233,6 +1250,11 @@ footer {
   line-height: 0; /* Assure que la hauteur est minimale */
   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) {
   #home .__container-deroulement .config_pages--type--deroulement .field_field_phase .timeline .__timeline-content .slick-track .paragraph--type--phase-deroulement .border-symbol {
     align-self: center;
@@ -1243,6 +1265,11 @@ footer {
     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 {
   width: fit-content !important;
   display: flex;
@@ -1365,11 +1392,12 @@ footer {
 }
 #actus-caroussel h2 {
   width: fit-content;
-  padding-bottom: 1.5rem;
+  padding-bottom: 0.5rem;
   margin-top: 4rem;
   margin-bottom: 3rem;
   font-size: 1.7rem;
   font-family: "gilroy-semibold";
+  padding-left: 0.5rem;
 }
 #actus-caroussel .content-actus .view {
   display: flex;
diff --git a/web/themes/custom/quartiers_de_demain/src/assets/scss/partials/actu-caroussel-home.scss b/web/themes/custom/quartiers_de_demain/src/assets/scss/partials/actu-caroussel-home.scss
index 4b9b316..1cd335d 100644
--- a/web/themes/custom/quartiers_de_demain/src/assets/scss/partials/actu-caroussel-home.scss
+++ b/web/themes/custom/quartiers_de_demain/src/assets/scss/partials/actu-caroussel-home.scss
@@ -5,11 +5,13 @@
     padding-bottom: 6rem;
     h2{
         width: fit-content;
-        padding-bottom: 1.5rem;
+        padding-bottom: 0.5rem;
         margin-top: 4rem;
         margin-bottom: 3rem;
         font-size: 1.7rem;
         font-family: 'gilroy-semibold';
+        padding-left: 0.5rem;
+
     }
     .content-actus{
         .view{
diff --git a/web/themes/custom/quartiers_de_demain/src/assets/scss/partials/slick-theme.scss b/web/themes/custom/quartiers_de_demain/src/assets/scss/partials/slick-theme.scss
index bc1a8c7..c2ed29e 100644
--- a/web/themes/custom/quartiers_de_demain/src/assets/scss/partials/slick-theme.scss
+++ b/web/themes/custom/quartiers_de_demain/src/assets/scss/partials/slick-theme.scss
@@ -114,11 +114,17 @@ $slick-opacity-not-active: 0.25 !default;
 
 .slick-prev {
     left: 45%;
+    @media(min-width:1480px){
+        left: 47%;
+    }
     @media(max-width:1080px){
         left: 45%;
     }
     @media(max-width:510px){
-        right: 39%;
+        left: 39%;
+    }
+    @media(max-width:310px){
+        left: 54%;
     }
     [dir="rtl"] & {
         left: auto;
@@ -137,6 +143,7 @@ $slick-opacity-not-active: 0.25 !default;
                 left: 45%;
                 transform: scale(0.8);
             }
+            
 
         }
     }
@@ -150,6 +157,9 @@ $slick-opacity-not-active: 0.25 !default;
     @media(max-width:510px){
         right: 45%;
     }
+    @media(max-width:390px){
+        right: 42%;
+    }
     [dir="rtl"] & {
         left: -25px;
         right: auto;
diff --git a/web/themes/custom/quartiers_de_demain/src/assets/scss/partials/timeline.scss b/web/themes/custom/quartiers_de_demain/src/assets/scss/partials/timeline.scss
index c57b6c2..bbeea6e 100644
--- a/web/themes/custom/quartiers_de_demain/src/assets/scss/partials/timeline.scss
+++ b/web/themes/custom/quartiers_de_demain/src/assets/scss/partials/timeline.scss
@@ -19,11 +19,12 @@
             margin: auto;
             padding-top: 4rem;
             font-size: 1.7rem;
+            padding-left: 0.5rem;
 
         }
         .config_pages--type--deroulement{
             height: 550px;
-            margin-top: 4.5rem;
+            margin-top: 3.5rem;
             .field_field_phase{
                 height: 100%;
                 .timeline{
@@ -51,10 +52,11 @@
                                 align-items: center;
                                 padding-right: 1rem;
                                 // padding-bottom: 1rem;
-                                @media(max-width:500px){
+                                @media(max-width:1100px){
                                     flex-direction: column;
                                     align-items: baseline;
                                     padding-bottom: 1rem;
+                                    padding-left: 4rem;
                                 }
                                 .border-symbol{
                                     align-self: end;
@@ -62,6 +64,10 @@
                                     display: inline-block; /* Permet d'utiliser height */
                                     line-height: 0; /* Assure que la hauteur est minimale */
                                     transform: translateX(1rem);
+                                    @media(max-width:1100px){
+                                        transform: translateY(18.6rem);
+
+                                    }
                                     @media(max-width:500px){
                                         align-self: center;
                                         font-size: 2.5rem;
@@ -70,6 +76,10 @@
                                         transform: translateY(22.5rem);
                                         padding-right: 3rem;
                                     }
+                                    @media(max-width:810px){
+                                        transform: translateY(21.2rem);
+
+                                    }
                                 }
                                 // border-bottom: solid black 1px;
                                 // &:before{