feat: make various improvements

icssc · Nov 21, 2024 · 2acf533 · 2acf533
1 parent 3814d1c
commit 2acf533
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 15 deletions.
diff --git a/apps/antalmanac/src/components/RightPane/SectionTable/CourseInfoButton.tsx b/apps/antalmanac/src/components/RightPane/SectionTable/CourseInfoButton.tsx
@@ -1,6 +1,7 @@
 import { Button, Paper, Popper } from '@material-ui/core';
 import { withStyles } from '@material-ui/core/styles';
 import { ClassNameMap } from '@material-ui/core/styles/withStyles';
+import { useMediaQuery, useTheme } from '@mui/material';
 import { useEffect, useState } from 'react';
 
 import { logAnalytics } from '$lib/analytics';
@@ -32,6 +33,9 @@ function CourseInfoButton({
     analyticsAction,
     analyticsCategory,
 }: CourseInfoButtonProps) {
+    const theme = useTheme();
+    const isMobileScreen = useMediaQuery(theme.breakpoints.down('sm'));
+
     const [popupAnchor, setPopupAnchor] = useState<HTMLElement | null>(null);
     const [isClicked, setIsClicked] = useState(false);
 
@@ -64,7 +68,8 @@ function CourseInfoButton({
     };
 
     const scheduleManagementWidth = useScheduleManagementStore((state) => state.scheduleManagementWidth);
-    const compact = scheduleManagementWidth && scheduleManagementWidth < 600;
+    const compact =
+        isMobileScreen || (scheduleManagementWidth && scheduleManagementWidth < theme.breakpoints.values.xs);
 
     return (
         <div onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave} style={{ display: 'flex' }}>

diff --git a/apps/antalmanac/src/routes/Home.tsx b/apps/antalmanac/src/routes/Home.tsx
@@ -1,7 +1,7 @@
 import DateFnsUtils from '@date-io/date-fns';
 import { MuiPickersUtilsProvider } from '@material-ui/pickers';
-import { CssBaseline, useMediaQuery, useTheme } from '@mui/material';
-import { Stack } from '@mui/material';
+import { CssBaseline, useMediaQuery, useTheme, Stack } from '@mui/material';
+import { useRef } from 'react';
 import Split from 'react-split';
 
 import Calendar from '$components/Calendar/CalendarRoot';
@@ -25,20 +25,16 @@ function DesktopHome() {
     const theme = useTheme();
     const setScheduleManagementWidth = useScheduleManagementStore((state) => state.setScheduleManagementWidth);
 
-    const handleDrag = (sizes: number[]) => {
-        if (!window.innerWidth) {
+    const scheduleManagementRef = useRef<HTMLDivElement>();
+
+    const handleDrag = () => {
+        const scheduleManagementElement = scheduleManagementRef.current;
+        if (!scheduleManagementElement) {
             return;
         }
 
-        /**
-         * Sizes is a two element array containing the size of each side (in percentages)
-         *
-         * @example [25, 75]
-         */
-        const [_, scheduleManagementPercentage] = sizes;
-        const scheduleManagementWidth = window.innerWidth * scheduleManagementPercentage * 0.01;
-
-        setScheduleManagementWidth(scheduleManagementWidth);
+        const elementWidth = scheduleManagementElement.getBoundingClientRect().width;
+        setScheduleManagementWidth(elementWidth);
     };
 
     return (
@@ -66,7 +62,7 @@ function DesktopHome() {
                     <Stack direction="column">
                         <Calendar isMobile={false} />
                     </Stack>
-                    <Stack direction="column">
+                    <Stack direction="column" ref={scheduleManagementRef}>
                         <ScheduleManagement />
                     </Stack>
                 </Split>