Merge pull request #283 from SELab-2/course-card-update

Course card update
SELab-2 · May 22, 2024 · 5aac1fb · 5aac1fb
2 parents 8aa0954 + 43af6cb
commit 5aac1fb
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 5 deletions.
diff --git a/frontend/src/pages/index/components/CourseCard.tsx b/frontend/src/pages/index/components/CourseCard.tsx
@@ -7,6 +7,7 @@ import { useNavigate } from "react-router-dom"
 import { AppRoutes } from "../../../@types/routes"
 import GroupProgress from "./GroupProgress"
 import { CourseProjectsType } from "./CourseSection"
+import { Link } from "react-router-dom"
 
 const CourseCard: FC<{ courseProjects: CourseProjectsType[string], adminView?:boolean }> = ({ courseProjects,adminView }) => {
   const { t } = useTranslation()
@@ -32,7 +33,7 @@ const CourseCard: FC<{ courseProjects: CourseProjectsType[string], adminView?:bo
       onClick={() => navigate(AppRoutes.COURSE.replace(":courseId", courseProjects.course.courseId.toString()))}
       type="inner"
       title={courseProjects.course.name}
-      style={{ width: 300,height:"100%" }}
+      style={{ width: 300, height:"100%" }}
       actions={[
         <Tooltip title={t(courseProjects.course.memberCount > 1? "home.projects.userCourseCount_plural": "home.projects.userCourseCount", { count: courseProjects.course.memberCount })}>
           <span>
@@ -60,7 +61,13 @@ const CourseCard: FC<{ courseProjects: CourseProjectsType[string], adminView?:bo
         locale={{ emptyText: t("home.projects.noProjects") }}
         rowKey="projectId"
         renderItem={(project) => (
+          <Link 
+      to={AppRoutes.PROJECT.replace(":courseId", courseProjects.course.courseId.toString()).replace(":projectId", project.projectId.toString())} 
+      style={{ color: token.colorPrimary, textDecoration: 'none' }}
+      onClick={(event) => event.stopPropagation()}
+    >
           <List.Item
+            className="list-item-hover"
             actions={[
               project.status ? (
                 <ProjectStatusTag
@@ -74,10 +81,16 @@ const CourseCard: FC<{ courseProjects: CourseProjectsType[string], adminView?:bo
             />,
             ]}
           >
-            <List.Item.Meta title={<Typography.Text ellipsis>{project.name}</Typography.Text>} />
+            <List.Item.Meta title={
+              <Link to={AppRoutes.PROJECT.replace(":courseId", courseProjects.course.courseId.toString()).replace(":projectId", project.projectId.toString())} style={{ color: token.colorPrimary }}
+                onClick={(event) => event.stopPropagation()}>
+                <Typography.Text ellipsis style={{marginLeft: '10px'}}>{project.name}</Typography.Text>
+              </Link>}/>
           </List.Item>
+          </Link>
         )}
-      ></List>
+      >
+      </List>
     </Card>
   )
 }

diff --git a/frontend/src/pages/project/Project.tsx b/frontend/src/pages/project/Project.tsx
@@ -7,7 +7,6 @@ import useCourse from "../../hooks/useCourse"
 import useProject from "../../hooks/useProject"
 import ScoreCard from "./components/ScoreTab"
 import {
-    CalendarOutlined,
     ClockCircleOutlined,
     DeleteOutlined, EyeInvisibleOutlined, EyeOutlined,
     FileDoneOutlined,
@@ -25,7 +24,6 @@ import SubmissionsTab from "./components/SubmissionsTab"
 import MarkdownTextfield from "../../components/input/MarkdownTextfield"
 import useApi from "../../hooks/useApi"
 import i18n from "i18next";
-import useUser from "../../hooks/useUser";
 
 //  dracula, darcula,oneDark,vscDarkPlus  | prism, base16AteliersulphurpoolLight, oneLight
 
@@ -165,6 +163,7 @@ const Project = () => {
 
     return (
         <div style={{ margin: "3rem 0", marginTop: "1rem", width: "100%", paddingBottom: "3rem" }}>
+
             <Card
                 styles={{
                     header: {

diff --git a/frontend/src/styles.css b/frontend/src/styles.css
@@ -256,4 +256,19 @@ html {
   .nav-logo {
     display: none;
   }
+}
+
+.list-item-hover {
+  cursor: pointer;
+  transition: background-color 0.15s ease-in-out;
+  width: 300px;
+  margin-left: -23px;
+}
+
+.dark-theme .list-item-hover:hover {
+  background-color: rgba(255 255 255 / 5%);
+}
+
+.light-theme .list-item-hover:hover {
+  background-color: rgba(0 0 0 / 5%);
 }