Basic track detail styling

src/RunnersMeet.Client/src/app/tracks/track-list-item/track-list-item.component.html

@@ -4,7 +4,7 @@
 		<mat-card-subtitle>↔{{ track?.distance | number: '1.0-0' }}m ↑{{ track?.elevationUp | number: '1.0-0' }}m ↓{{ track?.elevationDown | number: '1.0-0' }}m</mat-card-subtitle>
 	</mat-card-header>
 	<mat-card-content>
-		<p>{{ track?.trackId }} - {{ track?.displayName }} - {{ track?.fileHash }}</p>
+		<p>{{ track?.trackId }} - {{ track?.fileHash }}</p>
 	</mat-card-content>
 	<mat-card-actions>
 		<a mat-stroked-button color="primary" [routerLink]="['/tracks/view', track?.trackId]">View</a>

src/RunnersMeet.Client/src/app/tracks/track-view/track-view.component.html

@@ -1,24 +1,23 @@
-<div>
-	<label>ID:</label> {{ track?.trackId }}
-</div>
-<div>
-	<label>Owner:</label> {{ track?.owner?.userId }} / {{ track?.owner?.displayName }}
-</div>
-<div>
-	<label>File Hash:</label> {{ track?.fileHash }}
-</div>
-<div>
-	<label>Display Name:</label> {{ track?.displayName }}
-</div>
-<div>
-	<label>Distance (m):</label> {{ track?.distance }}
-</div>
-<div>
-	<label>Elevation up (m):</label> {{ track?.elevationUp }}
-</div>
-<div>
-	<label>Elevation down (m):</label> {{ track?.elevationDown }}
-</div>
-<div>
-	<iframe *ngIf="gpxStudioEmbedUrl" [src]="gpxStudioEmbedUrl" width="100%" height="500" frameborder="0" allowfullscreen></iframe>
+
+<h1>Track Stats</h1>
+<dl class="pivot-table">
+	<dt>ID</dt>
+	<dd>{{ track?.trackId }}</dd>
+	<dt>Owner</dt>
+	<dd>{{ track?.owner?.userId }} / {{ track?.owner?.displayName }}</dd>
+	<dt>File Hash</dt>
+	<dd>{{ track?.fileHash }}</dd>
+	<dt>Title</dt>
+	<dd>{{ track?.displayName }}</dd>
+	<dt>Distance</dt>
+	<dd>{{ track?.distance | number: '1.0-0' }}m</dd>
+	<dt>Elevation up</dt>
+	<dd>{{ track?.elevationUp | number: '1.0-0' }}m</dd>
+	<dt>Elevation down</dt>
+	<dd>{{ track?.elevationDown | number: '1.0-0' }}m</dd>
+</dl>
+
+<h1>Map</h1>
+<div class="map-container">
+	<iframe *ngIf="gpxStudioEmbedUrl" [src]="gpxStudioEmbedUrl" width="100%" height="100%" frameborder="0" allowfullscreen></iframe>
 </div>

src/RunnersMeet.Client/src/styles.scss

@@ -9,6 +9,8 @@ body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
 
 .main-content {
 	padding: 1em;
+	max-width: 1024px;
+	margin: 0 auto;
 }
 
 .track-overview-item {
@@ -24,3 +26,32 @@ body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
 	flex-direction: column;
 	margin-bottom: 1em;
 }
+
+dl.pivot-table {
+	display: flex;
+	flex-flow: row wrap;
+	font-size: 1.2em;
+
+	dt {
+		flex-basis: 20%;
+		text-align: right;
+		font-weight: bold;
+		padding: 0.3em 0.5em;
+		margin: 0;
+		border-right: 1px solid grey;
+		border-bottom: 1px solid grey;
+	}
+
+	dd {
+		flex-basis: 70%;
+		flex-grow: 1;
+		padding: 0.3em 0.5em;
+		margin: 0;
+		border-bottom: 1px solid grey;
+	}
+}
+
+.map-container {
+	width: 100%;
+	aspect-ratio: 4 / 3;
+}