Chyron template design

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

@@ -1,6 +1,6 @@
 <div id="container" [osResized]="resizeSubject" [ngStyle]="containerStyle" #container>
     <div id="projector" [ngStyle]="projectorStyle">
-        <div id="header" [ngStyle]="headerFooterStyle" *ngIf="projector.show_header_footer">
+        <div id="header" [ngStyle]="headerFooterStyle" *ngIf="projector && projector.show_header_footer">
             <!-- projector logo -->
             <img *ngIf="enableLogo && projectorLogo" src="{{ projectorLogo }}" class="projector-logo-main" />
 
@@ -19,7 +19,7 @@
             <os-slide-container [slideData]="slide" [scroll]="scroll" [scale]="scale"></os-slide-container>
         </div>
 
-        <div id="footer" [ngStyle]="headerFooterStyle" *ngIf="projector.show_header_footer">
+        <div id="footer" [ngStyle]="headerFooterStyle" *ngIf="projector && projector.show_header_footer">
             <div class="footertext">
                 <span *ngIf="eventDate"> {{ eventDate }} </span>
                 <span *ngIf="eventDate && eventLocation"> | </span>

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

@@ -16,6 +16,7 @@
     <div *ngIf="data.data.current" class="currentSpeaker">
         <mat-icon>mic</mat-icon>
         <span>{{ data.data.current.user }}</span>
+        <mat-icon *ngIf="data.data.current.marked">star</mat-icon>
     </div>
 
     <!-- Next speakers -->

client/src/app/slides/agenda/current-speaker-chyron/current-speaker-chyron-slide.component.html

@@ -1,5 +1,5 @@
 <div id="chyron" *ngIf="data">
-    <div id="inner">
+    <span id="inner">
         {{ data.data.current_speaker }}
-    </div>
+    </span>
 </div>

client/src/app/slides/agenda/current-speaker-chyron/current-speaker-chyron-slide.component.scss

@@ -1,14 +1,19 @@
 #chyron {
     position: absolute;
     left: 0;
-    bottom: 1em;
+    bottom: 0;
     z-index: 10;
     width: 100%;
+    height: 100px;
+    font-size: 32px;
+    text-align: center;
+    line-height: 1.1;
+    display: table;
 
     #inner {
-        background-color: green;
-        padding: 12px;
-        margin: 12px;
-        font-size: 32px;
+        display: table-cell;
+        vertical-align: middle;
+        padding-left: 20px;
+        padding-right: 20px;
     }
 }

client/src/assets/styles/global-components-style.scss

@@ -65,8 +65,14 @@
         background-color: mat-color($background, app-bar);
     }
 
-    // drag & drop view
+    /* drag & drop views */
     .node-content-wrapper {
         background-color: mat-color($background, app-bar);
     }
+
+    /* projector components */
+    #chyron {
+        background-color: mat-color($primary);
+        color: white; // TODO
+    }
 }

client/src/assets/styles/projector.scss

@@ -2,6 +2,10 @@
     * {
         font-family: customProjectorFont;
     }
+    .material-icons {
+        font-family: 'Material Icons';
+    }
+
 
     h2 {
         line-height: 40px;