From 12b9feaa963ac28c9533cdf54c0b56c364ec84e8 Mon Sep 17 00:00:00 2001
From: ouidade <ouidade@figureslibres.io>
Date: Tue, 25 Jun 2024 23:07:23 +0200
Subject: [PATCH] prev next

---
 web/themes/custom/reha/dist/css/bundle.css    | 46 +++++++++++++++----
 .../reha/scss/pages/home/home-view-sites.scss | 10 ++--
 .../reha/scss/pages/les-sites-pilotes.scss    |  2 +-
 .../custom/reha/scss/pages/node-site.scss     | 28 ++++++++---
 .../custom/reha/scss/partials/_aside.scss     | 10 +++-
 .../custom/reha/scss/partials/_header.scss    | 39 +++-------------
 6 files changed, 81 insertions(+), 54 deletions(-)

diff --git a/web/themes/custom/reha/dist/css/bundle.css b/web/themes/custom/reha/dist/css/bundle.css
index e0ae39e..a5ec545 100644
--- a/web/themes/custom/reha/dist/css/bundle.css
+++ b/web/themes/custom/reha/dist/css/bundle.css
@@ -288,7 +288,7 @@ header {
   display: block;
   height: 120px;
   background-color: rgb(255, 255, 255);
-  z-index: 99;
+  z-index: 101;
   width: 100vw;
   max-width: 100vw;
   position: -webkit-sticky;
@@ -372,6 +372,10 @@ header .region-header #block-reha-navigationprincipale ul li a.is-active {
 header .region-header #block-reha-navigationprincipale ul li a:hover {
   text-decoration: underline;
 }
+header .region-header #block-reha-navigationprincipale ul > li a.active {
+  text-decoration: underline;
+  font-weight: 1000;
+}
 header .region-header #block-reha-connexionutilisateur {
   grid-column: 9;
   display: flex;
@@ -504,6 +508,7 @@ header .region-header #block-reha-config-pages {
 }
 header .region-header #block-reha-config-pages .bouton-contact {
   padding-right: 4rem;
+  padding-left: 1rem;
 }
 header .region-header #block-reha-config-pages .bouton-contact ::before {
   content: url(../images/noun-letter-1064628.svg);
@@ -932,7 +937,7 @@ h4 {
 aside.layout-sidebar-second {
   overflow: scroll;
   padding-top: 110px;
-  z-index: 98;
+  z-index: 100;
   padding-left: 2rem;
 }
 aside.layout-sidebar-second h2 {
@@ -966,11 +971,17 @@ aside.layout-sidebar-second .profile--type--collaborateur .field--name-field-dos
   display: flex;
   flex-direction: column;
 }
+aside.layout-sidebar-second .profile--type--collaborateur .field--name-field-dossier-de-pilotage > div:nth-child(1) {
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+}
 aside.layout-sidebar-second .profile--type--collaborateur .field--name-field-dossier-de-pilotage > div:nth-child(1)::before {
   content: url("../../dist/images/noun-file-6880430.svg");
   display: inline-flex;
   width: 70px;
   height: auto;
+  padding-right: 1rem;
   align-items: center;
 }
 aside.layout-sidebar-second .profile--type--collaborateur .field--name-field-dossier-de-pilotage .field__item {
@@ -1846,7 +1857,7 @@ html.js body.node-type-operation.node-id-7 div.dialog-off-canvas-main-canvas div
 .home-page-layout-content .block-views-blocksites-block-1 .views-row .node-type-site .infos-content-site h2 {
   order: 2;
   margin: 0;
-  font-size: 1.9rem;
+  font-size: 1.8rem;
   font-weight: 1000;
 }
 @media (max-width: 891px) {
@@ -1867,7 +1878,7 @@ html.js body.node-type-operation.node-id-7 div.dialog-off-canvas-main-canvas div
 }
 .home-page-layout-content .block-views-blocksites-block-1 .views-row .node-type-site .infos-content-site .field--name-field-adresse-site {
   order: 3;
-  font-size: 1.5rem;
+  font-size: 1.4rem;
 }
 @media (max-width: 891px) {
   .home-page-layout-content .block-views-blocksites-block-1 .views-row .node-type-site .infos-content-site .field--name-field-adresse-site {
@@ -1876,6 +1887,9 @@ html.js body.node-type-operation.node-id-7 div.dialog-off-canvas-main-canvas div
     padding-bottom: 0.3rem;
   }
 }
+.home-page-layout-content .block-views-blocksites-block-1 .views-row .node-type-site .infos-content-site .field--name-field-adresse-site .field__item {
+  display: flex;
+}
 .home-page-layout-content .block-views-blocksites-block-1 .views-row .node-type-site .infos-content-site .field--name-field-adresse-site .address {
   margin: 0;
   display: inline-flex;
@@ -1893,7 +1907,8 @@ html.js body.node-type-operation.node-id-7 div.dialog-off-canvas-main-canvas div
 }
 .home-page-layout-content .block-views-blocksites-block-1 .views-row .node-type-site .infos-content-site .field--name-field-architecte {
   order: 4;
-  font-size: 1.5rem;
+  font-size: 1.4rem;
+  padding-top: 0.5rem;
 }
 .home-page-layout-content .block-views-blocksites-block-1 .views-row .node-type-site .infos-content-site .field--name-field-architecte .field__items {
   display: flex;
@@ -2304,16 +2319,27 @@ html.js body.node-type-operation.node-id-7 div.dialog-off-canvas-main-canvas div
   margin: auto;
   display: grid;
   grid-template-columns: repeat(8, 1fr);
-  grid-template-rows: 0.5fr repeat(5, 2fr);
+  grid-template-rows: 0.5fr 0.5fr repeat(5, 2fr);
 }
 .page-node-site .region-content #block-reha-prevnextblock {
   display: flex;
   flex-direction: row;
-  grid-column: 5/span 7;
-  grid-row: 1;
+  grid-column: 4/span 6;
+  grid-row: 2;
   z-index: 97;
   height: fit-content;
-  align-self: end;
+  justify-content: space-evenly;
+}
+.page-node-site .region-content #block-reha-prevnextblock .next-site ::after {
+  content: url("../../dist/images/noun-arrow-1569918-black.svg");
+  padding-left: 0.5rem;
+  padding-top: 0.1rem;
+}
+.page-node-site .region-content #block-reha-prevnextblock .prev-site ::before {
+  content: url("../../dist/images/noun-arrow-1569918-black.svg");
+  display: inline-block;
+  transform: rotate(180deg);
+  padding-left: 0.5rem;
 }
 .page-node-site .region-content #block-reha-titredepage {
   display: none;
@@ -2329,7 +2355,7 @@ html.js body.node-type-operation.node-id-7 div.dialog-off-canvas-main-canvas div
 }
 .page-node-site .region-content #block-reha-contenudelapageprincipale .node-type-site .image-site {
   order: 2;
-  top: -150px;
+  top: -115px;
   position: relative;
 }
 .page-node-site .region-content #block-reha-contenudelapageprincipale .node-type-site .image-site .field--name-field-image {
diff --git a/web/themes/custom/reha/scss/pages/home/home-view-sites.scss b/web/themes/custom/reha/scss/pages/home/home-view-sites.scss
index 0541a4e..d47516d 100644
--- a/web/themes/custom/reha/scss/pages/home/home-view-sites.scss
+++ b/web/themes/custom/reha/scss/pages/home/home-view-sites.scss
@@ -74,7 +74,7 @@
                     h2{
                         order: 2;
                         margin: 0;
-                        font-size: 1.9rem;
+                        font-size: 1.8rem;
                         font-weight: 1000;
                         @media(max-width: 891px){
                             font-size: 1.2rem;
@@ -91,12 +91,15 @@
                     }
                     .field--name-field-adresse-site{
                         order: 3;
-                        font-size: 1.5rem;
+                        font-size: 1.4rem;
                         @media(max-width: 891px){
                             font-size: 1rem;
                             line-height: 0.6rem;
                             padding-bottom: 0.3rem;
                         }
+                        .field__item{
+                            display: flex;
+                        }
                         .address{
                             margin: 0;
                             display: inline-flex;
@@ -115,7 +118,8 @@
                     }
                     .field--name-field-architecte{
                         order: 4;
-                        font-size: 1.5rem;
+                        font-size: 1.4rem;
+                        padding-top: 0.5rem;
                         .field__items{
                             display: flex;
                             flex-direction: row;
diff --git a/web/themes/custom/reha/scss/pages/les-sites-pilotes.scss b/web/themes/custom/reha/scss/pages/les-sites-pilotes.scss
index aa58f1a..ad0ee23 100644
--- a/web/themes/custom/reha/scss/pages/les-sites-pilotes.scss
+++ b/web/themes/custom/reha/scss/pages/les-sites-pilotes.scss
@@ -167,7 +167,7 @@
                             order: 3;
                             line-height: 1.3rem;
                             font-weight: 400 !important;
-                        
+
                             p.address{
                                 padding-left: 0;
                                 margin: 0;
diff --git a/web/themes/custom/reha/scss/pages/node-site.scss b/web/themes/custom/reha/scss/pages/node-site.scss
index e9abce9..1d63de6 100644
--- a/web/themes/custom/reha/scss/pages/node-site.scss
+++ b/web/themes/custom/reha/scss/pages/node-site.scss
@@ -13,16 +13,32 @@
         margin: auto;
         display: grid;
         grid-template-columns: repeat(8, 1fr);
-        grid-template-rows: 0.5fr repeat(5, 2fr);
+        grid-template-rows: 0.5fr 0.5fr repeat(5, 2fr);
        
         #block-reha-prevnextblock{
             display: flex;
             flex-direction: row;
-            grid-column: 5 /span 7;
-            grid-row: 1;   
+            grid-column: 4 /span 6;
+            grid-row: 2;   
             z-index: 97;  
             height: fit-content;
-            align-self: end;
+            // align-self: end;
+            justify-content: space-evenly;
+            .next-site{
+                ::after{
+                    content: url('../../dist/images/noun-arrow-1569918-black.svg');
+                    padding-left: 0.5rem;
+                    padding-top: 0.1rem;                    
+                }
+            }
+            .prev-site{
+                ::before{
+                    content: url('../../dist/images/noun-arrow-1569918-black.svg');
+                    display: inline-block;
+                    transform: rotate(180deg);
+                    padding-left: 0.5rem;
+                }
+            }
         }
 
         #block-reha-titredepage{
@@ -37,7 +53,7 @@
                 flex-direction: column;
                 .image-site{
                     order: 2;
-                    top: -150px;
+                    top: -115px;
                     position: relative;
                     .field--name-field-image{
                         width: 100%;
@@ -99,7 +115,7 @@
                         order: 3;
                         font-size: 1.2rem;
                         line-height: 1.3rem;
-                    
+
                         .address{
                             margin: 0;
                             display: inline-flex;
diff --git a/web/themes/custom/reha/scss/partials/_aside.scss b/web/themes/custom/reha/scss/partials/_aside.scss
index 74f84bd..2e9b6a8 100644
--- a/web/themes/custom/reha/scss/partials/_aside.scss
+++ b/web/themes/custom/reha/scss/partials/_aside.scss
@@ -38,7 +38,7 @@
 aside.layout-sidebar-second{
     overflow: scroll;
     padding-top: $header-height;
-    z-index: 98;
+    z-index: 100;
     padding-left: 2rem;
     h2{
         transform: translateX(-50%) translateY(40vh) rotate(-90deg);
@@ -46,7 +46,7 @@ aside.layout-sidebar-second{
         font-weight: 400;
         cursor: pointer;
         &::before{
-            content:url('../../dist/images/noun-arrow-1569918-black.svg');
+            content: url('../../dist/images/noun-arrow-1569918-black.svg');
             display: inline-block;
             transform: translateY(5px) rotate(90deg);
         }
@@ -71,12 +71,18 @@ aside.layout-sidebar-second{
             text-transform: uppercase;
             display: flex;
             flex-direction: column;
+            > div:nth-child(1){
+                display: flex;
+                align-items: center;
+                flex-direction: row;
+            }
 
             > div:nth-child(1)::before{
                 content: url('../../dist/images/noun-file-6880430.svg');
                 display: inline-flex;
                 width: 70px;
                 height: auto;
+                padding-right: 1rem;
                 // align-content: center;
          
                 align-items: center;
diff --git a/web/themes/custom/reha/scss/partials/_header.scss b/web/themes/custom/reha/scss/partials/_header.scss
index a6d5b57..1661fb5 100644
--- a/web/themes/custom/reha/scss/partials/_header.scss
+++ b/web/themes/custom/reha/scss/partials/_header.scss
@@ -4,7 +4,7 @@ header{
     display: block;
     height: 120px;
     background-color: $white-header;
-    z-index: 99;
+    z-index: 101;
     width: 100vw;
     max-width: 100vw;
     position: -webkit-sticky;
@@ -12,7 +12,6 @@ header{
     top: 0;
     box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
     @media (max-width:800px) {
-            // height: 100px;
             width: 800px;
  
      }
@@ -32,7 +31,6 @@ header{
             width: 135px;
             min-width: 100px;
             padding-left: 80px;
-            // padding-top: 30px;
             height: 100%;
                 img{
                     max-width: 100%;
@@ -43,20 +41,11 @@ header{
                 padding-left: 5%;
                 padding-top: 0%;
             }   
-            // @media (max-width:500px) {
-            //     // width: 10%;
-            //     padding-left: 30px;
-            //     padding-top: 20px;
-            // }  
-            
         }
         #block-reha-logoreha{
-            // display: none;
             grid-column: 2;
-            // max-height: 80%;
             height: $header-height;
             padding-left: 1rem;
-            // padding-top: 20px;
             .field--name-field-logo{
                 height: $header-height;
                 .field__item{
@@ -99,10 +88,10 @@ header{
                 }
                
             }
-            // ul > li a.active{
-            //     text-decoration: underline;
-            //     font-weight: 1000;
-            // }
+            ul > li a.active{
+                text-decoration: underline;
+                font-weight: 1000;
+            }
         }
 
         #block-reha-connexionutilisateur{
@@ -116,17 +105,11 @@ header{
             }
             
             .bouton-connexion{
-                // padding-right: 3rem;
-                // @media (max-width:891px) {
-                //     font-size: 0.1rem;
-                //     color: white;
-                // }
                 :before{
                     content: url(../images/noun-contact-2495375.svg);
-                    // padding-right: 1rem;
                 }
-                
             }
+
             //// drop down menu connexion
             .connexion{
                 height: 0; /* Hauteur initiale à 0 pour créer l'effet de glissement vers le bas */
@@ -138,7 +121,6 @@ header{
                     top: 36px;  // Positionnez-les sous les boutons
                     position: absolute;
                     background-color: $white-header;
-                    // width: 30vw;
                     width: $width-menu-slidedown;
                     height: 200vh;
                     box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
@@ -151,14 +133,6 @@ header{
                         height: fit-content;
 
                     }
-
-                    // @media(max-width: 891px){
-                    //     top: 100%;
-                    //     width: 500px;
-                    //     padding-left: 0;
-                    //     padding-top: 1rem;
-                    //     height: fit-content;
-                    // }
                     @media (max-width:500px) {
                         top: 55px;
                         right: -90px;
@@ -252,6 +226,7 @@ header{
             grid-column: 10;
             .bouton-contact{
                 padding-right: 4rem;
+                padding-left: 1rem;
                 ::before{
                     content: url(../images/noun-letter-1064628.svg);
                     padding-right: 1rem;