diff options
Diffstat (limited to 'web')
| -rw-r--r-- | web/source/css/status.css | 58 | ||||
| -rw-r--r-- | web/template/poll.tmpl | 57 | ||||
| -rw-r--r-- | web/template/status.tmpl | 1 |
3 files changed, 116 insertions, 0 deletions
diff --git a/web/source/css/status.css b/web/source/css/status.css index 35f2cdd37..49ae63641 100644 --- a/web/source/css/status.css +++ b/web/source/css/status.css @@ -391,6 +391,64 @@ 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 new file mode 100644 index 000000000..bfc31a9dc --- /dev/null +++ b/web/template/poll.tmpl @@ -0,0 +1,57 @@ +{{- /* +// 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 <http://www.gnu.org/licenses/>. +*/ -}} + +{{- /* + Template for rendering a web view of a poll. + To use this template, pass a web view status into it. +*/ -}} + + <figure class="poll"> + <figcaption class="poll-info"> + <span class="poll-expiry"> + {{- if .Poll.Expired -}} + Poll closed {{- .Poll.ExpiresAt | timestampPrecise -}} + {{- else if .Poll.ExpiresAt -}} + Poll open until {{- .Poll.ExpiresAt | timestampPrecise -}} + {{- else -}} + Infinite poll (no expiry) + {{- end -}} + </span> + <span class="total-votes">Total votes: {{ .Poll.VotesCount }}</span> + </figcaption> + <ul class="poll-options"> + {{- range $index, $pollOption := .WebPollOptions }} + <li class="poll-option"> + <label aria-hidden="true" for="option-{{- increment $index -}}" lang="{{- .LanguageTag.TagStr -}}">{{- emojify .Emojis (noescape $pollOption.Title) -}}</label> + <meter aria-hidden="true" id="option-{{- increment $index -}}" min="0" max="100" value="{{- $pollOption.VoteShare -}}">{{- $pollOption.VoteShare -}}%</meter> + <div class="sr-only">Option {{ increment $index }}: <span lang="{{ .LanguageTag.TagStr }}">{{ emojify .Emojis (noescape $pollOption.Title) -}}</span></div> + <div class="poll-vote-summary"> + <span class="poll-vote-share">{{- $pollOption.VoteShareStr -}}%</span> + <span class="poll-vote-count"> + {{- if eq $pollOption.VotesCount 1 -}} + {{- $pollOption.VotesCount }} vote + {{- else -}} + {{- $pollOption.VotesCount }} votes + {{- end -}} + </span> + </div> + </li> + {{- end }} + </ul> + </figure> diff --git a/web/template/status.tmpl b/web/template/status.tmpl index bf24f6e7c..59725a470 100644 --- a/web/template/status.tmpl +++ b/web/template/status.tmpl @@ -109,6 +109,7 @@ {{end}} </div> {{end}} + {{- if .Poll -}}{{ template "poll.tmpl" . }}{{ end -}} </section> <aside class="info"> <time datetime="{{.CreatedAt}}">{{.CreatedAt | timestampPrecise}}</time> |