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

archive: replace toolbar with a 220px split sidebar (camera list + calendar)

Browse Source 
The player-frame toolbar (camera <select> + date input) is removed. Archive
main is now a row: a 220px sidebar split in half by height — the top half is
a scrollable clickable camera list, the bottom half holds the date input plus
a new inline month calendar (prev/next month, today + selected highlight,
Monday-first). Picking a camera or a day loads that day's recordings. The
player and DVR timeline move into an .arch-content column on the right.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
core
2026-06-01 22:14:59 +05:00
parent ab817e0d31
commit dcc4cc046f
4 changed files with 133 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/static/style.css
+41 -1
View File
@@ -247,7 +247,47 @@ footer.grid-bar {
}
/* ── Архив ── */
.archive-main { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.archive-main { flex: 1; display: flex; overflow: hidden; } /* сайдбар + контент */
/* левый сайдбар архива: 220px, поделён по высоте пополам */
.arch-side {
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-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;
}
.arch-dateinput {
width: 100%; background: var(--panel-2); color: var(--text); border: 1px solid var(--border);
border-radius: 6px; padding: 5px 8px; font-size: 13px;
}
.arch-cal { user-select: none; }
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.cal-title { font-size: 13px; font-weight: 600; color: var(--text); }
.cal-nav {
background: var(--panel-2); border: 1px solid var(--border); color: var(--text);
width: 24px; height: 24px; border-radius: 6px; cursor: pointer; padding: 0; line-height: 1; font-size: 14px;
}
.cal-nav:hover { border-color: #c0392b; color: #fff; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cal-wd { font-size: 10px; color: var(--text-dim); text-align: center; padding: 2px 0; }
.cal-day {
text-align: center; font-size: 12px; padding: 4px 0; border-radius: 5px; cursor: pointer;
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.today { box-shadow: inset 0 0 0 1px var(--text-dim); }
.cal-day.sel { background: #c0392b; color: #fff; font-weight: 600; }
/* контент архива (плеер + таймлайн) */
.arch-content { flex: 1; display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.player-wrap { flex: 1; background: #000; display: flex; align-items: center; justify-content: center; min-height: 0; }
.player-wrap video { max-width: 100%; max-height: 100%; }
.player-wrap .hint { color: var(--text-dim); }