From aee9ed796e9c3e79e74282867eaf32e1bb855d50 Mon Sep 17 00:00:00 2001
From: Wolvan <wolvan1@gmail.com>
Date: Sat, 8 Jan 2022 16:15:46 +0100
Subject: [PATCH] Fix results page design

Fix the length of the bar when it is at 100% as well as an issue where
division by NaN happens when no votes have been given yet.
---
 frontend/static/css/result.css | 4 ++--
 src/frontend.ts                | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/frontend/static/css/result.css b/frontend/static/css/result.css
index d807143..99a7f7b 100644
--- a/frontend/static/css/result.css
+++ b/frontend/static/css/result.css
@@ -41,7 +41,7 @@ main .notepad .poll-option .progress .poll-bar {
     vertical-align: top;
     display: inline-block;
     height: 100%;
-    width: calc(100% - 50px);
+    width: calc(100% - 70px);
 }
 main .notepad .poll-option .progress .poll-bar .poll-bar-fill {
     height: calc(100% - 5px);
@@ -50,7 +50,7 @@ main .notepad .poll-option .progress .poll-bar .poll-bar-fill {
     transition: width .3s;
 }
 main .notepad .poll-option .progress .poll-bar-text {
-    width: 50px;
+    width: 70px;
 }
 main .notepad .poll-option .progress .poll-bar-text::after {
     content: "%";
diff --git a/src/frontend.ts b/src/frontend.ts
index 9a2ea3f..832ca29 100644
--- a/src/frontend.ts
+++ b/src/frontend.ts
@@ -111,8 +111,8 @@ export default function init(router: Router): void {
                     </div>
                     <div class="progress">
                         <div class="poll-bar">
-                            <div class="poll-bar-fill" style="width: ${ (votes / totalVotes) * 100 }%"></div>
-                        </div><div class="poll-bar-text">${ Math.round((votes / totalVotes) * 100) }</div>
+                            <div class="poll-bar-fill" style="width: ${ totalVotes > 0 ? (votes / totalVotes) * 100 : 0 }%"></div>
+                        </div><div class="poll-bar-text">${ totalVotes > 0 ? Math.round((votes / totalVotes) * 100) : 0 }</div>
                     </div>
                 </div>
             `).join("");