-
Notifications
You must be signed in to change notification settings - Fork 9
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: Location, Time, Details, CCN, Tooltip; sections, etc.
- Loading branch information
Showing
21 changed files
with
1,089 additions
and
211 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
18 changes: 18 additions & 0 deletions
18
frontend/src/app/Catalog/Class/Overview/Overview.module.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,18 @@ | ||
| .root { | ||
| padding: 24px; | ||
| background-color: var(--slate-50); | ||
| min-height: 100%; | ||
| font-size: 14px; | ||
|
|
||
| .label { | ||
| margin-top: 24px; | ||
| color: var(--slate-400); | ||
| line-height: 1; | ||
| } | ||
|
|
||
| .description { | ||
| color: var(--slate-500); | ||
| margin-top: 8px; | ||
| line-height: 1.5; | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,3 +1,28 @@ | ||
| export default function Overview() { | ||
| return <div>Overview</div>; | ||
| import Details from "@/components/Details"; | ||
| import { IClass } from "@/lib/api"; | ||
|
|
||
| import styles from "./Overview.module.scss"; | ||
|
|
||
| interface OverviewProps { | ||
| currentClass?: IClass; | ||
| } | ||
|
|
||
| export default function Overview({ currentClass }: OverviewProps) { | ||
| if (!currentClass) return null; | ||
|
|
||
| return ( | ||
| <div className={styles.root}> | ||
| <Details {...currentClass.primarySection} /> | ||
| <p className={styles.label}>Description</p> | ||
| <p className={styles.description}> | ||
| {currentClass.description ?? currentClass.course.description} | ||
| </p> | ||
| {currentClass.course.prereqs && ( | ||
| <> | ||
| <p className={styles.label}>Prerequisites</p> | ||
| <p className={styles.description}>{currentClass.course.prereqs}</p> | ||
| </> | ||
| )} | ||
| </div> | ||
| ); | ||
| } |
96 changes: 83 additions & 13 deletions
96
frontend/src/app/Catalog/Class/Sections/Sections.module.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,19 +1,89 @@ | ||
| .root { | ||
| background-color: var(--slate-50); | ||
| height: 100%; | ||
| padding: 24px; | ||
|
|
||
| .section { | ||
| padding: 24px; | ||
| background-color: white; | ||
| border-radius: 8px; | ||
| box-shadow: 0 1px 2px rgb(0 0 0 / 5%); | ||
| margin-bottom: 24px; | ||
| border: 1px solid var(--slate-200); | ||
|
|
||
| .header { | ||
| min-height: 100%; | ||
| padding: 24px 24px 24px 12px; | ||
| display: flex; | ||
| align-items: flex-start; | ||
| gap: 24px; | ||
|
|
||
| .view { | ||
| flex-grow: 1; | ||
| height: 200vh; | ||
|
|
||
| .section { | ||
| padding: 24px; | ||
| background-color: white; | ||
| border-radius: 8px; | ||
| box-shadow: 0 1px 2px rgb(0 0 0 / 5%); | ||
| margin-bottom: 24px; | ||
| border: 1px solid var(--slate-200); | ||
|
|
||
| .header { | ||
| display: flex; | ||
| margin-bottom: 24px; | ||
| gap: 12px; | ||
|
|
||
| .lock { | ||
| height: 32px; | ||
| width: 32px; | ||
| border-radius: 16px; | ||
| display: grid; | ||
| place-items: center; | ||
| background-color: var(--red-50); | ||
| color: var(--red-500); | ||
| } | ||
|
|
||
| .text { | ||
| flex-grow: 1; | ||
|
|
||
| .title { | ||
| color: var(--slate-900); | ||
| font-size: 14px; | ||
| margin-bottom: 8px; | ||
| line-height: 1; | ||
| font-weight: 500; | ||
| } | ||
| } | ||
| } | ||
| } | ||
| } | ||
|
|
||
| .menu { | ||
| position: sticky; | ||
| top: 24px; | ||
| width: 128px; | ||
| display: flex; | ||
| flex-direction: column; | ||
| gap: 8px; | ||
|
|
||
| .item { | ||
| height: 32px; | ||
| border-radius: 4px; | ||
| display: flex; | ||
| justify-content: space-between; | ||
| align-items: center; | ||
| padding: 0 12px; | ||
| font-size: 14px; | ||
| font-weight: 500; | ||
| color: var(--slate-500); | ||
| width: fit-content; | ||
|
|
||
| &:hover { | ||
| background-color: var(--slate-100); | ||
| } | ||
|
|
||
| &:first-child { | ||
| color: var(--slate-900); | ||
| position: relative; | ||
|
|
||
| &::after { | ||
| content: ''; | ||
| width: 2px; | ||
| height: 100%; | ||
| background-color: var(--blue-500); | ||
| position: absolute; | ||
| left: -12px; | ||
| } | ||
| } | ||
| } | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,25 +1,54 @@ | ||
| import { Lock } from "iconoir-react"; | ||
|
|
||
| import CCN from "@/components/CCN"; | ||
| import Details from "@/components/Details"; | ||
| import { IClass } from "@/lib/api"; | ||
|
|
||
| import Capacity from "../../../../components/Capacity"; | ||
| import styles from "./Sections.module.scss"; | ||
|
|
||
| export default function Sections() { | ||
| interface SectionsProps { | ||
| currentClass?: IClass; | ||
| } | ||
|
|
||
| export default function Sections({ currentClass }: SectionsProps) { | ||
| return ( | ||
| <div className={styles.root}> | ||
| <div className={styles.section}> | ||
| <div className={styles.header}> | ||
| <div className={styles.text}> | ||
| <div className={styles.title}>Section 1</div> | ||
| <div className={styles.description}>Instructor: John Doe</div> | ||
| <div className={styles.menu}> | ||
| <div className={styles.item}>Discussions</div> | ||
| <div className={styles.item}>Labs</div> | ||
| </div> | ||
| <div className={styles.view}> | ||
| {currentClass?.sections.map((section) => ( | ||
| <div className={styles.section}> | ||
| <div className={styles.header}> | ||
| <div className={styles.text}> | ||
| <p className={styles.title}> | ||
| {section.kind === "Laboratory" ? "Lab" : section.kind}{" "} | ||
| {section.number} | ||
| </p> | ||
| <CCN ccn={section.ccn} /> | ||
| </div> | ||
| <div className={styles.lock}> | ||
| <Lock /> | ||
| </div> | ||
| <Capacity | ||
| count={section.enrollCount} | ||
| capacity={section.enrollMax} | ||
| waitlistCount={section.waitlistCount} | ||
| waitlistCapacity={section.waitlistMax} | ||
| /> | ||
| </div> | ||
| <Details | ||
| days={section.days ?? []} | ||
| timeStart={section.timeStart} | ||
| timeEnd={section.timeEnd} | ||
| location={section.location} | ||
| instructors={section.instructors ?? []} | ||
| /> | ||
| </div> | ||
| <Capacity | ||
| count={10} | ||
| capacity={20} | ||
| waitlistCount={5} | ||
| waitlistCapacity={10} | ||
| /> | ||
| </div> | ||
| ))} | ||
| </div> | ||
| <div className={styles.section}></div> | ||
| <div className={styles.section}></div> | ||
| </div> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.