diff --git a/devU-client/src/assets/global.scss b/devU-client/src/assets/global.scss index fa61a3c..6e34f3b 100644 --- a/devU-client/src/assets/global.scss +++ b/devU-client/src/assets/global.scss @@ -59,8 +59,9 @@ background-color: var(--background); color: var(--text-color); - --background: #FFF; - --text-color: #000; + --background: white; + --text-color: black; + --text-color2: white; --text-color-secondary: #363636; --focus: var(--blue); @@ -83,6 +84,9 @@ --list-simple-item-background-hover: #a0a0a0; --list-simple-item-subtext: #4b4b4b; + --blue-lighter: #74b9ff; + --blue: #0984e3; + --blue-darker: #083967; --btn-secondary-border: var(--primary); --btn-secondary-background: #FFF; --btn-secondary-text: var(--primary); @@ -100,8 +104,8 @@ --grey: #555555; --grey-dark: #333333; - --blue-lighter: #78B7FF; - --blue: #1F3D7A; + //--blue-lighter: #78B7FF; + //--blue: #1F3D7A; --red-lighter: #FFA3A3; --red: #8A2626; @@ -123,11 +127,12 @@ --background: #1e1e1e; --text-color: #FFF; --text-color-secondary: #9b9b9b; - --focus: var(--blue-lighter); - + --blue-darker: #2767a3; --primary-lighter: #3796bc; + --primary: #5c36c3; + // --primary-darker: rgb(92, 54, 195); - --primary: #7257EB; + //--primary: #7257EB; // --primary-darker: #2F2363; // --primary: #636666; diff --git a/devU-client/src/assets/variables.scss b/devU-client/src/assets/variables.scss index add6703..496eb9b 100644 --- a/devU-client/src/assets/variables.scss +++ b/devU-client/src/assets/variables.scss @@ -8,10 +8,13 @@ $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); +$blue-darker: var(--blue-darker); + + $secondary-lighter: var(--secondary-lighter); $secondary: var(--secondary); @@ -38,6 +41,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/listItems/courseListItem.scss b/devU-client/src/components/listItems/courseListItem.scss index 9e92481..c5d73f6 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 b6f0af1..368ac2f 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 9a5f1c3..a371454 100644 --- a/devU-client/src/components/misc/globalToolbar.scss +++ b/devU-client/src/components/misc/globalToolbar.scss @@ -16,13 +16,19 @@ $font-size: 16px; @extend .flex; text-decoration: none; + color: #d9d9d9; font-size: $font-size; + + //height: $bar-height; + margin:3vw; height: 4vh; flex-grow: .05; border-radius: 3vw; font-weight: 550; + //font-size: 14px; + font-size: 14px; padding:0.5vw; @@ -33,16 +39,25 @@ $font-size: 16px; .header { @extend .link; - font-size: 40px; border-radius: 30px; color: #D9D9D9; font-weight: 550; + //font-size: 2em; + //font-weight: bold; } .bar { - height: 60px; - background-color: #52468A; + height: 80px; + background-color: $purple; + //height: $bar-height; + + font-size: 40px; + border-radius: 30px; + color: #D9D9D9; + font-weight: 550; +} + @extend .flex; justify-content: space-between; } @@ -88,7 +103,7 @@ $font-size: 16px; background: transparent; border: none; - color: $text-color; + color: $yellow; font-size: $font-size; &:hover { diff --git a/devU-client/src/components/pages/courses/courseDetailPage.scss b/devU-client/src/components/pages/courses/courseDetailPage.scss index 70276e7..1ce8e46 100644 --- a/devU-client/src/components/pages/courses/courseDetailPage.scss +++ b/devU-client/src/components/pages/courses/courseDetailPage.scss @@ -1,36 +1,150 @@ @import 'variables'; +.courseFormWrapper { + display: flex; + margin: 16px 50px; + gap: 30px; +} + .categoriesContainer { display: grid; - grid-template-columns: repeat(3, 1fr); - gap: 20px; /* adjust this value to set the space between the cards */ + grid-template-rows: repeat(3, 1fr); + gap: 200px; /* adjust this value to set the space between the cards */ + margin-bottom: 20px; + min-height: 200px; + max-height: 500px; +} + +.color{ + background-color: $purple; + color: $text-color2; + width: 100%; + padding: 20px; + text-align: center; + font-size: 1.2em; + +} +.coursesContainer { + display: flex; + flex-wrap: wrap; + //flex-direction: row; + gap: 20px; + margin-top:20px; } +.courseCard { + display: flex; + flex:1 0 250px; + max-width: 350px; + 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; + + .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; - align-items: center; -} + flex-direction: column; + //justify-content: flex-start; + //grid-template-columns: 2fr 1fr; + justify-content: space-between; + align-items: flex-start; + background-color: $secondary; + // 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; -.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 */ + .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; + } + } + } } -.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 */ + } + + + + + + + + +.input { + width: 400px; + padding: 8px; + border-radius: 5px; + border: none; } -.buttons { - margin : 0 10px; + +.assignment_card { + flex: 1; + color: $text-color2; + align-items: start; + text-align: center; + border-radius: 10px; + min-width : 200px; + } -.color{ - background-color: $list-item-background; - color: $text-color; - max-width : 345px; -} \ No newline at end of file +.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 d5ca19d..dd02089 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,26 +12,41 @@ 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[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) => { setCourseInfo(course) + }) RequestService.get(`/api/course/${courseId}/assignments/released`) .then((assignments) => { @@ -48,6 +63,7 @@ const CourseDetailPage = () => { setCategoryMap(categoryMap) }) + } const handleDropCourse = () => { @@ -66,70 +82,104 @@ const CourseDetailPage = () => { } } + useEffect(() => { fetchCourseInfo() + fetchUserinfo() }, []) - + const history = useHistory() return( +
+ {courseInfo ? (
-
-
-

{courseInfo.name}

-
- - - - - {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}`) + }}> + + + Start Date: {new Date(assignment.startDate).toLocaleDateString()} +
{/* Add a line break */} + Due Date: {new Date(assignment.dueDate).toLocaleDateString()} + + + } + /> + + + + ))} + + + ))} - - +
- ))}
-
- ) : ( -

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/gradebook/gradebookPage.scss b/devU-client/src/components/pages/gradebook/gradebookPage.scss index a252e74..9af830c 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 2a9d9f8..9414f0c 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