Merge pull request #82 from SELab-2/deadline-part

feat: deadline table made for students
SELab-2 · Mar 13, 2024 · 6471148 · 6471148
2 parents 25ae83e + 73b1c4e
commit 6471148
Show file tree

Hide file tree

Showing 4 changed files with 83 additions and 19 deletions.
diff --git a/frontend/src/assets/styles/students_components.css b/frontend/src/assets/styles/students_components.css
@@ -1,4 +1,8 @@
 .student-main {
+    width: 96vw;
+}
+
+.student-left {
     width: 60vw;
     flex-wrap: wrap;
     overflow-y: scroll;
@@ -16,4 +20,31 @@
 
 .p-positive {
     color: green;
+}
+
+.student-right {
+    width: 36vw;
+}
+
+.deadline {
+    background-color: #e0e3ff;
+    width: 15vw;
+    height: 75vh;
+    border-radius: 0.50rem;
+}
+
+.deadline-head {
+    background-color: #5f63c8;
+    border-radius: 0.50rem 0.50rem 0 0;
+}
+
+.deadline-elements {
+    height: 100%;
+    overflow-y: scroll;
+    border-radius: 0 0 0.50rem 0.50rem;
+}
+
+.deadline-card {
+    background-color: #9c9afd;
+    border-bottom: thin solid;
 }
diff --git a/frontend/src/components/ProjectCard.tsx b/frontend/src/components/ProjectCard.tsx
diff --git a/frontend/src/pages/student/DeadlineTable.tsx b/frontend/src/pages/student/DeadlineTable.tsx
@@ -0,0 +1,34 @@
+import {JSX} from "react";
+import { FaArrowRightLong } from "react-icons/fa6";
+
+function DeadlineElement(): JSX.Element {
+    return (
+        <div className={"deadline-card is-flex is-flex-direction-column is-align-items-center py-2"}>
+            <p>17:00 - 23/02</p>
+            <div className={"is-flex is-flex-direction-row is-align-items-center"}>
+                <FaArrowRightLong/>
+                <p className={"pl-2"}>Markov Decision Diagram</p>
+            </div>
+        </div>
+    )
+}
+
+function DeadlineTable(): JSX.Element {
+    return (
+        <div className={"deadline"}>
+            <div className={"deadline-head is-flex is-justify-content-center py-2"}>
+                <p>komende deadlines</p>
+            </div>
+            <div className={"deadline-elements"}>
+                <DeadlineElement/>
+                <DeadlineElement/>
+                <DeadlineElement/>
+                <DeadlineElement/>
+                <DeadlineElement/>
+                <DeadlineElement/>
+            </div>
+        </div>
+    )
+}
+
+export default DeadlineTable;
diff --git a/frontend/src/pages/student/HomeStudent.tsx b/frontend/src/pages/student/HomeStudent.tsx
@@ -5,6 +5,7 @@ import ProjectCardStudent from "./ProjectCardStudent.tsx";
 import '../../assets/styles/students_components.css'
 import {useRouteLoaderData} from "react-router-dom";
 import {studentLoaderObject} from "../../dataloaders/StudentLoader.ts";
+import DeadlineTable from "./DeadlineTable.tsx";
 
 export default function HomeStudent(): JSX.Element {
 
@@ -21,18 +22,23 @@ export default function HomeStudent(): JSX.Element {
                 <div className={"side-bar is-flex is-justify-content-center"}>
                     <Sidebar/>
                 </div>
-                <div className={"student-main px-5 py-5 mx-5 my-5 is-flex is-justify-content-space-evenly"}>
-                    <ProjectCardStudent/>
-                    <ProjectCardStudent/>
-                    <ProjectCardStudent/>
-                    <ProjectCardStudent/>
-                    <ProjectCardStudent/>
-                    <ProjectCardStudent/>
-                    <ProjectCardStudent/>
-                    <ProjectCardStudent/>
-                    <ProjectCardStudent/>
-                    <ProjectCardStudent/>
-                    <ProjectCardStudent/>
+                <div className={"student-main is-flex"}>
+                    <div className={"student-left px-5 py-5 mx-5 my-5 is-flex is-justify-content-space-evenly"}>
+                        <ProjectCardStudent/>
+                        <ProjectCardStudent/>
+                        <ProjectCardStudent/>
+                        <ProjectCardStudent/>
+                        <ProjectCardStudent/>
+                        <ProjectCardStudent/>
+                        <ProjectCardStudent/>
+                        <ProjectCardStudent/>
+                        <ProjectCardStudent/>
+                        <ProjectCardStudent/>
+                        <ProjectCardStudent/>
+                    </div>
+                    <div className={"student-right is-flex is-justify-content-center is-align-items-center"}>
+                        <DeadlineTable/>
+                    </div>
                 </div>
             </div>
         </>