From 654fd628986d87ebb9162dbb84ceeeba9dbda0ea Mon Sep 17 00:00:00 2001 From: ouidade Date: Thu, 13 Jul 2023 13:18:44 +0200 Subject: [PATCH] @media home --- web/themes/custom/eql/css-compiled/styles.css | 53 ++++++++++++-- web/themes/custom/eql/scripts/main.js | 13 ---- web/themes/custom/eql/scss/pages/_home.scss | 71 +++++++++++++++---- 3 files changed, 103 insertions(+), 34 deletions(-) diff --git a/web/themes/custom/eql/css-compiled/styles.css b/web/themes/custom/eql/css-compiled/styles.css index 78d52f8..0f0988b 100644 --- a/web/themes/custom/eql/css-compiled/styles.css +++ b/web/themes/custom/eql/css-compiled/styles.css @@ -427,26 +427,35 @@ a { height: 600px; border-bottom: 5px solid #009ee3; background: rgba(0, 158, 227, 0.2); } + @media (max-width: 792px) { + .path-frontpage .block-views-blockactus-blocks-pages-block-1 { + max-height: 500px; } } + @media (max-width: 724px) { + .path-frontpage .block-views-blockactus-blocks-pages-block-1 { + max-height: 470px; } } .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: 479px) { - .path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content { - display: flex; - flex-direction: column; - width: 80%; } } .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: 680px) { + .path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite { + width: 65%; } } .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: 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 { + 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; @@ -454,7 +463,25 @@ 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 { width: inherit; max-height: 550px; - object-fit: cover; } + 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: 500px; } } + @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; + 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; @@ -479,6 +506,12 @@ 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-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) { + .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; } } .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; @@ -552,6 +585,9 @@ a { align-items: center; } .path-frontpage .block-views-blockhome-nodes-block-2 .view-display-id-block_2:is(.view-id-home_nodes) .node-type-static .inline.links a:after { content: url('data:image/svg+xml,'); } + @media (max-width: 479px) { + .path-frontpage .block-views-blockhome-nodes-block-2 .view-display-id-block_2:is(.view-id-home_nodes) .node-type-static .field--name-field-images { + width: 100%; } } .path-frontpage .block-views-blockhome-nodes-block-2 .view-display-id-block_2:is(.view-id-home_nodes) .node-type-static .field--name-field-images .field__item img { width: 15rem; height: auto; } @@ -560,6 +596,11 @@ a { .path-frontpage .block-views-blockhome-nodes-block-2 .view-display-id-block_2:is(.view-id-home_nodes) .node-type-static .field--name-field-accroche { flex: 1 1 50px; padding-left: 1rem; } + @media (max-width: 534px) { + .path-frontpage .block-views-blockhome-nodes-block-2 .view-display-id-block_2:is(.view-id-home_nodes) .node-type-static .field--name-field-accroche { + padding-left: 0em; + flex: 1 1 100%; + padding-right: 1rem; } } @media (max-width: 479px) { .path-frontpage .block-views-blockhome-nodes-block-2 .view-display-id-block_2:is(.view-id-home_nodes) .node-type-static .field--name-field-accroche { padding-left: 0em; } } diff --git a/web/themes/custom/eql/scripts/main.js b/web/themes/custom/eql/scripts/main.js index bf60448..cc477b8 100644 --- a/web/themes/custom/eql/scripts/main.js +++ b/web/themes/custom/eql/scripts/main.js @@ -162,12 +162,8 @@ jQuery(function($) { // slideshow home // marche pas. attention ai rajouter des class dans template views.view.html.twig et views-view-actus-blocks-pages--block-1.html.twig (function($, window) { - console.log('hello') - $(document).ready(function(){ - // if ('.view-id-actus_blocks_pages view-display-id-block_1'){ - $('.path-frontpage .view-actus-blocks-pages .view-content').slick({ slidesToShow: 1, // slidesToScroll: 1, @@ -185,16 +181,11 @@ jQuery(function($) { }] }); console.log('salut slick home'); - $('.page-node-type-actualite .block-entity-fieldnodefield-images .field--type-image').slick({ dots: true, arrows: false, - - }); console.log('salut slick actus'); - - $('.page-node-type-projet .block-entity-fieldnodefield-photo .field--type-image').slick({ slidesToShow: 1, dots: true, @@ -203,10 +194,6 @@ jQuery(function($) { adaptiveHeight: true, }); console.log('salut slick projets'); - }); - - // console.log('salut slick actus'); - })(jQuery, window); diff --git a/web/themes/custom/eql/scss/pages/_home.scss b/web/themes/custom/eql/scss/pages/_home.scss index df6c982..3a9954e 100644 --- a/web/themes/custom/eql/scss/pages/_home.scss +++ b/web/themes/custom/eql/scss/pages/_home.scss @@ -9,6 +9,12 @@ height: 600px; border-bottom: 5px solid $blue-light; background: $background-actus; + @media(max-width:792px){ + max-height: 500px; + } + @media(max-width:724px){ + max-height: 470px; + } div{ height: 100%; .view-actus-blocks-pages{ @@ -18,37 +24,58 @@ // flex-basis: auto; height: 90%; - @media (max-width: 479px){ - display: flex; - flex-direction: column; - width: 80%; - } + // @media (max-width: 479px){ + // display: flex; + // flex-direction: column; + // width: 80%; + // } .views-row{ - // width: 80%; - // margin: auto; .node-type-actualite{ color: $black; line-height: 1.5rem; width: 80%; height: 600px; margin: auto; - - // background-color: burlywood; - + @media (max-width: 680px){ + width: 65%; + } div:first-child{ // block actu dans le bandeau - // display: flex; - // flex-direction: column; - // flex-wrap: wrap; display: grid; grid-template-columns: 1fr repeat(9, 1fr) 1fr; + @media (max-width: 680px){ + display: flex; + flex-direction: column; + height: fit-content; + + } .field--name-field-images { order: 1; grid-column: 1 /span 9; grid-row: 1 / span 6; + .field__item img{ width: inherit; max-height: 550px; object-fit: cover; + padding-left: 1rem; + @media(max-width:852px){ + max-height: 500px; + } + @media(max-width:792px){ + max-height: 450px; + } + @media(max-width:724px){ + max-height: 400px; + } + @media (max-width: 680px){ + height: 200px; + object-fit: contain; + max-width: 70vw; + margin: auto; + padding-left: 0; + padding-bottom: 1rem; + + } } } @@ -94,6 +121,12 @@ &::before{ content: " | "; margin-right: 2rem; + @media (max-width: 534px){ + display: none; + } + } + @media (max-width: 534px){ + order: 2; } } @@ -257,6 +290,9 @@ } .field--name-field-images{ // grid-column: 2 / 4; + @media (max-width: 479px) { + width: 100%; + } .field__item{ img{ width: 15rem; @@ -271,9 +307,14 @@ flex: 1 1 50px; // grid-column: 4 / 9; padding-left: 1rem; + @media (max-width: 534px){ + padding-left: 0em; + flex: 1 1 100%; + padding-right: 1rem; + + } @media (max-width: 479px){ - padding-left: 0em; - + padding-left: 0em; } p{ background-color: $white;