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

Port root RMO with style to main page

Browse source
This commit is contained in:
Eli Ribble 2026-04-03 15:58:50 +00:00
parent 4d718f9a12
commit 4a9d6e0db6
No known key found for this signature in database
4 changed files with 142 additions and 105 deletions
Download patch file Download diff file Expand all files Collapse all files

104
html/template/rmo/root.html
View file

@ -2,110 +2,6 @@
{{ define "title" }}Main{{ end }}
{{ define "extraheader" }}
<style>
.bi-large {
height: 48px;
width: 48px;
}
</style>
{{ end }}
{{ define "content" }}
<!-- Main Content -->
<main>
{{ if eq .District nil }}
<!-- Introduction Section -->
<section class="py-2 bg-primary text-white">
<div class="banner-container d-flex justify-content-center">
<img class="banner" src="/static/img/rmo/banner.jpg" />
</div>
</section>
{{ else }}
<!-- Introduction Section -->
<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>
{{ if not (eq .District nil) }}
<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.URLLogo }}" />
{{ end }}
</div>
</div>
</div>
</section>
{{ end }}
<!-- Services Section -->
<section class="py-5">
<div class="container">
<h3 class="text-center mb-4">How Can We Help You Today?</h3>
<div class="row g-4">
<div class="col-md-4">
<div class="card service-card h-100">
<div class="card-body text-center">
<div class="mb-3">
<i class="bi bi-large bi-mosquito-color"></i>
</div>
<h4 class="card-title">Report Mosquito Nuisance</h4>
<p class="card-text">
Report areas with high adult mosquito activity causing
discomfort or concern.
</p>
<a href="{{ .URL.Nuisance }}" class="btn btn-primary mt-3"
>Report Problem</a
>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card service-card h-100">
<div class="card-body text-center">
<div class="mb-3">
<i class="bi bi-large bi-pond-color"></i>
</div>
<h4 class="card-title">Report Standing Water</h4>
<p class="card-text">
Report any water that has been sitting for several days, where
mosquitoes can live.
</p>
<a href="{{ .URL.Water }}" class="btn btn-primary mt-3"
>Report Source</a
>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card service-card h-100">
<div class="card-body text-center">
<div class="mb-3">
<i class="bi bi-large bi-check-report-color"></i>
</div>
<h4 class="card-title">Follow-up or Check Status</h4>
<p class="card-text">
Check on a previous request or view current mosquito activity
in your area.
</p>
<a href="{{ .URL.Status }}" class="btn btn-primary mt-3"
>Get Status</a
>
</div>
</div>
</div>
</div>
</div>
</section>
</main>
{{ end }}

113
ts/rmo/view/Home.vue
View file

@ -1,3 +1,114 @@
<style scoped>
.bi-large {
height: 48px;
width: 48px;
}
</style>
<template>
<p>hey there!</p>
<!-- Main Content -->
<main>
<template v-if="district">
<!-- Introduction Section -->
<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>
<!-- Introduction Section -->
<section class="py-2 bg-primary text-white">
<div class="banner-container d-flex justify-content-center">
<img class="banner" src="/static/img/rmo/banner.jpg" />
</div>
</section>
</template>
<!-- Services Section -->
<section class="py-5">
<div class="container">
<h3 class="text-center mb-4">How Can We Help You Today?</h3>
<div class="row g-4">
<div class="col-md-4">
<div class="card service-card h-100">
<div class="card-body text-center">
<div class="mb-3">
<i class="bi bi-large bi-mosquito-color"></i>
</div>
<h4 class="card-title">Report Mosquito Nuisance</h4>
<p class="card-text">
Report areas with high adult mosquito activity causing
discomfort or concern.
</p>
<RouteLink to="/nuisance" class="btn btn-primary mt-3"
>Report Problem</RouteLink
>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card service-card h-100">
<div class="card-body text-center">
<div class="mb-3">
<i class="bi bi-large bi-pond-color"></i>
</div>
<h4 class="card-title">Report Standing Water</h4>
<p class="card-text">
Report any water that has been sitting for several days, where
mosquitoes can live.
</p>
<RouteLink to="/water" class="btn btn-primary mt-3"
>Report Source</RouteLink
>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card service-card h-100">
<div class="card-body text-center">
<div class="mb-3">
<i class="bi bi-large bi-check-report-color"></i>
</div>
<h4 class="card-title">Follow-up or Check Status</h4>
<p class="card-text">
Check on a previous request or view current mosquito activity
in your area.
</p>
<RouteLink to="/status" class="btn btn-primary mt-3"
>Get Status</RouteLink
>
</div>
</div>
</div>
</div>
</div>
</section>
</main>
</template>
<script setup lang="ts">
import { ref } from "vue";
interface District {
name: string;
url_logo: string;
}
const district = ref<District | null>(null);
</script>

29
ts/style/rmo.scss Normal file
View file

@ -0,0 +1,29 @@
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
// Make custom SVG icons about the same size as other icons
i.bi svg {
height: 18px;
width: 18px;
}
@import "bootstrap/scss/functions";
// Import Bootstrap's variables (this merges with your custom variables)
@import "bootstrap/scss/variables";
// Import Bootstrap's mixins
@import "bootstrap/scss/mixins";
// Import all of Bootstrap (or pick specific components)
@import "bootstrap/scss/bootstrap";
// Import Bootstrap Icons
//@import "bootstrap-icons/font/bootstrap-icons.scss";
@import "./dashboard.scss";
@import "./sidebar.scss";

1
vite/rmo/main.ts
View file

@ -2,6 +2,7 @@ import { createApp } from "vue";
import { createHead } from "@vueuse/head";
import router from "@/rmo/router";
import App from "@/rmo/App.vue";
import "@/style/rmo.scss";
const app = createApp(App);
const head = createHead();