[feat](trx-frontend-http): give the AIS list the same log shape
CI / lint (push) Successful in 2m15s
CI / test (push) Successful in 8m8s
CI / frontend (push) Successful in 3m41s
CI / reuse (push) Successful in 2s

A message was three stacked lines — time and name, then MMSI and route,
then motion, distance, position and age — so a screen held eight of
them.  It is one line now: time, vessel, message type, and what the
message says, opening in place for the MMSI, the channel frequency, the
route, the age, the fix and a jump to the map.  Twenty-two fit where
eight did.

What a message says depends on what it is.  Position reports give the
fix and the motion; the static and voyage reports that carry no fix give
the callsign and where the vessel is bound.  Both fall back to whatever
fields are present rather than showing nothing.

The row vocabulary the APRS list introduced is no longer APRS-specific —
the classes are decode-line and decode-expanded now, shared by both, and
identity sits in fixed columns so the summaries line up down the list
instead of starting wherever the callsign happens to end.  The three
summary cards above the list go the way of the APRS ones.

Signed-off-by: Stan Grams <sjg@haxx.space>
This commit is contained in:
sjg
2026-08-04 23:24:09 +02:00
parent 37987b2779
commit 6d25ecdc11
10 changed files with 172 additions and 61 deletions
@@ -2844,12 +2844,12 @@ body.map-fake-fullscreen-active {
background: var(--input-bg);
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
/* One line per frame, opening in place. A frame used to be a card five lines
/* One line per decode, opening in place — shared by the APRS and AIS lists. A frame used to be a card five lines
tall — timestamp, meta, raw information field, three buttons, a Details
panel repeating the row — so five of them filled the panel. */
.aprs-packet { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 0.82rem; border-bottom: 1px solid var(--border); line-height: 1.35; }
.aprs-packet:last-child { border-bottom: none; }
.aprs-line {
.decode-line {
display: flex;
align-items: center;
gap: 0.5rem;
@@ -2858,47 +2858,66 @@ body.map-fake-fullscreen-active {
list-style: none;
white-space: nowrap;
}
.aprs-line::-webkit-details-marker { display: none; }
.aprs-line:hover {
.decode-line::-webkit-details-marker { display: none; }
.decode-line:hover {
background: color-mix(in srgb, var(--btn-bg) 45%, transparent);
}
.aprs-packet[open] > .aprs-line {
.aprs-packet[open] > .decode-line {
background: color-mix(in srgb, var(--accent-green) 8%, transparent);
}
/* Fixed columns for what identifies a decode, so the summaries line up down
the list and the eye can run along one of them instead of hunting. Names
longer than the column ellipsise rather than pushing the rest along. */
.decode-line .aprs-call,
.decode-line .ais-call {
flex: 0 0 auto;
width: 8.5rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.decode-line .aprs-badge-type {
flex: 0 0 auto;
min-width: 5.5rem;
}
.decode-line .ais-badge-type {
flex: 0 0 auto;
min-width: 9rem;
}
/* The summary takes the leftover width and ellipsises: a frame is one line
whatever its payload, so the column of times and callsigns stays readable. */
.aprs-line-summary {
.decode-line-summary {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
color: var(--text);
}
.aprs-line-distance {
.decode-line-distance {
flex: 0 0 auto;
color: var(--text-muted);
font-size: 0.75rem;
}
.aprs-expanded {
.decode-expanded {
display: flex;
flex-direction: column;
gap: 0.35rem;
padding: 0.1rem 0.55rem 0.55rem 2.6rem;
}
.aprs-expanded-meta {
.decode-expanded-meta {
display: flex;
flex-wrap: wrap;
gap: 0.6rem;
font-size: 0.75rem;
color: var(--text-muted);
}
.aprs-expanded-raw,
.aprs-expanded-bytes {
.decode-expanded-raw,
.decode-expanded-bytes {
word-break: break-all;
font-size: 0.78rem;
color: var(--text);
}
.aprs-expanded-bytes {
.decode-expanded-bytes {
color: var(--text-muted);
font-size: 0.72rem;
}
@@ -3025,7 +3044,9 @@ body.map-fake-fullscreen-active {
color: var(--text);
word-break: break-word;
}
.ais-message { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 0.82rem; padding: 0.45rem 0.55rem; border-bottom: 1px solid var(--border); line-height: 1.35; }
.ais-message { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 0.82rem; border-bottom: 1px solid var(--border); line-height: 1.35; }
.ais-message > .decode-line:hover { background: color-mix(in srgb, var(--btn-bg) 45%, transparent); }
.ais-message[open] > .decode-line { background: color-mix(in srgb, var(--accent-red) 8%, transparent); }
.ais-message:last-child { border-bottom: none; }
.vdes-message { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 0.82rem; padding: 0.45rem 0.55rem; border-bottom: 1px solid var(--border); line-height: 1.35; }
.vdes-message:last-child { border-bottom: none; }