feat: Units, responsive Details, etc.

asuc-octo · Apr 15, 2024 · 9c693d4 · 9c693d4
1 parent 5d6571d
commit 9c693d4
Show file tree

Hide file tree

Showing 9 changed files with 112 additions and 130 deletions.
diff --git a/frontend/src/app/Catalog/Class/Class.module.scss b/frontend/src/app/Catalog/Class/Class.module.scss
@@ -16,56 +16,40 @@
   }
 
   .header {
-    border-bottom: 1px solid var(--border-color);
+    padding: 24px 24px 12px;
 
-    .information {
+    .group {
       display: flex;
-      align-items: center;
-      gap: 12px;
-      padding: 16px 24px 12px;
-      font-size: 14px;
-      line-height: 1;
-
-      .units {
-        color: var(--paragraph-color);
-        user-select: none;
-      }
+      justify-content: space-between;
+      margin-bottom: 24px;
     }
 
-    .details {
-      padding: 24px 24px 0;
+    .row {
       display: flex;
-      align-items: flex-start;
+      align-items: center;
       gap: 12px;
+    }
 
-      .group {
-        display: flex;
-        gap: 12px;
-      }
-
-      .text {
-        flex-grow: 1;
-
-        .heading {
-          font-size: 24px;
-          line-height: 1.25;
-          font-weight: 700;
-          color: var(--heading-color);
-          margin-bottom: 8px;
-        }
-
-        .description {
-          font-size: 16px;
-          line-height: 1.5;
-          color: var(--paragraph-color);
-        }
-      }
+    .heading {
+      font-size: 24px;
+      line-height: 1.25;
+      font-weight: 700;
+      color: var(--heading-color);
+      margin-bottom: 8px;
     }
 
-    .menu {
-      display: flex;
-      padding: 0 12px;
-      align-items: center;
+    .description {
+      font-size: 16px;
+      line-height: 1.5;
+      color: var(--paragraph-color);
+      margin-bottom: 16px;
     }
   }
+
+  .menu {
+    display: flex;
+    border-bottom: 1px solid var(--border-color);
+    padding: 0 12px;
+    align-items: center;
+  }
 }
diff --git a/frontend/src/app/Catalog/Class/index.tsx b/frontend/src/app/Catalog/Class/index.tsx
@@ -1,14 +1,16 @@
 import { useMemo, useState } from "react";
 
 import { useQuery } from "@apollo/client";
-import { Bookmark, CalendarPlus, Xmark } from "iconoir-react";
+import { BookmarkSolid, CalendarPlus, Heart, Xmark } from "iconoir-react";
 import { Link, useSearchParams } from "react-router-dom";
 
 import AverageGrade from "@/components/AverageGrade";
+import Button from "@/components/Button";
 import CCN from "@/components/CCN";
 import Capacity from "@/components/Capacity";
 import IconButton from "@/components/IconButton";
 import MenuItem from "@/components/MenuItem";
+import Units from "@/components/Units";
 import {
   GET_CLASS,
   ICatalogClass,
@@ -38,10 +40,6 @@ const views = [
     text: "Enrollment",
     Component: () => null,
   },
-  {
-    text: "Discussion",
-    Component: () => null,
-  },
 ];
 
 interface ClassProps {
@@ -88,49 +86,42 @@ export default function Class({
 
   const currentClass = useMemo(() => classData?.class, [classData?.class]);
 
-  const units = useMemo(() => {
-    const { unitsMin: minimum, unitsMax: maximum } =
-      currentClass ?? partialClass;
-
-    return maximum === minimum
-      ? `${minimum} ${minimum === 1 ? "unit" : "units"}`
-      : `${minimum} - ${maximum} units`;
-  }, [currentClass, partialClass]);
-
   const Component = useMemo(() => views[view].Component, [view]);
 
   return (
     <div className={styles.root}>
       <div className={styles.header}>
-        <div className={styles.details}>
-          <div className={styles.text}>
-            <h1 className={styles.heading}>
-              {currentSubject} {currentCourseNumber}
-            </h1>
-            <p className={styles.description}>
-              {currentClass?.title ?? currentCourse.title}
-            </p>
-          </div>
-          <div className={styles.group}>
+        <div className={styles.group}>
+          <div className={styles.row}>
+            <Button secondary>
+              <Heart />
+              23
+            </Button>
             <IconButton>
-              <CalendarPlus />
+              <BookmarkSolid />
             </IconButton>
             <IconButton>
-              <Bookmark />
+              <CalendarPlus />
             </IconButton>
-            <Link
-              to={{
-                pathname: `/catalog/${currentYear}/${currentSemester}`,
-                search: searchParams.toString(),
-              }}
-            >
-              <IconButton>
-                <Xmark />
-              </IconButton>
-            </Link>
           </div>
+          <Link
+            to={{
+              pathname: `/catalog/${currentYear}/${currentSemester}`,
+              search: searchParams.toString(),
+            }}
+          >
+            <IconButton>
+              <Xmark />
+            </IconButton>
+          </Link>
         </div>
-        <div className={styles.information}>
+        <h1 className={styles.heading}>
+          {currentSubject} {currentCourseNumber}
+        </h1>
+        <p className={styles.description}>
+          {currentClass?.title ?? partialClass.title ?? currentCourse.title}
+        </p>
+        <div className={styles.row}>
           <AverageGrade
             gradeAverage={
               currentClass?.course?.gradeAverage ?? currentCourse.gradeAverage
@@ -146,20 +137,23 @@ export default function Class({
               currentClass?.waitlistMax ?? partialClass.waitlistMax
             }
           />
-          <div className={styles.units}>{units}</div>
+          <Units
+            unitsMax={currentClass?.unitsMax ?? partialClass.unitsMax}
+            unitsMin={currentClass?.unitsMin ?? partialClass.unitsMin}
+          />
           {currentClass && <CCN ccn={currentClass.primarySection.ccn} />}
         </div>
-        <div className={styles.menu}>
-          {views.map(({ text }, index) => (
-            <MenuItem
-              key={index}
-              active={index === view}
-              onClick={() => setView(index)}
-            >
-              {text}
-            </MenuItem>
-          ))}
-        </div>
+      </div>
+      <div className={styles.menu}>
+        {views.map(({ text }, index) => (
+          <MenuItem
+            key={index}
+            active={index === view}
+            onClick={() => setView(index)}
+          >
+            {text}
+          </MenuItem>
+        ))}
       </div>
       <div className={styles.view}>
         <Component currentClass={currentClass} />

diff --git a/frontend/src/app/Schedules/SideBar/Class/index.tsx b/frontend/src/app/Schedules/SideBar/Class/index.tsx
@@ -2,6 +2,7 @@ import classNames from "classnames";
 import { ArrowSeparateVertical, ArrowUnionVertical } from "iconoir-react";
 
 import CCN from "@/components/CCN";
+import Units from "@/components/Units";
 import { IClass } from "@/lib/api";
 
 import styles from "./Class.module.scss";
@@ -35,11 +36,7 @@ export default function Class({
             </p>
             <p className={styles.description}>{title ?? course.title}</p>
             <div className={styles.row}>
-              <p className={styles.units}>
-                {unitsMin === unitsMax
-                  ? `${unitsMax} ${unitsMax === 1 ? "unit" : "units"}`
-                  : `${unitsMin} - ${unitsMax} units`}
-              </p>
+              <Units unitsMin={unitsMin} unitsMax={unitsMax} />
               <CCN ccn={primarySection.ccn} />
             </div>
           </div>

diff --git a/frontend/src/components/Browser/List/Course/Course.module.scss b/frontend/src/components/Browser/List/Course/Course.module.scss
@@ -66,13 +66,6 @@
         gap: 12px;
         margin-top: 12px;
         align-items: center;
-        line-height: 1;
-
-        .units {
-          font-size: 14px;
-          user-select: none;
-          color: var(--paragraph-color);
-        }
       }
     }
   }

diff --git a/frontend/src/components/Browser/List/Course/index.tsx b/frontend/src/components/Browser/List/Course/index.tsx
@@ -8,6 +8,7 @@ import {
 
 import AverageGrade from "@/components/AverageGrade";
 import Capacity from "@/components/Capacity";
+import Units from "@/components/Units";
 import { ICatalogCourse } from "@/lib/api";
 
 import styles from "./Course.module.scss";
@@ -112,13 +113,7 @@ const Course = forwardRef<
                   waitlistCount={courseWaitlistCount}
                   waitlistCapacity={courseWaitlistCapacity}
                 />
-                <div className={styles.units}>
-                  {courseMinimum === courseMaximum
-                    ? `${courseMinimum} ${
-                        courseMinimum === 1 ? "unit" : "units"
-                      }`
-                    : `${courseMinimum} - ${courseMaximum} units`}
-                </div>
+                <Units unitsMin={courseMinimum} unitsMax={courseMaximum} />
               </div>
             </div>
             <div className={styles.column}>
@@ -162,11 +157,7 @@ const Course = forwardRef<
                         waitlistCount={waitlistCount}
                         waitlistCapacity={waitlistMax}
                       />
-                      <div className={styles.units}>
-                        {unitsMax === unitsMin
-                          ? `${unitsMin} ${unitsMin === 1 ? "unit" : "units"}`
-                          : `${unitsMin} - ${unitsMax} units`}
-                      </div>
+                      <Units unitsMin={unitsMin} unitsMax={unitsMax} />
                     </div>
                   </div>
                   <div className={styles.column}>

diff --git a/frontend/src/components/Details/Details.module.scss b/frontend/src/components/Details/Details.module.scss
@@ -1,5 +1,19 @@
 .root {
   display: flex;
+  gap: 16px;
+
+  @media (width <= 992px) {
+    flex-direction: column;
+  }
+
+  .divider {
+    width: 1px;
+    background-color: var(--border-color);
+
+    @media (width <= 992px) {
+      display: none;
+    }
+  }
 
   .column {
     flex: 1;
@@ -24,21 +38,5 @@
         }
       }
     }
-
-    &:not(:last-child) {
-      border-right: 1px solid var(--border-color);
-    }
-
-    &:first-child {
-      padding-right: 16px;
-    }
-
-    &:nth-child(2) {
-      padding: 0 16px;
-    }
-
-    &:last-child {
-      padding-left: 16px;
-    }
   }
 }
diff --git a/frontend/src/components/Details/index.tsx b/frontend/src/components/Details/index.tsx
@@ -25,10 +25,12 @@ export default function Details({
         <p className={styles.title}>Time</p>
         <Time days={days} timeStart={timeStart} timeEnd={timeEnd} />
       </div>
+      <div className={styles.divider} />
       <div className={styles.column}>
         <p className={styles.title}>Location</p>
         <Location location={location} />
       </div>
+      <div className={styles.divider} />
       <div className={styles.column}>
         <p className={styles.title}>
           {instructors?.length > 1 ? "Instructors" : "Instructor"}

diff --git a/frontend/src/components/Units/Units.module.scss b/frontend/src/components/Units/Units.module.scss
@@ -0,0 +1,5 @@
+.root {
+  font-size: 14px;
+  color: var(--paragraph-color);
+  line-height: 1;
+}
diff --git a/frontend/src/components/Units/index.tsx b/frontend/src/components/Units/index.tsx
@@ -0,0 +1,18 @@
+import { useMemo } from "react";
+
+import styles from "./Units.module.scss";
+
+interface UnitsProps {
+  unitsMin: number;
+  unitsMax: number;
+}
+
+export default function Units({ unitsMin, unitsMax }: UnitsProps) {
+  const units = useMemo(() => {
+    return unitsMax === unitsMin
+      ? `${unitsMin} ${unitsMin === 1 ? "unit" : "units"}`
+      : `${unitsMin} - ${unitsMax} units`;
+  }, [unitsMax, unitsMin]);
+
+  return <p className={styles.root}>{units}</p>;
+}