starting the design of polls

This commit is contained in:
Nicolas Constant 2019-06-04 02:31:51 -04:00
parent 43ecbde31a
commit 93fe06979c
No known key found for this signature in database
GPG Key ID: 1E9F677FB01A5688
4 changed files with 41 additions and 4 deletions

View File

@ -1,8 +1,8 @@
<div class="poll">
<div *ngFor="let o of poll.options">
<input id="{{o.title}}" type="{{choiceType}}" name="poll" value="{{o.title}}">
<label for="{{o.title}}">{{o.title}}</label>
<input class="poll__input" id="{{o.title}}" type="{{choiceType}}" name="poll" value="{{o.title}}">
<label class="noselect poll__label" for="{{o.title}}">{{o.title}}</label>
<br/>
</div>
<a href >Vote</a> <span>{{poll.votes_count}} votes - X days left</span>
<button href class="btn btn-sm btn-custom-primary poll__btn-vote" title="don't boo, vote!">Vote</button> <div class="poll__statistics">{{poll.votes_count}} votes - X days left</div>
</div>

View File

@ -0,0 +1,32 @@
// @import "variables";
// @import "commons";
// @import "panel";
@import "buttons";
.poll {
&__btn-vote {
margin: 0 10px 0 0;
padding: 4px 15px;
}
&__statistics {
display: inline-block;
font-size: 0.8em;
color: rgb(101, 121, 160);
}
&__label {
cursor: pointer;
}
}
.noselect {
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently
supported by Chrome and Opera */
}

View File

@ -67,7 +67,7 @@
(accountSelected)="accountSelected($event)" (hashtagSelected)="hashtagSelected($event)"
(textSelected)="textSelected()"></app-databinded-text>
<app-poll *ngIf="!isContentWarned && displayedStatus.poll" [poll]="displayedStatus.poll"></app-poll>
<app-poll class="status__poll" *ngIf="!isContentWarned && displayedStatus.poll" [poll]="displayedStatus.poll"></app-poll>
<app-card class="status__card" *ngIf="!isContentWarned && displayedStatus.card && !hasAttachments" [card]="displayedStatus.card"></app-card>

View File

@ -116,6 +116,11 @@
margin: 10px 10px 0 $avatar-column-space;
display: block;
}
&__poll {
word-wrap: break-word;
margin: 10px 10px 0 $avatar-column-space;
display: block;
}
&__content-warning {
min-height: 80px;
display: block; // border: 1px solid greenyellow;