css page site mobiel

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

@@ -1,4 +1,4 @@
-// // Sélection des éléments principaux
+// 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');
@@ -6,20 +6,18 @@ const modalBackground = document.querySelector('#sites-map-container #modal-back
 
 // Vérifiez si la page contient la classe '.node-type-site'
 const isSitePage = document.body.classList.contains('node-type-site');
-
+const isLessitesPage = document.querySelector('#lessites') !== null; // Vérification de la page avec ID #lessites
 
 // Fonction pour afficher le popup
 function showPopup(content, x, y, isLeftHalf) {
-    // Si on est sur une page avec la classe 'node-type-site', ne pas afficher le popup
+    // Si on est sur la page #lessites ou une page avec la classe 'node-type-site', ne pas afficher le popup
-    if (isSitePage) return;
+    if (isSitePage || isLessitesPage) return;
 
     popupContent.innerHTML = content;
 
-
     // Afficher le popup et le fond de modal
     popup.style.display = 'block';
     modalBackground.style.display = 'block';
-
 }
 
 // Fonction pour fermer le popup
@@ -28,13 +26,20 @@ function closePopup() {
     modalBackground.style.display = 'none'; // Désactiver le fond modal
 }
 
-// Gérer le survol des cercles (au lieu du clic)
+// Gérer le survol des cercles
 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'); // Récupérer l'attribut data-id
+        const correspondingRow = document.querySelector(`.views-row[data-id="${dataId}"]`);
 
         // Afficher le popup avec la position et l'alignement adaptés
         showPopup(content);
+
+        // Ajouter une bordure rouge au .views-row correspondant
+        if (correspondingRow) {
+            correspondingRow.style.border = '2px solid red';
+        }
     }
 
     // Gestion du changement de couleur sur le cercle
@@ -43,10 +48,18 @@ svgElement.addEventListener('mouseover', function(event) {
     }
 });
 
-// Fermer le popup lorsque la souris quitte le cercle
+// Fermer le popup et retirer la bordure rouge lorsque la souris quitte le cercle
 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}"]`);
+
+        // Retirer la bordure rouge
+        if (correspondingRow) {
+            correspondingRow.style.border = 'none';
+        }
     }
 
     // Réinitialiser la couleur du cercle au survol de la souris
@@ -55,7 +68,6 @@ svgElement.addEventListener('mouseout', function(event) {
     }
 });
 
-
 // Mettre à jour la logique de calcul des positions
 function recalculateSitePositions() {
     const allSites = document.querySelectorAll('.site-link');
@@ -94,9 +106,6 @@ svgElement.addEventListener('click', function(event) {
     }
 });
 
-
-///////////////////// page site point rouge  quand sur page ///////////////////////
-
 // Récupérer l'ID de la page depuis la classe du body
 const body = document.querySelector('body');
 const pageId = body.className.match(/node-id-(\d+)/)[1];  // Extraire l'ID de la page
@@ -111,6 +120,3 @@ if (matchingGroup) {
         circle.setAttribute('fill', 'red');  // Changer la couleur du cercle
     }
 }
-
-
-

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

@@ -2914,7 +2914,7 @@ body {
 .node-type-site .layout--threecol-25-50-25 {
   flex-wrap: nowrap;
 }
-@media (max-width: 500px) {
+@media (max-width: 810px) {
   .node-type-site .layout--threecol-25-50-25 {
     display: flex;
     flex-direction: column;
@@ -2927,12 +2927,23 @@ body {
   flex-direction: column;
   align-items: center;
 }
+@media (max-width: 810px) {
+  .node-type-site .layout--threecol-25-50-25 .layout__region--first {
+    flex: 0 1 100%;
+  }
+}
 .node-type-site .layout--threecol-25-50-25 .layout__region--first .block-region-first {
   position: fixed;
   display: flex;
   flex-direction: column;
   width: 20% !important;
 }
+@media (max-width: 810px) {
+  .node-type-site .layout--threecol-25-50-25 .layout__region--first .block-region-first {
+    position: relative;
+    width: 100% !important;
+  }
+}
 .node-type-site .layout--threecol-25-50-25 .layout__region--first .block-region-first .views-element-container {
   margin-bottom: 3rem;
 }
@@ -2940,10 +2951,21 @@ body {
   width: fit-content;
   margin-bottom: 0.5rem;
 }
+@media (max-width: 810px) {
+  .node-type-site .layout--threecol-25-50-25 .layout__region--first div {
+    margin: auto;
+  }
+}
 .node-type-site .layout--threecol-25-50-25 .layout__region--first div #sites-map-container {
   left: -50px;
 }
-@media (max-width: 500px) {
+@media (max-width: 810px) {
+  .node-type-site .layout--threecol-25-50-25 .layout__region--first div #sites-map-container {
+    left: 0;
+    height: fit-content;
+  }
+}
+@media (max-width: 810px) {
   .node-type-site .layout--threecol-25-50-25 .layout__region--first div:has(.field_field_documents) {
     margin-top: 1rem;
   }
@@ -2978,7 +3000,7 @@ body {
   padding-left: 0.2rem;
   padding-bottom: 0.2rem;
 }
-@media (max-width: 500px) {
+@media (max-width: 810px) {
   .node-type-site .layout--threecol-25-50-25 .layout__region--first div:has(.field_field_liens_site) {
     margin-top: 1rem;
   }
@@ -2992,7 +3014,8 @@ body {
 }
 @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 {
-    margin-left: 0;
+    max-width: 50%;
+    margin: auto;
   }
 }
 .node-type-site .layout--threecol-25-50-25 .layout__region--first div:has(.field_field_liens_site) .field_field_liens_site a {

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

@@ -9,7 +9,7 @@
     .layout--threecol-25-50-25{
         
         flex-wrap: nowrap;
-        @media(max-width: 500px){
+        @media(max-width: 810px){
             display: flex;
             flex-direction: column;
             width: 100%;
@@ -19,12 +19,18 @@
             display: flex;
             flex-direction: column;
             align-items: center;
-           
+            @media(max-width: 810px){
+                flex: 0 1 100%;
+            }
             .block-region-first{
                 position: fixed;
                 display: flex;
                 flex-direction: column;
                 width: 20% !important;
+                @media(max-width: 810px){
+                    position: relative;
+                    width: 100% !important;
+                }
                 .views-element-container{
                     margin-bottom: 3rem;
                 }
@@ -32,15 +38,22 @@
             div{
                 width: fit-content;
                 margin-bottom: 0.5rem;
+                @media(max-width: 810px){
+                    margin: auto;                    
+                }
                 #sites-map-container{
                     // width: auto;
                     // left: 0.3rem;
                     left: -50px;
+                    @media(max-width: 810px){
+                        left: 0;  
+                        height: fit-content;                  
+                    }
                 }
             }
             div:has(.field_field_documents){
                 // margin: auto;
-                @media(max-width: 500px){
+                @media(max-width: 810px){
                     margin-top: 1rem;
                 }
                 
@@ -78,7 +91,7 @@
             div:has(.field_field_liens_site){
                 // margin: auto;
                 // width: 50%;
-                @media(max-width: 500px){
+                @media(max-width: 810px){
                     margin-top: 1rem;
                 }
                 
@@ -89,7 +102,9 @@
                     background: black;
                     padding-left: 0.5rem;
                     @media (max-width:810px) {  
-                        margin-left: 0;
+                        // margin-left: 0;
+                        max-width: 50%;
+                        margin: auto;
                     }
     
                     a{