Skip to content

schedule end times & dashed border #2036

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Jun 23, 2025
Merged

schedule end times & dashed border #2036

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
585346c
Display end times in Schedule
hasparus Jun 23, 2025
e42759f
Display dashed border if there is no break between sessions
hasparus Jun 23, 2025
9582464
Remove unused import
hasparus Jun 23, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
97 changes: 69 additions & 28 deletions src/app/conf/2025/schedule/_components/schedule-list.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -101,6 +101,19 @@ function getSessionsByDay(
}
}

const timeFormat = new Intl.DateTimeFormat(undefined, {
hour: "2-digit",
minute: "2-digit",
})
const formatBlockTime = (start: string, end?: string) => {
const startDate = parseISO(start)
if (end) {
const endDate = parseISO(end)
return timeFormat.formatRange(startDate, endDate)
}
return timeFormat.format(startDate)
}

export interface ScheduleListProps {
showFilter?: boolean
scheduleData: ScheduleSession[]
Expand Down Expand Up @@ -191,36 +204,64 @@ export function ScheduleList({
{format(parseISO(date), "EEEE, MMMM d")}
</h3>
{Object.entries(concurrentSessionsGroup).map(
([sessionDate, sessions]) => (
<div
key={`concurrent sessions on ${sessionDate}`}
className="lg:mt-px"
>
<div className="mr-px flex flex-col max-lg:ml-px lg:flex-row">
<div className="relative border-neu-50 bg-neu-50 dark:bg-neu-0 max-lg:-mx-px max-lg:my-px max-lg:border-x lg:mr-px">
<span className="typography-body-sm mt-3 inline-block w-20 whitespace-nowrap pb-0.5 pl-4 lg:mr-6 lg:w-28 lg:pb-4 lg:pl-0">
{parseISO(sessionDate).toLocaleTimeString(
undefined,
{
hour: "2-digit",
minute: "2-digit",
},
)}
</span>
([sessionDate, sessions], i, blocks) => {
const blockEnd = sessions[0]?.event_end
const nextBlockStart = blocks[i + 1]?.[0]

const isBreak =
sessions[0]?.event_type
?.toLowerCase()
.includes("break") ||
blocks[i + 1]?.[1]?.[0]?.event_type
?.toLowerCase()
.includes("break")
const hasDashedBorder =
blockEnd && blockEnd === nextBlockStart && !isBreak

return (
<div
key={`concurrent sessions on ${sessionDate}`}
className="relative lg:mt-px [&_div:has(a:hover)]:z-[1]"
>
<div className="mr-px flex flex-col max-lg:ml-px lg:flex-row">
<div className="relative border-neu-50 bg-neu-50 dark:bg-neu-0 max-lg:-mx-px max-lg:my-px max-lg:border-x lg:mr-px">
<span className="typography-body-sm mt-3 inline-block w-20 whitespace-nowrap pb-0.5 pl-4 lg:mr-6 lg:w-28 lg:pb-4 lg:pl-0">
{formatBlockTime(sessionDate, blockEnd)}
</span>
</div>
<div className="relative flex w-full flex-col items-end gap-px lg:flex-row lg:items-start">
{sessions.map(session => (
<ScheduleSessionCard
key={session.id}
session={session}
year={year}
eventsColors={eventsColors}
/>
))}
</div>
</div>
<div className="relative flex w-full flex-col items-end gap-px lg:flex-row lg:items-start">
{sessions.map(session => (
<ScheduleSessionCard
key={session.id}
session={session}
year={year}
eventsColors={eventsColors}
{hasDashedBorder && (
<svg
className="absolute -bottom-px left-0 h-px w-full text-neu-50"
viewBox="0 0 100 1"
preserveAspectRatio="none"
>
<line
x1="0"
y1="0.5"
x2="100"
y2="0.5"
stroke="currentColor"
strokeWidth="1"
strokeDasharray="4,4"
strokeDashoffset="4"
vectorEffect="non-scaling-stroke"
/>
))}
</div>
</svg>
)}
</div>
</div>
),
)
},
)}
</div>
),
Expand All @@ -237,7 +278,7 @@ function BookmarkOnSched({ year }: { year: `202${number}` }) {
href={`https://graphqlconf${year}.sched.com`}
target="_blank"
rel="noreferrer"
className="typography-link mb-8 block w-fit decoration-neu-400"
className="typography-link mb-8 block w-fit decoration-neu-400 max-lg:hidden"
>
Bookmark sessions & plan your days on Sched
<svg
Expand Down