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

View File

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

View File

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

View File

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

View File

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