From fb72032d086ce1d61f607eed216d91e510905945 Mon Sep 17 00:00:00 2001
From: ouidade <ouidade@figureslibres.io>
Date: Mon, 7 Oct 2024 15:37:04 +0200
Subject: [PATCH] position popup

---
 .../assets/css/carte-interactive-qdd.scss        |  9 +++------
 .../q2d_mod/assets/js/carte-interactive-qdd.js   | 16 ++++------------
 .../dist/assets/css/bundle.css                   |  3 +++
 3 files changed, 10 insertions(+), 18 deletions(-)

diff --git a/web/modules/custom/q2d_mod/assets/css/carte-interactive-qdd.scss b/web/modules/custom/q2d_mod/assets/css/carte-interactive-qdd.scss
index fe8f272..ac722cf 100644
--- a/web/modules/custom/q2d_mod/assets/css/carte-interactive-qdd.scss
+++ b/web/modules/custom/q2d_mod/assets/css/carte-interactive-qdd.scss
@@ -16,14 +16,11 @@
 /* Changer la couleur au survol (hover) */
 #sites-map-container .site-link:hover{
   cursor: pointer;
-  fill: #f7002b!important;
-
 }
 
-// #sites-map-container circle:hover {
-//   cursor: pointer;
-//   fill: #f7002b!important;
-// }
+#sites-map-container circle.circle {
+  fill: #f7002b!important;
+}
 
 /* Styles du popup (caché par défaut) */
 #sites-map-container #popup {
diff --git a/web/modules/custom/q2d_mod/assets/js/carte-interactive-qdd.js b/web/modules/custom/q2d_mod/assets/js/carte-interactive-qdd.js
index 550fe3d..968481a 100644
--- a/web/modules/custom/q2d_mod/assets/js/carte-interactive-qdd.js
+++ b/web/modules/custom/q2d_mod/assets/js/carte-interactive-qdd.js
@@ -23,21 +23,17 @@ function showPopup(content, x, y, isLeftHalf) {
     if (isLeftHalf) {
         console.log('Le point est dans la moitié gauche');
         // Si le point est dans la moitié gauche, aligner le côté droit du popup avec le point
-        popupX = rect.left + x - popupWidth - 10; // Décalage à gauche
+        popupX = rect.left + x - popupWidth - 20; // Décalage à gauche
         popupContent.style.textAlign = 'right'; // Alignement du texte à droite
     } else {
         console.log('Le point est dans la moitié droite');
         // Si le point est dans la moitié droite, afficher le popup à droite du point
-        popupX = rect.left + x + 10; // Décalage à droite
+        popupX = rect.left + x + 100; // Décalage à droite
         popupContent.style.textAlign = 'left'; // Alignement du texte à gauche
     }
 
-    // Centrer verticalement le popup par rapport au point
-    popupY = rect.top + y - (popupHeight / 2); // Centrage vertical
-
-    // Ajustement pour éviter que le popup soit trop bas
-    // On peut ajouter un décalage supplémentaire vers le haut pour compenser
-    popupY -= 300; // Ajuster vers le haut si nécessaire
+    // Calculer la position Y (décalée légèrement en hauteur)
+    popupY = rect.top + y - 0; // Ajustement vertical avec un léger offset
 
     // Empêcher le popup de dépasser les bords gauche et droite de l'écran
     const viewportWidth = window.innerWidth;
@@ -77,10 +73,6 @@ function showPopup(content, x, y, isLeftHalf) {
 }
 
 
-
-
-
-
 // Recalculer la position du popup lors du redimensionnement de la fenêtre
 window.addEventListener('resize', function() {
     if (popup.style.display === 'block') {
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 47f4271..2e99cca 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
@@ -3075,6 +3075,9 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
 /* Changer la couleur au survol (hover) */
 #sites-map-container .site-link:hover {
   cursor: pointer;
+}
+
+#sites-map-container circle.circle {
   fill: #f7002b !important;
 }