36f8eac3e4
Delay showing page content until JS has finished setting up page elements That then allows the following: Leave relative time to be rendered on the client Leave collapsible lists to be rendered on the client Which massively simplfies the backend templates which were error prone
31 lines
1.4 KiB
HTML
31 lines
1.4 KiB
HTML
{{ template "widget-base.html" . }}
|
|
|
|
{{ define "widget-content" }}
|
|
<ul class="list list-gap-14 list-collapsible" data-collapse-after="{{ .CollapseAfter }}">
|
|
{{ range .Categories }}
|
|
<li class="twitch-category thumbnail-container">
|
|
<div class="flex gap-10 items-center">
|
|
<img class="twitch-category-thumbnail thumbnail" loading="lazy" src="{{ .AvatarUrl }}" alt="">
|
|
<div class="shrink min-width-0">
|
|
<a class="size-h3 color-highlight text-truncate block" href="https://www.twitch.tv/directory/category/{{ .Slug }}" target="_blank" rel="noreferrer">{{ .Name }}</a>
|
|
<ul class="list-horizontal-text">
|
|
<li>{{ .ViewersCount | formatViewerCount }} viewers</li>
|
|
{{ if .IsNew }}
|
|
<li class="color-primary">NEW</li>
|
|
{{ end }}
|
|
</ul>
|
|
<ul class="list-horizontal-text flex-nowrap">
|
|
{{ range $i, $tag := .Tags }}
|
|
{{ if eq $i 0 }}
|
|
<li class="shrink-0">{{ $tag.Name }}</li>
|
|
{{ else }}
|
|
<li class="text-truncate shrink min-width-0">{{ $tag.Name }}</li>
|
|
{{ end }}
|
|
{{ end }}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
{{ end }}
|
|
</ul>
|
|
{{ end }}
|