More slide style improvements

This commit is contained in:
Emanuel Schütze 2019-04-25 21:40:51 +02:00
parent 1b1499a660
commit a61a655715
5 changed files with 44 additions and 24 deletions

View File

@ -1,16 +1,16 @@
<div *ngIf="data">
<div>
<h1> {{ data.data.title }} </h1>
<div class="slidetitle">
<h1>{{ data.data.title }}</h1>
<h2 translate>Election</h2>
</div>
<mat-divider></mat-divider>
<div *ngIf="data.data && data.data.description" [innerHTML]="data.data.description"></div>
<mat-divider></mat-divider>
<h3 translate>Candidates</h3>
<div *ngIf="data.data.assignment_related_users && data.data.assignment_related_users.length">
<div *ngFor="let candidate of data.data.assignment_related_users">
<ul *ngIf="data.data.assignment_related_users && data.data.assignment_related_users.length">
<li *ngFor="let candidate of data.data.assignment_related_users">
{{ candidate.user }}
<mat-icon>{{ candidate.elected ? 'star' : 'star_border' }}</mat-icon>
</div>
</div>
<mat-icon *ngIf="candidate.elected">star</mat-icon>
</li>
</ul>
</div>

View File

@ -1,26 +1,30 @@
<div *ngIf="data">
<div class="slidetitle">
<h1>{{ data.data.title }}</h1>
<h2 translate>Election result</h2>
</div>
<div class="spacer-top-10"></div>
<div *ngIf="!data.data.poll.published"><span translate>Waiting for results</span><span>...</span></div>
<div *ngIf="data.data.poll.published">
<div *ngIf="data.data.poll.has_votes">
<div *ngIf="data.data.poll.has_votes" class="result-table">
<div class="row">
<div class="option-name">
<div class="option-name heading">
<h3 translate>Candidates</h3>
</div>
<div class="option-percents">
<div class="option-percents heading">
<h3 translate>Votes</h3>
</div>
</div>
<div *ngFor="let option of data.data.poll.options">
<div class="row">
<div class="option-name">
<span class="bold">{{ option.user }}</span>
<mat-icon *ngIf="option.is_elected">star</mat-icon>
<span [ngClass]="option.is_elected ? 'bold': ''">{{ option.user }}</span>
</div>
<div class="option-percents">
<div *ngFor="let vote of option.votes">
<span *ngIf="vote.value !== 'Votes'"> {{ vote.value | translate }}: </span>
<div *ngFor="let vote of option.votes" class="bold">
<span *ngIf="vote.value !== 'Votes'">{{ vote.value | translate }}:</span>
<span>
{{ labelValue(vote.weight) | translate }}
</span>

View File

@ -1,20 +1,31 @@
.row {
border-top: 1px solid #ddd;
display: table;
width: 100%;
.heading {
text-transform: uppercase;
h3 {
font-weight: normal;
}
}
.option-name {
display: table-cell;
padding: 5px;
border: 1px solid grey;
vertical-align: middle;
width: 70%;
.bold {
font-weight: bold;
}
}
.option-percents {
display: table-cell;
padding: 5px;
border: 1px solid grey;
width: 30%;
}
.grey {
background-color: #ddd !important;
color: rgba(0, 0, 0, 0.87) !important;
}
}

View File

@ -7,7 +7,7 @@
#sidebox {
width: 260px;
right: 0;
margin-top: 95px;
margin-top: 94px;
background: #d3d3d3;
border-radius: 7px 0 0 7px;
padding: 3px 7px 10px 10px;

View File

@ -22,18 +22,19 @@
}
.slidetitle {
border-bottom: 5px solid #d3d3d3;
border-bottom: 4px solid #d3d3d3;
margin-bottom: 40px;
h1 {
margin-bottom: 0;
padding-bottom: 0;
margin-top: 20px;
}
h2 {
color: #9a9898;
margin-top: 10px;
margin-bottom: 5px;
margin-bottom: 2px;
font-size: 28px;
font-weight: normal;
display: block;
@ -48,4 +49,8 @@
hr {
margin: 10px 0;
}
.bold {
font-weight: 500;
}
}