Skip to content

Commit 9c31b41

Browse files
mathhulkmathhulk
committed
feat: Course
1 parent 6464bc5 commit 9c31b41

32 files changed

+730
-148
lines changed

‎frontend/public/images/lower-left-grid.svg‎

Lines changed: 18 additions & 0 deletions
Loading

‎frontend/public/images/upper-right-grid.svg‎

Lines changed: 18 additions & 0 deletions
Loading

‎frontend/public/positions.md‎

Lines changed: 0 additions & 105 deletions
This file was deleted.

‎frontend/public/stf_guide.md‎

Lines changed: 0 additions & 7 deletions
This file was deleted.

‎frontend/src/App.tsx‎

Lines changed: 28 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,32 @@
11
import { IconoirProvider } from "iconoir-react";
2-
import { RouterProvider, createBrowserRouter } from "react-router-dom";
2+
import {
3+
RouterProvider,
4+
createBrowserRouter,
5+
redirect,
6+
} from "react-router-dom";
37

8+
import About from "@/app/About";
49
import Catalog from "@/app/Catalog";
510
import Landing from "@/app/Landing";
611
import Layout from "@/app/Layout";
712

813
const router = createBrowserRouter([
914
{
10-
element: <Layout header={false} />,
15+
path: "/catalog/:semester?/:subject?/:courseNumber?",
16+
loader: ({
17+
params: { year, semester, subject, courseNumber, classNumber },
18+
}) => {
19+
let path = "/courses";
20+
if (year) path += `/${year}`;
21+
if (semester) path += `/${semester}`;
22+
if (subject) path += `/${subject}`;
23+
if (courseNumber) path += `/${courseNumber}`;
24+
if (classNumber) path += `/${classNumber}`;
25+
return redirect(path);
26+
},
27+
},
28+
{
29+
element: <Layout header={false} footer={false} />,
1130
children: [
1231
{
1332
element: <Landing />,
@@ -17,13 +36,19 @@ const router = createBrowserRouter([
1736
},
1837
{
1938
element: <Layout />,
39+
children: [
40+
{
41+
element: <About />,
42+
path: "/about",
43+
},
44+
],
2045
},
2146
{
2247
element: <Layout footer={false} />,
2348
children: [
2449
{
2550
element: <Catalog />,
26-
path: "/catalog",
51+
path: "/courses/:year?/:semester?/:subject?/:courseNumber?/:classNumber?",
2752
},
2853
],
2954
},

‎frontend/src/app/About/index.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
export default function About() {
2+
return <div style={{ flexGrow: 1 }}></div>;
3+
}

‎frontend/src/app/Catalog/Catalog.module.scss‎

Lines changed: 108 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -8,24 +8,126 @@
88
height: 100vh;
99
}
1010

11-
.panel {
11+
.column, .body {
1212
width: 384px;
1313
border-right: 1px solid var(--slate-200);
1414
flex-shrink: 0;
1515
overflow: auto;
1616
}
1717

1818
.body {
19+
background-color: var(--slate-50);
20+
display: flex;
21+
flex-direction: column;
22+
23+
.wrapper {
24+
padding: 12px 12px 0;
25+
flex-grow: 1;
26+
display: flex;
27+
flex-direction: column;
28+
gap: 12px;
29+
}
30+
31+
.footer {
32+
margin-top: auto;
33+
text-align: center;
34+
font-size: 14px;
35+
color: var(--slate-500);
36+
line-height: 1.5;
37+
position: sticky;
38+
bottom: 0;
39+
padding: 12px;
40+
background: linear-gradient(to top, var(--slate-50) 33px, transparent);
41+
}
42+
}
43+
44+
.course {
1945
flex-grow: 1;
2046
overflow: auto;
2147

2248
.header {
23-
padding: 0 12px;
24-
display: flex;
25-
position: sticky;
26-
margin-top: 256px;
27-
top: 0;
2849
border-bottom: 1px solid var(--slate-200);
50+
51+
.information {
52+
display: flex;
53+
align-items: center;
54+
gap: 12px;
55+
padding: 16px 24px 0;
56+
}
57+
58+
.row {
59+
display: flex;
60+
padding: 24px 24px 12px;
61+
62+
.detail {
63+
flex: 1;
64+
font-size: 14px;
65+
66+
.title {
67+
color: var(--slate-500);
68+
line-height: 1;
69+
margin-bottom: 8px;
70+
}
71+
72+
.description {
73+
color: var(--slate-600);
74+
line-height: 1.5;
75+
font-weight: 500;
76+
}
77+
78+
&:not(:last-child) {
79+
border-right: 1px solid var(--slate-200);
80+
}
81+
82+
&:first-child {
83+
padding-right: 16px;
84+
}
85+
86+
&:nth-child(2) {
87+
padding: 0 16px;
88+
}
89+
90+
&:last-child {
91+
padding-left: 16px;
92+
}
93+
}
94+
}
95+
96+
.details {
97+
padding: 24px 24px 0;
98+
display: flex;
99+
align-items: flex-start;
100+
gap: 12px;
101+
102+
.group {
103+
display: flex;
104+
gap: 12px;
105+
}
106+
107+
.text {
108+
flex-grow: 1;
109+
110+
.heading {
111+
font-size: 24px;
112+
font-feature-settings: 'cv05' on, 'cv13' on, 'ss07' on, 'cv12' on, 'cv06' on;
113+
line-height: 1.25;
114+
letter-spacing: -1%;
115+
margin-bottom: 8px;
116+
}
117+
118+
.description {
119+
font-size: 16px;
120+
line-height: 1.5;
121+
color: var(--slate-500);
122+
}
123+
}
124+
}
125+
126+
.menu {
127+
display: flex;
128+
padding: 0 12px;
129+
align-items: center;
130+
}
29131
}
30132
}
31133
}

‎frontend/src/app/Catalog/Course/Course.module.scss‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
.root {
2+
border: 1px solid var(--slate-200);
3+
border-radius: 8px;
4+
flex-shrink: 0;
5+
background-color: white;
6+
position: relative;
7+
padding: 0 16px;
8+
//padding: 0 16px 0 23px;
9+
10+
.class {
11+
padding: 16px 0;
12+
display: flex;
13+
gap: 16px;
14+
align-items: flex-start;
15+
cursor: pointer;
16+
17+
&:not(:last-child) {
18+
border-bottom: 1px solid var(--slate-200);
19+
}
20+
21+
&:hover .icon, &:hover .text .title {
22+
color: var(--slate-900);
23+
}
24+
}
25+
26+
/*&::after {
27+
content: "";
28+
position: absolute;
29+
top: -1px;
30+
left: -1px;
31+
background-color: var(--blue-500);
32+
width: 8px;
33+
height: calc(100% + 2px);
34+
border-radius: 4px 0 0 4px;
35+
}*/
36+
37+
.icon {
38+
flex-shrink: 0;
39+
color: var(--slate-500);
40+
}
41+
42+
.text {
43+
flex-grow: 1;
44+
font-size: 14px;
45+
46+
.heading {
47+
font-feature-settings: 'cv05' on, 'cv13' on, 'ss07' on, 'cv12' on, 'cv06' on;
48+
letter-spacing: -1%;
49+
font-weight: 660;
50+
color: var(--slate-900);
51+
margin-bottom: 8px;
52+
}
53+
54+
.title {
55+
color: var(--slate-500);
56+
font-weight: 500;
57+
margin-bottom: 8px;
58+
}
59+
60+
.description {
61+
color: var(--slate-500);
62+
line-height: 1.5;
63+
}
64+
65+
.row {
66+
display: flex;
67+
gap: 12px;
68+
margin-top: 12px;
69+
align-items: center;
70+
line-height: 1;
71+
72+
.units {
73+
font-size: 14px;
74+
color: var(--slate-500);
75+
}
76+
}
77+
}
78+
}

0 commit comments

Comments
 (0)