bachir/drupal-quartiersdedemain
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

css page site mobiel

Browse Source
This commit is contained in:
Ouidade Soussi Chiadmi
2024-11-05 21:45:42 +01:00
parent d516369a78
commit 52b22009fc
3 changed files with 68 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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
}
}

31
web/themes/custom/quartiers_de_demain/dist/assets/css/bundle.css vendored
View File

@@ -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 {

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

@@ -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{