From 573a423196432cad2c9c65161e75e97737c8a20c Mon Sep 17 00:00:00 2001 From: NeemZ16 <110858265+NeemZ16@users.noreply.github.com> Date: Sat, 12 Oct 2024 02:46:32 -0400 Subject: [PATCH 1/8] added logic for assigning different classes to odd and even table rows --- .../pages/gradebook/gradebookInstructorPage.tsx | 15 +++++++++------ .../components/pages/gradebook/gradebookPage.scss | 4 ++++ 2 files changed, 13 insertions(+), 6 deletions(-) diff --git a/devU-client/src/components/pages/gradebook/gradebookInstructorPage.tsx b/devU-client/src/components/pages/gradebook/gradebookInstructorPage.tsx index 44575ab3..06736620 100644 --- a/devU-client/src/components/pages/gradebook/gradebookInstructorPage.tsx +++ b/devU-client/src/components/pages/gradebook/gradebookInstructorPage.tsx @@ -18,7 +18,7 @@ type TableProps = { assignmentScores: AssignmentScore[] } type RowProps = { - index: Number + index: number user: User userCourse: UserCourse assignments: Assignment[] @@ -26,8 +26,11 @@ type RowProps = { } const TableRow = ({index, user, userCourse, assignments, assignmentScores}: RowProps) => { + // TODO: style table row to alternating colors based on index odd?even + const rowClass = index % 2 === 0 ? 'even-row' : 'odd-row'; + return ( - + {index} {user.email} {user.externalId} @@ -42,7 +45,7 @@ const TableRow = ({index, user, userCourse, assignments, assignmentScores}: RowP const GradebookTable = ({users, userCourses, assignments, assignmentScores}: TableProps) => { return ( - +
@@ -106,9 +109,9 @@ const GradebookInstructorPage = () => { return ( -
-

Instructor Gradebook

-
+ {/*
*/} +

Instructor Gradebook

+ {/*
*/}
Date: Sat, 12 Oct 2024 12:46:32 -0500 Subject: [PATCH 2/8] added alternate colors for table rows, changes on theme toggle, styled table headers and positioning --- devU-client/src/assets/global.scss | 9 +++++++- devU-client/src/assets/variables.scss | 3 +++ .../gradebook/gradebookInstructorPage.tsx | 6 ++--- .../pages/gradebook/gradebookPage.scss | 22 +++++++++++++++++++ 4 files changed, 36 insertions(+), 4 deletions(-) diff --git a/devU-client/src/assets/global.scss b/devU-client/src/assets/global.scss index fa61a3c7..b84a027b 100644 --- a/devU-client/src/assets/global.scss +++ b/devU-client/src/assets/global.scss @@ -94,11 +94,15 @@ --input-field-background: var(--grey-lightest); --input-field-label: var(--grey); + --table-row-even: var(--grey-lighter); + --table-row-odd: var(--grey-lightest); + // Non theme colors - will not update with light/dark toggle --grey-lightest: #e5e5e5; --grey-lighter: #c5c5c5; --grey: #555555; - --grey-dark: #333333; + --grey-darker: #444444; + --grey-darkest: #333333; --blue-lighter: #78B7FF; --blue: #1F3D7A; @@ -156,6 +160,9 @@ --input-field-background: var(--grey); --input-field-label: var(--grey-lightest); + --table-row-even: var(--grey-darker); + --table-row-odd: var(--grey-darkest); + background-color: var(--background); color: var(--text-color); } diff --git a/devU-client/src/assets/variables.scss b/devU-client/src/assets/variables.scss index add6703a..47f058df 100644 --- a/devU-client/src/assets/variables.scss +++ b/devU-client/src/assets/variables.scss @@ -28,6 +28,9 @@ $list-simple-item-subtext: var(--list-item-subtext); $input-field-background: var(--input-field-background); $input-field-label: var(--input-field-label); +$table-row-even: var(--table-row-even); +$table-row-odd: var(--table-row-odd); + $focus: var(--focus); // These variables WILL NOT update with dark vs light theme diff --git a/devU-client/src/components/pages/gradebook/gradebookInstructorPage.tsx b/devU-client/src/components/pages/gradebook/gradebookInstructorPage.tsx index 06736620..f5690eca 100644 --- a/devU-client/src/components/pages/gradebook/gradebookInstructorPage.tsx +++ b/devU-client/src/components/pages/gradebook/gradebookInstructorPage.tsx @@ -27,10 +27,10 @@ type RowProps = { const TableRow = ({index, user, userCourse, assignments, assignmentScores}: RowProps) => { // TODO: style table row to alternating colors based on index odd?even - const rowClass = index % 2 === 0 ? 'even-row' : 'odd-row'; + const rowClass = index % 2 === 0 ? 'evenRow' : 'oddRow'; return ( -
+ @@ -112,7 +112,7 @@ const GradebookInstructorPage = () => { {/*
*/}

Instructor Gradebook

{/*
*/} -
+
Date: Sat, 12 Oct 2024 13:04:06 -0500 Subject: [PATCH 3/8] added padding and center alignment to table cells and headers for readability --- .../components/pages/gradebook/gradebookInstructorPage.tsx | 2 +- .../src/components/pages/gradebook/gradebookPage.scss | 6 +++++- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/devU-client/src/components/pages/gradebook/gradebookInstructorPage.tsx b/devU-client/src/components/pages/gradebook/gradebookInstructorPage.tsx index f5690eca..12b52b56 100644 --- a/devU-client/src/components/pages/gradebook/gradebookInstructorPage.tsx +++ b/devU-client/src/components/pages/gradebook/gradebookInstructorPage.tsx @@ -26,7 +26,7 @@ type RowProps = { } const TableRow = ({index, user, userCourse, assignments, assignmentScores}: RowProps) => { - // TODO: style table row to alternating colors based on index odd?even + // style table row to alternating colors based on index odd?even const rowClass = index % 2 === 0 ? 'evenRow' : 'oddRow'; return ( diff --git a/devU-client/src/components/pages/gradebook/gradebookPage.scss b/devU-client/src/components/pages/gradebook/gradebookPage.scss index b21c454b..ce0be105 100644 --- a/devU-client/src/components/pages/gradebook/gradebookPage.scss +++ b/devU-client/src/components/pages/gradebook/gradebookPage.scss @@ -51,5 +51,9 @@ th { background-color: $primary; color: #FFF; font-weight: 600; - padding: 0 10px; +} + +td, th { + padding: 10px; + text-align: center; } \ No newline at end of file From 85c49df2b1839c1900ce24b28a3598cfdff75eb0 Mon Sep 17 00:00:00 2001 From: NeemZ16 <110858265+NeemZ16@users.noreply.github.com> Date: Sat, 12 Oct 2024 13:58:34 -0500 Subject: [PATCH 4/8] navbar changes: updated navbar colors to change on theme toggle, changed breadcrumbs color to text color for improved readability --- devU-client/src/components/misc/globalToolbar.scss | 7 +++---- devU-client/src/components/misc/navbar.scss | 2 +- 2 files changed, 4 insertions(+), 5 deletions(-) diff --git a/devU-client/src/components/misc/globalToolbar.scss b/devU-client/src/components/misc/globalToolbar.scss index 9a5f1c31..1251bde3 100644 --- a/devU-client/src/components/misc/globalToolbar.scss +++ b/devU-client/src/components/misc/globalToolbar.scss @@ -16,7 +16,7 @@ $font-size: 16px; @extend .flex; text-decoration: none; - color: #d9d9d9; + color: #FFF; font-size: $font-size; margin:3vw; height: 4vh; @@ -36,13 +36,12 @@ $font-size: 16px; font-size: 40px; border-radius: 30px; - color: #D9D9D9; font-weight: 550; } .bar { height: 60px; - background-color: #52468A; + background-color: $primary; @extend .flex; justify-content: space-between; } @@ -59,7 +58,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: 300px) { +@media (max-width: 410px) { .flex { gap: 1rem; diff --git a/devU-client/src/components/misc/navbar.scss b/devU-client/src/components/misc/navbar.scss index f490536a..1a1199ad 100644 --- a/devU-client/src/components/misc/navbar.scss +++ b/devU-client/src/components/misc/navbar.scss @@ -2,5 +2,5 @@ .link { text-decoration: none; - color: #52468A; + color: $text-color; } \ No newline at end of file From c394efe72c4a3c9aaab8f2ae25821bb8701b3dbd Mon Sep 17 00:00:00 2001 From: NeemZ16 <110858265+NeemZ16@users.noreply.github.com> Date: Tue, 15 Oct 2024 14:45:11 -0500 Subject: [PATCH 5/8] added styling for gradebook, added rounded borders and search field --- devU-client/src/assets/global.scss | 15 ++--- devU-client/src/assets/variables.scss | 9 ++- .../gradebook/gradebookInstructorPage.tsx | 61 +++++++++++++------ .../pages/gradebook/gradebookPage.scss | 30 +++++++++ devU-client/src/utils/theme.utils.ts | 2 +- 5 files changed, 86 insertions(+), 31 deletions(-) diff --git a/devU-client/src/assets/global.scss b/devU-client/src/assets/global.scss index b84a027b..7b938a35 100644 --- a/devU-client/src/assets/global.scss +++ b/devU-client/src/assets/global.scss @@ -67,10 +67,8 @@ --primary-lighter: #41a8f7; --primary: var(--purple); - - // --primary: #D9D9D9; - --primary-darker: #054272; + --secondary-lighter: #cfd1d1; --secondary: #a8abab; --secondary-darker: #686b6b; @@ -97,6 +95,9 @@ --table-row-even: var(--grey-lighter); --table-row-odd: var(--grey-lightest); + --red-text: var(--red); + --yellow-text: var(--yellow-dark); + // Non theme colors - will not update with light/dark toggle --grey-lightest: #e5e5e5; --grey-lighter: #c5c5c5; @@ -117,7 +118,7 @@ --green-lighter: #B0EEA2; --green: #306025; - --yellow-lighter: #ffeaa7; + --yellow-dark: #664600; --yellow: #F8D487; transition: background-color 150ms linear; @@ -132,9 +133,6 @@ --primary-lighter: #3796bc; --primary: #7257EB; -// --primary-darker: #2F2363; - - // --primary: #636666; --primary-darker: #133441; --secondary-lighter: #636666; @@ -163,6 +161,9 @@ --table-row-even: var(--grey-darker); --table-row-odd: var(--grey-darkest); + --red-text: var(--red-lighter); + --yellow-text: var(--yellow); + background-color: var(--background); color: var(--text-color); } diff --git a/devU-client/src/assets/variables.scss b/devU-client/src/assets/variables.scss index 47f058df..2e699a96 100644 --- a/devU-client/src/assets/variables.scss +++ b/devU-client/src/assets/variables.scss @@ -19,7 +19,7 @@ $secondary-darker: var(--secondary-darker); $list-item-background: var(--list-item-background); $list-item-background-hover: var(--list-item-background-hover); -$list-item-subtext: var(--list-item-subtext); +$list-item-subtext: var(--list-item-subtext); $list-simple-item-background: var(--list-simple-item-background); $list-simple-item-background-hover: var(--list-simple-item-background-hover); @@ -50,9 +50,12 @@ $purple: var(--purple); $green-lighter: var(--green-lighter); $green: var(--green); -$yellow-lighter: var(--yellow-lighter); +$yellow-dark: var(--yellow-dark); $yellow: var(--yellow); +$redText: var(--red-text); +$yellowText: var(--yellow-text); + // Non color CSS variables $border-radius: 3px; @@ -69,4 +72,4 @@ $extreme: 780px; text-overflow: ellipsis; white-space: nowrap; word-wrap: normal; -} +} \ No newline at end of file diff --git a/devU-client/src/components/pages/gradebook/gradebookInstructorPage.tsx b/devU-client/src/components/pages/gradebook/gradebookInstructorPage.tsx index 12b52b56..e1440dd0 100644 --- a/devU-client/src/components/pages/gradebook/gradebookInstructorPage.tsx +++ b/devU-client/src/components/pages/gradebook/gradebookInstructorPage.tsx @@ -1,15 +1,16 @@ -import React, {useEffect, useState} from 'react' +import React, { useEffect, useState } from 'react' -import {Assignment, AssignmentScore, User, UserCourse} from 'devu-shared-modules' +import { Assignment, AssignmentScore, User, UserCourse } from 'devu-shared-modules' import PageWrapper from 'components/shared/layouts/pageWrapper' import LoadingOverlay from 'components/shared/loaders/loadingOverlay' +import TextField from 'components/shared/inputs/textField' import ErrorPage from '../errorPage/errorPage' import RequestService from 'services/request.service' import styles from './gradebookPage.scss' -import {useParams} from 'react-router-dom' +import { useParams } from 'react-router-dom' type TableProps = { users: User[] @@ -25,17 +26,22 @@ type RowProps = { assignmentScores: AssignmentScore[] } -const TableRow = ({index, user, userCourse, assignments, assignmentScores}: RowProps) => { +const TableRow = ({ index, user, userCourse, assignments, assignmentScores }: RowProps) => { // style table row to alternating colors based on index odd?even const rowClass = index % 2 === 0 ? 'evenRow' : 'oddRow'; + // dont show row if dropped + if (userCourse.dropped) { + return (<>) + } + return (
- + {/* */} - + {/* */} {assignments.map(a => ( ))} @@ -43,16 +49,16 @@ const TableRow = ({index, user, userCourse, assignments, assignmentScores}: RowP ) } -const GradebookTable = ({users, userCourses, assignments, assignmentScores}: TableProps) => { +const GradebookTable = ({ users, userCourses, assignments, assignmentScores }: TableProps) => { return (
# Email External ID
{index} {user.email} {user.externalId}
{index} {user.email}{user.externalId}{user.externalId}{user.preferredName}{userCourse.dropped.toString()}{userCourse.dropped.toString()}{assignmentScores.find(as => as.assignmentId === a.id)?.score ?? 'N/A'}
- + - + {/* */} - + {/* */} {assignments.map((a) => { - return ( ) + return () })} {users.map((u, index) => ( { const [userCourses, setUserCourses] = useState(new Array()) //All user-course connections for the course const [assignments, setAssignments] = useState(new Array()) //All assignments in the course const [assignmentScores, setAssignmentScores] = useState(new Array()) //All assignment scores for assignments in the course - - const { courseId } = useParams<{courseId: string}>() - + + const { courseId } = useParams<{ courseId: string }>() + useEffect(() => { fetchData() - }, []) - + }, []) + const fetchData = async () => { try { const userCourses = await RequestService.get(`/api/course/${courseId}/user-courses/`) @@ -89,12 +95,12 @@ const GradebookInstructorPage = () => { const users = await RequestService.get(`/api/users/course/${courseId}`) setUsers(users) - - const assignments = await RequestService.get( `/api/course/${courseId}/assignments` ) + + const assignments = await RequestService.get(`/api/course/${courseId}/assignments`) assignments.sort((a, b) => (Date.parse(a.startDate) - Date.parse(b.startDate))) //Sort by assignment's start date setAssignments(assignments) - const assignmentScores = await RequestService.get( `/api/course/${courseId}/assignment-scores` ) + const assignmentScores = await RequestService.get(`/api/course/${courseId}/assignment-scores`) setAssignmentScores(assignmentScores) } catch (error: any) { @@ -107,13 +113,28 @@ const GradebookInstructorPage = () => { if (loading) return if (error) return + const handleStudentSearch = () => { + + } + return ( {/*
*/}

Instructor Gradebook

{/*
*/}
- +

Key: ! = late, - = no submission

+
+ +
+
+ Date: Wed, 23 Oct 2024 16:06:54 -0400 Subject: [PATCH 6/8] removed primary darker and lighter, added purple-darker and ensured consistency across files --- devU-client/src/assets/global.scss | 6 ------ devU-client/src/assets/variables.scss | 4 ++-- devU-client/src/components/utils/userOptionsDropdown.scss | 2 +- devU-client/src/utils/theme.utils.ts | 2 +- 4 files changed, 4 insertions(+), 10 deletions(-) diff --git a/devU-client/src/assets/global.scss b/devU-client/src/assets/global.scss index 7b938a35..d7cd5bdb 100644 --- a/devU-client/src/assets/global.scss +++ b/devU-client/src/assets/global.scss @@ -64,10 +64,7 @@ --text-color-secondary: #363636; --focus: var(--blue); - --primary-lighter: #41a8f7; - --primary: var(--purple); - --primary-darker: #054272; --secondary-lighter: #cfd1d1; --secondary: #a8abab; @@ -130,10 +127,7 @@ --text-color-secondary: #9b9b9b; --focus: var(--blue-lighter); - --primary-lighter: #3796bc; - --primary: #7257EB; - --primary-darker: #133441; --secondary-lighter: #636666; --secondary: #3d3f3f; diff --git a/devU-client/src/assets/variables.scss b/devU-client/src/assets/variables.scss index 2e699a96..f240b58c 100644 --- a/devU-client/src/assets/variables.scss +++ b/devU-client/src/assets/variables.scss @@ -9,9 +9,8 @@ $background: var(--background); $text-color: var(--text-color); $text-color-secondary: var(--text-color-secondary); -$primary-lighter: var(--primary-lighter); + $primary: var(--primary); -$primary-darker: var(--primary-darker); $secondary-lighter: var(--secondary-lighter); $secondary: var(--secondary); @@ -46,6 +45,7 @@ $red: var(--red); $purple-lighter: var(--purple-lighter); $purple: var(--purple); +$purple-darker: var(--purple-darker); $green-lighter: var(--green-lighter); $green: var(--green); diff --git a/devU-client/src/components/utils/userOptionsDropdown.scss b/devU-client/src/components/utils/userOptionsDropdown.scss index 26d23254..6db877bc 100644 --- a/devU-client/src/components/utils/userOptionsDropdown.scss +++ b/devU-client/src/components/utils/userOptionsDropdown.scss @@ -89,7 +89,7 @@ text-decoration: none; &:hover { - background: $primary-darker; + background: $purple-darker; } } diff --git a/devU-client/src/utils/theme.utils.ts b/devU-client/src/utils/theme.utils.ts index 24b7ffc7..7c4bf4f7 100644 --- a/devU-client/src/utils/theme.utils.ts +++ b/devU-client/src/utils/theme.utils.ts @@ -52,7 +52,6 @@ export function getCssVariables() { background: body.getPropertyValue('--background'), primary: body.getPropertyValue('--primary'), - primaryDarker: body.getPropertyValue('--primary-darker'), secondary: body.getPropertyValue('--secondary'), secondaryDarker: body.getPropertyValue('--secondary-darker'), @@ -76,6 +75,7 @@ export function getCssVariables() { purpleLighter: body.getPropertyValue('--purple-lighter'), purple: body.getPropertyValue('--purple'), + purpleDarker: body.getPropertyValue('--purple-darker'), greenLighter: body.getPropertyValue('--green-lighter'), green: body.getPropertyValue('--green'), From df8710458b0d052bf3f171c316439812d3046c10 Mon Sep 17 00:00:00 2001 From: NeemZ16 <110858265+NeemZ16@users.noreply.github.com> Date: Wed, 23 Oct 2024 16:29:23 -0400 Subject: [PATCH 7/8] fixed styling for courseDetailPage and student gradebook --- devU-client/src/assets/global.scss | 1 - .../src/components/pages/courses/courseDetailPage.scss | 4 ++-- devU-client/src/components/pages/gradebook/gradebookPage.scss | 4 ++-- 3 files changed, 4 insertions(+), 5 deletions(-) diff --git a/devU-client/src/assets/global.scss b/devU-client/src/assets/global.scss index fe633806..4458b368 100644 --- a/devU-client/src/assets/global.scss +++ b/devU-client/src/assets/global.scss @@ -61,7 +61,6 @@ --background: white; --text-color: black; - --text-color2: white; --text-color-secondary: #363636; --focus: var(--blue); diff --git a/devU-client/src/components/pages/courses/courseDetailPage.scss b/devU-client/src/components/pages/courses/courseDetailPage.scss index 78b039bf..6efc4d2a 100644 --- a/devU-client/src/components/pages/courses/courseDetailPage.scss +++ b/devU-client/src/components/pages/courses/courseDetailPage.scss @@ -17,8 +17,8 @@ .color{ - background-color: $purple; - color: $text-color2; + background-color: $primary; + color: #FFF; // always white against purple bg width: 100%; padding: 20px; text-align: center; diff --git a/devU-client/src/components/pages/gradebook/gradebookPage.scss b/devU-client/src/components/pages/gradebook/gradebookPage.scss index 90d32604..2c34601c 100644 --- a/devU-client/src/components/pages/gradebook/gradebookPage.scss +++ b/devU-client/src/components/pages/gradebook/gradebookPage.scss @@ -6,7 +6,7 @@ } .assignmentName { - color: $blue-darker + color: $focus; } .smallLine { @@ -101,7 +101,7 @@ tr:last-of-type td:last-of-type { transform: translateZ(0); } .table { - color: $blue-darker; + color: $text-color; width: 100%; overflow: hidden; border-collapse: collapse; From 20bc6a402f4c17752da5b76606b107290ccb2c1e Mon Sep 17 00:00:00 2001 From: NeemZ16 <110858265+NeemZ16@users.noreply.github.com> Date: Wed, 23 Oct 2024 16:39:26 -0400 Subject: [PATCH 8/8] updated student gradebook rows to update on theme toggle --- .../src/components/pages/gradebook/gradebookPage.scss | 9 +++++++-- .../components/pages/gradebook/gradebookStudentPage.tsx | 1 - 2 files changed, 7 insertions(+), 3 deletions(-) diff --git a/devU-client/src/components/pages/gradebook/gradebookPage.scss b/devU-client/src/components/pages/gradebook/gradebookPage.scss index 2c34601c..d4763a23 100644 --- a/devU-client/src/components/pages/gradebook/gradebookPage.scss +++ b/devU-client/src/components/pages/gradebook/gradebookPage.scss @@ -81,6 +81,8 @@ tr:last-of-type td:last-of-type { color: $redText; } +// STUDENT GRADEBOOK STYLING + .header { color: $text-color; display: flex; @@ -100,6 +102,7 @@ tr:last-of-type td:last-of-type { border-radius: 20px !important; transform: translateZ(0); } + .table { color: $text-color; width: 100%; @@ -128,11 +131,13 @@ tr:last-of-type td:last-of-type { } .evenRow { - background-color: if(type-of($secondary-lighter) == 'color', lighten($secondary-lighter, 5%), #e0e0e0); // Fallback to #e0e0e0 + // background-color: if(type-of($secondary-lighter) == 'color', lighten($secondary-lighter, 5%), #e0e0e0); // Fallback to #e0e0e0 + background-color: $table-row-even; } .oddRow { - background-color: if(type-of($secondary-lighter) == 'color', darken($secondary-lighter, 5%), #d0d0d0); // Fallback to #d0d0d0 + // background-color: if(type-of($secondary-lighter) == 'color', darken($secondary-lighter, 5%), #d0d0d0); // Fallback to #d0d0d0 + background-color: $table-row-odd; } } diff --git a/devU-client/src/components/pages/gradebook/gradebookStudentPage.tsx b/devU-client/src/components/pages/gradebook/gradebookStudentPage.tsx index 9414f0cd..3a4448fd 100644 --- a/devU-client/src/components/pages/gradebook/gradebookStudentPage.tsx +++ b/devU-client/src/components/pages/gradebook/gradebookStudentPage.tsx @@ -9,7 +9,6 @@ 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 styles from './gradebookPage.scss';
## EmailExternal IDExternal IDPreferred NameDroppedDropped{a.name}{a.name}