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

Add hourly day timeline and red now indicators to the calendar

Browse Source 
Days with 4+ entries open with an hour-grid timeline in the day editor:
untimed entries in an all-day strip, timed ones positioned by start/end
with side-by-side columns for overlaps, click-to-edit. Layout math lives
in a pure, unit-tested module (timelineLayout.js).

Today's month-grid cell gets a vertical red slider positioned by the
fraction of the day elapsed; the timeline gets the classic horizontal
red current-time line. Both tick every minute with cleanup on unmount,
and the initial positioning runs unconditionally while the node is
still detached (the isConnected self-heal gates only interval ticks).

Also splits entryRow rendering out of dayEditor.js to stay under the
500-line cap.
This commit is contained in:
grabowski
2026-08-30 12:49:17 +02:00
parent f272e74b84
commit b0bdd2570c
10 changed files with 725 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/css/timeline.css
+58
View File
@@ -0,0 +1,58 @@
/* Hourly day-timeline (dayTimeline.js) and the "now" indicators in both the
month calendar and the timeline (see docs/API.md "Hourly day timeline &
'now' indicator"). Split out of styles.css — which is at its 500-line cap
— following the same per-feature stylesheet convention as checklist.css. */
:root {
--now: #ef4444;
}
/* ---------- Day timeline (day-editor slideover) ---------- */
.day-timeline { display: flex; flex-direction: column; gap: 0.6rem; padding-bottom: 0.6rem; border-bottom: 1px solid var(--border); }
.dt-allday { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.dt-chip { display: inline-flex; align-items: center; gap: 0.3rem; max-width: 100%; border: none; border-left: 3px solid var(--chip); border-radius: 6px; background: color-mix(in srgb, var(--chip) 16%, white); color: #334155; font-size: 0.78rem; font-weight: 600; padding: 0.2rem 0.5rem; cursor: pointer; }
.dt-chip-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 11rem; }
.dt-grid-wrap { position: relative; display: flex; }
.dt-hours { flex: 1; display: flex; flex-direction: column; }
.dt-hour-row { flex-shrink: 0; box-sizing: border-box; border-top: 1px solid var(--border); padding-left: 3rem; position: relative; }
.dt-hour-row:first-child { border-top: none; }
.dt-hour-label { position: absolute; left: 0; top: -0.55em; width: 2.7rem; font-size: 0.68rem; font-weight: 700; color: var(--text-faint); text-align: right; padding-right: 0.4rem; }
.dt-events { position: absolute; inset: 0; left: 3rem; }
.dt-block {
position: absolute;
box-sizing: border-box;
overflow: hidden;
border: none;
border-left: 3px solid var(--chip);
border-radius: 5px;
background: color-mix(in srgb, var(--chip) 22%, white);
color: #334155;
font-size: 0.74rem;
font-weight: 600;
text-align: left;
padding: 0.15rem 0.4rem;
margin-right: 3px;
cursor: pointer;
display: flex;
align-items: center;
gap: 0.25rem;
}
.dt-block-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dt-now-line { position: absolute; left: 0; right: 0; height: 2px; background: var(--now); z-index: 3; pointer-events: none; }
.dt-now-dot { position: absolute; left: -0.3rem; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--now); box-shadow: 0 0 0 2px var(--surface); }
/* ---------- Month calendar "now" slider (calendar.js) ---------- */
.cal-day.cal-today { position: relative; }
.cal-today .cal-daynum { color: var(--now); font-weight: 800; }
.cal-now-slider { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--now); pointer-events: none; z-index: 2; }
.cal-now-dot { position: absolute; top: -3px; left: 50%; transform: translateX(-50%); width: 7px; height: 7px; border-radius: 50%; background: var(--now); box-shadow: 0 0 0 2px var(--surface); }
@media (max-width: 480px) {
.dt-hour-row { padding-left: 2.4rem; }
.dt-hour-label { width: 2.1rem; }
.dt-events { left: 2.4rem; }
}