carte interactive sur page node projet

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

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) {
@@ -4577,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) {
@@ -4608,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: " :";
@@ -4616,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";
@@ -4632,7 +4642,7 @@ 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;
@@ -4642,7 +4652,6 @@ body {
 .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;

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) {  
@@ -358,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;
@@ -381,7 +382,7 @@
                     h2{
                         font-family: "gilroy-light";
                         text-transform: uppercase;
-                        font-size: 0.8rem;
+                        font-size: 0.6rem;
                         &::after{
                             content: " :";
                         }
@@ -389,14 +390,15 @@
                     .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;
@@ -412,11 +414,10 @@
                                 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;
                             }
                            
                         }

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{