From dacfd413dcfc5ead5d019efbe45059f2f6922696 Mon Sep 17 00:00:00 2001 From: tobi <31960611+tsmethurst@users.noreply.github.com> Date: Tue, 5 Dec 2023 12:43:07 +0100 Subject: [PATCH] [chore/frontend] Refactor status templates slightly, put polls behind CWs if present (#2419) * [chore/frontend] Reorder templates, allow polls to be inside content warnings * show when multiple-choice --- internal/api/model/attachment.go | 6 + internal/typeutils/internaltofrontend.go | 6 + web/source/css/status.css | 141 ++++++++-------- web/template/status.tmpl | 163 +++++++------------ web/template/status_attachments.tmpl | 94 +++++++++++ web/template/{poll.tmpl => status_poll.tmpl} | 15 +- 6 files changed, 245 insertions(+), 180 deletions(-) create mode 100644 web/template/status_attachments.tmpl rename web/template/{poll.tmpl => status_poll.tmpl} (90%) diff --git a/internal/api/model/attachment.go b/internal/api/model/attachment.go index 1911fc9c3..7e81759f2 100644 --- a/internal/api/model/attachment.go +++ b/internal/api/model/attachment.go @@ -90,6 +90,12 @@ type Attachment struct { // A hash computed by the BlurHash algorithm, for generating colorful preview thumbnails when media has not been downloaded yet. // See https://github.com/woltapp/blurhash Blurhash *string `json:"blurhash"` + + // Additional fields not exposed via JSON + // (used only internally for templating etc). + + // Parent status of this media is sensitive. + Sensitive bool `json:"-"` } // MediaMeta models media metadata. diff --git a/internal/typeutils/internaltofrontend.go b/internal/typeutils/internaltofrontend.go index fe5c8ec8f..b3d263963 100644 --- a/internal/typeutils/internaltofrontend.go +++ b/internal/typeutils/internaltofrontend.go @@ -721,6 +721,12 @@ func (c *Converter) StatusToWebStatus( webStatus.WebPollOptions = webPollOptions } + // Set additional templating + // variables on media attachments. + for _, a := range webStatus.MediaAttachments { + a.Sensitive = webStatus.Sensitive + } + return webStatus, nil } diff --git a/web/source/css/status.css b/web/source/css/status.css index 49ae63641..d2aa658f1 100644 --- a/web/source/css/status.css +++ b/web/source/css/status.css @@ -113,10 +113,17 @@ main { gap: 0.5rem; } - details > summary { + .text-spoiler > summary, .text { + position: relative; + z-index: 2; + } + + .text-spoiler > summary { display: inline-block; list-style: none; + padding-bottom: 0.5rem; + &::-webkit-details-marker { display: none; /* Safari */ } @@ -124,6 +131,8 @@ main { .button { white-space: nowrap; cursor: pointer; + padding: 0.2rem 0.3rem; + font-size: 1rem; } } @@ -132,20 +141,12 @@ main { grid-row: span 1; grid-column: 1 / span 3; - position: relative; - z-index: 2; + display: flex; + flex-direction: column; + gap: 0.5rem; width: 100%; - details > summary { - padding-bottom: 0.5rem; - - .button { - padding: 0.2rem 0.3rem; - font-size: 1rem; - } - } - a { color: $link-fg; text-decoration: underline; @@ -239,6 +240,64 @@ main { border: $boxshadow-border; border-radius: $br-inner; } + + .poll { + background-color: $gray2; + z-index: 2; + + display: flex; + flex-direction: column; + border-radius: $br; + padding: 0.5rem; + margin: 0; + gap: 1rem; + + .poll-options { + margin: 0; + padding: 0; + display: flex; + flex-direction: column; + gap: 1rem; + + .poll-option { + display: flex; + flex-direction: column; + gap: 0.1rem; + + label { + cursor: default; + } + + meter { + width: 100%; + } + + .poll-vote-summary { + display: flex; + flex-wrap: wrap; + justify-content: space-between; + white-space: nowrap; + } + } + } + + .poll-info { + background-color: $gray4; + display: flex; + flex-wrap: wrap; + justify-content: space-between; + border-radius: $br-inner; + padding: 0.25rem; + gap: 0.25rem; + + span { + justify-self: center; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + } + } } .media { @@ -391,64 +450,6 @@ main { } } - .poll { - background-color: $gray2; - z-index: 2; - - display: flex; - flex-direction: column; - border-radius: $br; - padding: 0.5rem; - margin: 0; - gap: 1rem; - - .poll-options { - margin: 0; - padding: 0; - display: flex; - flex-direction: column; - gap: 1rem; - - .poll-option { - display: flex; - flex-direction: column; - gap: 0.1rem; - - label { - cursor: default; - } - - meter { - width: 100%; - } - - .poll-vote-summary { - display: flex; - flex-wrap: wrap; - justify-content: space-between; - white-space: nowrap; - } - } - } - - .poll-info { - background-color: $gray4; - display: flex; - flex-wrap: wrap; - justify-content: space-between; - border-radius: $br-inner; - padding: 0.25rem; - gap: 0.25rem; - - span { - justify-self: center; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - } - } - } - .info { display: flex; background: $toot-info-bg; diff --git a/web/template/status.tmpl b/web/template/status.tmpl index 59725a470..d4df926f0 100644 --- a/web/template/status.tmpl +++ b/web/template/status.tmpl @@ -17,127 +17,80 @@ // along with this program. If not, see . */ -}} +Open thread
- - - - {{if .Account.DisplayName}} - {{emojify .Account.Emojis (escape .Account.DisplayName)}} - {{else}} - {{.Account.Username}} - {{end}} - . + + + + + + {{- if .Account.DisplayName -}} + {{- emojify .Account.Emojis (escape .Account.DisplayName) -}}. Username: @{{ .Account.Acct -}}. + {{- else -}} + @{{- .Account.Acct -}}. + {{- end -}} - @{{.Account.Username}}, {{acctInstance .Account.Acct}}
-
- {{if .SpoilerText}} -
- - {{emojify .Emojis (escape .SpoilerText)}} - Toggle visibility - -
- {{emojify .Emojis (noescape .Content)}} + {{- if .SpoilerText }} +
+ + {{- emojify .Emojis (escape .SpoilerText) -}} + Toggle visibility + +
+
+ {{ emojify .Emojis (noescape .Content) }}
-
- {{else}} -
- {{emojify .Emojis (noescape .Content)}} + {{- if .Poll }} + {{ template "status_poll.tmpl" . }} + {{- end }}
- {{end}} +
+ {{- else }} +
+
+ {{ emojify .Emojis (noescape .Content) }} +
+ {{- if .Poll }} + {{ template "status_poll.tmpl" . }} + {{- end }}
- {{with .MediaAttachments}} -
- {{range $index, $media := .}} - {{with $media}} -
-
- - - - - - - - {{if eq .Type "video"}} - - {{else if eq .Type "image"}} - - {{end}} - - {{if eq .Type "video"}} - - {{else if eq .Type "image"}} - - - - {{else}} - - - - {{end}} -
-
- {{end}} - {{end}} -
- {{end}} - {{- if .Poll -}}{{ template "poll.tmpl" . }}{{ end -}} + {{- end }} + {{- if .MediaAttachments }} + {{ template "status_attachments.tmpl" . }} + {{- end }}
-Open - thread \ No newline at end of file diff --git a/web/template/status_attachments.tmpl b/web/template/status_attachments.tmpl new file mode 100644 index 000000000..bd26c82a6 --- /dev/null +++ b/web/template/status_attachments.tmpl @@ -0,0 +1,94 @@ +{{- /* +// GoToSocial +// Copyright (C) GoToSocial Authors admin@gotosocial.org +// SPDX-License-Identifier: AGPL-3.0-or-later +// +// This program is free software: you can redistribute it and/or modify +// it under the terms of the GNU Affero General Public License as published by +// the Free Software Foundation, either version 3 of the License, or +// (at your option) any later version. +// +// This program is distributed in the hope that it will be useful, +// but WITHOUT ANY WARRANTY; without even the implied warranty of +// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the +// GNU Affero General Public License for more details. +// +// You should have received a copy of the GNU Affero General Public License +// along with this program. If not, see . +*/ -}} + +{{- /* + Template for rendering a gallery of status media attachments. + To use this template, pass a web view status into it. +*/ -}} + +{{ with .MediaAttachments }} +
+ {{- range $index, $media := . }} +
+
+ + + + + + + {{- if eq .Type "video" }} + + {{- else if eq .Type "image" }} + + {{- end }} + + {{- if eq .Type "video" }} + + {{- else if eq .Type "image" }} + + + + {{- else }} + + + + {{- end }} +
+
+ {{- end }} +
+{{- end }} diff --git a/web/template/poll.tmpl b/web/template/status_poll.tmpl similarity index 90% rename from web/template/poll.tmpl rename to web/template/status_poll.tmpl index 7aa323e4f..f6acecfa0 100644 --- a/web/template/poll.tmpl +++ b/web/template/status_poll.tmpl @@ -25,12 +25,17 @@
- {{- if .Poll.Expired -}} - Poll closed {{- .Poll.ExpiresAt | timestampPrecise -}} - {{- else if .Poll.ExpiresAt -}} - Poll open until {{- .Poll.ExpiresAt | timestampPrecise -}} + {{- if .Poll.Multiple -}} + Multiple-choice poll  {{- else -}} - Infinite poll (no expiry) + Poll  + {{- end -}} + {{- if .Poll.Expired -}} + closed {{ .Poll.ExpiresAt | timestampPrecise -}} + {{- else if .Poll.ExpiresAt -}} + open until {{ .Poll.ExpiresAt | timestampPrecise -}} + {{- else -}} + open forever {{- end -}} Total votes: {{ .Poll.VotesCount }}