From 62761d459f9e39b9e57299a34efb3fe26c408ba3 Mon Sep 17 00:00:00 2001 From: Ian Renton Date: Fri, 3 Oct 2025 16:36:40 +0100 Subject: [PATCH] Fix table display on mobile #20, fix typo --- README.md | 2 +- views/webpage_about.tpl | 2 +- webassets/apidocs/openapi.yml | 2 +- webassets/css/style.css | 25 +++++++++++++++++++++++++ webassets/js/code.js | 35 +++++++++++++++++++++++++---------- 5 files changed, 53 insertions(+), 13 deletions(-) diff --git a/README.md b/README.md index 9ec7bb3..86f37a4 100644 --- a/README.md +++ b/README.md @@ -6,7 +6,7 @@ ![Screenshot](/images/screenshot.png) -While there are several other web-based interfaces to DX clusters, and sites that aggregate spots from various outfoor activity programmes for amateur radio, (S)pothole differentiates itself by supporting a large number of data sources, and by being "API first" rather than just providing a web front-end. This allows other software to be built on top of it. +While there are several other web-based interfaces to DX clusters, and sites that aggregate spots from various outdoor activity programmes for amateur radio, (S)pothole differentiates itself by supporting a large number of data sources, and by being "API first" rather than just providing a web front-end. This allows other software to be built on top of it. The API is deliberately well-defined with an OpenAPI specification and auto-generated API documentation. The API delivers spots in a consistent format regardless of the data source, freeing developers from needing to know how each individual data source presents its data. diff --git a/views/webpage_about.tpl b/views/webpage_about.tpl index 1fc33e4..741fc50 100644 --- a/views/webpage_about.tpl +++ b/views/webpage_about.tpl @@ -3,7 +3,7 @@

About (S)pothole

(S)pothole is a utility to aggregate "spots" from amateur radio DX clusters and xOTA spotting sites, and provide an open JSON API as well as a website to browse the data.

-

While there are several other web-based interfaces to DX clusters, and sites that aggregate spots from various outfoor activity programmes for amateur radio, (S)pothole differentiates itself by supporting a large number of data sources, and by being "API first" rather than just providing a web front-end. This allows other software to be built on top of it.

+

While there are several other web-based interfaces to DX clusters, and sites that aggregate spots from various outdoor activity programmes for amateur radio, (S)pothole differentiates itself by supporting a large number of data sources, and by being "API first" rather than just providing a web front-end. This allows other software to be built on top of it.

The API is deliberately well-defined with an OpenAPI specification and auto-generated API documentation. The API delivers spots in a consistent format regardless of the data source, freeing developers from needing to know how each individual data source presents its data.

(S)pothole itself is also open source, Public Domain licenced code that anyone can take and modify. The source code is here.

Supported data sources include DX Clusters, the Reverse Beacon Network (RBN), the APRS Internet Service (APRS-IS), POTA, SOTA, WWFF, GMA, WWBOTA, HEMA, and Parks 'n' Peaks.

diff --git a/webassets/apidocs/openapi.yml b/webassets/apidocs/openapi.yml index 594d41a..5cee53b 100644 --- a/webassets/apidocs/openapi.yml +++ b/webassets/apidocs/openapi.yml @@ -4,7 +4,7 @@ info: description: |- (S)pothole is a utility to aggregate "spots" from amateur radio DX clusters and xOTA spotting sites, and provide an open JSON API as well as a website to browse the data. - While there are other web-based interfaces to DX clusters, and sites that aggregate spots from various outfoor activity programmes for amateur radio, (S)pothole differentiates itself by supporting a large number of data sources, and by being "API first" rather than just providing a web front-end. This allows other software to be built on top of it. (S)pothole itself is also open source, Public Domain licenced code that anyone can take and modify. + While there are other web-based interfaces to DX clusters, and sites that aggregate spots from various outdoor activity programmes for amateur radio, (S)pothole differentiates itself by supporting a large number of data sources, and by being "API first" rather than just providing a web front-end. This allows other software to be built on top of it. (S)pothole itself is also open source, Public Domain licenced code that anyone can take and modify. contact: email: ian@ianrenton.com license: diff --git a/webassets/css/style.css b/webassets/css/style.css index 0ee3944..c492cf6 100644 --- a/webassets/css/style.css +++ b/webassets/css/style.css @@ -9,6 +9,14 @@ } } +/* Custom version of Bootstrap table colouring to colour 2 in every 4 rows, because of our second row per spot that +appears on mobile */ +.table-striped-custom > tbody > tr:nth-of-type(4n+3) > *, +.table-striped-custom > tbody > tr:nth-of-type(4n+4) > * { + --bs-table-color-type: var(--bs-table-striped-color); + --bs-table-bg-type: var(--bs-table-striped-bg); +} + td.nowrap { text-wrap: nowrap; } @@ -70,4 +78,21 @@ a.dx-link { color: var(--bs-emphasis-color); text-decoration: none; font-weight: bold; +} + +tr.table-faded td a.dx-link { + color: lightgray; + font-weight: normal; +} + +@media (max-width: 991.99px) { + .hideonmobile { + display: none !important; + } +} + +@media (min-width: 992px) { + .hidenotonmobile { + display: none !important; + } } \ No newline at end of file diff --git a/webassets/js/code.js b/webassets/js/code.js index 1902f1b..9451b09 100644 --- a/webassets/js/code.js +++ b/webassets/js/code.js @@ -59,8 +59,15 @@ function allFilterOptionsSelected(parameter) { // Update the spots table function updateTable() { // Populate table with headers - let table = $('').append(''); - ["UTC", "DX", "Frequency", "Mode", "Comment", "Source", "Ref.", "DE"].forEach(header => table.find('thead tr').append(``)); + let table = $('
${header}
').append(''); + table.find('thead tr').append(``); + table.find('thead tr').append(``); + table.find('thead tr').append(``); + table.find('thead tr').append(``); + table.find('thead tr').append(``); + table.find('thead tr').append(``); + table.find('thead tr').append(``); + table.find('thead tr').append(``); if (spots.length == 0) { table.find('tbody').append(''); @@ -70,7 +77,7 @@ function updateTable() { // Create row let $tr = $(''); - // Show in red if QRT + // Show faded out if QRT if (s["qrt"] == true) { $tr.addClass("table-faded"); } @@ -90,7 +97,7 @@ function updateTable() { var khz = Math.floor((s["freq"] - (mhz * 1000000.0)) / 1000.0); var hz = Math.floor(s["freq"] - (mhz * 1000000.0) - (khz * 1000.0)); var hz_string = (hz > 0) ? hz.toFixed(0) : ""; - var freq_string = `${mhz.toFixed(0)}${khz.toFixed(0).padStart(3, '0')}${hz_string}` + var freq_string = `${mhz.toFixed(0)}${khz.toFixed(0).padStart(3, '0')}${hz_string}` // Format the mode mode_string = s["mode"]; @@ -98,7 +105,7 @@ function updateTable() { mode_string = "???" } if (s["mode_source"] == "BANDPLAN") { - mode_string = mode_string + "" + mode_string = mode_string + "" } // Format comment @@ -132,14 +139,22 @@ function updateTable() { // Populate the row $tr.append(``); - $tr.append(``); + $tr.append(``); $tr.append(``); $tr.append(``); - $tr.append(``); - $tr.append(``); - $tr.append(``); - $tr.append(``); + $tr.append(``); + $tr.append(``); + $tr.append(``); + $tr.append(``); table.find('tbody').append($tr); + + // Second row for mobile view only, containing source, ref & comment + $tr2 = $(""); + if (s["qrt"] == true) { + $tr2.addClass("table-faded"); + } + $tr2.append(``); + table.find('tbody').append($tr2); }); // Update DOM
UTCDXFrequencyModeCommentSourceRef.DE
No spots match your filters.
${time_formatted}${s["dx_flag"]}${s["dx_call"]}${s["dx_flag"]}${s["dx_call"]}■${freq_string}${mode_string}${commentText} ${s["source"]}${sig_refs}${de_flag}${s["de_call"]}${commentText} ${s["source"]}${sig_refs}${de_flag}${s["de_call"]}
${sig_refs} ${commentText}