From 1f63c3fc3fb41c57a49d8da63b142ff9faa4216b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nikola=20Forr=C3=B3?= <nikola@mraveniste.cc>
Date: Fri, 31 Aug 2018 14:10:59 +0200
Subject: [PATCH] Show cover image in Twitch schedule

---
 apps/schedule/src/app/models/event.ts         |  2 ++
 .../src/app/schedule/schedule.component.css   |  9 +++++++--
 .../src/app/schedule/schedule.component.html  | 19 +++++++++++++------
 3 files changed, 22 insertions(+), 8 deletions(-)

diff --git a/apps/schedule/src/app/models/event.ts b/apps/schedule/src/app/models/event.ts
index 8c8cbd2..4796154 100644
--- a/apps/schedule/src/app/models/event.ts
+++ b/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;
diff --git a/apps/schedule/src/app/schedule/schedule.component.css b/apps/schedule/src/app/schedule/schedule.component.css
index 946752d..cb9e454 100644
--- a/apps/schedule/src/app/schedule/schedule.component.css
+++ b/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 {
-    vertical-align: middle;
+.mat-cell {
+    padding-top: 0.5em;
+    padding-bottom: 0.5em;
+}
+
+.mat-cell img {
+    margin-top: 0.5em;
 }
 
 .spinner-container {
diff --git a/apps/schedule/src/app/schedule/schedule.component.html b/apps/schedule/src/app/schedule/schedule.component.html
index 9f9d7cd..d686e9d 100644
--- a/apps/schedule/src/app/schedule/schedule.component.html
+++ b/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">
-
-                <img src="{{event.game_box_small}}" alt="{{event.game_name}}">
+            <mat-cell fxFlex="20%" *matCellDef="let event">
 
                 <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>