From 6a940401dd7b10c75ff69449a8583af778e18c24 Mon Sep 17 00:00:00 2001 From: Benjamin Bach Date: Mon, 6 Mar 2023 09:43:17 +0100 Subject: [PATCH 1/2] WIP: Align items of service badges --- .../datacoop2020/assets/static/css/style.scss | 34 +++++++++++++++++-- .../datacoop2020/layouts/partials/badges.html | 26 +++++++++++--- 2 files changed, 52 insertions(+), 8 deletions(-) diff --git a/themes/datacoop2020/assets/static/css/style.scss b/themes/datacoop2020/assets/static/css/style.scss index 1a1d5e4..7e3ddb0 100644 --- a/themes/datacoop2020/assets/static/css/style.scss +++ b/themes/datacoop2020/assets/static/css/style.scss @@ -205,9 +205,13 @@ aside > footer img:hover { } .badge-icon { - width: 30px; + width: 75px; height: auto; - svg{fill:#4b3aba;} + svg{ + fill:#4b3aba; + width: 100%; + height: auto; + } } .principles-list { @@ -232,7 +236,8 @@ aside > footer img:hover { } } -dl.dl-services { +dl.dl-services, +{ display : grid; column-gap : 2rem; dt { @@ -246,6 +251,29 @@ dl.dl-services { } } +dl.badge-definitions, +dl.status-definitions, +{ + display : grid; + column-gap : 2rem; + dt { + grid-column-start : 1; + grid-column-end : 2; + font-weight : bold; + .badge-icon { + display: inline-block; + vertical-align: middle; + margin-right: 10px; + } + .badge-name { + } + } + dd { + grid-column-start : 2; + grid-column-end : 3; + } +} + @media(max-width:1000px) { :root { --base-grid : 40px; diff --git a/themes/datacoop2020/layouts/partials/badges.html b/themes/datacoop2020/layouts/partials/badges.html index 134a34f..c876c00 100644 --- a/themes/datacoop2020/layouts/partials/badges.html +++ b/themes/datacoop2020/layouts/partials/badges.html @@ -1,25 +1,41 @@

{{ i18n "badges_headline" }}

+
{{ range $badge_key, $badge := $.Site.Data.badges.da.badges.badges }} -

- {{ title .name }} +
{{$svg := printf "static/static/img/badges/%s" .icon}} {{ $svg | readFile | safeHTML }} -

+ {{ title .name }} + - {{ markdownify .description }} +
+ {{/* Hugo is insane some times: https://github.com/gohugoio/hugo/issues/3040 */}} + {{- $markdown := .description | markdownify -}} + + {{ if not ( findRE "<[h|p][^>]*>" $markdown ) }} +

{{ $markdown }}

+ {{ else }} + {{ $markdown }} + {{ end }} +
{{ end }} +
+

{{ i18n "status_headline" }}

+
{{ range $.Site.Data.badges.da.status.status }} -

{{ title .name }}

+
{{ title .name }}
+
{{ markdownify .description }} +
{{ end }} +
From bf9dd9bd927b4ca53149f7c4a313a2ab9b301aef Mon Sep 17 00:00:00 2001 From: Benjamin Bach Date: Mon, 6 Mar 2023 12:10:09 +0100 Subject: [PATCH 2/2] Grid layout for service badge and status definitions, adds CSS for status badges --- data/badges/da/status.yaml | 5 +- .../datacoop2020/assets/static/css/style.scss | 50 ++++++++++++++----- .../datacoop2020/layouts/partials/badges.html | 40 ++++++++------- 3 files changed, 65 insertions(+), 30 deletions(-) diff --git a/data/badges/da/status.yaml b/data/badges/da/status.yaml index c470ee2..0cd1120 100644 --- a/data/badges/da/status.yaml +++ b/data/badges/da/status.yaml @@ -3,12 +3,15 @@ status: positive: name: positiv description: Tjenesten lever op til kravene til det badget dækker over. - color: "#4c4" + css_class: "positive" partial: name: Delvis description: Tjenesten lever delvist op til det badget dækker over. Dog i en sådan grad at vi mener det er værd at fremhæve. + css_class: "partial" negative: name: negativ description: Tjenesten lever ikke op til det badget dækker over. + css_class: "negative" + diff --git a/themes/datacoop2020/assets/static/css/style.scss b/themes/datacoop2020/assets/static/css/style.scss index 7e3ddb0..8fb16ee 100644 --- a/themes/datacoop2020/assets/static/css/style.scss +++ b/themes/datacoop2020/assets/static/css/style.scss @@ -251,27 +251,53 @@ dl.dl-services, } } -dl.badge-definitions, -dl.status-definitions, +.badge-definitions, +.status-definitions, { display : grid; column-gap : 2rem; - dt { + .badge-icon { grid-column-start : 1; grid-column-end : 2; - font-weight : bold; - .badge-icon { - display: inline-block; - vertical-align: middle; - margin-right: 10px; - } - .badge-name { - } } - dd { + .badge-name { grid-column-start : 2; grid-column-end : 3; + font-weight : bold; + margin-top: 20px; } + .badge-description { + grid-column-start : 3; + grid-column-end : 4; + p { + margin-top: 20px; + } + } + + .badge-status { + margin-bottom: 40px; + } + +} + +.badge-status { + width: 75px; + height: 75px; + border-radius: 75px; +} +.badge-status-positive { + @extend .badge-status; + border: 5px solid #4c4; +} + +.badge-status-negative { + @extend .badge-status; + border: 5px solid #c44; +} + +.badge-status-partial { + @extend .badge-status; + border: 5px solid #cc4; } @media(max-width:1000px) { diff --git a/themes/datacoop2020/layouts/partials/badges.html b/themes/datacoop2020/layouts/partials/badges.html index c876c00..f0a9d49 100644 --- a/themes/datacoop2020/layouts/partials/badges.html +++ b/themes/datacoop2020/layouts/partials/badges.html @@ -1,17 +1,15 @@

{{ i18n "badges_headline" }}

-
+
{{ range $badge_key, $badge := $.Site.Data.badges.da.badges.badges }} -
- - {{$svg := printf "static/static/img/badges/%s" .icon}} - {{ $svg | readFile | safeHTML }} - - {{ title .name }} -
+
+ {{$svg := printf "static/static/img/badges/%s" .icon}} + {{ $svg | readFile | safeHTML }} +
+
{{ title .name }}
-
+
{{/* Hugo is insane some times: https://github.com/gohugoio/hugo/issues/3040 */}} {{- $markdown := .description | markdownify -}} @@ -20,22 +18,30 @@ {{ else }} {{ $markdown }} {{ end }} -
+ {{ end }} -
+

{{ i18n "status_headline" }}

-
+
{{ range $.Site.Data.badges.da.status.status }} -
{{ title .name }}
-
- {{ markdownify .description }} -
+
+
{{ title .name }}
+ +
+ {{- $markdown := .description | markdownify -}} + + {{ if not ( findRE "<[h|p][^>]*>" $markdown ) }} +

{{ $markdown }}

+ {{ else }} + {{ $markdown }} + {{ end }} +
{{ end }} -
+