From 9c693d409a6dea629e50202ab8a3c3c1d92be8f3 Mon Sep 17 00:00:00 2001 From: Matthew Rowland Date: Mon, 15 Apr 2024 00:49:47 -0700 Subject: [PATCH] feat: Units, responsive Details, etc. --- .../src/app/Catalog/Class/Class.module.scss | 66 +++++-------- frontend/src/app/Catalog/Class/index.tsx | 92 +++++++++---------- .../src/app/Schedules/SideBar/Class/index.tsx | 7 +- .../Browser/List/Course/Course.module.scss | 7 -- .../components/Browser/List/Course/index.tsx | 15 +-- .../components/Details/Details.module.scss | 30 +++--- frontend/src/components/Details/index.tsx | 2 + .../src/components/Units/Units.module.scss | 5 + frontend/src/components/Units/index.tsx | 18 ++++ 9 files changed, 112 insertions(+), 130 deletions(-) create mode 100644 frontend/src/components/Units/Units.module.scss create mode 100644 frontend/src/components/Units/index.tsx diff --git a/frontend/src/app/Catalog/Class/Class.module.scss b/frontend/src/app/Catalog/Class/Class.module.scss index 8560bd912..2e552c036 100644 --- 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; + } } \ No newline at end of file diff --git a/frontend/src/app/Catalog/Class/index.tsx b/frontend/src/app/Catalog/Class/index.tsx index 786cde025..ae15a3b87 100644 --- 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 (
-
-
-

- {currentSubject} {currentCourseNumber} -

-

- {currentClass?.title ?? currentCourse.title} -

-
-
+
+
+ - + - + - - - - -
+ + + + +
-
+

+ {currentSubject} {currentCourseNumber} +

+

+ {currentClass?.title ?? partialClass.title ?? currentCourse.title} +

+
-
{units}
+ {currentClass && }
-
- {views.map(({ text }, index) => ( - setView(index)} - > - {text} - - ))} -
+
+
+ {views.map(({ text }, index) => ( + setView(index)} + > + {text} + + ))}
diff --git a/frontend/src/app/Schedules/SideBar/Class/index.tsx b/frontend/src/app/Schedules/SideBar/Class/index.tsx index 8363fc5f8..d94e25d7d 100644 --- 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({

{title ?? course.title}

-

- {unitsMin === unitsMax - ? `${unitsMax} ${unitsMax === 1 ? "unit" : "units"}` - : `${unitsMin} - ${unitsMax} units`} -

+
diff --git a/frontend/src/components/Browser/List/Course/Course.module.scss b/frontend/src/components/Browser/List/Course/Course.module.scss index 5b0032e11..a9db2423d 100644 --- 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 index 711785ee4..dd19ab9b4 100644 --- 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} /> -
- {courseMinimum === courseMaximum - ? `${courseMinimum} ${ - courseMinimum === 1 ? "unit" : "units" - }` - : `${courseMinimum} - ${courseMaximum} units`} -
+
@@ -162,11 +157,7 @@ const Course = forwardRef< waitlistCount={waitlistCount} waitlistCapacity={waitlistMax} /> -
- {unitsMax === unitsMin - ? `${unitsMin} ${unitsMin === 1 ? "unit" : "units"}` - : `${unitsMin} - ${unitsMax} units`} -
+
diff --git a/frontend/src/components/Details/Details.module.scss b/frontend/src/components/Details/Details.module.scss index 9e03cdafa..92c33e91b 100644 --- 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; - } } } \ No newline at end of file diff --git a/frontend/src/components/Details/index.tsx b/frontend/src/components/Details/index.tsx index abb31b436..c57c1d510 100644 --- a/frontend/src/components/Details/index.tsx +++ b/frontend/src/components/Details/index.tsx @@ -25,10 +25,12 @@ export default function Details({

Time

+

Location

+

{instructors?.length > 1 ? "Instructors" : "Instructor"} diff --git a/frontend/src/components/Units/Units.module.scss b/frontend/src/components/Units/Units.module.scss new file mode 100644 index 000000000..f6cd0173d --- /dev/null +++ b/frontend/src/components/Units/Units.module.scss @@ -0,0 +1,5 @@ +.root { + font-size: 14px; + color: var(--paragraph-color); + line-height: 1; +} \ No newline at end of file diff --git a/frontend/src/components/Units/index.tsx b/frontend/src/components/Units/index.tsx new file mode 100644 index 000000000..3a2af6d4c --- /dev/null +++ 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

{units}

; +}