Extract the settings redesign's tokens and components into shared static/hbd-ui.css + hbd-ui.js and dedupe settings.html against them. About becomes yaml-key sections with kv rows; Alerts gets stat tiles, chip filters, and alert record rows (same fetch/ack logic); Host Overview keeps its DOM and live-update JS but is re-skinned to the token system with a page toolbar. Live Dashboard intentionally untouched pending its own redesign. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01NfPpSpccTWBfZg1FTveyaU
17 lines
676 B
JavaScript
17 lines
676 B
JavaScript
/* hbd-ui.js — shared helpers for pages using hbd-ui.css.
|
|
*
|
|
* Keeps sticky toolbars stuck just below the fixed site nav, whose height
|
|
* varies with viewport width and wrapping.
|
|
*/
|
|
|
|
function _setStickyOffsets() {
|
|
const nav = document.querySelector('.nav');
|
|
const tb = document.querySelector('.st-toolbar');
|
|
const navH = nav ? nav.offsetHeight : 48;
|
|
const barsH = navH + (tb ? tb.offsetHeight : 46);
|
|
document.documentElement.style.setProperty('--nav-h', navH + 'px');
|
|
document.documentElement.style.setProperty('--bars-h', barsH + 'px');
|
|
}
|
|
window.addEventListener('resize', _setStickyOffsets);
|
|
document.addEventListener('DOMContentLoaded', _setStickyOffsets);
|