divers css

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

@@ -4,13 +4,13 @@ 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');
 
-// Vérifiez si la page contient la classe '.node-type-site'
+// Vérification de la page courante
-const isSitePage = document.body.classList.contains('node-type-site');
+const isHomePage = document.querySelector('#home') !== null;
-const isLessitesPage = document.querySelector('#lessites') !== null;
+const isLessitesPage = document.querySelector('main#lessites') !== null;
+const isNodeTypeSitePage = document.body.classList.contains('node-type-site');
 
 // Fonction pour afficher le popup
-function showPopup(content, x, y, isLeftHalf) {
+function showPopup(content) {
-    if (isSitePage || isLessitesPage) return;
     popupContent.innerHTML = content;
     popup.style.display = 'block';
     modalBackground.style.display = 'block';
@@ -22,93 +22,72 @@ function closePopup() {
     modalBackground.style.display = 'none';
 }
 
-// Gérer le survol des cercles
+// Gérer le survol des cercles en fonction de la page
 svgElement.addEventListener('mouseover', function(event) {
     if (event.target.classList.contains('site-link')) {
         const content = event.target.getAttribute('data-content');
         const dataId = event.target.getAttribute('data-id');
         const correspondingRow = document.querySelector(`.views-row[data-id="${dataId}"]`);
-        showPopup(content);
+
-        if (correspondingRow) correspondingRow.style.border = '2px solid red';
+        // Interaction pour la page d'accueil
+        if (isHomePage) {
+            showPopup(content);  // Affiche le popup
         }
+
+        // Interaction pour la page #lessites
+        if (isLessitesPage && correspondingRow) {
+            correspondingRow.style.border = '2px solid red';  // Bordure rouge autour du .views-row correspondant
+        }
+    }
+
+    // Applique une couleur rouge au cercle au survol
     if (event.target.tagName === 'circle') {
         event.target.setAttribute('fill', 'red');
     }
 });
 
-// Fermer le popup et retirer la bordure rouge lorsque la souris quitte le cercle
+// Gérer la sortie de survol des cercles en fonction de la page
 svgElement.addEventListener('mouseout', function(event) {
     if (event.target.classList.contains('site-link')) {
-        closePopup();
         const dataId = event.target.getAttribute('data-id');
         const correspondingRow = document.querySelector(`.views-row[data-id="${dataId}"]`);
-        if (correspondingRow) correspondingRow.style.border = 'none';
+
+        // Ferme le popup pour la page d'accueil
+        if (isHomePage) {
+            closePopup();
         }
+
+        // Supprime la bordure rouge autour du .views-row pour la page #lessites
+        if (isLessitesPage && correspondingRow) {
+            correspondingRow.style.border = 'none';
+        }
+    }
+
+    // Remet la couleur noire au cercle lorsqu'on quitte le survol
     if (event.target.tagName === 'circle') {
         event.target.setAttribute('fill', 'black');
     }
 });
 
-// Fonction pour recalculer les positions des sites
+// Gérer les clics pour la page node-type-site
-function recalculateSitePositions() {
-    const allSites = document.querySelectorAll('.site-link');
-    allSites.forEach((site) => {
-        const geofield = site.getAttribute('data-geofield');
-        const lon = parseFloat(geofield.split(',')[0]);
-        const lat = parseFloat(geofield.split(',')[1]);
-        const x = Math.round((lon - lonLeft) / (lonRight - lonLeft) * vp_w);
-        const y = Math.round((latTop - lat) / (latTop - latBottom) * vp_h);
-        site.setAttribute('transform', `translate(${x}, ${y})`);
-    });
-}
-
-window.addEventListener('resize', function() {
-    recalculateSitePositions();
-    if (popup.style.display === 'block') {
-        const currentPopupRect = popup.getBoundingClientRect();
-        const rect = svgElement.getBoundingClientRect();
-        showPopup(popupContent.innerHTML, currentPopupRect.left - rect.left, currentPopupRect.top - rect.top);
-    }
-});
-
-// Gérer le clic ou le toucher des cercles
-function handleCircleClick(content) {
-    showPopup(content, event.clientX, event.clientY, event.target.getAttribute('data-left-half') === 'true');
-}
-
-// Écouter les événements de clic sur le SVG
 svgElement.addEventListener('click', function(event) {
+    if (isNodeTypeSitePage) {
         if (event.target.classList.contains('site-link')) {
-        const content = event.target.getAttribute('data-content');
+            const targetUrl = event.target.getAttribute('data-url');
-        handleCircleClick(content);
+            if (targetUrl) {
-    } else if (event.target.tagName === 'circle') {
+                window.location.href = targetUrl;  // Redirige vers le data-url correspondant
-        const circleId = event.target.id;  // Récupérer l'ID du cercle cliqué
+            }
-        
-        if (circleId.startsWith('site-')) {
-            const pageId = circleId.split('-')[1];  // Extraire l'ID numérique du site
-            window.location.href = `sites/node/${pageId}`;  // Rediriger vers la page correspondante
         }
-       
     }
-    
 });
 
-// Mise en évidence du point rouge correspondant à la page courante
+// Mise en évidence du cercle correspondant à la page courante pour node-type-site
-const body = document.querySelector('body');
+if (isNodeTypeSitePage) {
-const pageIdMatch = body.className.match(/node-id-(\d+)/);
+    const body = document.querySelector('body');
-if (pageIdMatch) {
+    const pageIdMatch = body.className.match(/node-id-(\d+)/);
+    if (pageIdMatch) {
         const pageId = pageIdMatch[1];
         const matchingCircle = document.querySelector(`#site-${pageId} circle`);
         if (matchingCircle) matchingCircle.setAttribute('fill', 'red');
+    }
 }
-
-
-// Écouter les événements de clic sur le SVG
-svgElement.addEventListener('click', function(event) {
-    if (event.target.tagName === 'circle' && event.target.classList.contains('site-link')) {
-        const targetUrl = event.target.getAttribute('data-url'); // Récupérer l'URL de redirection
-        if (targetUrl) {
-            window.location.href = targetUrl;  // Rediriger vers l'URL cible
-        }
-    }
-});

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

@@ -3019,10 +3019,6 @@ body {
 .node-type-site .layout--threecol-25-50-25 .layout__region--first div:has(.field_field_liens_site) h2, .node-type-site .layout--threecol-25-50-25 .layout__region--first div:has(.field_field_liens_site) .visually-hidden, .node-type-site .layout--threecol-25-50-25 .layout__region--first div:has(.field_field_liens_site) .field--label-above, .node-type-site .layout--threecol-25-50-25 .layout__region--first div:has(.field_field_liens_site) span:not(.file) {
   display: none;
 }
-.node-type-site .layout--threecol-25-50-25 .layout__region--first div:has(.field_field_liens_site) .field_field_liens_site {
-  background: black;
-  padding-left: 0.5rem;
-}
 @media (max-width: 810px) {
   .node-type-site .layout--threecol-25-50-25 .layout__region--first div:has(.field_field_liens_site) .field_field_liens_site {
     max-width: 50%;
@@ -3033,6 +3029,8 @@ body {
   display: inline-flex;
   align-items: center;
   color: white;
+  background: black;
+  padding-left: 0.5rem;
   text-transform: uppercase;
   font-size: 0.6rem;
 }

web/themes/custom/quartiers_de_demain/dist/assets/img/noun-arrow-to-right.png

@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="18.174984"
+   height="14.947381"
+   viewBox="0 0 5.4690765 4.497851"
+   version="1.1"
+   id="svg1"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1" />
+  <g
+     id="layer1"
+     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"
+       style="fill:#ffffff;stroke-width:0.0601533" />
+  </g>
+</svg>

web/themes/custom/quartiers_de_demain/src/assets/img/noun-arrow-to-right.svg

@@ -2,8 +2,8 @@
 <!-- Created with Inkscape (http://www.inkscape.org/) -->
 
 <svg
-   width="7mm"
+   width="35px"
-   height="7mm"
+   height="35px"
    viewBox="0 0 10.531931 10.531931"
    version="1.1"
    id="svg1"
@@ -39,12 +39,7 @@
      inkscape:groupmode="layer"
      id="layer1"
      transform="translate(-99.747912,-143.13958)">
-    <circle
+  
-       style="fill:#000000;fill-rule:evenodd;stroke:#000000;stroke-width:0.529167;stroke-linecap:round;stroke-linejoin:round;paint-order:stroke fill markers"
-       id="path3-3"
-       cx="105.01388"
-       cy="148.40555"
-       r="5.0013819" />
     <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"

web/themes/custom/quartiers_de_demain/src/assets/scss/pages/node-type-site.scss

@@ -74,6 +74,7 @@
                         color: white;
                         text-transform: uppercase;
                         font-size: 0.6rem;
+                        
                         svg{
                             display: none;
                         }
@@ -99,8 +100,6 @@
                     display: none;
                 }
                 .field_field_liens_site{
-                    background: black;
-                    padding-left: 0.5rem;
                     @media (max-width:810px) {  
                         // margin-left: 0;
                         max-width: 50%;
@@ -111,8 +110,11 @@
                         display: inline-flex;
                         align-items: center;
                         color: white;
+                        background: black;
+                        padding-left: 0.5rem;
                         text-transform: uppercase;
                         font-size: 0.6rem;
+                        
                         svg{
                             display: none;
                         }