carte interactive sur page node projet

flex element node site tableau et autre
font size
2025-11-25 17:04:11 +01:00 · 2025-11-25 16:11:02 +01:00 · 2025-11-25 15:55:45 +01:00 · 2025-11-25 15:51:41 +01:00 · 2025-11-25 15:47:58 +01:00 · 2025-11-25 15:33:29 +01:00
5 changed files with 95 additions and 38 deletions
--- a/web/modules/custom/q2d_mod/assets/js/carte-interactive-qdd.js
+++ b/web/modules/custom/q2d_mod/assets/js/carte-interactive-qdd.js
@@ -9,6 +9,7 @@ const isHomePage = document.querySelector('main#home') !== null;
 const isLessitesPage = document.querySelector('div#lessites') !== null;
 const isNodeTypeSitePage = document.body.classList.contains('node-type-site');
 const isCandidaturePage = document.querySelector('main#pour_candidater') !== null;
+const isNodeTypeProjetPage = document.body.classList.contains('node-type-projet');

 // Identifier le cercle de la page courante pour node-type-site
 let currentPageCircle = null;
@@ -25,6 +26,30 @@ if (isNodeTypeSitePage) {
        }
    }
 }
+// Identifier le cercle du SITE lié quand on est sur une page node-type-projet
+if (isNodeTypeProjetPage && svgElement) {
+    // On récupère le lien vers le site lié dans le bloc "Site lié"
+    const linkedSiteLink = document.querySelector('.field_field_site_projet article.node-type-site a[href*="/sites/"]');
+
+    if (linkedSiteLink) {
+        // On normalise le chemin (sans domaine) de l'URL du site
+        const sitePath = new URL(linkedSiteLink.getAttribute('href'), window.location.origin).pathname;
+
+        // On cherche le cercle dont le data-url pointe vers le même site
+        const correspondingCircle = Array.from(svgElement.querySelectorAll('circle.site-link')).find(circle => {
+            const circleUrl = circle.getAttribute('data-url');
+            if (!circleUrl) return false;
+
+            const circlePath = new URL(circleUrl, window.location.origin).pathname;
+            return circlePath === sitePath;
+        });
+
+        if (correspondingCircle) {
+            currentPageCircle = correspondingCircle;
+            currentPageCircle.setAttribute('fill', 'red'); // Met en rouge le cercle du site lié
+        }
+    }
+}


 // Fonction pour afficher le popup
@@ -123,6 +148,14 @@ svgElement.addEventListener('click', function(event) {
            }
        }
    }
+    if (isNodeTypeProjetPage) {
+        if (event.target.classList.contains('site-link')) {
+            const targetUrl = event.target.getAttribute('data-url');
+            if (targetUrl) {
+                window.location.href = targetUrl;  // Redirige vers le data-url correspondant
+            }
+        }
+    }
 });

 // Fonction pour gérer l'agrandissement de views-row au survol des cercles
--- a/web/themes/custom/quartiers_de_demain/dist/assets/css/bundle.css
+++ b/web/themes/custom/quartiers_de_demain/dist/assets/css/bundle.css
@@ -4002,6 +4002,7 @@ body {
 .node-type-site .layout--threecol-25-50-25 .layout__region--second .block-region-second div:has(.field--name-field-documents) {
  order: 5;
  margin-top: 0.5rem;
+  width: 100%;
 }
 .node-type-site .layout--threecol-25-50-25 .layout__region--second .block-region-second div:has(.field--name-field-documents) .field--name-field-documents a {
  display: inline-flex;
@@ -4071,7 +4072,7 @@ body {
  width: 80%;
  font-family: "gilroy-light";
  text-transform: uppercase;
-  font-size: 0.7rem;
+  font-size: 0.6rem;
  margin-bottom: 1rem;
  margin-top: 1rem;
  border-bottom: solid black 1px;
@@ -4083,6 +4084,10 @@ body {
 }
 .node-type-site .layout--threecol-25-50-25 .layout__region--third .block-region-third div .node-type-projet {
  position: relative;
+  transition: transform 0.4s ease-in-out;
+}
+.node-type-site .layout--threecol-25-50-25 .layout__region--third .block-region-third div .node-type-projet:hover {
+  transform: scale(1.05); /* effet de zoom léger */
 }
 .node-type-site .layout--threecol-25-50-25 .layout__region--third .block-region-third div .node-type-projet:has(.laureat:not(:empty)) {
  padding-top: 1.5rem;
@@ -4112,8 +4117,9 @@ body {
 .node-type-site .layout--threecol-25-50-25 .layout__region--third .block-region-third div .node-type-projet .field_field_nom_de_l_equipe {
  width: 80%;
  padding-left: 0.5rem;
-  font-size: 0.5rem;
+  font-size: 0.4rem;
  background-color: #f6f7f3;
+  text-transform: uppercase;
 }
 .node-type-site .layout--threecol-25-50-25 .layout__region--third .block-region-third div .node-type-projet .field_field_nom_de_l_equipe div {
  border-bottom: solid black 1px;
@@ -4126,6 +4132,7 @@ body {
  margin-top: 0.2rem;
 }
 .node-type-site .layout--threecol-25-50-25 .layout__region--third .block-region-third div .node-type-projet .field_field_nom_de_l_equipe div.more-link {
+  display: none;
  margin-bottom: 1rem;
  padding-left: 0rem;
 }
@@ -4141,6 +4148,7 @@ body {
  font-size: 0px;
 }
 .node-type-site .layout--threecol-25-50-25 .layout__region--third .block-region-third .prevnext {
+  display: none;
  flex-direction: row;
  margin-bottom: 0rem;
 }
@@ -4329,6 +4337,7 @@ body {
 }
 .node-type-projet .layout--threecol-25-50-25 .layout__region--first .block-region-first .field_field_site_projet .node-type-site .more-link {
  width: fit-content;
+  display: inline-flex;
  background: black;
 }
@media (max-width: 810px) {
@@ -4372,7 +4381,6 @@ body {
  display: flex;
  flex-direction: column;
  padding-left: 2rem;
-  /* Quand ouvert */
 }
 .node-type-projet .layout--threecol-25-50-25 .layout__region--second .block-region-second .field_field_laureats:has(.laureat:not(:empty))::before {
  content: "";
@@ -4393,14 +4401,15 @@ body {
 .node-type-projet .layout--threecol-25-50-25 .layout__region--second .block-region-second .field_field_nom_de_l_equipe {
  border-top: solid black 1px;
  padding-bottom: 0.5rem;
+  text-transform: uppercase;
 }
 .node-type-projet .layout--threecol-25-50-25 .layout__region--second .block-region-second .field_field_infos {
-  column-count: 3; /* 3 colonnes */
-  column-gap: 1.5rem; /* espace entre les colonnes */
+  column-count: 3;
+  column-gap: 1.5rem;
 }
 .node-type-projet .layout--threecol-25-50-25 .layout__region--second .block-region-second .field_field_infos .infos-projet {
-  break-inside: avoid; /* évite qu’un bloc soit coupé entre deux colonnes */
-  margin-bottom: 0.5rem !important; /* petit espace entre les blocs */
+  break-inside: avoid;
+  margin-bottom: 0.5rem !important;
  margin: 0;
 }
 .node-type-projet .layout--threecol-25-50-25 .layout__region--second .block-region-second .field_field_infos .infos-projet h4 {
@@ -4421,7 +4430,6 @@ body {
  height: 16rem;
 }
 .node-type-projet .layout--threecol-25-50-25 .layout__region--second .block-region-second .field_field_equipe_photo .image-field-caption {
-  margin-top: 0;
  margin-left: 0;
  font-size: 0.5rem;
  font-family: "gilroy-light";
@@ -4443,7 +4451,7 @@ body {
 }
 .node-type-projet .layout--threecol-25-50-25 .layout__region--second .block-region-second .field_field_equipe_photo.is-open,
 .node-type-projet .layout--threecol-25-50-25 .layout__region--second .block-region-second .field_field_equipe_presentation.is-open {
-  max-height: 1000px; /* assez grand pour contenir le contenu */
+  max-height: 1000px;
  opacity: 1;
 }
 .node-type-projet .layout--threecol-25-50-25 .layout__region--second .block-region-second .btn-equipe-toggle {
@@ -4578,7 +4586,7 @@ body {
 }
 .node-type-projet .layout--threecol-25-50-25 .layout__region--third .block-region-third {
  position: relative;
-  margin-top: 2rem;
+  margin-top: 4.5rem;
  margin-left: 2rem;
 }
@media (max-width: 810px) {
@@ -4609,7 +4617,7 @@ body {
 .node-type-projet .layout--threecol-25-50-25 .layout__region--third .block-region-third div h2 {
  font-family: "gilroy-light";
  text-transform: uppercase;
-  font-size: 0.8rem;
+  font-size: 0.6rem;
 }
 .node-type-projet .layout--threecol-25-50-25 .layout__region--third .block-region-third div h2::after {
  content: " :";
@@ -4617,14 +4625,15 @@ body {
 .node-type-projet .layout--threecol-25-50-25 .layout__region--third .block-region-third div .views-row {
  width: 80%;
  border-bottom: solid black 1px;
-  padding-bottom: 1rem;
+  padding-bottom: 0.5rem;
+  padding-top: 0.5rem;
  transition: transform 0.4s ease-in-out;
 }
 .node-type-projet .layout--threecol-25-50-25 .layout__region--third .block-region-third div .views-row:hover {
  transform: scale(1.05); /* effet de zoom léger */
 }
 .node-type-projet .layout--threecol-25-50-25 .layout__region--third .block-region-third div .views-row .views-field-title h2 {
-  font-size: 0.7rem;
+  font-size: 0.5rem;
  margin-bottom: 0rem;
  text-transform: none;
  font-family: "gilroy-regular";
@@ -4633,16 +4642,16 @@ body {
  content: "";
 }
 .node-type-projet .layout--threecol-25-50-25 .layout__region--third .block-region-third div .views-row .views-field-field-nom-de-l-equipe {
-  font-size: 0.6rem;
+  font-size: 0.4rem;
 }
 .node-type-projet .layout--threecol-25-50-25 .layout__region--third .block-region-third div .views-row .views-field-field-nom-de-l-equipe h3 {
  margin-bottom: 0.3rem;
  margin-top: 0.3rem;
+  text-transform: uppercase;
 }
 .node-type-projet .layout--threecol-25-50-25 .layout__region--third .block-region-third div .views-row .views-field-field-nom-de-l-equipe p {
  font-family: "gilroy-semibold";
  margin-bottom: 0.5rem;
-  font-size: 0.6rem;
 }
 .node-type-projet .layout--threecol-25-50-25 .layout__region--third .block-region-third div .views-row .views-field-view-node {
  display: none;
@@ -5110,6 +5119,10 @@ main {
  margin-bottom: 2rem;
  font-size: 0.4rem;
  position: relative;
+  transition: transform 0.4s ease-in-out;
+}
+#lesprojets .content_container .views-element-container .views-row .views-field-group:hover {
+  transform: scale(1.05);
 }
 #lesprojets .content_container .views-element-container .views-row .views-field-group::before {
  content: "";
@@ -5194,6 +5207,7 @@ main {
  object-fit: cover;
 }
 #lesprojets .content_container .views-element-container .views-row .views-field-group .views-field-view-node {
+  visibility: hidden;
  width: fit-content;
  padding-left: 0.5rem;
  background: black;
--- a/web/themes/custom/quartiers_de_demain/src/assets/scss/pages/lesprojets.scss
+++ b/web/themes/custom/quartiers_de_demain/src/assets/scss/pages/lesprojets.scss
@@ -56,7 +56,10 @@ main{
                    margin-bottom: 2rem;
                    font-size: 0.4rem;
                    position: relative;
-
+                    transition: transform 0.4s ease-in-out; 
+                    &:hover {
+                        transform: scale(1.05); 
+                        }
                    &::before {
                        content: "";
                        position: absolute;
@@ -107,6 +110,7 @@ main{
                        object-fit: cover;
                    }
                    .views-field-view-node{
+                        visibility: hidden;
                        width: fit-content;
                        padding-left: 0.5rem;
                        background: black;
--- a/web/themes/custom/quartiers_de_demain/src/assets/scss/pages/node-type-projet.scss
+++ b/web/themes/custom/quartiers_de_demain/src/assets/scss/pages/node-type-projet.scss
@@ -71,6 +71,7 @@
                        }
                        .more-link{
                            width: fit-content;
+                            display: inline-flex;
                            // padding-left: 0.5rem;
                            background: black;
                            @media (max-width:810px) {  
@@ -135,7 +136,6 @@
                        left: 0.5rem;
                        width: 2.5rem;
                        height: 2.5rem;
-                        // background-color: #f6f7f3;
                        background-image: url("../img/laureat-ouvert.svg");
                        background-repeat: no-repeat;
                        background-position: center;
@@ -151,13 +151,14 @@
                .field_field_nom_de_l_equipe{
                    border-top: solid black 1px;
                    padding-bottom: 0.5rem;
+                    text-transform: uppercase;
                }
                .field_field_infos{
-                    column-count: 3;      /* 3 colonnes */
-                    column-gap: 1.5rem;   /* espace entre les colonnes */
+                    column-count: 3; 
+                    column-gap: 1.5rem;  
                    .infos-projet{
-                        break-inside: avoid;  /* évite qu’un bloc soit coupé entre deux colonnes */
-                        margin-bottom: 0.5rem  !important;  /* petit espace entre les blocs */
+                        break-inside: avoid;
+                        margin-bottom: 0.5rem  !important; 
                        margin: 0;
                        h4{
                            margin: 0;
@@ -178,7 +179,7 @@
                        height: 16rem;
                    }
                    .image-field-caption{
-                        margin-top: 0;
+                        // margin-top: 0;
                        margin-left: 0;
                        font-size: 0.5rem;
                        font-family: "gilroy-light";
@@ -204,10 +205,9 @@
                    opacity 0.8s ease;
                }
                
-                /* Quand ouvert */
                .field_field_equipe_photo.is-open,
                .field_field_equipe_presentation.is-open {
-                  max-height: 1000px; /* assez grand pour contenir le contenu */
+                  max-height: 1000px;
                  opacity: 1;
                }
                
@@ -359,7 +359,7 @@
            .block-region-third{
                position:relative;
                // width: 23% !important;
-                margin-top: 2rem;
+                margin-top: 4.5rem;
                margin-left: 2rem;
                @media(max-width: 810px){
                    position: relative;
@@ -382,7 +382,7 @@
                    h2{
                        font-family: "gilroy-light";
                        text-transform: uppercase;
-                        font-size: 0.8rem;
+                        font-size: 0.6rem;
                        &::after{
                            content: " :";
                        }
@@ -390,34 +390,34 @@
                    .views-row{
                        width: 80%;
                        border-bottom: solid black 1px;
-                        padding-bottom: 1rem;
+                        padding-bottom: 0.5rem;
+                        padding-top: 0.5rem;
                        transition: transform 0.4s ease-in-out; // animation plus fluide
                                    &:hover {
                                        transform: scale(1.05); /* effet de zoom léger */
                                        }
                        .views-field-title {
                            h2 {
-                            font-size: 0.7rem;
+                            font-size: 0.5rem;
                            margin-bottom: 0rem;
                            // margin-top: 0.3rem;
                            text-transform: none;
                            font-family: "gilroy-regular";
-                            &::after{
-                                content: "";
-                            }
+                                &::after{
+                                    content: "";
+                                }
                            }
                        }
                        .views-field-field-nom-de-l-equipe{
                            h3 {
                                margin-bottom: 0.3rem;
                                margin-top:0.3rem;
-
+                                text-transform: uppercase;
                            }
-                            font-size: 0.6rem;
+                            font-size: 0.4rem;
                            p{
                                font-family: "gilroy-semibold";
                                margin-bottom: 0.5rem;
-                                font-size: 0.6rem;
                            }
                           
                        }
--- 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
@@ -343,6 +343,7 @@
                div:has(.field--name-field-documents){
                    order: 5;
                    margin-top: 0.5rem;
+                    width: 100%;
                    .field--name-field-documents{
                        a{
                            display: inline-flex;
@@ -416,7 +417,7 @@
                        width: 80%;
                        font-family: "gilroy-light";
                        text-transform: uppercase;
-                        font-size: 0.7rem;
+                        font-size: 0.6rem;
                        margin-bottom: 1rem;
                        margin-top: 1rem;
                        border-bottom: solid black 1px;
@@ -425,11 +426,13 @@
                        &::after{
                            content: " :";
                        }
-                       
-
                    }
                    .node-type-projet {
                        position: relative;
+                        transition: transform 0.4s ease-in-out; // animation plus fluide
+                        &:hover {
+                            transform: scale(1.05); /* effet de zoom léger */
+                            }
                        &:has(.laureat:not(:empty)){
                            padding-top: 1.5rem;
                        }
@@ -460,8 +463,9 @@
                        .field_field_nom_de_l_equipe{
                            width: 80%;
                            padding-left: 0.5rem;
-                            font-size: 0.5rem;
+                            font-size: 0.4rem;
                            background-color: #f6f7f3;
+                            text-transform: uppercase;
                            div{
                                border-bottom: solid black 1px;
                                margin-bottom: 0.5rem;
@@ -473,6 +477,7 @@
                                margin-top: 0.2rem;
                            }
                            div.more-link{
+                                display: none;
                                margin-bottom: 1rem;
                                padding-left: 0rem;
                                a{
@@ -497,6 +502,7 @@
    
                }
                .prevnext{
+                    display: none;
                    flex-direction: row;
                    margin-bottom: 0rem;
                    .prev-site{
Author	SHA1	Message	Date
ouidade	f05fee5e4c	carte interactive sur page node projet	2025-11-25 17:04:11 +01:00
ouidade	ed3e38a2ce	flex element node site tableau et autre	2025-11-25 16:11:02 +01:00
ouidade	df649e92f8	font size	2025-11-25 15:55:45 +01:00
ouidade	facf991325	#3531	2025-11-25 15:51:41 +01:00
ouidade	5e74afc829	#3528 block third node site	2025-11-25 15:47:58 +01:00
ouidade	534497eed2	#3526 block third node projet	2025-11-25 15:33:29 +01:00
ouidade	b745de55f2	#3533 nom equip euppercase	2025-11-25 15:22:27 +01:00
ouidade	d77cfbb9e3	#3525 margin legend	2025-11-25 15:17:46 +01:00
ouidade	bf71300dfe	#3523	2025-11-25 15:03:21 +01:00