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

Restore collapsible filter accordions alongside new sort chip

Browse source 
Status and Filters dropdowns are back as expanding chips. Sort chip sits inline to the right of the two accordion headers as a peer element in a flex filter-row.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
jtricerolph 2026-07-22 09:53:17 +00:00
parent 513565ecc8
commit 03d1cd2bb6
2 changed files with 95 additions and 38 deletions
Download patch file Download diff file Expand all files Collapse all files

27
frontend/src/index.css
View file

@ -261,8 +261,31 @@ html, body, #root { height: 100%; margin: 0; font-size: 14px; }
.badge-unusable { background: var(--danger); }
/* ── Filter chips ──────────────────────────────────────────── */
.chip-bar { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.chip-divider { width: 1px; height: 20px; background: var(--card-border); flex-shrink: 0; margin: 0 2px; }
.filter-row { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 4px; }
.filter-row .filter-section { flex: 1; min-width: 0; margin-bottom: 0; }
.filter-row .sort-chip { flex-shrink: 0; align-self: center; white-space: nowrap; }
.filter-section { margin-bottom: 10px; }
.filter-section-header {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 10px;
border-radius: 8px;
background: var(--card-bg);
border: 1px solid var(--card-border);
cursor: pointer;
user-select: none;
font-size: 12px;
color: var(--text-mid);
transition: border-color .12s;
}
.filter-section-header:hover { border-color: var(--gold); }
.filter-section-label { font-weight: 600; color: var(--text-dark); white-space: nowrap; }
.filter-section-summary { flex: 1; color: var(--gold); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filter-section-summary.muted { color: var(--text-mid); font-weight: 400; }
.filter-section-chevron { flex-shrink: 0; transition: transform .18s; }
.filter-section-chevron.open { transform: rotate(180deg); }
.chip-bar { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0 4px; align-items: center; }
.chip {
display: inline-flex;
align-items: center;