From 6203e3da75b2284870ae587516ed76631723ccd1 Mon Sep 17 00:00:00 2001
From: Eli Ribble <eli@gleipnir.technology>
Date: Fri, 3 Apr 2026 19:07:20 +0000
Subject: [PATCH] Add nuisance style, fix header on non-home district pages

---
 html/template/rmo/nuisance.html  |  1 -
 scss/rmo/nuisance.scss           | 93 --------------------------------
 ts/components/HeaderDistrict.vue | 46 +++++++---------
 ts/rmo/content/Nuisance.vue      | 93 ++++++++++++++++++++++++++++++++
 ts/rmo/view/district/Home.vue    | 29 +++++++++-
 5 files changed, 140 insertions(+), 122 deletions(-)

diff --git a/html/template/rmo/nuisance.html b/html/template/rmo/nuisance.html
index 76bc2b3e..c79e982d 100644
--- a/html/template/rmo/nuisance.html
+++ b/html/template/rmo/nuisance.html
@@ -7,7 +7,6 @@
 		type="text/javascript"
 		src="//unpkg.com/maplibre-gl@5.0.1/dist/maplibre-gl.js"
 	></script>
-	<script src="/static/js/address-suggestion.js"></script>
 	<script src="/static/js/geocode.js"></script>
 	<script src="/static/js/location.js"></script>
 	<script src="/static/js/map-locator.js"></script>
diff --git a/scss/rmo/nuisance.scss b/scss/rmo/nuisance.scss
index c65dba40..e69de29b 100644
--- a/scss/rmo/nuisance.scss
+++ b/scss/rmo/nuisance.scss
@@ -1,93 +0,0 @@
-.district-logo {
-	max-height: 80px;
-	width: auto;
-}
-.form-section {
-	margin-bottom: 2.5rem;
-	padding-bottom: 2rem;
-	border-bottom: 1px solid #dee2e6;
-}
-.form-section:last-child {
-	border-bottom: none;
-	margin-bottom: 1rem;
-	padding-bottom: 0;
-}
-.section-heading {
-	margin-bottom: 1.5rem;
-	display: flex;
-	align-items: center;
-}
-.section-heading i {
-	margin-right: 10px;
-	font-size: 1.5rem;
-	color: #0d6efd;
-}
-.submit-container {
-	background-color: #f8f9fa;
-	padding: 20px;
-	border-radius: 5px;
-	margin-top: 2rem;
-}
-.source-card {
-	height: 100%;
-	transition: transform 0.3s;
-}
-.source-card:hover {
-	transform: translateY(-5px);
-	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
-}
-.source-icon {
-	font-size: 2rem;
-	margin-bottom: 1rem;
-	color: #0d6efd;
-}
-.time-of-day-btn {
-	width: 100%;
-	margin-bottom: 10px;
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	padding: 15px 0;
-}
-.time-of-day-icon {
-	font-size: 1.5rem;
-	margin-bottom: 8px;
-}
-.time-label {
-	font-size: 0.9rem;
-}
-select.tall {
-	height: 160px;
-}
-.severity-item {
-	text-align: center;
-	padding: 10px;
-}
-.severity-scale {
-	display: flex;
-	justify-content: space-between;
-	margin: 20px 0;
-}
-.btn-check:checked + .btn.time-of-day-btn {
-	background-color: $info;
-	color: white;
-}
-.inspection-type-card {
-	cursor: pointer;
-	border: 1px solid #dee2e6;
-	padding: 20px;
-	border-radius: 5px;
-	height: 100%;
-	transition: all 0.3s;
-}
-.inspection-type-card.selected {
-	border-color: #0d6efd;
-	background-color: rgba(13, 110, 253, 0.05);
-}
-.inspection-type-card:hover {
-	border-color: #0d6efd;
-}
-.card-highlight {
-	border-left: 4px solid #0d6efd;
-	background-color: #f8f9fa;
-}
diff --git a/ts/components/HeaderDistrict.vue b/ts/components/HeaderDistrict.vue
index 99b02bca..4f52268b 100644
--- a/ts/components/HeaderDistrict.vue
+++ b/ts/components/HeaderDistrict.vue
@@ -8,33 +8,27 @@
 }
 </style>
 <template>
-	<template v-if="district">
-		<section class="py-5 bg-primary text-white">
-			<div class="container">
-				<div class="row justify-content-center">
-					<div class="col-lg-10">
-						<h2 class="text-center mb-4">Report a Mosquito Problem</h2>
-						<p class="lead text-center">
-							Submit a report to help reduce mosquito activity in your
-							neighborhood.
-						</p>
-						<p class="lead text-center">
-							Report Mosquitoes Online works with local mosquito control
-							agencies to receive public reports.
-						</p>
-						<p class="lead text-center">
-							For this area, mosquito control services are provided by
-						</p>
-						<h3 class="text-center">{{ district.name }}</h3>
-						<img class="district-logo" :src="district.url_logo" />
-					</div>
-				</div>
+	<header
+		class="navbar navbar-expand-lg navbar-dark text-light bg-primary shadow-sm"
+	>
+		<div class="container">
+			<div class="d-flex align-items-center">
+				<template v-if="district">
+					<a class="navbar-brand d-flex align-items-center" href="/">
+						<img
+							:src="district.url_logo"
+							style="height: 48px"
+							alt="District logo"
+						/>
+					</a>
+					<h1 class="mb-0 ms-3">{{ district.name }}</h1>
+				</template>
+				<template v-else>
+					<h1>Loading...</h1>
+				</template>
 			</div>
-		</section>
-	</template>
-	<template v-else>
-		<p>loading district...</p>
-	</template>
+		</div>
+	</header>
 </template>
 <script setup lang="ts">
 import type { District } from "@/rmo/type";
diff --git a/ts/rmo/content/Nuisance.vue b/ts/rmo/content/Nuisance.vue
index 23c28248..dd7961a2 100644
--- a/ts/rmo/content/Nuisance.vue
+++ b/ts/rmo/content/Nuisance.vue
@@ -1,4 +1,18 @@
 <style scoped>
+.district-logo {
+	max-height: 80px;
+	width: auto;
+}
+.form-section {
+	margin-bottom: 2.5rem;
+	padding-bottom: 2rem;
+	border-bottom: 1px solid #dee2e6;
+}
+.form-section:last-child {
+	border-bottom: none;
+	margin-bottom: 1rem;
+	padding-bottom: 0;
+}
 .map-container {
 	background-color: #e9ecef;
 	border-radius: 10px;
@@ -13,6 +27,85 @@
 	width: 100%;
 	height: 100%;
 }
+.section-heading {
+	margin-bottom: 1.5rem;
+	display: flex;
+	align-items: center;
+}
+.section-heading i {
+	margin-right: 10px;
+	font-size: 1.5rem;
+	color: #0d6efd;
+}
+.submit-container {
+	background-color: #f8f9fa;
+	padding: 20px;
+	border-radius: 5px;
+	margin-top: 2rem;
+}
+.source-card {
+	height: 100%;
+	transition: transform 0.3s;
+}
+.source-card:hover {
+	transform: translateY(-5px);
+	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
+}
+.source-icon {
+	font-size: 2rem;
+	margin-bottom: 1rem;
+	color: #0d6efd;
+}
+.time-of-day-btn {
+	width: 100%;
+	margin-bottom: 10px;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	padding: 15px 0;
+}
+.time-of-day-icon {
+	font-size: 1.5rem;
+	margin-bottom: 8px;
+}
+.time-label {
+	font-size: 0.9rem;
+}
+select.tall {
+	height: 160px;
+}
+.severity-item {
+	text-align: center;
+	padding: 10px;
+}
+.severity-scale {
+	display: flex;
+	justify-content: space-between;
+	margin: 20px 0;
+}
+.btn-check:checked + .btn.time-of-day-btn {
+	background-color: $info;
+	color: white;
+}
+.inspection-type-card {
+	cursor: pointer;
+	border: 1px solid #dee2e6;
+	padding: 20px;
+	border-radius: 5px;
+	height: 100%;
+	transition: all 0.3s;
+}
+.inspection-type-card.selected {
+	border-color: #0d6efd;
+	background-color: rgba(13, 110, 253, 0.05);
+}
+.inspection-type-card:hover {
+	border-color: #0d6efd;
+}
+.card-highlight {
+	border-left: 4px solid #0d6efd;
+	background-color: #f8f9fa;
+}
 </style>
 
 <template>
diff --git a/ts/rmo/view/district/Home.vue b/ts/rmo/view/district/Home.vue
index ad0fa0e3..99709285 100644
--- a/ts/rmo/view/district/Home.vue
+++ b/ts/rmo/view/district/Home.vue
@@ -10,8 +10,33 @@
 <template>
 	<Home :slug="slug">
 		<template #header>
-			<!-- Introduction Section -->
-			<HeaderDistrict :district="district" />
+			<template v-if="district">
+				<section class="py-5 bg-primary text-white">
+					<div class="container">
+						<div class="row justify-content-center">
+							<div class="col-lg-10">
+								<h2 class="text-center mb-4">Report a Mosquito Problem</h2>
+								<p class="lead text-center">
+									Submit a report to help reduce mosquito activity in your
+									neighborhood.
+								</p>
+								<p class="lead text-center">
+									Report Mosquitoes Online works with local mosquito control
+									agencies to receive public reports.
+								</p>
+								<p class="lead text-center">
+									For this area, mosquito control services are provided by
+								</p>
+								<h3 class="text-center">{{ district.name }}</h3>
+								<img class="district-logo" :src="district.url_logo" />
+							</div>
+						</div>
+					</div>
+				</section>
+			</template>
+			<template v-else>
+				<p>loading district...</p>
+			</template>
 		</template>
 	</Home>
 </template>