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

[feature/frontend] Better visual separation between "main" thread and "replies" (#3093)

Browse source 
* [feature/frontend] Better web threading model

* fix test

* bwap

* tweaks

* more tweaks to wording

* typo

* indenting

* adjust wording

* aaa
This commit is contained in:
tobi 2024-07-12 20:36:03 +02:00 • committed by GitHub
commit aeb65bceae
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
16 changed files with 895 additions and 385 deletions
Download patch file Download diff file Expand all files Collapse all files

39
web/source/css/thread.css
View file

@ -17,11 +17,14 @@
along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
.thread {
.thread,
.thread-wrapper {
display: flex;
flex-direction: column;
gap: 0.4rem;
}
.thread {
/*
This column header might contain
quite some info, so let it wrap.
@ -42,8 +45,40 @@
}
.status {
border-radius: 0;
&.indent-1 {
margin-left: 0.5rem;
}
&.indent-2 {
margin-left: 1rem;
}
&.indent-3 {
margin-left: 1.5rem;
}
&.indent-4 {
margin-left: 2rem;
}
&.indent-5 {
margin-left: 2.5rem;
}
&.indent-1,
&.indent-2,
&.indent-3,
&.indent-4,
&.indent-5 {
.status-link {
margin-left: -0.5rem;
border-left: 0.1rem dashed $border-accent;
}
}
border-radius: 0;
&:last-child {
border-bottom-left-radius: $br;
border-bottom-right-radius: $br;

2
web/template/status_poll.tmpl
View file

@ -58,7 +58,7 @@
</span>
</figcaption>
<ul class="poll-options nodot">
{{- range $index, $pollOption := .WebPollOptions }}
{{- range $index, $pollOption := .PollOptions }}
<li class="poll-option">
<span class="sr-only">Option {{ increment $index }},</span>
<span lang="{{- .LanguageTag.TagStr -}}">{{ emojify .Emojis (noescape $pollOption.Title) }}</span>

122
web/template/thread.tmpl
View file

@ -17,45 +17,103 @@
// along with this program. If not, see <http://www.gnu.org/licenses/>.
*/ -}}
{{- define "threadLength" -}}
{{- with $length := add (len $.context.Ancestors) (len $.context.Descendants) | increment -}}
{{- if eq $length 1 -}}
{{- $length }} post
{{- define "repliesSummary" -}}
{{- if .context.ThreadRepliesShown -}}
{{- if .context.ThreadRepliesHidden -}}
{{- if eq .context.ThreadReplies 1 -}}
{{- /* Some replies are hidden. */ -}}
{{ .context.ThreadRepliesShown }} visible reply
{{- else if gt .context.ThreadRepliesShown 1 -}}
{{ .context.ThreadRepliesShown }} visible replies
{{- end -}}
; {{ .context.ThreadRepliesHidden }} more {{ if eq .context.ThreadRepliesHidden 1 }}reply{{ else }}replies{{ end }} hidden or not public
{{- else -}}
{{- $length }} posts
{{- /* No hidden replies. */ -}}
{{- if eq .context.ThreadReplies 1 -}}
{{ .context.ThreadReplies }} reply
{{- else if gt .context.ThreadReplies 1 -}}
{{ .context.ThreadReplies }} replies
{{- end -}}
{{- end -}}
{{- end -}}
{{- end -}}
{{- define "threadSummary" -}}
{{- if .context.ThreadHidden -}}
{{- if eq .context.ThreadShown 1 -}}
Single visible post
{{- else if gt .context.ThreadShown 1 -}}
Thread of {{ .context.ThreadShown }} visible posts
{{- end -}}
; {{ .context.ThreadHidden }} more {{ if eq .context.ThreadHidden 1 }}post{{ else }}posts{{ end }} hidden or not public
{{- else -}}
{{- /* No hidden posts */ -}}
{{- if eq .context.ThreadLength 1 -}}
Single post
{{- else if gt .context.ThreadLength 1 -}}
Thread of {{ .context.ThreadLength }} posts
{{- end -}}
{{- end -}}
{{- end -}}
{{- define "repliesStart" -}}
{{- with . }}
<main data-nosnippet class="thread" aria-labelledby="thread-summary">
<div class="col-header">
<h2 id="thread-summary">Thread with {{ template "threadLength" . -}}</h2>
<a href="#{{- .status.ID -}}">jump to expanded post</a>
</section>
<section class="thread thread-replies" aria-labelledby="replies" open>
<div class="col-header replies">
<h2 id="replies">{{- template "repliesSummary" . -}}</h2>
<a href="#thread-summary">back to top</a>
</div>
{{- range .context.Ancestors }}
<article
class="status"
{{- includeAttr "status_attributes.tmpl" . | indentAttr 2 }}
>
{{- include "status.tmpl" . | indent 2 }}
</article>
{{- end }}
{{- with .status }}
<article
class="status expanded"
{{- includeAttr "status_attributes.tmpl" . | indentAttr 2 }}
>
{{- include "status.tmpl" . | indent 2 }}
</article>
{{- end }}
{{- range .context.Descendants }}
<article
class="status"
{{- includeAttr "status_attributes.tmpl" . | indentAttr 2 }}
>
{{- include "status.tmpl" . | indent 2 }}
</article>
{{- end }}
{{- end -}}
{{- with . }}
<main class="thread-wrapper" data-nosnippet>
<section class="thread thread-main" aria-labelledby="thread-summary">
<div class="col-header">
<h2 id="thread-summary">{{- template "threadSummary" . -}}</h2>
{{- if .context.ThreadRepliesShown }}
<a href="#replies">jump to replies</a>
{{- end }}
</div>
{{- range $thisStatus := .context.Ancestors }}
{{- if $thisStatus.ThreadFirstReply }}
{{- include "repliesStart" $ | indent 1 }}
{{- end }}
<article
class="status{{- if $thisStatus.Indent }} indent-{{ $thisStatus.Indent }}{{- end -}}"
{{- includeAttr "status_attributes.tmpl" $thisStatus | indentAttr 3 }}
>
{{- include "status.tmpl" $thisStatus | indent 3 }}
</article>
{{- end }}
{{- with $thisStatus := .context.Status }}
{{- if $thisStatus.ThreadFirstReply }}
{{- include "repliesStart" $ | indent 1 }}
{{- end }}
<article
class="status expanded{{- if $thisStatus.Indent }} indent-{{ $thisStatus.Indent }}{{- end -}}"
{{- includeAttr "status_attributes.tmpl" $thisStatus | indentAttr 3 }}
>
{{- include "status.tmpl" $thisStatus | indent 3 }}
</article>
{{- end }}
{{- range $thisStatus := .context.Descendants }}
{{- if $thisStatus.ThreadFirstReply }}
{{- include "repliesStart" $ | indent 1 }}
{{- end }}
<article
class="status{{- if $thisStatus.Indent }} indent-{{ $thisStatus.Indent }}{{- end -}}"
{{- includeAttr "status_attributes.tmpl" $thisStatus | indentAttr 3 }}
>
{{- include "status.tmpl" $thisStatus | indent 3 }}
</article>
{{- end }}
{{- if .context.ThreadReplies }}
</section>
{{- end }}
</main>
{{- end }}