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

Compare commits

base: bachir:52b22009fc936684860726733e793e564083c34f
Branches Tags
bachir:master
bachir:prod
bachir:stage
bachir:prd
..
compare: bachir:8ae4061e64c029108484c33ff0f545ee98a0383c
Branches Tags
bachir:master
bachir:prod
bachir:stage
bachir:prd

No commits in common. "52b22009fc936684860726733e793e564083c34f" and "8ae4061e64c029108484c33ff0f545ee98a0383c" have entirely different histories.
52b22009fc ... 8ae4061e64

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

2
web/themes/custom/quartiers_de_demain/dist/assets/bundle.js vendored
View File

File diff suppressed because one or more lines are too long

67
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 { .node-type-site .layout--threecol-25-50-25 {
flex-wrap: nowrap; flex-wrap: nowrap;
} }
@media (max-width: 810px) { @media (max-width: 500px) {
.node-type-site .layout--threecol-25-50-25 { .node-type-site .layout--threecol-25-50-25 {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -2927,23 +2927,12 @@ body {
flex-direction: column; flex-direction: column;
align-items: center; 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 { .node-type-site .layout--threecol-25-50-25 .layout__region--first .block-region-first {
position: fixed; position: fixed;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
width: 20% !important; 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 { .node-type-site .layout--threecol-25-50-25 .layout__region--first .block-region-first .views-element-container {
margin-bottom: 3rem; margin-bottom: 3rem;
} }
@ -2951,21 +2940,10 @@ body {
width: fit-content; width: fit-content;
margin-bottom: 0.5rem; 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 { .node-type-site .layout--threecol-25-50-25 .layout__region--first div #sites-map-container {
left: -50px; left: -50px;
} }
@media (max-width: 810px) { @media (max-width: 500px) {
.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) { .node-type-site .layout--threecol-25-50-25 .layout__region--first div:has(.field_field_documents) {
margin-top: 1rem; margin-top: 1rem;
} }
@ -3000,7 +2978,7 @@ body {
padding-left: 0.2rem; padding-left: 0.2rem;
padding-bottom: 0.2rem; padding-bottom: 0.2rem;
} }
@media (max-width: 810px) { @media (max-width: 500px) {
.node-type-site .layout--threecol-25-50-25 .layout__region--first div:has(.field_field_liens_site) { .node-type-site .layout--threecol-25-50-25 .layout__region--first div:has(.field_field_liens_site) {
margin-top: 1rem; margin-top: 1rem;
} }
@ -3014,8 +2992,7 @@ body {
} }
@media (max-width: 810px) { @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 { .node-type-site .layout--threecol-25-50-25 .layout__region--first div:has(.field_field_liens_site) .field_field_liens_site {
max-width: 50%; margin-left: 0;
margin: auto;
} }
} }
.node-type-site .layout--threecol-25-50-25 .layout__region--first div:has(.field_field_liens_site) .field_field_liens_site a { .node-type-site .layout--threecol-25-50-25 .layout__region--first div:has(.field_field_liens_site) .field_field_liens_site a {
@ -3247,47 +3224,27 @@ main {
width: 100vw; width: 100vw;
} }
#lessites .content_container .view .header_view { #lessites .content_container .view .header_view {
flex: 0 1 100%;
position: relative !important; position: relative !important;
height: fit-content; height: fit-content;
z-index: 0; z-index: 0;
width: 100vw; width: 100vw;
margin-bottom: 2rem; margin-bottom: 2rem;
} }
#lessites .content_container .view .header_view #block-sitesmap-block { #lessites .content_container .view .header_view #leaflet-map-view-sites-embed-1 {
margin: auto; width: inherit;
} }
@media (max-width: 810px) { #lessites .content_container .view .views-row {
#lessites .content_container .view .header_view #block-sitesmap-block #sites-map-container { width: 20%;
height: 300px;
}
}
#lessites .content_container .view .views-row-wrapper {
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 85%;
margin: auto;
gap: 20px;
}
#lessites .content_container .view .views-row-wrapper .views-row {
width: 18%;
margin-bottom: 2rem; margin-bottom: 2rem;
} }
@media (max-width: 810px) { #lessites .content_container .view .views-row .views-field-title .field-content a {
#lessites .content_container .view .views-row-wrapper .views-row {
width: 45%;
}
}
#lessites .content_container .view .views-row-wrapper .views-row .views-field-title .field-content a {
color: rgb(7, 50, 194); color: rgb(7, 50, 194);
font-family: "gilroy-bold"; font-family: "gilroy-bold";
padding-top: 0.5rem; padding-top: 0.5rem;
} }
#lessites .content_container .view .views-row-wrapper .views-row .views-field-field-images .field-content img { #lessites .content_container .view .views-row .views-field-field-images .field-content img {
width: 100%; width: 200px;
height: auto; height: 200px;
aspect-ratio: 1/1;
object-fit: cover; object-fit: cover;
} }

29
web/themes/custom/quartiers_de_demain/src/assets/js/quartiers_de_demain.js
View File

@ -542,35 +542,6 @@ document.addEventListener('keydown', (e) => {
//////////////////// start wrapper views-row lessites /////////////////////////
document.addEventListener("DOMContentLoaded", function() {
// Sélectionne le conteneur principal avec l'ID 'lessites'
const container = document.getElementById("lessites");
// Vérifie si le conteneur existe pour éviter toute erreur sur d'autres pages
if (container) {
// Sélectionne l'élément 'view' à l'intérieur de '.views-element-container'
const viewContainer = container.querySelector(".views-element-container .view");
// Vérifie si 'viewContainer' existe pour éviter les erreurs
if (viewContainer) {
// Crée une div englobante pour tous les éléments 'views-row'
const wrapperDiv = document.createElement("div");
wrapperDiv.classList.add("views-row-wrapper"); // ajoute une classe pour faciliter le style CSS
// Déplace tous les éléments 'views-row' dans la nouvelle div
const viewsRows = viewContainer.querySelectorAll(".views-row");
viewsRows.forEach(row => wrapperDiv.appendChild(row));
// Ajoute la div englobante dans le 'viewContainer'
viewContainer.appendChild(wrapperDiv);
}
}
});
//////////////////// end wrapper views-row lessites /////////////////////////
})(jQuery, window); })(jQuery, window);

51
web/themes/custom/quartiers_de_demain/src/assets/scss/pages/lessites.scss
View File

@ -30,53 +30,32 @@ main{
width: 100vw; width: 100vw;
.header_view { .header_view {
flex: 0 1 100%;
position: relative !important; position: relative !important;
height: fit-content; height: fit-content;
z-index: 0; z-index: 0;
width: 100vw; width: 100vw;
margin-bottom: 2rem; margin-bottom: 2rem;
#leaflet-map-view-sites-embed-1{
#block-sitesmap-block{ width:inherit;
margin: auto;
#sites-map-container{
@media(max-width: 810px){
height: 300px;
}
}
} }
} }
.views-row-wrapper{ .views-row{
display: flex; width: 20%;
flex-direction: row; margin-bottom: 2rem;
flex-wrap: wrap; .views-field-title .field-content a{
width: 85%; color: $blue_QDD;
margin: auto; font-family: "gilroy-bold";
gap: 20px; padding-top: 0.5rem;
.views-row{ }
width: 18%; .views-field-field-images .field-content img{
margin-bottom: 2rem; width: 200px;
@media(max-width: 810px){ height: 200px;
width: 45%; object-fit: cover;
}
.views-field-title .field-content a{
color: $blue_QDD;
font-family: "gilroy-bold";
padding-top: 0.5rem;
}
.views-field-field-images .field-content img{
width: 100%;
height: auto;
aspect-ratio: 1 / 1;
object-fit: cover;
}
} }
} }
} }
} }
} }

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