From d3979661907605624d57da371e0a14f596266602 Mon Sep 17 00:00:00 2001 From: ouidade Date: Thu, 30 May 2024 11:31:52 +0200 Subject: [PATCH] page ressource css --- .../custom/eql/dist/assets/css/bundle.css | 164 +++++++--------- .../custom/eql/scss/pages/_ressource.scss | 181 +++++++++++------- 2 files changed, 176 insertions(+), 169 deletions(-) diff --git a/web/themes/custom/eql/dist/assets/css/bundle.css b/web/themes/custom/eql/dist/assets/css/bundle.css index ddb7777..6c40898 100644 --- a/web/themes/custom/eql/dist/assets/css/bundle.css +++ b/web/themes/custom/eql/dist/assets/css/bundle.css @@ -2110,6 +2110,7 @@ a { .page-node-type-ressource .layout__region--top { padding-top: 4rem; + /* Hide empty blocks */ } .page-node-type-ressource .layout__region--top .block-region-top { display: flex; @@ -2118,8 +2119,8 @@ a { @media screen and (min-width: 1100px) { .page-node-type-ressource .layout__region--top .block-region-top { display: grid; - grid-template-columns: 1fr repeat(8, 1fr) 1fr; - grid-template-rows: auto; + grid-template-columns: 1fr 2fr; /* 1/3 pour l'image, 2/3 pour le contenu */ + gap: 1rem; } } .page-node-type-ressource .layout__region--top .block-region-top .block-entity-fieldnodefield-images { @@ -2129,8 +2130,59 @@ a { } @media screen and (min-width: 1100px) { .page-node-type-ressource .layout__region--top .block-region-top .block-entity-fieldnodefield-images { - grid-column: 2/span 4; - grid-row: 1/span 5; + grid-column: 1/2; + grid-row: 1/span 7; /* Prendre toutes les lignes disponibles */ + align-self: start; /* S'assurer qu'il commence en haut */ + } +} +.page-node-type-ressource .layout__region--top .block-region-top .block-block-content4e5df355-e76c-4e44-bec0-e211d94f2640, +.page-node-type-ressource .layout__region--top .block-region-top .block-entity-fieldnodefield-type-de-ressource, +.page-node-type-ressource .layout__region--top .block-region-top .block-entity-fieldnodetitle, +.page-node-type-ressource .layout__region--top .block-region-top .block-entity-fieldnodefield-sous-titre, +.page-node-type-ressource .layout__region--top .block-region-top .block-entity-fieldnodefield-edition, +.page-node-type-ressource .layout__region--top .block-region-top .block-entity-fieldnodefield-auteur-s-, +.page-node-type-ressource .layout__region--top .block-region-top .block-entity-fieldnodefield-date-de-parution, +.page-node-type-ressource .layout__region--top .block-region-top .block-entity-fieldnodefield-mots-clefs { + width: 100%; + margin-left: 13%; +} +@media (max-width: 810px) { + .page-node-type-ressource .layout__region--top .block-region-top .block-block-content4e5df355-e76c-4e44-bec0-e211d94f2640, + .page-node-type-ressource .layout__region--top .block-region-top .block-entity-fieldnodefield-type-de-ressource, + .page-node-type-ressource .layout__region--top .block-region-top .block-entity-fieldnodetitle, + .page-node-type-ressource .layout__region--top .block-region-top .block-entity-fieldnodefield-sous-titre, + .page-node-type-ressource .layout__region--top .block-region-top .block-entity-fieldnodefield-edition, + .page-node-type-ressource .layout__region--top .block-region-top .block-entity-fieldnodefield-auteur-s-, + .page-node-type-ressource .layout__region--top .block-region-top .block-entity-fieldnodefield-date-de-parution, + .page-node-type-ressource .layout__region--top .block-region-top .block-entity-fieldnodefield-mots-clefs { + margin-left: 9%; + margin-right: 9%; + } +} +@media screen and (min-width: 1100px) { + .page-node-type-ressource .layout__region--top .block-region-top .block-block-content4e5df355-e76c-4e44-bec0-e211d94f2640, + .page-node-type-ressource .layout__region--top .block-region-top .block-entity-fieldnodefield-type-de-ressource, + .page-node-type-ressource .layout__region--top .block-region-top .block-entity-fieldnodetitle, + .page-node-type-ressource .layout__region--top .block-region-top .block-entity-fieldnodefield-sous-titre, + .page-node-type-ressource .layout__region--top .block-region-top .block-entity-fieldnodefield-edition, + .page-node-type-ressource .layout__region--top .block-region-top .block-entity-fieldnodefield-auteur-s-, + .page-node-type-ressource .layout__region--top .block-region-top .block-entity-fieldnodefield-date-de-parution, + .page-node-type-ressource .layout__region--top .block-region-top .block-entity-fieldnodefield-mots-clefs { + width: auto; + margin-left: 0; + grid-column: 2/3; + align-self: start; /* S'assurer qu'il commence en haut */ + height: fit-content; + } + .page-node-type-ressource .layout__region--top .block-region-top .block-block-content4e5df355-e76c-4e44-bec0-e211d94f2640 p, + .page-node-type-ressource .layout__region--top .block-region-top .block-entity-fieldnodefield-type-de-ressource p, + .page-node-type-ressource .layout__region--top .block-region-top .block-entity-fieldnodetitle p, + .page-node-type-ressource .layout__region--top .block-region-top .block-entity-fieldnodefield-sous-titre p, + .page-node-type-ressource .layout__region--top .block-region-top .block-entity-fieldnodefield-edition p, + .page-node-type-ressource .layout__region--top .block-region-top .block-entity-fieldnodefield-auteur-s- p, + .page-node-type-ressource .layout__region--top .block-region-top .block-entity-fieldnodefield-date-de-parution p, + .page-node-type-ressource .layout__region--top .block-region-top .block-entity-fieldnodefield-mots-clefs p { + margin: 0; } } .page-node-type-ressource .layout__region--top .block-region-top .block-block-content4e5df355-e76c-4e44-bec0-e211d94f2640 { @@ -2146,13 +2198,6 @@ a { padding-bottom: 0.5rem; vertical-align: middle; } -@media screen and (min-width: 1100px) { - .page-node-type-ressource .layout__region--top .block-region-top .block-block-content4e5df355-e76c-4e44-bec0-e211d94f2640 { - width: 50%; - grid-column: 5/span 7; - grid-row: 1; - } -} .page-node-type-ressource .layout__region--top .block-region-top .block-entity-fieldnodefield-type-de-ressource { margin-top: 2rem; margin-left: 13%; @@ -2160,75 +2205,23 @@ a { text-transform: uppercase; font-weight: 800; } -@media (max-width: 810px) { - .page-node-type-ressource .layout__region--top .block-region-top .block-entity-fieldnodefield-type-de-ressource { - margin-left: 9%; - margin-right: 9%; - } -} -@media screen and (min-width: 1100px) { - .page-node-type-ressource .layout__region--top .block-region-top .block-entity-fieldnodefield-type-de-ressource { - width: 50%; - grid-column: 5/span 7; - grid-row: 1; - } -} .page-node-type-ressource .layout__region--top .block-region-top .block-entity-fieldnodetitle { margin-left: 13%; font-size: 2rem; font-weight: 600; } -@media (max-width: 810px) { - .page-node-type-ressource .layout__region--top .block-region-top .block-entity-fieldnodetitle { - margin-left: 9%; - margin-right: 9%; - } -} -@media screen and (min-width: 1100px) { - .page-node-type-ressource .layout__region--top .block-region-top .block-entity-fieldnodetitle { - width: 50%; - grid-column: 5/span 7; - grid-row: 2; - } -} .page-node-type-ressource .layout__region--top .block-region-top .block-entity-fieldnodefield-sous-titre { margin-left: 13%; } .page-node-type-ressource .layout__region--top .block-region-top .block-entity-fieldnodefield-sous-titre .field--name-field-edition p { margin-bottom: 0; } -@media (max-width: 810px) { - .page-node-type-ressource .layout__region--top .block-region-top .block-entity-fieldnodefield-sous-titre { - margin-left: 9%; - margin-right: 9%; - } -} -@media screen and (min-width: 1100px) { - .page-node-type-ressource .layout__region--top .block-region-top .block-entity-fieldnodefield-sous-titre { - width: 50%; - grid-column: 5/span 7; - grid-row: 3; - } -} .page-node-type-ressource .layout__region--top .block-region-top .block-entity-fieldnodefield-edition { margin-left: 13%; } .page-node-type-ressource .layout__region--top .block-region-top .block-entity-fieldnodefield-edition .field--name-field-edition p { margin-bottom: 0; } -@media (max-width: 810px) { - .page-node-type-ressource .layout__region--top .block-region-top .block-entity-fieldnodefield-edition { - margin-left: 9%; - margin-right: 9%; - } -} -@media screen and (min-width: 1100px) { - .page-node-type-ressource .layout__region--top .block-region-top .block-entity-fieldnodefield-edition { - width: 50%; - grid-column: 5/span 7; - grid-row: 4; - } -} .page-node-type-ressource .layout__region--top .block-region-top .block-entity-fieldnodefield-auteur-s- { margin-left: 13%; } @@ -2239,35 +2232,9 @@ a { .page-node-type-ressource .layout__region--top .block-region-top .block-entity-fieldnodefield-auteur-s- .field--name-field-auteur-s- p { margin: 0; } -@media (max-width: 810px) { - .page-node-type-ressource .layout__region--top .block-region-top .block-entity-fieldnodefield-auteur-s- { - margin-left: 9%; - margin-right: 9%; - } -} -@media screen and (min-width: 1100px) { - .page-node-type-ressource .layout__region--top .block-region-top .block-entity-fieldnodefield-auteur-s- { - width: 50%; - grid-column: 5/span 7; - grid-row: 5; - } -} .page-node-type-ressource .layout__region--top .block-region-top .block-entity-fieldnodefield-date-de-parution { margin-left: 13%; } -@media (max-width: 810px) { - .page-node-type-ressource .layout__region--top .block-region-top .block-entity-fieldnodefield-date-de-parution { - margin-left: 9%; - margin-right: 9%; - } -} -@media screen and (min-width: 1100px) { - .page-node-type-ressource .layout__region--top .block-region-top .block-entity-fieldnodefield-date-de-parution { - width: 50%; - grid-column: 5/span 7; - grid-row: 6; - } -} .page-node-type-ressource .layout__region--top .block-region-top .block-entity-fieldnodefield-mots-clefs { margin-left: 13%; } @@ -2285,10 +2252,6 @@ a { vertical-align: middle; } @media (max-width: 810px) { - .page-node-type-ressource .layout__region--top .block-region-top .block-entity-fieldnodefield-mots-clefs { - margin-left: 9%; - margin-right: 9%; - } .page-node-type-ressource .layout__region--top .block-region-top .block-entity-fieldnodefield-mots-clefs .field--name-field-mots-clefs { display: flex; flex-direction: row; @@ -2298,12 +2261,15 @@ a { margin-bottom: 0.5rem; } } -@media screen and (min-width: 800px) { - .page-node-type-ressource .layout__region--top .block-region-top .block-entity-fieldnodefield-mots-clefs { - width: 50%; - grid-column: 5/span 7; - grid-row: 7; - } +.page-node-type-ressource .layout__region--top .block-block-content4e5df355-e76c-4e44-bec0-e211d94f2640:empty, +.page-node-type-ressource .layout__region--top .block-entity-fieldnodefield-type-de-ressource:empty, +.page-node-type-ressource .layout__region--top .block-entity-fieldnodetitle:empty, +.page-node-type-ressource .layout__region--top .block-entity-fieldnodefield-sous-titre:empty, +.page-node-type-ressource .layout__region--top .block-entity-fieldnodefield-edition:empty, +.page-node-type-ressource .layout__region--top .block-entity-fieldnodefield-auteur-s-:empty, +.page-node-type-ressource .layout__region--top .block-entity-fieldnodefield-date-de-parution:empty, +.page-node-type-ressource .layout__region--top .block-entity-fieldnodefield-mots-clefs:empty { + display: none; } .page-node-type-ressource .layout__region--first { margin-top: 3rem; diff --git a/web/themes/custom/eql/scss/pages/_ressource.scss b/web/themes/custom/eql/scss/pages/_ressource.scss index 57e9378..cc4c196 100644 --- a/web/themes/custom/eql/scss/pages/_ressource.scss +++ b/web/themes/custom/eql/scss/pages/_ressource.scss @@ -9,8 +9,10 @@ flex-direction: column; @media screen and (min-width:1100px) { display: grid; - grid-template-columns: 1fr repeat(8, 1fr) 1fr; - grid-template-rows: auto; + // grid-template-columns: 1fr repeat(8, 1fr) 1fr; + // grid-template-rows: auto; + grid-template-columns: 1fr 2fr; /* 1/3 pour l'image, 2/3 pour le contenu */ + gap: 1rem; } // &div:not(.block-entity-fieldnodefield-images){ // @media screen and (min-width:800px) { @@ -23,11 +25,39 @@ margin: auto; padding-right: 2rem; @media screen and (min-width:1100px) { - grid-column: 2/span 4; - grid-row: 1 /span 5; + // grid-column: 2/span 4; + // grid-row: 1 /span 5; + grid-column: 1 / 2; + grid-row: 1 /span 7; /* Prendre toutes les lignes disponibles */ + align-self: start; /* S'assurer qu'il commence en haut */ } } + .block-block-content4e5df355-e76c-4e44-bec0-e211d94f2640, + .block-entity-fieldnodefield-type-de-ressource, + .block-entity-fieldnodetitle, + .block-entity-fieldnodefield-sous-titre, + .block-entity-fieldnodefield-edition, + .block-entity-fieldnodefield-auteur-s-, + .block-entity-fieldnodefield-date-de-parution, + .block-entity-fieldnodefield-mots-clefs { + width: 100%; + margin-left: 13%; + @media (max-width: 810px) { + margin-left: 9%; + margin-right: 9%; + } + @media screen and (min-width: 1100px) { + width: auto; + margin-left: 0; + grid-column: 2 / 3; + align-self: start; /* S'assurer qu'il commence en haut */ + height: fit-content ; + p{margin: 0;} + + } + } + .block-block-content4e5df355-e76c-4e44-bec0-e211d94f2640{ width: 100%; font-family: 'Source Code Pro'; @@ -40,11 +70,11 @@ padding-top: 1rem; padding-bottom: 0.5rem; vertical-align: middle; - @media screen and (min-width:1100px) { - width: 50%; - grid-column: 5/span 7; - grid-row: 1; - } + // @media screen and (min-width:1100px) { + // // width: 50%; + // // grid-column: 5/span 7; + // // grid-row: 1; + // } } @@ -54,32 +84,32 @@ color: $blue-light; text-transform: uppercase; font-weight: 800; - @media (max-width: 810px){ - margin-left:9%; - margin-right: 9%; - } - @media screen and (min-width:1100px) { - width: 50%; - grid-column: 5/span 7; - grid-row: 1; + // @media (max-width: 810px){ + // margin-left:9%; + // margin-right: 9%; + // } + // @media screen and (min-width:1100px) { + // width: 50%; + // grid-column: 5/span 7; + // grid-row: 1; - } + // } } .block-entity-fieldnodetitle{ margin-left: 13%; font-size: 2rem; font-weight: 600; - @media (max-width: 810px){ - margin-left:9%; - margin-right: 9%; - } - @media screen and (min-width:1100px) { - width: 50%; - grid-column: 5/span 7; - grid-row: 2; + // @media (max-width: 810px){ + // margin-left:9%; + // margin-right: 9%; + // } + // @media screen and (min-width:1100px) { + // width: 50%; + // grid-column: 5/span 7; + // grid-row: 2; - } + // } } .block-entity-fieldnodefield-sous-titre{ @@ -89,16 +119,16 @@ margin-bottom: 0; } } - @media (max-width: 810px){ - margin-left:9%; - margin-right: 9%; - } - @media screen and (min-width:1100px) { - width: 50%; - grid-column: 5/span 7; - grid-row: 3; + // @media (max-width: 810px){ + // margin-left:9%; + // margin-right: 9%; + // } + // @media screen and (min-width:1100px) { + // width: 50%; + // grid-column: 5/span 7; + // grid-row: 3; - } + // } } .block-entity-fieldnodefield-edition{ margin-left: 13%; @@ -107,16 +137,16 @@ margin-bottom: 0; } } - @media (max-width: 810px){ - margin-left:9%; - margin-right: 9%; - } - @media screen and (min-width:1100px) { - width: 50%; - grid-column: 5/span 7; - grid-row: 4; + // @media (max-width: 810px){ + // margin-left:9%; + // margin-right: 9%; + // } + // @media screen and (min-width:1100px) { + // width: 50%; + // grid-column: 5/span 7; + // grid-row: 4; - } + // } } .block-entity-fieldnodefield-auteur-s-{ @@ -128,30 +158,30 @@ margin: 0; } } - @media (max-width: 810px){ - margin-left:9%; - margin-right: 9%; - } - @media screen and (min-width:1100px) { - width: 50%; - grid-column: 5/span 7; - grid-row: 5; + // @media (max-width: 810px){ + // margin-left:9%; + // margin-right: 9%; + // } + // @media screen and (min-width:1100px) { + // width: 50%; + // grid-column: 5/span 7; + // grid-row: 5; - } + // } } .block-entity-fieldnodefield-date-de-parution{ margin-left: 13%; - @media (max-width: 810px){ - margin-left:9%; - margin-right: 9%; - } - @media screen and (min-width:1100px) { - width: 50%; - grid-column: 5/span 7; - grid-row: 6; + // @media (max-width: 810px){ + // margin-left:9%; + // margin-right: 9%; + // } + // @media screen and (min-width:1100px) { + // width: 50%; + // grid-column: 5/span 7; + // grid-row: 6; - } + // } } .block-entity-fieldnodefield-mots-clefs{ margin-left: 13%; @@ -173,8 +203,8 @@ } } @media (max-width: 810px){ - margin-left:9%; - margin-right: 9%; + // margin-left:9%; + // margin-right: 9%; .field--name-field-mots-clefs{ display: flex; flex-direction: row; @@ -186,13 +216,24 @@ } } - @media screen and (min-width:800px) { - width: 50%; - grid-column: 5/span 7; - grid-row: 7; + // @media screen and (min-width:800px) { + // width: 50%; + // grid-column: 5/span 7; + // grid-row: 7; - } + // } } + } + /* Hide empty blocks */ + .block-block-content4e5df355-e76c-4e44-bec0-e211d94f2640:empty, + .block-entity-fieldnodefield-type-de-ressource:empty, + .block-entity-fieldnodetitle:empty, + .block-entity-fieldnodefield-sous-titre:empty, + .block-entity-fieldnodefield-edition:empty, + .block-entity-fieldnodefield-auteur-s-:empty, + .block-entity-fieldnodefield-date-de-parution:empty, + .block-entity-fieldnodefield-mots-clefs:empty { + display: none; } } .layout__region--first{ // menu ancres a gauche