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
parent
b4ac96ccaf
commit
1c03f0a07a
8 changed files with 30 additions and 21 deletions
|
|
@ -804,7 +804,7 @@ details[open] .summary::after {
|
|||
.list-horizontal-text > *:not(:last-child)::after {
|
||||
content: '•';
|
||||
color: var(--color-text-subdue);
|
||||
margin: 0 0.5rem;
|
||||
margin: 0 0.4rem;
|
||||
position: relative;
|
||||
top: 0.1rem;
|
||||
}
|
||||
|
|
@ -1023,11 +1023,6 @@ details[open] .summary::after {
|
|||
display: none;
|
||||
}
|
||||
|
||||
.forum-post-list-item {
|
||||
display: flex;
|
||||
gap: 1.2rem;
|
||||
}
|
||||
|
||||
.forum-post-list-thumbnail {
|
||||
flex-shrink: 0;
|
||||
width: 6rem;
|
||||
|
|
@ -1042,6 +1037,21 @@ details[open] .summary::after {
|
|||
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-color: var(--color-primary);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
package glance
|
||||
|
||||
import (
|
||||
"fmt"
|
||||
"html/template"
|
||||
"math"
|
||||
"strconv"
|
||||
|
|
@ -14,8 +13,8 @@ import (
|
|||
var intl = message.NewPrinter(language.English)
|
||||
|
||||
var globalTemplateFunctions = template.FuncMap{
|
||||
"formatViewerCount": formatViewerCount,
|
||||
"formatNumber": intl.Sprint,
|
||||
"formatApproxNumber": formatApproxNumber,
|
||||
"formatNumber": intl.Sprint,
|
||||
"safeCSS": func(str string) template.CSS {
|
||||
return template.CSS(str)
|
||||
},
|
||||
|
|
@ -45,18 +44,18 @@ func mustParseTemplate(primary string, dependencies ...string) *template.Templat
|
|||
return t
|
||||
}
|
||||
|
||||
func formatViewerCount(count int) string {
|
||||
func formatApproxNumber(count int) string {
|
||||
if count < 1_000 {
|
||||
return strconv.Itoa(count)
|
||||
}
|
||||
|
||||
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 {
|
||||
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"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@
|
|||
</div>
|
||||
{{ 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="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>
|
||||
{{ end }}
|
||||
|
|
|
|||
|
|
@ -33,10 +33,10 @@
|
|||
</ul>
|
||||
</div>
|
||||
{{ end }}
|
||||
<ul class="list-horizontal-text">
|
||||
<ul class="list-horizontal-text flex-nowrap text-compact">
|
||||
<li {{ dynamicRelativeTimeAttrs .TimePosted }}></li>
|
||||
<li>{{ .Score | formatNumber }} points</li>
|
||||
<li>{{ .CommentCount | formatNumber }} comments</li>
|
||||
<li class="shrink-0">{{ .Score | formatApproxNumber }} <span class="forum-post-points-word">points</span></li>
|
||||
<li class="forum-post-comment-count shrink-0">{{ .CommentCount | formatApproxNumber }} comments</li>
|
||||
{{ if ne "" .TargetUrl }}
|
||||
<li class="min-width-0"><a class="visited-indicator text-truncate block" href="{{ .TargetUrl }}" target="_blank" rel="noreferrer">{{ .TargetUrlDomain }}</a></li>
|
||||
{{ end }}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
<ul class="list-horizontal-text margin-top-7">
|
||||
<li {{ dynamicRelativeTimeAttrs .TimePosted }}></li>
|
||||
<li>{{ .Score | formatNumber }} points</li>
|
||||
<li>{{ .Score | formatApproxNumber }} points</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
<ul class="list-horizontal-text margin-top-7">
|
||||
<li {{ dynamicRelativeTimeAttrs .TimePosted }}></li>
|
||||
<li>{{ .Score | formatNumber }} points</li>
|
||||
<li>{{ .Score | formatApproxNumber }} points</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@
|
|||
{{ end }}
|
||||
<ul class="list-horizontal-text">
|
||||
<li {{ dynamicRelativeTimeAttrs .LiveSince }}></li>
|
||||
<li>{{ .ViewersCount | formatViewerCount }} viewers</li>
|
||||
<li>{{ .ViewersCount | formatApproxNumber }} viewers</li>
|
||||
</ul>
|
||||
{{ else }}
|
||||
<div>Offline</div>
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
<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>
|
||||
<ul class="list-horizontal-text">
|
||||
<li>{{ .ViewersCount | formatViewerCount }} viewers</li>
|
||||
<li>{{ .ViewersCount | formatApproxNumber }} viewers</li>
|
||||
{{ if .IsNew }}
|
||||
<li class="color-primary">NEW</li>
|
||||
{{ end }}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue