LotusGuild/gandalf
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

CSS: extract notification panel inline styles to classes
Lint / Python (flake8) (push) Successful in 40s
Details
Lint / JS (eslint) (push) Successful in 8s
Details
Security / Python Security (bandit) (push) Successful in 1m7s
Details
Test / Python Tests (pytest) (push) Successful in 1m42s
Details
Lint / Notify on failure (push) Has been skipped
Details
Lint / Deploy (push) Successful in 3s
Details

Browse Source 
- lt-notif-empty: replaces all hardcoded padding/font/color/align on
  the empty-state and loading/error text in the notification bell panel
- lt-notif-view-all: replaces width/text-align/display/font-size inline
  style on the 'View dashboard' footer link
- lt-notif-dot: moves border-radius:50%;margin-top from inline style
  (only background color remains inline, which is dynamic per-severity)
- Initial 'Loading…' text in the panel HTML uses lt-notif-empty

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Jared Vititoe
2026-05-10 23:18:33 -04:00
parent ca4bcef26c
commit 0b33589106
2 changed files with 24 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/style.css
+19
View File
@@ -124,6 +124,25 @@
/* ── Search input size variant ───────────────────────────────────── */
.lt-search-input--sm { width: 180px; }
/* ── Notification panel helpers ──────────────────────────────────── */
.lt-notif-empty {
padding: 1rem;
font-size: 0.75rem;
color: var(--text-muted);
text-align: center;
}
.lt-notif-view-all {
width: 100%;
text-align: center;
display: block;
font-size: 0.72rem;
}
.lt-notif-dot {
border-radius: 50%;
margin-top: 4px;
flex-shrink: 0;
}
/* ── Divider compact variant ─────────────────────────────────────── */
.lt-divider--compact { margin: 1rem 0 0.75rem; }
templates/base.html
+5 -5
View File
@@ -133,10 +133,10 @@
<button type="button" class="lt-notif-panel-clear" id="lt-notif-clear-btn">Mark all read</button>
</div>
<div class="lt-notif-panel-list" id="lt-notif-list">
<div style="padding:0.75rem;font-size:0.75rem;color:var(--text-muted);text-align:center">Loading&hellip;</div>
<div class="lt-notif-empty">Loading&hellip;</div>
</div>
<div class="lt-notif-panel-footer">
<a href="{{ url_for('index') }}" class="lt-btn lt-btn-ghost lt-btn-sm" style="width:100%;text-align:center;display:block;font-size:0.72rem">View dashboard</a>
<a href="{{ url_for('index') }}" class="lt-btn lt-btn-ghost lt-btn-sm lt-notif-view-all">View dashboard</a>
</div>
</div>
</div>
@@ -455,14 +455,14 @@
lt.notif.set(bell, unreadCount);
if (!active.length) {
list.innerHTML = '<div style="padding:1rem;font-size:0.75rem;color:var(--text-muted);text-align:center">&#x2714; No active alerts</div>';
list.innerHTML = '<div class="lt-notif-empty">&#x2714; No active alerts</div>';
return;
}
list.innerHTML = active.slice(0, 25).map(function(e) {
var isUnread = toMs(e.last_seen) > readBefore;
var dotColor = SEV_DOT[e.severity] || 'var(--text-muted)';
return '<div class="lt-notif-item' + (isUnread ? ' lt-notif-item--unread' : '') + '">' +
'<div class="lt-notif-dot' + (isUnread ? '' : ' lt-notif-dot--read') + '" style="background:' + dotColor + ';border-radius:50%;margin-top:4px"></div>' +
'<div class="lt-notif-dot' + (isUnread ? '' : ' lt-notif-dot--read') + '" style="background:' + dotColor + '"></div>' +
'<div class="lt-notif-item-body">' +
'<div class="lt-notif-item-title">' + esc(e.target_name) + (e.target_detail ? ' &middot; ' + esc(e.target_detail) : '') + '</div>' +
'<div class="lt-notif-item-time">' + esc(e.event_type.replace(/_/g,' ')) + ' &middot; ' + fmtAgo(e.last_seen) + '</div>' +
@@ -486,7 +486,7 @@
}
})
.catch(function() {
if (andRender) list.innerHTML = '<div style="padding:0.75rem;font-size:0.75rem;color:var(--text-muted);text-align:center">Could not load</div>';
if (andRender) list.innerHTML = '<div class="lt-notif-empty">Could not load</div>';
});
}