3dtours/RecipesCam
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

web: scan the whole roll, title and size the column, reopen where you left

Browse Source 
The tree column now walks every folder under the one you picked instead of
its first level, so a roll of dated folders inside dated folders is walked to
the bottom. A folder being read turns a ring on its own row, the column is
titled with the folder the tree belongs to, and a divider beside it drags the
width, which is remembered along with the folder the screen was left on.
This commit is contained in:
3dtours
2026-09-28 18:53:07 +07:00
parent 4c65923eff
commit 2b45419ec4
5 changed files with 247 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docker/frontend/src/styles/app.css
+35 -3
View File
@@ -1007,15 +1007,47 @@ input[type="range"] { width: 100%; accent-color: var(--accent); }
is left, the strip keeps its natural height on the bottom. */
.lib-root .adm-col { flex: 1 1 auto; min-height: 0; }
/* The column of folders is a list of names and a count — the stage is the point
of the screen, so the column takes the least it can and gives the rest away. */
of the screen, so the column takes the least it can and gives the rest away.
Its width is a variable the divider writes, and the divider itself is the middle
track, thin enough to read as the seam between the two panels. */
.lib-root .adm-col > .adm-split {
flex: 1 1 auto;
min-height: 0;
align-items: stretch;
grid-template-columns: minmax(88px, 118px) minmax(0, 1fr);
gap: 8px;
grid-template-columns: var(--lib-col, 118px) 9px minmax(0, 1fr);
gap: 0;
}
.lib-grip { cursor: col-resize; border-radius: 999px; touch-action: none; }
.lib-grip:hover, .lib-grip:focus-visible { background: var(--accent-soft); outline: none; }
/* The folder the tree belongs to, named over it: a roll's own name is the one
thing a renamed folder has to say here. */
.lib-col-title {
margin: 0 0 6px;
padding: 0 2px;
font-size: 11.5px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--text-dim);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.lib-root .adm-album { padding: 6px 8px; gap: 6px; }
/* A roll being read turns a ring on its own row. */
.lib-spin {
flex: 0 0 auto;
width: 11px;
height: 11px;
border-radius: 999px;
border: 2px solid var(--border);
border-top-color: var(--accent);
animation: lib-spin 0.7s linear infinite;
}
@keyframes lib-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
.lib-spin { animation-duration: 2.4s; }
}
.lib-root .adm-col > .adm-filmstrip { flex: 0 0 auto; }
.lib-root .adm-album-list { max-height: none; flex: 1 1 auto; min-height: 0; }
.lib-root .adm-stage { min-height: 0; overflow: hidden; }