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 { #countdown {
font-weight: bold; font-weight: bold;
padding: 10px;
display: inline-block; display: inline-block;
min-width: 75px;
text-align: right; text-align: right;
&.warning_time { &.warning_time {

View File

@ -14,7 +14,8 @@
<!-- Current speaker --> <!-- Current speaker -->
<div *ngIf="data.data.current" class="currentSpeaker"> <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> </div>
<!-- Next speakers --> <!-- Next speakers -->

View File

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

View File

@ -1,3 +1,27 @@
<div id="overlay" *ngIf="data"> <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> </div>

View File

@ -1,9 +1,17 @@
@import '../common/common-list-of-speakers-slide.component.scss';
#overlay { #overlay {
position: absolute; position: absolute;
right: 0; right: 0;
bottom: 0; bottom: 0;
background-color: green; background-color: #d3d3d3;
height: 30px; width: 40%;
height: 200px;
margin: 10px; 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 { #clock {
position: absolute; position: absolute;
right: 0; right: 38px;
top: 0; top: 23px;
color: white;
height: 30px; height: 30px;
margin: 12px; z-index: 10;
z-index: 2; padding-left: 30px;
padding-right: 50px; text-align: right;
padding-top: 5px;
mat-icon { mat-icon {
padding-top: 5px; vertical-align: middle;
} }
span { span {
padding-left: 5px; padding-left: 5px;
font-size: 24px; font-size: 24px;
float: right; vertical-align: middle;
} }
} }

View File

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

View File

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

View File

@ -7,7 +7,7 @@
#sidebox { #sidebox {
width: 260px; width: 260px;
right: 0; right: 0;
margin-top: 50px; margin-top: 95px;
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;