basic mobile UI fixes

ITPNYU · Sep 19, 2024 · a15a5c1 · a15a5c1
1 parent 78d5cde
commit a15a5c1
Show file tree

Hide file tree

Showing 8 changed files with 52 additions and 18 deletions.
diff --git a/booking-app/components/src/client/routes/booking/components/CalendarVerticalResource.tsx b/booking-app/components/src/client/routes/booking/components/CalendarVerticalResource.tsx
@@ -1,4 +1,4 @@
-import { Box, Typography } from "@mui/material";
+import { Box, Typography, useMediaQuery, useTheme } from "@mui/material";
 import { CalendarApi, DateSelectArg, EventClickArg } from "@fullcalendar/core";
 import { CalendarEvent, RoomSetting } from "../../../../types";
 import CalendarEventBlock, { NEW_TITLE_TAG } from "./CalendarEventBlock";
@@ -83,6 +83,9 @@ export default function CalendarVerticalResource({
   } = useContext(BookingContext);
   const ref = useRef(null);
 
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
+
   const resources = useMemo(
     () =>
       rooms.map((room) => ({
@@ -215,7 +218,7 @@ export default function CalendarVerticalResource({
         slotMinTime="09:00:00"
         slotMaxTime="21:00:00"
         allDaySlot={false}
-        aspectRatio={1.5}
+        aspectRatio={isMobile ? 0.5 : 1.5}
         expandRows={true}
         stickyHeaderDates={true}
         ref={ref}

diff --git a/booking-app/components/src/client/routes/booking/formPages/BookingFormDetailsPage.tsx b/booking-app/components/src/client/routes/booking/formPages/BookingFormDetailsPage.tsx
@@ -20,7 +20,7 @@ export default function BookingFormDetailsPage({
   return (
     <Grid container>
       <Grid width={330} />
-      <Grid xs={7} paddingRight={2}>
+      <Grid xs={12} md={7} margin={2} paddingRight={{ xs: 0, md: 2 }}>
         <FormInput {...{ isEdit, isWalkIn, calendarEventId }} />
       </Grid>
     </Grid>

diff --git a/booking-app/components/src/client/routes/booking/formPages/LandingPage.tsx b/booking-app/components/src/client/routes/booking/formPages/LandingPage.tsx
@@ -31,7 +31,12 @@ export default function LandingPage() {
   const router = useRouter();
 
   return (
-    <Center sx={{ width: "100vw", height: "90vh" }}>
+    <Center
+      sx={{ width: "100vw" }}
+      height={{ xs: "unset", md: "90vh" }}
+      padding={{ xs: 3 }}
+      // marginTop={{ xs: "10vh", md: 0 }}
+    >
       <Title as="h1">370🅙 Media Commons Reservation Form</Title>
       <p>Thank you for your interest in booking with the Media Commons</p>
       <Modal padding={4}>

diff --git a/booking-app/components/src/client/routes/booking/formPages/SelectRoomPage.tsx b/booking-app/components/src/client/routes/booking/formPages/SelectRoomPage.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { Box, Stack, Typography } from "@mui/material";
+import { Box, Stack, Typography, useMediaQuery, useTheme } from "@mui/material";
 import React, { useContext, useMemo, useState } from "react";
 
 import { BookingContext } from "../bookingProvider";
@@ -27,6 +27,8 @@ export default function SelectRoomPage({
   const { selectedRooms, setSelectedRooms } = useContext(BookingContext);
   const [date, setDate] = useState<Date>(new Date());
   useCheckFormMissingData();
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
 
   const roomsToShow = useMemo(() => {
     return !isWalkIn
@@ -36,9 +38,12 @@ export default function SelectRoomPage({
 
   return (
     <Box sx={{ flexGrow: 1 }}>
-      <Grid container>
-        <Grid width={330}>
-          <Stack spacing={2}>
+      <Grid container={!isMobile}>
+        <Grid width={{ xs: "100%", md: 330 }}>
+          <Stack
+            spacing={{ xs: 0, md: 2 }}
+            alignItems={{ xs: "center", md: "unset" }}
+          >
             {!isWalkIn && <CalendarDatePicker handleChange={setDate} />}
             <Box paddingLeft="24px">
               <Typography fontWeight={500}>Spaces</Typography>

diff --git a/booking-app/components/src/client/routes/booking/formPages/UserRolePage.tsx b/booking-app/components/src/client/routes/booking/formPages/UserRolePage.tsx
@@ -19,7 +19,6 @@ const Center = styled(Box)`
 `;
 
 const Container = styled(Box)(({ theme }) => ({
-  width: "50%",
   display: "flex",
   flexDirection: "column",
   alignItems: "center",
@@ -60,7 +59,12 @@ export default function UserRolePage({
 
   return (
     <Center>
-      <Container padding={4} marginTop={6}>
+      <Container
+        padding={4}
+        margin={3}
+        marginTop={6}
+        width={{ xs: "100%", md: "50%" }}
+      >
         <Typography fontWeight={500}>Affiliation</Typography>
         <Dropdown
           value={department}

diff --git a/booking-app/components/src/client/routes/components/Table.tsx b/booking-app/components/src/client/routes/components/Table.tsx
@@ -12,10 +12,15 @@ import {
 import React from "react";
 import { styled } from "@mui/system";
 
+const Clip = styled(Box)`
+  overflow-x: auto;
+`;
+
 const TableCustom = styled(MuiTable)(({ theme }) => ({
   border: `1px solid ${theme.palette.custom.border}`,
   borderCollapse: "separate",
   borderRadius: "0px 0px 4px 4px",
+  // overflowX: "scroll",
 
   "& tr:last-child td": {
     borderBottom: "none",
@@ -31,6 +36,7 @@ const ShadedHeader = styled(TableHead)(({ theme }) => ({
 }));
 
 export const TableTopRow = styled(MuiTable)`
+  width: 100%;
   height: 48px;
   border-bottom: none;
   border-collapse: separate;
@@ -69,12 +75,14 @@ export default function Table({ columns, children, topRow, sx }: Props) {
           </TableRow>
         </TableBody>
       </TableTopRow>
-      <TableCustom size="small" sx={sx ?? {}}>
-        <ShadedHeader>
-          <TableRow>{columns}</TableRow>
-        </ShadedHeader>
-        <TableBody>{children}</TableBody>
-      </TableCustom>
+      <Clip>
+        <TableCustom size="small" sx={sx ?? {}}>
+          <ShadedHeader>
+            <TableRow>{columns}</TableRow>
+          </ShadedHeader>
+          <TableBody>{children}</TableBody>
+        </TableCustom>
+      </Clip>
     </>
   );
 }
diff --git a/booking-app/components/src/client/routes/components/navBar.tsx b/booking-app/components/src/client/routes/components/navBar.tsx
@@ -7,6 +7,8 @@ import {
   Select,
   Toolbar,
   Typography,
+  useMediaQuery,
+  useTheme,
 } from "@mui/material";
 import React, { useContext, useEffect, useMemo, useState } from "react";
 import { usePathname, useRouter } from "next/navigation";
@@ -58,6 +60,8 @@ export default function NavBar() {
     PagePermission.BOOKING
   );
   const pathname = usePathname();
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
 
   const netId = userEmail?.split("@")[0];
 
@@ -169,7 +173,7 @@ export default function NavBar() {
     <Nav>
       <LogoBox onClick={handleClickHome}>
         <Image src={SVGLOGO} alt="Media Commons logo" height={40} />
-        <Title as="h1">Media Commons {envTitle}</Title>
+        {!isMobile && <Title as="h1">Media Commons {envTitle}</Title>}
       </LogoBox>
       <Box display="flex" alignItems="center">
         {button}

diff --git a/booking-app/components/src/client/routes/myBookings/myBookingsPage.tsx b/booking-app/components/src/client/routes/myBookings/myBookingsPage.tsx
@@ -11,10 +11,15 @@ const Center = styled(Box)`
   align-items: center;
 `;
 
+const Container = styled(Box)`
+  width: 65%;
+  margin: 48px;
+`;
+
 export default function MyBookingsPage() {
   return (
     <Center>
-      <Box width="65%" margin={6}>
+      <Box width={{ xs: "90%", md: "65%" }} margin={6}>
         <Typography variant="h6">Welcome</Typography>
         <Bookings pageContext={PageContextLevel.USER} />
       </Box>