Update forum post templates

* Use approx number for points & comments
* Hide comments when limited on horizontal space
* Abbreviate "points" to "pts" when limited on horizontal space
* Don't let domain wrap
This commit is contained in:
Svilen Markov 2025-01-14 10:41:46 +00:00
parent b4ac96ccaf
commit 1c03f0a07a
8 changed files with 30 additions and 21 deletions

View File

@ -804,7 +804,7 @@ details[open] .summary::after {
.list-horizontal-text > *:not(:last-child)::after { .list-horizontal-text > *:not(:last-child)::after {
content: '•'; content: '•';
color: var(--color-text-subdue); color: var(--color-text-subdue);
margin: 0 0.5rem; margin: 0 0.4rem;
position: relative; position: relative;
top: 0.1rem; top: 0.1rem;
} }
@ -1023,11 +1023,6 @@ details[open] .summary::after {
display: none; display: none;
} }
.forum-post-list-item {
display: flex;
gap: 1.2rem;
}
.forum-post-list-thumbnail { .forum-post-list-thumbnail {
flex-shrink: 0; flex-shrink: 0;
width: 6rem; width: 6rem;
@ -1042,6 +1037,21 @@ details[open] .summary::after {
transform: translateY(-0.15rem); transform: translateY(-0.15rem);
} }
@container widget (max-width: 550px) {
.forum-post-comment-count {
display: none;
}
.forum-post-points-word {
font-size: 0;
}
.forum-post-points-word::after {
content: "pts";
font-size: var(--font-size-base);
}
}
.bookmarks-group { .bookmarks-group {
--bookmarks-group-color: var(--color-primary); --bookmarks-group-color: var(--color-primary);
} }

View File

@ -1,7 +1,6 @@
package glance package glance
import ( import (
"fmt"
"html/template" "html/template"
"math" "math"
"strconv" "strconv"
@ -14,8 +13,8 @@ import (
var intl = message.NewPrinter(language.English) var intl = message.NewPrinter(language.English)
var globalTemplateFunctions = template.FuncMap{ var globalTemplateFunctions = template.FuncMap{
"formatViewerCount": formatViewerCount, "formatApproxNumber": formatApproxNumber,
"formatNumber": intl.Sprint, "formatNumber": intl.Sprint,
"safeCSS": func(str string) template.CSS { "safeCSS": func(str string) template.CSS {
return template.CSS(str) return template.CSS(str)
}, },
@ -45,18 +44,18 @@ func mustParseTemplate(primary string, dependencies ...string) *template.Templat
return t return t
} }
func formatViewerCount(count int) string { func formatApproxNumber(count int) string {
if count < 1_000 { if count < 1_000 {
return strconv.Itoa(count) return strconv.Itoa(count)
} }
if count < 10_000 { if count < 10_000 {
return fmt.Sprintf("%.1fk", float64(count)/1_000) return strconv.FormatFloat(float64(count)/1_000, 'f', 1, 64) + "k"
} }
if count < 1_000_000 { if count < 1_000_000 {
return fmt.Sprintf("%dk", count/1_000) return strconv.Itoa(count/1_000) + "k"
} }
return fmt.Sprintf("%.1fm", float64(count)/1_000_000) return strconv.FormatFloat(float64(count)/1_000_000, 'f', 1, 64) + "m"
} }

View File

@ -18,7 +18,7 @@
</div> </div>
{{ else }} {{ else }}
<div class="cursor-help" data-popover-type="text" data-popover-text="Total number of blocked domains from all adlists" data-popover-max-width="200px" data-popover-text-align="center"> <div class="cursor-help" data-popover-type="text" data-popover-text="Total number of blocked domains from all adlists" data-popover-max-width="200px" data-popover-text-align="center">
<div class="color-highlight size-h3">{{ .Stats.DomainsBlocked | formatViewerCount }}</div> <div class="color-highlight size-h3">{{ .Stats.DomainsBlocked | formatApproxNumber }}</div>
<div class="size-h6">DOMAINS</div> <div class="size-h6">DOMAINS</div>
</div> </div>
{{ end }} {{ end }}

View File

@ -33,10 +33,10 @@
</ul> </ul>
</div> </div>
{{ end }} {{ end }}
<ul class="list-horizontal-text"> <ul class="list-horizontal-text flex-nowrap text-compact">
<li {{ dynamicRelativeTimeAttrs .TimePosted }}></li> <li {{ dynamicRelativeTimeAttrs .TimePosted }}></li>
<li>{{ .Score | formatNumber }} points</li> <li class="shrink-0">{{ .Score | formatApproxNumber }} <span class="forum-post-points-word">points</span></li>
<li>{{ .CommentCount | formatNumber }} comments</li> <li class="forum-post-comment-count shrink-0">{{ .CommentCount | formatApproxNumber }} comments</li>
{{ if ne "" .TargetUrl }} {{ if ne "" .TargetUrl }}
<li class="min-width-0"><a class="visited-indicator text-truncate block" href="{{ .TargetUrl }}" target="_blank" rel="noreferrer">{{ .TargetUrlDomain }}</a></li> <li class="min-width-0"><a class="visited-indicator text-truncate block" href="{{ .TargetUrl }}" target="_blank" rel="noreferrer">{{ .TargetUrlDomain }}</a></li>
{{ end }} {{ end }}

View File

@ -21,7 +21,7 @@
<a href="{{ .DiscussionUrl }}" class="text-truncate-3-lines color-primary-if-not-visited margin-top-7 margin-bottom-auto" target="_blank" rel="noreferrer">{{ .Title }}</a> <a href="{{ .DiscussionUrl }}" class="text-truncate-3-lines color-primary-if-not-visited margin-top-7 margin-bottom-auto" target="_blank" rel="noreferrer">{{ .Title }}</a>
<ul class="list-horizontal-text margin-top-7"> <ul class="list-horizontal-text margin-top-7">
<li {{ dynamicRelativeTimeAttrs .TimePosted }}></li> <li {{ dynamicRelativeTimeAttrs .TimePosted }}></li>
<li>{{ .Score | formatNumber }} points</li> <li>{{ .Score | formatApproxNumber }} points</li>
</ul> </ul>
</div> </div>
</div> </div>

View File

@ -20,7 +20,7 @@
<a href="{{ .DiscussionUrl }}" class="text-truncate-3-lines color-primary-if-not-visited margin-top-7" target="_blank" rel="noreferrer">{{ .Title }}</a> <a href="{{ .DiscussionUrl }}" class="text-truncate-3-lines color-primary-if-not-visited margin-top-7" target="_blank" rel="noreferrer">{{ .Title }}</a>
<ul class="list-horizontal-text margin-top-7"> <ul class="list-horizontal-text margin-top-7">
<li {{ dynamicRelativeTimeAttrs .TimePosted }}></li> <li {{ dynamicRelativeTimeAttrs .TimePosted }}></li>
<li>{{ .Score | formatNumber }} points</li> <li>{{ .Score | formatApproxNumber }} points</li>
</ul> </ul>
</div> </div>
</div> </div>

View File

@ -31,7 +31,7 @@
{{ end }} {{ end }}
<ul class="list-horizontal-text"> <ul class="list-horizontal-text">
<li {{ dynamicRelativeTimeAttrs .LiveSince }}></li> <li {{ dynamicRelativeTimeAttrs .LiveSince }}></li>
<li>{{ .ViewersCount | formatViewerCount }} viewers</li> <li>{{ .ViewersCount | formatApproxNumber }} viewers</li>
</ul> </ul>
{{ else }} {{ else }}
<div>Offline</div> <div>Offline</div>

View File

@ -9,7 +9,7 @@
<div class="min-width-0"> <div class="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> <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"> <ul class="list-horizontal-text">
<li>{{ .ViewersCount | formatViewerCount }} viewers</li> <li>{{ .ViewersCount | formatApproxNumber }} viewers</li>
{{ if .IsNew }} {{ if .IsNew }}
<li class="color-primary">NEW</li> <li class="color-primary">NEW</li>
{{ end }} {{ end }}