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:
@@ -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>
|
||||||
|
|||||||
@@ -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
@@ -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>
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
@@ -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 */
|
||||||
|
|||||||
Reference in New Issue
Block a user