From cfa848d40dca758250d86f7d1a9d4beca2739893 Mon Sep 17 00:00:00 2001
From: ouidade <ouidade@figureslibres.io>
Date: Thu, 26 Sep 2024 22:52:31 +0200
Subject: [PATCH] calendrier puce

---
 .../dist/assets/css/bundle.css                | 29 ++++++------
 .../src/assets/scss/partials/timeline.scss    | 46 +++++++++++++------
 ...field--config-pages--deroulement.html.twig |  8 ----
 .../paragraph--phase-deroulement.html.twig    |  2 +-
 4 files changed, 48 insertions(+), 37 deletions(-)

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 8918535..ffed547 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
@@ -1165,32 +1165,34 @@ footer {
     height: fit-content;
   }
 }
-#home .__container-deroulement .config_pages--type--deroulement .field_field_phase .timeline .__timeline-content .slick-track.__paragraphs ::before {
-  content: ".";
-}
 #home .__container-deroulement .config_pages--type--deroulement .field_field_phase .timeline .__timeline-content .slick-track .paragraph--type--phase-deroulement {
   display: flex;
   flex-direction: row;
   align-items: center;
   padding-right: 1rem;
-  padding-bottom: 1rem;
 }
 @media (max-width: 500px) {
   #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;
   }
 }
-#home .__container-deroulement .config_pages--type--deroulement .field_field_phase .timeline .__timeline-content .slick-track .paragraph--type--phase-deroulement:before {
-  content: ".";
-  font-size: 4rem;
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%); /* Centrer parfaitement verticalement */
+#home .__container-deroulement .config_pages--type--deroulement .field_field_phase .timeline .__timeline-content .slick-track .paragraph--type--phase-deroulement .border-symbol {
+  align-self: end;
+  font-size: 2.5rem;
+  display: inline-block; /* Permet d'utiliser height */
+  line-height: 0; /* Assure que la hauteur est minimale */
+  transform: translateX(1rem);
 }
-@media (max-width: 550px) {
-  #home .__container-deroulement .config_pages--type--deroulement .field_field_phase .timeline .__timeline-content .slick-track .paragraph--type--phase-deroulement:before {
-    display: none;
+@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;
+    font-size: 2.5rem;
+    display: inline-block;
+    line-height: 0;
+    transform: translateY(22.5rem);
+    padding-right: 3rem;
   }
 }
 #home .__container-deroulement .config_pages--type--deroulement .field_field_phase .timeline .__timeline-content .slick-track .paragraph--type--phase-deroulement .date {
@@ -1273,6 +1275,7 @@ footer {
   width: 41%;
   min-width: 35%;
   height: 300px;
+  margin-bottom: 1rem;
 }
 @media (max-width: 1090px) {
   #home .__container-deroulement .config_pages--type--deroulement .field_field_phase .timeline .__timeline-content .slick-track .paragraph--type--phase-deroulement .text {
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 39bc463..81053f2 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
@@ -41,32 +41,48 @@
                             }
 
                             &.__paragraphs{
-                               ::before{
-                                   content: '.';
-                               } 
+                            //    ::before{
+                            //        content: '\002022';
+                            //    } 
                             }
                             .paragraph--type--phase-deroulement{
                                 display: flex;
                                 flex-direction: row;
                                 align-items: center;
                                 padding-right: 1rem;
-                                padding-bottom: 1rem;
+                                // padding-bottom: 1rem;
                                 @media(max-width:500px){
                                     flex-direction: column;
                                     align-items: baseline;
+                                    padding-bottom: 1rem;
+                                }
+                                .border-symbol{
+                                    align-self: end;
+                                    font-size: 2.5rem;
+                                    display: inline-block; /* Permet d'utiliser height */
+                                    line-height: 0; /* Assure que la hauteur est minimale */
+                                    transform: translateX(1rem);
+                                    @media(max-width:500px){
+                                        align-self: center;
+                                        font-size: 2.5rem;
+                                        display: inline-block;
+                                        line-height: 0;
+                                        transform: translateY(22.5rem);
+                                        padding-right: 3rem;
+                                    }
                                 }
                                 // border-bottom: solid black 1px;
-                                &:before{
-                                    content:".";
-                                    font-size: 4rem;
-                                    position: absolute;
-                                    top: 50%; 
-                                    transform: translateY(-50%); /* Centrer parfaitement verticalement */
-                                    @media(max-width:550px){
-                                        display: none;
-                                    }
+                                // &:before{
+                                //     content:".";
+                                //     font-size: 4rem;
+                                //     position: absolute;
+                                //     top: 50%; 
+                                //     transform: translateY(-50%); /* Centrer parfaitement verticalement */
+                                //     @media(max-width:550px){
+                                //         display: none;
+                                //     }
  
-                                }
+                                // }
                                 
                                 .date{
                                     width: fit-content !important;
@@ -153,7 +169,7 @@
                                     width: 41%;
                                     min-width: 35%;
                                     height: 300px;
-                                   
+                                    margin-bottom: 1rem;
                                     
                                     @media(max-width:1090px){
                                         height: 200px;
diff --git a/web/themes/custom/quartiers_de_demain/templates/field--config-pages--deroulement.html.twig b/web/themes/custom/quartiers_de_demain/templates/field--config-pages--deroulement.html.twig
index 7e93ef9..378c2c7 100644
--- a/web/themes/custom/quartiers_de_demain/templates/field--config-pages--deroulement.html.twig
+++ b/web/themes/custom/quartiers_de_demain/templates/field--config-pages--deroulement.html.twig
@@ -68,14 +68,6 @@
   <div{{ attributes }}>
     <div{{ title_attributes.addClass(title_classes) }}>{{ label }}</div>
     <div class='timeline'>
-      {# <div class="__timeline-arrows">
-        <button id='arrowPrev' class="arrow arrow__prev" aria-label="Previous" type="button"> 
-          {% include active_theme_path() ~ '/dist/assets/img/prev.svg' %}
-        </button>
-        <button id='arrowNext' class="arrow arrow__next" aria-label="Next" type="button">
-          {% include active_theme_path() ~ '/dist/assets/img/next.svg' %}
-        </button>
-      </div> #}
       <div class="__timeline-content">
         {% if multiple %}
         {% endif %}
diff --git a/web/themes/custom/quartiers_de_demain/templates/paragraph--phase-deroulement.html.twig b/web/themes/custom/quartiers_de_demain/templates/paragraph--phase-deroulement.html.twig
index 03a3f78..5abe256 100644
--- a/web/themes/custom/quartiers_de_demain/templates/paragraph--phase-deroulement.html.twig
+++ b/web/themes/custom/quartiers_de_demain/templates/paragraph--phase-deroulement.html.twig
@@ -50,7 +50,7 @@
 {% block paragraph %}
   {# <div{{ attributes.addClass(classes) }}> #}
     <div{{ attributes.addClass(classes).setAttribute('id', 'paragraph-id--' ~ paragraph.id()) }}>
-
+    <span class="border-symbol">&#x2022;</span> <!-- Ajout du symbole -->
 {% block content %}
       {# {{ content }} #}
       <div class="date">