sjg/trx-rs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[fix](trx-frontend-http): scope server-lost overlay to content area, keep header accessible

Browse Source 
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Signed-off-by: Stan Grams <sjg@haxx.space>
This commit is contained in:
Stan Grams
2026-03-24 20:43:15 +01:00
parent dc271c1fdb
commit 8c44a1b5f2
3 changed files with 19 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/trx-client/trx-frontend/trx-frontend-http/assets/web/app.js
+4 -3
View File
@@ -408,10 +408,11 @@ function setDecodeHistoryOverlayVisible(visible, title = "", sub = "") {
decodeHistoryOverlayEl.classList.toggle("is-hidden", !visible);
}
function setConnLostOverlay(visible, title = "Connection lost", sub = "Retrying\u2026") {
function setConnLostOverlay(visible, title = "Connection lost", sub = "Retrying\u2026", fullscreen = false) {
if (!connLostOverlayEl) return;
if (connLostOverlayTitleEl) connLostOverlayTitleEl.textContent = title;
if (connLostOverlaySubEl) connLostOverlaySubEl.textContent = sub;
connLostOverlayEl.classList.toggle("conn-lost-fullscreen", fullscreen);
connLostOverlayEl.classList.toggle("is-hidden", !visible);
}
const decodeHistoryTextDecoder = typeof TextDecoder === "function" ? new TextDecoder() : null;
@@ -3362,7 +3363,7 @@ function connect() {
// Check if this is an auth error by looking at readyState
if (es.readyState === EventSource.CLOSED) {
powerHint.textContent = "trx-client connection lost, retrying\u2026";
setConnLostOverlay(true, "trx-client connection lost", "Retrying\u2026");
setConnLostOverlay(true, "trx-client connection lost", "Retrying\u2026", true);
es.close();
pollFreshSnapshot();
scheduleReconnect(1000);
@@ -3373,7 +3374,7 @@ function connect() {
const now = Date.now();
if (now - lastEventAt > 15000) {
powerHint.textContent = "trx-client connection lost, retrying\u2026";
setConnLostOverlay(true, "trx-client connection lost", "Retrying\u2026");
setConnLostOverlay(true, "trx-client connection lost", "Retrying\u2026", true);
es.close();
pollFreshSnapshot();
scheduleReconnect(250);
src/trx-client/trx-frontend/trx-frontend-http/assets/web/index.html
+6 -6
View File
@@ -1036,6 +1036,12 @@
</div>
<div class="hint" id="power-hint">Connecting…</div>
</div>
<div id="conn-lost-overlay" class="decode-history-overlay content-overlay is-hidden" aria-live="assertive" aria-atomic="true">
<div class="decode-history-overlay-card">
<div id="conn-lost-overlay-title" class="decode-history-overlay-title">Connection lost</div>
<div id="conn-lost-overlay-sub" class="decode-history-overlay-sub">Retrying…</div>
</div>
</div>
</div>
<div id="decode-history-overlay" class="decode-history-overlay is-hidden" aria-live="polite" aria-atomic="true">
<div class="decode-history-overlay-card">
@@ -1043,12 +1049,6 @@
<div id="decode-history-overlay-sub" class="decode-history-overlay-sub">Preparing recent decodes for the UI</div>
</div>
</div>
<div id="conn-lost-overlay" class="decode-history-overlay is-hidden" aria-live="assertive" aria-atomic="true">
<div class="decode-history-overlay-card">
<div id="conn-lost-overlay-title" class="decode-history-overlay-title">Connection lost</div>
<div id="conn-lost-overlay-sub" class="decode-history-overlay-sub">Retrying…</div>
</div>
</div>
<script src="/webgl-renderer.js"></script>
<script src="/app.js"></script>
<script src="/ais.js"></script>
src/trx-client/trx-frontend/trx-frontend-http/assets/web/style.css
+9 -1
View File
@@ -1142,7 +1142,7 @@ small { color: var(--text-muted); }
.meter-bar { flex: 1 1 auto; height: 12px; border-radius: 999px; background: var(--btn-bg); border: 1px solid var(--border-light); overflow: hidden; }
.meter-fill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--accent-green), var(--accent-yellow), var(--accent-red)); transition: width 150ms ease; }
.meter-value { font-size: 0.95rem; color: var(--text-heading); min-width: 64px; text-align: right; }
#content { display: flex; flex-direction: column; gap: 1.1rem; min-height: 0; flex: 1 1 auto; overflow: visible; }
#content { display: flex; flex-direction: column; gap: 1.1rem; min-height: 0; flex: 1 1 auto; overflow: visible; position: relative; }
.tab-panel { flex: 1 1 auto; min-height: 0; overflow: visible; display: flex; flex-direction: column; }
.sub-tab-panel { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.tab-bar {
@@ -1340,6 +1340,14 @@ small { color: var(--text-muted); }
opacity: 0;
visibility: hidden;
}
.decode-history-overlay.content-overlay {
position: absolute;
border-radius: 0 0 0.9rem 0.9rem;
}
.decode-history-overlay.content-overlay.conn-lost-fullscreen {
position: fixed;
border-radius: 0;
}
.decode-history-overlay-card {
min-width: min(26rem, calc(100vw - 2.4rem));
max-width: min(30rem, calc(100vw - 2.4rem));