Mirrors/phanpy
1
0
Fork 0
mirror of https://github.com/cheeaun/phanpy.git synced 2025-02-24 16:58:47 +01:00
Code Issues Projects Releases Packages Wiki Activity

Add a button here to prevent poll height from jumping

Browse source 
Still quite a hidden feature 🤫
This commit is contained in:
Lim Chee Aun 2023-05-02 20:18:45 +08:00
parent 56022f31f0
commit 1ddcb51af5
2 changed files with 59 additions and 44 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

99
src/components/poll.jsx
View file

@ -87,54 +87,67 @@ export default function Poll({
}} }}
> >
{(showResults && optionsHaveVoteCounts) || voted || expired ? ( {(showResults && optionsHaveVoteCounts) || voted || expired ? (
<div class="poll-options"> <>
{options.map((option, i) => { <div class="poll-options">
const { title, votesCount: optionVotesCount } = option; {options.map((option, i) => {
const percentage = pollVotesCount const { title, votesCount: optionVotesCount } = option;
? ((optionVotesCount / pollVotesCount) * 100).toFixed( const percentage = pollVotesCount
roundPrecision, ? ((optionVotesCount / pollVotesCount) * 100).toFixed(
) roundPrecision,
: 0; // check if current poll choice is the leading one )
: 0; // check if current poll choice is the leading one
const isLeading = const isLeading =
optionVotesCount > 0 && optionVotesCount > 0 &&
optionVotesCount === optionVotesCount ===
Math.max(...options.map((o) => o.votesCount)); Math.max(...options.map((o) => o.votesCount));
return ( return (
<div
key={`${i}-${title}-${optionVotesCount}`}
class={`poll-option poll-result ${
isLeading ? 'poll-option-leading' : ''
}`}
style={{
'--percentage': `${percentage}%`,
}}
>
<div class="poll-option-title">
<span
dangerouslySetInnerHTML={{
__html: emojifyText(title, emojis),
}}
/>
{voted && ownVotes.includes(i) && (
<>
{' '}
<Icon icon="check-circle" />
</>
)}
</div>
<div <div
class="poll-option-votes" key={`${i}-${title}-${optionVotesCount}`}
title={`${optionVotesCount} vote${ class={`poll-option poll-result ${
optionVotesCount === 1 ? '' : 's' isLeading ? 'poll-option-leading' : ''
}`} }`}
style={{
'--percentage': `${percentage}%`,
}}
> >
{percentage}% <div class="poll-option-title">
<span
dangerouslySetInnerHTML={{
__html: emojifyText(title, emojis),
}}
/>
{voted && ownVotes.includes(i) && (
<>
{' '}
<Icon icon="check-circle" />
</>
)}
</div>
<div
class="poll-option-votes"
title={`${optionVotesCount} vote${
optionVotesCount === 1 ? '' : 's'
}`}
>
{percentage}%
</div>
</div> </div>
</div> );
); })}
})} </div>
</div> {!expired && !voted && (
<button
class="poll-vote-button plain2"
disabled={uiState === 'loading'}
onClick={() => {
setShowResults(false);
}}
>
<Icon icon="arrow-left" /> Hide results
</button>
)}
</>
) : ( ) : (
<form <form
onSubmit={async (e) => { onSubmit={async (e) => {

4
src/components/status.css
View file

@ -1035,11 +1035,13 @@ a.card:is(:hover, :focus) {
} }
.poll-vote-button { .poll-vote-button {
margin: 8px 8px 0 12px; margin: 8px 8px 0 12px;
padding-inline: 24px; /* padding-inline: 24px; */
min-width: 160px;
} }
.poll-meta { .poll-meta {
margin: 8px 16px; margin: 8px 16px;
font-size: 90%; font-size: 90%;
user-select: none;
} }
.poll-option-title { .poll-option-title {
text-shadow: 0 1px var(--bg-color); text-shadow: 0 1px var(--bg-color);