From 201f93ccfef001a1377954aafa3b1ab86beb3a3c Mon Sep 17 00:00:00 2001
From: ouidade <ouidade@figureslibres.io>
Date: Sun, 28 Nov 2021 21:33:27 +0100
Subject: [PATCH] grille flex toutes les actus

---
 web/themes/custom/eql/css-compiled/styles.css | 84 ++++++++++++-------
 web/themes/custom/eql/scss/pages/_home.scss   |  3 +-
 .../eql/scss/pages/_toutesactualites.scss     | 39 +++++++--
 3 files changed, 89 insertions(+), 37 deletions(-)

diff --git a/web/themes/custom/eql/css-compiled/styles.css b/web/themes/custom/eql/css-compiled/styles.css
index 5c4db5d..c577281 100644
--- a/web/themes/custom/eql/css-compiled/styles.css
+++ b/web/themes/custom/eql/css-compiled/styles.css
@@ -295,8 +295,7 @@ a {
         display: flex;
         flex-direction: column; }
         .block-views-blockactus-blocks-pages-block-1 .view-content .node-type-actualite div:first-child :nth-child(1) {
-          order: 1;
-          font-weight: 800; }
+          order: 1; }
         .block-views-blockactus-blocks-pages-block-1 .view-content .node-type-actualite div:first-child :nth-child(4) {
           order: 2; }
         .block-views-blockactus-blocks-pages-block-1 .view-content .node-type-actualite div:first-child :nth-child(5) {
@@ -310,6 +309,7 @@ a {
         display: block;
         content: url('data:image/svg+xml,<svg width="160" height="40" xmlns="http://www.w3.org/2000/svg" version="1.1"> <line x1="0" x2="80" y1="20" y2="20" stroke-linecap="cube" stroke="white" stroke-width="5"/></svg>'); }
       .block-views-blockactus-blocks-pages-block-1 .view-content .node-type-actualite time {
+        font-weight: 800;
         padding-right: 1rem;
         width: fit-content; }
         .block-views-blockactus-blocks-pages-block-1 .view-content .node-type-actualite time:after {
@@ -475,37 +475,61 @@ a {
   margin: 0; }
   .path-actualites .block-region-content {
     display: grid;
-    grid-template-columns: 1fr repeat(4, 2fr) 1fr;
+    grid-template-columns: 1fr 8fr 1fr;
     margin: auto; }
-    .path-actualites .block-region-content .block-views:nth-of-type(1) {
+    .path-actualites .block-region-content .block-views {
       grid-column: 2; }
-    .path-actualites .block-region-content .block-views .view-display-id-block_2 {
-      padding-top: 0; }
-    .path-actualites .block-region-content .block-views .node-type-actualite {
-      color: #09398b;
-      line-height: 1.5rem;
-      padding: 0.5rem; }
-      .path-actualites .block-region-content .block-views .node-type-actualite div:first-child {
+      .path-actualites .block-region-content .block-views .view-content {
         display: flex;
-        flex-direction: column; }
-        .path-actualites .block-region-content .block-views .node-type-actualite div:first-child :nth-child(1) {
-          order: 1; }
-        .path-actualites .block-region-content .block-views .node-type-actualite div:first-child :nth-child(4) {
-          order: 2; }
-        .path-actualites .block-region-content .block-views .node-type-actualite div:first-child :nth-child(5) {
-          order: 3; }
-        .path-actualites .block-region-content .block-views .node-type-actualite div:first-child a {
-          color: #09398b; }
-        .path-actualites .block-region-content .block-views .node-type-actualite div:first-child .field--name-field-images .field__item img {
-          width: 100%;
-          height: fit-content; }
-        .path-actualites .block-region-content .block-views .node-type-actualite div:first-child .field--name-field-images::after {
-          display: block;
-          content: url('data:image/svg+xml,<svg width="160" height="40" xmlns="http://www.w3.org/2000/svg" version="1.1"> <line x1="0" x2="80" y1="20" y2="20" stroke-linecap="cube" stroke="rgb(9,57,139)" stroke-width="5"/></svg>'); }
-        .path-actualites .block-region-content .block-views .node-type-actualite div:first-child .field:not(.field--name-field-images) {
-          width: 80%; }
-        .path-actualites .block-region-content .block-views .node-type-actualite div:first-child h2 {
-          margin: 0; }
+        flex-direction: row;
+        flex-wrap: wrap; }
+        .path-actualites .block-region-content .block-views .view-content .views-row {
+          width: 25%;
+          flex: 0 0 25%; }
+      .path-actualites .block-region-content .block-views .view-display-id-block_2 {
+        padding-top: 0; }
+      .path-actualites .block-region-content .block-views .node-type-actualite {
+        color: #09398b;
+        line-height: 1.5rem;
+        padding: 0.5rem; }
+        .path-actualites .block-region-content .block-views .node-type-actualite div:first-child {
+          display: flex;
+          flex-direction: column; }
+          .path-actualites .block-region-content .block-views .node-type-actualite div:first-child :nth-child(1) {
+            order: 1; }
+          .path-actualites .block-region-content .block-views .node-type-actualite div:first-child :nth-child(4) {
+            order: 2; }
+          .path-actualites .block-region-content .block-views .node-type-actualite div:first-child :nth-child(5) {
+            order: 3; }
+          .path-actualites .block-region-content .block-views .node-type-actualite div:first-child a {
+            color: #09398b; }
+          .path-actualites .block-region-content .block-views .node-type-actualite div:first-child .field--name-field-images .field__item img {
+            width: 100%;
+            height: fit-content; }
+          .path-actualites .block-region-content .block-views .node-type-actualite div:first-child .field--name-field-images::after {
+            display: block;
+            content: url('data:image/svg+xml,<svg width="160" height="40" xmlns="http://www.w3.org/2000/svg" version="1.1"> <line x1="0" x2="80" y1="20" y2="20" stroke-linecap="cube" stroke="rgb(9,57,139)" stroke-width="5"/></svg>'); }
+          .path-actualites .block-region-content .block-views .node-type-actualite div:first-child time {
+            font-weight: 800;
+            padding-right: 1rem;
+            width: fit-content; }
+            .path-actualites .block-region-content .block-views .node-type-actualite div:first-child time:after {
+              padding-left: 0.5rem;
+              content: "|"; }
+          .path-actualites .block-region-content .block-views .node-type-actualite div:first-child .field:not(.field--name-field-images) {
+            width: 80%; }
+          .path-actualites .block-region-content .block-views .node-type-actualite div:first-child h2 {
+            margin: 0; }
+          .path-actualites .block-region-content .block-views .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-actualites .block-region-content .block-views .node-type-actualite div:first-child .inline.links a {
+              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>'); }
+          .path-actualites .block-region-content .block-views .node-type-actualite div:first-child .field--name-field-actu-type {
+            padding-top: 2rem; }
 
 .node-id-4 {
   background: url("../images/pictos/carre-contour-bleu_programme.svg");
diff --git a/web/themes/custom/eql/scss/pages/_home.scss b/web/themes/custom/eql/scss/pages/_home.scss
index 068900e..de61dc4 100644
--- a/web/themes/custom/eql/scss/pages/_home.scss
+++ b/web/themes/custom/eql/scss/pages/_home.scss
@@ -94,7 +94,7 @@
             div:first-child{           // block actu dans le bandeau
                 display: flex;
                 flex-direction: column;
-                :nth-child(1) { order: 1; font-weight: 800;} 
+                :nth-child(1) { order: 1; } 
                 :nth-child(4) { order: 2; }  
                 :nth-child(5) { order: 3; }            
             }
@@ -111,6 +111,7 @@
                 }
             }
             time{ 
+                font-weight: 800;
                 padding-right: 1rem;
                 width: fit-content;
                 &:after{ 
diff --git a/web/themes/custom/eql/scss/pages/_toutesactualites.scss b/web/themes/custom/eql/scss/pages/_toutesactualites.scss
index daa3389..b526d61 100644
--- a/web/themes/custom/eql/scss/pages/_toutesactualites.scss
+++ b/web/themes/custom/eql/scss/pages/_toutesactualites.scss
@@ -5,19 +5,25 @@
     background-color: $background-actus;
     margin: 0;
     .block-region-content{
-        
         display: grid;
-        grid-template-columns: 1fr repeat(4, 2fr) 1fr;
+        grid-template-columns: 1fr 8fr 1fr;
         margin: auto;
-        .block-views:nth-of-type(1){
-            grid-column: 2;
-        }
+
         .block-views{
+            grid-column: 2;
+            .view-content{
+                display: flex;
+                flex-direction: row;
+                flex-wrap: wrap;
+                .views-row{
+                    width: 25%;
+                    flex: 0 0 25%;
+                }
+            }
             .view-display-id-block_2{
                 padding-top: 0;
             }
             .node-type-actualite{
-                
                 color: $blue-dark;
                 line-height: 1.5rem;
                 padding: 0.5rem;
@@ -41,10 +47,31 @@
                             content:url('data:image/svg+xml,<svg width="160" height="40" xmlns="http://www.w3.org/2000/svg" version="1.1"> <line x1="0" x2="80" y1="20" y2="20" stroke-linecap="cube" stroke="rgb(9,57,139)" stroke-width="5"/></svg>');
                         }
                     }
+                    time{ 
+                        font-weight: 800;
+                        padding-right: 1rem;
+                        width: fit-content;
+                        &:after{ 
+                            padding-left: 0.5rem;
+                            content: "|";}
+                    }
                     .field:not(.field--name-field-images){
                         width: 80%;
                     }
                     h2{ margin:0; }
+                    .inline.links{
+                        padding-top: none !important;
+                        list-style: none;
+                        width: fit-content;
+                        align-self: flex-end;
+                        padding-right: 1rem;
+                        a{
+                            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>');
+                        }
+                    }
+                    .field--name-field-actu-type{
+                        padding-top: 2rem;
+                    }
                 }
             }
         }