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.

This commit is contained in:
Ian Renton
2026-05-21 21:07:35 +01:00
parent c939a5c1a1
commit 4f56809da7
10 changed files with 71 additions and 41 deletions

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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