Add a quick report link which shows at the top on mobile

This commit is contained in:
Eli Ribble 2025-11-10 14:43:46 +00:00
parent 31ca1a2f45
commit d19c3fe265
No known key found for this signature in database

View file

@ -14,6 +14,13 @@
max-height: 80px; max-height: 80px;
width: auto; width: auto;
} }
.quick-report-mobile {
background-color: #ff9800;
}
.quick-report-desktop {
background-color: #ffefd5;
border-left: 4px solid #ff9800;
}
{{end}} {{end}}
{{define "content"}} {{define "content"}}
<!-- Header --> <!-- Header -->
@ -48,6 +55,19 @@
</div> </div>
</section> </section>
<!-- Quick Report for Mobile - Only visible on small screens -->
<section class="py-3 quick-report-mobile d-md-none">
<div class="container">
<div class="row">
<div class="col-12 text-center">
<h4 class="mb-2">On the go?</h4>
<a href="/service-request-quick" class="btn btn-dark btn-lg">Make a Quick Report</a>
<p class="mb-0 mt-2"><small>Report mosquito issues in under 60 seconds</small></p>
</div>
</div>
</div>
</section>
<!-- Services Section --> <!-- Services Section -->
<section class="py-5"> <section class="py-5">
<div class="container"> <div class="container">
@ -101,6 +121,25 @@
</div> </div>
</div> </div>
</div> </div>
<!-- Quick Report for Desktop - Only visible on medium screens and up -->
<div class="row mt-4 d-none d-md-block">
<div class="col-12">
<div class="card quick-report-desktop">
<div class="card-body py-3">
<div class="row align-items-center">
<div class="col-md-8">
<h5 class="mb-1">Need to make a quick report?</h5>
<p class="mb-0">Use our streamlined form to report mosquito issues in under 60 seconds</p>
</div>
<div class="col-md-4 text-md-end mt-3 mt-md-0">
<a href="/service-request-quick" class="btn btn-warning">Quick Report</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div> </div>
</section> </section>
</main> </main>
@ -118,4 +157,5 @@
</div> </div>
</div> </div>
</footer> </footer>
{{end}} {{end}}