From 713e5df8733908328503fe36b5f3989348a1f3f9 Mon Sep 17 00:00:00 2001
From: ouidade <ouidade@figureslibres.io>
Date: Sun, 7 Jul 2024 14:32:42 +0200
Subject: [PATCH] mobile page consultation

---
 .../dist/assets/css/bundle.css                | 88 ++++++++++++++++++-
 .../src/assets/scss/global/_layout.scss       |  8 +-
 .../src/assets/scss/pages/consultation.scss   | 38 +++++++-
 .../src/assets/scss/partials/header.scss      | 19 +++-
 4 files changed, 143 insertions(+), 10 deletions(-)

diff --git a/web/themes/custom/quartiers_de_demain/dist/assets/css/bundle.css b/web/themes/custom/quartiers_de_demain/dist/assets/css/bundle.css
index d4936ed..484acea 100644
--- a/web/themes/custom/quartiers_de_demain/dist/assets/css/bundle.css
+++ b/web/themes/custom/quartiers_de_demain/dist/assets/css/bundle.css
@@ -181,10 +181,9 @@ h3 {
   width: 100%;
   padding-top: 320px;
 }
-
 @media (max-width: 500px) {
-  .layout-content {
-    padding-top: 50px;
+  .layout-container main {
+    padding-top: 110px;
   }
 }
 
@@ -233,6 +232,11 @@ header {
   transition: height 0.3s, padding 0.3s; /* Add transition for smooth resizing */
   /* Classes for scroll effect */
 }
+@media (max-width: 500px) {
+  header {
+    height: 110px;
+  }
+}
 header .contextual-region {
   width: max-content;
 }
@@ -351,13 +355,31 @@ header .header_nav_container #block-quartiers-de-demain-entete ul {
   position: relative;
   top: 80px;
   padding-left: 1rem;
+  padding-right: 1rem;
   margin: 0;
 }
+@media (max-width: 500px) {
+  header .header_nav_container #block-quartiers-de-demain-entete ul {
+    top: 27.5px;
+  }
+}
+@media (max-width: 500px) {
+  header .header_nav_container #block-quartiers-de-demain-entete ul li {
+    padding-top: 0.3rem;
+  }
+}
 header .header_nav_container #block-quartiers-de-demain-entete ul li a {
   text-transform: uppercase;
   color: white;
   font-size: 0.5rem;
 }
+@media (max-width: 500px) {
+  header .header_nav_container #block-quartiers-de-demain-entete ul li a {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+  }
+}
 header .header_nav_container #block-quartiers-de-demain-entete ul li:not(:last-of-type) ::after {
   content: "";
   display: block;
@@ -1372,6 +1394,13 @@ footer {
   font-size: 2.5rem;
   font-weight: 500;
 }
+@media (max-width: 500px) {
+  #consultation .layout-content .content_container .node-type-static #paragraph-id--10 .field_field_title {
+    font-size: 2.2rem;
+    padding: 0rem;
+    padding-top: 2rem;
+  }
+}
 #consultation .layout-content .content_container .node-type-static #paragraph-id--10 .colone-picto {
   display: flex;
   flex-direction: row;
@@ -1384,6 +1413,11 @@ footer {
   padding: 0.5rem;
   margin-top: 0;
 }
+@media (max-width: 500px) {
+  #consultation .layout-content .content_container .node-type-static #paragraph-id--10 .colone-picto p:not(:last-of-type) {
+    flex: 1 25%;
+  }
+}
 #consultation .layout-content .content_container .node-type-static #paragraph-id--10 .colone-picto p:not(:last-of-type)::before {
   content: "";
   display: block;
@@ -1391,12 +1425,22 @@ footer {
   height: 30%;
   margin-bottom: 0.5rem;
 }
+@media (max-width: 500px) {
+  #consultation .layout-content .content_container .node-type-static #paragraph-id--10 .colone-picto p:not(:last-of-type)::before {
+    height: 15%;
+  }
+}
 #consultation .layout-content .content_container .node-type-static #paragraph-id--10 .colone-picto p:last-of-type {
   color: black;
   width: 55%;
   padding-top: 2rem;
   margin: auto;
 }
+@media (max-width: 500px) {
+  #consultation .layout-content .content_container .node-type-static #paragraph-id--10 .colone-picto p:last-of-type {
+    width: 80%;
+  }
+}
 #consultation .layout-content .content_container .node-type-static #paragraph-id--11 {
   width: 65%;
   background-color: white;
@@ -1407,17 +1451,33 @@ footer {
   padding: 1rem;
   margin-bottom: 1rem;
 }
+@media (max-width: 500px) {
+  #consultation .layout-content .content_container .node-type-static #paragraph-id--11 {
+    width: 90%;
+  }
+}
 #consultation .layout-content .content_container .node-type-static #paragraph-id--11 .field_field_title {
   color: rgb(7, 50, 194);
   font-size: 1.2rem;
   font-weight: 500;
 }
+@media (max-width: 500px) {
+  #consultation .layout-content .content_container .node-type-static #paragraph-id--11 .field_field_title {
+    width: 80%;
+  }
+}
 #consultation .layout-content .content_container .node-type-static #paragraph-id--11 .colone-picto {
   display: grid;
   grid-template-columns: auto auto;
   grid-template-rows: auto auto;
   padding: 1rem;
 }
+@media (max-width: 500px) {
+  #consultation .layout-content .content_container .node-type-static #paragraph-id--11 .colone-picto {
+    padding-left: 0;
+    padding-right: 0;
+  }
+}
 #consultation .layout-content .content_container .node-type-static #paragraph-id--11 .colone-picto p {
   flex: 1 15%;
   padding: 0rem;
@@ -1455,6 +1515,12 @@ footer {
   align-items: center;
   padding: 1rem;
 }
+@media (max-width: 500px) {
+  #consultation .layout-content .content_container .node-type-static #paragraph-id--12,
+  #consultation .layout-content .content_container .node-type-static #paragraph-id--13 {
+    width: 90%;
+  }
+}
 #consultation .layout-content .content_container .node-type-static #paragraph-id--12 .field_field_title,
 #consultation .layout-content .content_container .node-type-static #paragraph-id--13 .field_field_title {
   color: rgb(7, 50, 194);
@@ -1462,6 +1528,12 @@ footer {
   font-weight: 500;
   padding-bottom: 1.5rem;
 }
+@media (max-width: 500px) {
+  #consultation .layout-content .content_container .node-type-static #paragraph-id--12 .field_field_title,
+  #consultation .layout-content .content_container .node-type-static #paragraph-id--13 .field_field_title {
+    padding-bottom: 0.8rem;
+  }
+}
 #consultation .layout-content .content_container .node-type-static #paragraph-id--12::after {
   content: "";
   display: block;
@@ -1474,9 +1546,19 @@ footer {
   flex-direction: row;
   justify-content: space-between;
 }
+@media (max-width: 500px) {
+  #consultation .layout-content .content_container .node-type-static #paragraph-id--13 .field_field_texte .colone-picto {
+    flex-direction: column;
+  }
+}
 #consultation .layout-content .content_container .node-type-static #paragraph-id--13 .field_field_texte .colone-picto p {
   width: 30%;
 }
+@media (max-width: 500px) {
+  #consultation .layout-content .content_container .node-type-static #paragraph-id--13 .field_field_texte .colone-picto p {
+    width: 100%;
+  }
+}
 
 .partenaires {
   background-color: #f6f7f3;
diff --git a/web/themes/custom/quartiers_de_demain/src/assets/scss/global/_layout.scss b/web/themes/custom/quartiers_de_demain/src/assets/scss/global/_layout.scss
index bd0ae57..ba1ac91 100644
--- a/web/themes/custom/quartiers_de_demain/src/assets/scss/global/_layout.scss
+++ b/web/themes/custom/quartiers_de_demain/src/assets/scss/global/_layout.scss
@@ -38,6 +38,9 @@ $width-menu-slidedown : 550px;
         padding-top: $header-height;
         // display: grid;
         // grid-template-columns: repeat(12, 1fr);
+        @media(max-width: 500px){
+            padding-top: $header-height-pad;
+        }
     }
     // .content_container{
     //     display: grid;
@@ -48,9 +51,6 @@ $width-menu-slidedown : 550px;
 .layout-content{
     // grid-column: 1 / span 12;
     // padding-top: $header-height;   
-    @media(max-width: 500px){
-        padding-top: $header-height-ultrasmall;   
-
-    }     
+   
 }
 
diff --git a/web/themes/custom/quartiers_de_demain/src/assets/scss/pages/consultation.scss b/web/themes/custom/quartiers_de_demain/src/assets/scss/pages/consultation.scss
index 1136488..b93bd60 100644
--- a/web/themes/custom/quartiers_de_demain/src/assets/scss/pages/consultation.scss
+++ b/web/themes/custom/quartiers_de_demain/src/assets/scss/pages/consultation.scss
@@ -45,24 +45,35 @@
                         color: $blue_QDD;
                         font-size: 2.5rem;
                         font-weight: 500;
+                        @media(max-width: 500px){
+                            font-size: 2.2rem;
+                            padding: 0rem;
+                            padding-top: 2rem;
+                        }
+                    
                     }
                     .colone-picto{
                         display: flex;
                         flex-direction: row;
                         flex-wrap: wrap;
-                        // padding: 1rem;
                         padding-bottom: 3rem;
                         p:not(:last-of-type){
                             flex: 1 15%;
                             color: $blue_QDD;
                             padding: 0.5rem;
                             margin-top: 0;
+                            @media(max-width: 500px){
+                                flex: 1 25%;
+                            }
                             &::before{
                                 content:"";
                                 display: block;
                                 border-left: solid 1px $blue_QDD;
                                 height: 30%;
                                 margin-bottom: 0.5rem;
+                                @media(max-width: 500px){
+                                    height: 15%;
+                                }
                             }
                         }
                          
@@ -72,6 +83,9 @@
                             width: 55%;
                             padding-top: 2rem;
                             margin: auto;
+                            @media(max-width: 500px){
+                                width: 80%;
+                            }
                         }
                         
                     }                 
@@ -85,16 +99,26 @@
                     align-items: center;
                     padding: 1rem;
                     margin-bottom: 1rem;
+                    @media(max-width: 500px){
+                        width: 90%;
+                    }
                     .field_field_title{
                         color: $blue_QDD;
                         font-size: 1.2rem;
                         font-weight: 500;
+                        @media(max-width: 500px){
+                            width: 80%;
+                        }
                     }
                     .colone-picto{
                         display: grid;
                         grid-template-columns: auto auto;
                         grid-template-rows: auto auto;
                         padding: 1rem;
+                        @media(max-width: 500px){
+                            padding-left: 0;
+                            padding-right: 0;
+                        }
                         p{
                             flex: 1 15%;
                             padding: 0rem;
@@ -136,11 +160,17 @@
                     flex-direction: column;
                     align-items: center;
                     padding: 1rem;
+                    @media(max-width: 500px){
+                        width: 90%;
+                    }
                     .field_field_title{
                         color: $blue_QDD;
                         font-size: 1.2rem;
                         font-weight: 500;
                         padding-bottom: 1.5rem;
+                        @media(max-width: 500px){
+                            padding-bottom: 0.8rem;
+                        }
 
                     }
                 }
@@ -158,8 +188,14 @@
                             display: flex;
                             flex-direction: row;                           
                             justify-content: space-between ;
+                            @media(max-width: 500px){
+                                flex-direction: column;
+                            }
                             p{
                                 width: 30%;
+                                @media(max-width: 500px){
+                                    width: 100%;
+                                }
                             }
                         }
                     }
diff --git a/web/themes/custom/quartiers_de_demain/src/assets/scss/partials/header.scss b/web/themes/custom/quartiers_de_demain/src/assets/scss/partials/header.scss
index 8bd3c38..67855e9 100644
--- a/web/themes/custom/quartiers_de_demain/src/assets/scss/partials/header.scss
+++ b/web/themes/custom/quartiers_de_demain/src/assets/scss/partials/header.scss
@@ -9,7 +9,9 @@ header{
     position: fixed;
     top: 0;
     transition: height 0.3s, padding 0.3s; /* Add transition for smooth resizing */
-
+    @media(max-width: 500px){
+        height: $header-height-pad;
+    }
 
     .contextual-region{
         width: max-content;
@@ -23,7 +25,7 @@ header{
         background-color: $white-header;
         @media(max-width: 660px){
         height: inherit;
-    }
+        }
         #block-quartiers-de-demain-logorepu-2{
         display: none;
         @media(max-width: 891px){
@@ -117,12 +119,25 @@ header{
                 position: relative;
                 top: calc($header-height / 4 );
                 padding-left: 1rem;
+                padding-right: 1rem;
                 margin: 0;
+                @media(max-width: 500px){
+                    top: calc($header-height-pad / 4 );
+                }
                 li{
+                    @media(max-width: 500px){
+                        padding-top: 0.3rem;
+                    }
                     a{
+
                         text-transform: uppercase;
                         color: white;
                         font-size: 0.5rem;
+                        @media(max-width: 500px){
+                            display: flex;
+                            flex-direction: column;
+                            align-items: flex-start;
+                        }
                     }
                     &:not(:last-of-type){
                         ::after{