Grid layout for service badge and status definitions, adds CSS for status badges

This commit is contained in:
Benjamin Bach 2023-03-06 12:10:09 +01:00
parent 6a940401dd
commit bf9dd9bd92
Signed by untrusted user: benjaoming
GPG key ID: 7D49441634585664
3 changed files with 65 additions and 30 deletions

View file

@ -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"

View file

@ -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 {
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) {

View file

@ -1,17 +1,15 @@
<h2>{{ i18n "badges_headline" }}</h2>
<dl class="badge-definitions">
<section class="badge-definitions">
{{ range $badge_key, $badge := $.Site.Data.badges.da.badges.badges }}
<dt>
<span class="badge-icon">
<div class="badge-icon">
{{$svg := printf "static/static/img/badges/%s" .icon}}
{{ $svg | readFile | safeHTML }}
</span>
<span class="badge-name">{{ title .name }}</span>
</dt>
</div>
<div class="badge-name">{{ title .name }}</div>
<dd>
<div class="badge-description">
{{/* Hugo is insane some times: https://github.com/gohugoio/hugo/issues/3040 */}}
{{- $markdown := .description | markdownify -}}
@ -20,22 +18,30 @@
{{ else }}
{{ $markdown }}
{{ end }}
<dd>
</div>
{{ end }}
</dl>
</section>
<h2>{{ i18n "status_headline" }}</h2>
<dl class="status-definitions">
<section class="status-definitions">
{{ range $.Site.Data.badges.da.status.status }}
<dt>{{ title .name }}</dt>
<dd>
{{ markdownify .description }}
</dd>
<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 }}
</dl>
</section>