this repo has no description
Add a button here to prevent poll height from jumping
Still quite a hidden feature 🤫
+59
-44
+56
-43
src/components/poll.jsx
+56
-43
src/components/poll.jsx
···
87
87
}}
88
88
>
89
89
{(showResults && optionsHaveVoteCounts) || voted || expired ? (
90
-
<div class="poll-options">
91
-
{options.map((option, i) => {
92
-
const { title, votesCount: optionVotesCount } = option;
93
-
const percentage = pollVotesCount
94
-
? ((optionVotesCount / pollVotesCount) * 100).toFixed(
95
-
roundPrecision,
96
-
)
97
-
: 0; // check if current poll choice is the leading one
90
+
<>
91
+
<div class="poll-options">
92
+
{options.map((option, i) => {
93
+
const { title, votesCount: optionVotesCount } = option;
94
+
const percentage = pollVotesCount
95
+
? ((optionVotesCount / pollVotesCount) * 100).toFixed(
96
+
roundPrecision,
97
+
)
98
+
: 0; // check if current poll choice is the leading one
98
99
99
-
const isLeading =
100
-
optionVotesCount > 0 &&
101
-
optionVotesCount ===
102
-
Math.max(...options.map((o) => o.votesCount));
103
-
return (
104
-
<div
105
-
key={`${i}-${title}-${optionVotesCount}`}
106
-
class={`poll-option poll-result ${
107
-
isLeading ? 'poll-option-leading' : ''
108
-
}`}
109
-
style={{
110
-
'--percentage': `${percentage}%`,
111
-
}}
112
-
>
113
-
<div class="poll-option-title">
114
-
<span
115
-
dangerouslySetInnerHTML={{
116
-
__html: emojifyText(title, emojis),
117
-
}}
118
-
/>
119
-
{voted && ownVotes.includes(i) && (
120
-
<>
121
-
{' '}
122
-
<Icon icon="check-circle" />
123
-
</>
124
-
)}
125
-
</div>
100
+
const isLeading =
101
+
optionVotesCount > 0 &&
102
+
optionVotesCount ===
103
+
Math.max(...options.map((o) => o.votesCount));
104
+
return (
126
105
<div
127
-
class="poll-option-votes"
128
-
title={`${optionVotesCount} vote${
129
-
optionVotesCount === 1 ? '' : 's'
106
+
key={`${i}-${title}-${optionVotesCount}`}
107
+
class={`poll-option poll-result ${
108
+
isLeading ? 'poll-option-leading' : ''
130
109
}`}
110
+
style={{
111
+
'--percentage': `${percentage}%`,
112
+
}}
131
113
>
132
-
{percentage}%
114
+
<div class="poll-option-title">
115
+
<span
116
+
dangerouslySetInnerHTML={{
117
+
__html: emojifyText(title, emojis),
118
+
}}
119
+
/>
120
+
{voted && ownVotes.includes(i) && (
121
+
<>
122
+
{' '}
123
+
<Icon icon="check-circle" />
124
+
</>
125
+
)}
126
+
</div>
127
+
<div
128
+
class="poll-option-votes"
129
+
title={`${optionVotesCount} vote${
130
+
optionVotesCount === 1 ? '' : 's'
131
+
}`}
132
+
>
133
+
{percentage}%
134
+
</div>
133
135
</div>
134
-
</div>
135
-
);
136
-
})}
137
-
</div>
136
+
);
137
+
})}
138
+
</div>
139
+
{!expired && !voted && (
140
+
<button
141
+
class="poll-vote-button plain2"
142
+
disabled={uiState === 'loading'}
143
+
onClick={() => {
144
+
setShowResults(false);
145
+
}}
146
+
>
147
+
<Icon icon="arrow-left" /> Hide results
148
+
</button>
149
+
)}
150
+
</>
138
151
) : (
139
152
<form
140
153
onSubmit={async (e) => {
+3
-1
src/components/status.css
+3
-1
src/components/status.css
···
1035
1035
}
1036
1036
.poll-vote-button {
1037
1037
margin: 8px 8px 0 12px;
1038
-
padding-inline: 24px;
1038
+
/* padding-inline: 24px; */
1039
+
min-width: 160px;
1039
1040
}
1040
1041
.poll-meta {
1041
1042
margin: 8px 16px;
1042
1043
font-size: 90%;
1044
+
user-select: none;
1043
1045
}
1044
1046
.poll-option-title {
1045
1047
text-shadow: 0 1px var(--bg-color);