From b289ed1f49c5418d177c9a11db5216f76865b822 Mon Sep 17 00:00:00 2001 From: yessicaq Date: Tue, 17 Sep 2024 14:35:28 -0400 Subject: [PATCH 1/5] changes done in course preview page for task 1 --- devU-client/src/components/pages/courses/coursePreviewPage.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/devU-client/src/components/pages/courses/coursePreviewPage.tsx b/devU-client/src/components/pages/courses/coursePreviewPage.tsx index 9aa40aca..a93b6b0f 100644 --- a/devU-client/src/components/pages/courses/coursePreviewPage.tsx +++ b/devU-client/src/components/pages/courses/coursePreviewPage.tsx @@ -89,6 +89,7 @@ const CoursePreviewPage = () => {

{course?.name}

{course?.number}

{course?.semester}

+

Instructor: Jesse Hartloff

) From 7e5518292572c43ba9ffa4454d73f57bb6ae21fd Mon Sep 17 00:00:00 2001 From: yessicaq Date: Sat, 5 Oct 2024 17:54:51 -0400 Subject: [PATCH 2/5] Minimal changes done on course page- still needs a lot of revisions --- .../pages/courses/courseDetailPage.scss | 60 ++++++++++++++++--- .../pages/courses/courseDetailPage.tsx | 19 +++--- 2 files changed, 65 insertions(+), 14 deletions(-) diff --git a/devU-client/src/components/pages/courses/courseDetailPage.scss b/devU-client/src/components/pages/courses/courseDetailPage.scss index 70276e73..91f81398 100644 --- a/devU-client/src/components/pages/courses/courseDetailPage.scss +++ b/devU-client/src/components/pages/courses/courseDetailPage.scss @@ -1,17 +1,20 @@ @import 'variables'; + + .categoriesContainer { display: grid; - grid-template-columns: repeat(3, 1fr); + grid-template-rows: repeat(3, 1fr); gap: 20px; /* adjust this value to set the space between the cards */ - + flex-direction: row; + justify-content: space-between; } -.header { +/*.header { display: flex; align-items: center; } - +*/ .smallLine { width: 50px; /* adjust this value to set the length of the small line */ border-top: 3px solid $text-color; /* adjust this value to set the color and thickness of the line */ @@ -30,7 +33,50 @@ } .color{ - background-color: $list-item-background; - color: $text-color; + background-color: $purple; + color: $text-color2; max-width : 345px; -} \ No newline at end of file +} + +.header { + display: block; + justify-content: space-around; + align-items: flex-start; + background-color: $grey; + padding: 30px 50px; + border-radius: 10px; + color: $text-color +} + +.logo { + font-size: 24px; + font-weight: bold; + color: white; +} + +input { + width: 400px; + padding: 8px; + border-radius: 5px; + border: none; +} + +/*.edit-course-button { + background-color: $grey; + color: white; + padding: 10px 15px; + border-radius: 5px; +}*/ +.assignment_card { + background-color: $text-color-secondary; + padding: 20px; + text-align: center; + border-radius: 10px; + transition: transform 0.2s; + max-width : 345px; + +} + +.assignment-card:hover { + transform: scale(1.05); +} diff --git a/devU-client/src/components/pages/courses/courseDetailPage.tsx b/devU-client/src/components/pages/courses/courseDetailPage.tsx index 80331b25..1794e863 100644 --- a/devU-client/src/components/pages/courses/courseDetailPage.tsx +++ b/devU-client/src/components/pages/courses/courseDetailPage.tsx @@ -20,10 +20,11 @@ import styles from './courseDetailPage.scss' import {SET_ALERT} from "../../../redux/types/active.types"; import {useActionless, useAppSelector} from "redux/hooks"; + + const CourseDetailPage = () => { const history = useHistory() const { courseId } = useParams<{courseId: string}>() - const [courseInfo, setCourseInfo] = useState(null) const [categoryMap, setCategoryMap] = useState>({}) const [setAlert] = useActionless(SET_ALERT) @@ -32,6 +33,7 @@ const CourseDetailPage = () => { RequestService.get(`/api/courses/${courseId}`) .then((course) => { setCourseInfo(course) + }) RequestService.get(`/api/course/${courseId}/assignments/released`) .then((assignments) => { @@ -63,6 +65,7 @@ const CourseDetailPage = () => { }) } + useEffect(() => { fetchCourseInfo() }, []) @@ -72,11 +75,12 @@ const CourseDetailPage = () => { {courseInfo ? (
-

{courseInfo.name}

-
- +

Section:

+ + + @@ -92,21 +96,22 @@ const CourseDetailPage = () => { }}>Edit Course} +
- +
{Object.keys(categoryMap).map((category, index) => ( -
+
{category} - + {categoryMap[category].map((assignment, index) => ( { From e00ae4590ccbcd10a373dde4fdfdaedf7ab2fa9c Mon Sep 17 00:00:00 2001 From: yessicaq Date: Tue, 8 Oct 2024 15:57:47 -0400 Subject: [PATCH 3/5] #71 : Task2 MAke changes to the frontend on the courseDetailPage.tsx(Course Page). Redid the colors, changes from columns to rows,added buttons. --- devU-client/src/assets/global.scss | 9 +- devU-client/src/assets/variables.scss | 2 +- .../components/listItems/courseListItem.scss | 10 +- .../components/listItems/courseListItem.tsx | 2 + .../src/components/misc/globalToolbar.scss | 31 +++-- .../pages/courses/courseDetailPage.scss | 124 +++++++++++++----- .../pages/courses/courseDetailPage.tsx | 123 +++++++++-------- .../pages/courses/coursePreviewPage.tsx | 1 - 8 files changed, 197 insertions(+), 105 deletions(-) diff --git a/devU-client/src/assets/global.scss b/devU-client/src/assets/global.scss index c2d7b4f4..333e6f70 100644 --- a/devU-client/src/assets/global.scss +++ b/devU-client/src/assets/global.scss @@ -24,12 +24,13 @@ --background: white; --text-color: black; + --text-color2: white; --text-color-secondary: #363636; --focus: #38c172; --primary-lighter: #41a8f7; - --primary: #0984e3; - --primary-darker: #054272; + --primary: #ac9bd8; + --primary-darker: #5c36c3; --secondary-lighter: #cfd1d1; --secondary: #a8abab; --secondary-darker: #686b6b; @@ -70,8 +71,8 @@ --text-color-secondary: #9b9b9b; --primary-lighter: #3796bc; - --primary: #266781; - --primary-darker: #133441; + --primary: #5c36c3; + --primary-darker: rgba(95, 16, 187, 0.36); --secondary-lighter: #636666; --secondary: #3d3f3f; --secondary-darker: #1f2020; diff --git a/devU-client/src/assets/variables.scss b/devU-client/src/assets/variables.scss index faafef3e..7f621eab 100644 --- a/devU-client/src/assets/variables.scss +++ b/devU-client/src/assets/variables.scss @@ -8,7 +8,7 @@ $background: var(--background); $text-color: var(--text-color); $text-color-secondary: var(--text-color-secondary); - +$text-color2 : var(--text-color2); $primary-lighter: var(--primary-lighter); $primary: var(--primary); $primary-darker: var(--primary-darker); diff --git a/devU-client/src/components/listItems/courseListItem.scss b/devU-client/src/components/listItems/courseListItem.scss index 9e92481c..c5d73f65 100644 --- a/devU-client/src/components/listItems/courseListItem.scss +++ b/devU-client/src/components/listItems/courseListItem.scss @@ -2,8 +2,14 @@ .name { font-size: 1.2rem; - font-weight: 700; - margin-bottom: 0.4rem; + font-weight: 600; + margin-bottom: 0; + padding:15px; + width:100%; + text-align:center; + box-sizing:border-box; + + } .tag { diff --git a/devU-client/src/components/listItems/courseListItem.tsx b/devU-client/src/components/listItems/courseListItem.tsx index b6f0af1f..368ac2fd 100644 --- a/devU-client/src/components/listItems/courseListItem.tsx +++ b/devU-client/src/components/listItems/courseListItem.tsx @@ -30,6 +30,8 @@ const CourseListItem = ({course, isOpen}: Props) => { setIsOpen(isOpen); }, [isOpen]); + + return (
diff --git a/devU-client/src/components/misc/globalToolbar.scss b/devU-client/src/components/misc/globalToolbar.scss index 9c3cf54a..8341f5c1 100644 --- a/devU-client/src/components/misc/globalToolbar.scss +++ b/devU-client/src/components/misc/globalToolbar.scss @@ -18,10 +18,18 @@ $font-size: 16px; text-decoration: none; - color: $text-color; + color: #d9d9d9; font-size: $font-size; - height: $bar-height; + //height: $bar-height; + + margin:3vw; + height: 4vh; + flex-grow: .05; + border-radius: 3vw; + font-weight: 550; + //font-size: 14px; + padding:0.5vw; &:hover { opacity: $hover-effect; @@ -30,14 +38,19 @@ $font-size: 16px; .header { @extend .link; + font-size: 40px; + border-radius: 30px; + color: #D9D9D9; + font-weight: 550; + //font-size: 2em; - font-size: 2em; - - font-weight: bold; + //font-weight: bold; } .bar { - height: $bar-height; + height: 80px; + background-color: $purple; + //height: $bar-height; @extend .flex; justify-content: space-between; @@ -55,7 +68,7 @@ $font-size: 16px; // Controls turning the menu options into a sidebar // As well as whether or not that sidebar is being shown -@media (max-width: $medium) { +@media (max-width: 300px) { .flex { gap: 1rem; } @@ -83,7 +96,7 @@ $font-size: 16px; background: transparent; border: none; - color: $text-color; + color: $yellow; font-size: $font-size; &:hover { @@ -99,7 +112,7 @@ $font-size: 16px; } } -@media (max-width: $extreme) { +@media (max-width: 300px) { .flex { gap: 0.3rem; } diff --git a/devU-client/src/components/pages/courses/courseDetailPage.scss b/devU-client/src/components/pages/courses/courseDetailPage.scss index 91f81398..9d7c387a 100644 --- a/devU-client/src/components/pages/courses/courseDetailPage.scss +++ b/devU-client/src/components/pages/courses/courseDetailPage.scss @@ -1,13 +1,18 @@ @import 'variables'; - +.courseFormWrapper { + display: flex; + margin: 16px 50px; + gap: 30px; +} .categoriesContainer { display: grid; grid-template-rows: repeat(3, 1fr); - gap: 20px; /* adjust this value to set the space between the cards */ - flex-direction: row; - justify-content: space-between; + gap: 200px; /* adjust this value to set the space between the cards */ + margin-bottom: 20px; + min-height: 200px; + max-height: 500px; } /*.header { @@ -15,65 +20,116 @@ align-items: center; } */ -.smallLine { +/*.smallLine { width: 50px; /* adjust this value to set the length of the small line */ - border-top: 3px solid $text-color; /* adjust this value to set the color and thickness of the line */ - margin-right: 10px; /* adjust this value to set the space between the line and the text */ -} + // border-top: 3px solid $text-color; /* adjust this value to set the color and thickness of the line */ + // margin-right: 10px; /* adjust this value to set the space between the line and the text */ +/*} .largeLine { flex-grow: 1; border-top: 3px solid $text-color; /* adjust this value to set the color and thickness of the line */ - margin-left: 10px; /* adjust this value to set the space between the line and the text */ - margin-right: 10px; /* add this line to create some space between the line and the button */ + // +// margin-left: 10px; /* adjust this value to set the space between the line and the text */ + // margin-right: 10px; /* add this line to create some space between the line and the button */ +//}*/ + +.actual_button{ + display: flex; + flex-direction:row; + border:0; /* Primary button color */ + /* Button text color */ + padding: 10px 20px; /* Padding for button */ + border-radius: 5px; + text-decoration: none; + font-weight: 600; + transition: background-color 0.3s ease; + //margin : 0 10px; + background-color: $purple; + color:white; } +.buttons-container { + display: flex; + flex-direction: row; + justify-content: space-around; +} + + + .buttons { margin : 0 10px; + + /* &:hover {} + color: $primary; + */ + } .color{ background-color: $purple; color: $text-color2; - max-width : 345px; + width: 100%; + padding: 20px; + text-align: center; + +} +.coursesContainer { + display: flex; + flex-direction: row; + gap: 20px; + margin:20px; +} +.courseCard { + display: flex; + flex:1; + flex-direction: column; + justify-content: space-between; + align-items: stretch; + height: 100%; + padding: 0; + background-color: #D9D9D9; + border-radius: 5px; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); + overflow: hidden; + margin-bottom: 20px; } .header { - display: block; - justify-content: space-around; - align-items: flex-start; - background-color: $grey; - padding: 30px 50px; + display: flex; + flex-direction: column; + justify-content: flex-start; + //grid-template-columns: 2fr 1fr; + background-color: $secondary; + padding: 30px 60px; border-radius: 10px; - color: $text-color -} + color: $text-color; + width: 70%; -.logo { - font-size: 24px; - font-weight: bold; - color: white; -} + } -input { + + + + + + + +.input { width: 400px; padding: 8px; border-radius: 5px; border: none; } -/*.edit-course-button { - background-color: $grey; - color: white; - padding: 10px 15px; - border-radius: 5px; -}*/ + .assignment_card { - background-color: $text-color-secondary; - padding: 20px; + flex: 1; + color: $text-color2; + align-items: start; text-align: center; border-radius: 10px; - transition: transform 0.2s; - max-width : 345px; + min-width : 200px; } diff --git a/devU-client/src/components/pages/courses/courseDetailPage.tsx b/devU-client/src/components/pages/courses/courseDetailPage.tsx index 1794e863..74cc81bf 100644 --- a/devU-client/src/components/pages/courses/courseDetailPage.tsx +++ b/devU-client/src/components/pages/courses/courseDetailPage.tsx @@ -2,7 +2,7 @@ import React, {useEffect, useState} from 'react' import {useHistory, useParams} from 'react-router-dom' import RequestService from 'services/request.service' import {Assignment, Course} from 'devu-shared-modules' - +//import {useHistory} from "react-router-dom"; import PageWrapper from 'components/shared/layouts/pageWrapper' import Card from '@mui/material/Card' @@ -12,23 +12,25 @@ import List from '@mui/material/List' import ListItem from '@mui/material/ListItem' import ListItemButton from '@mui/material/ListItemButton' import ListItemText from '@mui/material/ListItemText' -import Button from '@mui/material/Button' -import Stack from '@mui/material/Stack' +//import Button from '@mui/material/Button' +//import Stack from '@mui/material/Stack' import styles from './courseDetailPage.scss' import {SET_ALERT} from "../../../redux/types/active.types"; -import {useActionless, useAppSelector} from "redux/hooks"; +import {useActionless} from "../../../redux/hooks"; +//import TextField from "../../shared/inputs/textField"; +//import {useActionless, useAppSelector} from "redux/hooks"; const CourseDetailPage = () => { - const history = useHistory() + //const history = useHistory() const { courseId } = useParams<{courseId: string}>() const [courseInfo, setCourseInfo] = useState(null) const [categoryMap, setCategoryMap] = useState>({}) const [setAlert] = useActionless(SET_ALERT) - const role = useAppSelector((store) => store.roleMode) + // const role = useAppSelector((store) => store.roleMode) const fetchCourseInfo = async () => { RequestService.get(`/api/courses/${courseId}`) .then((course) => { @@ -50,6 +52,7 @@ const CourseDetailPage = () => { setCategoryMap(categoryMap) }) + } @@ -69,69 +72,81 @@ const CourseDetailPage = () => { useEffect(() => { fetchCourseInfo() }, []) - + const history = useHistory() return( + {courseInfo ? (
-
-

{courseInfo.name}

+
+

{courseInfo.name}

+

Section:

+
-

Section:

+ - - - {role.isInstructor() && - } + }}>Add Assignment + + - {role.isInstructor() && - } + }}>Course WebSite + + +
+
- - -
-
- {Object.keys(categoryMap).map((category, index) => ( -
- - - - {category} - - - - {categoryMap[category].map((assignment, index) => ( - - { - history.push(`/course/${courseId}/assignment/${assignment.id}`) - }}> - - - +
+ + + {Object.keys(categoryMap).map((category, index) => ( + + + + + {category} + + + + {categoryMap[category].map((assignment, index) => ( + + { + history.push(`/course/${courseId}/assignment/${assignment.id}`) + }}> + + + + ))} + + + ))} - - +
- ))}
-
- ) : ( -

Error fetching Course Information

- )} - - ) -} - -export default CourseDetailPage \ No newline at end of file + + + + + ) : ( +

Error fetching Course Information

+ )} + + ) + } + + + export default CourseDetailPage \ No newline at end of file diff --git a/devU-client/src/components/pages/courses/coursePreviewPage.tsx b/devU-client/src/components/pages/courses/coursePreviewPage.tsx index a93b6b0f..9aa40aca 100644 --- a/devU-client/src/components/pages/courses/coursePreviewPage.tsx +++ b/devU-client/src/components/pages/courses/coursePreviewPage.tsx @@ -89,7 +89,6 @@ const CoursePreviewPage = () => {

{course?.name}

{course?.number}

{course?.semester}

-

Instructor: Jesse Hartloff

) From 548442b8e57f04e061058ce9cca652426f617a2a Mon Sep 17 00:00:00 2001 From: yessicaq Date: Sat, 12 Oct 2024 10:05:38 -0400 Subject: [PATCH 4/5] Test for Kevin --- .../pages/courses/courseDetailPage.scss | 126 ++++++++++-------- .../pages/courses/courseDetailPage.tsx | 42 +++++- 2 files changed, 105 insertions(+), 63 deletions(-) diff --git a/devU-client/src/components/pages/courses/courseDetailPage.scss b/devU-client/src/components/pages/courses/courseDetailPage.scss index 9d7c387a..1ce8e46f 100644 --- a/devU-client/src/components/pages/courses/courseDetailPage.scss +++ b/devU-client/src/components/pages/courses/courseDetailPage.scss @@ -15,56 +15,6 @@ max-height: 500px; } -/*.header { - display: flex; - align-items: center; -} -*/ -/*.smallLine { - width: 50px; /* adjust this value to set the length of the small line */ - // border-top: 3px solid $text-color; /* adjust this value to set the color and thickness of the line */ - // margin-right: 10px; /* adjust this value to set the space between the line and the text */ -/*} - -.largeLine { - flex-grow: 1; - border-top: 3px solid $text-color; /* adjust this value to set the color and thickness of the line */ - // -// margin-left: 10px; /* adjust this value to set the space between the line and the text */ - // margin-right: 10px; /* add this line to create some space between the line and the button */ -//}*/ - -.actual_button{ - display: flex; - flex-direction:row; - border:0; /* Primary button color */ - /* Button text color */ - padding: 10px 20px; /* Padding for button */ - border-radius: 5px; - text-decoration: none; - font-weight: 600; - transition: background-color 0.3s ease; - //margin : 0 10px; - background-color: $purple; - color:white; -} - -.buttons-container { - display: flex; - flex-direction: row; - justify-content: space-around; -} - - - -.buttons { - margin : 0 10px; - - /* &:hover {} - color: $primary; - */ - -} .color{ background-color: $purple; @@ -72,17 +22,20 @@ width: 100%; padding: 20px; text-align: center; + font-size: 1.2em; } .coursesContainer { display: flex; - flex-direction: row; + flex-wrap: wrap; + //flex-direction: row; gap: 20px; - margin:20px; + margin-top:20px; } .courseCard { display: flex; - flex:1; + flex:1 0 250px; + max-width: 350px; flex-direction: column; justify-content: space-between; align-items: stretch; @@ -93,18 +46,77 @@ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); overflow: hidden; margin-bottom: 20px; -} + + .MuiList-root { + padding: 20px; + + + + .MuiListItemText-primary { + text-align: center; // Center the assignment name + } + + .MuiListItemText-secondary { + text-align: center; // Center the dates + } + } + } + + + +.courseDetailPage{ + padding: 20px; + .header { display: flex; flex-direction: column; - justify-content: flex-start; + //justify-content: flex-start; //grid-template-columns: 2fr 1fr; + justify-content: space-between; + align-items: flex-start; background-color: $secondary; - padding: 30px 60px; - border-radius: 10px; + // padding: 30px 60px; + padding: 20px; + //border-radius: 10px; color: $text-color; width: 70%; + h1{ + margin: 0 0 10px 0; + font-size: 2.5rem; + } + h2{ + margin: 0 0 20px 0; + font-size: 1.5rem; + } + .buttons-container { + display: flex; + // flex-wrap: wrap; + flex-direction: row; + justify-content: space-around; + + .actual_button { + display: flex; + flex-direction: row; + border: 0; /* Primary button color */ + /* Button text color */ + padding: 10px 20px; /* Padding for button */ + border-radius: 5px; + text-decoration: none; + font-weight: 600; + transition: background-color 0.3s ease; + //margin : 0 10px; + background-color: $purple; + color: white; + border: none; + + &:hover { // Add a hover effect + background-color: darken(purple, 10%); // Slightly darken on hover + cursor: pointer; + } + } + } +} } diff --git a/devU-client/src/components/pages/courses/courseDetailPage.tsx b/devU-client/src/components/pages/courses/courseDetailPage.tsx index 5ae26e99..dd020895 100644 --- a/devU-client/src/components/pages/courses/courseDetailPage.tsx +++ b/devU-client/src/components/pages/courses/courseDetailPage.tsx @@ -30,7 +30,18 @@ const CourseDetailPage = () => { const [courseInfo, setCourseInfo] = useState(null) const [categoryMap, setCategoryMap] = useState>({}) const [setAlert] = useActionless(SET_ALERT) + const[User, setUser]= useState < User ,preferredName>>({}) + // const role = useAppSelector((store) => store.roleMode) + const fetchUserinfo = async () => { + RequestService.get< typeof User>('api/users') + .then((User) =>{ + setUser(User) + + }) + + + const fetchCourseInfo = async () => { RequestService.get(`/api/courses/${courseId}`) .then((course) => { @@ -74,16 +85,19 @@ const CourseDetailPage = () => { useEffect(() => { fetchCourseInfo() + fetchUserinfo() }, []) const history = useHistory() return( +
{courseInfo ? (
+
-

{courseInfo.name}

-

Section:

+

{courseInfo.name}-{courseInfo.semester}

+

Instructor:{User.name}

@@ -112,14 +126,13 @@ const CourseDetailPage = () => {
-
- +
{Object.keys(categoryMap).map((category, index) => ( - + {category} @@ -129,7 +142,23 @@ const CourseDetailPage = () => { { history.push(`/course/${courseId}/assignment/${assignment.id}`) }}> - + + + Start Date: {new Date(assignment.startDate).toLocaleDateString()} +
{/* Add a line break */} + Due Date: {new Date(assignment.dueDate).toLocaleDateString()} + + + } + /> + ))} @@ -147,6 +176,7 @@ const CourseDetailPage = () => { ) : (

Error fetching Course Information

)} +
) } From 1d32dd15eaeff4b859514630bd60bc540c076f81 Mon Sep 17 00:00:00 2001 From: yessicaq Date: Tue, 15 Oct 2024 14:21:40 -0400 Subject: [PATCH 5/5] For task cards #78 and 82 I updated the styling on the gradebookStudentPage.tsx and the gradebookPage.scss as well as the colors on the variables.scss page. I added tables without borders, created a way to change the grey rows to be a lighter and darker shade on every odd and even row. I also set a flex size so the pages that had less assignments done wouldn't take up the entire length of the page. When in light and dark mode the pages should have different shades of purple in the headers rows. Assignments are aligned to their specific category i.e assignments or score. And each category has its own table. --- devU-client/src/assets/global.scss | 9 +- devU-client/src/assets/variables.scss | 6 + .../pages/gradebook/gradebookPage.scss | 92 ++++++++- .../pages/gradebook/gradebookStudentPage.tsx | 177 ++++++++---------- 4 files changed, 171 insertions(+), 113 deletions(-) diff --git a/devU-client/src/assets/global.scss b/devU-client/src/assets/global.scss index 333e6f70..e3d9d85a 100644 --- a/devU-client/src/assets/global.scss +++ b/devU-client/src/assets/global.scss @@ -29,8 +29,8 @@ --focus: #38c172; --primary-lighter: #41a8f7; - --primary: #ac9bd8; - --primary-darker: #5c36c3; + --primary: rgba(102, 6, 202, 0.36); + --primary-darker: rgba(95, 16, 187, 0.36); --secondary-lighter: #cfd1d1; --secondary: #a8abab; --secondary-darker: #686b6b; @@ -49,6 +49,7 @@ --blue-lighter: #74b9ff; --blue: #0984e3; + --blue-darker: #083967; --red-lighter: #ff7675; --red: #d63031; @@ -69,10 +70,10 @@ --background: #1b1f20; --text-color: white; --text-color-secondary: #9b9b9b; - + --blue-darker: #2767a3; --primary-lighter: #3796bc; --primary: #5c36c3; - --primary-darker: rgba(95, 16, 187, 0.36); + --primary-darker: rgb(92, 54, 195); --secondary-lighter: #636666; --secondary: #3d3f3f; --secondary-darker: #1f2020; diff --git a/devU-client/src/assets/variables.scss b/devU-client/src/assets/variables.scss index 74d72038..ad9b6f45 100644 --- a/devU-client/src/assets/variables.scss +++ b/devU-client/src/assets/variables.scss @@ -12,6 +12,9 @@ $text-color2 : var(--text-color2); $primary-lighter: var(--primary-lighter); $primary: var(--primary); $primary-darker: var(--primary-darker); +$blue-darker: var(--blue-darker); + + $secondary-lighter: var(--secondary-lighter); $secondary: var(--secondary); @@ -35,6 +38,9 @@ $grey: var(--grey); $blue-lighter: var(--blue-lighter); $blue: var(--blue); + + + $red-lighter: var(--red-lighter); $red: var(--red); diff --git a/devU-client/src/components/pages/gradebook/gradebookPage.scss b/devU-client/src/components/pages/gradebook/gradebookPage.scss index a252e74d..9af830ce 100644 --- a/devU-client/src/components/pages/gradebook/gradebookPage.scss +++ b/devU-client/src/components/pages/gradebook/gradebookPage.scss @@ -1,10 +1,7 @@ @import 'variables'; -.header { - color: $text-color; - display: flex; - align-items: center; -} + + .categoryName { color: $text-color; @@ -12,7 +9,7 @@ } .assignmentName { - color: $text-color + color: $blue-darker } .smallLine { @@ -26,4 +23,85 @@ border-top: 3px solid $text-color; /* adjust this value to set the color and thickness of the line */ margin-left: 10px; /* adjust this value to set the space between the line and the text */ margin-right: 10px; /* add this line to create some space between the line and the button */ -} \ No newline at end of file +} + + +.header { + color: $text-color; + display: flex; + align-items: center; + justify-content: center; + margin-bottom: 20px; +} + +.gradebook-container { + /* Add a container for the gradebook tables */ + display: flex; + flex: 1 0 300px; + gap: 20px; /* Space between the tables */ + overflow: hidden; +} +.gradebook-container .table { + border-radius: 20px !important; + transform: translateZ(0); +} +.table { + color: $blue-darker; + width: 100%; + overflow: hidden; + border-collapse: collapse; + border-radius: 20px; + background-color: $secondary-lighter; + table-layout: fixed; /* Key for even distribution */ + + + th, td { + + border: none; + border-radius: 0; + padding: 15px; + text-align: left; + width: 50%; /* Distribute columns evenly */ + overflow: hidden; /* Prevent content from overflowing */ + text-overflow: ellipsis; /* Add ellipsis for long names */ + } + + + th { + background-color: #f2f2f2; + font-weight: bold; + } + + .evenRow { + background-color: if(type-of($secondary-lighter) == 'color', lighten($secondary-lighter, 5%), #e0e0e0); // Fallback to #e0e0e0 + } + + .oddRow { + background-color: if(type-of($secondary-lighter) == 'color', darken($secondary-lighter, 5%), #d0d0d0); // Fallback to #d0d0d0 + } + +} +.headerRow th { /* Style for the purple header row */ + background-color: $primary; /* Purple background */ + color: white; +} +.content{ + padding: 15px; + text-align: left; +} + +.actual_button { + color: white; + display: flex; + align-items: flex-end; + border: 0; /* Primary button color */ + /* Button text color */ + padding: 10px 20px; /* Padding for button */ + border-radius: 5px; + font-weight: 600; + transition: background-color 0.3s ease; + margin : 0 10px; + background-color: $purple !important; + +} + diff --git a/devU-client/src/components/pages/gradebook/gradebookStudentPage.tsx b/devU-client/src/components/pages/gradebook/gradebookStudentPage.tsx index 2a9d9f84..9414f0cd 100644 --- a/devU-client/src/components/pages/gradebook/gradebookStudentPage.tsx +++ b/devU-client/src/components/pages/gradebook/gradebookStudentPage.tsx @@ -1,127 +1,100 @@ -import React, {useEffect, useState} from 'react' -import {Link, useHistory, useParams} from 'react-router-dom' -import {useAppSelector} from 'redux/hooks' +import React, { useEffect, useState } from 'react'; +import { useHistory, useParams } from 'react-router-dom'; +import { useAppSelector } from 'redux/hooks'; -import {Assignment, AssignmentScore} from 'devu-shared-modules' +import { Assignment, AssignmentScore } from 'devu-shared-modules'; -import PageWrapper from 'components/shared/layouts/pageWrapper' -import LoadingOverlay from 'components/shared/loaders/loadingOverlay' -import ErrorPage from '../errorPage/errorPage' +import PageWrapper from 'components/shared/layouts/pageWrapper'; +import LoadingOverlay from 'components/shared/loaders/loadingOverlay'; +import ErrorPage from '../errorPage/errorPage'; -import RequestService from 'services/request.service' -import Button from '@mui/material/Button' +import RequestService from 'services/request.service'; +//import Button from '@mui/material/Button'; -import styles from './gradebookPage.scss' +import styles from './gradebookPage.scss'; -type CategoryProps = { - categoryName: string - assignments: Assignment[] - assignmentScores: AssignmentScore[] -} -type AssignmentProps = { - assignment: Assignment - assignmentScore?: AssignmentScore -} - - -const CategoryAssignment = ({assignment, assignmentScore}: AssignmentProps) => { - const { courseId } = useParams<{courseId: string}>() +const GradebookStudentPage = () => { + const [loading, setLoading] = useState(true); + const [error, setError] = useState(null); + const [assignments, setAssignments] = useState([]); + const [assignmentScores, setAssignmentScores] = useState([]); + const role = useAppSelector((store) => store.roleMode); + const { courseId } = useParams<{ courseId: string }>(); + const userId = useAppSelector((store) => store.user.id); + const history = useHistory(); - return ( -
- {assignment.name} - - Score: {assignmentScore?.score ?? 'N/A'} -
- ) -} - -const GradebookCategory = ({categoryName, assignments, assignmentScores}: CategoryProps) => { - return ( -
-
- {categoryName} -
-
- {assignments.filter((a) => a.categoryName === categoryName) - .map((a) => ( - aScore.assignmentId === a.id)} - /> - ))} -
-
- ) - -} - -const GradebookStudentPage = () => { - - const [loading, setLoading] = useState(true) - const [error, setError] = useState(null) - const [categories, setCategories] = useState(new Array()) - const [assignments, setAssignments] = useState(new Array()) - const [assignmentScores, setAssignmentScores] = useState(new Array()) - const role = useAppSelector((store) => store.roleMode) - const { courseId } = useParams<{courseId: string}>() - const userId = useAppSelector((store) => store.user.id) - const history = useHistory() - useEffect(() => { - fetchData() - }, []) - + fetchData(); + }, []); + const fetchData = async () => { try { - const assignments = await RequestService.get(`/api/course/${courseId}/assignments/released`) - setAssignments(assignments) + const assignments = await RequestService.get(`/api/course/${courseId}/assignments/released`); + setAssignments(assignments); - const assignmentScores = await RequestService.get(`/api/course/${courseId}/assignment-scores/user/${userId}`) - setAssignmentScores(assignmentScores) - - //As I'm unsure as to how category creation will be handled, this is done for now instead of an api call to /categories/course/{courseId} - const categories = [... new Set(assignments.map(a => a.categoryName))] //Get all unique categories from assignments - setCategories(categories) + const assignmentScores = await RequestService.get(`/api/course/${courseId}/assignment-scores/user/${userId}`); + setAssignmentScores(assignmentScores); } catch (error: any) { - setError(error) + setError(error); } finally { - setLoading(false) + setLoading(false); } - } + }; + + if (loading) return ; + if (error) return ; - if (loading) return - if (error) return + const categories = [...new Set(assignments.map(a => a.categoryName))]; return (
-

Student Gradebook

-
-
- {role.isInstructor() && - } -
+ {role.isInstructor() &&( + + )} +
-
- {categories.map((c) => ( - - ))} +
+ + {categories.map(category => ( +
+

{category}

+ {/* Add table class */} + + {/* Add class for purple header */} + + + + + + {assignments.filter(a => a.categoryName === category).map((assignment, index) => ( + + + + + + ))} + +
AssignmentScore
+
+ {assignment.name}
+ + 		+
+ {assignmentScores.find(aScore => aScore.assignmentId === assignment.id)?.score ?? 'N/A'} +
+
+
+ ))}
- ) -} + ); +}; -export default GradebookStudentPage +export default GradebookStudentPage; \ No newline at end of file