PonyMirrors/poll.horse
1
0
Fork 0
mirror of https://github.com/Wolvan/poll.horse.git synced 2024-11-22 04:58:00 +01:00
Code Issues Projects Releases Packages Wiki Activity

Fix results page design

Browse source 
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.
This commit is contained in:
Wolvan 2022-01-08 16:15:46 +01:00
parent 7887fa360b
commit aee9ed796e
2 changed files with 4 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
frontend/static/css/result.css
View file

@ -41,7 +41,7 @@ main .notepad .poll-option .progress .poll-bar {
vertical-align: top; vertical-align: top;
display: inline-block; display: inline-block;
height: 100%; height: 100%;
width: calc(100% - 50px); width: calc(100% - 70px);
} }
main .notepad .poll-option .progress .poll-bar .poll-bar-fill { main .notepad .poll-option .progress .poll-bar .poll-bar-fill {
height: calc(100% - 5px); height: calc(100% - 5px);
@ -50,7 +50,7 @@ main .notepad .poll-option .progress .poll-bar .poll-bar-fill {
transition: width .3s; transition: width .3s;
} }
main .notepad .poll-option .progress .poll-bar-text { main .notepad .poll-option .progress .poll-bar-text {
width: 50px; width: 70px;
} }
main .notepad .poll-option .progress .poll-bar-text::after { main .notepad .poll-option .progress .poll-bar-text::after {
content: "%"; content: "%";

4
src/frontend.ts
View file

@ -111,8 +111,8 @@ export default function init(router: Router): void {
</div> </div>
<div class="progress"> <div class="progress">
<div class="poll-bar"> <div class="poll-bar">
<div class="poll-bar-fill" style="width: ${ (votes / totalVotes) * 100 }%"></div> <div class="poll-bar-fill" style="width: ${ totalVotes > 0 ? (votes / totalVotes) * 100 : 0 }%"></div>
</div><div class="poll-bar-text">${ Math.round((votes / totalVotes) * 100) }</div> </div><div class="poll-bar-text">${ totalVotes > 0 ? Math.round((votes / totalVotes) * 100) : 0 }</div>
</div> </div>
</div> </div>
`).join(""); `).join("");