673/mobile events screen#696
Conversation
LexTruong
left a comment
LexTruong
left a comment
There was a problem hiding this comment.
Hey guys, this is fantastic work so far. See the comments I made on your code. In addition, please:
- Fix the indicator on the mobile calendar view for the current day, as seen on the Figma
- Each of your changed files are getting pretty long. Use separate components, such as for the drawers, when possible
| <button | ||
| type="button" | ||
| key={`${event.title}-${String(event.start)}-${event.restaurantId || idx}`} | ||
| className="flex flex-row justify-between items-center py-2 px-3 text-left hover:bg-slate-50 dark:hover:bg-zinc-900/50 transition-colors border-b last:border-0 border-slate-100 dark:border-zinc-800 w-full" |
| <CloseIcon fontSize="small" /> | ||
| </button> | ||
|
|
||
| {/* Scrollable Content */} |
There was a problem hiding this comment.
This logic in lines 65-106 doesn't quite work. For example, if I open the drawer and then click a date in 2027, and then open the drawer again, I only have options from 2027 and 2028, with no way to get back to 2026. Instead, can we only display years and months for which we have data available?
| }; | ||
|
|
||
| return ( | ||
| <div |
There was a problem hiding this comment.
There's too much padding on the sides in the mobile calendar view. Checkout the Figma for reference.
…day indicator calendar
…eterPlate into 673/mobile-events-screen # Conflicts: # apps/next/src/components/ui/month-picker-drawer.tsx
LexTruong
left a comment
LexTruong
left a comment
There was a problem hiding this comment.
Styling and padding look good. I like stacking the months in the list view. Couple more things:
- When in list view, pressing the month from the picker doesn't take you any where.
- In the calendar view, users shouldn't be able to go infinitely into the future with no event data. There should be similar code in the repo that finds the earliest and latest date for all the events, and then allow users to click between those months.
4 participants
Summary
Mobile rewrite of the /events page that splits the single monolithic view into dedicated desktop and mobile experiences (list, calendar, and month picker). Also cleans up any types on the events page.
Changes
Testing Instructions
Pull the branch and run pnpm install (the calendar view requires react-big-calendar). Go to events page on mobile and click through dates, location filters, scrollable month navigations, scrollable drawers on days with multiple events on both calendar and list views.
Closes #673