Merge branch 'tusooa/fix-poll-reg' into 'develop'

Fix poll interaction

See merge request pleroma/pleroma-fe!1788
This commit is contained in:
HJ 2023-02-19 17:19:15 +00:00
commit eec27700f0
2 changed files with 55 additions and 40 deletions

View File

@ -12,7 +12,8 @@ export default {
data () { data () {
return { return {
loading: false, loading: false,
choices: [] choices: [],
randomSeed: `${Math.random()}`.replace('.', '-')
} }
}, },
created () { created () {

View File

@ -4,53 +4,63 @@
:class="containerClass" :class="containerClass"
> >
<div <div
v-for="(option, index) in options" :role="showResults ? 'section' : (poll.multiple ? 'group' : 'radiogroup')"
:key="index"
class="poll-option"
> >
<div <div
v-if="showResults" v-for="(option, index) in options"
:title="resultTitle(option)" :key="index"
class="option-result" class="poll-option"
> >
<div class="option-result-label"> <div
<span class="result-percentage"> v-if="showResults"
{{ percentageForOption(option.votes_count) }}% :title="resultTitle(option)"
</span> class="option-result"
<RichContent >
:html="option.title_html" <div class="option-result-label">
:handle-links="false" <span class="result-percentage">
:emoji="emoji" {{ percentageForOption(option.votes_count) }}%
</span>
<RichContent
:html="option.title_html"
:handle-links="false"
:emoji="emoji"
/>
</div>
<div
class="result-fill"
:style="{ 'width': `${percentageForOption(option.votes_count)}%` }"
/> />
</div> </div>
<div <div
class="result-fill"
:style="{ 'width': `${percentageForOption(option.votes_count)}%` }"
/>
</div>
<div
v-else
@click="activateOption(index)"
>
<input
v-if="poll.multiple"
type="checkbox"
:disabled="loading"
:value="index"
>
<input
v-else v-else
type="radio" tabindex="0"
:disabled="loading" :role="poll.multiple ? 'checkbox' : 'radio'"
:value="index" :aria-labelledby="`option-vote-${randomSeed}-${index}`"
:aria-checked="choices[index]"
@click="activateOption(index)"
> >
<label class="option-vote"> <input
<RichContent v-if="poll.multiple"
:html="option.title_html" type="checkbox"
:handle-links="false" class="poll-checkbox"
:emoji="emoji" :disabled="loading"
/> :value="index"
</label> >
<input
v-else
type="radio"
:disabled="loading"
:value="index"
>
<label class="option-vote">
<RichContent
:id="`option-vote-${randomSeed}-${index}`"
:html="option.title_html"
:handle-links="false"
:emoji="emoji"
/>
</label>
</div>
</div> </div>
</div> </div>
<div class="footer faint"> <div class="footer faint">
@ -161,5 +171,9 @@
padding: 0 0.5em; padding: 0 0.5em;
margin-right: 0.5em; margin-right: 0.5em;
} }
.poll-checkbox {
display: none;
}
} }
</style> </style>