zio
/
elk
2
0
Fork 0
Code Packages Releases 2 Activity

feat(poll): changed ui of poll results (#328)

zio/stable
Alvaro Saburido 2022-12-04 19:04:40 +01:00 committed by GitHub
parent 2672af671c
commit 4d23fb1467
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 9 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
components/status/StatusPoll.vue
View File

@ -42,15 +42,16 @@ async function vote(e: Event) {
</button>
</form>
<template v-else>
<div v-for="(option, index) of poll.options" :key="index" flex justify-between p-1 relative :style="{ '--bar-width': toPercentage((option.votesCount || 0) / poll.votesCount) }">
<div absolute top-0 left-0 bottom-0 bg-primary-active rounded-l-sm rounded-r-lg h-full class="w-[var(--bar-width)]" />
<div z-1 flex items-center gap-1 px-1 text-inverted>
{{ option.title }}
<div v-if="poll.voted && poll.ownVotes?.includes(index)" i-ri:checkbox-circle-line />
<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>
<span inline-flex align-items>
{{ option.title }}
<span v-if="poll.voted && poll.ownVotes?.includes(index)" ml-2 mt-1 inline-block i-ri:checkbox-circle-line />
</span>
<span text-primary-active> {{ poll.votesCount ? toPercentage((option.votesCount || 0) / (poll.votesCount)) : '0%' }}</span>
</div>
<div z-1>
{{ poll.votesCount ? toPercentage((option.votesCount || 0) / (poll.votesCount)) : '0%' }}
<div class="bg-gray/40" rounded-l-sm rounded-r-lg h-5px w-full>
<div bg-primary-active h-full class="w-[var(--bar-width)]" />
</div>
</div>
</template>