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.css
+5 -3
View File
@@ -4478,8 +4478,8 @@ body.lt-is-offline .lt-main { margin-top: 2rem; transition: margin-top 0.25s eas
width: 0%; width: 0%;
transition: width 0.4s ease; transition: width 0.4s ease;
} }
.lt-sla-p1 .lt-sla-fill { background: linear-gradient(90deg, var(--accent-red), var(--accent-orange)); box-shadow: 0 0 8px rgba(255,45,85,0.6); } .lt-sla-p1 .lt-sla-fill { background: linear-gradient(90deg, var(--accent-red), var(--accent-orange)); box-shadow: 0 0 8px rgba(255,45,85,0.6); }
.lt-sla-p2 .lt-sla-fill { background: var(--accent-amber); box-shadow: 0 0 8px rgba(255,179,0,0.6); } .lt-sla-p2 .lt-sla-fill { background: linear-gradient(90deg, var(--accent-amber), #ffd740); box-shadow: 0 0 8px rgba(255,179,0,0.6); }
.lt-sla-meta { .lt-sla-meta {
font-size: 0.60rem; font-size: 0.60rem;
color: var(--text-dim); color: var(--text-dim);
@@ -4496,8 +4496,10 @@ body.lt-is-offline .lt-main { margin-top: 2rem; transition: margin-top 0.25s eas
flex-shrink: 0; flex-shrink: 0;
padding: 0 0.25rem; padding: 0 0.25rem;
font-family: var(--font-mono); font-family: var(--font-mono);
transition: color 0.15s ease;
} }
.lt-sla-dismiss:hover { color: var(--text-secondary); } .lt-sla-dismiss:hover { color: var(--text-secondary); }
.lt-sla-dismiss:focus-visible { outline: 1px dashed var(--accent-cyan); outline-offset: 2px; }
html[data-theme="light"] .lt-sla-p1 { background: rgba(180,30,50,0.06); border-color: rgba(180,30,50,0.35); } html[data-theme="light"] .lt-sla-p1 { background: rgba(180,30,50,0.06); border-color: rgba(180,30,50,0.35); }
html[data-theme="light"] .lt-sla-p2 { background: rgba(138,90,0,0.06); border-color: rgba(138,90,0,0.35); } html[data-theme="light"] .lt-sla-p2 { background: rgba(138,90,0,0.06); border-color: rgba(138,90,0,0.35); }
base.html
+12 -8
View File
@@ -935,17 +935,17 @@
<!-- SLA BANNERS --> <!-- SLA BANNERS -->
<div class="lt-section-header">SLA Banners</div> <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-section-body" style="display:flex;flex-direction:column;gap:var(--space-sm)">
<div class="lt-sla-p1" role="alert"> <div class="lt-sla-p1" role="alert" data-sla-id="demo-p1">
<span class="lt-sla-icon" aria-hidden="true">🔴</span> <span class="lt-sla-icon" aria-hidden="true">[ ! ]</span>
<div class="lt-sla-info"> <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 class="lt-sla-bar"><div class="lt-sla-fill" style="width:84%"></div></div>
</div> </div>
<div class="lt-sla-meta">Storage array link-down · #123456789</div> <div class="lt-sla-meta">Storage array link-down · #123456789</div>
<button type="button" class="lt-sla-dismiss" aria-label="Dismiss">✕</button> <button type="button" class="lt-sla-dismiss" aria-label="Dismiss">✕</button>
</div> </div>
<div class="lt-sla-p2" role="alert"> <div class="lt-sla-p2" role="alert" data-sla-id="demo-p2">
<span class="lt-sla-icon" aria-hidden="true">🟠</span> <span class="lt-sla-icon" aria-hidden="true">[ ~ ]</span>
<div class="lt-sla-info"> <div class="lt-sla-info">
<div class="lt-sla-title">P2 High — SLA: 9h 37m elapsed of 24h limit</div> <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> <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 => { 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', () => { btn.addEventListener('click', () => {
const banner = btn.closest('.lt-sla-p1, .lt-sla-p2'); banner.hidden = true;
if (banner) banner.remove(); try { if (id) sessionStorage.setItem('lt_sla_dismissed_' + id, '1'); } catch (_) {}
}); });
}); });