Skip to content

Commit 2acd5f0

Browse files
lassejacolassejaco
committed
responsiveness calendar
1 parent fd4183c commit 2acd5f0

6 files changed

Lines changed: 121 additions & 67 deletions

File tree

‎devconnect/src/common/components/layout/Menu.tsx‎

Lines changed: 15 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -78,6 +78,14 @@ const menuItems = (pathname: string) => [
7878
text: (globalThis as any).translations.about,
7979
url: pathname === '/' ? '#about' : '/', // Smoothscrolling if already on the page, otherwise hard link
8080
},
81+
{
82+
text: 'Tickets',
83+
url: 'https://devconnect.org/tickets',
84+
},
85+
{
86+
text: 'Calendar',
87+
url: '/schedule',
88+
},
8189
{
8290
text: 'Destino Devconnect',
8391
customClass: css['destino-rainbow'],
@@ -297,22 +305,20 @@ export const FooterMenu = (props: any) => {
297305

298306
export const Menu = (props: any) => {
299307
const router = useRouter()
300-
const { scrollY } = useScroll()
301-
const [hasScrolled, setHasScrolled] = React.useState(false)
302308
const [languageOpen, setLanguageOpen] = React.useState(false)
303-
const { visible, toggleVisible } = useDevaBotStore()
304-
React.useEffect(() => {
305-
return scrollY.onChange(latest => {
306-
setHasScrolled(latest > 0)
307-
})
308-
}, [scrollY])
309+
// const { visible, toggleVisible } = useDevaBotStore()
310+
311+
const hasScrolled = props.hasScrolled
309312

310313
return (
311314
<div
312315
className={cn(
313316
css['menu'],
314317
'flex gap-4 self-start items-center backdrop-blur-sm bg-black/60 rounded-lg p-1.5 lg:p-0 lg:px-2 lg:pr-3 transition-all duration-500 pointer-events-auto',
315-
hasScrolled && 'bg-black/90'
318+
hasScrolled && 'bg-black/90',
319+
{
320+
'!pointer-events-none': hasScrolled && !props.menuOpen,
321+
}
316322
)}
317323
>
318324
<Mobile menuOpen={props.menuOpen} setMenuOpen={props.setMenuOpen} />

‎devconnect/src/pages/index.tsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -93,7 +93,10 @@ export const Header = ({
9393
href="/"
9494
className={cn(
9595
css['logo'],
96-
'transition-all ease duration-500 pointer-events-auto'
96+
'transition-all ease duration-500 pointer-events-auto',
97+
{
98+
'!pointer-events-none': fadeOutOnScroll && hasScrolled && !menuOpen,
99+
}
97100
// hasScrolled && !menuOpen && 'opacity-0 pointer-events-none'
98101
)}
99102
>
@@ -104,7 +107,7 @@ export const Header = ({
104107
/>
105108
</Link>
106109

107-
<Menu menuOpen={menuOpen} setMenuOpen={setMenuOpen} />
110+
<Menu menuOpen={menuOpen} setMenuOpen={setMenuOpen} hasScrolled={hasScrolled && fadeOutOnScroll} />
108111
</div>
109112
</div>
110113
</header>

‎devconnect/src/pages/schedule.tsx‎

Lines changed: 55 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -28,9 +28,8 @@ const Argentina = (props: any) => {
2828
spanRows: 2,
2929
name: `Ethereum World's Fair & Coworking Space`,
3030
description: 'Open coworking space for developers, builders, and researchers to collaborate throughout the week.',
31-
organizer: 'DevConnect',
31+
organizer: 'Ethereum Foundation',
3232
difficulty: 'All Welcome',
33-
amountPeople: '100',
3433
isCoreEvent: true,
3534
timeblocks: [
3635
{
@@ -51,84 +50,98 @@ const Argentina = (props: any) => {
5150
text: 'Innovation Hub',
5251
},
5352
},
54-
{
55-
id: 'event-001',
56-
priority: 2,
57-
spanRows: 3,
58-
name: 'ETH Day',
59-
description: 'A beginner-friendly workshop covering blockchain fundamentals and use cases.',
60-
organizer: 'Ethereum Foundation',
61-
difficulty: 'All Welcome',
62-
isFairEvent: true,
63-
amountPeople: '50',
64-
timeblocks: [
65-
{
66-
start: '2025-11-17T10:00:00Z',
67-
end: '2025-11-17T12:00:00Z',
68-
},
69-
],
70-
location: {
71-
url: 'https://example.com/venue1',
72-
text: 'Main Conference Hall',
73-
},
74-
// timeblocks: [
75-
// {
76-
// start: '2025-11-17T10:00:00Z',
77-
// end: '2025-11-17T12:00:00Z',
78-
// },
79-
// ],
80-
// priority: 1,
81-
// categories: ['Education', 'Blockchain', 'Workshop'],
82-
},
53+
// {
54+
// id: 'event-001',
55+
// priority: 2,
56+
// spanRows: 3,
57+
// name: 'ETH Day',
58+
// description: 'A beginner-friendly workshop covering blockchain fundamentals and use cases.',
59+
// organizer: 'Ethereum Foundation',
60+
// difficulty: 'All Welcome',
61+
// isFairEvent: true,
62+
// timeblocks: [
63+
// {
64+
// start: '2025-11-17T10:00:00Z',
65+
// end: '2025-11-17T12:00:00Z',
66+
// },
67+
// ],
68+
// location: {
69+
// url: 'https://example.com/venue1',
70+
// text: 'Main Conference Hall',
71+
// },
72+
// // timeblocks: [
73+
// // {
74+
// // start: '2025-11-17T10:00:00Z',
75+
// // end: '2025-11-17T12:00:00Z',
76+
// // },
77+
// // ],
78+
// // priority: 1,
79+
// // categories: ['Education', 'Blockchain', 'Workshop'],
80+
// },
8381
]
8482

8583
const events = [...props.events, ...coreEvents].map(event => {
84+
const overrides = {} as any
85+
86+
if (event.id === '1f5638cd-c415-809b-8fbd-ec8c4ba7f5b9') {
87+
overrides.name = 'ETH Day'
88+
overrides.isFairEvent = true
89+
overrides.spanRows = 3
90+
}
91+
8692
return {
8793
...event,
94+
...overrides,
8895
onClick: () => {},
8996
}
9097
})
9198

99+
console.log(events, 'hello')
100+
92101
return (
93102
<>
94103
<Header active fadeOutOnScroll />
95104
<div className="relative h-[24vh] w-full text-black bg-black flex flex-col justify-end overflow-hidden">
96105
<Image
97106
src={Voxel}
98107
alt="Voxel art background"
99-
className={cn(styles.argentina, 'object-cover absolute object-[0%,13%] h-full w-full opacity-80')}
108+
className={cn(styles.argentina, 'object-cover absolute object-[0%,14%] h-full w-full opacity-80')}
100109
/>
101110

102111
<div className="section z-10 pb-1">
103112
<div className="flex justify-between items-end">
104113
<Image src={PageTitle} alt="Page Title" className={'contain w-[450px] translate-x-[-3%]'} />
105-
<div className={cn(styles.shadow, 'gap-2 pb-3 text-white text-lg')}>
114+
<div className={cn(styles.shadow, 'gap-2 pb-3 text-white hidden md:block')}>
106115
17 — 22 November Buenos Aires, ARGENTINA
107116
</div>
108117
</div>
109118
</div>
110119
{/* <div className="absolute top-0 left-0 w-full h-full bg-black opacity-50"></div> */}
111120
</div>
112-
<div className="flex flex-col gap-4 text-black">
113-
<div className="section my-1 mb-8">
121+
<div className="flex flex-col text-black">
122+
<div className="section">
114123
<div className="flex justify-between gap-4 my-6">
115-
<div className="text-2xl">
124+
<div className="text-2xl hidden md:block">
116125
<b>November</b> 2025
117126
</div>
118127
<div className="text-sm rounded-md bg-[#74ACDF33] px-4 py-2 text-[#36364C]">
119128
<b>This calendar is a work in progress and will change before Devconnect week.</b> Check back regularly
120129
for updates.
121130
</div>
122131
</div>
132+
</div>
123133

134+
<div className="section overflow-visible touch-only:contents">
124135
<NewSchedule
125136
events={events}
126137
selectedEvent={selectedEvent}
127138
selectedDay={selectedDay}
128139
setSelectedEvent={setSelectedEvent}
129140
setSelectedDay={setSelectedDay}
130141
/>
142+
</div>
131143

144+
<div className="section mb-8">
132145
<div className="flex flex-col gap-4 my-4">
133146
<div className="text-2xl">
134147
<b>Want to be featured on our calendar?</b>
@@ -137,8 +150,9 @@ const Argentina = (props: any) => {
137150
Check back soon for more information on how to submit your event to our calendar.
138151
</div>
139152
</div>
153+
</div>
140154

141-
{/* <div className="text-sm flex flex-col gap-4">
155+
{/* <div className="text-sm flex flex-col gap-4">
142156
<p>
143157
<strong>Disclaimer:</strong> This calendar is a work in progress and may change a lot before Devconnect
144158
week. Please check back regularly for updates.
@@ -163,8 +177,8 @@ const Argentina = (props: any) => {
163177
. You can also use atprotocol directly, as all data is public.
164178
</p>
165179
</div> */}
166-
</div>
167180
</div>
181+
168182
<Footer />
169183
</>
170184
)
@@ -269,14 +283,15 @@ export interface Event {
269283

270284
return {
271285
id: event.id,
272-
name: formattedEvent['Event name'],
286+
name: formattedEvent['Event name'] || '',
273287
description: formattedEvent['Description'] || '',
274-
capacity: formattedEvent['Capacity'],
288+
capacity: formattedEvent['Capacity'] || '',
275289
startDate: formattedEvent['Event date'],
276290
// size: formattedEvent['Size'],
277291
location: formattedEvent['Location'] || { text: 'TBD', url: '' },
278292
timeblocks: timeblocks,
279293
difficulty: 'Beginner',
294+
organizer: formattedEvent['Organization'] || '',
280295
}
281296
})
282297

‎devconnect/tailwind.config.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,4 +11,10 @@ module.exports = {
1111
},
1212
},
1313
},
14+
plugins: [
15+
function ({ addVariant }) {
16+
addVariant('mouse-only', '@media screen and (pointer: fine)')
17+
addVariant('touch-only', '@media screen and (pointer: coarse)')
18+
},
19+
],
1420
}

‎lib/components/event-schedule-new/day/event.tsx‎

Lines changed: 36 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -83,13 +83,21 @@ const Event: React.FC<EventProps> = ({
8383
return (
8484
<div
8585
style={{
86-
height: `${event.spanRows ? event.spanRows * 60 : 60}px`,
86+
// height: event.spanRows ? `minmax(120px, 100%)` : "auto"
87+
height: event.spanRows ? `${event.spanRows * 60}px` : "60px",
8788
}}
8889
className={cn(
8990
`group bg-[#f0faff] cursor-pointer`,
9091
"flex flex-col gap-4 border border-solid border-neutral-300 p-2 px-2 h-full shrink-0 relative rounded-md overflow-hidden hover:border-black transition-all duration-300",
9192
{
92-
"border-l !border-blue-500 border-l-[4px]": isCoworking || isETHDay,
93+
// "border-l !border-blue-500 border-l-[4px]": isCoworking || isETHDay,
94+
"border-l !border-[#74ACDF] border-l-[4px]":
95+
event.difficulty === "Beginner" ||
96+
event.difficulty === "All Welcome",
97+
"border-l !border-yellow-500 border-l-[4px]":
98+
event.difficulty === "Intermediate",
99+
"border-l !border-green-500 border-l-[4px]":
100+
event.difficulty === "Advanced",
93101
"bg-[rgb(187,232,255)] border-solid": isCoworking || isETHDay,
94102
},
95103
eventClassName,
@@ -184,12 +192,16 @@ const Event: React.FC<EventProps> = ({
184192
<div className="text-[10px]">{endTime}</div>
185193
</div> */}
186194
<div className="flex flex-col grow justify-between items-stretch">
187-
<div className={cn("text-xs font-medium line-clamp-1 flex h-full")}>
195+
<div className={cn("text-xs font-medium line-clamp-1 shrink-0")}>
188196
{eventName}
189197
</div>
190198
{/* <div className="text-xs text-gray-600 mt-1">{event.location.text}</div> */}
191199

192-
<div className="flex justify-between">
200+
<div
201+
className={cn("flex gap-4 justify-end", {
202+
"justify-between": !isCoworking,
203+
})}
204+
>
193205
{isCoworking && (
194206
<Button
195207
size="sm"
@@ -203,18 +215,29 @@ const Event: React.FC<EventProps> = ({
203215
</Button>
204216
)}
205217

206-
<div className="flex gap-2 grow shrink-0 items-end justify-end text-[9px]">
207-
<div
208-
className={`rounded text-[10px] ${difficultyClass} px-2 py-0.5 flex gap-1.5 items-center`}
209-
>
210-
{event.difficulty}
211-
</div>
218+
<div
219+
className={cn(
220+
"flex gap-2 grow items-end justify-between text-[9px]",
221+
{ "!justify-end": isCoworking }
222+
)}
223+
>
224+
{event.organizer && (
225+
<div
226+
className={`rounded text-[10px] bg-[#bef0ff] px-2 py-0.5 flex gap-1.5 items-center`}
227+
>
228+
<Star className="text-black hidden md:block" size={11} />
229+
<div className="line-clamp-1">{event.organizer}</div>
230+
</div>
231+
)}
232+
212233
<div
213-
className={`rounded text-[10px] bg-[#bef0ff] px-2 py-0.5 flex gap-1.5 items-center`}
234+
className={`rounded text-[10px] ${difficultyClass} px-2 py-0.5 flex gap-1.5 items-center relative`}
214235
>
215-
<Star className="text-black shrink-0" size={11} />
216-
{event.organizer}
236+
<div className="line-clamp-1 w-full grow">
237+
{event.difficulty}
238+
</div>
217239
</div>
240+
218241
{/* <div
219242
className={`rounded text-[10px] px-2 bg-[#bef0ff] py-0.5 flex gap-1.5 items-center`}
220243
>

‎lib/components/event-schedule-new/index.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -170,7 +170,7 @@ const NewScheduleIndex = ({
170170

171171
// Define shared column template for consistent alignment
172172
// const columnTemplate = `repeat(${eventRange.length}, minmax(175px, 1fr))`
173-
const columnTemplate = `repeat(${eventRange.length}, minmax(115px, 1fr))`;
173+
const columnTemplate = `repeat(${eventRange.length}, minmax(155px, 1fr))`;
174174

175175
// Check if an event should be highlighted based on hovered date
176176
const isEventHighlighted = (placement: any) => {
@@ -190,7 +190,8 @@ const NewScheduleIndex = ({
190190
</div>
191191
</div> */}
192192
<SwipeToScroll>
193-
<div className="text-black">
193+
<div className="text-black flex">
194+
<div className="hidden touch-only:block w-4 md:w-0 h-[1px]"></div>
194195
{/* Unified Calendar Grid with aligned header and content */}
195196
<div className="w-full">
196197
{/* Grid container with header and content in one cohesive grid */}
@@ -207,7 +208,7 @@ const NewScheduleIndex = ({
207208
<h2
208209
key={date}
209210
className={cn(
210-
"text-sm cursorr-pointer hoverr:bg-gray-100 font-semibold py-2 px-3 mx-0.5 sticky top-[4px] bg-white z-50 border border-solid border-neutral-300 transiation-all duration-300 rounded-md mb-0.5",
211+
"text-sm cursorr-pointer hoverr:bg-gray-100 font-semibold py-2 px-3 mx-0.5 lg:sticky lg:top-[4px] bg-white z-50 border border-solid border-neutral-300 transiation-all duration-300 rounded-md mb-0.5",
211212
selectedDay === date && "!bg-slate-100 !opacity-100",
212213
selectedDay !== null && "opacity-20"
213214
)}

0 commit comments

Comments
 (0)