Merge pull request 'Align items of service badges' (#63) from benjaoming/website:badges-service-list into new

Reviewed-on: data.coop/website#63
This commit is contained in:
benjaoming 2023-03-06 11:13:39 +00:00
commit 964896b5f1
3 changed files with 93 additions and 14 deletions

View file

@ -3,12 +3,15 @@ status:
positive: positive:
name: positiv name: positiv
description: Tjenesten lever op til kravene til det badget dækker over. description: Tjenesten lever op til kravene til det badget dækker over.
color: "#4c4" css_class: "positive"
partial: partial:
name: Delvis 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. 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: negative:
name: negativ name: negativ
description: Tjenesten lever ikke op til det badget dækker over. description: Tjenesten lever ikke op til det badget dækker over.
css_class: "negative"

View file

@ -205,9 +205,13 @@ aside > footer img:hover {
} }
.badge-icon { .badge-icon {
width: 30px; width: 75px;
height: auto; height: auto;
svg{fill:#4b3aba;} svg{
fill:#4b3aba;
width: 100%;
height: auto;
}
} }
.principles-list { .principles-list {
@ -232,7 +236,8 @@ aside > footer img:hover {
} }
} }
dl.dl-services { dl.dl-services,
{
display : grid; display : grid;
column-gap : 2rem; column-gap : 2rem;
dt { dt {
@ -246,6 +251,55 @@ dl.dl-services {
} }
} }
.badge-definitions,
.status-definitions,
{
display : grid;
column-gap : 2rem;
.badge-icon {
grid-column-start : 1;
grid-column-end : 2;
}
.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) { @media(max-width:1000px) {
:root { :root {
--base-grid : 40px; --base-grid : 40px;

View file

@ -1,25 +1,47 @@
<h2>{{ i18n "badges_headline" }}</h2> <h2>{{ i18n "badges_headline" }}</h2>
<section class="badge-definitions">
{{ range $badge_key, $badge := $.Site.Data.badges.da.badges.badges }} {{ range $badge_key, $badge := $.Site.Data.badges.da.badges.badges }}
<h3> <div class="badge-icon">
{{ title .name }}
<span class="badge-icon">
{{$svg := printf "static/static/img/badges/%s" .icon}} {{$svg := printf "static/static/img/badges/%s" .icon}}
{{ $svg | readFile | safeHTML }} {{ $svg | readFile | safeHTML }}
</span> </div>
</h3> <div class="badge-name">{{ title .name }}</div>
{{ markdownify .description }} <div class="badge-description">
{{/* Hugo is insane some times: https://github.com/gohugoio/hugo/issues/3040 */}}
{{- $markdown := .description | markdownify -}}
{{ if not ( findRE "<[h|p][^>]*>" $markdown ) }}
<p>{{ $markdown }}</p>
{{ else }}
{{ $markdown }}
{{ end }}
</div>
{{ end }} {{ end }}
</section>
<h2>{{ i18n "status_headline" }}</h2> <h2>{{ i18n "status_headline" }}</h2>
<section class="status-definitions">
{{ range $.Site.Data.badges.da.status.status }} {{ range $.Site.Data.badges.da.status.status }}
<h3>{{ title .name }}</h3>
{{ markdownify .description }} <div class="badge-icon badge-status badge-status-{{ .css_class }}"></div>
<div class="badge-name">{{ title .name }}</div>
<div class="badge-description">
{{- $markdown := .description | markdownify -}}
{{ if not ( findRE "<[h|p][^>]*>" $markdown ) }}
<p>{{ $markdown }}</p>
{{ else }}
{{ $markdown }}
{{ end }}
</div>
{{ end }} {{ end }}
</section>