ob/sprint
1
0
Fork 0
mirror of https://github.com/hex248/sprint.git synced 2026-02-07 18:23:03 +00:00
Code Issues Packages Projects Releases Wiki Activity

massively improved timeline scrolling

Browse Source
This commit is contained in:
Oliver Bryan
2026-01-21 18:09:33 +00:00
parent 147d273dbc
commit 4c778eb12c
1 changed files with 11 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
packages/frontend/src/pages/Timeline.tsx
View File

@@ -232,7 +232,7 @@ export default function Timeline() {
> >
<div className="grid border-b bg-muted/20" style={{ gridTemplateColumns }}> <div className="grid border-b bg-muted/20" style={{ gridTemplateColumns }}>
<div <div
className={`px-${BREATHING_ROOM} py-${BREATHING_ROOM} text-xs font-medium text-muted-foreground bg-background border-r`} className={`px-${BREATHING_ROOM} py-${BREATHING_ROOM} text-xs font-medium text-muted-foreground bg-background border-r sticky left-0 z-30`}
> >
Sprint Sprint
</div> </div>
@@ -256,7 +256,7 @@ export default function Timeline() {
return ( return (
<div key={sprint.id} className="grid border-b" style={{ gridTemplateColumns }}> <div key={sprint.id} className="grid border-b" style={{ gridTemplateColumns }}>
<div <div
className={`px-${BREATHING_ROOM} pt-0.5 py-${BREATHING_ROOM} flex flex-col gap-${BREATHING_ROOM} bg-background relative z-20 border-r`} className={`px-${BREATHING_ROOM} pt-0.5 py-${BREATHING_ROOM} flex flex-col gap-${BREATHING_ROOM} bg-background relative z-30 border-r sticky left-0`}
> >
<div className={`flex items-center justify-between gap-3`}> <div className={`flex items-center justify-between gap-3`}>
<span <span
@@ -291,7 +291,7 @@ export default function Timeline() {
style={{ gridColumn: "2 / -1" }} style={{ gridColumn: "2 / -1" }}
> >
<div <div
className="absolute inset-0 grid z-20 pointer-events-none" className="absolute inset-0 grid z-10 pointer-events-none"
style={{ style={{
gridTemplateColumns: `repeat(${weeks.length}, ${WEEK_COLUMN_WIDTH}px)`, gridTemplateColumns: `repeat(${weeks.length}, ${WEEK_COLUMN_WIDTH}px)`,
}} }}
@@ -305,14 +305,16 @@ export default function Timeline() {
</div> </div>
{todayMarker && ( {todayMarker && (
<div <div
className="absolute inset-y-0 z-20 pointer-events-none" className="absolute inset-y-0 z-10 pointer-events-none"
style={{ left: todayMarker.left }} style={{ left: todayMarker.left }}
> >
<div className="absolute inset-y-0 w-px bg-primary" /> <div
className={cn("absolute inset-y-0 w-px bg-primary", showTodayLabel && "mt-1")}
/>
{showTodayLabel && ( {showTodayLabel && (
<div className="absolute -top-5.5 -translate-x-1/2"> <div className="absolute -top-1.5">
<span className="rounded bg-primary px-1 py-0.5 text-[10px] font-semibold text-primary-foreground whitespace-nowrap"> <span className="bg-primary px-1 py-0.5 text-[10px] font-semibold text-primary-foreground whitespace-nowrap">
{todayMarker.label} TODAY
</span> </span>
</div> </div>
)} )}
@@ -341,7 +343,7 @@ export default function Timeline() {
<div className="grid" style={{ gridTemplateColumns }}> <div className="grid" style={{ gridTemplateColumns }}>
<div <div
className={`px-${BREATHING_ROOM} pt-0.5 py-${BREATHING_ROOM} flex flex-col gap-${BREATHING_ROOM} bg-background relative z-20 border-r`} className={`px-${BREATHING_ROOM} pt-0.5 py-${BREATHING_ROOM} flex flex-col gap-${BREATHING_ROOM} bg-background relative z-30 border-r sticky left-0`}
> >
<div className="text-sm font-medium">Backlog</div> <div className="text-sm font-medium">Backlog</div>
{issueGroup.unassigned.length === 0 && ( {issueGroup.unassigned.length === 0 && (