akkoma-fe/src/components/poll/poll.vue

154 lines
3.4 KiB
Vue
Raw Normal View History

2019-06-18 20:28:31 +00:00
<template>
2019-07-05 07:17:44 +00:00
<div
class="poll"
:class="containerClass"
>
2019-06-18 20:28:31 +00:00
<div
v-for="(option, index) in options"
2019-06-18 20:28:31 +00:00
:key="index"
2019-07-05 07:17:44 +00:00
class="poll-option"
2019-06-18 20:28:31 +00:00
>
2019-07-05 07:17:44 +00:00
<div
v-if="showResults"
:title="resultTitle(option)"
class="option-result"
>
2019-06-18 20:28:31 +00:00
<div class="option-result-label">
<span class="result-percentage">
2019-07-05 07:17:44 +00:00
{{ percentageForOption(option.votes_count) }}%
2019-06-18 20:28:31 +00:00
</span>
<RichContent
:html="option.title_html"
:handle-links="false"
:emoji="emoji"
/>
2019-06-18 20:28:31 +00:00
</div>
<div
class="result-fill"
:style="{ 'width': `${percentageForOption(option.votes_count)}%` }"
2019-07-05 07:17:44 +00:00
/>
2019-06-18 20:28:31 +00:00
</div>
2019-07-05 07:17:44 +00:00
<div
v-else
@click="activateOption(index)"
>
2019-06-18 20:28:31 +00:00
<input
v-if="poll.multiple"
type="checkbox"
:disabled="loading"
:value="index"
>
<input
v-else
type="radio"
:disabled="loading"
:value="index"
>
2019-06-20 13:00:10 +00:00
<label class="option-vote">
<RichContent
:html="option.title_html"
:handle-links="false"
:emoji="emoji"
/>
2019-06-18 20:28:31 +00:00
</label>
</div>
</div>
<div class="footer faint">
<button
v-if="!showResults"
class="btn button-default poll-vote-button"
2019-06-18 20:28:31 +00:00
type="button"
:disabled="isDisabled"
2019-07-05 07:17:44 +00:00
@click="vote"
2019-06-18 20:28:31 +00:00
>
2019-07-05 07:17:44 +00:00
{{ $t('polls.vote') }}
2019-06-18 20:28:31 +00:00
</button>
<div class="total">
<template v-if="typeof poll.voters_count === 'number'">
{{ $tc("polls.people_voted_count", poll.voters_count, { count: poll.voters_count }) }}&nbsp;·&nbsp;
</template>
<template v-else>
{{ $tc("polls.votes_count", poll.votes_count, { count: poll.votes_count }) }}&nbsp;·&nbsp;
</template>
2019-06-18 20:28:31 +00:00
</div>
2022-03-29 12:35:18 +00:00
<i18n-t
scope="global"
:keypath="expired ? 'polls.expired' : 'polls.expires_in'"
>
2019-07-05 07:17:44 +00:00
<Timeago
2019-07-06 21:54:17 +00:00
:time="expiresAt"
2019-07-05 07:17:44 +00:00
:auto-update="60"
:now-threshold="0"
/>
2021-04-25 10:25:42 +00:00
</i18n-t>
2019-06-18 20:28:31 +00:00
</div>
</div>
</template>
<script src="./poll.js"></script>
<style lang="scss">
@import '../../_variables.scss';
.poll {
.votes {
display: flex;
flex-direction: column;
margin: 0 0 0.5em;
}
.poll-option {
2019-06-20 13:00:10 +00:00
margin: 0.75em 0.5em;
2019-06-18 20:28:31 +00:00
}
.option-result {
height: 100%;
display: flex;
flex-direction: row;
position: relative;
color: $fallback--lightText;
color: var(--lightText, $fallback--lightText);
}
.option-result-label {
display: flex;
align-items: center;
padding: 0.1em 0.25em;
z-index: 1;
2020-08-25 09:17:42 +00:00
word-break: break-word;
2019-06-18 20:28:31 +00:00
}
.result-percentage {
width: 3.5em;
2019-06-20 13:00:10 +00:00
flex-shrink: 0;
2019-06-18 20:28:31 +00:00
}
.result-fill {
height: 100%;
position: absolute;
2020-01-12 21:41:11 +00:00
color: $fallback--text;
color: var(--pollText, $fallback--text);
2019-06-18 20:28:31 +00:00
background-color: $fallback--lightBg;
2020-01-12 21:41:11 +00:00
background-color: var(--poll, $fallback--lightBg);
2019-06-18 20:28:31 +00:00
border-radius: $fallback--panelRadius;
border-radius: var(--panelRadius, $fallback--panelRadius);
top: 0;
left: 0;
transition: width 0.5s;
}
2019-06-20 13:00:10 +00:00
.option-vote {
display: flex;
align-items: center;
}
2019-06-18 20:28:31 +00:00
input {
width: 3.5em;
}
.footer {
display: flex;
align-items: center;
}
&.loading * {
cursor: progress;
}
.poll-vote-button {
padding: 0 0.5em;
margin-right: 0.5em;
}
}
</style>