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

web: PICTURES back to two album columns, every frame editable in place

Browse Source 
The pane is two columns of the same thing: the uploads on the left, one
album per account, and the landing on the right, one album per section —
Film strip, Live preset tester, Custom recipe creator. QR is no longer a
shelf of its own: the code belongs to the frame.

Both columns list their albums the same way and draw the open album's
frames as cards, each with its labels, the four section boxes, its QR
code and the delete button under the picture. Ticking a box files the
frame into that album on the other side straight away.
This commit is contained in:
3dtours
2026-09-18 20:17:25 +07:00
parent 07fbadcdc5
commit f263413313
4 changed files with 147 additions and 179 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docker/frontend/src/styles/app.css
+7 -39
View File
@@ -475,10 +475,10 @@ input[type="range"] { width: 100%; accent-color: var(--accent); }
.adm-brand { display: flex; align-items: center; gap: 6px; font-weight: 650; letter-spacing: -0.01em; color: var(--text); text-decoration: none; }
.adm-brand em { font-style: normal; font-weight: 400; color: var(--accent); }
.adm-brand img { border-radius: 8px; }
/* Curating pictures: the albums on the left, the chosen frame and its strip of
thumbnails on the right. The album column is the narrow one — it is a list of
names — and scrolls on its own so the strip beside it never moves. */
.adm-cols { display: grid; grid-template-columns: minmax(200px, 280px) minmax(0, 1fr); gap: 16px; align-items: start; }
/* Curating pictures: two album columns of the same shape — the uploads (one
album per account) and the landing (one album per section). Each column
lists its albums and then draws the open album's frames. */
.adm-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
@media (max-width: 1100px) { .adm-cols { grid-template-columns: minmax(0, 1fr); } }
.adm-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
/* The filters over the album list: one name box, two pickers. */
@@ -494,7 +494,9 @@ input[type="range"] { width: 100%; accent-color: var(--accent); }
}
.adm-filters { display: flex; gap: 6px; }
.adm-filters .adm-input { min-width: 0; }
.adm-album-list { display: flex; flex-direction: column; gap: 4px; max-height: 62vh; overflow-y: auto; padding-right: 2px; }
/* A shelf of albums: it scrolls on its own so the frames below stay reachable
however many accounts or sections there are. */
.adm-album-list { display: flex; flex-direction: column; gap: 4px; max-height: 38vh; overflow-y: auto; padding-right: 2px; }
.adm-album {
display: flex;
align-items: center;
@@ -514,39 +516,6 @@ input[type="range"] { width: 100%; accent-color: var(--accent); }
.adm-album.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.adm-album-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-album-count { font-family: var(--mono); font-size: 11px; }
/* The frame that is up: the picture on the left, everything about it on the
right — including the four landing sections it may appear in. */
.adm-big {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(220px, 300px);
gap: 12px;
border: 1px solid var(--border);
border-radius: var(--radius);
background: var(--bg);
padding: 10px;
}
.adm-big-img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; border-radius: var(--radius-sm); background: var(--bg-sunken); }
.adm-big-side { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.adm-qr-inline { border-radius: var(--radius-sm); }
/* The album's strip: thumbnails in one row, scrolled sideways when they
overflow the pane rather than wrapping into a wall of pictures. */
.adm-filmstrip { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.adm-thumb {
flex: 0 0 132px;
margin: 0;
padding: 0;
font: inherit;
cursor: pointer;
border: 1px solid var(--border-soft);
border-radius: var(--radius-sm);
overflow: hidden;
background: var(--bg-sunken);
color: var(--text-dim);
}
.adm-thumb:hover { border-color: var(--accent-line); }
.adm-thumb.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.adm-thumb img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.adm-thumb-cap { display: block; padding: 3px 6px; font-family: var(--mono); font-size: 10.5px; }
/* The three destinations sit on one line under the photo, each an independent
checkbox — tick all three and the photo shows in all three sections. */
.adm-choices { display: flex; flex-wrap: wrap; gap: 5px; }
@@ -569,7 +538,6 @@ input[type="range"] { width: 100%; accent-color: var(--accent); }
.adm-choice:has(input:checked) { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.adm-choice:has(input:disabled) { opacity: 0.5; cursor: default; }
.adm-choice input { margin: 0; accent-color: var(--accent); }
.adm-row { border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); padding: 10px; }
.adm-row-title {
display: flex;
align-items: center;