fix: improve vote ui
parent
83a1980273
commit
18ad1c2333
|
@ -38,18 +38,22 @@ const votersCount = $computed(() => poll.votersCount ?? 0)
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div flex flex-col w-full items-stretch gap-3 dir="auto">
|
<div flex flex-col w-full items-stretch gap-2 py3 dir="auto">
|
||||||
<form v-if="!poll.voted && !poll.expired" flex flex-col gap-4 accent-primary @click.stop="noop" @submit.prevent="vote">
|
<form v-if="!poll.voted && !poll.expired" flex="~ col gap3" accent-primary @click.stop="noop" @submit.prevent="vote">
|
||||||
<label v-for="(option, index) of poll.options" :key="index" flex items-center gap-2 px-2>
|
<label v-for="(option, index) of poll.options" :key="index" flex="~ gap2" items-center>
|
||||||
<input name="choices" :value="index" :type="poll.multiple ? 'checkbox' : 'radio'">
|
<input name="choices" :value="index" :type="poll.multiple ? 'checkbox' : 'radio'">
|
||||||
{{ option.title }}
|
{{ option.title }}
|
||||||
</label>
|
</label>
|
||||||
<button btn-solid>
|
<button btn-solid mt-1>
|
||||||
{{ $t('action.vote') }}
|
{{ $t('action.vote') }}
|
||||||
</button>
|
</button>
|
||||||
</form>
|
</form>
|
||||||
<template v-else>
|
<template v-else>
|
||||||
<div v-for="(option, index) of poll.options" :key="index" py-1 relative :style="{ '--bar-width': toPercentage((option.votesCount || 0) / poll.votesCount) }">
|
<div
|
||||||
|
v-for="(option, index) of poll.options"
|
||||||
|
:key="index" py-1 relative
|
||||||
|
:style="{ '--bar-width': toPercentage((option.votesCount || 0) / poll.votesCount) }"
|
||||||
|
>
|
||||||
<div flex justify-between pb-2 w-full>
|
<div flex justify-between pb-2 w-full>
|
||||||
<span inline-flex align-items>
|
<span inline-flex align-items>
|
||||||
{{ option.title }}
|
{{ option.title }}
|
||||||
|
@ -62,7 +66,7 @@ const votersCount = $computed(() => poll.votersCount ?? 0)
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<div text-sm flex="~ inline" gap-x-1>
|
<div text-sm flex="~ inline" gap-x-1 text-secondary>
|
||||||
<CommonLocalizedNumber
|
<CommonLocalizedNumber
|
||||||
keypath="status.poll.count"
|
keypath="status.poll.count"
|
||||||
:count="poll.votesCount"
|
:count="poll.votesCount"
|
||||||
|
|
Loading…
Reference in New Issue