hotel-manage-stack/maintenance
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Photo lightbox, timeline photo previews, subtle edit/delete footer

Browse source 
- Photos open in a full-screen lightbox overlay instead of navigating to a new tab (fixes PWA back-button issue)
- DB migration adds photo_id to task_events; photo upload logs the reference so activity timeline can show a clickable thumbnail for each 'Photo added' event
- Edit and Delete buttons moved to a quiet ghost-button footer at the bottom-right of the modal

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
jtricerolph 2026-07-22 10:59:51 +00:00
parent 4ab9eb4035
commit 5d62050745
6 changed files with 94 additions and 27 deletions
Download patch file Download diff file Expand all files Collapse all files

29
frontend/src/index.css
View file

@ -336,6 +336,16 @@ html, body, #root { height: 100%; margin: 0; font-size: 14px; }
display: flex;
}
.modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; flex-wrap: wrap; }
.modal-footer-actions { display: flex; gap: 12px; justify-content: flex-end; margin-top: 20px; padding-top: 12px; border-top: 1px solid var(--card-border); }
.btn-ghost-sm {
display: inline-flex; align-items: center; gap: 5px;
padding: 4px 8px; border-radius: 6px; border: none; background: none;
font-size: 12px; color: var(--text-mid); cursor: pointer; font-family: var(--font);
transition: color .12s, background .12s;
}
.btn-ghost-sm:hover { color: var(--text-dark); background: var(--card-border); }
.btn-ghost-danger { color: var(--danger); }
.btn-ghost-danger:hover { color: var(--danger); background: var(--danger-bg); }
/* ── Timeline / thread ─────────────────────────────────────── */
.timeline { margin: 8px 0; }
@ -351,6 +361,9 @@ html, body, #root { height: 100%; margin: 0; font-size: 14px; }
.timeline-body { flex: 1; min-width: 0; }
.timeline-note { white-space: pre-wrap; }
.timeline-meta { font-size: 11.5px; color: var(--text-mid); margin-top: 2px; }
.timeline-photo-thumb { margin: 6px 0 2px; cursor: pointer; display: inline-block; }
.timeline-photo-thumb img { width: 80px; height: 80px; object-fit: cover; border-radius: 6px; border: 1px solid var(--card-border); transition: opacity .12s; }
.timeline-photo-thumb img:hover { opacity: 0.8; }
/* ── Photos ────────────────────────────────────────────────── */
.photo-grid { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0; }
@ -380,6 +393,22 @@ html, body, #root { height: 100%; margin: 0; font-size: 14px; }
padding: 0;
}
/* ── Lightbox ──────────────────────────────────────────────── */
.lightbox-overlay {
position: fixed; inset: 0; z-index: 200;
background: rgba(0,0,0,.92);
display: flex; align-items: center; justify-content: center;
padding: 16px;
}
.lightbox-img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 4px; }
.lightbox-close {
position: absolute; top: 16px; right: 16px;
background: rgba(255,255,255,.15); border: none; border-radius: 50%;
width: 38px; height: 38px; display: flex; align-items: center; justify-content: center;
cursor: pointer; color: #fff; transition: background .12s;
}
.lightbox-close:hover { background: rgba(255,255,255,.28); }
/* ── Tables ────────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
table.data { width: 100%; border-collapse: collapse; font-size: 13px; }