diff --git a/src/views/components/calendar/Calendar/Calendar.module.scss b/src/views/components/calendar/Calendar/Calendar.module.scss new file mode 100644 index 00000000..216a99d4 --- /dev/null +++ b/src/views/components/calendar/Calendar/Calendar.module.scss @@ -0,0 +1,8 @@ +.scrollableSchedules { + overflow-y: auto; /* Enables vertical scrolling */ +} + +.scrollableLimit { + overflow-y: auto; /* Enables vertical scrolling */ + max-height: 35vh; /* Adjusts based on your needs and testing */ +} diff --git a/src/views/components/calendar/Calendar/Calendar.tsx b/src/views/components/calendar/Calendar/Calendar.tsx index 747e3ec5..c4d78dfe 100644 --- a/src/views/components/calendar/Calendar/Calendar.tsx +++ b/src/views/components/calendar/Calendar/Calendar.tsx @@ -4,46 +4,82 @@ import CalendarGrid from '@views/components/calendar/CalendarGrid/CalendarGrid'; import CalendarHeader from '@views/components/calendar/CalendarHeader/CalenderHeader'; import { CalendarSchedules } from '@views/components/calendar/CalendarSchedules/CalendarSchedules'; import ImportantLinks from '@views/components/calendar/ImportantLinks'; +import TeamLinks from '@views/components/calendar/TeamLinks'; +import Divider from '@views/components/common/Divider/Divider'; import CourseCatalogInjectedPopup from '@views/components/injected/CourseCatalogInjectedPopup/CourseCatalogInjectedPopup'; import { useFlattenedCourseSchedule } from '@views/hooks/useFlattenedCourseSchedule'; -import React, { useRef } from 'react'; -import { ExampleCourse } from 'src/stories/components/PopupCourseBlock.stories'; +import React, { useEffect, useRef, useState } from 'react'; +import styles from './Calendar.module.scss'; /** * A reusable chip component that follows the design system of the extension. * @returns */ export default function Calendar(): JSX.Element { - const calendarRef = useRef(null); + const calendarRef = useRef(null); const { courseCells, activeSchedule } = useFlattenedCourseSchedule(); - const [course, setCourse] = React.useState(null); + const [course, setCourse] = useState(null); + const [sidebarWidth, setSidebarWidth] = useState('20%'); + const [scale, setScale] = useState(1); + + useEffect(() => { + const adjustLayout = () => { + const windowHeight = window.innerHeight; + const windowWidth = window.innerWidth; + + const desiredCalendarHeight = 760; + const minSidebarWidthPixels = 230; + + const scale = Math.min(1, windowHeight / desiredCalendarHeight); + + const sidebarWidthPixels = Math.max( + windowWidth * scale - windowWidth + minSidebarWidthPixels, + minSidebarWidthPixels + ); + const newSidebarWidth = `${(sidebarWidthPixels / windowWidth) * 100}%`; + + setScale(scale); + setSidebarWidth(newSidebarWidth); + }; + + adjustLayout(); + + window.addEventListener('resize', adjustLayout); + return () => window.removeEventListener('resize', adjustLayout); + }, []); + + const calendarContainerStyle = { + transform: `scale(${scale})`, + transformOrigin: 'top left', + marginTop: '-20px', + }; return ( -
- -
-
-
+
+
+ +
+
+
+
- + +
+ +
+ +
+ +
-
-
+
+
-
- -
+
- {/* TODO: Doesn't work when exampleCourse is replaced with an actual course through setCourse. - Check CalendarGrid.tsx and AccountForCourseConflicts for an example */} {course ? ( ): JSX.Element { - // const [grid, setGrid] = useState([]); - // const calendarRef = useRef(null); // Create a ref for the calendar grid - const grid = []; + const [grid, setGrid] = useState([]); - // Run once to create the grid on initial render useEffect(() => { + const newGrid = []; for (let i = 0; i < 13; i++) { const row = []; let hour = hoursOfDay[i]; @@ -53,9 +51,10 @@ export default function CalendarGrid({ }; row.push(); } - grid.push(row); + newGrid.push(row); } - }); + setGrid(newGrid); + }, []); return (
diff --git a/src/views/components/calendar/CalendarHeader/CalenderHeader.tsx b/src/views/components/calendar/CalendarHeader/CalenderHeader.tsx index 52b99840..3dc452ee 100644 --- a/src/views/components/calendar/CalendarHeader/CalenderHeader.tsx +++ b/src/views/components/calendar/CalendarHeader/CalenderHeader.tsx @@ -28,7 +28,7 @@ const handleOpenOptions = async (): Promise => { */ export default function CalendarHeader(): JSX.Element { return ( -
+
diff --git a/src/views/components/calendar/TeamLinks.tsx b/src/views/components/calendar/TeamLinks.tsx new file mode 100644 index 00000000..1b2bfd9a --- /dev/null +++ b/src/views/components/calendar/TeamLinks.tsx @@ -0,0 +1,50 @@ +import Text from '@views/components/common/Text/Text'; +import clsx from 'clsx'; +import React from 'react'; + +import OutwardArrowIcon from '~icons/material-symbols/arrow-outward'; + +type Props = { + className?: string; +}; + +/** + * The "From The Team" section of the calendar website + * @returns + */ +export default function TeamLinks({ className }: Props): JSX.Element { + return ( + + ); +}