fix poll display

This commit is contained in:
Nicolas Constant 2019-06-15 14:58:24 -04:00
parent 6e2bb144fc
commit fdd9d751e7
No known key found for this signature in database
GPG Key ID: 1E9F677FB01A5688
2 changed files with 13 additions and 7 deletions

View File

@ -1,7 +1,8 @@
<div class="poll">
<div *ngIf="!poll.voted && !poll.expired">
<div *ngFor="let o of options">
<label class="poll__container">{{o.title}}
<label class="poll__container">
<span class="poll__container__title">{{o.title}}</span>
<input class="poll__container__input" type="{{choiceType}}" name="{{pollName}}" value="{{o.title}}"
(change)="onSelectionChange(o)">
<span class="poll__container__checkmark" *ngIf="!pollLocked"
@ -15,7 +16,7 @@
<div class="poll__result" title="{{ o.votes_count }} votes">
<div class="poll__result--progress-bar" [style.width]="o.percentage + '%'" [ngClass]="{ 'poll__result--progress-bar--most-votes': o.isMax }"></div>
<div class="poll__result--data"> <span class="poll__result--percentage">{{ o.percentage }}%</span>
{{o.title}}</div>
<span class="poll__container__title">{{o.title}}</span></div>
</div>
</div>

View File

@ -4,7 +4,7 @@
@import "buttons";
.poll {
color: white;
color: rgb(228, 228, 228);
@ -44,6 +44,11 @@
-ms-user-select: none;
user-select: none;
&__title {
text-overflow: ellipsis;
white-space: nowrap;
}
&:hover &__input~&__checkmark {
background-color: #ccc;
}
@ -125,7 +130,7 @@
&__result {
transition: width 2s;
margin: 0 0 5px 5px;
padding: 0 5px 0 5px;
position: relative;
@ -141,15 +146,15 @@
color: white;
display: inline;
margin-right: 10px;
}
&--progress-bar {
position: absolute;
background-color: rgb(47, 68, 100);
// background-color: rgb(43, 62, 92);
top:0;
left:0;
top: 0;
left: 0;
width: calc(100%);
height: 22px;
z-index: 1;