- Better top layout for races

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

@@ -1,4 +1,45 @@
 @if( race != undefined ) {
+    <div class="column side">
+        <img
+            src={{race.mapImgUrl}}
+            class="img-thumbnail shadow-2-strong img-width"
+        />
+        <br/>
+        <a mat-raised-button extended href="{{race.mapURL}}" class="button img-width" title="{{race.mapName}}.Map.Gbx" color="primary">
+            <mat-icon>download</mat-icon>
+            Download map
+        </a>
+    </div>
+    <div class="column middle">
+        <h1 style="text-align: center;" >{{race.mapName}}</h1>
+        <div class="count-down-timer">
+            @if(openToUploads) {
+                <h2>Entries Close on: {{currentTime}} </h2>
+                <div class="wrapper">
+                    <div class="description">
+                    <p>Days</p>
+                    <p>Hours</p>
+                    <p>Minutes</p>
+                    <p>Seconds</p>
+                    </div>
+                    <div class="times">
+                    <p #days></p>
+                    <p #hours></p>
+                    <p #minutes></p>
+                    <p #seconds></p>
+                    </div>
+                </div>
+            } 
+            @else {
+                <h2>Closed for new entries</h2>
+            }
+        </div>
+        <div style="text-align: center;">
+            <p>Author: {{formatMilliseconds(race.authorTime)}} Gold: {{formatMilliseconds(race.goldTime)}} Silver: {{formatMilliseconds(race.silverTime)}} Bronze: {{formatMilliseconds(race.bronzeTime)}}</p>
+        </div>
+    </div>
+    <mat-divider></mat-divider>
+    <!--
     <div class="race-details">
         <div class="details-container">
             <div class="map-title">
@@ -44,6 +85,7 @@
         }
         
     </div>
+    -->
     <br/>
     <div>
         <table mat-table [dataSource]="sortedResults" class="mat-elevation-z8">

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

@@ -1,9 +1,25 @@
+.column {
+  float: left;
+}
+
+.column.side {
+  width: 20%
+}
+
+.column.middle {
+  width: 80%;
+}
+
 .img-thumbnail {
-    width: 200px;
+    
     //float: right;
     box-shadow: 2px 6px 9px 2px rgb(0 0 0 / 20%);
 }
 
+.img-width {
+  width: 200px;
+}
+
 .race-details {
     display: flex;
     justify-content: space-between;

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

@@ -5,6 +5,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { MatGridListModule } from '@angular/material/grid-list';
 import { MatIconModule } from '@angular/material/icon';
 import { MatTableModule } from '@angular/material/table';
+import { MatDividerModule } from '@angular/material/divider';
 
 import { RacesService } from '../../services/races.service';
 import { RaceResultService } from '../../services/race-result.service';
@@ -21,7 +22,8 @@ import { ServerSideEventsService } from '../../services/server-side-events.servi
     MatGridListModule,
     MatIconModule,
     MatTableModule,
-    MatButtonModule
+    MatButtonModule,
+    MatDividerModule
   ],
   templateUrl: './race-details.component.html',
   styleUrl: './race-details.component.scss'