ui: add a 22px bottom footer (brand + version)
Footer is a third layout block; .layout height now subtracts --footer-h (22px) so it never overlaps the full-height video grid. Injected via JS only on pages with the main layout (skips login); shows CoRE.Vision brand + version. VERSION 0.0.135. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -139,6 +139,16 @@ function ensureVersionEl() {
|
|||||||
aside.appendChild(d);
|
aside.appendChild(d);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
function ensureFooter() {
|
||||||
|
// футер 22px снизу — только на страницах с основной раскладкой (не на login)
|
||||||
|
if (document.querySelector("footer.app-footer") || !document.querySelector(".layout")) return;
|
||||||
|
const f = document.createElement("footer");
|
||||||
|
f.className = "app-footer";
|
||||||
|
f.innerHTML = `<span class="brand">CoRE<span>.Vision</span></span>` +
|
||||||
|
`<span class="spacer"></span>` +
|
||||||
|
`<span id="footer-version"></span>`;
|
||||||
|
document.body.appendChild(f);
|
||||||
|
}
|
||||||
async function refreshStats() {
|
async function refreshStats() {
|
||||||
const el = document.getElementById("sys-stats");
|
const el = document.getElementById("sys-stats");
|
||||||
try {
|
try {
|
||||||
@@ -148,6 +158,8 @@ async function refreshStats() {
|
|||||||
` Диск <b>${s.disk.used_gb}/${s.disk.total_gb} GB</b>`;
|
` Диск <b>${s.disk.used_gb}/${s.disk.total_gb} GB</b>`;
|
||||||
const v = document.getElementById("app-version");
|
const v = document.getElementById("app-version");
|
||||||
if (v && s.version) v.textContent = "v" + s.version;
|
if (v && s.version) v.textContent = "v" + s.version;
|
||||||
|
const fv = document.getElementById("footer-version");
|
||||||
|
if (fv && s.version) fv.textContent = "v" + s.version;
|
||||||
} catch (e) { /* нет связи / 401 — молчим */ }
|
} catch (e) { /* нет связи / 401 — молчим */ }
|
||||||
}
|
}
|
||||||
// ограничение подменю раскладок (режим 16+) — на любой странице с .subnav
|
// ограничение подменю раскладок (режим 16+) — на любой странице с .subnav
|
||||||
@@ -2037,6 +2049,7 @@ document.addEventListener("DOMContentLoaded", async () => {
|
|||||||
startClock();
|
startClock();
|
||||||
bindLogout();
|
bindLogout();
|
||||||
ensureVersionEl();
|
ensureVersionEl();
|
||||||
|
ensureFooter();
|
||||||
refreshStats(); setInterval(refreshStats, 5000);
|
refreshStats(); setInterval(refreshStats, 5000);
|
||||||
applyGridMenuLimit();
|
applyGridMenuLimit();
|
||||||
const page = document.body.dataset.page;
|
const page = document.body.dataset.page;
|
||||||
|
|||||||
@@ -14,6 +14,7 @@
|
|||||||
--warn: #f59e0b;
|
--warn: #f59e0b;
|
||||||
--err: #ef4444;
|
--err: #ef4444;
|
||||||
--header-h: 48px;
|
--header-h: 48px;
|
||||||
|
--footer-h: 22px;
|
||||||
--sidebar-w: 240px;
|
--sidebar-w: 240px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -47,7 +48,16 @@ nav a.active { background: var(--accent); color: #fff; }
|
|||||||
.clock { font-variant-numeric: tabular-nums; color: var(--text); }
|
.clock { font-variant-numeric: tabular-nums; color: var(--text); }
|
||||||
|
|
||||||
/* ── Раскладка ── */
|
/* ── Раскладка ── */
|
||||||
.layout { display: flex; height: calc(100% - var(--header-h)); }
|
.layout { display: flex; height: calc(100% - var(--header-h) - var(--footer-h)); }
|
||||||
|
|
||||||
|
/* ── Футер ── */
|
||||||
|
footer.app-footer {
|
||||||
|
height: var(--footer-h); display: flex; align-items: center; gap: 14px;
|
||||||
|
padding: 0 14px; background: var(--panel); border-top: 1px solid var(--border);
|
||||||
|
font-size: 11px; color: var(--text-dim);
|
||||||
|
}
|
||||||
|
footer.app-footer .brand { font-size: 12px; }
|
||||||
|
footer.app-footer #footer-version { font-variant-numeric: tabular-nums; }
|
||||||
aside {
|
aside {
|
||||||
width: var(--sidebar-w); background: var(--panel); border-right: 1px solid var(--border);
|
width: var(--sidebar-w); background: var(--panel); border-right: 1px solid var(--border);
|
||||||
display: flex; flex-direction: column; overflow: hidden;
|
display: flex; flex-direction: column; overflow: hidden;
|
||||||
|
|||||||
Reference in New Issue
Block a user