LotusGuild/web_template
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: polish SLA banner component — gradient fill, dismiss persistence, terminal icons
Lint / JS (eslint) (push) Successful in 6s
Details

Browse Source 
- lt-sla-p2 .lt-sla-fill: upgrade from flat amber to gradient (#FFB300 →
  #ffd740) for visual consistency with P1 red→orange fill
- lt-sla-dismiss: add transition (0.15s ease) and :focus-visible outline so
  keyboard users get a visible focus ring
- Demo dismiss: replace .remove() with hidden + sessionStorage so banners
  stay dismissed across page navigation (data-sla-id attribute wires the key)
- Demo icons: swap emoji (🔴 🟠) for terminal-style text [ ! ] / [ ~ ] —
  emoji rendering is platform-specific and breaks the monospace aesthetic

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Jared Vititoe
2026-04-29 17:27:10 -04:00
parent 39862fab3b
commit 8df14ebbe3
2 changed files with 17 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
base.html
+12 -8
View File
@@ -935,17 +935,17 @@
<!-- SLA BANNERS -->
<div class="lt-section-header">SLA Banners</div>
<div class="lt-section-body" style="display:flex;flex-direction:column;gap:var(--space-sm)">
<div class="lt-sla-p1" role="alert">
<span class="lt-sla-icon" aria-hidden="true">🔴</span>
<div class="lt-sla-p1" role="alert" data-sla-id="demo-p1">
<span class="lt-sla-icon" aria-hidden="true">[ ! ]</span>
<div class="lt-sla-info">
<div class="lt-sla-title">⚠ P1 Critical — SLA: 6h 42m elapsed of 8h limit</div>
<div class="lt-sla-title">P1 Critical — SLA: 6h 42m elapsed of 8h limit</div>
<div class="lt-sla-bar"><div class="lt-sla-fill" style="width:84%"></div></div>
</div>
<div class="lt-sla-meta">Storage array link-down · #123456789</div>
<button type="button" class="lt-sla-dismiss" aria-label="Dismiss">✕</button>
</div>
<div class="lt-sla-p2" role="alert">
<span class="lt-sla-icon" aria-hidden="true">🟠</span>
<div class="lt-sla-p2" role="alert" data-sla-id="demo-p2">
<span class="lt-sla-icon" aria-hidden="true">[ ~ ]</span>
<div class="lt-sla-info">
<div class="lt-sla-title">P2 High — SLA: 9h 37m elapsed of 24h limit</div>
<div class="lt-sla-bar"><div class="lt-sla-fill" style="width:40%"></div></div>
@@ -2001,11 +2001,15 @@ Storage array link-down on `compute-storage-01`.
});
});
// SLA dismiss buttons
// SLA dismiss buttons — hide and persist per session
document.querySelectorAll('.lt-sla-dismiss').forEach(btn => {
const banner = btn.closest('.lt-sla-p1, .lt-sla-p2');
if (!banner) return;
const id = banner.dataset.slaId;
try { if (id && sessionStorage.getItem('lt_sla_dismissed_' + id)) banner.hidden = true; } catch (_) {}
btn.addEventListener('click', () => {
const banner = btn.closest('.lt-sla-p1, .lt-sla-p2');
if (banner) banner.remove();
banner.hidden = true;
try { if (id) sessionStorage.setItem('lt_sla_dismissed_' + id, '1'); } catch (_) {}
});
});