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

Compare commits

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

4 Commits
8ae4061e64 ... 52b22009fc

Author SHA1 Message Date
ouidade 52b22009fc css page site mobiel 2024-11-05 21:45:42 +01:00
ouidade d516369a78 lessites mobile 2024-11-05 21:20:44 +01:00
ouidade c6d86df3bb css lessites 2024-11-05 21:15:16 +01:00
ouidade b3b736a1a3 div englobante lessites 2024-11-05 21:01:48 +01:00
6 changed files with 162 additions and 48 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 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
}
}

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 {
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 {
@ -3224,27 +3247,47 @@ main {
width: 100vw;
}
#lessites .content_container .view .header_view {
flex: 0 1 100%;
position: relative !important;
height: fit-content;
z-index: 0;
width: 100vw;
margin-bottom: 2rem;
}
#lessites .content_container .view .header_view #leaflet-map-view-sites-embed-1 {
width: inherit;
#lessites .content_container .view .header_view #block-sitesmap-block {
margin: auto;
}
#lessites .content_container .view .views-row {
width: 20%;
@media (max-width: 810px) {
#lessites .content_container .view .header_view #block-sitesmap-block #sites-map-container {
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;
}
#lessites .content_container .view .views-row .views-field-title .field-content a {
@media (max-width: 810px) {
#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);
font-family: "gilroy-bold";
padding-top: 0.5rem;
}
#lessites .content_container .view .views-row .views-field-field-images .field-content img {
width: 200px;
height: 200px;
#lessites .content_container .view .views-row-wrapper .views-row .views-field-field-images .field-content img {
width: 100%;
height: auto;
aspect-ratio: 1/1;
object-fit: cover;
}

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

@ -542,6 +542,35 @@ 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);

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

@ -30,32 +30,53 @@ main{
width: 100vw;
.header_view {
flex: 0 1 100%;
position: relative !important;
height: fit-content;
z-index: 0;
width: 100vw;
margin-bottom: 2rem;
#leaflet-map-view-sites-embed-1{
width:inherit;
#block-sitesmap-block{
margin: auto;
#sites-map-container{
@media(max-width: 810px){
height: 300px;
}
}
}
}
.views-row{
width: 20%;
margin-bottom: 2rem;
.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: 200px;
height: 200px;
object-fit: cover;
.views-row-wrapper{
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 85%;
margin: auto;
gap: 20px;
.views-row{
width: 18%;
margin-bottom: 2rem;
@media(max-width: 810px){
width: 45%;
}
.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{
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{