ui: drop the Live view submenu; turn nav into a 64x64 icon rail

All grid/play/fullscreen submenu items are removed from every sidebar
(index, archive, settings, layout) — those controls now live in the live
grid footer. The sidebar becomes a narrow 72px rail and Live/Archive/Settings
render as 64x64 icon tiles (icon + small caption, active = inset red ring).
The layout.html gear (only link to /layout) is dropped with its submenu, so
the layout editor is now reachable by URL only.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-06-01 21:57:08 +05:00
parent 5b8f11dbb6
commit 02efe2ab4b
6 changed files with 10 additions and 51 deletions
+1 -1
View File
@@ -1 +1 @@
0.0.140 0.0.141
-9
View File
@@ -10,15 +10,6 @@
<div class="layout"> <div class="layout">
<aside> <aside>
<a class="nav-item" href="/" data-nav="live"><span class="ico"></span>Live view</a> <a class="nav-item" href="/" data-nav="live"><span class="ico"></span>Live view</a>
<div class="subnav">
<a class="subitem" data-grid="2" href="/?grid=2">4</a>
<a class="subitem" data-grid="3" href="/?grid=3">9</a>
<a class="subitem" data-grid="4" href="/?grid=4">16</a>
<a class="subitem" data-grid="5" href="/?grid=5">25</a>
<a class="subitem" data-grid="6" href="/?grid=6">36</a>
<a class="subitem" data-grid="7" href="/?grid=7">49</a>
<a class="subitem" data-grid="8" href="/?grid=8">64</a>
</div>
<a class="nav-item active" href="/archive" data-nav="archive"><span class="ico">🗄</span>Архив</a> <a class="nav-item active" href="/archive" data-nav="archive"><span class="ico">🗄</span>Архив</a>
<div class="aside-spacer"></div> <div class="aside-spacer"></div>
<a class="nav-item" href="/settings" data-nav="settings"><span class="ico"></span>Настройки</a> <a class="nav-item" href="/settings" data-nav="settings"><span class="ico"></span>Настройки</a>
-11
View File
@@ -10,17 +10,6 @@
<div class="layout"> <div class="layout">
<aside> <aside>
<a class="nav-item active" href="/" data-nav="live"><span class="ico"></span>Live view</a> <a class="nav-item active" href="/" data-nav="live"><span class="ico"></span>Live view</a>
<div class="subnav" id="live-subnav">
<a class="subitem subplay" id="play-toggle" href="#" title="Начать/остановить просмотр">⏹ Стоп</a>
<a class="subitem" data-grid="2" href="/?grid=2">4</a>
<a class="subitem" data-grid="3" href="/?grid=3">9</a>
<a class="subitem" data-grid="4" href="/?grid=4">16</a>
<a class="subitem" data-grid="5" href="/?grid=5">25</a>
<a class="subitem" data-grid="6" href="/?grid=6">36</a>
<a class="subitem" data-grid="7" href="/?grid=7">49</a>
<a class="subitem" data-grid="8" href="/?grid=8">64</a>
<a class="subitem subfs" id="fs-grid" href="#" title="Развернуть сетку на весь экран">⛶ Полный экран</a>
</div>
<a class="nav-item" href="/archive" data-nav="archive"><span class="ico">🗄</span>Архив</a> <a class="nav-item" href="/archive" data-nav="archive"><span class="ico">🗄</span>Архив</a>
<div class="aside-spacer"></div> <div class="aside-spacer"></div>
<a class="nav-item" href="/settings" data-nav="settings"><span class="ico"></span>Настройки</a> <a class="nav-item" href="/settings" data-nav="settings"><span class="ico"></span>Настройки</a>
+1 -13
View File
@@ -9,19 +9,7 @@
<body data-page="layout"> <body data-page="layout">
<div class="layout"> <div class="layout">
<aside> <aside>
<div class="navline"> <a class="nav-item" href="/" data-nav="live"><span class="ico"></span>Live view</a>
<a class="nav-item" href="/" data-nav="live" style="flex:1"><span class="ico"></span>Live view</a>
<a class="nav-gear active" href="/layout" title="Настройка раскладки"></a>
</div>
<div class="subnav">
<a class="subitem" data-grid="2" href="/?grid=2">4</a>
<a class="subitem" data-grid="3" href="/?grid=3">9</a>
<a class="subitem" data-grid="4" href="/?grid=4">16</a>
<a class="subitem" data-grid="5" href="/?grid=5">25</a>
<a class="subitem" data-grid="6" href="/?grid=6">36</a>
<a class="subitem" data-grid="7" href="/?grid=7">49</a>
<a class="subitem" data-grid="8" href="/?grid=8">64</a>
</div>
<a class="nav-item" href="/archive" data-nav="archive"><span class="ico">🗄</span>Архив</a> <a class="nav-item" href="/archive" data-nav="archive"><span class="ico">🗄</span>Архив</a>
<div class="aside-spacer"></div> <div class="aside-spacer"></div>
<a class="nav-item" href="/settings" data-nav="settings"><span class="ico"></span>Настройки</a> <a class="nav-item" href="/settings" data-nav="settings"><span class="ico"></span>Настройки</a>
-9
View File
@@ -10,15 +10,6 @@
<div class="layout"> <div class="layout">
<aside> <aside>
<a class="nav-item" href="/" data-nav="live"><span class="ico"></span>Live view</a> <a class="nav-item" href="/" data-nav="live"><span class="ico"></span>Live view</a>
<div class="subnav">
<a class="subitem" data-grid="2" href="/?grid=2">4</a>
<a class="subitem" data-grid="3" href="/?grid=3">9</a>
<a class="subitem" data-grid="4" href="/?grid=4">16</a>
<a class="subitem" data-grid="5" href="/?grid=5">25</a>
<a class="subitem" data-grid="6" href="/?grid=6">36</a>
<a class="subitem" data-grid="7" href="/?grid=7">49</a>
<a class="subitem" data-grid="8" href="/?grid=8">64</a>
</div>
<a class="nav-item" href="/archive" data-nav="archive"><span class="ico">🗄</span>Архив</a> <a class="nav-item" href="/archive" data-nav="archive"><span class="ico">🗄</span>Архив</a>
<div class="aside-spacer"></div> <div class="aside-spacer"></div>
<a class="nav-item active" href="/settings" data-nav="settings"><span class="ico"></span>Настройки</a> <a class="nav-item active" href="/settings" data-nav="settings"><span class="ico"></span>Настройки</a>
+8 -8
View File
@@ -15,7 +15,7 @@
--err: #ef4444; --err: #ef4444;
--header-h: 48px; --header-h: 48px;
--footer-h: 22px; --footer-h: 22px;
--sidebar-w: 240px; --sidebar-w: 72px;
} }
* { box-sizing: border-box; } * { box-sizing: border-box; }
@@ -62,7 +62,7 @@ footer.app-footer .clock { font-size: 11px; color: var(--text); }
footer.app-footer #footer-version { font-variant-numeric: tabular-nums; } 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; align-items: center; gap: 6px; padding: 8px 0; overflow: hidden;
} }
.aside-title { .aside-title {
padding: 12px 14px 8px; font-size: 11px; text-transform: uppercase; padding: 12px 14px 8px; font-size: 11px; text-transform: uppercase;
@@ -70,14 +70,14 @@ aside {
} }
/* ── Навигация в сайдбаре ── */ /* ── Навигация в сайдбаре ── */
.nav-item { .nav-item {
display: flex; align-items: center; gap: 12px; padding: 12px 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
color: var(--text-dim); text-decoration: none; font-weight: 500; font-size: 14px; width: 64px; height: 64px; padding: 0; border-radius: 12px;
border-left: 3px solid transparent; background: none; border-top: 0; border-right: 0; color: var(--text-dim); text-decoration: none; font-weight: 500; font-size: 9px; line-height: 1.15;
border-bottom: 0; cursor: pointer; width: 100%; text-align: left; font-family: inherit; border: 0; background: none; cursor: pointer; text-align: center; font-family: inherit;
} }
.nav-item:hover { background: var(--panel-2); color: var(--text); } .nav-item:hover { background: var(--panel-2); color: var(--text); }
.nav-item.active { background: var(--panel-2); color: #fff; border-left-color: #c0392b; } .nav-item.active { background: var(--panel-2); color: #fff; box-shadow: inset 0 0 0 1px #c0392b; }
.nav-item .ico { font-size: 17px; line-height: 1; width: 20px; text-align: center; } .nav-item .ico { font-size: 26px; line-height: 1; width: auto; text-align: center; }
.aside-spacer { flex: 1; } .aside-spacer { flex: 1; }
/* Иконка настройки раскладки рядом с Live view */ /* Иконка настройки раскладки рядом с Live view */