bzuccaro/Mark-VIII
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ui: wireless landscape card — ring + legend, fix handshake toggle wrap

Browse Source 
- Landscape card mirrors Encryption: headline text removed; square 112px
  ring (drawn height 112, CSS fixed square, no more ellipse) + HTML legend
  (dot + label + count) for Access Points / Clients / Unassociated. The
  canvas previously had no legend and the '90' headline never matched the
  dominant arc; the legend makes every count visible and labeled.
- Legend markup generalized: .recon-enc-* -> .recon-chart-* shared by both
  cards; shared chartLegendEntry() builder; landscape skips zero slices.
- .recon-toggle now flex-wraps (was overflowing 'Auto-collect handshakes'
  past the card edge at narrow widths; card min-width inner is ~142px vs a
  233px label).

Verified on device via CDP at 1200px and 860px viewports: landscape ring
112x112 square with Access Points 92 / Clients 291 / Unassociated 760;
encryption card intact; toggle label stays inside the 184px card (wraps to
2 lines, no card overflow); zero JS exceptions.
This commit is contained in:
bzuccaro
2026-08-19 08:07:46 -05:00
parent 6927baf51f
commit 32282af1d8
2 changed files with 37 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files
payload/user/remote_access/pager-webui/www/css/app.css
+7 -7
View File
@@ -325,16 +325,16 @@ html.dark .muted { color: #bdbdbd; }
}
.recon-chart-box { position: relative; flex: 1; min-height: 0; margin-top: auto; }
.recon-chart-box canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
#recon-encryption { position: static; display: block; width: 112px; height: 112px; margin: 0 auto; }
#recon-encryption, #recon-landscape { position: static; display: block; width: 112px; height: 112px; margin: 0 auto; }
.recon-no-data { font-style: italic; color: #787878; display: flex; justify-content: center; align-items: center; padding: 8px; text-align: center; }
.recon-enc-legend { display: flex; flex-wrap: wrap; gap: 2px 10px; margin-top: 4px; align-items: baseline; }
.recon-enc-entry { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--text); }
.recon-enc-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.recon-enc-label { color: var(--muted); }
.recon-enc-count { font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.recon-chart-legend { display: flex; flex-wrap: wrap; gap: 2px 10px; margin-top: 4px; align-items: baseline; }
.recon-chart-entry { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--text); }
.recon-chart-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.recon-chart-label { color: var(--muted); }
.recon-chart-count { font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.recon-hs-count { font-size: 32px; font-weight: 700; line-height: 1.1; }
.recon-hs-label { color: var(--muted); font-size: 12px; margin: 1px 0 8px; }
.recon-toggle { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text); margin: 0; cursor: pointer; }
.recon-toggle { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text); margin: 0; cursor: pointer; flex-wrap: wrap; min-width: 0; }
.recon-ps-row { display: flex; align-items: center; width: 100%; gap: 4px; margin-top: 2px; }
.recon-ps-row .sel { width: 100%; font-size: 12px; padding: 4px 6px; }
.recon-ps-actions { display: flex; align-items: center; gap: 2px; margin-top: 4px; }