Materializing tracks list

src/RunnersMeet.Client/angular.json

@@ -30,7 +30,7 @@
 							"src/assets"
 						],
 						"styles": [
-							"@angular/material/prebuilt-themes/purple-green.css",
+							"@angular/material/prebuilt-themes/indigo-pink.css",
 							"src/styles.scss"
 						],
 						"scripts": []
@@ -100,7 +100,7 @@
 							"src/assets"
 						],
 						"styles": [
-							"@angular/material/prebuilt-themes/purple-green.css",
+							"@angular/material/prebuilt-themes/indigo-pink.css",
 							"src/styles.scss"
 						],
 						"scripts": []

src/RunnersMeet.Client/src/app/app.module.ts

@@ -29,6 +29,10 @@ import { MatButtonModule } from '@angular/material/button';
 import { MatSidenavModule } from '@angular/material/sidenav';
 import { MatIconModule } from '@angular/material/icon';
 import { MatListModule } from '@angular/material/list';
+import { MatCardModule } from '@angular/material/card';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
 
 @NgModule({
 	declarations: [
@@ -55,7 +59,11 @@ import { MatListModule } from '@angular/material/list';
 		MatButtonModule,
 		MatSidenavModule,
 		MatIconModule,
-		MatListModule
+		MatListModule,
+		MatCardModule,
+		MatCheckboxModule,
+		MatFormFieldModule,
+		MatInputModule,
 	],
 	providers: [
 		ConfigService,

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

@@ -1,17 +1,13 @@
-<form (ngSubmit)="search($event)">
-	<div>
-		<input type="checkbox" name="showMyTracks" [(ngModel)]="showMyTracks" /> Show <em>my</em> tracks
-	</div>
-	<div>
-		Track name: <input type="text" name="nameFilter" [(ngModel)]="nameFilter" />
-	</div>
-	<div>
-		<button type="submit">Search</button>
-	</div>
+<form class="filter-container" (ngSubmit)="search($event)">
+	<mat-checkbox name="showMyTracks" [(ngModel)]="showMyTracks">
+		Show <em>my</em> tracks
+	</mat-checkbox>
+	<mat-form-field appearance="fill">
+		<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>
 </form>
-Tracks:
-<ul>
-	<li *ngFor="let track of tracks | async"><app-track-list-item [track]="track"></app-track-list-item></li>
-</ul>
+<app-track-list-item *ngFor="let track of tracks | async" [track]="track"></app-track-list-item>
 
-<button type="button" [disabled]="!hasMore" (click)="loadMore()">More</button>
+<button mat-raised-button color="accent" [disabled]="!hasMore" (click)="loadMore()">More</button>

src/RunnersMeet.Client/src/app/shell/main-menu/main-menu.component.html

@@ -17,6 +17,8 @@
 			</button>
 			<span>RunnersMeet</span>
 		</mat-toolbar>
-		<ng-content></ng-content>
+		<div class="main-content">
+			<ng-content></ng-content>
+		</div>
 	</mat-sidenav-content>
 </mat-sidenav-container>

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

@@ -1,5 +1,14 @@
-{{ track?.trackId }} - {{ track?.displayName }} - {{ track?.fileHash }}<br />
-↔{{ track?.distance }}m ↑{{ track?.elevationUp }}m ↓{{ track?.elevationDown }}m<br />
-<a [routerLink]="['/tracks/view', track?.trackId]">View</a> &mdash;
-<a [routerLink]="['/tracks/edit', track?.trackId]">Edit</a> &mdash;
-<a [href]="downloadUrl" target="_blank">Download</a>
+<mat-card class="track-overview-item">
+	<mat-card-header>
+		<mat-card-title>{{ track?.displayName }}</mat-card-title>
+		<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>
+	</mat-card-content>
+	<mat-card-actions>
+		<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>
+	</mat-card-actions>
+</mat-card>

src/RunnersMeet.Client/src/styles.scss

@@ -1,4 +1,22 @@
-/* You can add global styles to this file, and also import other style files */
-
-html, body { height: 100%; }
-body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
+/* You can add global styles to this file, and also import other style files */
+
+html, body { height: 100%; }
+body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
+
+.main-content {
+	padding: 1em;
+}
+
+.track-overview-item {
+	margin-bottom: 1em;
+
+	.mat-mdc-card-actions .mdc-button {
+		margin-right: 0.5em;
+	}
+}
+
+.filter-container {
+	display: flex;
+	flex-direction: column;
+	margin-bottom: 1em;
+}