dandri/meshcore-analyzer
1
0
Fork 0
mirror of https://github.com/Kpa-clawbot/meshcore-analyzer.git synced 2026-06-05 06:01:31 +00:00
Code Issues Packages Projects Releases Wiki Activity

polish(tufte): extract inline cssText to themable CSS classes

Browse Source 
Round 1 polish — tufte axis: the navbar mirror buttons + toast popover
were shipped with `el.style.cssText = "border:1px solid var(--border,
#444);..."` strings, which defeat the customizer (no per-token override
possible) and duplicate visual tokens between JS + CSS.

Move padding/border/color/border-radius/background/font-size into 3
real CSS classes inside the existing @media (max-width: 900px) block:
  - .mpa-btn-icon (the ⏸ pause mirror)
  - .mpa-btn-pill (the Filters ▾ mirror)
  - .mpa-toast (the score-tooltip toast popover)

mobile-page-actions.js now only sets layout-required inline styles
(display:inline-flex on the slot, opacity transitions on the toast) —
all theme-token reads happen via CSS vars in the stylesheet.

vm-sandbox + 1415 source-grep tests still pass.
This commit is contained in:
openclaw-bot
2026-05-28 22:26:29 +00:00
parent 67962a8317
commit 70a570c640
2 changed files with 45 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/mobile-page-actions.js
+5 -4
View File
@@ -17,6 +17,8 @@
if (!navLeft) return null;
slot = document.createElement('div');
slot.id = SLOT_ID;
// Layout-only styles inline; visual tokens (border/colors) come from
// the mobile @media block in style.css so the customizer can theme us.
slot.style.cssText = 'display:inline-flex;gap:4px;align-items:center;margin-left:8px;';
navLeft.appendChild(slot);
return slot;
@@ -58,15 +60,14 @@
const real = document.getElementById('pktPauseBtn');
if (real) real.click();
});
pause.style.cssText = 'padding:4px 6px;font-size:14px;background:transparent;border:1px solid var(--border,#444);border-radius:6px;color:var(--nav-text,#fff);cursor:pointer;';
pause.classList.add('mpa-btn-icon');
slot.appendChild(pause);
// Mirror filter toggle as a labeled "Filters ▾" pill (matches inline style)
const filt = makeBtn('Filters ▾', 'Toggle filters', function () {
const real = document.querySelector('.filter-bar .filter-toggle-btn, #filterToggleBtn');
if (real) real.click();
});
filt.className = 'nav-btn filter-toggle-btn-mirror';
filt.style.cssText = 'padding:4px 10px;font-size:12px;background:transparent;border:1px solid var(--border,#444);border-radius:999px;color:var(--nav-text,#fff);cursor:pointer;font-weight:500;';
filt.className = 'nav-btn filter-toggle-btn-mirror mpa-btn-pill';
slot.appendChild(filt);
}
}
@@ -108,7 +109,7 @@
if (!t) {
t = document.createElement('div');
t.id = 'mcMobileToast';
t.style.cssText = 'position:fixed;left:50%;bottom:90px;transform:translateX(-50%);background:var(--surface-2,#222);color:var(--text,#fff);padding:10px 16px;border:1px solid var(--border,#444);border-radius:8px;font-size:13px;max-width:80vw;z-index:9999;box-shadow:0 4px 12px rgba(0,0,0,0.4);transition:opacity .3s;';
t.className = 'mpa-toast';
document.body.appendChild(t);
}
t.textContent = msg;
public/style.css
+40
View File
@@ -907,6 +907,46 @@ img.brand-logo {
* #534 E2E test (and for any user whose navbar mirror failed to inject). */
#pktLeft .page-header { display: none !important; }
#pktLeft .pkt-filter-expr { display: none !important; }
/* Navbar-mirror buttons injected by mobile-page-actions.js. Visual tokens
* (border, colors) live here so the customizer can theme them and so we
* don't ship them as inline cssText strings. */
.mpa-btn-icon {
padding: 4px 6px;
font-size: 14px;
background: transparent;
border: 1px solid var(--border, #444);
border-radius: 6px;
color: var(--nav-text, #fff);
cursor: pointer;
}
.mpa-btn-pill {
padding: 4px 10px;
font-size: 12px;
background: transparent;
border: 1px solid var(--border, #444);
border-radius: 999px;
color: var(--nav-text, #fff);
cursor: pointer;
font-weight: 500;
}
.mpa-toast {
position: fixed;
left: 50%;
bottom: 90px;
transform: translateX(-50%);
background: var(--surface-2, #222);
color: var(--text, #fff);
padding: 10px 16px;
border: 1px solid var(--border, #444);
border-radius: 8px;
font-size: 13px;
max-width: 80vw;
z-index: 9999;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
transition: opacity .3s;
}
.filter-bar.filters-expanded {
padding: 6px 8px !important;
margin-bottom: 4px !important;