Gleipnir/nidus-sync
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Add nuisance style, fix header on non-home district pages

Browse source
This commit is contained in:
Eli Ribble 2026-04-03 19:07:20 +00:00
parent b6037d7525
commit 6203e3da75
No known key found for this signature in database
5 changed files with 140 additions and 122 deletions
Download patch file Download diff file Expand all files Collapse all files

93
ts/rmo/content/Nuisance.vue
View file

@ -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>

29
ts/rmo/view/district/Home.vue
View file

@ -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>