Skip to content

fix(theme): Aurora — card status badges, table headers, gateway card header #169

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
CallMeTechie merged 1 commit into from
Jun 23, 2026
Merged

fix(theme): Aurora — card status badges, table headers, gateway card header #169

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 6 additions & 2 deletions public/css/aurora.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -282,7 +282,7 @@ a{color:inherit}
--------------------------------------------------------------------------- */
.data-table{width:100%; border-collapse:collapse; font-size:13.5px}
.data-table th{text-align:left; font-weight:600; color:var(--faint); font-size:11px; text-transform:uppercase; letter-spacing:.06em;
padding:0 14px 11px; border-bottom:1px solid var(--line)}
padding:12px 14px; vertical-align:middle; border-bottom:1px solid var(--line)}
.data-table td{padding:13px 14px; border-bottom:1px solid var(--line); vertical-align:middle}
.data-table tr:last-child td{border-bottom:0}
.data-table tbody tr:hover td{background:var(--chip)}
Expand Down Expand Up @@ -410,7 +410,7 @@ input[type=date]:focus, select:focus {
/* ----------------------------------------------------------------------------
11 · TAGS / BADGES / STATUS DOTS (production: .tag/.tag-*, .status-dot/.online…)
--------------------------------------------------------------------------- */
.tag{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:12px;padding:3px 9px;border-radius:999px;border:1px solid var(--line); font-family:var(--font-body)}
.tag{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:12px;padding:3px 9px;border-radius:999px;border:1px solid var(--line); font-family:var(--font-body); white-space:nowrap}
.tag-green{color:var(--green); background:var(--green-bg); border-color:var(--green-bd)}
.tag-grey{color:var(--faint); background:var(--chip)}
.tag-amber{color:var(--amber); background:var(--amber-bg); border-color:var(--amber-bd)}
Expand Down Expand Up @@ -623,6 +623,10 @@ input[type=date]:focus, select:focus {

/* tag-dot helper used in Aurora status tags on gateway/peer rows.
Issue 9: text LEFT of dot — suppress ::before, put dot via ::after */
/* pro.css's standalone .tag-dot is a 5px dot; when combined as `tag tag-dot` on
one element (card status badges) it would force width/height:5px and collapse
the label. Reset so the text shows; aurora renders the dot via ::after. */
.tag.tag-dot{width:auto;height:auto}
.tag.tag-dot::before{content:none}
.tag.tag-dot::after{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;background:currentColor;margin-left:5px}

Expand Down
21 changes: 13 additions & 8 deletions public/js/gateways.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,15 +72,23 @@
var uh = el('div', 'uh');
var uav = el('span', 'uav'); uav.style.background = gwAvatarGradient(g); uav.appendChild(gwCardIcon());
uh.appendChild(uav);
var nameWrap = el('div');
nameWrap.appendChild(el('div', 'un', g.name));
var nameWrap = el('div'); nameWrap.style.cssText = 'flex:1;min-width:0;overflow:hidden';
var unEl = el('div', 'un', g.name); unEl.style.cssText = 'white-space:nowrap;overflow:hidden;text-overflow:ellipsis';
nameWrap.appendChild(unEl);
nameWrap.appendChild(el('div', 'ud', (t.gateway_version || '—') + (g.hostname ? ' · ' + g.hostname : '')));
uh.appendChild(nameWrap);
var tagCls = 'tag ' + (st === 'online' ? 'tag-green' : st === 'degraded' ? 'tag-amber' : 'tag-grey') + ' tag-dot';
var stTag = el('span', tagCls, T('gateways.' + st, st));
// Issue 8: badge INSIDE card header — wrap in right container pushed to far-right
var right = el('span'); right.style.cssText = 'margin-left:auto;display:inline-flex;align-items:center;gap:6px;flex-shrink:0';
// Header right cluster: status badge (left) + update-check icon (right).
var right = el('span'); right.style.cssText = 'margin-left:auto;display:inline-flex;align-items:center;gap:8px;flex-shrink:0';
right.appendChild(stTag);
// Update-check icon button (.recheck → grid click handler → probe()); replaces
// the former full-width "Check update" button at the card foot.
var rcBtn = el('button', 'icon-action recheck'); rcBtn.dataset.id = g.peer_id;
rcBtn.title = T('gateways.update_check', 'Check update');
rcBtn.setAttribute('aria-label', rcBtn.title);
rcBtn.innerHTML = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 2v6h-6M3 12a9 9 0 0 1 15-6.7L21 8M3 22v-6h6M21 12a9 9 0 0 1-15 6.7L3 16"/></svg>';
right.appendChild(rcBtn);
uh.appendChild(right);
wrap.appendChild(uh);
// Body: resource bars (online/degraded) or empty-state (offline)
Expand All @@ -94,10 +102,7 @@
if (t.mem_total) { var mp = pct(t.mem_used, t.mem_total); auroraResRow(wrap, 'RAM', mp + '%', mp, mp > 90); }
if (t.disk && t.disk.total) { var dp = pct(t.disk.used, t.disk.total); auroraResRow(wrap, T('gateways.lbl_disk', 'Disk'), dp + '%', dp, dp > 85); }
}
// Update-check / recheck button (.recheck class → grid click handler → probe())
var btn = el('button', 'btn btn-ghost btn-sm btn-block recheck', T('gateways.update_check', 'Check update'));
btn.style.marginTop = '14px'; btn.dataset.id = g.peer_id;
wrap.appendChild(btn);
// (Update-check moved to the header icon button above.)
return wrap;
}
// Issue 10: Aurora-specific versions card — vertical kv list to prevent overflow
Expand Down
Loading