Bladeren bron

slide taille img and grid display

ouidade 1 jaar geleden
bovenliggende
commit
1984014dc4

+ 120 - 113
web/themes/custom/eql/css-compiled/styles.css

@@ -426,9 +426,12 @@ a {
 
 .path-frontpage .block-views-blockactus-blocks-pages-block-1 {
   width: 100vw;
-  height: 600px;
+  height: 550px;
   border-bottom: 5px solid #009ee3;
   background: rgba(0, 158, 227, 0.2); }
+  @media (max-width: 810px) {
+    .path-frontpage .block-views-blockactus-blocks-pages-block-1 {
+      height: 580px; } }
   @media (max-width: 792px) {
     .path-frontpage .block-views-blockactus-blocks-pages-block-1 {
       max-height: fit-content; } }
@@ -438,124 +441,121 @@ a {
   @media (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 {
-    height: 100%; }
-    .path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages {
-      height: 100%; }
-      .path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content {
-        height: 90%; }
-        @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; } }
-        @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;
-            width: 100vw !important; } }
-        .path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .slick-list.draggable {
-          padding-left: 0px !important; }
+  .path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content {
+    height: 90%; }
+    @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; } }
+    @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;
+        width: 100vw !important; } }
+    .path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .slick-list.draggable {
+      padding-left: 0px !important; }
+    .path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite {
+      color: black;
+      line-height: 1.5rem;
+      width: 80%;
+      height: 456px;
+      margin: auto; }
+      @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 {
-          color: black;
-          line-height: 1.5rem;
-          width: 80%;
-          height: 600px;
-          margin: auto; }
-          @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; } }
+          width: 65%;
+          height: 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 {
+        display: grid;
+        grid-template-columns: 1fr repeat(9, 1fr) 1fr;
+        column-gap: 30px; }
+        @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 {
-            display: grid;
-            grid-template-columns: 1fr repeat(9, 1fr) 1fr; }
-            @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 {
-                display: flex;
-                flex-direction: column;
-                height: 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-images {
-              order: 1;
-              grid-column: 1 /span 9;
-              grid-row: 1 / span 6; }
+            display: flex;
+            flex-direction: column;
+            height: 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-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 div:first-child .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 {
+            width: 100%;
+            object-fit: cover;
+            object-position: center; }
+            @media (max-width: 852px) {
               .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 {
-                width: 100%;
-                max-height: 550px;
+                max-height: 310px;
+                max-width: 100%;
                 object-fit: cover;
-                padding-left: 1rem; }
-                @media (max-width: 852px) {
-                  .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 {
-                    max-height: 310px;
-                    max-width: 100%;
-                    object-fit: cover;
-                    padding-left: 0;
-                    margin-bottom: 1rem; } }
-                @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 {
-                    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 {
-                    height: 200px;
-                    object-fit: cover;
-                    max-width: 70vw;
-                    margin: auto;
-                    padding-left: 0;
-                    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 {
-              grid-column: 9 / span 9;
-              grid-row: 2;
-              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; }
-              .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 {
-                display: flex;
-                flex-direction: row;
-                font-size: 0.9rem;
-                font-weight: 800;
-                padding-right: 1rem;
-                width: fit-content; }
+                padding-left: 0;
+                margin-bottom: 1rem; } }
+            @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 {
+                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 {
+                height: 200px;
+                object-fit: cover;
+                max-width: 70vw;
+                margin: auto;
+                padding-left: 0;
+                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 {
+          grid-column: 9 / span 9;
+          grid-row: 2;
+          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; }
+          .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 {
+            display: flex;
+            flex-direction: row;
+            font-size: 0.9rem;
+            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 {
+          grid-column: 9 / span 9;
+          grid-row: 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-field-lieu .field__label {
+            display: none; }
+          @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-lieu {
-              grid-column: 9 / span 9;
-              grid-row: 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-field-lieu .field__label {
-                display: none; }
-              @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-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 {
               display: inline-flex;
-              grid-column: 9 / span 9;
-              grid-row: 4;
-              order: 4; }
-              .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: #009ee3 !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;
-              grid-column: 9 / span 9;
-              grid-row: 5;
-              order: 5;
-              margin-top: 0.3rem;
-              font-weight: 800; }
-            .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%; }
-            .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 {
-              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 {
-              color: black;
-              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 {
-                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;
-              grid-column: 9 / span 7;
-              grid-row: 6;
-              order: 6; }
+              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;
+          grid-column: 9 / span 9;
+          grid-row: 4;
+          order: 4; }
+          .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: #009ee3 !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 {
+          grid-column: 9 / span 9;
+          grid-row: 5;
+          order: 5;
+          margin-top: 0.3rem;
+          font-weight: 800; }
+        .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%; }
+        .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 {
+          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 {
+          color: black;
+          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 {
+            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 {
+          grid-column: 9 / span 7;
+          grid-row: 6;
+          order: 6; }
 
 .path-frontpage .block-block-content3ee1f633-aaa7-4b4c-a42a-02206e26d3a2 {
   visibility: hidden; }
@@ -4493,6 +4493,13 @@ a {
         padding-right: 1rem;
         padding-bottom: 1rem; }
 
+.slick-prev {
+  color: #009ee3;
+  left: 25px; }
+
+.slick-dots {
+  bottom: -40px !important; }
+
 /* Slider */
 .slick-slider {
   position: relative;

+ 19 - 13
web/themes/custom/eql/scss/pages/_home.scss

@@ -6,12 +6,12 @@
         .block-views-blockactus-blocks-pages-block-1{
             // grid-area: actus;
             width: 100vw;
-            height: 600px;
+            height: 550px;
             border-bottom: 5px solid $blue-light;
             background: $background-actus;
-            // @media(max-width: 810px){
-            //     max-height: fit-content;
-            // }
+            @media(max-width: 810px){
+                height: 580px;
+            }
             @media(max-width:792px){
                 max-height: fit-content;
             }
@@ -23,9 +23,9 @@
             }
             
             div{
-                height: 100%;
+                // height: 100%;
                 .view-actus-blocks-pages{
-                    height: 100%;
+                    // height: 100%;
                     .view-content{
                         height: 90%;
                         .slick-list{
@@ -46,7 +46,7 @@
                                 color: $black;
                                 line-height: 1.5rem;
                                 width: 80%;
-                                height: 600px;
+                                height: 456px;
                                 margin: auto;
                                 @media (max-width: 810px){ 
                                     width: 65%;
@@ -56,6 +56,8 @@
                                 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;
@@ -63,14 +65,18 @@
                                     }
                                     .field--name-field-images {
                                         order: 1;
-                                        grid-column: 1 /span 9;
+                                        grid-column: 1 /span 8;
                                         grid-row: 1 / span 6;
-                                        
+                                        .field__item{
+                                            display: flex;
+                                            max-height: 420px;
+                                        }
                                         .field__item img{  
                                             width: 100%;
-                                            max-height: 550px;
+                                            // max-height: 456px;
                                             object-fit: cover;
-                                            padding-left: 1rem;
+                                            object-position: center;
+                                            // padding-left: 1rem;
                                             @media(max-width:852px){
                                                 max-height: 310px;
                                                 max-width: 100%;
@@ -147,7 +153,7 @@
                                         }
                                     }
                                     .field--name-field-sous-titre{
-                                        display: inline-block;
+                                        // display: inline-block;
                                         grid-column: 9 / span 9;
                                         grid-row: 5;
                                         order:5;
@@ -177,7 +183,7 @@
                                         }
                                     }
                                     .field--name-field-actu-type{
-                                        display: inline-block;
+                                        // display: inline-block;
     
                                         grid-column: 9 / span 7;
                                         grid-row: 6;

+ 3 - 0
web/themes/custom/eql/scss/partials/_slick_custom.scss

@@ -3,3 +3,6 @@
     left: 25px;
 }
 
+.slick-dots {
+    bottom: -40px !important;
+}

+ 1 - 1
web/themes/custom/eql/scss/styles.scss

@@ -58,7 +58,7 @@
 /*partials*/
 @import "partials/_header";
 @import "partials/_footer";
-// @import "partials/_slick_custom.scss";
+@import "partials/_slick_custom.scss";
 @import "partials/_slick";
 @import "partials/_slick-theme";
 // @import "partials/_block_third_ressources_liees";