w1cdn/spothole
1
0
Fork 0
mirror of https://git.ianrenton.com/ian/spothole.git synced 2025-10-27 00:39:26 +00:00
Code Issues 11 Packages Projects Releases Wiki Activity

Better rollover and h-scroll on header #48

Browse Source
This commit is contained in:
Ian Renton
2025-10-21 16:18:15 +01:00
parent 0b3b35db35
commit be86160e9c
2 changed files with 27 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
webassets/css/style.css
View File

@@ -222,6 +222,26 @@ div.band-spot {
cursor: default;
}
div.band-spot:hover {
z-index: 999;
}
div.band-spot span.band-spot-call {
display: inline;
}
div.band-spot:hover span.band-spot-call {
display: none;
}
div.band-spot span.band-spot-info {
display: none;
}
div.band-spot:hover span.band-spot-info {
display: inline;
}
/* GENERAL MOBILE SUPPORT */

8
webassets/js/bands.js
View File

@@ -106,7 +106,7 @@ function updateBands() {
var pxDownBandLabel = (emDownBand * BAND_COLUMN_FONT_SIZE) + (0.015 * BAND_COLUMN_HEIGHT_PX);
// Add spot div to DOM
bandSpotsDiv.append(`<div class="band-spot" label="${(s.freq/1000000).toFixed(3)}MHz ${s.mode}" onclick="alert('${s.dx_call} on ${(s.freq/1000000).toFixed(3)}MHz ${s.mode}');" style="top: ${emDownBand}em; border-top: 1px solid ${s.band_color}; border-left: 5px solid ${s.band_color}; border-bottom: 1px solid ${s.band_color}; border-right: 1px solid ${s.band_color};">${s.dx_call}</div>`);
bandSpotsDiv.append(`<div class="band-spot" style="top: ${emDownBand}em; border-top: 1px solid ${s.band_color}; border-left: 5px solid ${s.band_color}; border-bottom: 1px solid ${s.band_color}; border-right: 1px solid ${s.band_color};"><span class="band-spot-call">${s.dx_call}</span><span class="band-spot-info">${s.dx_call} ${(s.freq/1000000).toFixed(3)} ${s.mode}</span></div>`);
// Draw the line on the canvas
var ctx = bandLinesCanvas[0].getContext('2d');
@@ -131,6 +131,12 @@ function updateBands() {
// Update the DOM with the band HTML
bandsContainer.html(table);
// Desktop mouse wheel to scroll bands horizontally if used on the headers
table.find('thead tr').on("wheel", () => {
bandsContainer.scrollLeft(bandsContainer.scrollLeft() + event.deltaY / 10.0);
return false;
});
}
// Iterate through a temporary list of spots, merging duplicates in a way suitable for the band panel. If two or more