Skip to content

Commit

Permalink
made progress on adding ratings/data
Browse files Browse the repository at this point in the history
  • Loading branch information
@nnicolee
nnicolee committed Oct 30, 2024
1 parent 360b54e commit f738445
Show file tree
Hide file tree
Showing 12 changed files with 653 additions and 341 deletions.
35 changes: 16 additions & 19 deletions apps/frontend/src/components/Class/Overview/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -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>
);
}
215 changes: 25 additions & 190 deletions apps/frontend/src/components/Class/Ratings/Ratings.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@
border-radius: 8px;
box-shadow: 0 1px 2px rgb(0 0 0 / 5%);
border: 1px solid var(--border-color);

}

.ratingSection {
Expand Down Expand Up @@ -115,13 +114,17 @@
.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;
Expand All @@ -132,6 +135,9 @@
color: var(--heading-color);
font-weight: 500;
text-align: center;
opacity: 0;
animation: fadeIn 300ms ease forwards;
animation-delay: calc(var(--delay) + 100ms);
}

.barContainer {
Expand All @@ -145,7 +151,8 @@
height: 100%;
background-color: var(--blue-500);
border-radius: 4px;
transition: width 0.3s ease;
transition: width 1000ms cubic-bezier(0.4, 0, 0.2, 1);
width: 0;
}
}

Expand All @@ -154,209 +161,45 @@
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;
}

.overlay {
background-color: rgb(0 0 0 / 50%);
position: fixed;
inset: 0;
animation: overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
z-index: 50; /* Ensure overlay is above other content */
}


.modal {
background-color: var(--foreground-color);
border-radius: 8px;
box-shadow: 0 4px 32px rgb(0 0 0 / 25%);
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 90vw;
max-width: 600px;
max-height: 85vh;
padding: 24px;
animation: contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
overflow-y: auto;
z-index: 51; /* Ensure modal is above the overlay */
}

.modalHeader {
margin-bottom: 24px;
text-align: left;
}

.modalTitle {
color: var(--heading-color);
font-size: 24px;
font-weight: 500;
margin-bottom: 4px;
}

.modalSubtitle {
color: var(--paragraph-color);
font-size: 16px;
}

.modalContent {
margin-bottom: 24px;
}

.ratingQuestion {
margin-bottom: 24px;

h3 {
color: var(--heading-color);
font-size: 16px;
font-weight: 500;
margin-bottom: 16px;
}
}

.ratingScale {
display: flex;
align-items: center;
gap: 16px;
margin-top: 8px;

span {
color: var(--paragraph-color);
font-size: 14px;
min-width: 80px;
}
}

.ratingButtons {
display: flex;
gap: 8px;
flex-grow: 1;
justify-content: center;
}

.ratingButton {
width: 40px;
height: 40px;
border: 1px solid var(--border-color);
border-radius: 4px;
background: none;
color: var(--heading-color);
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;

&:hover {
background-color: var(--background-hover-color);
}

&[data-state='checked'] {
background-color: var(--blue-500);
border-color: var(--blue-500);
color: white;
}
}

.radioGroup {
display: flex;
flex-direction: column;
gap: 12px;
margin-top: 8px;

label {
display: flex;
align-items: center;
gap: 8px;
color: var(--paragraph-color);
font-size: 14px;
cursor: pointer;

input {
width: 16px;
height: 16px;
}
}
}

.modalFooter {
display: flex;
justify-content: flex-end;
gap: 12px;
border-top: 1px solid var(--border-color);
padding-top: 24px;
}

@keyframes overlayShow {
from {
opacity: 0;
}
to {
opacity: 1;
}
}

@keyframes contentShow {
@keyframes slideDown {
from {
opacity: 0;
transform: translate(-50%, -48%) scale(0.96);
transform: translateY(-20px);
}
to {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}
}

.ratingButton {
width: 40px;
height: 40px;
border: 1px solid var(--border-color);
border-radius: 4px;
background: none;
color: var(--heading-color);
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;

&:hover {
background-color: var(--background-hover-color);
border-color: var(--blue-500);
}

&.selected {
background-color: var(--blue-500);
border-color: var(--blue-500);
color: white;
}

&:focus {
outline: none;
box-shadow: 0 0 0 2px var(--blue-200);
transform: translateY(0);
}
}

@keyframes contentSlide {
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(-10px);
transform: translateX(-10px);
}
to {
opacity: 1;
transform: translateY(0);
transform: translateX(0);
}
}

@keyframes fadeIn {
@keyframes barFill {
from {
opacity: 0;
transform: translateX(-10px);
transform: scaleX(0);
}
to {
opacity: 1;
transform: translateX(0);
transform: scaleX(1);
}
}

Expand Down Expand Up @@ -400,8 +243,10 @@
height: 100%;
background-color: var(--blue-500);
border-radius: 4px;
transition: width 1000ms cubic-bezier(0.4, 0, 0.2, 1);
width: 0;
transform-origin: left;
transition: width 600ms cubic-bezier(0.4, 0, 0.2, 1);
will-change: width;
}
}

Expand All @@ -413,7 +258,6 @@
opacity: 0;
animation: fadeIn 300ms ease forwards;
animation-delay: calc(var(--delay) + 200ms);
transition: all 1000ms cubic-bezier(0.4, 0, 0.2, 1);
}
}

Expand All @@ -437,13 +281,4 @@
opacity: 1;
transform: translateX(0);
}
}

@keyframes barFill {
from {
transform: scaleX(0);
}
to {
transform: scaleX(1);
}
}
Loading

0 comments on commit f738445

Please sign in to comment.