From bf9dd9bd927b4ca53149f7c4a313a2ab9b301aef Mon Sep 17 00:00:00 2001 From: Benjamin Bach Date: Mon, 6 Mar 2023 12:10:09 +0100 Subject: [PATCH] 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 }} -
+