data.coop/website
8
1
Fork 6
Code Issues 11 Pull requests Releases Wiki Activity

Align items of service badges #63

Merged
benjaoming merged 2 commits from benjaoming/website:badges-service-list into new 2023-03-06 11:13:40 +00:00
Conversation 1 Commits 2 Files changed 3 +65 -30
3 changed files with 65 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit bf9dd9bd92 - Show all commits

5
data/badges/da/status.yaml
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"

48
themes/datacoop2020/assets/static/css/style.scss
View file

@ -251,27 +251,53 @@ dl.dl-services,
} }
} }
dl.badge-definitions, .badge-definitions,
dl.status-definitions, .status-definitions,
{ {
display : grid; display : grid;
column-gap : 2rem; column-gap : 2rem;
dt { .badge-icon {
grid-column-start : 1; grid-column-start : 1;
grid-column-end : 2; grid-column-end : 2;
font-weight : bold;
.badge-icon {
display: inline-block;
vertical-align: middle;
margin-right: 10px;
} }
.badge-name { .badge-name {
}
}
dd {
grid-column-start : 2; grid-column-start : 2;
grid-column-end : 3; 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) {

36
themes/datacoop2020/layouts/partials/badges.html
View file

@ -1,17 +1,15 @@
<h2>{{ i18n "badges_headline" }}</h2> <h2>{{ i18n "badges_headline" }}</h2>
<dl class="badge-definitions"> <section class="badge-definitions">
{{ range $badge_key, $badge := $.Site.Data.badges.da.badges.badges }} {{ range $badge_key, $badge := $.Site.Data.badges.da.badges.badges }}
<dt> <div class="badge-icon">
<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>
<span class="badge-name">{{ title .name }}</span> <div class="badge-name">{{ title .name }}</div>
</dt>
<dd> <div class="badge-description">
{{/* Hugo is insane some times: https://github.com/gohugoio/hugo/issues/3040 */}} {{/* Hugo is insane some times: https://github.com/gohugoio/hugo/issues/3040 */}}
{{- $markdown := .description | markdownify -}} {{- $markdown := .description | markdownify -}}
@ -20,22 +18,30 @@
{{ else }} {{ else }}
{{ $markdown }} {{ $markdown }}
{{ end }} {{ end }}
<dd> </div>
{{ end }} {{ end }}
</dl> </section>
<h2>{{ i18n "status_headline" }}</h2> <h2>{{ i18n "status_headline" }}</h2>
<dl class="status-definitions"> <section class="status-definitions">
{{ range $.Site.Data.badges.da.status.status }} {{ range $.Site.Data.badges.da.status.status }}
<dt>{{ title .name }}</dt>
<dd> <div class="badge-icon badge-status badge-status-{{ .css_class }}"></div>
{{ markdownify .description }} <div class="badge-name">{{ title .name }}</div>
</dd>
<div class="badge-description">
{{- $markdown := .description | markdownify -}}
{{ if not ( findRE "<[h|p][^>]*>" $markdown ) }}
<p>{{ $markdown }}</p>
{{ else }}
{{ $markdown }}
{{ end }}
</div>
{{ end }} {{ end }}
</dl> </section>