Show cover image in Twitch schedule

apps/schedule/src/app/models/event.ts

@@ -4,6 +4,8 @@ export interface Event {
     end: Date;
     title: string;
     description: string;
+    cover_image_id: string;
+    cover_image_url: string;
     game_id: number;
     game_name: string;
     game_box_small: string;

apps/schedule/src/app/schedule/schedule.component.css

@@ -14,8 +14,13 @@
     font-size: 125%;
 }
 
-.mat-column-game_name img, .mat-column-game_name span {
+.mat-cell {
-    vertical-align: middle;
+    padding-top: 0.5em;
+    padding-bottom: 0.5em;
+}
+
+.mat-cell img {
+    margin-top: 0.5em;
 }
 
 .spinner-container {

apps/schedule/src/app/schedule/schedule.component.html

@@ -42,7 +42,7 @@
 
         <ng-container matColumnDef="title">
 
-            <mat-cell fxFlex="25%" *matCellDef="let event">
+            <mat-cell fxFlex="20%" *matCellDef="let event">
 
                 <a mat-button href="https://www.twitch.tv/events/{{event.id}}" target="_blank">
 
@@ -50,31 +50,38 @@
 
                 </a>
 
+                <br>
+
+                <img src="{{event.cover_image_url.replace('{width}', '128').replace('{height}', '72')}}"
+                     alt="{{event.title}}">
+
             </mat-cell>
 
         </ng-container>
 
         <ng-container matColumnDef="description">
 
-            <mat-cell fxFlex="25%" *matCellDef="let event">{{event.description}}</mat-cell>
+            <mat-cell fxFlex="30%" *matCellDef="let event">{{event.description}}</mat-cell>
 
         </ng-container>
 
         <ng-container matColumnDef="game_name">
 
-            <mat-cell fxFlex="25%" *matCellDef="let event">
+            <mat-cell fxFlex="20%" *matCellDef="let event">
-
-                <img src="{{event.game_box_small}}" alt="{{event.game_name}}">
 
                 <span>{{event.game_name}}</span>
 
+                <br>
+
+                <img src="{{event.game_box_small}}" alt="{{event.game_name}}">
+
             </mat-cell>
 
         </ng-container>
 
         <ng-container matColumnDef="time">
 
-            <mat-cell fxFlex="25%" *matCellDef="let event">{{event.start | time : timeZone}}</mat-cell>
+            <mat-cell fxFlex="30%" *matCellDef="let event">{{event.start | time : timeZone}}</mat-cell>
 
         </ng-container>