responsive /projets & /incubateur

web/themes/custom/eql/css-compiled/styles.css

@@ -189,11 +189,11 @@ a {
 
 @media (max-width: 479px) {
   #header-top #block-logogouv img {
-    min-width: 60px;
+    min-width: 45px;
     width: 70%;
     height: auto; }
   #header-top #block-logoeql img {
-    min-width: 60px;
+    min-width: 45px;
     width: 80%;
     height: auto; }
   .path-frontpage .block-region-content .block-views-blockactus-blocks-pages-block-1 .view-actus-blocks-pages .view-content {
@@ -2928,16 +2928,33 @@ a {
         margin-top: 4rem;
         display: flex;
         flex-direction: row; }
+        @media (max-width: 479px) {
+          .path-projets .region-content #block-contenudelapageprincipale .layout--onecol .block-region-content .block-views-blockprojets-block-1 .view-projets .view-filters {
+            flex-direction: column;
+            padding-bottom: 3rem; } }
         .path-projets .region-content #block-contenudelapageprincipale .layout--onecol .block-region-content .block-views-blockprojets-block-1 .view-projets .view-filters::before {
           content: 'Filtrer par :';
           margin-right: 1rem; }
+          @media (max-width: 479px) {
+            .path-projets .region-content #block-contenudelapageprincipale .layout--onecol .block-region-content .block-views-blockprojets-block-1 .view-projets .view-filters::before {
+              padding-bottom: 1rem; } }
         .path-projets .region-content #block-contenudelapageprincipale .layout--onecol .block-region-content .block-views-blockprojets-block-1 .view-projets .view-filters #views-exposed-form-projets-block-1 {
           display: flex;
           flex-direction: row; }
           .path-projets .region-content #block-contenudelapageprincipale .layout--onecol .block-region-content .block-views-blockprojets-block-1 .view-projets .view-filters #views-exposed-form-projets-block-1 #edit-field-neuf-rehabilitation-value--wrapper legend {
             display: none; }
+          .path-projets .region-content #block-contenudelapageprincipale .layout--onecol .block-region-content .block-views-blockprojets-block-1 .view-projets .view-filters #views-exposed-form-projets-block-1 #edit-field-neuf-rehabilitation-value--wrapper .js-form-item-field-neuf-rehabilitation-value:first-of-type {
+            display: none; }
+          @media (max-width: 479px) {
+            .path-projets .region-content #block-contenudelapageprincipale .layout--onecol .block-region-content .block-views-blockprojets-block-1 .view-projets .view-filters #views-exposed-form-projets-block-1 #edit-field-neuf-rehabilitation-value--wrapper {
+              padding-bottom: 1rem; } }
           .path-projets .region-content #block-contenudelapageprincipale .layout--onecol .block-region-content .block-views-blockprojets-block-1 .view-projets .view-filters #views-exposed-form-projets-block-1 #edit-field-encours-fini-value--wrapper legend {
             display: none; }
+          .path-projets .region-content #block-contenudelapageprincipale .layout--onecol .block-region-content .block-views-blockprojets-block-1 .view-projets .view-filters #views-exposed-form-projets-block-1 #edit-field-encours-fini-value--wrapper .js-form-item-field-encours-fini-value:first-of-type {
+            display: none; }
+          @media (max-width: 479px) {
+            .path-projets .region-content #block-contenudelapageprincipale .layout--onecol .block-region-content .block-views-blockprojets-block-1 .view-projets .view-filters #views-exposed-form-projets-block-1 #edit-field-encours-fini-value--wrapper {
+              padding-bottom: 1rem; } }
           .path-projets .region-content #block-contenudelapageprincipale .layout--onecol .block-region-content .block-views-blockprojets-block-1 .view-projets .view-filters #views-exposed-form-projets-block-1 .js-form-type-textfield label {
             display: none; }
           .path-projets .region-content #block-contenudelapageprincipale .layout--onecol .block-region-content .block-views-blockprojets-block-1 .view-projets .view-filters #views-exposed-form-projets-block-1 input[type="radio"] {
@@ -2964,6 +2981,10 @@ a {
             border: none;
             padding: 0.1rem 0.7rem;
             margin-left: 2rem; }
+            @media (max-width: 479px) {
+              .path-projets .region-content #block-contenudelapageprincipale .layout--onecol .block-region-content .block-views-blockprojets-block-1 .view-projets .view-filters #views-exposed-form-projets-block-1 #edit-submit-projets {
+                margin-left: 0rem;
+                margin-right: 2rem; } }
           .path-projets .region-content #block-contenudelapageprincipale .layout--onecol .block-region-content .block-views-blockprojets-block-1 .view-projets .view-filters #views-exposed-form-projets-block-1 #edit-reset {
             background-color: #009ee3;
             color: white;
@@ -2986,6 +3007,11 @@ a {
             margin-right: 0.5rem; }
           .path-projets .region-content #block-contenudelapageprincipale .layout--onecol .block-region-content .block-views-blockprojets-block-1 .view-projets .view-filters #views-exposed-form-projets-block-1 input[type="checkbox"]:checked + label::before {
             background: #009ee3; }
+          @media (max-width: 479px) {
+            .path-projets .region-content #block-contenudelapageprincipale .layout--onecol .block-region-content .block-views-blockprojets-block-1 .view-projets .view-filters #views-exposed-form-projets-block-1 {
+              flex-direction: column; }
+              .path-projets .region-content #block-contenudelapageprincipale .layout--onecol .block-region-content .block-views-blockprojets-block-1 .view-projets .view-filters #views-exposed-form-projets-block-1 #edit-actions {
+                width: 100%; } }
       .path-projets .region-content #block-contenudelapageprincipale .layout--onecol .block-region-content .block-views-blockprojets-block-1 .view-projets .view-content {
         margin-top: 2rem;
         display: flex;
@@ -3005,6 +3031,11 @@ a {
         padding: 0.5rem;
         padding-right: 1rem;
         padding-left: 1rem; }
+        @media (max-width: 479px) {
+          .path-projets .region-content #block-contenudelapageprincipale .layout--onecol .block-region-content .block-views-blockprojets-block-1 .view-projets .node-type-projet {
+            padding-left: 0rem;
+            padding-right: 0rem;
+            padding-top: 2rem; } }
         .path-projets .region-content #block-contenudelapageprincipale .layout--onecol .block-region-content .block-views-blockprojets-block-1 .view-projets .node-type-projet div:first-child {
           display: flex;
           flex-direction: column; }
@@ -3454,18 +3485,38 @@ a {
           margin-top: 4rem;
           display: flex;
           flex-direction: row; }
+          @media (max-width: 479px) {
+            .path-incubateur .layout-container .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--bottom .block-region-bottom .block-views-blockprojets-block-3 .view-projets .view-filters {
+              flex-direction: column;
+              padding-bottom: 3rem; } }
           .path-incubateur .layout-container .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--bottom .block-region-bottom .block-views-blockprojets-block-3 .view-projets .view-filters::before {
             content: 'Filtrer par :';
             margin-right: 1rem; }
+            @media (max-width: 479px) {
+              .path-incubateur .layout-container .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--bottom .block-region-bottom .block-views-blockprojets-block-3 .view-projets .view-filters::before {
+                padding-bottom: 1rem; } }
           .path-incubateur .layout-container .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--bottom .block-region-bottom .block-views-blockprojets-block-3 .view-projets .view-filters #views-exposed-form-projets-block-3 {
             display: flex;
             flex-direction: row; }
             .path-incubateur .layout-container .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--bottom .block-region-bottom .block-views-blockprojets-block-3 .view-projets .view-filters #views-exposed-form-projets-block-3 #edit-field-neuf-rehabilitation-value--wrapper legend {
               display: none; }
+            .path-incubateur .layout-container .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--bottom .block-region-bottom .block-views-blockprojets-block-3 .view-projets .view-filters #views-exposed-form-projets-block-3 #edit-field-neuf-rehabilitation-value--wrapper .js-form-item-field-neuf-rehabilitation-value:first-of-type {
+              display: none; }
+            @media (max-width: 479px) {
+              .path-incubateur .layout-container .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--bottom .block-region-bottom .block-views-blockprojets-block-3 .view-projets .view-filters #views-exposed-form-projets-block-3 #edit-field-neuf-rehabilitation-value--wrapper {
+                padding-bottom: 1rem; } }
             .path-incubateur .layout-container .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--bottom .block-region-bottom .block-views-blockprojets-block-3 .view-projets .view-filters #views-exposed-form-projets-block-3 #edit-field-encours-fini-value--wrapper legend {
               display: none; }
+            .path-incubateur .layout-container .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--bottom .block-region-bottom .block-views-blockprojets-block-3 .view-projets .view-filters #views-exposed-form-projets-block-3 #edit-field-encours-fini-value--wrapper .js-form-item-field-encours-fini-value:first-of-type {
+              display: none; }
+            @media (max-width: 479px) {
+              .path-incubateur .layout-container .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--bottom .block-region-bottom .block-views-blockprojets-block-3 .view-projets .view-filters #views-exposed-form-projets-block-3 #edit-field-encours-fini-value--wrapper {
+                padding-bottom: 1rem; } }
             .path-incubateur .layout-container .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--bottom .block-region-bottom .block-views-blockprojets-block-3 .view-projets .view-filters #views-exposed-form-projets-block-3 .js-form-type-textfield label {
               display: none; }
+            @media (max-width: 479px) {
+              .path-incubateur .layout-container .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--bottom .block-region-bottom .block-views-blockprojets-block-3 .view-projets .view-filters #views-exposed-form-projets-block-3 .js-form-type-textfield {
+                padding-bottom: 1rem; } }
             .path-incubateur .layout-container .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--bottom .block-region-bottom .block-views-blockprojets-block-3 .view-projets .view-filters #views-exposed-form-projets-block-3 input[type="radio"] {
               display: none; }
             .path-incubateur .layout-container .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--bottom .block-region-bottom .block-views-blockprojets-block-3 .view-projets .view-filters #views-exposed-form-projets-block-3 input[type="radio"] + label::before {
@@ -3490,6 +3541,10 @@ a {
               border: none;
               padding: 0.1rem 0.7rem;
               margin-left: 2rem; }
+              @media (max-width: 479px) {
+                .path-incubateur .layout-container .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--bottom .block-region-bottom .block-views-blockprojets-block-3 .view-projets .view-filters #views-exposed-form-projets-block-3 #edit-submit-projets {
+                  margin-left: 0rem;
+                  margin-right: 2rem; } }
             .path-incubateur .layout-container .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--bottom .block-region-bottom .block-views-blockprojets-block-3 .view-projets .view-filters #views-exposed-form-projets-block-3 #edit-reset {
               background-color: #009ee3;
               color: white;
@@ -3497,19 +3552,33 @@ a {
               border: none;
               padding: 0.1rem 0.7rem;
               margin-left: 1rem; }
+            @media (max-width: 479px) {
+              .path-incubateur .layout-container .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--bottom .block-region-bottom .block-views-blockprojets-block-3 .view-projets .view-filters #views-exposed-form-projets-block-3 {
+                flex-direction: column; } }
         .path-incubateur .layout-container .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--bottom .block-region-bottom .block-views-blockprojets-block-3 .view-projets .view-content {
           margin-top: 2rem;
           display: flex;
           flex-direction: row;
           flex-wrap: wrap; }
+          @media (max-width: 810px) {
+            .path-incubateur .layout-container .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--bottom .block-region-bottom .block-views-blockprojets-block-3 .view-projets .view-content {
+              flex-direction: column; } }
           .path-incubateur .layout-container .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--bottom .block-region-bottom .block-views-blockprojets-block-3 .view-projets .view-content .views-row {
             width: 25%; }
+            @media (max-width: 810px) {
+              .path-incubateur .layout-container .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--bottom .block-region-bottom .block-views-blockprojets-block-3 .view-projets .view-content .views-row {
+                width: 100%; } }
         .path-incubateur .layout-container .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--bottom .block-region-bottom .block-views-blockprojets-block-3 .view-projets .node-type-projet {
           color: #09398b;
           line-height: 1.5rem;
           padding: 0.5rem;
           padding-right: 1rem;
           padding-left: 1rem; }
+          @media (max-width: 479px) {
+            .path-incubateur .layout-container .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--bottom .block-region-bottom .block-views-blockprojets-block-3 .view-projets .node-type-projet {
+              padding-left: 0rem;
+              padding-right: 0rem;
+              padding-top: 2rem; } }
           .path-incubateur .layout-container .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--bottom .block-region-bottom .block-views-blockprojets-block-3 .view-projets .node-type-projet div:first-child {
             display: flex;
             flex-direction: column; }
@@ -3565,12 +3634,12 @@ a {
 
 /*partials*/
 .layout-container {
-  position: relative; }
+  position: relative;
+  width: 100vw; }
   .layout-container header {
-    width: 100%;
     position: fixed;
     z-index: 99;
-    max-width: 100vw; }
+    width: 100vw; }
 
 #header-top {
   height: 7rem;

web/themes/custom/eql/scss/global/_mediaqueries.scss

@@ -91,14 +91,14 @@
     #header-top{
         #block-logogouv{
             img{
-                min-width: 60px;
+                min-width: 45px;
                 width: 70%;
                 height: auto;
             }
         }
         #block-logoeql{
             img{
-                min-width: 60px;
+                min-width: 45px;
                 width: 80%;
                 height: auto;
             }

web/themes/custom/eql/scss/pages/_incubateur.scss

@@ -307,13 +307,21 @@
                            
                                             width: 80%;
                                             margin: auto;
+
                                             .view-filters{
                                                 margin-top: 4rem;
                                                 display: flex;
                                                 flex-direction: row;
+                                                @media (max-width: 479px){
+                                                    flex-direction: column;
+                                                    padding-bottom: 3rem;
+                                                }
                                                 &::before{
                                                     content: 'Filtrer par :';
                                                     margin-right: 1rem;
+                                                    @media (max-width: 479px){
+                                                        padding-bottom: 1rem;
+                                                    }
                                                 }
                                                 #views-exposed-form-projets-block-3{
                                                     // width: 100%;
@@ -321,12 +329,27 @@
                                                     flex-direction: row;
                                                     #edit-field-neuf-rehabilitation-value--wrapper{
                                                         legend{display: none;}
+                                                        .js-form-item-field-neuf-rehabilitation-value:first-of-type{
+                                                            display: none;
+                                                        }
+                                                        @media (max-width: 479px){
+                                                            padding-bottom: 1rem;
+                                                        }
                                                     }
                                                     #edit-field-encours-fini-value--wrapper{
                                                         legend{display: none;}
+                                                        .js-form-item-field-encours-fini-value:first-of-type{
+                                                            display: none;
+                                                        }
+                                                        @media (max-width: 479px){
+                                                            padding-bottom: 1rem;
+                                                        }
                                                     }
                                                     .js-form-type-textfield{
                                                         label{display: none;}
+                                                        @media (max-width: 479px){
+                                                            padding-bottom: 1rem;
+                                                        }
                                                     }
                                                     input[type="radio"]{
                                                         display: none;
@@ -357,6 +380,10 @@
                                                         border: none;
                                                         padding: 0.1rem 0.7rem;
                                                         margin-left: 2rem;
+                                                        @media (max-width: 479px){
+                                                            margin-left: 0rem;
+                                                            margin-right: 2rem;
+                                                        }
                                                        
                                                     }
                                                     #edit-reset{
@@ -367,6 +394,10 @@
                                                         padding: 0.1rem 0.7rem;
                                                         margin-left: 1rem;
                                                     }
+                                                    @media (max-width: 479px){
+                                                        flex-direction: column;
+                                                       
+                                                    }
                                                 }
                         
                         
@@ -378,9 +409,16 @@
                                                 display: flex;
                                                 flex-direction: row;
                                                 flex-wrap: wrap;
+                                                @media (max-width: 810px){
+                                                    flex-direction: column;
+                                                }
                                                 .views-row{
                                                     width: 25%;
                                                     // flex: 0 0 25%;
+                                                    @media (max-width: 810px){
+                                            
+                                                        width: 100%;
+                                                    }
                                                 }
                         
                                             }
@@ -390,6 +428,11 @@
                                                 padding: 0.5rem;
                                                 padding-right: 1rem;
                                                 padding-left: 1rem;
+                                                @media (max-width: 479px){
+                                                    padding-left: 0rem;
+                                                    padding-right: 0rem;
+                                                    padding-top: 2rem;
+                                                }
                                                 div:first-child{                
                                                     display: flex;
                                                     flex-direction: column;

web/themes/custom/eql/scss/pages/_lesprojets.scss

@@ -116,18 +116,40 @@
                                     margin-top: 4rem;
                                     display: flex;
                                     flex-direction: row;
+                                    @media (max-width: 479px){
+                                        flex-direction: column;
+                                        padding-bottom: 3rem;
+                                    }
+                                  
                                     &::before{
                                         content: 'Filtrer par :';
                                         margin-right: 1rem;
+                                        @media (max-width: 479px){
+                                            padding-bottom: 1rem;
+                                        }
                                     }
+
                                     #views-exposed-form-projets-block-1{
+                                        
                                         display: flex;
                                         flex-direction: row;
                                         #edit-field-neuf-rehabilitation-value--wrapper{
                                             legend{display: none;}
+                                            .js-form-item-field-neuf-rehabilitation-value:first-of-type{
+                                                display: none;
+                                            }
+                                            @media (max-width: 479px){
+                                                padding-bottom: 1rem;
+                                            }
                                         }
                                         #edit-field-encours-fini-value--wrapper{
                                             legend{display: none;}
+                                            .js-form-item-field-encours-fini-value:first-of-type{
+                                                display: none;
+                                            }
+                                            @media (max-width: 479px){
+                                                padding-bottom: 1rem;
+                                            }
                                         }
                                         .js-form-type-textfield{
                                             label{display: none;}
@@ -161,6 +183,10 @@
                                             border: none;
                                             padding: 0.1rem 0.7rem;
                                             margin-left: 2rem;
+                                            @media (max-width: 479px){
+                                                margin-left: 0rem;
+                                                margin-right: 2rem;
+                                            }
                                            
                                         }
                                         #edit-reset{
@@ -191,7 +217,12 @@
                                         input[type="checkbox"]:checked + label::before{
                                             background:$blue-light;
                                         }
-
+                                        @media (max-width: 479px){
+                                            flex-direction: column;
+                                            #edit-actions{
+                                                width: 100%;
+                                            }
+                                        }
                                     }
             
             
@@ -223,6 +254,11 @@
                                     padding: 0.5rem;
                                     padding-right: 1rem;
                                     padding-left: 1rem;
+                                    @media (max-width: 479px){
+                                        padding-left: 0rem;
+                                        padding-right: 0rem;
+                                        padding-top: 2rem;
+                                    }
                                     div:first-child{                
                                         display: flex;
                                         flex-direction: column;

web/themes/custom/eql/scss/partials/_header.scss

@@ -1,12 +1,15 @@
 
 .layout-container{
     position: relative;
+    width: 100vw;
+
     header{                       
         // display: block;
-        width: 100%;
+        // width: 100%;
         position: fixed;
         z-index: 99;
-        max-width: 100vw;
+        width: 100vw;
+
         // position: -webkit-sticky;
         // position: sticky;
         // top: 0;