From 8c2d94c16853464828cbeba255cff2c69e96da78 Mon Sep 17 00:00:00 2001
From: tobi <31960611+tsmethurst@users.noreply.github.com>
Date: Wed, 22 Nov 2023 12:17:42 +0100
Subject: [feature] Poll web view (#2377)

* [feature] Render polls nicely on the web view

* use figure for poll, other small tweaks

* reverse share + count (lines up better)

* poll options list entries

* fix up some remaining things
---
 web/source/css/status.css | 58 +++++++++++++++++++++++++++++++++++++++++++++++
 web/template/poll.tmpl    | 57 ++++++++++++++++++++++++++++++++++++++++++++++
 web/template/status.tmpl  |  1 +
 3 files changed, 116 insertions(+)
 create mode 100644 web/template/poll.tmpl

(limited to 'web')

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&nbsp;{{- .Poll.ExpiresAt | timestampPrecise -}}
+				{{- else if .Poll.ExpiresAt -}}
+					Poll open until&nbsp;{{- .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 -}}&#37;</meter>
+				<div class="sr-only">Option {{ increment $index }}:&nbsp;<span lang="{{ .LanguageTag.TagStr }}">{{ emojify .Emojis (noescape $pollOption.Title) -}}</span></div>
+				<div class="poll-vote-summary">
+					<span class="poll-vote-share">{{- $pollOption.VoteShareStr -}}&#37;</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>
-- 
cgit v1.3