Page MenuHomePhorge
Files F12552887

poll.vue
No OneTemporary
Actions

Size
4 KB
Referenced Files
None
Subscribers
None

poll.vue
View Options

<template>
<div
class="poll"
:class="containerClass"
>
<div
:role="showResults ? 'section' : (poll.multiple ? 'group' : 'radiogroup')"
>
<div
v-for="(option, index) in options"
:key="index"
class="poll-option"
>
<div
v-if="showResults"
:title="resultTitle(option)"
class="option-result"
>
<div class="option-result-label">
<span class="result-percentage">
{{ percentageForOption(option.votes_count) }}%
</span>
<RichContent
:html="option.title_html"
:handle-links="false"
:emoji="emoji"
/>
</div>
<div
class="result-fill"
:style="{ 'width': `${percentageForOption(option.votes_count)}%` }"
/>
</div>
<template
v-else
>
<input
v-if="poll.multiple"
:id="`option-vote-input-${randomSeed}-${index}`"
type="checkbox"
tabindex="0"
class="visible-for-screenreader-only"
:disabled="loading"
:value="index"
:checked="choices[index]"
@change="activateOption(index)"
>
<input
v-else
:id="`option-vote-input-${randomSeed}-${index}`"
type="radio"
class="visible-for-screenreader-only"
:disabled="loading"
:value="index"
:checked="choices[index]"
@change="activateOption(index)"
>
<label
class="option-vote"
:for="`option-vote-input-${randomSeed}-${index}`"
>
<RichContent
:html="option.title_html"
:handle-links="false"
:emoji="emoji"
/>
</label>
</template>
</div>
</div>
<div class="footer faint">
<button
v-if="!showResults"
class="btn button-default poll-vote-button"
type="button"
:disabled="isDisabled"
@click="vote"
>
{{ $t('polls.vote') }}
</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>
</div>
<span>
<i18n-t
scope="global"
:keypath="expired ? 'polls.expired' : 'polls.expires_in'"
>
<Timeago
:time="expiresAt"
:auto-update="60"
:now-threshold="0"
/>
</i18n-t>
</span>
</div>
</div>
</template>
<script src="./poll.js"></script>
<style lang="scss">
@import "../../variables";
.poll {
.votes {
display: flex;
flex-direction: column;
margin: 0 0 0.5em;
}
.poll-option {
margin: 0.75em 0.5em;
}
.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;
word-break: break-word;
}
.result-percentage {
width: 3.5em;
flex-shrink: 0;
}
.result-fill {
height: 100%;
position: absolute;
color: $fallback--text;
color: var(--pollText, $fallback--text);
background-color: $fallback--lightBg;
background-color: var(--poll, $fallback--lightBg);
border-radius: $fallback--panelRadius;
border-radius: var(--panelRadius, $fallback--panelRadius);
top: 0;
left: 0;
transition: width 0.5s;
}
.option-vote {
display: flex;
align-items: center;
}
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>

File Metadata

Mime Type
text/html
Expires
Sat, Nov 15, 1:13 AM (11 h, 46 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
633011
Default Alt Text
poll.vue (4 KB)

Event Timeline