From 4f56809da7fae9ef41b534a1951ca7f09f63b27f Mon Sep 17 00:00:00 2001
From: Ian Renton <ian@ianrenton.com>
Date: Thu, 21 May 2026 21:07:35 +0100
Subject: [PATCH] Tidy up stray style="" elements that were used in templates,
 either use a Bootstrap class or create a new util class in style.css as
 necessary.

---
 templates/about.html      |  2 +-
 templates/add_spot.html   | 18 +++++++++---------
 templates/alerts.html     |  4 ++--
 templates/bands.html      |  6 +++---
 templates/base.html       | 10 +++++-----
 templates/conditions.html | 24 ++++++++++++------------
 templates/map.html        |  8 ++++----
 templates/spots.html      |  6 +++---
 templates/status.html     |  4 ++--
 webassets/css/style.css   | 30 ++++++++++++++++++++++++++++++
 10 files changed, 71 insertions(+), 41 deletions(-)

diff --git a/templates/about.html b/templates/about.html
index 1fbbd6e..ae9d473 100644
--- a/templates/about.html
+++ b/templates/about.html
@@ -69,7 +69,7 @@
     <p>This software is dedicated to the memory of Tom G1PJB, SK, a friend and colleague who sadly passed away around the time I started writing it in Autumn 2025. I was looking forward to showing it to you when it was done.</p>
 </div>
 
-<script src="/js/common.js?v=1779393248"></script>
+<script src="/js/common.js?v=1779394055"></script>
 <script>$(document).ready(function() { $("#nav-link-about").addClass("active"); }); <!-- highlight active page in nav --></script>
 
 {% end %}
\ No newline at end of file
diff --git a/templates/add_spot.html b/templates/add_spot.html
index 65b7129..6adfa09 100644
--- a/templates/add_spot.html
+++ b/templates/add_spot.html
@@ -21,11 +21,11 @@
             <form class="row g-3">
                 <div class="col-auto">
                     <label for="dx-call" class="form-label">DX Call *</label>
-                    <input type="text" class="form-control" id="dx-call" placeholder="N0CALL" style="max-width: 8em;">
+                    <input type="text" class="form-control input-narrow" id="dx-call" placeholder="N0CALL">
                 </div>
                 <div class="col-auto">
                     <label for="freq" class="form-label">Frequency (kHz) *</label>
-                    <input type="text" class="form-control" id="freq" placeholder="e.g. 14100" style="max-width: 8em;">
+                    <input type="text" class="form-control input-narrow" id="freq" placeholder="e.g. 14100">
                 </div>
                 <div class="col-auto">
                     <label for="mode" class="form-label">Mode</label>
@@ -41,22 +41,22 @@
                 </div>
                 <div class="col-auto">
                     <label for="sig-ref" class="form-label">SIG Reference</label>
-                    <input type="text" class="form-control" id="sig-ref" placeholder="e.g. GB-0001" style="max-width: 8em;">
+                    <input type="text" class="form-control input-narrow" id="sig-ref" placeholder="e.g. GB-0001">
                 </div>
                 <div class="col-auto">
                     <label for="dx-grid" class="form-label">DX Grid</label>
-                    <input type="text" class="form-control" id="dx-grid" placeholder="e.g. AA00aa" style="max-width: 8em;">
+                    <input type="text" class="form-control input-narrow" id="dx-grid" placeholder="e.g. AA00aa">
                 </div>
                 <div class="col-auto">
                     <label for="comment" class="form-label">Comment</label>
-                    <input type="text" class="form-control" id="comment" placeholder="e.g. 59 TNX QSO 73" style="max-width: 12em;">
+                    <input type="text" class="form-control input-medium" id="comment" placeholder="e.g. 59 TNX QSO 73">
                 </div>
                 <div class="col-auto">
                     <label for="de-call" class="form-label">Your Call *</label>
-                    <input type="text" class="form-control storeable-text" id="de-call" placeholder="N0CALL" style="max-width: 8em;">
+                    <input type="text" class="form-control storeable-text input-narrow" id="de-call" placeholder="N0CALL">
                 </div>
                 <div class="col-auto">
-                    <button type="button" class="btn btn-primary" style="margin-top: 2em;" onclick="addSpot();">Spot</button>
+                    <button type="button" class="btn btn-primary mt-2em" onclick="addSpot();">Spot</button>
                 </div>
             </form>
 
@@ -69,8 +69,8 @@
 
 </div>
 
-<script src="/js/common.js?v=1779393248"></script>
-<script src="/js/add-spot.js?v=1779393248"></script>
+<script src="/js/common.js?v=1779394055"></script>
+<script src="/js/add-spot.js?v=1779394055"></script>
 <script>$(document).ready(function() { $("#nav-link-add-spot").addClass("active"); }); <!-- highlight active page in nav --></script>
 
 {% end %}
\ No newline at end of file
diff --git a/templates/alerts.html b/templates/alerts.html
index 0f05d2d..e919d3a 100644
--- a/templates/alerts.html
+++ b/templates/alerts.html
@@ -70,8 +70,8 @@
 
 </div>
 
-<script src="/js/common.js?v=1779393248"></script>
-<script src="/js/alerts.js?v=1779393248"></script>
+<script src="/js/common.js?v=1779394055"></script>
+<script src="/js/alerts.js?v=1779394055"></script>
 <script>$(document).ready(function() { $("#nav-link-alerts").addClass("active"); }); <!-- highlight active page in nav --></script>
 
 {% end %}
\ No newline at end of file
diff --git a/templates/bands.html b/templates/bands.html
index 03b49e6..b2f0d18 100644
--- a/templates/bands.html
+++ b/templates/bands.html
@@ -76,9 +76,9 @@
 <script>
     let spotProvidersEnabledByDefault = {% raw json_encode(web_ui_options["spot-providers-enabled-by-default"]) %};
 </script>
-<script src="/js/common.js?v=1779393248"></script>
-<script src="/js/spotsbandsandmap.js?v=1779393248"></script>
-<script src="/js/bands.js?v=1779393248"></script>
+<script src="/js/common.js?v=1779394055"></script>
+<script src="/js/spotsbandsandmap.js?v=1779394055"></script>
+<script src="/js/bands.js?v=1779394055"></script>
 <script>$(document).ready(function() { $("#nav-link-bands").addClass("active"); }); <!-- highlight active page in nav --></script>
 
 {% end %}
\ No newline at end of file
diff --git a/templates/base.html b/templates/base.html
index a07e51d..fe2ea00 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -24,7 +24,7 @@
 
     <title>Spothole</title>
 
-    <link rel="stylesheet" href="/css/style.css?v=1779393248" type="text/css">
+    <link rel="stylesheet" href="/css/style.css?v=1779394055" type="text/css">
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet"
           integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
     <link href="/fa/css/fontawesome.min.css" rel="stylesheet" />
@@ -52,9 +52,9 @@
             integrity="sha384-L1eE4eD41kpBIWe2I0eHy+GnEUC4RIpcvibVW2JCminuPlTl+2Bc528iPdVMg5Dn"
             crossorigin="anonymous"></script>
 
-    <script src="https://misc.ianrenton.com/jsutils/utils.js?v=1779393248"></script>
-    <script src="https://misc.ianrenton.com/jsutils/ui-ham.js?v=1779393248"></script>
-    <script src="https://misc.ianrenton.com/jsutils/geo.js?v=1779393248"></script>
+    <script src="https://misc.ianrenton.com/jsutils/utils.js?v=1779394055"></script>
+    <script src="https://misc.ianrenton.com/jsutils/ui-ham.js?v=1779394055"></script>
+    <script src="https://misc.ianrenton.com/jsutils/geo.js?v=1779394055"></script>
 
 </head>
 <body>
@@ -96,7 +96,7 @@
     <div id="footer" class="hideonmobile hideonmap">
         <footer class="d-flex flex-wrap justify-content-between align-items-center py-3 my-4 border-top">
             <p class="col-md-4 mb-0 text-body-secondary">Made with love by <a href="https://ianrenton.com" class="text-body-secondary">Ian, MØTRT</a> and other contributors.</p>
-            <p class="col-md-4 mb-0 justify-content-center text-body-secondary" style="text-align: center;">Spothole v{{software_version}}</p>
+            <p class="col-md-4 mb-0 justify-content-center text-body-secondary text-center">Spothole v{{software_version}}</p>
             <ul class="nav col-md-4 justify-content-end">
                 <li class="nav-item">
                     <a href="/about#faq" class="nav-link px-3 text-body-secondary">FAQ</a>
diff --git a/templates/conditions.html b/templates/conditions.html
index f8309fa..5a39b6a 100644
--- a/templates/conditions.html
+++ b/templates/conditions.html
@@ -181,13 +181,13 @@
     <div class="card-body">
         <div class="mb-3">
             <label for="ionosonde-station" class="form-label">Ionosonde station:</label>
-            <select id="ionosonde-station" class="form-select storeable-select d-inline-block ms-2"
-                    style="width: auto;" oninput="ionosondeStationChanged();">
+            <select id="ionosonde-station" class="form-select storeable-select d-inline-block ms-2 w-auto"
+                    oninput="ionosondeStationChanged();">
             </select>
         </div>
         <div id="ionosonde-latest" class="mb-3">
-            <div id="ionosonde-no-data" class="alert alert-warning mt-2 mb-0 py-2" style="display:none;">No data available for this station.</div>
-            <div id="ionosonde-data-rows" style="display:none;">
+            <div id="ionosonde-no-data" class="alert alert-warning mt-2 mb-0 py-2 js-hidden">No data available for this station.</div>
+            <div id="ionosonde-data-rows" class="js-hidden">
                 <div class="row align-items-center me-0">
                     <div class="col-12 py-2 text-muted">Latest values as of <span id="ionosonde-latest-time"></span></div>
                 </div>
@@ -196,11 +196,11 @@
                     <div class="col-12 col-md-4 py-2">foF2: <strong id="ionosonde-latest-fof2"></strong></div>
                     <div class="col-12 col-md-4 py-2">MUF (3000 km): <strong id="ionosonde-latest-muf"></strong></div>
                 </div>
-                <div id="ionosonde-stale-warning" class="alert alert-warning mt-2 mb-0 py-2" style="display:none;">Data is more than 12 hours old!</div>
+                <div id="ionosonde-stale-warning" class="alert alert-warning mt-2 mb-0 py-2 js-hidden">Data is more than 12 hours old!</div>
             </div>
         </div>
-        <div id="ionosonde-band-state" class="mb-3" style="display:none;">
-            <table class="table table-sm table-bordered mb-0 d-none d-md-table" style="table-layout: fixed;">
+        <div id="ionosonde-band-state" class="mb-3 js-hidden">
+            <table class="table table-sm table-bordered mb-0 d-none d-md-table table-fixed">
                 <thead><tr id="ionosonde-band-state-head"></tr></thead>
                 <tbody><tr id="ionosonde-band-state-row"></tr></tbody>
             </table>
@@ -221,8 +221,8 @@
     <div class="card-body">
         <div class="mb-3">
             <label for="dxstats-de-continent" class="form-label">Your continent:</label>
-            <select id="dxstats-de-continent" class="form-select storeable-select d-inline-block ms-2"
-                    style="width: auto;" oninput="dxStatsContientChanged();">
+            <select id="dxstats-de-continent" class="form-select storeable-select d-inline-block ms-2 w-auto"
+                    oninput="dxStatsContientChanged();">
                 <option value="EU">Europe</option>
                 <option value="NA">North America</option>
                 <option value="SA">South America</option>
@@ -233,7 +233,7 @@
             </select>
         </div>
         <div class="table-responsive">
-            <table class="table table-sm table-bordered mb-0" style="table-layout: fixed;">
+            <table class="table table-sm table-bordered mb-0 table-fixed">
                 <thead>
                 <tr>
                     <th></th>
@@ -271,8 +271,8 @@
 </div>
 
 <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.9/dist/chart.umd.min.js"></script>
-<script src="/js/common.js?v=1779393248"></script>
-<script src="/js/conditions.js?v=1779393248"></script>
+<script src="/js/common.js?v=1779394055"></script>
+<script src="/js/conditions.js?v=1779394055"></script>
 <script>$(document).ready(function () {
     $("#nav-link-conditions").addClass("active");
 }); <!-- highlight active page in nav --></script>
diff --git a/templates/map.html b/templates/map.html
index b4bf605..8b356f3 100644
--- a/templates/map.html
+++ b/templates/map.html
@@ -2,7 +2,7 @@
 {% block content %}
 
 <div id="map">
-    <div id="settingsButtonRowMap" class="mt-3 px-3" style="z-index: 1002; position: relative;">
+    <div id="settingsButtonRowMap" class="mt-3 px-3">
         <div class="row mb-3">
             <div class="col-auto me-auto pt-3"></div>
             <div class="col-auto">
@@ -94,9 +94,9 @@
 <script>
     let spotProvidersEnabledByDefault = {% raw json_encode(web_ui_options["spot-providers-enabled-by-default"]) %};
 </script>
-<script src="/js/common.js?v=1779393248"></script>
-<script src="/js/spotsbandsandmap.js?v=1779393248"></script>
-<script src="/js/map.js?v=1779393248"></script>
+<script src="/js/common.js?v=1779394055"></script>
+<script src="/js/spotsbandsandmap.js?v=1779394055"></script>
+<script src="/js/map.js?v=1779394055"></script>
 <script>$(document).ready(function() { $("#nav-link-map").addClass("active"); }); <!-- highlight active page in nav --></script>
 
 {% end %}
\ No newline at end of file
diff --git a/templates/spots.html b/templates/spots.html
index 7659b5a..108acf7 100644
--- a/templates/spots.html
+++ b/templates/spots.html
@@ -104,9 +104,9 @@
 <script>
     let spotProvidersEnabledByDefault = {% raw json_encode(web_ui_options["spot-providers-enabled-by-default"]) %};
 </script>
-<script src="/js/common.js?v=1779393248"></script>
-<script src="/js/spotsbandsandmap.js?v=1779393248"></script>
-<script src="/js/spots.js?v=1779393248"></script>
+<script src="/js/common.js?v=1779394055"></script>
+<script src="/js/spotsbandsandmap.js?v=1779394055"></script>
+<script src="/js/spots.js?v=1779394055"></script>
 <script>$(document).ready(function() { $("#nav-link-spots").addClass("active"); }); <!-- highlight active page in nav --></script>
 
 {% end %}
\ No newline at end of file
diff --git a/templates/status.html b/templates/status.html
index a57af30..5c55e12 100644
--- a/templates/status.html
+++ b/templates/status.html
@@ -59,8 +59,8 @@
     </div>
 </div>
 
-<script src="/js/common.js?v=1779393248"></script>
-<script src="/js/status.js?v=1779393248"></script>
+<script src="/js/common.js?v=1779394055"></script>
+<script src="/js/status.js?v=1779394055"></script>
 <script>
     $(document).ready(function() { $("#nav-link-status").addClass("active"); }); <!-- highlight active page in nav -->
 </script>
diff --git a/webassets/css/style.css b/webassets/css/style.css
index b1cf24f..98e53e0 100644
--- a/webassets/css/style.css
+++ b/webassets/css/style.css
@@ -211,6 +211,11 @@ div#map {
     font-size: 16px;
 }
 
+#settingsButtonRowMap {
+    position: relative;
+    z-index: 1002;
+}
+
 .leaflet-container {
     font-family: var(--bs-body-font-family) !important;
 }
@@ -323,6 +328,31 @@ div.band-spot:hover span.band-spot-info {
 }
 
 
+/* UTILITY CLASSES */
+
+/* For elements initially hidden and shown/hidden by JS. Unlike Bootstrap's d-none this has no !important,
+   so jQuery's .show() / .hide() / .toggle() can override it with an inline style as expected. */
+.js-hidden {
+    display: none;
+}
+
+.table-fixed {
+    table-layout: fixed;
+}
+
+.input-narrow {
+    max-width: 8em;
+}
+.input-medium {
+    max-width: 12em;
+}
+
+/* Pushes a submit button down to align with labelled inputs in a flex row */
+.mt-2em {
+    margin-top: 2em;
+}
+
+
 /* GENERAL MOBILE SUPPORT */
 
 @media (max-width: 991.99px) {