git_admin/CoRE.Vision
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

archive: add 32px content footer; date section as a bottom card; hide cam scrollbar

Browse Source 
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) <noreply@anthropic.com>
This commit is contained in:
core
2026-06-01 22:27:56 +05:00
parent dcc4cc046f
commit ffddaaa50f
4 changed files with 21 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/archive.html
+8 -1
View File
@@ -23,11 +23,18 @@
<div class="arch-cal" id="calendar"></div>
</div>
</aside>
<div class="arch-content">
<div class="arch-content" id="arch-content">
<div class="player-wrap" id="player">
<div class="hint">Кликните по таймлайну ниже, чтобы смотреть запись</div>
</div>
<div class="timeline" id="timeline"></div>
<footer class="grid-bar" id="arch-bar">
<div class="gb-left"></div>
<div class="gb-center"></div>
<div class="gb-right">
<button class="gb-btn" id="arch-fs" title="Полный экран" aria-label="Полный экран">⛶</button>
</div>
</footer>
</div>
</main>
</div>
frontend/static/app.js
+3
View File
@@ -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(); });
frontend/static/style.css
+9 -5
View File
@@ -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; }
/* контент архива (плеер + таймлайн) */