From c084bf159f583935a2d97d7e288cda78873976ac Mon Sep 17 00:00:00 2001 From: ouidade Date: Mon, 9 Jun 2025 01:53:07 +0200 Subject: [PATCH] @media teaser ressource image --- .../custom/eql/dist/assets/css/bundle.css | 96 +++++++++++++++++- .../custom/eql/scss/pages/ressources.scss | 14 ++- .../partials/_node-type-ressource-teaser.scss | 99 ++++++++++++++++++- 3 files changed, 200 insertions(+), 9 deletions(-) diff --git a/web/themes/custom/eql/dist/assets/css/bundle.css b/web/themes/custom/eql/dist/assets/css/bundle.css index 08dca4f..74e205d 100644 --- a/web/themes/custom/eql/dist/assets/css/bundle.css +++ b/web/themes/custom/eql/dist/assets/css/bundle.css @@ -5868,6 +5868,17 @@ svg.ext { } } +div.view-type-slide:nth-child(2) > div:nth-child(4) { + padding-left: 0 !important; +} +div.view-type-slide:nth-child(2) > div:nth-child(4) .slick-list { + padding-left: 8% !important; + padding-right: 8% !important; +} +div.view-type-slide:nth-child(2) > div:nth-child(4) article { + padding-right: 0; +} + .carousel { display: none; } @@ -7083,7 +7094,86 @@ article.node-type-ressource.type-paroles-de-laureats .wrapper-ressource .field-- article.node-type-ressource.type-presse .field--name-field-images { display: none; } -article.node-type-ressource article.node-type-ressource.type-les-projets-en-images .views-row-wrapper { - display: flex; - background: lawngreen; + +.type-les-projets-en-images.views-row { + width: 50% !important; + min-width: 550px !important; + max-width: 0 !important; +} +@media (max-width: 479px) { + .type-les-projets-en-images.views-row { + min-width: 100% !important; + } +} +.type-les-projets-en-images.views-row article.node-type-ressource.type-les-projets-en-images .wrapper-ressource { + display: grid; + grid-template-columns: 3fr 1fr !important; + width: 100%; + max-width: 100%; + gap: 1rem; + align-items: start; +} +@media (max-width: 479px) { + .type-les-projets-en-images.views-row article.node-type-ressource.type-les-projets-en-images .wrapper-ressource { + display: flex; + flex-direction: column; + } +} +.type-les-projets-en-images.views-row article.node-type-ressource.type-les-projets-en-images .wrapper-ressource .field--name-field-images { + grid-column: 1; + grid-row: 3/span 8; + width: 100%; +} +.type-les-projets-en-images.views-row article.node-type-ressource.type-les-projets-en-images .wrapper-ressource .field--name-field-images img { + width: 100%; + height: auto; + object-fit: cover; + border: 1px solid #ccc; +} +@media (max-width: 479px) { + .type-les-projets-en-images.views-row article.node-type-ressource.type-les-projets-en-images .wrapper-ressource .field--name-field-images .field__item { + height: auto; + } +} +.type-les-projets-en-images.views-row article.node-type-ressource.type-les-projets-en-images .wrapper-ressource .field--name-field-type-de-media { + grid-column: 1/span 2; + grid-row: 2; +} +.type-les-projets-en-images.views-row article.node-type-ressource.type-les-projets-en-images .wrapper-ressource .field--name-field-type-de-ressource { + grid-column: 1/span 2; + grid-row: 1; +} +.type-les-projets-en-images.views-row article.node-type-ressource.type-les-projets-en-images .wrapper-ressource .field--name-title, +.type-les-projets-en-images.views-row article.node-type-ressource.type-les-projets-en-images .wrapper-ressource .field--name-field-sous-titre, +.type-les-projets-en-images.views-row article.node-type-ressource.type-les-projets-en-images .wrapper-ressource .field--name-field-auteur-s-, +.type-les-projets-en-images.views-row article.node-type-ressource.type-les-projets-en-images .wrapper-ressource .field--name-field-edition, +.type-les-projets-en-images.views-row article.node-type-ressource.type-les-projets-en-images .wrapper-ressource .field--name-field-date-de-parution, +.type-les-projets-en-images.views-row article.node-type-ressource.type-les-projets-en-images .wrapper-ressource .field--name-field-mots-clefs { + grid-column: 2; + width: 100%; + box-sizing: border-box; + padding: 0; + margin: 0; +} +.type-les-projets-en-images.views-row article.node-type-ressource.type-les-projets-en-images .wrapper-ressource .field--name-title { + grid-row: 3; +} +.type-les-projets-en-images.views-row article.node-type-ressource.type-les-projets-en-images .wrapper-ressource .field--name-field-sous-titre { + grid-row: 4; +} +.type-les-projets-en-images.views-row article.node-type-ressource.type-les-projets-en-images .wrapper-ressource .field--name-field-auteur-s- { + grid-row: 5; +} +.type-les-projets-en-images.views-row article.node-type-ressource.type-les-projets-en-images .wrapper-ressource .field--name-field-edition { + grid-row: 6; +} +.type-les-projets-en-images.views-row article.node-type-ressource.type-les-projets-en-images .wrapper-ressource .field--name-field-date-de-parution { + grid-row: 7; +} +.type-les-projets-en-images.views-row article.node-type-ressource.type-les-projets-en-images .wrapper-ressource .field--name-field-mots-clefs { + grid-row: 8; +} +.type-les-projets-en-images.views-row article.node-type-ressource.type-les-projets-en-images .wrapper-ressource h2, .type-les-projets-en-images.views-row article.node-type-ressource.type-les-projets-en-images .wrapper-ressource p { + margin: 0; + padding: 0; } \ No newline at end of file diff --git a/web/themes/custom/eql/scss/pages/ressources.scss b/web/themes/custom/eql/scss/pages/ressources.scss index 245aaa4..017587d 100644 --- a/web/themes/custom/eql/scss/pages/ressources.scss +++ b/web/themes/custom/eql/scss/pages/ressources.scss @@ -579,6 +579,7 @@ } } + .views-row-wrapper{ display: flex; flex-direction: row; @@ -593,7 +594,7 @@ max-width: 500px ; } } - + @media (max-width: 810px){ padding-left: 2rem; flex-direction: column; @@ -644,6 +645,7 @@ } } + } } } @@ -655,3 +657,13 @@ } } } +div.view-type-slide:nth-child(2) > div:nth-child(4){ + padding-left: 0 !important; + .slick-list{ + padding-left: 8% !important; + padding-right: 8% !important; + } + article{ + padding-right: 0; + } +} \ No newline at end of file diff --git a/web/themes/custom/eql/scss/partials/_node-type-ressource-teaser.scss b/web/themes/custom/eql/scss/partials/_node-type-ressource-teaser.scss index 60264e7..e504fca 100644 --- a/web/themes/custom/eql/scss/partials/_node-type-ressource-teaser.scss +++ b/web/themes/custom/eql/scss/partials/_node-type-ressource-teaser.scss @@ -257,9 +257,98 @@ article.node-type-ressource{ } } - article.node-type-ressource.type-les-projets-en-images .views-row-wrapper { - display: flex; - background: lawngreen; - } -} \ No newline at end of file + + +} +.type-les-projets-en-images.views-row{ + width: 50% !important; + // min-width: 0 !important; + min-width: 550px !important; + max-width: 0 !important; + @media (max-width: 479px) { + min-width: 100% !important; + } + + article.node-type-ressource.type-les-projets-en-images { + .wrapper-ressource { + display: grid; + grid-template-columns: 3fr 1fr !important; // ✅ 85% pour image, 15% pour texte + width: 100%; // ✅ force la grille à s'étaler sur toute la ligne + max-width: 100%; // ✅ limite d'expansion + gap: 1rem; + align-items: start; + @media (max-width: 479px) { + display: flex; + flex-direction: column; + } + + .field--name-field-images { + grid-column: 1; + grid-row: 3 / span 8; + width: 100%; + img { + width: 100%; + height: auto; + object-fit: cover; + border: 1px solid #ccc; + + } + + .field__item{ + @media (max-width: 479px) { + // margin-bottom: 4rem; + height: auto; + } + } + } + .field--name-field-type-de-media{ + grid-column: 1 /span 2; + grid-row: 2; + } + .field--name-field-type-de-ressource{ + grid-column: 1 /span 2; + grid-row: 1; + } + // Forcer les champs texte à ne pas déborder + + .field--name-title, + .field--name-field-sous-titre, + .field--name-field-auteur-s-, + .field--name-field-edition, + .field--name-field-date-de-parution, + .field--name-field-mots-clefs { + grid-column: 2; + width: 100%; // ✅ évite que ça casse la colonne + box-sizing: border-box; + padding: 0; + margin: 0; + } + .field--name-title{ + grid-row: 3; + } + .field--name-field-sous-titre{ + grid-row: 4; + } + .field--name-field-auteur-s-{ + grid-row: 5; + } + .field--name-field-edition{ + grid-row: 6; + } + .field--name-field-date-de-parution{ + grid-row: 7; + } + .field--name-field-mots-clefs{ + grid-row: 8; + } + + // Supprimer les marges internes de h2, p, etc. + h2, p { + margin: 0; + padding: 0; + } + } + } +} + \ No newline at end of file