From 49f3243b9058658a02c71086411bcce0acc5311c Mon Sep 17 00:00:00 2001 From: ouidade Date: Fri, 17 Dec 2021 10:39:52 +0100 Subject: [PATCH] css bdd --- web/themes/custom/eql/css-compiled/styles.css | 37 +++++++++------ .../eql/images/pictos/noun_Arrow_3771902.svg | 2 +- .../custom/eql/scss/pages/_basededonnees.scss | 46 +++++++++++++------ 3 files changed, 56 insertions(+), 29 deletions(-) diff --git a/web/themes/custom/eql/css-compiled/styles.css b/web/themes/custom/eql/css-compiled/styles.css index e888e93..12d1bc5 100644 --- a/web/themes/custom/eql/css-compiled/styles.css +++ b/web/themes/custom/eql/css-compiled/styles.css @@ -1197,15 +1197,18 @@ a { padding-left: 13%; } .path-ressources.basededonnees .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .block-region-content { - background: url("../images/pictos/carre-contour-bleu_gouvernance.svg"); + position: relative; + background: url("../images/pictos/carre-contour-bleu_programme.svg"); background-repeat: no-repeat; - background-position-y: 20vh; + background-position-y: 30vh; max-width: 100vw; - background-size: contain; } + background-size: cover; } .path-ressources.basededonnees .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .block-region-content .block-views-blockcollections-block-1 { background: rgba(0, 158, 227, 0.2); - height: 20vh; + height: fit-content; display: flex; } + .path-ressources.basededonnees .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .block-region-content .block-views-blockcollections-block-1 div { + width: 100%; } .path-ressources.basededonnees .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .block-region-content .block-views-blockcollections-block-1 .view-id-collections { height: 100%; display: flex; } @@ -1213,13 +1216,15 @@ a { display: flex; flex-direction: row; margin: auto; - width: 65%; + width: 60%; + margin-top: 2rem; + margin-bottom: 2rem; justify-content: space-between; align-items: center; } .path-ressources.basededonnees .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .block-region-content .block-views-blockcollections-block-1 .view-id-collections .view-content .views-row { background: white; - width: 45%; - min-height: 60%; + width: 40%; + height: 80%; padding: 1rem; } .path-ressources.basededonnees .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .block-region-content .block-views-blockcollections-block-1 .view-id-collections .view-content .views-row a { color: black; @@ -1237,9 +1242,11 @@ a { background: white; } .path-ressources.basededonnees .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .block-region-content .block-views-blockbase-de-donnees-block-1 { margin: auto; - width: 70%; } + width: 60%; } .path-ressources.basededonnees .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .block-region-content .block-views-blockbase-de-donnees-block-1 .view-filters { - background-color: white; } + background-color: white; + margin-top: 2rem; + margin-bottom: 2rem; } .path-ressources.basededonnees .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .block-region-content .block-views-blockbase-de-donnees-block-1 .view-filters .views-exposed-form-base-de-donnees-block-1 { width: fit-content; display: flex; } @@ -1250,15 +1257,15 @@ a { .path-ressources.basededonnees .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .block-region-content .block-views-blockbase-de-donnees-block-1 .view-content { display: flex; flex-direction: row; - flex-wrap: wrap; } + flex-wrap: wrap; + justify-content: space-between; } .path-ressources.basededonnees .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .block-region-content .block-views-blockbase-de-donnees-block-1 .view-content .views-row { - flex: 0 1 45%; - padding: 1rem; } + flex: 0 1 49%; } .path-ressources.basededonnees .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .block-region-content .block-views-blockbase-de-donnees-block-1 .view-content .node-type-ressource { display: flex; flex-direction: column; border: 2px solid #009ee3; - padding: 2rem; + padding: 1rem; height: fit-content; margin-bottom: 1rem; background-color: white; } @@ -1295,7 +1302,7 @@ a { margin-top: 2rem; } .path-ressources.basededonnees .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .block-region-content .block-views-blockbase-de-donnees-block-1 .view-content .node-type-ressource .field--name-field-mots-clefs::after { content: url("../images/pictos/noun_Arrow_3771902.svg"); - align-self: end; } + align-self: center; } .path-ressources.basededonnees .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .block-region-content .block-views-blockbase-de-donnees-block-1 .view-content .node-type-ressource .field--name-field-mots-clefs .field__item { background: #09398b; margin-right: 1rem; @@ -1304,7 +1311,7 @@ a { .path-ressources.basededonnees .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .block-region-content .block-views-blockbase-de-donnees-block-1 .view-content .node-type-ressource .field--name-field-mots-clefs .field__item a { color: white; font-weight: 800; - vertical-align: middle; } + vertical-align: super; } .path-ressources.basededonnees .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .block-region-content .block-views-blockbase-de-donnees-block-1 .view-content .node-type-ressource ul.links.inline { display: none; } diff --git a/web/themes/custom/eql/images/pictos/noun_Arrow_3771902.svg b/web/themes/custom/eql/images/pictos/noun_Arrow_3771902.svg index 611c56d..0f54258 100644 --- a/web/themes/custom/eql/images/pictos/noun_Arrow_3771902.svg +++ b/web/themes/custom/eql/images/pictos/noun_Arrow_3771902.svg @@ -8,7 +8,7 @@ id="svg8" sodipodi:docname="noun_Arrow_3771902.svg" inkscape:version="1.1.1 (3bf5ae0d25, 2021-09-20, custom)" - width="45" + width="30" height="auto" inkscape:export-filename="/home/ouidade/Sites/EQL/docker-eql/src_d9/web/themes/custom/eql/images/pictos/noun_Arrow_3771902.png" inkscape:export-xdpi="300" diff --git a/web/themes/custom/eql/scss/pages/_basededonnees.scss b/web/themes/custom/eql/scss/pages/_basededonnees.scss index bf01cbf..21abdc0 100644 --- a/web/themes/custom/eql/scss/pages/_basededonnees.scss +++ b/web/themes/custom/eql/scss/pages/_basededonnees.scss @@ -21,31 +21,41 @@ } .layout--onecol{ .block-region-content{ - background: url('../images/pictos/carre-contour-bleu_gouvernance.svg'); + position: relative; + background: url('../images/pictos/carre-contour-bleu_programme.svg'); background-repeat: no-repeat; - background-position-y: 20vh; + background-position-y: 30vh; max-width: 100vw; - background-size: contain; + background-size: cover; + // bandeau filtres collections .block-views-blockcollections-block-1{ background: $background-actus; - height: 20vh; + height: fit-content; display: flex; + div{ + width: 100%; + } .view-id-collections{ height: 100%; display: flex; + + .view-content{ display: flex; flex-direction: row; + margin: auto; - width: 65%; + width: 60%; + margin-top: 2rem; + margin-bottom: 2rem; justify-content: space-between; align-items: center; .views-row{ background: $white; - width: 45%; - min-height: 60%; + width: 40%; + height: 80%; padding: 1rem; a{ color: $black; @@ -78,9 +88,13 @@ // grille des ressources .block-views-blockbase-de-donnees-block-1{ margin: auto; - width: 70%; + width: 60%; + + .view-filters{ background-color: $white; + margin-top: 2rem; + margin-bottom: 2rem; .views-exposed-form-base-de-donnees-block-1{ width: fit-content; display: flex; @@ -97,10 +111,12 @@ display: flex; flex-direction: row; flex-wrap: wrap; + justify-content: space-between; .views-row{ - flex: 0 1 45%; - padding: 1rem; + flex: 0 1 49%; + // padding: 1rem; // width: 50%; + } .node-type-ressource{ @@ -108,7 +124,7 @@ display: flex; flex-direction: column; border: 2px solid $blue-light; - padding: 2rem; + padding: 1rem; height: fit-content; margin-bottom: 1rem; @@ -168,19 +184,23 @@ .field--name-field-mots-clefs{ display: inline-flex; margin-top: 2rem; + &::after{ content: url("../images/pictos/noun_Arrow_3771902.svg"); - align-self: end; + + align-self: center; + } .field__item{ background: $blue-dark; margin-right: 1rem; padding-left: 0.3rem; padding-right: 0.3rem; + a{ color: $white; font-weight: 800; - vertical-align: middle; + vertical-align: super; } } }