MODIF CONFIGS : view étape l'icône sur la map n'est plus hardcodée

web/themes/custom/caravane/assets/js/utils/process-clickable-elements.js

@@ -14,9 +14,9 @@ function processEtapeLinks() {
         etape_link.addEventListener('click', (e) => e.preventDefault());
         const couleur = etape_link.dataset.couleur;
         li.dataset.href = etape_link.attributes.href.value;
-        const iconElements = li.querySelectorAll('.icone-arret > div');
+        const iconElements = li.querySelectorAll('.icone-arret');
         for (let element of iconElements) {
-          element.style.backgroundColor = couleur;
+            element.style.backgroundColor = couleur;
         }
     });
 
@@ -46,16 +46,10 @@ function processMapIcons() {
 
         const hrefContainer = icon.querySelector('.url');
         icon.dataset.href = hrefContainer.innerText;
-        hrefContainer.style.display = "none";
 
         const colorContainer = icon.querySelector('.couleur');
         let color = colorContainer.innerText;
-        colorContainer.style.display = "none";
-
-        const iconElements = icon.querySelectorAll('div');
-        for (let iconElement of iconElements) {
-          iconElement.style.backgroundColor = color;
-        }
+        icon.style.backgroundColor = color;
 
         icon.addEventListener('mouseenter', () => {
             icon.style.transform = `${icon.style.transform} scale(1.1)`;

web/themes/custom/caravane/assets/pictograms/hexagone.svg

@@ -0,0 +1 @@
+<svg width="20" xmlns="http://www.w3.org/2000/svg" height="24" fill="none"><path d="M19.996,13.728L19.992,17.434L9.964,24.000L0.000,17.500L0.000,13.541L0.000,10.459L0.000,6.500L9.964,0.000L19.992,6.566L19.996,10.272L20.000,10.272L19.998,12.000L19.996,13.728ZL19.996,13.728ZL19.998,12.000" style="fill: rgb(0, 0, 0); fill-opacity: 1;" class="fills"/></svg>

web/themes/custom/caravane/assets/scss/main.scss

@@ -343,27 +343,15 @@ body{
                   left: 0;
                 }
                 .leaflet-map-divicon {
-                  width: 10px;
-                  height: 30px;
-                  display: flex;
-                  flex-direction: column;
-                  justify-content: center;
-                  align-items: center;
+                  width: 20px !important;
+                  height: 20px !important;
                   transition: transform 0.3s ease-out;
-                  > div {
-                    background-color: red;
-                    display: block;
-                    width: 20px;
-                    height: 10px;
-                    }
-                  > div:first-of-type {
-                    height: 8px;
-                    clip-path: polygon(0 0, 100% 0, 50% 100%);
-                    transform: rotate(180deg);
-                  }
-                  > div:nth-of-type(3) {
-                    height: 8px;
-                    clip-path: polygon(0 0, 100% 0, 50% 100%);
+                  transform-origin: center;
+                  mask-image: url("/themes/custom/caravane/assets/pictograms/hexagone.svg");
+                  mask-size: contain;
+                  mask-repeat: no-repeat;
+                  > .url, .couleur {
+                    display: none;
                   }
                 }
               }
@@ -689,24 +677,12 @@ body{
                       }
                     }
                     > .icone-arret {
-                      width: 10px;
-                      height: 30px;
-                      display: flex;
-                      flex-direction: column;
-                      justify-content: center;
-                      align-items: center;
-                      > div {
-                        display: block;
-                        width: 20px;
-                        height: 10px;
-                        &:first-of-type, &:last-of-type {
-                          height: 8px;
-                          clip-path: polygon(0 0, 100% 0, 50% 100%);
-                        }
-                        &:first-of-type {
-                          transform: rotate(180deg);
-                        }
-                      }
+                      min-width: 20px;
+                      height: 20px;
+                      display: block;
+                      mask-image: url("/themes/custom/caravane/assets/pictograms/hexagone.svg");
+                      mask-size: contain;
+                      mask-repeat: no-repeat;
                     }
                   }
                   > li:hover {
@@ -926,6 +902,8 @@ body{
                     }
                   }
                   > main {
+                    z-index: 1;
+                    position: relative;
                     width: 100%;
                     padding: 0 $modale-x-padding;
                     padding-bottom: 5vh;
@@ -1232,6 +1210,7 @@ body{
                     }
                   }
                   > footer {
+                    position: relative;
                     z-index: 0;
                     .pattern-bottom {
                       mask-image: linear-gradient(to top, rgba(0,0,0,1), rgba(0,0,0,0));

web/themes/custom/caravane/templates/views-view-fields--block-2--liste-etapes.html.twig

@@ -55,7 +55,4 @@
     {%- endfor %}
 </div>
 <div class="icone-arret">
-    <div></div>
-    <div></div>
-    <div></div>
 </div>