nodebb-plugin-poll 3.2.9 → 4.0.0

package/public/js/poll/view.js

@@ -2,13 +2,11 @@
 
 (function (Poll) {
 	function vote(view, options) {
-		var form = view.dom.votingPanel.find('form');
-		var votes = form.serializeArray().map(function (option) {
-			return parseInt(option.value, 10);
-		});
+		const form = view.dom.votingPanel.find('form');
+		const votes = form.serializeArray().map(option => parseInt(option.value, 10));
 
 		if (votes.length > 0) {
-			var voteData = {
+			const voteData = {
 				pollId: view.pollData.info.pollId,
 				options: votes,
 				voteAnon: options.voteAnon,
@@ -28,11 +26,11 @@
 		}
 	}
 
-	var Actions = [
+	const Actions = [
 		{
 			// Voting
 			register: function (view) {
-				var self = this;
+				const self = this;
 				view.dom.voteButton.off('click').on('click', function () {
 					self.handle(view);
 				});
@@ -46,7 +44,7 @@
 		{
 			// vote anon
 			register: function (view) {
-				var self = this;
+				const self = this;
 				view.dom.voteAnonButton.off('click').on('click', function () {
 					self.handle(view);
 				});
@@ -60,19 +58,19 @@
 		{
 			// update voting
 			register: function (view) {
-				var self = this;
+				const self = this;
 				view.dom.updateVoteButton.off('click').on('click', function () {
 					self.handle(view);
 				});
 			},
 			handle: function (view) {
-				var form = view.dom.votingPanel.find('form');
-				var votes = form.serializeArray().map(function (option) {
+				const form = view.dom.votingPanel.find('form');
+				const votes = form.serializeArray().map(function (option) {
 					return parseInt(option.value, 10);
 				});
 
 				if (votes.length > 0) {
-					var voteData = {
+					const voteData = {
 						pollId: view.pollData.info.pollId,
 						options: votes,
 					};
@@ -88,13 +86,13 @@
 		{
 			// Remove vote
 			register: function (view) {
-				var self = this;
+				const self = this;
 				view.dom.removeVoteButton.off('click').on('click', function () {
 					self.handle(view);
 				});
 			},
 			handle: function (view) {
-				var voteData = { pollId: view.pollData.info.pollId };
+				const voteData = { pollId: view.pollData.info.pollId };
 
 				socket.emit('plugins.poll.removeVote', voteData, function (err) {
 					if (err) {
@@ -107,7 +105,7 @@
 		{
 			// Results button
 			register: function (view) {
-				var self = this;
+				const self = this;
 				view.dom.resultsPanelButton.off('click').on('click', function () {
 					self.handle(view);
 				});
@@ -119,7 +117,7 @@
 		{
 			// To Voting button
 			register: function (view) {
-				var self = this;
+				const self = this;
 				view.dom.votingPanelButton.off('click').on('click', function () {
 					self.handle(view);
 				});
@@ -131,13 +129,13 @@
 		{
 			// Option details
 			register: function (view) {
-				var self = this;
+				const self = this;
 				view.dom.resultsPanel.off('click').on('click', '.poll-result-votecount', function (e) {
 					self.handle(view, e);
 				});
 			},
 			handle: function (view, e) {
-				var optionId = $(e.currentTarget).parents('[data-poll-option-id]').data('poll-option-id');
+				const optionId = $(e.currentTarget).parents('[data-poll-option-id]').data('poll-option-id');
 
 				socket.emit('plugins.poll.getOptionDetails', {
 					pollId: view.pollData.info.pollId,
@@ -151,66 +149,50 @@
 				});
 			},
 		},
-		{
-			// Editing
-			register: function (view) {
-				var self = this;
-				view.dom.editButton.off('click').on('click', function () {
-					self.handle(view);
-				});
-			},
-			handle: function (view) {
-				socket.emit('plugins.poll.getConfig', null, function (err, config) {
-					if (err) {
-						console.error(err);
-					}
-					Poll.creator.show(view.pollData, config, function () {});
-				});
-			},
-		},
 	];
 
-	var View = function (pollData) {
+	const View = function (pollData) {
 		this.pollData = pollData;
 	};
 
-	View.prototype.load = function () {
-		var self = this;
+	View.prototype.load = async function () {
+		const self = this;
 		if (!self.pollData.container.length) {
 			return;
 		}
 
-		app.parseAndTranslate('poll/view', { poll: self.pollData }, function (panel) {
-			self.pollData.container.prepend(panel);
-			self.dom = {
-				panel: panel,
-				votingForm: panel.find('.poll-voting-form'),
-				messages: panel.find('.poll-view-messages'),
-				votingPanel: panel.find('.poll-view-voting'),
-				resultsPanel: panel.find('.poll-view-results'),
-				voteButton: panel.find('.poll-button-vote'),
-				voteAnonButton: panel.find('.poll-button-vote-anon'),
-				updateVoteButton: panel.find('.poll-button-update-vote'),
-				removeVoteButton: panel.find('.poll-button-remove-vote'),
-				votingPanelButton: panel.find('.poll-button-voting'),
-				resultsPanelButton: panel.find('.poll-button-results'),
-				editButton: panel.find('.poll-button-edit'),
-			};
-
-			self.hideMessage();
-
-			self.pollEndedOrDeleted();
-			self.hasVotedAndVotingUpdateDisallowed();
-
-			if (!app.user.uid || self.pollData.hasVoted) {
-				self.showResultsPanel();
-			} else {
-				self.showVotingPanel();
-			}
+		const panel = await app.parseAndTranslate('poll/view', {
+			poll: self.pollData,
+			isAdmin: app.user.isAdmin,
+		});
+		self.pollData.container.prepend(panel);
+		self.dom = {
+			panel: panel,
+			votingForm: panel.find('.poll-voting-form'),
+			messages: panel.find('.poll-view-messages'),
+			votingPanel: panel.find('.poll-view-voting'),
+			resultsPanel: panel.find('.poll-view-results'),
+			voteButton: panel.find('.poll-button-vote'),
+			voteAnonButton: panel.find('.poll-button-vote-anon'),
+			updateVoteButton: panel.find('.poll-button-update-vote'),
+			removeVoteButton: panel.find('.poll-button-remove-vote'),
+			votingPanelButton: panel.find('.poll-button-voting'),
+			resultsPanelButton: panel.find('.poll-button-results'),
+		};
+
+		self.hideMessage();
+
+		self.pollEndedOrDeleted();
+		self.hasVotedAndVotingUpdateDisallowed();
+
+		if (!app.user.uid || self.pollData.hasVoted) {
+			self.showResultsPanel();
+		} else {
+			self.showVotingPanel();
+		}
 
-			Actions.forEach(function (action) {
-				action.register(self);
-			});
+		Actions.forEach(function (action) {
+			action.register(self);
 		});
 	};
 
@@ -219,7 +201,7 @@
 	};
 
 	View.prototype.voteUpdateAllowed = function () {
-		return parseInt(this.pollData.settings.disallowVoteUpdate, 10) !== 1;
+		return parseInt(this.pollData.disallowVoteUpdate, 10) !== 1;
 	};
 
 	View.prototype.pollEndedOrDeleted = function () {
@@ -252,7 +234,7 @@
 		this.pollEndedOrDeleted();
 
 		this.pollData.options.forEach(function (option) {
-			var el = this.dom.resultsPanel.find('[data-poll-option-id=' + option.id + ']');
+			const el = this.dom.resultsPanel.find('[data-poll-option-id=' + option.id + ']');
 			el.find('.poll-result-votecount span').translateText(`[[poll:x-votes, ${option.voteCount}]]`);
 			el.find('.poll-result-progressbar').css('width', option.percentage + '%')
 				.find('span.percent').text(option.percentage);
@@ -264,7 +246,7 @@
 	};
 
 	View.prototype.showMessage = function (title, content) {
-		var self = this;
+		const self = this;
 
 		app.parseAndTranslate('poll/view/messages', { title: title, content: content }, function (html) {
 			self.dom.messages.html(html).removeClass('hidden');
@@ -279,6 +261,7 @@
 		require(['bootbox'], function (bootbox) {
 			app.parseAndTranslate('poll/view/details', details, function (html) {
 				bootbox.dialog({
+					title: `[[poll:x-users-voted-for-this-option, ${details.voteCount}]]`,
 					message: html,
 					backdrop: true,
 					buttons: {
@@ -292,7 +275,7 @@
 	};
 
 	View.prototype.fillVotingForm = function () {
-		var self = this;
+		const self = this;
 		this.resetVotingForm();
 		if (this.pollData.vote && this.pollData.vote.options) {
 			this.pollData.vote.options.forEach(function (id) {
@@ -318,7 +301,7 @@
 			}
 		} else {
 			this.showVoteButton();
-			if (this.pollData.settings.allowAnonVoting) {
+			if (this.pollData.allowAnonVoting) {
 				this.showVoteAnonButton();
 			}
 		}
@@ -399,16 +382,19 @@
 	};
 
 	Poll.view = {
-		polls: {},
-		load: function (pollData) {
-			var view = new View(pollData);
-			this.polls[pollData.info.pollId] = view;
-
-			view.load();
+		polls: Object.create(null),
+		load: async function (pollData) {
+			const pollId = pollData.info.pollId;
+			if (Object.hasOwn(this.polls, pollId)) {
+				pollData.container.find(`[data-poll-id="${pollId}"]`).remove();
+			}
+			const view = new View(pollData);
+			this.polls[pollId] = view;
+			await view.load();
 		},
 		update: function (pollData, uid) {
-			var pollId = pollData.info.pollId;
-			if (this.polls.hasOwnProperty(pollId)) {
+			const pollId = pollData.info.pollId;
+			if (Object.hasOwn(this.polls, pollId)) {
 				this.polls[pollId].update(pollData, uid);
 			}
 		},

package/public/scss/style.scss

@@ -1,4 +1 @@
-// Hide poll button in composer on reply
-.composer.reply .poll, .composer.reply .ql-poll {
-  display: none;
-}
+

package/schema.md

@@ -0,0 +1,24 @@
+
+post:100 {
+	...
+	pollIds: ["200", "201", ...]
+}
+
+poll:200 {
+	"_key" : "poll:200",
+	"deleted" : 0,
+	"end" : 0, // or unix timestamp when voting will close
+	"pid" : 100,
+	"pollId" : 200,
+	"timestamp" : 1772893625284,
+	"uid" : 1,
+	"options": [
+		{ id: "300", title: "option 1" }, { id: "301", title: "option 2" }, { id: "302", title: "option 3" }
+	]
+}
+
+poll:123:voters // uids of voters zset
+
+poll:123:options:300:votes { //zset of uids who voted for this option
+	score: "<timestamp>", value: "1"
+}

package/templates/admin/partials/widgets/poll.tpl

@@ -1,5 +1,5 @@
 <div class="mb-3">
-	<label class="form-label">Topic ID:</label>
-	<input type="text" class="form-control" name="tid" />
+	<label class="form-label">Poll ID:</label>
+	<input type="text" class="form-control" name="pollId" />
 </div>
 

package/templates/admin/plugins/poll.tpl

@@ -1,57 +1,72 @@
 <div class="acp-page-container">
 	<div component="settings/main/header" class="row border-bottom py-2 m-0 sticky-top acp-page-main-header align-items-center">
-        <div class="col-12 col-md-8 px-0 mb-1 mb-md-0">
-            <h4 class="fw-bold tracking-tight mb-0">{title}</h4>
-        </div>
-        <div class="col-12 col-md-4 px-0 px-md-3 text-end">
-            <button id="reset" class="btn btn-warning btn-sm fw-semibold ff-secondary text-center text-nowrap">[[poll:reset]]</button>
-            <button id="save" class="btn btn-primary btn-sm fw-semibold ff-secondary text-center text-nowrap">[[admin/admin:save-changes]]</button>
-        </div>
-    </div>
+		<div class="col-12 col-md-8 px-0 mb-1 mb-md-0">
+			<h4 class="fw-bold tracking-tight mb-0">{title}</h4>
+		</div>
+		<div class="col-12 col-md-4 px-0 px-md-3 text-end">
+			<button id="save" class="btn btn-primary btn-sm fw-semibold ff-secondary text-center text-nowrap">[[admin/admin:save-changes]]</button>
+		</div>
+	</div>
 
 	<div class="row m-0">
-		<div id="spy-container" class="col-12 px-0 mb-4" tabindex="0">
-            <form class="form poll-settings">
-                <div class="card">
-                    <div class="card-header">[[poll:poll]]</div>
-                    <div class="card-body">
-                        <div class="mb-3">
-                            <h6>[[poll:toggles]]</h6>
-                            <div class="mb-3">
-                                <div class="form-check">
-                                    <label class="form-check-label">[[poll:allow_guests]]</label>
-                                    <input class="form-check-input" type="checkbox" data-key="toggles.allowAnon" data-trim="false">
-                                </div>
-                            </div>
-                        </div>
-                        <div class="mb-3">
-                            <h6>[[poll:limits]]</h6>
-                            <div>
-                                <label class="form-label" for="maxPollOptions">[[poll:max_options]]</label>
-                                <input type="number" class="form-control" id="maxPollOptions" placeholder="10" min="1" max="100" data-key="limits.maxOptions">
-                            </div>
-                        </div>
-                    </div>
-                </div>
-
-                <div class="card">
-                    <div class="card-header">[[poll:defaults]]</div>
-                    <div class="card-body">
-                        <div class="mb-3">
-                            <label class="form-label" for="defaultsTitle">[[poll:default_title]]</label>
-                            <input type="text" class="form-control" id="defaultsTitle" placeholder="Poll" data-key="defaults.title">
-                        </div>
-                        <div>
-                            <label class="form-label" for="defaultsMaxVotes">[[poll:max_votes]]</label>
-                            <input type="number" class="form-control" id="defaultsMaxVotes" placeholder="1" min="1" max="100" data-key="defaults.maxvotes">
-                            <p class="form-text">[[poll:info_choices]]</p>
-                        </div>
-                    </div>
-                </div>
-            </form>
+		<div class="col-12 col-lg-9">
+			<div class="table-responsive">
+				<table id="poll-table" class="table">
+					<thead>
+						<tr class="text-sm">
+							<th>ID</th>
+							<th class="text-nowrap">[[poll:poll_title]]</th>
+							<th class="text-nowrap">[[poll:created-time]]</th>
+							<th class="text-nowrap">[[poll:end-time]]</th>
+							<th class="text-end text-nowrap text-capitalize">[[poll:votes]]</th>
+						</tr>
+					</thead>
+					<tbody class="text-xs text-tabular">
+					{{{ each polls }}}
+					<tr class="align-middle">
+						<td>{./pollId}</td>
+						<td><a href="{config.relative_path}/post/{./pid}">{./title}</a></td>
+						<td class="text-nowrap"><span class="timeago" title="{./timestampISO}"></span></td>
+						<td class="text-nowrap">
+							{{{ if ./end }}}
+							<span class="timeago" title="{./endISO}"></span>
+							{{{ else }}}
+							-
+							{{{ end }}}
+						</td>
+						<td class="text-end">
+							{./voteCount}
+						</td>
+					</tr>
+					{{{ end }}}
+					</tbody>
+				</table>
+			</div>
+			<!-- IMPORT admin/partials/paginator.tpl -->
 		</div>
+		<div id="spy-container" class="col-12 col-lg-3" tabindex="0">
+			<form class="form poll-settings">
+				<div class="form-check mb-3">
+					<label class="form-check-label" for="allowGuestsToViewResults">[[poll:allow_guests]]</label>
+					<input class="form-check-input" type="checkbox" id="allowGuestsToViewResults" name="allowGuestsToViewResults">
+				</div>
+
+				<div class="mb-3">
+					<label class="form-label" for="maxOptions">[[poll:max_options]]</label>
+					<input type="number" class="form-control" id="maxOptions" placeholder="10" min="1" max="100" name="maxOptions">
+				</div>
 
-		<!-- IMPORT admin/partials/settings/toc.tpl -->
+				<div class="mb-3">
+					<label class="form-label" for="defaultTitle">[[poll:default_title]]</label>
+					<input type="text" class="form-control" id="defaultTitle" placeholder="Poll" name="defaultTitle">
+				</div>
+				<div>
+					<label class="form-label" for="maximumVotesPerUser">[[poll:max_votes]]</label>
+					<input type="number" class="form-control" id="maximumVotesPerUser" placeholder="1" min="1" max="100" name="maximumVotesPerUser">
+					<p class="form-text">[[poll:info_choices]]</p>
+				</div>
+			</form>
+		</div>
 	</div>
 </div>
 

package/templates/poll/creator.tpl

@@ -1,52 +1,48 @@
-<form class="form" id="pollCreator">
+<form class="form" id="pollCreator" onsubmit="return false;">
     <div id="pollErrorBox" class="alert alert-danger hidden"></div>
 
+    <input type="hidden" name="pollId" value="{poll.pollId}">
+
     <div class="mb-3">
         <label class="form-label" for="pollInputTitle">[[poll:poll_title]]</label>
-        <input type="text" name="settings.title" id="pollInputTitle" value="{poll.settings.title}" placeholder="[[poll:poll_title_placeholder]]" class="form-control">
+        <input type="text" name="title" id="pollInputTitle" value="{poll.title}" placeholder="[[poll:poll_title_placeholder]]" class="form-control">
     </div>
 
-    <div class="mb-3">
+    <div class="mb-3 d-flex flex-column gap-1">
         <label class="form-label" for="pollInputOptions">[[poll:options_title]]</label>
-        <!-- IF poll.options.length -->
-        <!-- BEGIN poll.options -->
-        <input type="text" name="options" id="pollInputOptions" value="{@value}" class="form-control mb-2"/>
-        <!-- END poll.options -->
-        <!-- ELSE -->
-        <input type="text" name="options" id="pollInputOptions" class="form-control mb-2"/>
-        <!-- ENDIF poll.options.length -->
-        <button type="button" id="pollAddOption" class="btn btn-primary btn-sm btn-block">[[poll:options_add]]</button>
+        <div id="poll-options-container" class="d-flex flex-column gap-1">
+        {{{ if poll.options.length }}}
+        {{{ each poll.options }}}
+        <!-- IMPORT poll/option-input.tpl -->
+        {{{ end }}}
+        {{{ end }}}
+        </div>
+        <button type="button" id="pollAddOption" class="btn btn-primary btn-sm btn-block mt-2">[[poll:options_add]]</button>
     </div>
 
     <hr>
 
     <div class="mb-3">
         <label class="form-label" for="pollInputAmount">[[poll:max_votes]]</label>
-        <input type="number" name="settings.maxvotes" id="pollInputAmount" value="{poll.settings.maxvotes}"
-               min="1" max="10" step="1" placeholder="[[poll:max_votes_placeholder]]" class="form-control">
+        <input type="number" name="maximumVotesPerUser" id="pollInputAmount" value="{poll.maximumVotesPerUser}" min="1" max="10" step="1" placeholder="[[poll:max_votes_placeholder]]" class="form-control">
+        <p class="form-text">[[poll:info_choices]]</p>
     </div>
 
     <div class="form-check mb-3">
         <label class="form-check-label" for="pollDisallowVoteUpdate">[[poll:disallow_vote_update]]</label>
-        <input class="form-check-input" type="checkbox" name="settings.disallowVoteUpdate" id="pollDisallowVoteUpdate" {{{if poll.settings.disallowVoteUpdate}}}checked{{{end}}}>
+        <input class="form-check-input" type="checkbox" name="disallowVoteUpdate" id="pollDisallowVoteUpdate" {{{if poll.disallowVoteUpdate}}}checked{{{end}}}>
     </div>
 
     <div class="form-check mb-3">
         <label class="form-check-label" for="allowAnonVoting">[[poll:allow_anon_voting]]</label>
-        <input class="form-check-input" type="checkbox" name="settings.allowAnonVoting" id="allowAnonVoting" {{{if poll.settings.allowAnonVoting}}}checked{{{end}}}>
+        <input class="form-check-input" type="checkbox" name="allowAnonVoting" id="allowAnonVoting" {{{if poll.allowAnonVoting}}}checked{{{end}}}>
     </div>
 
     <div class="mb-3">
         <label class="form-label" for="pollInputEnd">[[poll:auto_end_title]]</label>
         <div class="input-group date">
-            <input id="pollInputEnd" placeholder="[[poll:auto_end_placeholder]]" name="settings.end" class="form-control" value="{poll.settings.end}" type="datetime-local">
+            <input id="pollInputEnd" placeholder="[[poll:auto_end_placeholder]]" name="end" class="form-control" value="{poll.end}" type="datetime-local">
         </div>
         <p class="form-text">[[poll:auto_end_help]]</p>
     </div>
-
-    {{{ if isRedactor }}}
-    <div class="alert alert-warning" role="alert">
-        [[poll:warning.redactor]]
-    </div>
-    {{{ end }}}
 </form>

package/templates/poll/manage.tpl

@@ -0,0 +1,18 @@
+<div class="topic-poll-modal">
+	{{{ if !post.polls.length }}}
+	<div class="alert alert-info">[[poll:no-polls]]</div>
+	{{{ end }}}
+	{{{ each post.polls }}}
+	<div component="post/poll/item" data-poll-id="{./pollId}" class="bg-body d-flex align-items-center justify-content-between mb-3 p-1 border rounded-1">
+		<div class="d-flex align-items-center gap-1">
+			<a href="#" component="sort/handle" class="btn btn-ghost btn-sm align-self-start" style="cursor:grab;"><i class="fa fa-arrows-up-down text-muted"></i></a>
+			<div class="text-nowrap flex-grow-1">{./title}</div>
+		</div>
+
+		<div class="d-flex align-items-center gap-1">
+			<button class="btn btn-ghost btn-sm text-nowrap" data-action="edit" data-poll-id="{./pollId}"><i class="fa fa-pencil text-primary"></i></button>
+			<button class="btn btn-ghost btn-sm text-nowrap" data-action="remove" data-poll-id="{./pollId}"><i class="fa fa-times text-danger"></i></button>
+		</div>
+	</div>
+	{{{ end }}}
+</div>

package/templates/poll/option-input.tpl

@@ -0,0 +1,6 @@
+<div component="post/poll/option/item" data-option-id="{./id}" class="bg-body d-flex align-items-center justify-content-between gap-2 p-1 rounded-1">
+	<a href="#" component="sort/handle" class="btn btn-ghost btn-sm" style="cursor:grab;"><i class="fa fa-arrows-up-down text-muted"></i></a>
+	<input type="text" name="options" id="pollInputOptions" value="{./title}" class="form-control"/>
+	<input type="hidden" name="id" value="{./id}"/>
+	<button class="btn btn-ghost btn-sm" data-action="remove-option" data-option-id="{./id}"><i class="fa fa-trash text-danger"></i></button>
+</div>

package/templates/poll/view/details.tpl

@@ -1,6 +1,7 @@
-<h4>{voteCount} [[poll:vote_count]]</h4>
-<!-- BEGIN votes -->
-<a href="{config.relative_path}/user/{votes.userslug}" class="poll-result-details">
-    {buildAvatar(votes, "24px", true)}
-</a>
-<!-- END votes -->
+<div class="d-flex flex-wrap gap-2">
+    {{{ each votes }}}
+    <a href="{config.relative_path}/user/{votes.userslug}" class="poll-result-details">
+        {buildAvatar(votes, "24px", true)}
+    </a>
+    {{{ end }}}
+</div>

package/templates/poll/view.tpl

@@ -1,18 +1,23 @@
 <div class="poll-view mb-3" data-poll-id="{poll.info.pollId}">
-    <div class="card">
-        <div class="card-header d-flex justify-content-between align-items-center">
-            <h5 class="card-title mb-0">{poll.settings.title}</h5>
-
-            <a href="#" class="btn btn-sm btn-light border poll-button-edit hidden">
-                <span class="fa fa-pencil"></span>
-            </a>
+    <div class="card shadow-sm border-0">
+        <div class="card-header border-0 d-flex justify-content-between align-items-center">
+            <h5 class="card-title mb-0">
+                {{{ if poll.isWidget }}}
+                <a class="text-reset" href="{config.relative_path}/post/{poll.info.pid}">{poll.info.title}</a>
+                {{{ else }}}
+                {poll.info.title}
+                {{{ end }}}
+            </h5>
+            {{{ if isAdmin }}}
+            <span class="text-sm text-secondary">[[poll:poll-id-x, {poll.info.pollId}]]</span>
+            {{{ end }}}
         </div>
         <div class="card-body">
             <div class="poll-view-messages hidden"></div>
-            <div class="poll-view-voting <!-- IF poll.hasVoted -->hidden<!-- ENDIF poll.hasVoted -->">
+            <div class="poll-view-voting {{{ if poll.hasVoted }}}hidden{{{ end }}}">
                 <!-- IMPORT poll/view/voting.tpl -->
             </div>
-            <div class="poll-view-results d-flex flex-column gap-3 mb-3 <!-- IF !poll.hasVoted -->hidden<!-- ENDIF !poll.hasVoted -->">
+            <div class="poll-view-results d-flex flex-column gap-3 mb-3 {{{ if !poll.hasVoted }}}hidden{{{ end }}}">
                 <!-- IMPORT poll/view/results.tpl -->
                 <div class="text-end text-sm text-secondary poll-result-total-votecount">[[poll:total-votes-x, {poll.info.voteCount}]]</div>
             </div>