Merge branch 'crowd-sourced-data' of https://github.com/asuc-octo/ber…

…keleytime into crowd-sourced-data
asuc-octo · Oct 30, 2024 · 9aa0933 · 9aa0933
2 parents 84255a8 + 7cc3134
commit 9aa0933
Show file tree

Hide file tree

Showing 14 changed files with 1,094 additions and 19 deletions.
diff --git a/apps/frontend/src/App.tsx b/apps/frontend/src/App.tsx
@@ -32,6 +32,11 @@ const Course = {
 };
 
 const About = lazy(() => import("@/app/About"));
+const CatalogEnrollment = lazy(() => import("@/components/Class/Enrollment"));
+const CatalogGrades = lazy(() => import("@/components/Class/Grades"));
+const CatalogOverview = lazy(() => import("@/components/Class/Overview"));
+const CatalogSections = lazy(() => import("@/components/Class/Sections"));
+const CatalogRatings = lazy(() => import("@/components/Class/Ratings"));
 const Discover = lazy(() => import("@/app/Discover"));
 const Plan = lazy(() => import("@/app/Plan"));
 const Schedule = lazy(() => import("@/app/Schedule"));
@@ -143,6 +148,10 @@ const router = createBrowserRouter([
             element: <Class.Grades />,
             path: "grades",
           },
+          {
+            element: <CatalogRatings />,
+            path: "ratings",
+          },
           {
             path: "*",
             loader: () => redirect("."),

diff --git a/apps/frontend/src/components/Class/Overview/index.tsx b/apps/frontend/src/components/Class/Overview/index.tsx
@@ -1,24 +1,21 @@
 import Details from "@/components/Details";
 import useClass from "@/hooks/useClass";
-
 import styles from "./Overview.module.scss";
+import AttendanceRequirements from "@/components/Detail";
 
 export default function Overview() {
-  const { class: _class } = useClass();
-
-  return (
-    <div className={styles.root}>
-      <Details {..._class.primarySection.meetings[0]} />
-      <p className={styles.label}>Description</p>
-      <p className={styles.description}>
-        {_class.description ?? _class.course.description}
-      </p>
-      {_class.course.requirements && (
-        <>
-          <p className={styles.label}>Prerequisites</p>
-          <p className={styles.description}>{_class.course.requirements}</p>
-        </>
-      )}
-    </div>
-  );
-}
+    const { class: _class } = useClass();
+    return (
+        <div className={styles.root}>
+            <Details {..._class.primarySection.meetings[0]} />
+            <p className={styles.label}>Description</p>
+            <p className={styles.description}>
+                {_class.description ?? _class.course.description}
+            </p>
+            <AttendanceRequirements
+                attendanceRequired={_class.primarySection.attendanceRequired}
+                lecturesRecorded={_class.primarySection.lecturesRecorded}
+            />
+        </div>
+    );
+}
diff --git a/apps/frontend/src/components/Class/Ratings/Ratings.module.scss b/apps/frontend/src/components/Class/Ratings/Ratings.module.scss
@@ -0,0 +1,284 @@
+.root {
+  background-color: var(--background-color);
+  padding: 24px 0;
+}
+
+.ratingsContainer {
+  background-color: var(--foreground-color);
+  border-radius: 8px;
+  box-shadow: 0 1px 2px rgb(0 0 0 / 5%);
+  border: 1px solid var(--border-color);
+}
+
+.ratingSection {
+  padding: 16px 24px;
+  border-bottom: 1px solid var(--border-color);
+
+  &:last-child {
+    border-bottom: none;
+  }
+}
+
+.ratingHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  cursor: pointer;
+
+  &:hover {
+    .arrow {
+      color: var(--heading-color);
+    }
+  }
+}
+
+.titleSection {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+
+  .title {
+    color: var(--heading-color);
+    font-size: 16px;
+    font-weight: 500;
+  }
+
+  .info {
+    color: var(--label-color);
+    font-size: 14px;
+
+    &:hover {
+      color: var(--heading-color);
+    }
+  }
+}
+
+.tooltipContent {
+  background-color: rgb(0 0 0);
+  border-radius: 4px;
+  padding: 12px;
+  padding-top: 0.1px;
+  max-width: 260px;
+  box-shadow: 0 2px 4px rgb(0 0 0 / 10%);
+}
+
+.tooltipTitle {
+  color: white;
+  font-size: 14px;
+  font-weight: 500;
+  margin-bottom: 4px;
+}
+
+.tooltipDescription {
+  color: var(--paragraph-color);
+  font-size: 13px;
+  line-height: 1.4;
+}
+
+.arrow {
+  fill: var(--foreground-color);
+}
+
+.statusSection {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.reviewCount {
+  color: var(--label-color);
+  font-size: 14px;
+}
+
+.arrow {
+  color: var(--label-color);
+  transition: transform 0.2s ease;
+
+  &.expanded {
+    transform: rotate(180deg);
+  }
+}
+
+.statusGreen {
+  color: var(--green-600);
+}
+
+.statusOrange {
+  color: var(--orange-500);
+}
+
+.statusRed {
+  color: var(--red-600);
+}
+
+.ratingContent {
+  margin-top: 16px;
+  margin-left: 25%;
+  animation: slideDown 300ms ease forwards;
+}
+
+.statRow {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 8px;
+  opacity: 0;
+  animation: fadeIn 500ms ease forwards;
+  animation-delay: var(--delay);
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+
+  .rating {
+    width: 24px;
+    color: var(--heading-color);
+    font-weight: 500;
+    text-align: center;
+    opacity: 0;
+    animation: fadeIn 300ms ease forwards;
+    animation-delay: calc(var(--delay) + 100ms);
+  }
+
+  .barContainer {
+    flex-grow: 1;
+    height: 8px;
+    background-color: var(--background-color);
+    border-radius: 4px;
+    overflow: hidden;
+
+    .bar {
+      height: 100%;
+      background-color: var(--blue-500);
+      border-radius: 4px;
+      transition: width 1000ms cubic-bezier(0.4, 0, 0.2, 1);
+      width: 0;
+    }
+  }
+
+  .percentage {
+    width: 48px;
+    color: var(--paragraph-color);
+    font-size: 14px;
+    text-align: right;
+    opacity: 0;
+    animation: fadeIn 300ms ease forwards;
+    animation-delay: calc(var(--delay) + 200ms);
+    transition: all 1000ms cubic-bezier(0.4, 0, 0.2, 1);
+  }
+}
+
+.header {
+  margin-bottom: 16px;
+}
+
+@keyframes slideDown {
+  from {
+    opacity: 0;
+    transform: translateY(-20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateX(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes barFill {
+  from {
+    transform: scaleX(0);
+  }
+  to {
+    transform: scaleX(1);
+  }
+}
+
+.ratingContent {
+  margin-top: 16px;
+  margin-left: 25%;
+  animation: slideDown 300ms ease forwards;
+}
+
+.statRow {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 8px;
+  opacity: 0;
+  animation: fadeIn 500ms ease forwards;
+  animation-delay: var(--delay);
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+
+  .rating {
+    width: 24px;
+    color: var(--heading-color);
+    font-weight: 500;
+    text-align: center;
+    opacity: 0;
+    animation: fadeIn 300ms ease forwards;
+    animation-delay: calc(var(--delay) + 100ms);
+  }
+
+  .barContainer {
+    flex-grow: 1;
+    height: 8px;
+    background-color: var(--background-color);
+    border-radius: 4px;
+    overflow: hidden;
+
+    .bar {
+      height: 100%;
+      background-color: var(--blue-500);
+      border-radius: 4px;
+      width: 0;
+      transform-origin: left;
+      transition: width 600ms cubic-bezier(0.4, 0, 0.2, 1);
+      will-change: width;
+    }
+  }
+
+  .percentage {
+    width: 48px;
+    color: var(--paragraph-color);
+    font-size: 14px;
+    text-align: right;
+    opacity: 0;
+    animation: fadeIn 300ms ease forwards;
+    animation-delay: calc(var(--delay) + 200ms);
+  }
+}
+
+@keyframes slideDown {
+  from {
+    opacity: 0;
+    transform: translateY(-20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateX(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}