grabowski/trip-plan
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix calendar collapsing into a vertical list

Browse Source 
The stay-bands restructure changed the calendar markup to per-week rows (.cal-weekdays / .cal-week / .cal-week-days / .cal-week-bands) but styles.css still only styled the old flat .calendar-grid, so day cells stacked vertically. Adds the 7-column grid layout for the new structure plus the missing stay-band styles (lanes, rounded ends, hover), and updates the narrow-screen rules.
This commit is contained in:
grabowski
2026-07-19 01:42:44 +07:00
parent 154f56a0a0
commit 430e870426
1 changed files with 18 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/css/styles.css
+18 -2
View File
@@ -223,7 +223,20 @@ textarea.input { resize: vertical; }
.legend { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-bottom: 0.9rem; }
.legend-item { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.78rem; color: var(--text-muted); }
.legend-dot { width: 0.7rem; height: 0.7rem; border-radius: 50%; display: inline-block; }
.calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.calendar { display: flex; flex-direction: column; gap: 6px; }
.cal-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal-week { display: flex; flex-direction: column; gap: 3px; }
.cal-week-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
/* Stay bands: an all-day-event strip above each week's day cells. The strip is
a 7-column grid mirroring the days row; bands place themselves via inline
grid-column/row (lane) styles from stayBands.js. */
.cal-week-bands { --band-h: 1.45rem; display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px 6px; }
.cal-band { height: var(--band-h); display: flex; align-items: center; min-width: 0; padding: 0 0.5rem; font-size: 0.72rem; font-weight: 600; color: #334155; background: color-mix(in srgb, var(--chip) 20%, white); border: 1px solid color-mix(in srgb, var(--chip) 45%, white); border-left: 3px solid var(--chip); cursor: pointer; transition: background 0.12s; }
.cal-band:hover { background: color-mix(in srgb, var(--chip) 32%, white); }
.cal-band.round-l { border-top-left-radius: 999px; border-bottom-left-radius: 999px; }
.cal-band.round-r { border-top-right-radius: 999px; border-bottom-right-radius: 999px; }
.cal-band-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-weekday { text-align: center; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-faint); padding-bottom: 0.2rem; }
.cal-day { min-height: 92px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0.35rem; display: flex; flex-direction: column; gap: 0.25rem; }
.cal-day.clickable { cursor: pointer; transition: border-color 0.12s, box-shadow 0.12s; }
@@ -428,7 +441,10 @@ textarea.input { resize: vertical; }
.trip-header-actions { width: 100%; }
}
@media (max-width: 480px) {
.calendar-grid { gap: 3px; }
.calendar { gap: 3px; }
.cal-weekdays, .cal-week-days { gap: 3px; }
.cal-week-bands { gap: 2px 3px; --band-h: 1.2rem; }
.cal-band { font-size: 0.62rem; padding: 0 0.3rem; }
.cal-weekday { font-size: 0.6rem; }
.cal-day { min-height: 60px; padding: 0.2rem; }
}