Skip to content

Commit d4ec48d

Browse files
hasparushasparus
committed
Improve the UI of session page
1 parent 1f79ce8 commit d4ec48d

File tree

4 files changed

+36
-20
lines changed

4 files changed

+36
-20
lines changed

‎src/app/conf/2025/components/cta-card-section/index.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,9 @@ import { StripesDecoration } from "@/app/conf/_design-system/stripes-decoration"
22

33
import logoMask from "./logo-mask.webp"
44

5-
export interface CtaCardSectionProps extends React.HTMLAttributes<HTMLElement> {
6-
title: string
5+
export interface CtaCardSectionProps
6+
extends Omit<React.HTMLAttributes<HTMLElement>, "title"> {
7+
title: React.ReactNode
78
description: string
89
children: React.ReactNode
910
}

‎src/app/conf/2025/components/speaker-card.tsx‎

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ export function SpeakerCard({
2929
return (
3030
<article
3131
className={clsx(
32-
"relative flex flex-col overflow-hidden border border-neu-200 [container-type:inline-size] dark:border-neu-100",
32+
"group relative flex flex-col overflow-hidden border border-neu-200 bg-neu-0 [container-type:inline-size] dark:border-neu-100",
3333
className,
3434
)}
3535
{...props}
@@ -55,7 +55,12 @@ export function SpeakerCard({
5555
<div className="flex flex-col gap-1">
5656
<h3 className="typography-body-lg">{speaker.name}</h3>
5757
<p className="typography-body-sm text-neu-800">
58-
{[speaker.position, speaker.company].filter(Boolean).join(", ")}
58+
{[
59+
speaker.position,
60+
speaker.company === "-" ? "" : speaker.company,
61+
]
62+
.filter(Boolean)
63+
.join(", ")}
5964
</p>
6065
</div>
6166
{speaker.about && (
@@ -77,8 +82,8 @@ export function SpeakerCard({
7782
</div>
7883
<Anchor
7984
href={`/conf/${year}/speakers/${speaker.username}`}
80-
className="absolute inset-0 z-[1] ring-inset ring-neu-400 hover:ring-1 dark:ring-neu-100"
81-
title={`See ${speaker.name.split(" ")[0]}'s sessions`}
85+
className="absolute inset-0 z-[1] ring-inset ring-neu-400 hover:bg-sec-base/[.035] hover:ring-1 dark:ring-neu-100"
86+
aria-label={`See ${speaker.name.split(" ")[0]}'s sessions`}
8287
/>
8388
</article>
8489
)

‎src/app/conf/2025/schedule/[id]/page.tsx‎

Lines changed: 21 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -71,10 +71,10 @@ export default function SessionPage({ params }: SessionProps) {
7171
<NavbarPlaceholder className="top-0 bg-neu-50 before:bg-white/40 dark:bg-neu-0 dark:before:bg-blk/30" />
7272

7373
<main className="gql-all-anchors-focusable gql-conf-navbar-strip text-neu-900 before:bg-white/40 before:dark:bg-blk/30">
74-
<div className="gql-conf-container">
75-
<div className="gql-conf-section !pt-0">
76-
<div className="border-x border-neu-200 pt-8 dark:border-neu-100 2xl:pt-16">
77-
<section className="mx-auto min-h-[80vh] flex-col justify-center px-2 sm:px-0 lg:justify-between">
74+
<div className="bg-neu-50 dark:bg-neu-0">
75+
<div className="gql-conf-container">
76+
<div className="gql-conf-section !py-0">
77+
<div className="border-x border-neu-200 pt-8 dark:border-neu-100 2xl:pt-16">
7878
<SessionHeader
7979
event={event}
8080
eventTitle={eventTitle}
@@ -90,7 +90,7 @@ export default function SessionPage({ params }: SessionProps) {
9090
<Hr className="mt-10 2xl:mt-16" />
9191
)}
9292

93-
<div className="mt-8 flex gap-4 px-2 max-lg:flex-col sm:px-3 lg:mt-16 lg:gap-8 xl:pb-16">
93+
<div className="mt-8 flex gap-4 px-2 pb-8 max-lg:flex-col sm:px-3 lg:mt-16 lg:gap-8 xl:pb-16">
9494
<h3 className="typography-h2 min-w-[320px]">
9595
Session description
9696
</h3>
@@ -102,23 +102,28 @@ export default function SessionPage({ params }: SessionProps) {
102102
<h3 className="typography-h2 my-8 max-w-[408px] px-2 sm:px-3 lg:my-16">
103103
Session speakers
104104
</h3>
105-
<SessionSpeakers event={event} className="-mx-px" />
105+
<SessionSpeakers event={event} className="-mx-px -mb-px" />
106+
107+
<Hr />
106108

107-
<div className="py-8 xl:mt-16">
109+
<h3 className="typography-h2 my-8 px-2 sm:px-3 lg:my-16">
110+
Session resources
111+
</h3>
112+
<section>
108113
{event.files?.map(({ path }) => (
109114
<iframe
110115
key={path}
111116
src={path}
112117
className="aspect-video size-full"
113118
/>
114119
))}
115-
</div>
116-
</section>
120+
</section>
121+
</div>
117122
</div>
118123
</div>
119124
</div>
120125

121-
<div className="bg-neu-0 py-8 xl:py-16">
126+
<div className="border-t border-neu-200 bg-neu-0 py-8 dark:border-neu-100 xl:py-16">
122127
<div className="gql-conf-container">
123128
<CtaCardSection
124129
title="Get your ticket"
@@ -230,7 +235,12 @@ function SessionSpeakers({
230235
className?: string
231236
}) {
232237
return (
233-
<div className={clsx("grid gap-5 lg:grid-cols-2", className)}>
238+
<div
239+
className={clsx(
240+
"grid max-lg:*:border-y-0 lg:grid-cols-2 lg:gap-5",
241+
className,
242+
)}
243+
>
234244
{event.speakers?.map(speaker => (
235245
<SpeakerCard key={speaker.username} speaker={speaker} year="2025" />
236246
))}

‎src/app/conf/2025/schedule/_components/schedule-session-card.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ export function ScheduleSessionCard({
4949
{eventTitle}
5050
</div>
5151
) : (
52-
<div className="group relative size-full bg-neu-0 p-4 font-normal no-underline ring-neu-400 hover:bg-neu-0/90 hover:ring-1 focus-visible:z-[1] dark:ring-neu-100 dark:hover:bg-neu-0/80">
52+
<div className="group relative size-full bg-neu-0 p-4 font-normal no-underline ring-neu-400 focus-visible:z-[1] dark:ring-neu-100 dark:hover:bg-neu-0/80 [&:has(>a:hover)]:bg-neu-0/90 [&:has(>a:hover)]:ring-1">
5353
<Anchor
5454
id={`session-${session.id}`}
5555
href={`/conf/${year}/schedule/${session.id}?name=${session.name}`}
@@ -67,13 +67,13 @@ export function ScheduleSessionCard({
6767
<span className="typography-body-md">{eventTitle}</span>
6868
<span className="flex flex-col">
6969
{(speakers?.length || 0) > 0 && (
70-
<span className="typography-body-sm z-[2]">
70+
<span className="typography-body-sm">
7171
{speakers.map((s, i) => (
7272
<React.Fragment key={s.username || s.name}>
7373
{s.username ? (
7474
<Anchor
7575
href={`/conf/${year}/speakers/${s.username}`}
76-
className="decoration-neu-500 hover:underline dark:decoration-neu-100"
76+
className="relative z-[2] decoration-neu-600 hover:underline dark:decoration-neu-200"
7777
>
7878
{s.name}
7979
</Anchor>

0 commit comments

Comments
 (0)