feat: Schedule context (units, classes, term)

asuc-octo · Jun 9, 2024 · 5dde3f6 · 5dde3f6
1 parent d781078
commit 5dde3f6
Show file tree

Hide file tree

Showing 19 changed files with 244 additions and 120 deletions.
diff --git a/...nd/src/app/Plan/Term/Semester.module.scss → frontend/src/app/Plan/Term/Term.module.scss b/...nd/src/app/Plan/Term/Semester.module.scss → frontend/src/app/Plan/Term/Term.module.scss
@@ -3,31 +3,30 @@
   flex-shrink: 0;
   border-radius: 8px;
   overflow: auto;
-  max-height: 100%;
+  height: 100%;
   border: 1px solid var(--border-color);
 
-  .footer {
-    padding: 8px;
-    background-color: var(--background-color);
-    position: sticky;
-    bottom: 0;
-  }
-
   .header {
     padding: 8px 8px 8px 16px;
-    background-color: var(--background-color);
+    background: linear-gradient(to bottom, var(--background-color) 40px, transparent);
     display: flex;
     align-items: center;
-    justify-content: space-between;
     position: sticky;
     top: 0;
-    gap: 8px;
 
-    .title {
+    .term {
       font-size: 14px;
-      color: var(--paragraph-color);
+      color: var(--heading-color);
+      font-weight: 500;
+      line-height: 1;
+      margin-right: auto;
+    }
+
+    .units {
+      font-size: 12px;
+      color: var(--label-color);
       line-height: 1;
-      flex-grow: 1;
+      margin-right: 16px;
     }
   }
 
@@ -38,6 +37,6 @@
     min-height: 121px;
     width: 100%;
     gap: 8px;
-    padding: 0 8px;
+    padding: 0 8px 8px;
   }
 }
diff --git a/frontend/src/app/Plan/Term/index.tsx b/frontend/src/app/Plan/Term/index.tsx
@@ -2,14 +2,13 @@ import { forwardRef } from "react";
 
 import { Plus } from "iconoir-react";
 
-import Button from "@/components/Button";
 import IconButton from "@/components/IconButton";
 import Units from "@/components/Units";
 import { ICourse, Semester } from "@/lib/api";
 
 import Catalog from "./Catalog";
 import Course from "./Course";
-import styles from "./Semester.module.scss";
+import styles from "./Term.module.scss";
 
 interface TermProps {
   semester: Semester;
@@ -23,27 +22,23 @@ const Term = forwardRef<HTMLDivElement, TermProps>(
     return (
       <div className={styles.root}>
         <div className={styles.header}>
-          <p className={styles.title}>
+          <p className={styles.term}>
             {semester} {year}
           </p>
-          <Units unitsMin={12} unitsMax={20} />
-          <IconButton>
-            <Plus />
-          </IconButton>
+          <Units unitsMin={12} unitsMax={20}>
+            {(units) => <p className={styles.units}>{units}</p>}
+          </Units>
+          <Catalog semester={Semester.Spring} year={2024} onClick={onClick}>
+            <IconButton>
+              <Plus />
+            </IconButton>
+          </Catalog>
         </div>
         <div className={styles.body} ref={ref}>
           {courses.map((course) => (
             <Course key={`${course.subject} ${course.number}`} {...course} />
           ))}
         </div>
-        <div className={styles.footer}>
-          <Catalog semester={Semester.Spring} year={2024} onClick={onClick}>
-            <Button secondary>
-              <Plus />
-              Add class
-            </Button>
-          </Catalog>
-        </div>
       </div>
     );
   }

diff --git a/frontend/src/app/Schedule/Compare/Compare.module.scss b/frontend/src/app/Schedule/Compare/Compare.module.scss
@@ -28,7 +28,6 @@
       .heading {
         font-size: 14px;
         font-weight: 500;
-        padding: 0 12px;
         line-height: 1;
         color: var(--heading-color);
         flex-grow: 1;
@@ -38,17 +37,40 @@
 
   .body {
     display: flex;
-    grid-template-columns: 1fr 1fr;
     flex-grow: 1;
     height: 0;
 
-    .view {
+    .panel {
+      display: flex;
+      flex-direction: column;
       flex: 1;
-      overflow: auto;
+      width: 0;
 
       &:not(:last-child) {
         border-right: 1px solid var(--border-color);
       }
+
+      .context {
+        display: flex;
+        justify-content: space-between;
+        height: 32px;
+        flex-shrink: 0;
+        padding: 0 12px;
+        align-items: center;
+        border-bottom: 1px solid var(--border-color);
+        background-color: var(--backdrop-color);
+
+        .data {
+          font-size: 12px;
+          color: var(--paragraph-color);
+          line-height: 1;
+        }
+      }
+
+      .view {
+        overflow: auto;
+        flex-grow: 1;
+      }
     }
   }
 }
diff --git a/frontend/src/app/Schedule/Compare/index.tsx b/frontend/src/app/Schedule/Compare/index.tsx
@@ -1,22 +1,34 @@
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 
 import { DataTransferBoth, Xmark } from "iconoir-react";
 import { Link, useOutletContext } from "react-router-dom";
 
 import IconButton from "@/components/IconButton";
+import Units from "@/components/Units";
 import Week from "@/components/Week";
 
 import { ScheduleContextType } from "../schedule";
 import styles from "./Compare.module.scss";
 
 export default function Compare() {
-  const { selectedSections } = useOutletContext<ScheduleContextType>();
-
+  const { selectedSections, classes } = useOutletContext<ScheduleContextType>();
   const [y, setY] = useState<number | null>(null);
   const leftRef = useRef<HTMLDivElement>(null);
   const rightRef = useRef<HTMLDivElement>(null);
   const [current, setCurrent] = useState<number | null>(null);
 
+  const [minimum, maximum] = useMemo(
+    () =>
+      classes.reduce(
+        ([minimum, maximum], { unitsMax, unitsMin }) => [
+          minimum + unitsMin,
+          maximum + unitsMax,
+        ],
+        [0, 0]
+      ),
+    [classes]
+  );
+
   useEffect(() => {
     if (!leftRef.current || !rightRef.current) return;
 
@@ -75,25 +87,52 @@ export default function Compare() {
         </div>
       </div>
       <div className={styles.body}>
-        <div
-          className={styles.view}
-          ref={leftRef}
-          onMouseEnter={() => setCurrent(0)}
-          onMouseLeave={() =>
-            setCurrent((previous) => (previous === 0 ? null : previous))
-          }
-        >
-          <Week selectedSections={selectedSections} y={y} updateY={setY} />
+        <div className={styles.panel}>
+          <div className={styles.context}>
+            <div className={styles.data}>Spring 2024</div>
+            <div className={styles.data}>
+              {classes.length === 1 ? "1 class" : `${classes.length} classes`},{" "}
+              <Units unitsMin={minimum} unitsMax={maximum}>
+                {(units) => units}
+              </Units>
+            </div>
+          </div>
+          <div
+            className={styles.view}
+            ref={leftRef}
+            onMouseEnter={() => setCurrent(0)}
+            onMouseLeave={() =>
+              setCurrent((previous) => (previous === 0 ? null : previous))
+            }
+          >
+            <Week
+              selectedSections={selectedSections}
+              y={y}
+              classes={classes}
+              updateY={setY}
+            />
+          </div>
         </div>
-        <div
-          className={styles.view}
-          ref={rightRef}
-          onMouseEnter={() => setCurrent(1)}
-          onMouseLeave={() =>
-            setCurrent((previous) => (previous === 1 ? null : previous))
-          }
-        >
-          <Week selectedSections={[]} y={y} updateY={setY} />
+        <div className={styles.panel}>
+          <div className={styles.context}>
+            <div className={styles.data}>Spring 2024</div>
+            <div className={styles.data}>
+              {classes.length === 1 ? "1 class" : `${classes.length} classes`},{" "}
+              <Units unitsMin={12} unitsMax={20}>
+                {(units) => units}
+              </Units>
+            </div>
+          </div>
+          <div
+            className={styles.view}
+            ref={rightRef}
+            onMouseEnter={() => setCurrent(1)}
+            onMouseLeave={() =>
+              setCurrent((previous) => (previous === 1 ? null : previous))
+            }
+          >
+            <Week selectedSections={[]} y={y} updateY={setY} />
+          </div>
         </div>
       </div>
     </div>

diff --git a/frontend/src/app/Schedule/Manage/Calendar/Calendar.module.scss b/frontend/src/app/Schedule/Manage/Calendar/Calendar.module.scss
@@ -10,7 +10,6 @@
     border-bottom: 1px solid var(--border-color);
     position: sticky;
     top: 0;
-    background-color: var(--background-color);
     z-index: 1;
     font-size: 12px;
     line-height: 1;
@@ -22,7 +21,7 @@
       height: 32px;
       gap: 12px;
       align-items: center;
-      background-color: var(--slate-100);
+      background-color: var(--backdrop-color);
       border-bottom: 1px solid var(--border-color);
       color: var(--paragraph-color);
 
@@ -41,6 +40,7 @@
       display: grid;
       grid-template-columns: repeat(7, 1fr);
       color: var(--label-color);
+      background-color: var(--background-color);
       flex-grow: 1;
 
       .day {

diff --git a/frontend/src/app/Schedule/Manage/Calendar/Week/Week.module.scss b/frontend/src/app/Schedule/Manage/Calendar/Week/Week.module.scss
@@ -7,11 +7,11 @@
   }
 
   &.dead {
-    background-color: var(--slate-100);
+    background-color: var(--backdrop-color);
   }
 
   &.finals {
-    background-color: white;
+    background-color: var(--foreground-color);
   }
 
   .header {

diff --git a/frontend/src/app/Schedule/Manage/Manage.module.scss b/frontend/src/app/Schedule/Manage/Manage.module.scss
@@ -32,7 +32,7 @@
         font-size: 14px;
         font-weight: 500;
         color: var(--heading-color);
-        margin-right: auto;
+        flex-grow: 1;
       }
     }
   }

diff --git a/frontend/src/app/Schedule/Manage/SideBar/SideBar.module.scss b/frontend/src/app/Schedule/Manage/SideBar/SideBar.module.scss
@@ -3,9 +3,43 @@
   border-right: 1px solid var(--border-color);
   flex-shrink: 0;
   background-color: var(--background-color);
-  padding: 12px;
   overflow: auto;
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
+  padding-bottom: 12px;
+
+  .header {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    padding: 12px;
+    position: sticky;
+    top: 0;
+    background: linear-gradient(to bottom, var(--background-color) 44px, transparent);
+    z-index: 2;
+
+    .button {
+      height: 48px;
+      padding: 0 16px;
+      justify-content: space-between;
+    }
+
+    .context {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+
+      .data {
+        font-size: 12px;
+        color: var(--paragraph-color);
+        line-height: 1;
+      }
+    }
+  }
+
+  .body {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    padding: 0 12px;
+    z-index: 1;
+  }
 }