Template work for slide components.

This commit is contained in:
Emanuel Schütze 2019-02-26 17:09:03 +01:00
parent 7be436594e
commit 17bd6d71bd
9 changed files with 66 additions and 25 deletions

View File

@ -1,8 +1,6 @@
#countdown {
font-weight: bold;
padding: 10px;
display: inline-block;
min-width: 75px;
text-align: right;
&.warning_time {

View File

@ -14,7 +14,8 @@
<!-- Current speaker -->
<div *ngIf="data.data.current" class="currentSpeaker">
<mat-icon>mic</mat-icon> {{ data.data.current.user }}
<mat-icon>mic</mat-icon>
<span>{{ data.data.current.user }}</span>
</div>
<!-- Next speakers -->

View File

@ -1,14 +1,24 @@
.lastSpeakers {
color: #9a9898;
margin-left: 30px;
margin-left: 33px;
margin-bottom: 10px;
}
.currentSpeaker {
font-weight: bold;
.mat-icon,
span {
vertical-align: middle;
}
span {
padding-left: 8px;
}
}
.nextSpeakers {
margin-left: 13px !important;
margin-top: 10px !important;
li {
line-height: 150%;

View File

@ -1,3 +1,27 @@
<div id="overlay" *ngIf="data">
<os-common-list-of-speakers-slide [data]="data"></os-common-list-of-speakers-slide>
<h3 translate>List of speakers</h3>
<!-- Last speakers -->
<div *ngIf="data.data.finished && data.data.finished.length">
<div *ngFor="let speaker of data.data.finished" class="lastSpeakers">
{{ speaker.user }}
<mat-icon *ngIf="speaker.marked">star</mat-icon>
</div>
</div>
<!-- Current speaker -->
<div *ngIf="data.data.current" class="currentSpeaker">
<mat-icon>mic</mat-icon>
<span>{{ data.data.current.user }}</span>
</div>
<!-- Next speakers -->
<div *ngIf="data.data.waiting && data.data.waiting.length">
<ol class="nextSpeakers">
<li *ngFor="let speaker of data.data.waiting">
{{ speaker.user }}
<mat-icon *ngIf="speaker.marked">star</mat-icon>
</li>
</ol>
</div>
</div>

View File

@ -1,9 +1,17 @@
@import '../common/common-list-of-speakers-slide.component.scss';
#overlay {
position: absolute;
right: 0;
bottom: 0;
background-color: green;
height: 30px;
background-color: #d3d3d3;
width: 40%;
height: 200px;
margin: 10px;
z-index: 10;
z-index: 20;
border-radius: 7px;
border: 1px solid #999;
padding: 0px 7px 10px 19px;
box-shadow: 3px 3px 10px 1px rgba(0, 0, 0, 0.5);
overflow: hidden;
}

View File

@ -1,21 +1,19 @@
#clock {
position: absolute;
right: 0;
top: 0;
color: white;
right: 38px;
top: 23px;
height: 30px;
margin: 12px;
z-index: 2;
padding-right: 50px;
padding-top: 5px;
z-index: 10;
padding-left: 30px;
text-align: right;
mat-icon {
padding-top: 5px;
vertical-align: middle;
}
span {
padding-left: 5px;
font-size: 24px;
float: right;
vertical-align: middle;
}
}

View File

@ -21,10 +21,10 @@
&.overlay {
position: relative;
float: right;
margin: 100px 10px 10px 10px;
padding: 10px 40px 7px 10px;
min-height: 72px;
min-width: 180px;
margin: 80px 0px 10px 10px;
padding: 35px 35px 0px 10px;
min-height: 60px;
min-width: 230px;
font-size: 3.7em;
font-weight: bold;
text-align: right;
@ -37,6 +37,7 @@
font-weight: normal;
font-size: 18px;
padding-right: 6px;
padding-top: 20px;
}
}
}

View File

@ -3,7 +3,7 @@
left: 0;
top: 0;
background-color: rgba($color: #000000, $alpha: 0.5);
z-index: 10;
z-index: 100;
width: 100%;
height: 100%;
display: grid;
@ -17,10 +17,11 @@
justify-self: center;
border-radius: 0.2em;
background: #ffffff;
font-size: 2.75em;
padding: 0.2em 0;
font-size: 2.3em;
padding: 0.5em 0.25em;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
min-height: 20px;
line-height: normal;
::ng-deep p {
margin: 0 0 10px;

View File

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