new twig et css teaser actus home

web/themes/custom/eql/dist/assets/css/bundle.css

@@ -590,35 +590,34 @@ svg.ext {
     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 {
-  display: grid;
-  grid-template-columns: 1fr repeat(9, 1fr) 1fr;
-  column-gap: 30px;
+.path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite .actus-teaser-home {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  margin-left: 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 div:first-child {
+  .path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite .actus-teaser-home {
     display: flex;
     flex-direction: column;
     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 {
-  order: 1;
-  grid-column: 1/span 8;
-  grid-row: 1/span 6;
+.path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite .actus-teaser-home .home_actu_photo {
+  width: 50%;
 }
-.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 .field__item {
+.path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite .actus-teaser-home .home_actu_photo .field--name-field-images .field__item {
   display: flex;
   max-height: 420px;
 }
-.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 .field__item img {
+.path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite .actus-teaser-home .home_actu_photo .field--name-field-images .field__item img {
   max-width: 100%;
   max-height: 456px;
   object-fit: cover;
   object-position: center;
 }
 @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 div:first-child .field--name-field-images .field__item img {
+  .path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite .actus-teaser-home .home_actu_photo .field--name-field-images .field__item img {
     max-height: 310px;
     max-width: 100%;
     object-fit: cover;
@@ -627,12 +626,12 @@ svg.ext {
   }
 }
 @media (max-width: 724px) {
-  .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 .field__item img {
+  .path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite .actus-teaser-home .home_actu_photo .field--name-field-images .field__item img {
     max-height: 400px;
   }
 }
 @media (max-width: 680px) {
-  .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 .field__item img {
+  .path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite .actus-teaser-home .home_actu_photo .field--name-field-images .field__item img {
     height: 200px;
     object-fit: cover;
     max-width: 70vw;
@@ -641,89 +640,77 @@ svg.ext {
     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-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: 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,
-  .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 .actus-teaser-home .home_actu_infos {
+  width: 45%;
+  align-content: center;
+  color: rgb(9, 57, 139) !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-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 {
+.path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite .actus-teaser-home .home_actu_infos .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 .actus-teaser-home .home_actu_infos .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 .actus-teaser-home .home_actu_infos .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 .actus-teaser-home .home_actu_infos .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 .actus-teaser-home .home_actu_infos .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 .actus-teaser-home .home_actu_infos .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 .actus-teaser-home .home_actu_infos .field--name-field-date {
+  font-size: 1.3rem;
 }
-.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 {
+.path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite .actus-teaser-home .home_actu_infos .field--name-field-date div {
   display: flex !important;
   flex-direction: row;
 }
-.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 time {
+.path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite .actus-teaser-home .home_actu_infos .field--name-field-date time {
   display: flex;
   flex-direction: row;
-  font-size: 0.9rem;
+  font-size: 1.3rem;
   font-weight: 800;
   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 .field__label {
+.path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite .actus-teaser-home .home_actu_infos .field--name-field-lieu {
+  font-size: 1.3rem;
+  padding-top: 1rem;
+}
+.path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite .actus-teaser-home .home_actu_infos .field--name-field-lieu .field__label {
   display: none;
 }
 @media (max-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 {
+  .path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite .actus-teaser-home .home_actu_infos .field--name-field-lieu {
     display: inline-flex;
-    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 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 .actus-teaser-home .home_actu_infos .field--name-title {
+  line-height: 1.1;
+  font-size: 1.5rem;
+  padding-top: 1rem;
+}
+.path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite .actus-teaser-home .home_actu_infos .field--name-title h2 a {
+  color: rgb(9, 57, 139) !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 {
+.path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite .actus-teaser-home .home_actu_infos .field--name-field-sous-titre {
+  display: none;
   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 {
+  .path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite .actus-teaser-home .home_actu_infos .field--name-field-sous-titre {
     font-size: 1.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-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 .actus-teaser-home .home_actu_infos .field--name-field-actu-type {
+  padding-top: 2rem;
+  font-size: 1.3rem;
 }
-.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) {
+.path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite .actus-teaser-home .home_actu_infos .field:not(.field--name-field-images) {
   width: 100%;
 }
-.path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite div:first-child h2 {
+.path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite .actus-teaser-home .home_actu_infos h2 {
   margin: 0;
 }
-.path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite div:first-child a {
+.path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite .actus-teaser-home .home_actu_infos a {
   color: rgb(0, 0, 0);
-  grid-column: 1/span 8;
-}
-.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 {
-  padding-top: none !important;
-  list-style: none;
-  width: fit-content;
-  align-self: flex-end;
-  padding-right: 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 .inline.links a {
+.path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite .actus-teaser-home .home_actu_infos .inline.links {
   display: none;
 }
 .path-frontpage .block-block-content3ee1f633-aaa7-4b4c-a42a-02206e26d3a2 {

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

@@ -47,80 +47,82 @@
                                 height: auto;
                                 margin: auto;
                                 margin-bottom: 2rem;
+
                                 @media (max-width: 810px){ 
                                     width: 65%;
                                     height: auto;
 
                                 }
-                                div:first-child{           // block actu dans le bandeau
-                                    display: grid;
-                                    grid-template-columns: 1fr repeat(9, 1fr) 1fr;
-                                    column-gap: 30px;
+                                .actus-teaser-home{           // block actu dans le bandeau
+                                    // display: grid;
+                                    // grid-template-columns: 1fr repeat(9, 1fr) 1fr;
+                                    // column-gap: 30px;
+                                    display: flex;
+                                    flex-direction: row;
+                                    justify-content: space-between;
+                                    margin-left: 2rem;
                                     @media (max-width: 810px){ 
                                         display: flex;
                                         flex-direction: column;
                                         height: auto;
                                     }
-                                    .field--name-field-images {
-                                        order: 1;
-                                        grid-column: 1 /span 8;
-                                        grid-row: 1 / span 6;
-                                        .field__item{
-                                            display: flex;
-                                            max-height: 420px;
-                                        }
-                                        .field__item img{  
-                                            max-width: 100%;
-                                            max-height: 456px;
-                                            object-fit: cover;
-                                            object-position: center;
-                                            @media(max-width:810px){
-                                                max-height: 310px;
-                                                max-width: 100%;
-                                                object-fit: cover;
-                                                padding-left: 0;
-                                                margin-bottom: 1rem;
+                                    .home_actu_photo{
+                                        width: 50%;
+                                        .field--name-field-images {
+                                                .field__item{
+                                                    display: flex;
+                                                    max-height: 420px;
+                                                }
+                                                .field__item img{  
+                                                    max-width: 100%;
+                                                    max-height: 456px;
+                                                    object-fit: cover;
+                                                    object-position: center;
+                                                    @media(max-width:810px){
+                                                        max-height: 310px;
+                                                        max-width: 100%;
+                                                        object-fit: cover;
+                                                        padding-left: 0;
+                                                        margin-bottom: 1rem;
+                                                    }
+                                                    
+                                                    @media(max-width:724px){
+                                                        max-height: 400px;
+                                                    }
+                                                    @media (max-width: 680px){ 
+                                                        height: 200px;
+                                                        object-fit: cover;
+                                                        max-width: 70vw;
+                                                        margin: auto;
+                                                        padding-left: 0;
+                                                        padding-bottom: 1rem;
+                                                        
+                                                    }
+                                                }
                                             }
-                                            
-                                            @media(max-width:724px){
-                                                max-height: 400px;
-                                            }
-                                            @media (max-width: 680px){ 
-                                                height: 200px;
-                                                object-fit: cover;
-                                                max-width: 70vw;
-                                                margin: auto;
-                                                padding-left: 0;
-                                                padding-bottom: 1rem;
-                                                
-                                            }
-                                        }
                                     }
-                                    .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;
-                                        order: auto;
-                                        @media (min-width: 811px) {
-                                            margin-top: 1rem;
+                                    .home_actu_infos{
+                                        width: 45%;
+                                        align-content: center;
+                                        color: $blue-dark !important;
+                                        .field--name-field-date,
+                                        .field--name-field-lieu,
+                                        .field--name-title,
+                                        .field--name-field-sous-titre,
+                                        .field--name-field-actu-type {
+
+                                        }
+                                        
+                                        .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: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;
+                                        font-size: 1.3rem;
                                         @media (min-width: 811px) {
                                             // margin-top: 5rem;
                                         }
@@ -131,7 +133,7 @@
                                         time{ 
                                             display: flex;
                                             flex-direction: row;
-                                            font-size: 0.9rem;
+                                            font-size: 1.3rem;
                                             font-weight: 800;
                                             padding-right: 1rem;
                                             width: fit-content;            
@@ -139,23 +141,28 @@
                                     }
     
                                     .field--name-field-lieu{
+                                        font-size: 1.3rem;
+                                        padding-top: 1rem;
                                         .field__label{
                                             display: none;
                                         }
                                     
                                         @media (max-width: 811px){
                                             display: inline-flex;
-                                            order: 3;
                                         }
                                         
                                     }
                                     .field--name-title {
+                                        line-height: 1.1;
+                                        font-size: 1.5rem;
+                                        padding-top: 1rem;
                                         h2 a {
-                                            color: $blue-light !important;
+                                            color: $blue-dark !important;
                                         }
                                     }
         
                                     .field--name-field-sous-titre {
+                                        display: none;
                                         font-weight: 800;
                                         @media (min-width: 811px) {
                                             font-size: 1.5rem;
@@ -163,7 +170,8 @@
                                     }
         
                                     .field--name-field-actu-type {
-                                        order: 6;
+                                        padding-top: 2rem;
+                                        font-size: 1.3rem;
                                     }
         
                                     .field:not(.field--name-field-images) {
@@ -175,20 +183,14 @@
                                     }
         
                                     a {
-                                        color: $black;
-                                        grid-column: 1 / span 8;
+                                        color: $black;  
                                     }
         
                                     .inline.links {
-                                        padding-top: none !important;
-                                        list-style: none;
-                                        width: fit-content;
-                                        align-self: flex-end;
-                                        padding-right: 1rem;
-                                        a {
-                                            display: none;
-                                        }
+                                        display: none;
+                                    }
                                     }
+
                                 }
                             }
                         }

web/themes/custom/eql/templates/node--view--actus-blocks-pages--block-1.html.twig

@@ -101,13 +101,21 @@
   {% endif %}
 
   <div{{ content_attributes }}>
-      {{content}}
-    {# <div class='home_actu_infos'>
-    {{ content.right }}
-    </div>
+      {# {{content}} #}
+      {# {{ dump(content) }} #}
+      <div class='actus-teaser-home'>
         <div class='home_actu_photo'>
-    {{ content.left }}
-    </div> #}
+          {{ content.field_images }}
+        </div>
+        <div class='home_actu_infos'>
+          {{ content.field_date }}
+          {{ content.field_lieu }}
+          {{ content.title }}
+          {{ content.field_sous_titre }}
+          {{ content.field_actu_type }}
+          {{ content.links }}
+        </div>
+      </div>
   </div>
 
 </article>