From 52b22009fc936684860726733e793e564083c34f Mon Sep 17 00:00:00 2001 From: ouidade Date: Tue, 5 Nov 2024 21:45:42 +0100 Subject: [PATCH] css page site mobiel --- .../assets/js/carte-interactive-qdd.js | 36 +++++++++++-------- .../dist/assets/css/bundle.css | 31 +++++++++++++--- .../src/assets/scss/pages/node-type-site.scss | 25 ++++++++++--- 3 files changed, 68 insertions(+), 24 deletions(-) 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 30abdbc..7e51b25 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 @@ -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 - if (isSitePage) return; + // Si on est sur la page #lessites ou une page avec la classe 'node-type-site', ne pas afficher le popup + 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 } } - - - 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 9c3c750..33edbe9 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 @@ -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 { diff --git a/web/themes/custom/quartiers_de_demain/src/assets/scss/pages/node-type-site.scss b/web/themes/custom/quartiers_de_demain/src/assets/scss/pages/node-type-site.scss index 4e58536..f6efb4f 100644 --- a/web/themes/custom/quartiers_de_demain/src/assets/scss/pages/node-type-site.scss +++ b/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{