List of speakers template

client/src/app/shared/components/projector/projector.component.scss

@@ -8,6 +8,8 @@
         left: 0;
         transform-origin: left top;
         overflow: hidden;
+        font-size: 22px !important;
+        line-height: 24px !important;
 
         #header {
             position: absolute;

client/src/app/slides/agenda/list-of-speakers/list-of-speakers-slide.component.html

@@ -1,22 +1,29 @@
 <div *ngIf="data">
+    <div class="slidetitle">
         <h1 translate>List of speakers</h1>
-    <h3>{{ getTitle() }}</h3>
+        <h2> {{ getTitle() }}</h2>
+    </div>
 
+    <!-- Last speakers -->
     <div *ngIf="data.data.finished.length">
-        <span translate>Finished</span>:
+        <div *ngFor="let speaker of data.data.finished" class="lastSpeakers">
-        <div *ngFor="let speaker of data.data.finished">
             {{ speaker.user }}
+            <mat-icon *ngIf="speaker.marked">star</mat-icon>
         </div>
     </div>
 
-    <div *ngIf="data.data.current">
+    <!-- Current speaker -->
-        <span translate>Current</span>: {{ data.data.current.user }}
+    <div *ngIf="data.data.current" class="currentSpeaker">
+        <mat-icon>mic</mat-icon> {{ data.data.current.user }}
     </div>
 
+    <!-- Next speakers -->
     <div *ngIf="data.data.finished.length">
-        <span translate>Waiting</span>:
+        <ol class="nextSpeakers">
-        <div *ngFor="let speaker of data.data.waiting">
+            <li *ngFor="let speaker of data.data.waiting">
-            {{ speaker.user }} {{ speaker.marked ? 'marked' : '' }}
+                {{ speaker.user }}
-        </div>
+                <mat-icon *ngIf="speaker.marked">star</mat-icon>
+            </li>
+        </ol>
     </div>
 </div>

client/src/app/slides/agenda/list-of-speakers/list-of-speakers-slide.component.scss

@@ -0,0 +1,16 @@
+.lastSpeakers {
+    color: #9a9898;
+    margin-left: 30px;
+}
+
+.currentSpeaker {
+    font-weight: bold;
+}
+
+.nextSpeakers {
+    margin-left: 13px !important;
+
+    li {
+        line-height: 150%;
+    }
+}

client/src/styles.scss

@@ -617,7 +617,7 @@ button.mat-menu-item.selected {
         margin-bottom: 40px;
 
         h1 {
-            font-size: 2.25em;
+            font-size: 2em;
             line-height: 1.1em;
             margin-bottom: 0;
             padding-bottom: 0;
@@ -625,7 +625,7 @@ button.mat-menu-item.selected {
         h2 {
             color: #9a9898;
             margin-top: 10px;
-            margin-bottom: 0px;
+            margin-bottom: 5px;
             font-size: 28px;
             font-weight: normal;
             display: block;