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

web: pick a photo's landing slot with two columns

Browse Source 
The pictures pane now reads as a pool of every upload on the left, three
destination rows on the right. Each photo carries one button per
destination; picking the one it already sits in takes it off the landing
page without deleting the row (slot off), which is what the old select's
"not on the landing page" option did.
This commit is contained in:
3dtours
2026-09-18 16:28:55 +07:00
parent 4d0d44170f
commit ee2c402438
4 changed files with 133 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docker/frontend/src/styles/app.css
+39 -2
View File
@@ -394,8 +394,45 @@ 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; }
.adm-slot { display: flex; flex-direction: column; gap: 3px; letter-spacing: 0.04em; }
.adm-slot select { width: 100%; }
/* Curating pictures: the pool of uploads on the left, the three landing
sections on the right. One picker button per destination under each photo. */
.adm-cols { display: grid; grid-template-columns: minmax(0, 1fr) 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; }
.adm-cols .adm-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.adm-choices { display: flex; flex-direction: column; gap: 4px; }
.adm-choice {
font: inherit;
font-size: 11px;
letter-spacing: 0.06em;
text-transform: uppercase;
text-align: left;
padding: 5px 8px;
cursor: pointer;
color: var(--text);
background: var(--bg-sunken);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
}
.adm-choice:hover:not(:disabled) { border-color: var(--accent-line); }
.adm-choice.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.adm-choice:disabled { opacity: 0.5; cursor: default; }
.adm-row { border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); padding: 10px; }
.adm-row-title {
display: flex;
align-items: center;
gap: 8px;
margin: 0 0 8px;
font-size: 11.5px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-dim);
}
.adm-row-count { font-family: var(--mono); color: var(--text); }
.adm-row-empty { margin: 0; }
.adm-thumb { margin: 0; border: 1px solid var(--border-soft); border-radius: var(--radius-sm); overflow: hidden; background: var(--bg-sunken); }
.adm-thumb img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.adm-thumb figcaption { padding: 3px 6px; font-family: var(--mono); font-size: 10.5px; color: var(--text-dim); }
.adm-spacer { flex: 1 1 auto; }
.adm-note { margin: 12px 0; }
.adm-sub { margin: 0 0 14px; }