Better header

packages/bridge-ui/src/app/components/race-details/race-details.component.html

@@ -1,12 +1,22 @@
 @if( race != undefined ) {
-    <mat-grid-list cols="4" rowHeight="100px">
+    <div class="race-details">
-        <mat-grid-tile [colspan]="3" [rowspan]="1"><h1>{{race.mapName}}</h1></mat-grid-tile>
+        <div class="details-container">
-        <mat-grid-tile [colspan]="1" [rowspan]="2"><img
+            <div class="map-title">
+                <h1>{{race.mapName}}</h1>
+            </div>
+            <div class="map-times">
+                <p>Author Time: {{race.authorTime}}</p>
+                <p>Gold Time: {{race.goldTime}}</p>
+                <p>Silver Time: {{race.silverTime}}</p>
+                <p>Bronze Time: {{race.bronzeTime}}</p>
+            </div>
+        </div>
+        <img
             src={{race.mapImgUrl}}
             class="img-thumbnail shadow-2-strong"
-        /></mat-grid-tile>
+        />
-        <mat-grid-tile [colspan]="3" [rowspan]="1">Three</mat-grid-tile>
+    </div>
-    </mat-grid-list>
+
     <br/>
     <div>
         <table mat-table [dataSource]="sortedResults" class="mat-elevation-z8">

packages/bridge-ui/src/app/components/race-details/race-details.component.scss

@@ -1,3 +1,25 @@
-.img-thumbnail{
+.img-thumbnail {
-    width: 300px;
+    width: 200px;
+    //float: right;
+}
+
+.race-details {
+    display: flex;
+    justify-content: space-between;
+}
+
+.details-container{
+    flex: 3 0px;
+    display: flex;
+    flex-direction: column;
+    align-content: stretch;
+    justify-content: center;
+}
+
+.map-title {
+    text-align: center;
+}
+
+.map-times {
+    margin-left: 15px;
 }

packages/bridge-ui/src/app/models/race.model.ts

@@ -4,6 +4,10 @@ export class Race{
     mapUrl: string  = "";
     mapUID: string = "";
     mapImgUrl: string = "";
+    authorTime: number = 0;
+    goldTime: number = 0;
+    silverTime: number = 0;
+    bronzeTime: number = 0;
     startDate: Date = new Date(0);
     endDate: Date = new Date(0);
     racers: string[] = [];