Basic track edit styling

src/RunnersMeet.Client/src/app/pages/tracks-page/tracks-page.component.html

@@ -1,4 +1,6 @@
-<form class="filter-container" (ngSubmit)="search($event)">
+<h1>Track Search</h1>
+
+<form class="vertical-form" (ngSubmit)="search($event)">
 	<mat-checkbox name="showMyTracks" [(ngModel)]="showMyTracks">
 		Show <em>my</em> tracks
 	</mat-checkbox>
@@ -6,8 +8,12 @@
 		<mat-label>Track name</mat-label>
 		<input matInput name="nameFilter" [(ngModel)]="nameFilter">
 	</mat-form-field>
-	<button type="submit" mat-raised-button color="accent">Search</button>
+
+	<div class="button-group">
+		<button type="submit" mat-raised-button color="accent">Search</button>
+	</div>
 </form>
+
 <app-track-list-item *ngFor="let track of tracks | async" [track]="track"></app-track-list-item>
 
 <button mat-raised-button color="accent" [disabled]="!hasMore" (click)="loadMore()">More</button>

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

@@ -1,26 +1,29 @@
-<form (ngSubmit)="updateTrack($event)">
-	<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> <input type="text" name="displayName" [(ngModel)]="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>
-		<button type="submit">Save</button> <button type="button" (click)="deleteTrack()">Delete</button>
+<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>Edit Track Details</h1>
+<form class="vertical-form" (ngSubmit)="updateTrack($event)" *ngIf="track">
+	<mat-form-field appearance="fill">
+		<mat-label>Title</mat-label>
+		<input type="text" matInput name="displayName" [(ngModel)]="track.displayName">
+	</mat-form-field>
+	<div class="button-group">
+		<button type="submit" mat-raised-button color="primary">Save</button>
+		<button type="submit" mat-raised-button color="warn" (click)="deleteTrack()">Delete</button>
 	</div>
 </form>

src/RunnersMeet.Client/src/app/tracks/track-edit/track-edit.component.ts

@@ -12,7 +12,7 @@ export class TrackEditComponent implements OnInit {
 	@Input()
 	public trackId: string = '';
 
-	public track: Track = {} as Track;
+	public track: Track | null = null;
 
 	public constructor(
 		private readonly tracksApi: TracksApiService,
@@ -26,14 +26,18 @@ export class TrackEditComponent implements OnInit {
 	}
 
 	public updateTrack(event: SubmitEvent): void {
-		this.tracksApi.updateTrack(this.track).then(result => {
-			this.track = result;
-		});
+		if (this.track) {
+			this.tracksApi.updateTrack(this.track).then(result => {
+				this.track = result;
+			});
+		}
 	}
 
 	public deleteTrack(): void {
-		this.tracksApi.deleteTrack(this.track).then(() => {
-			this.router.navigateByUrl("/tracks");
-		});
+		if (this.track) {
+			this.tracksApi.deleteTrack(this.track).then(() => {
+				this.router.navigateByUrl("/tracks");
+			});
+		}
 	}
 }

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

@@ -6,7 +6,7 @@
 	<mat-card-content>
 		<p>{{ track?.trackId }} - {{ track?.fileHash }}</p>
 	</mat-card-content>
-	<mat-card-actions>
+	<mat-card-actions class="button-group">
 		<a mat-stroked-button color="primary" [routerLink]="['/tracks/view', track?.trackId]">View</a>
 		<a mat-stroked-button [routerLink]="['/tracks/edit', track?.trackId]">Edit</a>
 		<a mat-stroked-button [href]="downloadUrl" target="_blank">Download</a>

src/RunnersMeet.Client/src/styles.scss

@@ -15,13 +15,13 @@ body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
 
 .track-overview-item {
 	margin-bottom: 1em;
+}
 
-	.mat-mdc-card-actions .mdc-button {
-		margin-right: 0.5em;
-	}
+.button-group .mdc-button {
+	margin-right: 0.5em;
 }
 
-.filter-container {
+.vertical-form {
 	display: flex;
 	flex-direction: column;
 	margin-bottom: 1em;