Wrapping search form inside of a panel

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

@@ -39,6 +39,7 @@ import { CardModule } from 'primeng/card';
 import { CalendarModule } from 'primeng/calendar';
 import { DynamicDialogModule } from 'primeng/dynamicdialog';
 import { TableModule } from 'primeng/table';
+import { PanelModule } from 'primeng/panel';
 
 @NgModule({
 	declarations: [
@@ -75,6 +76,7 @@ import { TableModule } from 'primeng/table';
 		CalendarModule,
 		DynamicDialogModule,
 		TableModule,
+		PanelModule,
 	],
 	providers: [
 		ConfigService,

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

@@ -1,26 +1,26 @@
-<h1>Events</h1>
-
-<form class="vertical-form" (ngSubmit)="search($event)">
-	<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>
+<p-panel header="Search Tracks">
+	<form class="vertical-form" (ngSubmit)="search($event)">
+		<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>
 
-	<div class="form-field">
-		<div class="field-checkbox">
-			<p-checkbox label="Show MY events" [binary]="true"
-				name="showMyEvents" [(ngModel)]="showMyEvents"></p-checkbox>
+		<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>
 
-	<div class="button-group">
-		<button type="submit" pButton>Search</button>
-	</div>
-</form>
+		<div class="button-group">
+			<button type="submit" pButton>Search</button>
+		</div>
+	</form>
+</p-panel>
 
 <ul>
 	<li *ngFor="let event of groupEvents | async">{{ event.title }} <a [routerLink]="['/events/view', event.eventId]">View</a> <a [routerLink]="['/events/edit', event.eventId]">Edit</a></li>

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

@@ -1,26 +1,26 @@
-<h1>Track Search</h1>
-
-<form class="vertical-form" (ngSubmit)="search($event)">
-	<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>
+<p-panel header="Search Tracks">
+	<form class="vertical-form" (ngSubmit)="search($event)">
+		<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>
 
-	<div class="form-field">
-		<div class="field-checkbox">
-			<p-checkbox label="Show MY tracks" [binary]="true"
-				name="showMyTracks" [(ngModel)]="showMyTracks"></p-checkbox>
+		<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>
 
-	<div class="button-group">
-		<button type="submit" pButton>Search</button>
-	</div>
-</form>
+		<div class="button-group">
+			<button type="submit" pButton>Search</button>
+		</div>
+	</form>
+</p-panel>
 
 <app-track-list-item *ngFor="let track of tracks | async" [track]="track"></app-track-list-item>
 

src/RunnersMeet.Client/src/styles.scss

@@ -60,7 +60,7 @@ body {
 	flex: 1 0 auto;
 }
 
-.form-field--full-width .p-float-label > :not(label) {
+.form-field--full-width .p-float-label > :not(label, i) {
 	width: 100%;
 }
 
@@ -99,3 +99,8 @@ dl.pivot-table {
 .p-card .p-card-footer {
 	padding: 0;
 }
+
+p-panel {
+	display: block;
+	margin-bottom: 1rem;
+}