From ffddaaa50faa1ffe80835c97878519f294aec6b7 Mon Sep 17 00:00:00 2001 From: core Date: Mon, 1 Jun 2026 22:27:56 +0500 Subject: [PATCH] archive: add 32px content footer; date section as a bottom card; hide cam scrollbar The archive content frame gets a 32px footer (reusing the live grid-bar look) with a fullscreen button that expands the player + timeline. The sidebar date section is now a bottom-anchored card (panel-2, bordered, rounded) holding the date input above the inline calendar; the camera list fills the space above it and its scrollbar is hidden (still scrollable). Calendar colours tweaked to sit on the card. Co-Authored-By: Claude Opus 4.8 (1M context) --- VERSION | 2 +- frontend/archive.html | 9 ++++++++- frontend/static/app.js | 3 +++ frontend/static/style.css | 14 +++++++++----- 4 files changed, 21 insertions(+), 7 deletions(-) diff --git a/VERSION b/VERSION index bbb8b6e..798a352 100644 --- a/VERSION +++ b/VERSION @@ -1 +1 @@ -0.0.143 +0.0.144 diff --git a/frontend/archive.html b/frontend/archive.html index 3c6131b..058de67 100644 --- a/frontend/archive.html +++ b/frontend/archive.html @@ -23,11 +23,18 @@
-
+
Кликните по таймлайну ниже, чтобы смотреть запись
+
diff --git a/frontend/static/app.js b/frontend/static/app.js index 2e1bb9e..d16a96a 100644 --- a/frontend/static/app.js +++ b/frontend/static/app.js @@ -1047,6 +1047,9 @@ const Archive = { this.bindCalendar(); this.renderCalendar(); + const fsBtn = document.getElementById("arch-fs"); + if (fsBtn) fsBtn.onclick = (e) => { e.preventDefault(); toggleFullscreen(document.getElementById("arch-content")); }; + // при ресайзе окна пересчитать смещение ленты (центр зависит от ширины вьюпорта) window.addEventListener("resize", () => { if (this.track) this._applyTl(); }); diff --git a/frontend/static/style.css b/frontend/static/style.css index 3be97b5..1a21d45 100644 --- a/frontend/static/style.css +++ b/frontend/static/style.css @@ -253,19 +253,23 @@ footer.grid-bar { width: 220px; flex: none; display: flex; flex-direction: column; background: var(--panel); border-right: 1px solid var(--border); overflow: hidden; } -.arch-cams { flex: 1 1 50%; min-height: 0; overflow-y: auto; border-bottom: 1px solid var(--border); } +/* верхний фрейм — список камер: заполняет всё над карточкой даты, без полосы прокрутки */ +.arch-cams { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: none; } +.arch-cams::-webkit-scrollbar { width: 0; height: 0; display: none; } .arch-cam { padding: 6px 12px; font-size: 13px; color: var(--text); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .arch-cam:hover { background: var(--panel-2); } .arch-cam.active { background: #c0392b; color: #fff; font-weight: 600; } +/* нижний фрейм даты — карточка (дата сверху + календарь), прижата вниз */ .arch-date { - flex: 1 1 50%; min-height: 0; overflow-y: auto; - display: flex; flex-direction: column; gap: 8px; padding: 10px; + flex: none; margin: 10px; padding: 10px; + background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px; + display: flex; flex-direction: column; gap: 8px; } .arch-dateinput { - width: 100%; background: var(--panel-2); color: var(--text); border: 1px solid var(--border); + width: 100%; background: var(--panel); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 5px 8px; font-size: 13px; } .arch-cal { user-select: none; } @@ -283,7 +287,7 @@ footer.grid-bar { color: var(--text); font-variant-numeric: tabular-nums; } .cal-day.empty { visibility: hidden; cursor: default; } -.cal-day:hover:not(.empty) { background: var(--panel-2); } +.cal-day:hover:not(.empty) { background: rgba(255, 255, 255, .07); } .cal-day.today { box-shadow: inset 0 0 0 1px var(--text-dim); } .cal-day.sel { background: #c0392b; color: #fff; font-weight: 600; } /* контент архива (плеер + таймлайн) */