62 lines
1.2 KiB
HTML
62 lines
1.2 KiB
HTML
<div class="poll" >
|
|
<ul class="options" aria-label="Poll results">
|
|
{#each options as option}
|
|
<li class="option">
|
|
<div class="option-text">{option.title} ({option.share}%)</div>
|
|
<svg aria-hidden="true">
|
|
<line x1="0" y1="0" x2="{option.share}%" y2="0" />
|
|
</svg>
|
|
</li>
|
|
{/each}
|
|
</ul>
|
|
</div>
|
|
<style>
|
|
.poll {
|
|
grid-area: poll;
|
|
margin: 10px 10px 10px 5px;
|
|
}
|
|
|
|
ul.options {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
li.option {
|
|
margin: 0 0 10px 0;
|
|
padding: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
stroke: var(--svg-fill);
|
|
stroke-width: 5px;
|
|
}
|
|
|
|
li.option:last-child {
|
|
margin: 0;
|
|
}
|
|
|
|
.option-text {
|
|
word-wrap: break-word;
|
|
white-space: pre-wrap;
|
|
font-size: 1.1em;
|
|
}
|
|
|
|
svg {
|
|
height: 2px;
|
|
width: 100%;
|
|
margin-top: 5px;
|
|
}
|
|
|
|
</style>
|
|
<script>
|
|
export default {
|
|
computed: {
|
|
poll: ({ originalStatus }) => originalStatus.poll,
|
|
options: ({ poll }) => poll.options.map(({ title, votes_count: votesCount }) => ({
|
|
title,
|
|
share: poll.votes_count ? Math.round(votesCount / poll.votes_count * 100) : 0
|
|
}))
|
|
}
|
|
}
|
|
</script>
|