Basic styling and markup restructuring

src/RunnersMeet.Client/src/app/events/event-edit/event-edit.component.html

@@ -1,18 +1,39 @@
 <h1>Edit Event Details</h1>
 <form #eventForm="ngForm" class="vertical-form" (ngSubmit)="updateEvent(eventForm, $event)" *ngIf="event">
-	<span class="p-float-label">
-		<input type="text" pInputText name="title" [(ngModel)]="event.title" placeholder="Title" required>
-	</span>
-	<span class="p-float-label">
-		<input type="text" pInputText name="description" [(ngModel)]="event.description" placeholder="Description">
-	</span>
-	<div>
-		<p-calendar [(ngModel)]="startDate" name="startDate" dateFormat="yy-mm-dd" [showIcon]="true" [required]="true"></p-calendar>
+	<div class="form-field form-field--full-width">
+		<span class="p-float-label">
+			<input type="text" pInputText
+				id="title" name="title" [(ngModel)]="event.title"
+				required>
+			<label for="title">Title</label>
+		</span>
 	</div>
-	<div>
-		<p-calendar [(ngModel)]="startTime" name="startTime" [timeOnly]="true" hourFormat="24" [required]="true"></p-calendar>
+	<div class="form-field form-field--full-width">
+		<span class="p-float-label">
+			<input type="text" pInputText
+				id="description" name="description" [(ngModel)]="event.description">
+			<label for="description">Description</label>
+		</span>
 	</div>
-	<div>
+	<div class="form-field">
+		<span class="p-float-label">
+			<p-calendar
+				inputId="startDate" name="startDate" [(ngModel)]="startDate"
+				dateFormat="yy-mm-dd" [showIcon]="true"
+				[required]="true">
+			</p-calendar>
+			<label for="startDate">Date</label>
+		</span>
+		<span class="p-float-label">
+			<p-calendar
+				inputId="startTime" name="startTime" [(ngModel)]="startTime"
+				[timeOnly]="true" hourFormat="24"
+				[required]="true">
+			</p-calendar>
+			<label for="startTime">Time</label>
+		</span>
+	</div>
+	<div class="form-field">
 		<app-track-picker [(track)]="event.track"></app-track-picker>
 	</div>
 	<div class="button-group">

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

@@ -1,15 +1,21 @@
 <h1>Events</h1>
 
 <form class="vertical-form" (ngSubmit)="search($event)">
-	<div class="field-checkbox">
-		<p-checkbox name="showMyEvents" [(ngModel)]="showMyEvents" [binary]="true" inputId="showMyEvents"></p-checkbox>
-		<label for="showMyEvents">Show <em>my</em> events</label>
+	<div class="form-field form-field--full-width">
+		<span class="p-float-label p-input-icon-left">
+			<i class="pi pi-search"></i>
+			<input type="text" pInputText
+				id="titleFilter" name="titleFilter" [(ngModel)]="titleFilter">
+			<label for="titleFilter">Search</label>
+		</span>
 	</div>
 
-	<span class="p-input-icon-left">
-		<i class="pi pi-search"></i>
-		<input type="text" pInputText name="titleFilter" [(ngModel)]="titleFilter" placeholder="Search">
-	</span>
+	<div class="form-field">
+		<div class="field-checkbox">
+			<p-checkbox label="Show MY events" [binary]="true"
+				name="showMyEvents" [(ngModel)]="showMyEvents"></p-checkbox>
+		</div>
+	</div>
 
 	<div class="button-group">
 		<button type="submit" pButton>Search</button>

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

@@ -1,15 +1,21 @@
 <h1>Track Search</h1>
 
 <form class="vertical-form" (ngSubmit)="search($event)">
-	<div class="field-checkbox">
-		<p-checkbox name="showMyTracks" [(ngModel)]="showMyTracks" [binary]="true" inputId="showMyTracks"></p-checkbox>
-		<label for="showMyTracks">Show <em>my</em> tracks</label>
+	<div class="form-field form-field--full-width">
+		<span class="p-float-label p-input-icon-left">
+			<i class="pi pi-search"></i>
+			<input type="text" pInputText
+				id="nameFilter" name="nameFilter" [(ngModel)]="nameFilter">
+			<label for="nameFilter">Search</label>
+		</span>
 	</div>
 
-	<span class="p-input-icon-left">
-		<i class="pi pi-search"></i>
-		<input type="text" pInputText name="nameFilter" [(ngModel)]="nameFilter" placeholder="Search">
-	</span>
+	<div class="form-field">
+		<div class="field-checkbox">
+			<p-checkbox label="Show MY tracks" [binary]="true"
+				name="showMyTracks" [(ngModel)]="showMyTracks"></p-checkbox>
+		</div>
+	</div>
 
 	<div class="button-group">
 		<button type="submit" pButton>Search</button>

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

@@ -9,8 +9,10 @@
 		{{ track?.trackId }} - {{ track?.fileHash }}
 	</ng-template>
 	<ng-template pTemplate="footer">
-		<a pButton class="p-button-secondary" [routerLink]="['/tracks/view', track?.trackId]">View</a>
-		<a pButton class="p-button-secondary" [routerLink]="['/tracks/edit', track?.trackId]">Edit</a>
-		<a pButton class="p-button-secondary" [href]="downloadUrl" target="_blank">Download</a>
+		<div class="button-group">
+			<a pButton class="p-button-secondary" [routerLink]="['/tracks/view', track?.trackId]">View</a>
+			<a pButton class="p-button-secondary" [routerLink]="['/tracks/edit', track?.trackId]">Edit</a>
+			<a pButton class="p-button-secondary" [href]="downloadUrl" target="_blank">Download</a>
+		</div>
 	</ng-template>
 </p-card>

src/RunnersMeet.Client/src/styles.scss

@@ -1,7 +1,17 @@
 /* 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; }
+html, body {
+	height: 100%;
+	font-size: 14px;
+}
+body {
+	margin: 0;
+
+	font-family: var(--font-family);
+    font-weight: 400;
+
+    color: var(--text-color);
+}
 
 .hidden {
 	display: none;
@@ -17,16 +27,43 @@ body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
 	margin-bottom: 1em;
 }
 
-.button-group .mdc-button {
+.button-group {
+	margin-top: 1rem;
+}
+
+.button-group button,
+.button-group a {
 	margin-right: 0.5em;
 }
 
+/////////
+/// Forms
+
 .vertical-form {
 	display: flex;
 	flex-direction: column;
 	margin-bottom: 1em;
 }
 
+.form-field {
+	margin-top: 1rem;
+	display: flex;
+	flex-direction: row;
+	gap: 1rem;
+
+	&:has(.p-float-label) {
+		margin-top: 2rem;
+	}
+}
+
+.form-field--full-width > * {
+	flex: 1 0 auto;
+}
+
+.form-field--full-width .p-float-label > :not(label) {
+	width: 100%;
+}
+
 dl.pivot-table {
 	display: flex;
 	flex-flow: row wrap;
@@ -55,3 +92,10 @@ dl.pivot-table {
 	width: 100%;
 	aspect-ratio: 4 / 3;
 }
+
+///////////////////
+/// PrimeNG "fixes"
+
+.p-card .p-card-footer {
+	padding: 0;
+}