w1cdn/spothole
1
0
Fork 0
mirror of https://git.ianrenton.com/ian/spothole.git synced 2026-02-04 09:14:30 +00:00
Code Issues 13 Packages Projects Releases Wiki Activity

Fix a visual bug where buttons could become two lines high on narrrow screens

Browse Source
This commit is contained in:
Ian Renton
2026-01-22 20:26:31 +00:00
parent b62ef6a9a0
commit edb8dd5e0e
5 changed files with 15 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
templates/alerts.html
View File

@@ -8,8 +8,8 @@
</div> </div>
<div class="col-auto"> <div class="col-auto">
<p class="d-inline-flex gap-1"> <p class="d-inline-flex gap-1">
<button id="filters-button" type="button" class="btn btn-outline-primary" data-bs-toggle="button" onclick="toggleFiltersPanel();"><i class="fa-solid fa-filter"></i> Filters</button> <button id="filters-button" type="button" class="btn btn-outline-primary" data-bs-toggle="button" onclick="toggleFiltersPanel();"><i class="fa-solid fa-filter"></i>&nbsp;Filters</button>
<button id="display-button" type="button" class="btn btn-outline-primary" data-bs-toggle="button" onclick="toggleDisplayPanel();"><i class="fa-solid fa-desktop"></i> Display</button> <button id="display-button" type="button" class="btn btn-outline-primary" data-bs-toggle="button" onclick="toggleDisplayPanel();"><i class="fa-solid fa-desktop"></i>&nbsp;Display</button>
</p> </p>
</div> </div>
</div> </div>

4
templates/bands.html
View File

@@ -8,8 +8,8 @@
</div> </div>
<div class="col-auto"> <div class="col-auto">
<p class="d-inline-flex gap-1"> <p class="d-inline-flex gap-1">
<button id="filters-button" type="button" class="btn btn-outline-primary" data-bs-toggle="button" onclick="toggleFiltersPanel();"><i class="fa-solid fa-filter"></i> Filters</button> <button id="filters-button" type="button" class="btn btn-outline-primary" data-bs-toggle="button" onclick="toggleFiltersPanel();"><i class="fa-solid fa-filter"></i>&nbsp;Filters</button>
<button id="display-button" type="button" class="btn btn-outline-primary" data-bs-toggle="button" onclick="toggleDisplayPanel();"><i class="fa-solid fa-desktop"></i> Display</button> <button id="display-button" type="button" class="btn btn-outline-primary" data-bs-toggle="button" onclick="toggleDisplayPanel();"><i class="fa-solid fa-desktop"></i>&nbsp;Display</button>
</p> </p>
</div> </div>
</div> </div>

4
templates/map.html
View File

@@ -7,8 +7,8 @@
<div class="col-auto me-auto pt-3"></div> <div class="col-auto me-auto pt-3"></div>
<div class="col-auto"> <div class="col-auto">
<p class="d-inline-flex gap-1"> <p class="d-inline-flex gap-1">
<button id="filters-button" type="button" class="btn btn-outline-primary" data-bs-toggle="button" onclick="toggleFiltersPanel();"><i class="fa-solid fa-filter"></i> Filters</button> <button id="filters-button" type="button" class="btn btn-outline-primary" data-bs-toggle="button" onclick="toggleFiltersPanel();"><i class="fa-solid fa-filter"></i>&nbsp;Filters</button>
<button id="display-button" type="button" class="btn btn-outline-primary" data-bs-toggle="button" onclick="toggleDisplayPanel();"><i class="fa-solid fa-desktop"></i> Display</button> <button id="display-button" type="button" class="btn btn-outline-primary" data-bs-toggle="button" onclick="toggleDisplayPanel();"><i class="fa-solid fa-desktop"></i>&nbsp;Display</button>
</p> </p>
</div> </div>
</div> </div>

17
templates/spots.html
View File

@@ -10,24 +10,25 @@
<div class="mt-3"> <div class="mt-3">
<div id="settingsButtonRow" class="row"> <div id="settingsButtonRow" class="row">
<div class="col-lg-6 me-auto pt-3 hideonmobile"> <div class="col-4">
<p id="timing-container">Loading...</p>
</div>
<div class="col-lg-6 text-end">
<p class="d-inline-flex gap-1"> <p class="d-inline-flex gap-1">
<span class="btn-group" role="group"> <span class="btn-group" role="group">
<input type="radio" class="btn-check" name="runPause" id="runButton" autocomplete="off" checked> <input type="radio" class="btn-check" name="runPause" id="runButton" autocomplete="off" checked>
<label class="btn btn-outline-primary" for="runButton"><i class="fa-solid fa-play"></i><span class="hideonmobile"> Run</span></label> <label class="btn btn-outline-primary" for="runButton"><i class="fa-solid fa-play"></i><span class="hideonmobile">&nbsp;Run</span></label>
<input type="radio" class="btn-check" name="runPause" id="pauseButton" autocomplete="off"> <input type="radio" class="btn-check" name="runPause" id="pauseButton" autocomplete="off">
<label class="btn btn-outline-primary" for="pauseButton"><i class="fa-solid fa-pause"></i><span class="hideonmobile"> Pause</span></label> <label class="btn btn-outline-primary" for="pauseButton"><i class="fa-solid fa-pause"></i><span class="hideonmobile">&nbsp;Pause</span></label>
</span> </span>
</p>
</div>
<div class="col-8 text-end">
<p class="d-inline-flex gap-1">
<span style="position: relative;"> <span style="position: relative;">
<i id="searchicon" class="fa-solid fa-magnifying-glass"></i> <i id="searchicon" class="fa-solid fa-magnifying-glass"></i>
<input id="search" type="search" class="form-control" oninput="filtersUpdated();" placeholder="Search"> <input id="search" type="search" class="form-control" oninput="filtersUpdated();" placeholder="Search">
</span> </span>
<button id="filters-button" type="button" class="btn btn-outline-primary" data-bs-toggle="button" onclick="toggleFiltersPanel();"><i class="fa-solid fa-filter"></i><span class="hideonmobile"> Filters</span></button> <button id="filters-button" type="button" class="btn btn-outline-primary" data-bs-toggle="button" onclick="toggleFiltersPanel();"><i class="fa-solid fa-filter"></i><span class="hideonmobile">&nbsp;Filters</span></button>
<button id="display-button" type="button" class="btn btn-outline-primary" data-bs-toggle="button" onclick="toggleDisplayPanel();"><i class="fa-solid fa-desktop"></i><span class="hideonmobile"> Display</span></button> <button id="display-button" type="button" class="btn btn-outline-primary" data-bs-toggle="button" onclick="toggleDisplayPanel();"><i class="fa-solid fa-desktop"></i><span class="hideonmobile">&nbsp;Display</span></button>
</p> </p>
</div> </div>
</div> </div>

14
webassets/js/spots.js
View File

@@ -13,9 +13,6 @@ function loadSpots() {
// Make the new query // Make the new query
$.getJSON('/api/v1/spots' + buildQueryString(), function(jsonData) { $.getJSON('/api/v1/spots' + buildQueryString(), function(jsonData) {
// Store last updated time
lastUpdateTime = moment.utc();
updateTimingDisplayRunPause();
// Store data // Store data
spots = jsonData; spots = jsonData;
// Update table // Update table
@@ -37,9 +34,6 @@ function startSSEConnection() {
evtSource = new EventSource('/api/v1/spots/stream' + buildQueryString()); evtSource = new EventSource('/api/v1/spots/stream' + buildQueryString());
evtSource.onmessage = function(event) { evtSource.onmessage = function(event) {
// Store last updated time
lastUpdateTime = moment.utc();
updateTimingDisplayRunPause();
// Get the new spot // Get the new spot
newSpot = JSON.parse(event.data); newSpot = JSON.parse(event.data);
// Awful fudge to ensure new incoming spots at the top of the list don't have timestamps that make them look // Awful fudge to ensure new incoming spots at the top of the list don't have timestamps that make them look
@@ -78,12 +72,6 @@ function startSSEConnection() {
}; };
} }
// Update the special timing display for the live spots page, which varies depending on run/pause selection.
function updateTimingDisplayRunPause() {
let run = $('#runButton:checked').val();
$("#timing-container").html((run ? "Connected to server. Last update at " : "Paused at ") + lastUpdateTime.format('HH:mm') + " UTC.");
}
// Build a query string for the API, based on the filters that the user has selected. // Build a query string for the API, based on the filters that the user has selected.
function buildQueryString() { function buildQueryString() {
var str = "?"; var str = "?";
@@ -515,13 +503,11 @@ $(document).ready(function() {
// Need to start the SSE connection but also do a full re-query to catch up anything that we missed, so we // Need to start the SSE connection but also do a full re-query to catch up anything that we missed, so we
// might as well just call loadSpots again which will trigger it all // might as well just call loadSpots again which will trigger it all
loadSpots(); loadSpots();
updateTimingDisplayRunPause();
}); });
$("#pauseButton").change(function() { $("#pauseButton").change(function() {
// If we are pausing and have an open SSE connection, stop it // If we are pausing and have an open SSE connection, stop it
if (evtSource != null) { if (evtSource != null) {
evtSource.close(); evtSource.close();
} }
updateTimingDisplayRunPause();
}); });
}); });