From ad8f1ddf0de37e6362ae1e43659d965f0506f853 Mon Sep 17 00:00:00 2001
From: ouidade <ouidade@figureslibres.io>
Date: Thu, 30 May 2024 13:51:05 +0200
Subject: [PATCH] slide home

---
 .../custom/eql/dist/assets/css/bundle.css     |  99 ++++------
 web/themes/custom/eql/scss/pages/_home.scss   | 185 ++++++------------
 .../eql/scss/partials/_slick-theme.scss       |   4 +-
 3 files changed, 97 insertions(+), 191 deletions(-)

diff --git a/web/themes/custom/eql/dist/assets/css/bundle.css b/web/themes/custom/eql/dist/assets/css/bundle.css
index eb58855..280f0df 100644
--- a/web/themes/custom/eql/dist/assets/css/bundle.css
+++ b/web/themes/custom/eql/dist/assets/css/bundle.css
@@ -521,42 +521,32 @@ a {
 
 .path-frontpage .block-views-blockactus-blocks-pages-block-1 {
   width: 100vw;
-  height: 550px;
+  height: auto;
   border-bottom: 5px solid rgb(0, 158, 227);
   background: rgba(0, 158, 227, 0.2);
 }
 @media (max-width: 810px) {
   .path-frontpage .block-views-blockactus-blocks-pages-block-1 {
-    height: 580px;
+    height: auto;
   }
 }
-@media (max-width: 792px) {
-  .path-frontpage .block-views-blockactus-blocks-pages-block-1 {
-    max-height: fit-content;
-  }
-}
-@media (max-width: 724px) {
-  .path-frontpage .block-views-blockactus-blocks-pages-block-1 {
-    max-height: fit-content;
-  }
-}
-@media (max-width: 479px) {
+@media (max-width: 792px), (max-width: 724px), (max-width: 479px) {
   .path-frontpage .block-views-blockactus-blocks-pages-block-1 {
     max-height: fit-content;
   }
 }
 .path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content {
-  height: 90%;
+  height: auto;
 }
 @media (max-width: 810px) {
   .path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .slick-list {
     width: 100vw !important;
-    height: fit-content !important;
+    height: auto !important;
   }
 }
 @media (max-width: 479px) {
   .path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .slick-list {
-    height: fit-content !important;
+    height: auto !important;
     width: 100vw !important;
   }
 }
@@ -567,13 +557,14 @@ a {
   color: rgb(0, 0, 0);
   line-height: 1.5rem;
   width: 80%;
-  height: 456px;
+  height: auto;
   margin: auto;
+  margin-bottom: 2rem;
 }
 @media (max-width: 810px) {
   .path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite {
     width: 65%;
-    height: fit-content;
+    height: auto;
   }
 }
 .path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite div:first-child {
@@ -585,7 +576,7 @@ a {
   .path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite div:first-child {
     display: flex;
     flex-direction: column;
-    height: fit-content;
+    height: auto;
   }
 }
 .path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite div:first-child .field--name-field-images {
@@ -627,17 +618,36 @@ a {
     padding-bottom: 1rem;
   }
 }
-.path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite div:first-child .field--name-field-date {
+.path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite div:first-child .field--name-field-date,
+.path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite div:first-child .field--name-field-lieu,
+.path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite div:first-child .field--name-title,
+.path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite div:first-child .field--name-field-sous-titre,
+.path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite div:first-child .field--name-field-actu-type {
   display: inline-block;
   block-size: fit-content;
   grid-column: 9/span 9;
-  order: 2;
+  order: auto;
 }
 @media (min-width: 811px) {
-  .path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite div:first-child .field--name-field-date {
-    margin-top: 5rem;
+  .path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite div:first-child .field--name-field-date,
+  .path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite div:first-child .field--name-field-lieu,
+  .path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite div:first-child .field--name-title,
+  .path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite div:first-child .field--name-field-sous-titre,
+  .path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite div:first-child .field--name-field-actu-type {
+    margin-top: 1rem;
   }
 }
+.path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite div:first-child .field--name-field-date:empty,
+.path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite div:first-child .field--name-field-lieu:empty,
+.path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite div:first-child .field--name-title:empty,
+.path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite div:first-child .field--name-field-sous-titre:empty,
+.path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite div:first-child .field--name-field-actu-type:empty,
+.path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite div:first-child .ul:empty {
+  display: none;
+}
+.path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite div:first-child .field--name-field-date {
+  order: 2;
+}
 .path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite div:first-child .field--name-field-date div {
   display: flex !important;
   flex-direction: row;
@@ -650,17 +660,6 @@ a {
   padding-right: 1rem;
   width: fit-content;
 }
-.path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite div:first-child .field--name-field-lieu {
-  display: inline-block;
-  block-size: fit-content;
-  grid-column: 9/span 9;
-  order: 3;
-}
-@media (min-width: 811px) {
-  .path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite div:first-child .field--name-field-lieu {
-    margin-top: 1rem;
-  }
-}
 .path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite div:first-child .field--name-field-lieu .field__label {
   display: none;
 }
@@ -670,33 +669,20 @@ a {
     order: 3;
   }
 }
-.path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite div:first-child .field--name-title {
-  display: inline-flex;
-  block-size: fit-content;
-  grid-column: 9/span 9;
-  order: 4;
-}
-@media (min-width: 811px) {
-  .path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite div:first-child .field--name-title {
-    margin-top: 1rem;
-  }
-}
 .path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite div:first-child .field--name-title h2 a {
   color: rgb(0, 158, 227) !important;
 }
 .path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite div:first-child .field--name-field-sous-titre {
-  display: inline-block;
-  block-size: fit-content;
-  grid-column: 9/span 9;
-  order: 5;
   font-weight: 800;
 }
 @media (min-width: 811px) {
   .path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite div:first-child .field--name-field-sous-titre {
     font-size: 1.5rem;
-    margin-top: 1rem;
   }
 }
+.path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite div:first-child .field--name-field-actu-type {
+  order: 6;
+}
 .path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite div:first-child .field:not(.field--name-field-images) {
   width: 100%;
 }
@@ -717,17 +703,6 @@ a {
 .path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite div:first-child .inline.links a {
   display: none;
 }
-.path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite div:first-child .field--name-field-actu-type {
-  display: inline-block;
-  block-size: fit-content;
-  grid-column: 9/span 7;
-  order: 6;
-}
-@media (min-width: 811px) {
-  .path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite div:first-child .field--name-field-actu-type {
-    margin-top: 1rem;
-  }
-}
 .path-frontpage .block-block-content3ee1f633-aaa7-4b4c-a42a-02206e26d3a2 {
   visibility: hidden;
 }
@@ -6081,8 +6056,6 @@ html.js body.node-type-actualite.node-id-88.path-node.page-node-type-actualite d
 }
 
 .slick-dots {
-  position: absolute;
-  bottom: -25px;
   list-style: none;
   display: block;
   text-align: center;
diff --git a/web/themes/custom/eql/scss/pages/_home.scss b/web/themes/custom/eql/scss/pages/_home.scss
index 42753c0..5423a8a 100644
--- a/web/themes/custom/eql/scss/pages/_home.scss
+++ b/web/themes/custom/eql/scss/pages/_home.scss
@@ -4,37 +4,30 @@
 .path-frontpage{
         // bandeau actus
         .block-views-blockactus-blocks-pages-block-1{
-            // grid-area: actus;
             width: 100vw;
-            height: 550px;
+            height: auto;
             border-bottom: 5px solid $blue-light;
             background: $background-actus;
             @media(max-width: 810px){
-                height: 580px;
+                height: auto;
             }
-            @media(max-width:792px){
-                max-height: fit-content;
-            }
-            @media(max-width:724px){
-                max-height: fit-content;
-            }
-            @media(max-width: 479px){
+            @media (max-width: 792px),
+            (max-width: 724px),
+            (max-width: 479px) {
                 max-height: fit-content;
             }
             
             div{
-                // height: 100%;
                 .view-actus-blocks-pages{
-                    // height: 100%;
                     .view-content{
-                        height: 90%;
+                        height: auto;
                         .slick-list{
                             @media(max-width: 810px){
                                 width: 100vw !important;
-                                height: fit-content !important;
+                                height: auto !important;
                                 } 
                             @media(max-width: 479px){
-                            height: fit-content !important;
+                            height: auto !important;
                             width: 100vw !important;
                             }   
                         }
@@ -46,22 +39,22 @@
                                 color: $black;
                                 line-height: 1.5rem;
                                 width: 80%;
-                                height: 456px;
+                                height: auto;
                                 margin: auto;
+                                margin-bottom: 2rem;
                                 @media (max-width: 810px){ 
                                     width: 65%;
-                                    height: fit-content;
+                                    height: auto;
 
                                 }
                                 div:first-child{           // block actu dans le bandeau
                                     display: grid;
                                     grid-template-columns: 1fr repeat(9, 1fr) 1fr;
-                                    // grid-template-rows: repeat(6, 1fr);
                                     column-gap: 30px;
                                     @media (max-width: 810px){ 
                                         display: flex;
                                         flex-direction: column;
-                                        height: fit-content;
+                                        height: auto;
                                     }
                                     .field--name-field-images {
                                         order: 1;
@@ -76,7 +69,6 @@
                                             max-height: 456px;
                                             object-fit: cover;
                                             object-position: center;
-                                            // padding-left: 1rem;
                                             @media(max-width:810px){
                                                 max-height: 310px;
                                                 max-width: 100%;
@@ -84,9 +76,7 @@
                                                 padding-left: 0;
                                                 margin-bottom: 1rem;
                                             }
-                                            @media(max-width:792px){
-                                                // max-height: 450px;
-                                            }
+                                            
                                             @media(max-width:724px){
                                                 max-height: 400px;
                                             }
@@ -101,15 +91,33 @@
                                             }
                                         }
                                     }
-                                    
-                                    .field--name-field-date{
+                                    .field--name-field-date,
+                                    .field--name-field-lieu,
+                                    .field--name-title,
+                                    .field--name-field-sous-titre,
+                                    .field--name-field-actu-type {
                                         display: inline-block;
                                         block-size: fit-content;
                                         grid-column: 9 / span 9;
-                                        // grid-row: 2;
+                                        order: auto;
+                                        @media (min-width: 811px) {
+                                            margin-top: 1rem;
+                                        }
+                                    }
+                                    .field--name-field-date:empty,
+                                    .field--name-field-lieu:empty,
+                                    .field--name-title:empty,
+                                    .field--name-field-sous-titre:empty,
+                                    .field--name-field-actu-type:empty,
+                                    .ul:empty{
+                                        display: none;
+                                    }
+                                    
+                                    
+                                    .field--name-field-date{
                                         order: 2;
                                         @media (min-width: 811px) {
-                                            margin-top: 5rem;
+                                            // margin-top: 5rem;
                                         }
                                         div{
                                             display: flex !important;
@@ -126,16 +134,6 @@
                                     }
     
                                     .field--name-field-lieu{
-                                        display: inline-block;
-                                        block-size: fit-content;
-                                        grid-column: 9 / span 9;
-                                        // grid-row: 3;
-                                        order: 3;
-                                        @media (min-width: 811px) {
-                                            margin-top: 1rem;  
-                                        }                                        
-                                        // display: flex !important;
-                                        // flex-direction: row;
                                         .field__label{
                                             display: none;
                                         }
@@ -146,116 +144,58 @@
                                         }
                                         
                                     }
-                                    .field--name-title{
-                                        display: inline-flex;
-                                        block-size: fit-content;
-                                        grid-column: 9 / span 9;
-                                        // grid-row: 4;
-                                        order:4;
-                                        @media (min-width: 811px) {
-                                            margin-top: 1rem;  
-                                        }
-                                        h2 a{
+                                    .field--name-title {
+                                        h2 a {
                                             color: $blue-light !important;
                                         }
                                     }
-                                    .field--name-field-sous-titre{
-                                        display: inline-block;
-                                        block-size: fit-content;
-                                        grid-column: 9 / span 9;
-                                        // grid-row: 5;
-                                        order:5;
+        
+                                    .field--name-field-sous-titre {
                                         font-weight: 800;
                                         @media (min-width: 811px) {
-                                            font-size: 1.5rem; 
-                                            margin-top: 1rem;  
+                                            font-size: 1.5rem;
                                         }
                                     }
-                                    
-                                    .field:not(.field--name-field-images){
+        
+                                    .field--name-field-actu-type {
+                                        order: 6;
+                                    }
+        
+                                    .field:not(.field--name-field-images) {
                                         width: 100%;
                                     }
-                                    h2{ margin:0; }
-                                    a{ 
-                                        color: $black; 
-                                        grid-column: 1/span 8;
-                                    } 
-                        
-                                    .inline.links{
+        
+                                    h2 {
+                                        margin: 0;
+                                    }
+        
+                                    a {
+                                        color: $black;
+                                        grid-column: 1 / span 8;
+                                    }
+        
+                                    .inline.links {
                                         padding-top: none !important;
                                         list-style: none;
                                         width: fit-content;
                                         align-self: flex-end;
                                         padding-right: 1rem;
-                                        a{
+                                        a {
                                             display: none;
                                         }
                                     }
-                                    .field--name-field-actu-type{
-                                        display: inline-block;
-                                        block-size: fit-content;
-                                        grid-column: 9 / span 7;
-                                        // grid-row: 6;
-                                        order:6;
-                                        @media (min-width: 811px) {
-                                            margin-top: 1rem;  
-                                        }                                        
-                                        // padding-top: 1rem;
-                                    }
                                 }
-
                             }
                         }
-                       
-
                     }
                 }
             }
-
         }
+        
     
         // bouton voir toutes actus du bandeau bleu
         .block-block-content3ee1f633-aaa7-4b4c-a42a-02206e26d3a2{
             visibility: hidden;
-            // grid-area: actus;
-            // grid-row: 6;
-            // grid-column: 5 / span 6;
-            // max-width: 50%;
-            // min-width: fit-content;
-            // margin-bottom: 2rem; 
-            // align-self: flex-end; 
-            // @media (max-width: 479px){ 
-            //     grid-column: 2 / span 4; 
-            //     max-width: 80%;
-            //     margin: auto;
-            //     margin-top: 1rem;
-            //     margin-bottom: 1.5rem;
-            // }
-                         
-            // .field--type-link {
-            //     width: fit-content;
-            //     height: fit-content;
-            //     padding: 0.4rem 1rem;
-            //     font-size: 0.8rem;
-            //     margin: 0;
-            //     background-color: $white;
-            //     border: 2px solid $blue-light;  
-            //     list-style: none; 
-            //     display: inline-flex;
-              
-            //     a{
-            //         text-transform: uppercase;
-            //         font-weight: 700;
-            //         color: $blue-light;
-            //         display: inline-flex;
-            //         align-items: center;    
-        
-            //     } 
-            //     a::after{
-            //         content: url('data:image/svg+xml,<svg width="40" height="20" xmlns="http://www.w3.org/2000/svg" version="1.1"><polyline points="71.9,49 24.3,49 24.3,51 71.9,51 58.1,64.8 59.5,66.2 75.7,50 59.5,33.8 58.1,35.2" transform="scale(0.5) translate(0,-25)"  fill="rgb(0,158,227)" stroke="rgb(0,158,227)" stroke-width="0.7"/></svg>');
-            
-            //     }
-            // }
         }
 
         
@@ -266,13 +206,6 @@
             .view-display-id-block_2:is(.view-id-home_nodes){
                 padding-top: 2rem;
                 padding-bottom: 4rem;
-                // // background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"  version="1.1"><rect x="0" y="0" width="80" height="80" transform="rotate(35) translate(430, -800) scale(15)" fill="none" stroke="rgb(0,158,227)" stroke-width="0.4px"/></svg>');
-                // background: url('../images/pictos/carre-contour-bleu.svg');
-                // // background-position-y: 50%;
-                // background-repeat: no-repeat;
-                // max-width: 100vw;
-                // background-size: cover;
-
                 
                 .node-type-static{
                     width: 80%;
diff --git a/web/themes/custom/eql/scss/partials/_slick-theme.scss b/web/themes/custom/eql/scss/partials/_slick-theme.scss
index 0954a70..d4aae92 100644
--- a/web/themes/custom/eql/scss/partials/_slick-theme.scss
+++ b/web/themes/custom/eql/scss/partials/_slick-theme.scss
@@ -142,8 +142,8 @@ html.js body.node-type-actualite.node-id-88.path-node.page-node-type-actualite d
 }
 
 .slick-dots {
-    position: absolute;
-    bottom: -25px;
+    // position: absolute;
+    // bottom: -25px;
     list-style: none;
     display: block;
     text-align: center;