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