src/components/poll/poll.vue


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144

<template>
  <div
    class="poll"
    :class="containerClass"
  >
    <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>
          <!-- eslint-disable-next-line vue/no-v-html -->
          <span v-html="option.title_html" />
        </div>
        <div
          class="result-fill"
          :style="{ 'width': `${percentageForOption(option.votes_count)}%` }"
        />
      </div>
      <div
        v-else
        @click="activateOption(index)"
      >
        <input
          v-if="poll.multiple"
          type="checkbox"
          :disabled="loading"
          :value="index"
        >
        <input
          v-else
          type="radio"
          :disabled="loading"
          :value="index"
        >
        <label class="option-vote">
          <!-- eslint-disable-next-line vue/no-v-html -->
          <div v-html="option.title_html" />
        </label>
      </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>
      <i18n-t :keypath="expired ? 'polls.expired' : 'polls.expires_in'">
        <Timeago
          :time="expiresAt"
          :auto-update="60"
          :now-threshold="0"
        />
      </i18n-t>
    </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 {
    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>