diff --git a/web/themes/custom/eql/css-compiled/styles.css b/web/themes/custom/eql/css-compiled/styles.css index 8704a96..89fcd0c 100644 --- a/web/themes/custom/eql/css-compiled/styles.css +++ b/web/themes/custom/eql/css-compiled/styles.css @@ -431,10 +431,10 @@ a { background: rgba(0, 158, 227, 0.2); } @media (max-width: 792px) { .path-frontpage .block-views-blockactus-blocks-pages-block-1 { - max-height: 500px; } } + max-height: fit-content; } } @media (max-width: 724px) { .path-frontpage .block-views-blockactus-blocks-pages-block-1 { - max-height: 470px; } } + max-height: fit-content; } } @media (max-width: 479px) { .path-frontpage .block-views-blockactus-blocks-pages-block-1 { max-height: fit-content; } } @@ -446,10 +446,14 @@ a { 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; } } + 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; @@ -458,7 +462,8 @@ a { 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%; } } + 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; } @@ -480,19 +485,16 @@ 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 .field--name-field-images .field__item img { max-height: 310px; max-width: 100%; - object-fit: contain; + object-fit: cover; padding-left: 0; margin-bottom: 1rem; } } - @media (max-width: 792px) { - .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: 450px; } } @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: contain; + object-fit: cover; max-width: 70vw; margin: auto; padding-left: 0; @@ -512,33 +514,26 @@ 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: flex !important; - flex-direction: row; - grid-column: 10 / span 12; - grid-row: 2; } + 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; } - .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::before { - content: " | "; - margin-right: 2rem; } - @media (max-width: 534px) { - .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::before { - display: none; } } - @media (max-width: 534px) { + @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 { - order: 2; } } + 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: 3; - order: 3; } + 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: 4; - order: 4; + 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) { @@ -559,9 +554,8 @@ 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 .field--name-field-actu-type { display: inline-block; grid-column: 9 / span 7; - grid-row: 5; - order: 5; - padding-top: 1rem; } + grid-row: 6; + order: 6; } .path-frontpage .block-block-content3ee1f633-aaa7-4b4c-a42a-02206e26d3a2 { visibility: hidden; } diff --git a/web/themes/custom/eql/scripts/main.js b/web/themes/custom/eql/scripts/main.js index 82ae8de..fcdb02d 100644 --- a/web/themes/custom/eql/scripts/main.js +++ b/web/themes/custom/eql/scripts/main.js @@ -175,9 +175,11 @@ jQuery(function($) { { breakpoint: 810, settings: { + slidesToShow: 1, adaptiveHeight: true, arrows: false, draggable: true, + centerMode: true, } }] }); diff --git a/web/themes/custom/eql/scss/pages/_home.scss b/web/themes/custom/eql/scss/pages/_home.scss index 1a34d9b..1e4fb2d 100644 --- a/web/themes/custom/eql/scss/pages/_home.scss +++ b/web/themes/custom/eql/scss/pages/_home.scss @@ -13,10 +13,10 @@ // max-height: fit-content; // } @media(max-width:792px){ - max-height: 500px; + max-height: fit-content; } @media(max-width:724px){ - max-height: 470px; + max-height: fit-content; } @media(max-width: 479px){ max-height: fit-content; @@ -30,12 +30,17 @@ height: 90%; .slick-list{ @media(max-width: 810px){ + width: 100vw !important; height: fit-content !important; } @media(max-width: 479px){ height: fit-content !important; + width: 100vw !important; } } + .slick-list.draggable{ + padding-left: 0px !important; + } .views-row{ .node-type-actualite{ color: $black; @@ -44,20 +49,17 @@ height: 600px; margin: auto; @media (max-width: 810px){ - - // @media (max-width: 680px){ width: 65%; + height: fit-content; + } div:first-child{ // block actu dans le bandeau display: grid; grid-template-columns: 1fr repeat(9, 1fr) 1fr; @media (max-width: 810px){ - - // @media (max-width: 680px){ display: flex; flex-direction: column; height: fit-content; - } .field--name-field-images { order: 1; @@ -72,19 +74,19 @@ @media(max-width:852px){ max-height: 310px; max-width: 100%; - object-fit: contain; + object-fit: cover; padding-left: 0; margin-bottom: 1rem; } @media(max-width:792px){ - max-height: 450px; + // max-height: 450px; } @media(max-width:724px){ max-height: 400px; } @media (max-width: 680px){ height: 200px; - object-fit: contain; + object-fit: cover; max-width: 70vw; margin: auto; padding-left: 0; @@ -113,30 +115,33 @@ } .field--name-field-lieu{ - display: flex !important; - flex-direction: row; + // display: inline-block; + grid-column: 9 / span 9; + grid-row: 3; + // display: flex !important; + // flex-direction: row; .field__label{ display: none; } - grid-column: 10 / span 12; - grid-row: 2; - &::before{ - content: " | "; - margin-right: 2rem; - @media (max-width: 534px){ - display: none; - } - } - @media (max-width: 534px){ - order: 2; + + // &::before{ + // content: " | "; + // margin-right: 2rem; + // @media (max-width: 534px){ + // display: none; + // } + // } + @media (max-width: 810px){ + display: inline-flex; + order: 3; } } .field--name-title{ display: inline-flex; grid-column: 9 / span 9; - grid-row: 3; - order:3; + grid-row: 4; + order:4; h2 a{ color: $blue-light !important; } @@ -144,8 +149,8 @@ .field--name-field-sous-titre{ display: inline-block; grid-column: 9 / span 9; - grid-row: 4; - order:4; + grid-row: 5; + order:5; margin-top: 0.3rem; font-weight: 800; } @@ -175,9 +180,9 @@ display: inline-block; grid-column: 9 / span 7; - grid-row: 5; - order:5; - padding-top: 1rem; + grid-row: 6; + order:6; + // padding-top: 1rem; } }