taille path

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

@@ -3,7 +3,7 @@
   src: url('fonts/Gilroy/gilroy-semibold-webfont.woff') format('woff');
 }
 #sites-map-container {
-  background-color: #c3cef2;
+  background-color: #cecfcc;
   text-align: center;
 }
 /* #sites-map-container .circle {

web/modules/custom/q2d_mod/assets/js/carte-interactive-qdd.js

@@ -1,22 +1,19 @@
-// Sélection des éléments au préalable pour éviter de les rechercher plusieurs fois
+// Sélection des éléments principaux
 const svgElement = document.querySelector('#sites-map-container svg');
 const popup = document.querySelector('#sites-map-container #popup');
 const popupContent = document.querySelector('#sites-map-container #popup-content');
 const modalBackground = document.querySelector('#sites-map-container #modal-background');
-console.log('svgElement', svgElement);
 
 // Fonction pour afficher le popup
 function showPopup(content, x, y) {
-    console.log('showPopup', content, x, y);
-    
     popupContent.innerHTML = content;
 
     // Récupérer la position de l'élément SVG seulement une fois
     const rect = svgElement.getBoundingClientRect();
-
+    
-    // Calculer la position du popup par rapport à l'élément SVG
+    // Calcul de la position du popup
-    const popupX = rect.left + x + 120; // Décalage de 120px à droite
+    let popupX = rect.left + x + 120;
-    const popupY = rect.top + y + 20;  // Décalage de 20px en dessous
+    let popupY = rect.top + y + 20;
 
     // Dimensions de la fenêtre et du popup
     const viewportWidth = window.innerWidth;
@@ -24,32 +21,20 @@ function showPopup(content, x, y) {
     const popupWidth = popup.offsetWidth;
     const popupHeight = popup.offsetHeight;
 
-    // Vérification des bordures droite et gauche
+    // Ajuster les positions pour éviter les dépassements
-    if (popupX + popupWidth > viewportWidth) {
+    popupX = Math.max(10, Math.min(popupX, viewportWidth - popupWidth - 10));
-        popupX = viewportWidth - popupWidth - 10; // Ajuster pour qu'il ne dépasse pas à droite
+    popupY = Math.max(10, Math.min(popupY, viewportHeight - popupHeight - 10));
-    }
-    if (popupX < 0) {
-        popupX = 10; // S'assurer que le popup ne dépasse pas à gauche
-    }
-
-    // Vérification des bordures inférieure et supérieure
-    if (popupY + popupHeight > viewportHeight) {
-        popupY = viewportHeight - popupHeight - 10; // Ajuster pour qu'il ne dépasse pas en bas
-    }
-    if (popupY < 0) {
-        popupY = 10; // S'assurer que le popup ne dépasse pas en haut
-    }
 
+    // Affichage du popup et du fond modal
     popup.style.left = `${popupX}px`;
     popup.style.top = `${popupY}px`;
     popup.style.display = 'block';
-    modalBackground.style.display = 'block'; // Activer le fond modal si nécessaire
+    modalBackground.style.display = 'block';
 }
 
 // Recalculer la position du popup lors du redimensionnement de la fenêtre
 window.addEventListener('resize', function() {
     if (popup.style.display === 'block') {
-        // Recalculer les coordonnées et ajuster la position
         const currentPopupRect = popup.getBoundingClientRect();
         showPopup(popupContent.innerHTML, currentPopupRect.left, currentPopupRect.top);
     }
@@ -61,31 +46,24 @@ function closePopup() {
     modalBackground.style.display = 'none'; // Désactiver le fond modal
 }
 
-// Ajout d'un écouteur d'événement sur l'élément SVG pour tous les cercles
+// Délégation d'événement pour gérer les clics sur les cercles et paths
 svgElement.addEventListener('click', function(event) {
-    console.log('svgElement click', event.target);
+    // Gérer le clic sur les cercles associés aux points d'intérêt
-    
     if (event.target.classList.contains('site-link')) {
-        // Récupérer le contenu personnalisé de l'attribut data-content
         const content = event.target.getAttribute('data-content');
-
-        // Récupérer la position du cercle cliqué par rapport à l'élément SVG
         const rect = svgElement.getBoundingClientRect();
         const circleX = event.clientX - rect.left;
         const circleY = event.clientY - rect.top;
-
-        // Afficher le popup avec le contenu spécifique
         showPopup(content, circleX, circleY);
-
+        event.stopPropagation(); // Empêche la propagation de l'événement pour éviter une fermeture accidentelle
-        // Empêcher la propagation de l'événement pour éviter la fermeture immédiate
-        event.stopPropagation();
     }
 });
 
-// Ferme le popup quand on clique n'importe où sur la page, sauf sur le popup
+// Fermer le popup en cliquant à l'extérieur de celui-ci
 document.addEventListener('click', function(event) {
-    // Vérifier si le clic s'est produit en dehors du popup
     if (popup.style.display === 'block' && !popup.contains(event.target)) {
         closePopup();
     }
 });
+
+

web/modules/custom/q2d_mod/src/Plugin/Block/SitesMap.php

@@ -56,8 +56,8 @@ class SitesMap extends BlockBase {
       $y = round(($latTop - $lat) / ($latTop - $latBottom) * $vp_h);
 
       $r = 10;
-      $m = -$r+2;
+      $m = -$r+4;
-      $l = $r*2-4;
+      $l = $r*2-8;
       $sites_paths .= <<<SVGSITEPATH
       <g 
         id="site-$index"

web/themes/custom/quartiers_de_demain/dist/assets/css/bundle.css

@@ -1636,13 +1636,13 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
 #home .config_pages--type--diaporama-home .diaporama .slick-list {
   padding: 0 !important;
 }
-#home .config_pages--type--diaporama-home .diaporama .slick-list .cadre-img-zoom {
+#home .config_pages--type--diaporama-home .diaporama .slick-list .slick-track {
   max-height: 1281px;
   overflow: hidden;
 }
-#home .config_pages--type--diaporama-home .diaporama .slick-list .cadre-img-zoom img {
+#home .config_pages--type--diaporama-home .diaporama .slick-list .slick-track img {
   width: 100%;
-  height: 960px;
+  height: auto;
   object-fit: cover;
 }
 #home .config_pages--type--diaporama-home .diaporama .slick-list blockquote {
@@ -1768,6 +1768,16 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
   font-family: "gilroy-bold";
   padding-bottom: 1rem;
 }
+#home article.node-type-static .field_field_map_block #block-sitesmapblock {
+  background-color: #cecfcc;
+  padding-top: 3rem;
+}
+#home article.node-type-static .field_field_map_block #block-sitesmapblock h2 {
+  width: fit-content;
+  margin: auto;
+  font-size: 2rem;
+  padding-bottom: 2rem;
+}
 #home article.node-type-static #paragraph-id--1 {
   background-color: #edefe8;
   position: relative;

web/themes/custom/quartiers_de_demain/src/assets/js/quartiers_de_demain.js

@@ -369,6 +369,8 @@
 
  ////////////  slideshow home  ////////////////////////// 
 
+
+
   $(document).ready(function(){
       let actuview = $('.content-actus .view')
       if (actuview) {
@@ -400,6 +402,9 @@
         console.log('salut slick home');
         
       }
+      $('.slick-carousel').slick({
+        lazyLoad: 'progressive', // Option 'ondemand' ou 'progressive'
+      });
 
   });
 
@@ -415,11 +420,11 @@
             slidesToShow: 1,
             dots: false,
             arrows: false,
-            centerMode: true,
+            // centerMode: true,
-            adaptiveHeight: false,
+            adaptiveHeight: true,
             autoplay: true,  // Activer l'autoplay
             autoplaySpeed: 4000,  // Changement de slide toutes les 4 secondes
-            infinite: true,
+            // infinite: true,
             pauseOnHover: false,  // Ne pas arrêter l'autoplay lors du survol
             pauseOnFocus: false,
             responsive: [

web/themes/custom/quartiers_de_demain/src/assets/scss/pages/home.scss

@@ -7,12 +7,12 @@
         .diaporama{
             .slick-list{
                 padding: 0 !important;   
-                    .cadre-img-zoom{
+                    .slick-track{
                         max-height: 1281px;
                         overflow:hidden;
                         img{
                             width: 100%;
-                            height: 960px;
+                            height: auto;
                             object-fit: cover;
                             // transform: scale(1.2);
                             // // // animation: zoomOut infinite 4.3s ease-in-out;
@@ -158,6 +158,20 @@
             font-family: 'gilroy-bold';
             padding-bottom: 1rem;
         }
+
+        .field_field_map_block{
+            #block-sitesmapblock{
+                background-color: #cecfcc;
+                padding-top: 3rem;
+
+                h2{
+                    width: fit-content;
+                    margin: auto;
+                    font-size: 2rem;
+                    padding-bottom: 2rem;
+                }
+            }
+        }
         #paragraph-id--1{  ///// Les enjeux 1
             background-color: #edefe8;
             position: relative;