[style](trx-frontend-http): replace coord sub-line with inline pin button
When a frame carries a position, show a small 📍 button between the timestamp and callsign on the same line. Title tooltip shows the coordinates; clicking navigates to the Map tab. Removes the two-line per-entry layout. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> Signed-off-by: Stan Grams <sjg@haxx.space>
This commit is contained in:
@@ -118,12 +118,11 @@ function updateAprsBar() {
|
||||
const call = `<span class="aprs-bar-call">${escapeMapHtml(pkt.srcCall)}</span>`;
|
||||
const dest = escapeMapHtml(pkt.destCall || "");
|
||||
const info = escapeMapHtml(pkt.info || "");
|
||||
const posHtml = pkt.lat != null && pkt.lon != null
|
||||
? `<button class="aprs-bar-pos" onclick="window.navigateToAprsMap(${pkt.lat},${pkt.lon})">${pkt.lat.toFixed(4)}, ${pkt.lon.toFixed(4)}</button>`
|
||||
const pin = pkt.lat != null && pkt.lon != null
|
||||
? `<button class="aprs-bar-pin" title="${pkt.lat.toFixed(4)}, ${pkt.lon.toFixed(4)}" onclick="window.navigateToAprsMap(${pkt.lat},${pkt.lon})">📍</button>`
|
||||
: "";
|
||||
html += `<div class="aprs-bar-frame">` +
|
||||
`<div class="aprs-bar-frame-main">${ts}${call}>${dest}: ${info}</div>` +
|
||||
(posHtml ? `<div class="aprs-bar-frame-pos">${posHtml}</div>` : "") +
|
||||
`<div class="aprs-bar-frame-main">${ts}${pin}${call}>${dest}: ${info}</div>` +
|
||||
`</div>`;
|
||||
}
|
||||
aprsBarOverlay.innerHTML = html;
|
||||
|
||||
@@ -680,9 +680,7 @@ small { color: var(--text-muted); }
|
||||
.aprs-bar-frame {
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
||||
font-size: clamp(0.58rem, 1.05vw, 0.74rem);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
line-height: 1.3;
|
||||
line-height: 1.45;
|
||||
opacity: 1;
|
||||
}
|
||||
.aprs-bar-frame-main {
|
||||
@@ -690,13 +688,19 @@ small { color: var(--text-muted); }
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.aprs-bar-frame-pos {
|
||||
line-height: 1.1;
|
||||
margin-bottom: 0.1rem;
|
||||
.aprs-bar-pin {
|
||||
background: none;
|
||||
border: none;
|
||||
padding: 0 0.2em 0 0;
|
||||
font-size: 0.85em;
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
vertical-align: middle;
|
||||
opacity: 0.8;
|
||||
transition: opacity 120ms;
|
||||
}
|
||||
.aprs-bar-frame-pos {
|
||||
display: block;
|
||||
white-space: nowrap;
|
||||
.aprs-bar-pin:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
.aprs-bar-frame + .aprs-bar-frame {
|
||||
opacity: 0.72;
|
||||
|
||||
Reference in New Issue
Block a user