mirrors/phanpy
1
0
Fork 0
mirror of https://github.com/cheeaun/phanpy.git synced 2024-11-22 09:15:33 +03: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 ? (
<div class="poll-options">
{options.map((option, i) => {
const { title, votesCount: optionVotesCount } = option;
const percentage = pollVotesCount
? ((optionVotesCount / pollVotesCount) * 100).toFixed(
roundPrecision,
)
: 0; // check if current poll choice is the leading one
<>
<div class="poll-options">
{options.map((option, i) => {
const { title, votesCount: optionVotesCount } = option;
const percentage = pollVotesCount
? ((optionVotesCount / pollVotesCount) * 100).toFixed(
roundPrecision,
)
: 0; // check if current poll choice is the leading one
const isLeading =
optionVotesCount > 0 &&
optionVotesCount ===
Math.max(...options.map((o) => o.votesCount));
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>
const isLeading =
optionVotesCount > 0 &&
optionVotesCount ===
Math.max(...options.map((o) => o.votesCount));
return (
<div
class="poll-option-votes"
title={`${optionVotesCount} vote${
optionVotesCount === 1 ? '' : 's'
key={`${i}-${title}-${optionVotesCount}`}
class={`poll-option poll-result ${
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>
{!expired && !voted && (
<button
class="poll-vote-button plain2"
disabled={uiState === 'loading'}
onClick={() => {
setShowResults(false);
}}
>
<Icon icon="arrow-left" /> Hide results
</button>
)}
</>
) : (
<form
onSubmit={async (e) => {

4
src/components/status.css
View file

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