mirrors/gotosocial
1
0
Fork 0
mirror of https://github.com/superseriousbusiness/gotosocial.git synced 2025-10-29 20:52:24 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

dick about with stats a bit

Browse source
This commit is contained in:
tobi 2025-04-16 19:38:43 +02:00
commit 60ee05d2a7
2 changed files with 148 additions and 58 deletions
Download patch file Download diff file Expand all files Collapse all files

97
web/source/css/status.css
View file

@ -260,22 +260,100 @@
display: flex; display: flex;
gap: 1rem; gap: 1rem;
.stats-grouping { .stats-grouping,
.stats-more-info-content {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
column-gap: 1rem; column-gap: 1rem;
row-gap: 0.25rem;
.edited-at {
font-size: smaller;
}
} }
.stats-item { .stats-item {
display: flex; display: flex;
gap: 0.4rem; gap: 0.4rem;
width: fit-content;
} }
.stats-item.published-at { details.stats-more-info {
z-index: 2;
margin-left: auto;
& > summary {
/*
Remove details/summary
arrow and use our own.
*/
list-style: none;
&::-webkit-details-marker {
display: none; /* Safari */
}
/*
Don't display the
"hide" button initially.
*/
i.hide {
display: none;
}
/*
Normalize width and
alignment of fa icons.
*/
i.fa {
width: 2rem;
text-align: center;
}
display: flex;
height: 100%;
align-items: center;
cursor: pointer;
border-radius: $br-inner;
&:focus-visible {
outline: $button-focus-outline;
}
&:hover {
outline: 0.1rem solid $fg-reduced;
}
}
@keyframes fade-in {
0% {opacity: 0}
100% {opacity: 1}
}
&[open] {
.stats-more-info-content {
animation: fade-in .1s;
}
& > summary i.show {
display: none;
}
& > summary i.hide {
display: block;
}
}
}
.stats-more-info-content {
position: absolute;
right: 0;
flex-direction: column;
max-width: 100%;
background: $status-info-bg;
padding: 0.5rem 0.75rem;
border: $boxshadow-border;
box-shadow: $boxshadow;
opacity: 1;
}
.stats-item.published-at dd time.dt-published {
text-decoration: underline; text-decoration: underline;
} }
@ -283,10 +361,6 @@
z-index: 1; z-index: 1;
user-select: none; user-select: none;
} }
.language {
margin-left: auto;
}
} }
grid-column: span 3; grid-column: span 3;
@ -327,7 +401,8 @@
&.expanded { &.expanded {
background: $status-focus-bg; background: $status-focus-bg;
.status-info { .status-info,
.status-info .status-stats .stats-more-info-content {
background: $status-focus-info-bg; background: $status-focus-info-bg;
} }
} }

109
web/template/status_info.tmpl
View file

@ -50,60 +50,75 @@
<div class="stats-item published-at text-cutoff"> <div class="stats-item published-at text-cutoff">
<dt class="sr-only">Published</dt> <dt class="sr-only">Published</dt>
<dd> <dd>
<time class="dt-published" datetime="{{- .CreatedAt -}}">{{- .CreatedAt | timestampPrecise -}}</time> <time class="dt-published" datetime="{{- .CreatedAt -}}">{{- .CreatedAt | timestampPrecise -}}</time>{{- if .EditedAt }}*{{- end }}
</dd> </dd>
</div> </div>
{{- if .EditedAt -}} {{- if .Pinned }}
<div class="stats-item edited-at text-cutoff"> <div class="stats-item" title="Pinned">
<dt class="sr-only">Edited</dt> <dt>
<dd> <span class="sr-only">Pinned</span>
edited <time class="dt-updated" datetime="{{- .EditedAt -}}">{{- .EditedAt | timestampPrecise -}}</time> <i class="fa fa-thumb-tack" aria-hidden="true"></i>
</dd> </dt>
<dd class="sr-only">{{- .Pinned -}}</dd>
</div> </div>
{{ end }} {{- else }}
<div class="stats-grouping"> {{- end }}
<div class="stats-item" title="Replies"> </div>
<dt> <details class="stats-more-info">
<span class="sr-only">Replies</span> <summary title="More info">
<i class="fa fa-reply-all" aria-hidden="true"></i> <span class="sr-only">More info</span>
</dt> <i class="fa fa-chevron-right show" aria-hidden="true"></i>
<dd>{{- .RepliesCount -}}</dd> <i class="fa fa-chevron-down hide" aria-hidden="true"></i>
</summary>
<div class="stats-more-info-content">
<div class="stats-grouping">
{{- if .LanguageTag.DisplayStr }}
<div class="stats-item" title="{{ .LanguageTag.DisplayStr }}">
<dt>
<span class="sr-only">Language</span>
<i class="fa fa-language" aria-hidden="true"></i>
</dt>
<dd>
<span class="sr-only">{{ .LanguageTag.DisplayStr }}</span>
<span aria-hidden="true">{{- .LanguageTag.TagStr -}}</span>
</dd>
</div>
{{- else }}
{{- end }}
<div class="stats-item" title="Replies">
<dt>
<span class="sr-only">Replies</span>
<i class="fa fa-reply-all" aria-hidden="true"></i>
</dt>
<dd>{{- .RepliesCount -}}</dd>
</div>
<div class="stats-item" title="Faves">
<dt>
<span class="sr-only">Favourites</span>
<i class="fa fa-star" aria-hidden="true"></i>
</dt>
<dd>{{- .FavouritesCount -}}</dd>
</div>
<div class="stats-item" title="Boosts">
<dt>
<span class="sr-only">Reblogs</span>
<i class="fa fa-retweet" aria-hidden="true"></i>
</dt>
<dd>{{- .ReblogsCount -}}</dd>
</div>
</div> </div>
<div class="stats-item" title="Faves"> {{- if .EditedAt -}}
<div class="stats-item edited-at text-cutoff" title="Edited {{ .EditedAt -}}">
<dt> <dt>
<span class="sr-only">Favourites</span> <span class="sr-only">Edited</span>
<i class="fa fa-star" aria-hidden="true"></i> <i class="fa fa-pencil" aria-hidden="true"></i>
</dt> </dt>
<dd>{{- .FavouritesCount -}}</dd> <dd class="text-cutoff">
<time class="dt-updated" datetime="{{- .EditedAt -}}">{{- .EditedAt | timestampPrecise -}}</time>
</dd>
</div> </div>
<div class="stats-item" title="Boosts"> {{ end }}
<dt>
<span class="sr-only">Reblogs</span>
<i class="fa fa-retweet" aria-hidden="true"></i>
</dt>
<dd>{{- .ReblogsCount -}}</dd>
</div>
{{- if .Pinned }}
<div class="stats-item" title="Pinned">
<dt>
<span class="sr-only">Pinned</span>
<i class="fa fa-thumb-tack" aria-hidden="true"></i>
</dt>
<dd class="sr-only">{{- .Pinned -}}</dd>
</div>
{{- else }}
{{- end }}
</div> </div>
</div> </details>
{{- if .LanguageTag.DisplayStr }}
<div class="stats-item language" title="{{ .LanguageTag.DisplayStr }}">
<dt class="sr-only">Language</dt>
<dd>
<span class="sr-only">{{ .LanguageTag.DisplayStr }}</span>
<span aria-hidden="true">{{- .LanguageTag.TagStr -}}</span>
</dd>
</div>
{{- else }}
{{- end }}
</dl> </dl>
{{- end }} {{- end }}