live: add a control footer under the grid (paging + play/stop + fullscreen)

The live-view <main> now hosts its own 32px footer bar beneath the grid:
prev page on the left, play/stop in the centre, next page + fullscreen on the
right — all icon buttons. Pagination is new: cameras are split into pages of
dim² cells, prev/next walk the pages (page 0 still honours a saved manual
layout), and the arrows disable at the bounds. Fullscreen now targets <main>
so the control bar stays visible in fullscreen (the global stats footer is
outside <main> and hides as before). The sidebar play/fullscreen items now
target <main> too.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-06-01 21:36:52 +05:00
parent b29b808c6d
commit c6cdcf55b2
4 changed files with 94 additions and 17 deletions
+17
View File
@@ -173,6 +173,23 @@ input[type="date"], input[type="number"], select {
/* «Соло»: одна камера на весь экран (двойной клик по ячейке в полноэкранном режиме) */
.grid.solo { grid-template-columns: 1fr !important; grid-template-rows: 1fr !important; }
.grid.solo > .tile:not(.solo) { display: none; }
/* ── Панель управления под сеткой (футер фрейма live): листание + play/stop + фулскрин ── */
footer.grid-bar {
height: 32px; flex: none; display: flex; align-items: center; gap: 8px;
padding: 0 8px; background: var(--panel); border-top: 1px solid var(--border);
}
.grid-bar .gb-left { flex: 1; display: flex; justify-content: flex-start; }
.grid-bar .gb-center { flex: 0 0 auto; display: flex; justify-content: center; gap: 8px; }
.grid-bar .gb-right { flex: 1; display: flex; justify-content: flex-end; gap: 8px; }
.grid-bar .gb-btn {
height: 24px; min-width: 30px; padding: 0 8px; border: 1px solid var(--border);
background: var(--panel-2); color: var(--text); border-radius: 6px; cursor: pointer;
font-size: 14px; line-height: 1; display: inline-flex; align-items: center; justify-content: center;
}
.grid-bar .gb-btn:hover:not(:disabled) { border-color: #c0392b; color: #fff; }
.grid-bar .gb-btn:disabled { opacity: .3; cursor: default; }
.grid-bar .gb-play { min-width: 42px; font-size: 15px; }
.tile {
position: relative; background: #05070a; border: 1px solid var(--border);
display: flex; align-items: center; justify-content: center; overflow: hidden;