Hide schedulers on small devices

Houston-ARTCC · Dec 3, 2024 · 0fe27ef · 0fe27ef
1 parent 1ee525f
commit 0fe27ef
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 2 deletions.
diff --git a/src/app/dashboard/loa/Scheduler.tsx b/src/app/dashboard/loa/Scheduler.tsx
@@ -1,8 +1,11 @@
 'use client';
 
 import React, { useState } from 'react';
+import { LuAlertCircle } from 'react-icons/lu';
 import { TuiCalendar } from '@/components/Calendar';
 import { ClientPortal } from '@/components/ClientPortal';
+import { Alert, AlertTitle } from '@/components/Alert';
+import { Button } from '@/components/Button';
 import { RequestLoaModal } from './RequestLoaModal';
 
 export const Scheduler: React.FC = () => {
@@ -12,13 +15,25 @@ export const Scheduler: React.FC = () => {
     return (
         <>
             <TuiCalendar
+                className="hidden lg:block"
                 height="75vh"
                 view="month"
                 onSelectDateTime={({ start, end }) => {
                     setDateRange({ start, end });
                     setShowModal(true);
                 }}
             />
+            <Alert className="lg:hidden" color="amber-500" icon={LuAlertCircle}>
+                <AlertTitle>Larger screen needed!</AlertTitle>
+                <p className="mb-3">
+                    Your device is too small to view the LOA scheduler.
+                    We recommend switching to a larger device, or trying landscape mode.
+                    Alternatively, you can request an LOA without viewing the calendar.
+                </p>
+                <Button variant="secondary" color="red-400" onClick={() => setShowModal(true)}>
+                    Proceed Anyway
+                </Button>
+            </Alert>
             <ClientPortal>
                 <RequestLoaModal
                     {...dateRange}

diff --git a/src/app/events/new/Scheduler.tsx b/src/app/events/new/Scheduler.tsx
@@ -1,9 +1,12 @@
 'use client';
 
 import React, { useState } from 'react';
+import { LuAlertCircle } from 'react-icons/lu';
 import { TuiCalendar } from '@/components/Calendar';
 import type { SelectOption } from '@/components/Forms';
 import { ClientPortal } from '@/components/ClientPortal';
+import { Alert, AlertTitle } from '@/components/Alert';
+import { Button } from '@/components/Button';
 import { NewEventModal } from './NewEventModal';
 
 interface SchedulerProps {
@@ -17,6 +20,7 @@ export const Scheduler: React.FC<SchedulerProps> = ({ presets }) => {
     return (
         <>
             <TuiCalendar
+                className="hidden sm:block"
                 height="75vh"
                 view="week"
                 week={{ taskView: false, eventView: ['time'] }}
@@ -25,6 +29,17 @@ export const Scheduler: React.FC<SchedulerProps> = ({ presets }) => {
                     setShowModal(true);
                 }}
             />
+            <Alert className="sm:hidden" color="amber-500" icon={LuAlertCircle}>
+                <AlertTitle>Larger screen needed!</AlertTitle>
+                <p className="mb-3">
+                    Your device is too small to view the event scheduler.
+                    We recommend switching to a larger device, or trying landscape mode.
+                    Alternatively, you can create an event without viewing the calendar.
+                </p>
+                <Button variant="secondary" color="red-400" onClick={() => setShowModal(true)}>
+                    Proceed Anyway
+                </Button>
+            </Alert>
             <ClientPortal>
                 <NewEventModal
                     {...dateRange}

diff --git a/src/app/training/(dashboard)/request/Scheduler.tsx b/src/app/training/(dashboard)/request/Scheduler.tsx
@@ -1,8 +1,11 @@
 'use client';
 
 import React, { useState } from 'react';
+import { LuAlertCircle } from 'react-icons/lu';
 import { TuiCalendar } from '@/components/Calendar';
 import { ClientPortal } from '@/components/ClientPortal';
+import { Alert, AlertTitle } from '@/components/Alert';
+import { Button } from '@/components/Button';
 import { eventObjectFromRequest } from '@/utils/calendar';
 import { type TrainingRequest } from '@/types/training';
 import { RequestTrainingModal } from './RequestTrainingModal';
@@ -18,6 +21,7 @@ export const Scheduler: React.FC<SchedulerProps> = ({ requests }) => {
     return (
         <>
             <TuiCalendar
+                className="hidden sm:block"
                 height="75vh"
                 view="week"
                 events={requests.map(eventObjectFromRequest)}
@@ -27,6 +31,17 @@ export const Scheduler: React.FC<SchedulerProps> = ({ requests }) => {
                     setShowModal(true);
                 }}
             />
+            <Alert className="sm:hidden" color="amber-500" icon={LuAlertCircle}>
+                <AlertTitle>Larger screen needed!</AlertTitle>
+                <p className="mb-3">
+                    Your device is too small to view the training scheduler.
+                    We recommend switching to a larger device, or trying landscape mode.
+                    Alternatively, you can request training without viewing the calendar.
+                </p>
+                <Button variant="secondary" color="red-400" onClick={() => setShowModal(true)}>
+                    Proceed Anyway
+                </Button>
+            </Alert>
             <ClientPortal>
                 <RequestTrainingModal
                     {...dateRange}

diff --git a/src/components/Calendar.tsx b/src/components/Calendar.tsx
@@ -19,13 +19,14 @@ type ReactCalendarEventHandler = ExternalEventTypes[CalendarExternalEventNames];
 type ReactCalendarExternalEvents = { [events in ReactCalendarEventNames]: ReactCalendarEventHandler; };
 
 export type TuiCalendarProps = ReactCalendarOptions & ReactCalendarExternalEvents & {
+    className?: string;
     height: string;
     events?: Partial<EventObject>[];
     view?: CalendarView;
     onSelectDateTime?: (range: { start: Date, end: Date }) => void;
 };
 
-export const TuiCalendar: React.FC<TuiCalendarProps> = ({ events, onSelectDateTime, ...props }) => {
+export const TuiCalendar: React.FC<TuiCalendarProps> = ({ className, events, onSelectDateTime, ...props }) => {
     const [currentDate, setCurrentDate] = useState<Date>(new Date());
 
     const dateKey = useMemo(() => `${currentDate.getFullYear()}/${currentDate.getMonth() + 1}`, [currentDate]);
@@ -60,7 +61,7 @@ export const TuiCalendar: React.FC<TuiCalendarProps> = ({ events, onSelectDateTi
     }, [events, dateKey, calendarRef]);
 
     return (
-        <div>
+        <div className={className}>
             <div className="mb-5 flex flex-col justify-between gap-2 lg:flex-row">
                 <h2 className="text-center text-3xl">
                     {format(currentDate, 'MMMM y')}