Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

edit classes frontend redesign #887

Open
wants to merge 8 commits into
base: master
Choose a base branch
from
Open

edit classes frontend redesign #887

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
28c2670
edit classes frontend
swang235 Nov 7, 2024
afbece3
lint fixes
swang235 Nov 7, 2024
b8f555c
lint fixes 2
swang235 Nov 7, 2024
656e3a2
pr comments
swang235 Nov 22, 2024
41097ae
Merge remote-tracking branch 'origin/master' into sophie-edit-classes
swang235 Dec 5, 2024
58a8ded
fix merge conflict and margin
swang235 Dec 5, 2024
eed7814
make all classes hoverable after saved classes
swang235 Dec 5, 2024
71dcc5a
change search bar input size
swang235 Dec 5, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
109 changes: 80 additions & 29 deletions src/components/includes/CourseCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import * as React from 'react';
import { useHistory } from 'react-router';
import { Icon } from 'semantic-ui-react';
import * as React from "react";
import { useHistory } from "react-router";
import { Icon } from "semantic-ui-react";
import { Grid } from "@material-ui/core";

type Props = {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

General: non prof/ta former classes still seem to have the hover effect (benji 2110) when idt they should
Screen Shot 2024-12-06 at 1 44 37 AM

course: FireCourse;
Expand All @@ -11,53 +12,103 @@ type Props = {
selected: boolean;
inactive?: boolean;
};

/**
* Renders a course card to display in the course selection page. Displays course code, name, and role if applicable.
* @param course: the course to be displayed
* @param role: the role of the user in the course
* @param onSelectCourse: function to call when the course is selected
* @param editable: whether the course card is editable (ex if you are a ta, you cannot unselect the course)
* @param selected: whether the course is selected
* @param inactive: whether the course is inactive for the current semester
* @returns rendered CourseCard component
*/
const CourseCard = ({ course, role, onSelectCourse, editable, selected, inactive = false }: Props) => {
const history = useHistory();

const selectCourse = () => {
if (!editable) {
if (!inactive) {
history.push('/course/' + course.courseId);
history.push("/course/" + course.courseId);
}
return;
}
if (role === undefined || role === 'student') {
if (role === undefined || role === "student") {
onSelectCourse(!selected);
}
};

let roleString = '';
if (role === 'ta') {
roleString = 'TA';
} else if (role === 'professor') {
roleString = 'PROF';
let roleString = "";
let roleColor = "";
let selectedBackgroundColor = "#F5F5F5";
let selectedBorderColor = "#D8D8D8";
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

oh can we put these in the associated .scss file?

if (role === "ta") {
roleString = "TA";
roleColor = "#BF7913";
} else if (role === "professor") {
roleString = "PROF";
roleColor = "green"; // a purple thats closer to our brand colors- #726CFF
} else {
selectedBackgroundColor = "rgba(214, 234, 254, 0.4)";
selectedBorderColor = "#77BBFA";
}

return (
<div
className={`CourseCard ${selected && editable ? 'selected' : ''} ${
inactive ? 'inactive' : 'active'
}`}
className={`CourseCard ${selected && editable ? "selected" : ""} ${inactive ? "inactive" : "active"}
${roleString === "" ? "editable" : "ineditable"}`}
onClick={selectCourse}
style={
selected && editable
? { backgroundColor: selectedBackgroundColor, borderColor: selectedBorderColor }
: {}
}
>
<Grid container direction="row" justifyContent="space-between" style={{ height: "58px" }}>
{roleString ? (
<Grid container item className="courseColor" xs={6}>
<span
className="courseRole"
style={{
border: "2px solid " + roleColor,
color: roleColor,
}}
>
{roleString}
</span>{" "}
</Grid>
) : (
<Grid container item className="courseColor" xs={6} />
)}
{roleString === "" && !inactive ? (
<div>
{editable ? (
<Grid container item xs={6} justify-self="end">
<div className="courseColor">
{selected ? (
<Icon className="icon" fill="#77BBFA" color="blue" name="check circle" />
) : (
<Icon className="icon" color="grey" name="circle outline" />
)}
</div>
</Grid>
) : (
<Grid container item xs={6} justify-self="end" />
)}
</div>
) : (
<></>
)}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit: let's avoid empty components <></> and use && where we can, assuming that has the same behavior

</Grid>
<div className="courseText">
<div className="courseCode">
{course.code}
{roleString && <span className="role">{roleString}</span>}
<div className="courseCode">{course.code}</div>
<div className="courseName">
{course.name.length > 30 ? course.name.substring(0, 27) + "..." : course.name}
</div>
<div className="courseName">{course.name}</div>
</div>
{!inactive ? (
<div className="courseColor">
{editable ? (
selected ? (
<Icon className="icon" name="check" />
) : (
<Icon className="icon" name="plus" />
)
) : (
<div>Go to course</div>
)}

{!inactive && !editable ? (
<div className="myClasses">
<div className="myClassesText">Go to course</div>
</div>
) : (
<></>
Expand Down
Loading
Loading