fix(webui): remove emojis from nav, fix metrics chart sizing
- Remove all emojis from sidebar nav and logo (broken on server console fonts) - Fix canvas chart: use parentElement.getBoundingClientRect() for width, set explicit H=120px — fixes empty charts when offsetWidth/Height is 0 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -67,8 +67,8 @@ tr:hover td{background:#1a2030}
|
||||
.form-row input,.form-row select{width:100%;padding:8px 10px;background:#0f1117;border:1px solid #252d3d;border-radius:6px;color:#e2e8f0;font-size:13px;outline:none}
|
||||
.form-row input:focus,.form-row select:focus{border-color:#3b82f6}
|
||||
/* Metrics chart */
|
||||
.chart-wrap{position:relative;height:140px;background:#0a0d14;border-radius:8px;overflow:hidden;margin-bottom:8px}
|
||||
canvas.chart{width:100%;height:100%}
|
||||
.chart-wrap{position:relative;background:#0a0d14;border-radius:8px;overflow:hidden;margin-bottom:8px;line-height:0}
|
||||
canvas.chart{display:block}
|
||||
.chart-legend{font-size:11px;color:#64748b;padding:4px 0}
|
||||
/* Grid */
|
||||
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
|
||||
@@ -88,18 +88,18 @@ canvas.chart{width:100%;height:100%}
|
||||
|
||||
func layoutNav(active string) string {
|
||||
items := []struct{ id, icon, label string }{
|
||||
{"dashboard", "📊", "Dashboard"},
|
||||
{"metrics", "📈", "Metrics"},
|
||||
{"tests", "🧪", "Acceptance Tests"},
|
||||
{"burn-in", "🔥", "Burn-in"},
|
||||
{"network", "🌐", "Network"},
|
||||
{"services", "⚙️", "Services"},
|
||||
{"export", "📦", "Export"},
|
||||
{"tools", "🔧", "Tools"},
|
||||
{"dashboard", "", "Dashboard"},
|
||||
{"metrics", "", "Metrics"},
|
||||
{"tests", "", "Acceptance Tests"},
|
||||
{"burn-in", "", "Burn-in"},
|
||||
{"network", "", "Network"},
|
||||
{"services", "", "Services"},
|
||||
{"export", "", "Export"},
|
||||
{"tools", "", "Tools"},
|
||||
}
|
||||
var b strings.Builder
|
||||
b.WriteString(`<aside class="sidebar">`)
|
||||
b.WriteString(`<div class="sidebar-logo">🐝 bee<span>hardware audit</span></div>`)
|
||||
b.WriteString(`<div class="sidebar-logo">bee<span>hardware audit</span></div>`)
|
||||
b.WriteString(`<nav class="nav">`)
|
||||
for _, item := range items {
|
||||
cls := "nav-item"
|
||||
@@ -110,8 +110,8 @@ func layoutNav(active string) string {
|
||||
if item.id != "dashboard" {
|
||||
href = "/" + item.id
|
||||
}
|
||||
b.WriteString(fmt.Sprintf(`<a class="%s" href="%s"><span class="nav-icon">%s</span>%s</a>`,
|
||||
cls, href, item.icon, item.label))
|
||||
b.WriteString(fmt.Sprintf(`<a class="%s" href="%s">%s</a>`,
|
||||
cls, href, item.label))
|
||||
}
|
||||
b.WriteString(`</nav></aside>`)
|
||||
return b.String()
|
||||
@@ -282,8 +282,10 @@ function push(arr, val) { arr.push(val); if (arr.length > WINDOW) arr.shift(); }
|
||||
function drawChart(canvasId, datasets, maxY) {
|
||||
const c = document.getElementById(canvasId);
|
||||
if (!c) return;
|
||||
const W = c.offsetWidth, H = c.offsetHeight;
|
||||
c.width = W; c.height = H;
|
||||
const rect = c.parentElement.getBoundingClientRect();
|
||||
const W = rect.width || 400;
|
||||
const H = 120;
|
||||
c.width = W; c.height = H; c.style.width=W+'px'; c.style.height=H+'px';
|
||||
const ctx = c.getContext('2d');
|
||||
ctx.clearRect(0,0,W,H);
|
||||
ctx.fillStyle = '#0a0d14';
|
||||
|
||||
Reference in New Issue
Block a user