Skip to content

UI: Fix all mobile accessibility issues #57

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
TheMythologist merged 7 commits into from
Apr 7, 2026
Merged

UI: Fix all mobile accessibility issues #57

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
88e1c60
UI: Fix all mobile accessibility issues
ThePeeKayy Apr 2, 2026
96c9ec5
Add swiping to events calendar page
ThePeeKayy Apr 2, 2026
1d4a9e0
refactor: rename mobilecalendar to mobile-calendar
TheMythologist Apr 3, 2026
26bb3e5
refactor: Replace manual date helpers with date-fns in mobile-calendar
TheMythologist Apr 3, 2026
377f4a7
refactor: Standardize timezone handling with @date-fns/tz
TheMythologist Apr 3, 2026
9410f7e
debug: fix ig page bug
ThePeeKayy Apr 3, 2026
b48e6db
Merge branch 'main' into ui/mobile-date-selection
ThePeeKayy Apr 6, 2026
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
6 changes: 4 additions & 2 deletions components/DailyViewModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import {
DialogTitle,
} from '@/components/ui/dialog';
import { getCategoryBgColor } from '@/lib/formOptions';
import { toSGT } from '@/lib/utils/client/time';
import type { EventView } from '@/lib/utils/server/event';

interface DailyViewModalProps {
Expand All @@ -36,7 +37,7 @@ export default function DailyViewModal({
>
<DialogHeader>
<DialogTitle>
{format(date, 'd MMMM').toUpperCase()} EVENTS
{format(toSGT(date), 'd MMMM').toUpperCase()} EVENTS
</DialogTitle>
</DialogHeader>
{/* Events list */}
Expand Down Expand Up @@ -65,7 +66,8 @@ export default function DailyViewModal({
<div className='flex items-center gap-2'>
<ClockIcon className='h-4 w-4' />
<span>
{format(event.start, 'p')} - {format(event.end, 'p')}
{format(toSGT(event.start), 'p')} -{' '}
{format(toSGT(event.end), 'p')}
</span>
</div>

Expand Down
36 changes: 19 additions & 17 deletions components/EventModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,17 +49,9 @@ import {
SelectValue,
} from '@/components/ui/select';
import { NewEventSchema } from '@/lib/schema/event';
import { dateTimeFormatter } from '@/lib/utils/client/time';
import { dateTimeFormatter, formatTime, toSGT } from '@/lib/utils/client/time';
import type { EventView } from '@/lib/utils/server/event';

const formatTime = (d: Date) =>
d.toLocaleTimeString('en-SG', {
hour: '2-digit',
minute: '2-digit',
hour12: false,
timeZone: 'Asia/Singapore',
});

interface EventModalProps {
form: UseFormReturn<z.input<typeof NewEventSchema>>;
selectedEvent: EventView | null;
Expand Down Expand Up @@ -195,12 +187,13 @@ export default function EventModal({
selected={field.value}
onSelect={(selectedDate) => {
if (selectedDate) {
field.value.setFullYear(
const updated = toSGT(field.value);
updated.setFullYear(
selectedDate.getFullYear(),
selectedDate.getMonth(),
selectedDate.getDate(),
);
field.onChange(field.value);
field.onChange(new Date(updated));
}
setSelectStartDayOpen(false);
}}
Expand All @@ -213,11 +206,15 @@ export default function EventModal({
type='time'
value={formatTime(field.value)}
onChange={(e) => {
if (!e.target.value) return;
const [hours, minutes] = e.target.value
.split(':')
.map(Number);
field.value.setHours(hours, minutes);
field.onChange(field.value);
if (Number.isNaN(hours) || Number.isNaN(minutes))
return;
const updated = toSGT(field.value);
updated.setHours(hours, minutes, 0, 0);
field.onChange(new Date(updated));
}}
className='bg-background appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none'
step={1800}
Expand Down Expand Up @@ -254,12 +251,13 @@ export default function EventModal({
selected={field.value}
onSelect={(selectedDate) => {
if (selectedDate) {
field.value.setFullYear(
const updated = toSGT(field.value);
updated.setFullYear(
selectedDate.getFullYear(),
selectedDate.getMonth(),
selectedDate.getDate(),
);
field.onChange(field.value);
field.onChange(new Date(updated));
setSelectEndDayOpen(false);
}
}}
Expand All @@ -272,11 +270,15 @@ export default function EventModal({
type='time'
value={formatTime(field.value)}
onChange={(e) => {
if (!e.target.value) return;
const [hours, minutes] = e.target.value
.split(':')
.map(Number);
field.value.setHours(hours, minutes);
field.onChange(field.value);
if (Number.isNaN(hours) || Number.isNaN(minutes))
return;
const updated = toSGT(field.value);
updated.setHours(hours, minutes, 0, 0);
field.onChange(new Date(updated));
}}
className='bg-background appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none'
step={1800}
Expand Down
5 changes: 3 additions & 2 deletions components/booking/BookingCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { format } from 'date-fns';
import { CalendarIcon, ClockIcon, MapPinIcon, UserIcon } from 'lucide-react';

import { toSGT } from '@/lib/utils/client/time';
import type { BookingView } from '@/lib/utils/server/booking';

interface BookingCardProps {
Expand Down Expand Up @@ -30,10 +31,10 @@ const BookingCard: React.FC<BookingCardProps> = ({ booking }) => {
<div>
{/* TODO: Align both start and end timings vertically */}
<div className='text-sm'>
Start: {format(booking.start, 'd MMMM p')}
Start: {format(toSGT(booking.start), 'd MMMM p')}
</div>
<div className='text-sm'>
End: {format(booking.end, 'd MMMM p')}
End: {format(toSGT(booking.end), 'd MMMM p')}
</div>
</div>
</div>
Expand Down
40 changes: 21 additions & 19 deletions components/booking/BookingModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,18 +52,10 @@ import {
SelectValue,
} from '@/components/ui/select';
import { NewBookingClientSchema } from '@/lib/schema/booking';
import { dateTimeFormatter } from '@/lib/utils/client/time';
import { dateTimeFormatter, formatTime, toSGT } from '@/lib/utils/client/time';
import type { BookingView } from '@/lib/utils/server/booking';
import type { VenueView } from '@/lib/utils/server/venue';

const formatTime = (d: Date) =>
d.toLocaleTimeString('en-GB', {
hour: '2-digit',
minute: '2-digit',
hour12: false,
timeZone: 'Asia/Singapore',
});

interface BookingModalProps {
form: UseFormReturn<z.input<typeof NewBookingClientSchema>>;
selectedBooking: BookingView | null;
Expand Down Expand Up @@ -156,7 +148,7 @@ export default function BookingModal({
}
>
<FormControl>
<SelectTrigger className='[margin-block-end:0]'>
<SelectTrigger className='mbe-0'>
<SelectValue placeholder='Select organisation' />
</SelectTrigger>
</FormControl>
Expand Down Expand Up @@ -193,7 +185,7 @@ export default function BookingModal({
}
>
<FormControl>
<SelectTrigger className='[margin-block-end:0]'>
<SelectTrigger className='mbe-0'>
<SelectValue placeholder='Select venue' />
</SelectTrigger>
</FormControl>
Expand Down Expand Up @@ -242,12 +234,13 @@ export default function BookingModal({
selected={field.value}
onSelect={(selectedDate) => {
if (selectedDate) {
field.value.setFullYear(
const updated = toSGT(field.value);
updated.setFullYear(
selectedDate.getFullYear(),
selectedDate.getMonth(),
selectedDate.getDate(),
);
field.onChange(field.value);
field.onChange(new Date(updated));
}
setSelectStartDayOpen(false);
}}
Expand All @@ -260,11 +253,15 @@ export default function BookingModal({
type='time'
value={formatTime(field.value)}
onChange={(e) => {
if (!e.target.value) return;
const [hours, minutes] = e.target.value
.split(':')
.map(Number);
field.value.setHours(hours, minutes);
field.onChange(field.value);
if (Number.isNaN(hours) || Number.isNaN(minutes))
return;
const updated = toSGT(field.value);
updated.setHours(hours, minutes, 0, 0);
field.onChange(new Date(updated));
}}
className='bg-background appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none'
step={1800}
Expand Down Expand Up @@ -301,12 +298,13 @@ export default function BookingModal({
selected={field.value}
onSelect={(selectedDate) => {
if (selectedDate) {
field.value.setFullYear(
const updated = toSGT(field.value);
updated.setFullYear(
selectedDate.getFullYear(),
selectedDate.getMonth(),
selectedDate.getDate(),
);
field.onChange(field.value);
field.onChange(new Date(updated));
setSelectEndDayOpen(false);
}
}}
Expand All @@ -319,11 +317,15 @@ export default function BookingModal({
type='time'
value={formatTime(field.value)}
onChange={(e) => {
if (!e.target.value) return;
const [hours, minutes] = e.target.value
.split(':')
.map(Number);
field.value.setHours(hours, minutes);
field.onChange(field.value);
if (Number.isNaN(hours) || Number.isNaN(minutes))
return;
const updated = toSGT(field.value);
updated.setHours(hours, minutes, 0, 0);
field.onChange(new Date(updated));
}}
className='bg-background appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none'
step={1800}
Expand Down
15 changes: 11 additions & 4 deletions components/booking/Bookings.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ import { z } from 'zod/v4';

import BookingModal from '@/components/booking/BookingModal';
import { Calendar } from '@/components/ui/calendar';
import { MobileWeekStrip } from '@/components/ui/mobile-calendar';
import { Spinner } from '@/components/ui/spinner';
import {
createBooking,
Expand Down Expand Up @@ -197,6 +198,12 @@ export default function Bookings({
handle(formData);
};

const handleDateChange = (newDate: Date) => {
const params = new URLSearchParams(searchParams.toString());
params.set('date', newDate.toDateString());
window.history.pushState(null, '', `?${params.toString()}`);
};

const handleDeleteBooking = (bookingId: number) => {
if (!isAuthenticated) {
toast.error('Please login to delete bookings!');
Expand Down Expand Up @@ -253,16 +260,16 @@ export default function Bookings({
</div>
)}
{/* Calendar - Hidden on mobile */}
{/* TODO: How do mobile people select dates? */}
<MobileWeekStrip selected={date} onSelect={handleDateChange} />

{/* Desktop sidebar calendar - hidden on mobile */}
<div className='hidden w-72 rounded-lg bg-white p-4 lg:block'>
<Calendar
mode='single'
selected={date}
onSelect={(newDate) => {
if (newDate) {
const params = new URLSearchParams(searchParams.toString());
params.set('date', newDate.toDateString());
window.history.pushState(null, '', `?${params.toString()}`);
handleDateChange(newDate);
}
}}
className='sticky top-19 w-full rounded-md'
Expand Down
Loading
Loading