Add style for leading choices

Also make sure the votes percentage doesn't shrink
This commit is contained in:
Lim Chee Aun 2022-12-14 19:00:04 +08:00
parent f2dc15c8ef
commit 121e9176f3
2 changed files with 12 additions and 1 deletions

View file

@ -396,6 +396,13 @@ a.card:hover {
gap: 8px; gap: 8px;
cursor: pointer; cursor: pointer;
} }
.poll-option-votes {
flex-shrink: 0;
font-size: 90%;
}
.poll-option-leading .poll-option-votes {
font-weight: bold;
}
.poll-vote-button { .poll-vote-button {
margin-top: 8px; margin-top: 8px;
} }

View file

@ -290,9 +290,13 @@ function Poll({ poll }) {
const pollVotesCount = votersCount || votesCount; const pollVotesCount = votersCount || votesCount;
const percentage = const percentage =
Math.round((optionVotesCount / pollVotesCount) * 100) || 0; Math.round((optionVotesCount / pollVotesCount) * 100) || 0;
// check if current poll choice is the leading one
const isLeading =
optionVotesCount > 0 &&
optionVotesCount === Math.max(...options.map((o) => o.votesCount));
return ( return (
<div <div
class="poll-option" class={`poll-option ${isLeading ? 'poll-option-leading' : ''}`}
style={{ style={{
'--percentage': `${percentage}%`, '--percentage': `${percentage}%`,
}} }}