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

Cards: date-aware display — late checkouts only on future days, hide current-state info off-today

Browse source 
- Future dates: departure time sliver only shows for late checkouts (after default_checkout_time, default 11:00) — on future days every in-house booking is still 'arrived' so the time was showing on every card
- Sliver bracket widens to 19px when a time is shown and the time renders vertically (writing-mode) to fit the narrow space
- Clean/dirty site status pill only shows when viewing today — it reflects current state, meaningless on other dates
- NewBook task pill, task dots, and category header task/dirty badges hidden on future dates

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
jtricerolph 2026-07-04 18:33:07 +00:00
parent 2ec629cb5b
commit b528624be0
3 changed files with 41 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

15
frontend/src/index.css
View file

@ -460,23 +460,30 @@ html, body, #root {
.room-card[data-next-status="unconfirmed"]::after { border-color: #f59e0b; }
.room-card[data-next-status="departed"]::after { border-color: #a855f7; }
/* Departure time shown in left-bracket sliver (while prev booking still 'arrived') */
/* Departure time shown in left-bracket sliver (while prev booking still 'arrived').
The bracket widens to 19px when a time is shown; the time reads vertically. */
.room-card.has-sliver-time[data-previous-status]::before { width: 19px; }
.card-sliver-depart {
position: absolute;
left: -21px;
left: -23px;
width: 19px;
top: 50%;
transform: translateY(-50%);
display: flex;
flex-direction: column;
align-items: center;
gap: 1px;
font-size: 8px;
gap: 2px;
font-size: 9px;
font-weight: 600;
color: var(--col-arrived);
line-height: 1;
pointer-events: none;
white-space: nowrap;
}
.card-sliver-depart .sliver-time {
writing-mode: vertical-rl;
letter-spacing: .04em;
}
/* Blocked room */
.room-card.room-blocked {