From 59646de73dee5a453114e99169a849843f79e81d Mon Sep 17 00:00:00 2001
From: syeopite <syeopite@syeopite.dev>
Date: Mon, 5 Feb 2024 22:40:50 -0800
Subject: [PATCH] Add styling to polls

---
 assets/css/post-layout.css      | 57 ++++++++++++++++++++++++++++++++-
 assets/js/post.js               | 21 +++++++-----
 src/helpers/ext_npf_renderer.py |  6 ++--
 3 files changed, 72 insertions(+), 12 deletions(-)

diff --git a/assets/css/post-layout.css b/assets/css/post-layout.css
index 8303aec..6022d65 100644
--- a/assets/css/post-layout.css
+++ b/assets/css/post-layout.css
@@ -89,4 +89,59 @@ a.inline-link, a.inline-mention {
 a.toggle-poll-results {
   color: unset;
   text-decoration: underline;
-}
\ No newline at end of file
+}
+
+.poll-block {
+  gap: 15px;
+  border: unset;
+
+  padding: 0 10px;
+  margin: 10px 0;
+}
+
+.poll-block > header > h3 {
+  font-weight: normal;
+  margin: 0;
+  font-size: 24px;
+}
+
+.poll-choice {
+  border: 0;
+  border-radius: 10px;
+  background: #edeeee;
+  padding: 8px 18px;
+  overflow: hidden;
+}
+
+.poll-choice > .answer {
+  font-weight: 550;
+}
+
+.vote-proportion {
+  background: #dcdcdc;
+  border-radius: 10px 0px 0px 10px;
+}
+
+.poll-winner >.vote-proportion {
+  background: #BABABA;
+}
+
+.poll-block footer {
+  font-size: 15px;
+  margin-top: 0;
+  color: #6b7280;
+}
+
+.toggle-poll-results {
+  display: block;
+  margin-top: 10px;
+  margin-bottom: 20px;
+}
+
+.toggle-poll-results:hover {
+  font-weight: 700;
+}
+
+.separator {
+  font-size: 12px;
+}
diff --git a/assets/js/post.js b/assets/js/post.js
index c6d19d8..a8f4649 100644
--- a/assets/js/post.js
+++ b/assets/js/post.js
@@ -74,16 +74,21 @@ function fill_poll_results(poll_element, results) {
         choiceElement.appendChild(voteCountElement);
     }
 
-    const totalVotesElement = document.createElement("p")
+    const pollMetadataElement = poll_element.getElementsByClassName("poll-metadata")[0]
 
-    if (poll_element.classList.contains("expired")) {
-        totalVotesElement.innerHTML = `Final result from ${total_votes} votes`
-    } else {
-        totalVotesElement.innerHTML = `${total_votes} votes`
-    }
+    const totalVotesElement = document.createElement("span")
+    totalVotesElement.innerHTML = `${total_votes} votes`
+
+    const separatorElement = document.createElement("span")
+    separatorElement.innerHTML = '•'
+    separatorElement.classList.add("separator")
+
+    const pollTimestamp = pollMetadataElement.children[0]
+
+    const newMetadataContents = document.createDocumentFragment()
+    newMetadataContents.append(totalVotesElement, separatorElement, pollTimestamp.cloneNode(true))
 
-    const pollFooter = poll_element.getElementsByTagName("footer")
-    pollFooter[0].insertBefore(totalVotesElement, pollFooter[0].firstChild)
+    pollTimestamp.replaceWith(newMetadataContents)
 
     poll_element.classList.add("populated")
 }
diff --git a/src/helpers/ext_npf_renderer.py b/src/helpers/ext_npf_renderer.py
index 8e4ff4e..34d0f29 100644
--- a/src/helpers/ext_npf_renderer.py
+++ b/src/helpers/ext_npf_renderer.py
@@ -120,15 +120,15 @@ def _format_poll(self, block):
 
         if (self.blog_name and self.post_id) and not block.votes:
             poll_footer = poll_html[2]
-            poll_footer.add(
-                dominate.tags.noscript(
+            no_script_fallback = dominate.tags.noscript(
                     dominate.tags.a(
                         "See Results",
                         href=f"/{self.blog_name}/{self.post_id}?fetch_polls=true",
                         cls="toggle-poll-results"
                     )
                 )
-            )
+
+            poll_footer.children.insert(0, no_script_fallback)
 
         return poll_html