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: [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 --- web/source/css/status.css | 141 +++++++++++++++--------------- web/template/poll.tmpl | 57 ------------ web/template/status.tmpl | 163 +++++++++++++---------------------- web/template/status_attachments.tmpl | 94 ++++++++++++++++++++ web/template/status_poll.tmpl | 62 +++++++++++++ 5 files changed, 285 insertions(+), 232 deletions(-) delete mode 100644 web/template/poll.tmpl create mode 100644 web/template/status_attachments.tmpl create mode 100644 web/template/status_poll.tmpl (limited to 'web') 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/poll.tmpl b/web/template/poll.tmpl deleted file mode 100644 index 7aa323e4f..000000000 --- a/web/template/poll.tmpl +++ /dev/null @@ -1,57 +0,0 @@ -{{- /* -// 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 web view of a poll. - To use this template, pass a web view status into it. -*/ -}} - -
-
- - {{- if .Poll.Expired -}} - Poll closed {{- .Poll.ExpiresAt | timestampPrecise -}} - {{- else if .Poll.ExpiresAt -}} - Poll open until {{- .Poll.ExpiresAt | timestampPrecise -}} - {{- else -}} - Infinite poll (no expiry) - {{- end -}} - - Total votes: {{ .Poll.VotesCount }} -
- -
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}} -
- {{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}} +
+ {{- else }} +
+
+ {{ emojify .Emojis (noescape .Content) }} +
+ {{- if .Poll }} + {{ template "status_poll.tmpl" . }} + {{- 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/status_poll.tmpl b/web/template/status_poll.tmpl new file mode 100644 index 000000000..f6acecfa0 --- /dev/null +++ b/web/template/status_poll.tmpl @@ -0,0 +1,62 @@ +{{- /* +// 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 web view of a poll. + To use this template, pass a web view status into it. +*/ -}} + +
+
+ + {{- if .Poll.Multiple -}} + Multiple-choice poll  + {{- else -}} + 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 }} +
+
    + {{- range $index, $pollOption := .WebPollOptions }} +
  • + + +
    Option {{ increment $index }}: {{ emojify .Emojis (noescape $pollOption.Title) -}}
    +
    + {{- $pollOption.VoteShareStr -}}% + + {{- if eq $pollOption.VotesCount 1 -}} + {{- $pollOption.VotesCount }} vote + {{- else -}} + {{- $pollOption.VotesCount }} votes + {{- end -}} + +
    +
    • + {{- end }} +
+
-- cgit v1.2.3