teutat3s/elk
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

fix: improve vote ui

Browse source
This commit is contained in:
Anthony Fu 2023-01-15 12:31:16 +01:00
parent 83a1980273
commit 18ad1c2333
1 changed files with 10 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
components/status/StatusPoll.vue
View file

@ -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"