From 9a73e1cbaaede9f62e6cae36eeb438be6c266f98 Mon Sep 17 00:00:00 2001
From: ouidade <ouidade@figureslibres.io>
Date: Thu, 13 Mar 2025 15:08:50 +0100
Subject: [PATCH]  page-node actualite css

---
 .../dist/assets/css/bundle.css                |  99 +++++++----
 .../src/assets/scss/pages/actualites.scss     | 158 +++++++++++-------
 2 files changed, 159 insertions(+), 98 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 5b3ba81..4c7eb8e 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
@@ -4016,14 +4016,38 @@ main {
   width: 100%;
   padding-bottom: 7rem;
 }
-#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite .infos-actu {
-  order: 1;
-  display: flex;
-  flex-direction: row;
-  padding: 1rem 0rem;
-  margin-bottom: 1rem;
+#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite div {
+  display: grid;
+  grid-template-rows: repeat(5 1fr);
 }
-#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite .infos-actu .field_field_type_d_actualite {
+#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite div .field_field_images {
+  grid-column: 1;
+  grid-row: 1/span 5;
+}
+#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite div .field_field_images img {
+  width: 100%;
+  height: auto;
+}
+#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite div .field_field_images blockquote.image-field-caption {
+  margin-left: 0;
+  margin-top: 0;
+}
+#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite div .field_field_images blockquote.image-field-caption p {
+  margin-top: 0;
+  font-size: 0.4rem;
+}
+#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite div .field_field_type_d_actualite,
+#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite div .field_field_date,
+#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite div .field_field_site,
+#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite div .field_title,
+#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite div .field_body,
+#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite div .field_field_liens {
+  grid-column: 2;
+}
+#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite div .field_field_type_d_actualite {
+  order: 2;
+}
+#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite div .field_field_type_d_actualite a {
   text-transform: uppercase;
   color: red;
   font-size: 0.6rem;
@@ -4031,33 +4055,55 @@ main {
   display: inline-flex;
   align-items: center;
 }
-#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite .infos-actu .field_field_type_d_actualite::before {
+#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite div .field_field_type_d_actualite a::before {
   content: url("../img/type-actu.svg");
   padding-right: 0.4rem;
 }
-#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite .infos-actu .field_field_date {
+#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite div .field_field_date {
+  order: 3;
   color: red;
+  font-size: 0.6rem;
+  font-weight: 600;
   display: inline-flex;
   align-items: center;
-  margin-left: 1rem;
 }
-#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite .infos-actu .field_field_date::before {
+#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite div .field_field_date::before {
   content: url("../img/date-actu.svg");
   padding-right: 0.4rem;
 }
-#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite .field_body {
-  order: 2;
+#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite div .field_field_site {
+  order: 4;
+}
+#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite div .field_field_site a {
+  color: red;
+  font-size: 0.6rem;
+  font-weight: 600;
+  display: inline-flex;
+  align-items: center;
+}
+#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite div .field_field_site a::before {
+  content: url("../img/map_pointer.svg");
+  padding-right: 0.4rem;
+}
+#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite div .field_title {
+  order: 5;
+  color: rgb(7, 50, 194);
+  font-size: 1.2rem;
+}
+#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite div .field_body {
+  order: 6;
   padding-bottom: 2rem;
 }
-#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite .field_body p {
+#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite div .field_body p {
   font-size: 0.8rem;
 }
-#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite .field_field_liens {
-  order: 3;
+#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite div .field_field_liens {
+  order: 7;
   padding-bottom: 2rem;
   padding-top: 2rem;
+  width: fit-content;
 }
-#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite .field_field_liens a {
+#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite div .field_field_liens a {
   display: flex;
   flex-direction: row;
   padding-left: 0.5rem;
@@ -4068,27 +4114,12 @@ main {
   text-transform: uppercase;
   font-size: 0.6rem;
 }
-#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite .field_field_liens a svg {
+#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite div .field_field_liens a svg {
   display: none;
 }
-#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite .field_field_liens a::after {
+#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite div .field_field_liens a::after {
   display: inline-flex;
   content: url("../img/noun-arrow-to-right.svg");
   padding-right: 0.2rem;
   padding-left: 0.2rem;
-}
-#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite .field_field_images {
-  order: 5;
-}
-#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite .field_field_images img {
-  width: 100%;
-  height: auto;
-}
-#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite .field_field_images blockquote.image-field-caption {
-  margin-left: 0;
-  margin-top: 0;
-}
-#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite .field_field_images blockquote.image-field-caption p {
-  margin-top: 0;
-  font-size: 0.4rem;
 }
\ No newline at end of file
diff --git a/web/themes/custom/quartiers_de_demain/src/assets/scss/pages/actualites.scss b/web/themes/custom/quartiers_de_demain/src/assets/scss/pages/actualites.scss
index 59e7afc..a8169f5 100644
--- a/web/themes/custom/quartiers_de_demain/src/assets/scss/pages/actualites.scss
+++ b/web/themes/custom/quartiers_de_demain/src/assets/scss/pages/actualites.scss
@@ -46,95 +46,125 @@
                         .node-type-actualite{
                             width: 100%;
                             padding-bottom: 7rem;
-                            // a{
-                            //     display: flex;
-                            //     flex-direction: column;
-                            // }
-            
-                            .infos-actu{
-                                order: 1;
-                                display: flex;
-                                flex-direction: row;
-                                padding: 1rem 0rem;
-                                margin-bottom: 1rem;
+                            div{
+                                display: grid;
+                                // grid-template-columns: 1fr 1.2fr;
+                                grid-template-rows: repeat(5 1fr);
+                                .field_field_images{
+                                    grid-column: 1;
+                                   grid-row: 1 /span 5;
+                                    img{
+                                        width: 100%;
+                                        height: auto;
+                                    }
+                                    blockquote.image-field-caption{
+                                        margin-left: 0;
+                                        margin-top: 0;
+                                        p{
+                                            margin-top: 0;
+                                            font-size: 0.4rem;
+                                        }
+                
+                                    }
+                                }
+                                .field_field_type_d_actualite,
+                                .field_field_date,
+                                .field_field_site,
+                                .field_title,
+                                .field_body,
+                                .field_field_liens{
+                                   grid-column: 2;
+                                   
+                                }
                                 .field_field_type_d_actualite{
+                                    order: 2;
+                                    a{
                                     text-transform: uppercase;
                                     color: red;
                                     font-size: 0.6rem;
                                     font-weight: 600;
                                     display: inline-flex;
                                     align-items: center;
-                                    &::before{
-                                        content: url('../img/type-actu.svg');
-                                        padding-right: 0.4rem;
+                                        &::before{
+                                            content: url('../img/type-actu.svg');
+                                            padding-right: 0.4rem;
+                                        }
                                     }
                                 }
                                 .field_field_date{
+                                    order: 3;
                                     color: red;
+                                    font-size: 0.6rem;
+                                    font-weight: 600;
                                     display: inline-flex;
                                     align-items: center;
-                                    margin-left: 1rem;
+                                    // margin-left: 1rem;
                                     &::before{
                                         content: url('../img/date-actu.svg');
                                         padding-right: 0.4rem;
                                     }
                                 }
-                    
-                            }
-                            
-                            .field_body {
-                                order: 2;
-                                padding-bottom: 2rem;
-                                p{
-                                font-size: 0.8rem;
-                                }
-                            }
-                            .field_field_liens{
-                                order: 3;
-                                padding-bottom: 2rem;
-                                padding-top: 2rem;
-                                a{  
-                                    display: flex;
-                                    flex-direction: row;
-                                    padding-left: 0.5rem;
-                                    display: inline-flex;
-                                    align-items: center;
-                                    color: white;
-                                    background: black;
-                                    text-transform: uppercase;
-                                    font-size: 0.6rem;
-                                    svg{
-                                        display: none;
-                                    }
-                                    &::after{
+                                .field_field_site{
+                                    order: 4;
+                                    a{
+                                        color: red;
+                                        font-size: 0.6rem;
+                                    font-weight: 600;
                                         display: inline-flex;
-                                        content: url("../img/noun-arrow-to-right.svg");
-                                        padding-right: 0.2rem;
-                                        padding-left: 0.2rem;
-                                        
+                                        align-items: center;
+                                        // margin-left: 1rem;
+                                        &::before{
+                                            content: url('../img/map_pointer.svg');
+                                            padding-right: 0.4rem;
+                                        }
                                     }
                                 }
-                                
-                                // a:not(.ext){
-                                //     display: none;
-                                // }
-                            }
-            
-                            .field_field_images{
-                                order: 5;
-                                img{
-                                    width: 100%;
-                                    height: auto;
+                                .field_title{
+                                    order: 5;
+                                    color: $blue_QDD;
+                                    font-size: 1.2rem;
                                 }
-                                blockquote.image-field-caption{
-                                    margin-left: 0;
-                                    margin-top: 0;
+                            
+                                .field_body {
+                                    order: 6;
+                                    padding-bottom: 2rem;
                                     p{
-                                        margin-top: 0;
-                                        font-size: 0.4rem;
+                                    font-size: 0.8rem;
                                     }
-            
                                 }
+                                .field_field_liens{
+                                    order: 7;
+                                    padding-bottom: 2rem;
+                                    padding-top: 2rem;
+                                    width: fit-content;
+                                    a{  
+                                        display: flex;
+                                        flex-direction: row;
+                                        padding-left: 0.5rem;
+                                        display: inline-flex;
+                                        align-items: center;
+                                        color: white;
+                                        background: black;
+                                        text-transform: uppercase;
+                                        font-size: 0.6rem;
+                                        svg{
+                                            display: none;
+                                        }
+                                        &::after{
+                                            display: inline-flex;
+                                            content: url("../img/noun-arrow-to-right.svg");
+                                            padding-right: 0.2rem;
+                                            padding-left: 0.2rem;
+                                            
+                                        }
+                                    }
+                                    
+                                    // a:not(.ext){
+                                    //     display: none;
+                                    // }
+                                }
+                
+
                             }
                         }