diff --git a/devU-client/src/assets/global.scss b/devU-client/src/assets/global.scss index 4458b36..af771fb 100644 --- a/devU-client/src/assets/global.scss +++ b/devU-client/src/assets/global.scss @@ -14,7 +14,7 @@ } h1 { - margin: 2.25rem auto; + margin: 1.75rem auto; text-align: center; } @@ -24,7 +24,7 @@ // general button template, extends to 3 types of buttons - primary, secondary, delete .btn { - padding: 15px 30px; + padding: 10px 15px; border-radius: 100px; border: none; font-weight: 700; diff --git a/devU-client/src/assets/variables.scss b/devU-client/src/assets/variables.scss index 1056e10..b503f78 100644 --- a/devU-client/src/assets/variables.scss +++ b/devU-client/src/assets/variables.scss @@ -66,6 +66,8 @@ $medium: 1000px; $small: 600px; $extreme: 780px; +$pagePadding: 50px; + @mixin ellipsis { overflow: hidden; text-overflow: ellipsis; diff --git a/devU-client/src/components/listItems/simpleAssignmentListItem.scss b/devU-client/src/components/listItems/simpleAssignmentListItem.scss index d4cf36a..1cd22c0 100644 --- a/devU-client/src/components/listItems/simpleAssignmentListItem.scss +++ b/devU-client/src/components/listItems/simpleAssignmentListItem.scss @@ -7,7 +7,8 @@ border-radius: 0.6rem; justify-content: space-between; transition: background-color 0.2s linear; - color:$primary; + // color:$primary; + color: $text-color; } .meta { @@ -44,10 +45,11 @@ border-radius: 0.6rem; transition: background-color 0.2s linear; - color: #52468A; + // color: $primary; - &:hover, - &:focus { - background: $list-simple-item-background-hover; - } + color: $text-color; + // &:hover, + // &:focus { + // background: $list-simple-item-background-hover; + // } } \ No newline at end of file diff --git a/devU-client/src/components/listItems/userCourseListItem.scss b/devU-client/src/components/listItems/userCourseListItem.scss index 2ebb8de..a2e5d25 100644 --- a/devU-client/src/components/listItems/userCourseListItem.scss +++ b/devU-client/src/components/listItems/userCourseListItem.scss @@ -3,20 +3,20 @@ .name { font-size: 1.2rem; font-weight: 600; - margin: 0; - padding: 30px; /* Add padding to the text inside the name block */ - background: $primary; - width: 100%; - text-align: center; - color: $text-color; - border-radius: 5px 5px 0 0; + margin: 0; + padding: 30px; + /* Add padding to the text inside the name block */ + background: $primary; + width: 100%; + text-align: center; + color: #FFF; + border-radius: 20px 20px 0 0; box-sizing: border-box; text-overflow: ellipsis; overflow-wrap: break-word; } -.No_assignments -{ +.No_assignments { display: flex; justify-content: center; align-items: center; @@ -24,22 +24,26 @@ flex-grow: 1; font-size: 12px; font-weight: 600; - border-radius:5px; + border-radius: 5px; padding: 30px; flex-wrap: wrap; - color:$primary; + // color: $primary; + color: $text-color; text-overflow: ellipsis; overflow-wrap: break-word; } -.Buttons{ + +.Buttons { display: flex; justify-content: space-around; margin-top: auto; - padding:10px; + padding: 10px; } -.gradebook_button ,.coursepage_button { + +.gradebook_button, +.coursepage_button { border: 0; - color: $primary; + color: $text-color; background: none; font-weight: 600; margin-left: 15px; @@ -93,10 +97,11 @@ .subText { display: block; } + .Buttons { - flex-direction: row; - justify-content: space-between; + flex-direction: row; + justify-content: space-between; padding: 10px; - margin-top: auto; -} + margin-top: auto; + } } \ No newline at end of file diff --git a/devU-client/src/components/listItems/userCourseListItem.tsx b/devU-client/src/components/listItems/userCourseListItem.tsx index 18d5e66..a9090fd 100644 --- a/devU-client/src/components/listItems/userCourseListItem.tsx +++ b/devU-client/src/components/listItems/userCourseListItem.tsx @@ -1,6 +1,6 @@ import React from 'react' -import {Assignment, Course} from 'devu-shared-modules' -import {useHistory} from "react-router-dom"; +import { Assignment, Course } from 'devu-shared-modules' +import { useHistory } from "react-router-dom"; import ListItemWrapper from 'components/shared/layouts/listItemWrapper' //import {prettyPrintDate} from 'utils/date.utils' @@ -18,30 +18,30 @@ type Props = { } -const UserCourseListItem = ({course, assignments, past = false, instructor = false}: Props) => { +const UserCourseListItem = ({ course, assignments, past = false, instructor = false }: Props) => { const history = useHistory() - return( - - -
{instructor ? (course.name + " " + course.number + " (" + course.semester + ")" + " Instructor") : course.name.toUpperCase() + " " + course.number + " " + "(" + course.semester + ")" }
-
- {assignments && assignments.length > 0 ? (assignments.map((assignment) => ( - - ))) : ((past) ?
:
No Assignments Due Yet
)} -
- - -
+ return ( + + +
{instructor ? (course.name + " " + course.number + " (" + course.semester + ")" + " Instructor") : course.name.toUpperCase() + " " + course.number + " " + "(" + course.semester + ")"}
+
+ {assignments && assignments.length > 0 ? (assignments.map((assignment) => ( + + ))) : ((past) ?
:
No Assignments Due Yet
)} +
+ + +
- + -); + ); }; export default UserCourseListItem diff --git a/devU-client/src/components/misc/globalToolbar.scss b/devU-client/src/components/misc/globalToolbar.scss index 0ddc42d..314d0a8 100644 --- a/devU-client/src/components/misc/globalToolbar.scss +++ b/devU-client/src/components/misc/globalToolbar.scss @@ -1,6 +1,6 @@ @import 'variables'; -$bar-height: 50px; +$bar-height: 60px; $sidebar-width: 260px; $hover-effect: 0.7; $font-size: 16px; @@ -17,19 +17,8 @@ $font-size: 16px; text-decoration: none; color: #FFF; - font-size: $font-size; - - //height: $bar-height; - - margin:3vw; - height: 4vh; - flex-grow: .05; - border-radius: 3vw; - font-weight: 550; - //font-size: 14px; - - padding:0.5vw; + font-weight: 500; &:hover { opacity: $hover-effect; @@ -37,23 +26,19 @@ $font-size: 16px; } .header { - @extend .link; - font-size: 40px; - border-radius: 30px; - font-weight: 550; - //font-size: 2em; - //font-weight: bold; + font-size: 32px; + text-decoration: none; + color: #FFF; + font-weight: 500; } .bar { - - height: 80px; + height: $bar-height; background-color: $primary; font-size: 40px; color: #D9D9D9; font-weight: 550; - - + padding: 0 $pagePadding; @extend .flex; justify-content: space-between; @@ -71,7 +56,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: 410px) { +@media (max-width: 500px) { .flex { gap: 1rem; diff --git a/devU-client/src/components/misc/navbar.scss b/devU-client/src/components/misc/navbar.scss index 9ee712c..2fe4774 100644 --- a/devU-client/src/components/misc/navbar.scss +++ b/devU-client/src/components/misc/navbar.scss @@ -3,7 +3,7 @@ .breadcrumbContainer { display: flex; align-items: center; - margin-left: 3.5rem; + margin-left: $pagePadding; margin-top:10px; } diff --git a/devU-client/src/components/pages/forms/assignments/assignmentFormPage.scss b/devU-client/src/components/pages/forms/assignments/assignmentFormPage.scss index 4ee90fa..e3ca442 100644 --- a/devU-client/src/components/pages/forms/assignments/assignmentFormPage.scss +++ b/devU-client/src/components/pages/forms/assignments/assignmentFormPage.scss @@ -7,106 +7,50 @@ h2 { p { text-align: center; + margin-left: 0; } .pageWrapper { - padding:0px; + padding: 0 100px; } .flex { display: flex; - justify-content: center; - align-items: center; + justify-content: space-between; + gap: 30px; + margin-bottom: 30px; } .form { - background-color: $list-item-background; - grid-area: 1 / 1 / 2 / 2; - border-radius: 10px; - padding: 20px; - margin-right: 0; - } - - .datepickerContainer { - display: grid; - grid-template-columns: repeat(3, 1fr); - grid-template-rows: 1fr; - grid-column-gap: 10px; - grid-row-gap: 0px; - width: 100%; - justify-content: center; - align-items: center; - text-align: center; - } - -.header { - color: $text-color; - display: flex; - align-items: center; -} - -.datepicker_start { - grid-area: 1 / 1 / 2 / 2; -} -.datepicker_due { - grid-area: 1 / 2 / 2 / 3; -} -.datepicker_end { - grid-area: 1 / 3 / 2 / 4; -} - -.grid { - display: grid; - grid-template-columns: 1fr 0.75fr; - grid-template-rows: 1fr; - grid-column-gap: 10px; - grid-row-gap: 10px; - width: 100%; - padding-left: 10px; - padding-right: 10px; -} - -.dragDropFile { - grid-area: 1 / 2 / 2 / 3; - padding: 20px; background-color: $list-item-background; - border-radius: 10px; - margin-left: 0; -} - -.dragDropFileComponent { - margin-top: 10%; -} - -.textField1 { + border-radius: 20px; + padding: 30px; width: 50%; - margin-right: 5%; - flex-shrink: 0; - flex-direction: none; + height: fit-content; } -.textField2 { - width: 50%; - flex-shrink: 0; - flex-direction: none; +.form>h2 { + margin-top: 0; } -.textFieldContainer { - display:flex; +.datepickerContainer { width: 100%; + text-align: center; + display: flex; + justify-content: space-between; + gap: 5px; } -.textArea { - width: 100%; - flex-direction: none; +.header { + color: $text-color; + display: flex; + align-items: center; } -.fileNameContainer { - left: 0; - right: 0; - margin-left: auto; - margin-right: auto; - width: 400px; +.textFieldContainer { + display: flex; + justify-content: space-between; + gap: 15px; } .fileName { @@ -125,63 +69,43 @@ p { cursor: pointer; font-size: 0.9em; - + &:hover { text-decoration: dashed; color: red; } } -@media (max-width: 1000px) { - .grid { - display: grid; - grid-template-columns: 1fr; - grid-template-rows: repeat(2, 1fr); - grid-column-gap: 0px; - grid-row-gap: 10px; - margin-left: 20px; - margin-right: 20px; - width: 100%; +@media (max-width: 1115px) { + .pageWrapper { + padding: 0 50px; } +} - .form { - grid-area: 1 / 1 / 2 / 2; - margin-left: 10px; - margin-right: 10px; - } - .dragDropFile { - grid-area: 2 / 1 / 3 / 2; - align-content: center; - text-align: center; - margin-left: 10px; - margin-right: 10px; - } - .dragDropFileInput { - display: flex; - justify-content: center; +@media (max-width: 1015px) { + .pageWrapper { + padding: 0 100px; } -} -@media (max-width: 550px) { - .datepickerContainer{ - display: grid; - grid-template-columns: 1fr; - grid-template-rows: repeat(3, 1fr); - grid-column-gap: 0px; - grid-row-gap: 10px; - width: 100%; - justify-content: center; + .flex { + flex-direction: column; align-items: center; - text-align: center; } - .datepicker_start { - grid-area: 1 / 1 / 2 / 2; + .form { + width: 100%; } - .datepicker_due { - grid-area: 2 / 1 / 3 / 2; +} + +@media (max-width: 670px) { + .pageWrapper { + padding: 0 50px; } - .datepicker_end { - grid-area: 3 / 1 / 4 / 2; +} + +@media (max-width: 560px) { + .datepickerContainer { + flex-direction: column; + gap: 15px; } } \ No newline at end of file diff --git a/devU-client/src/components/pages/forms/assignments/assignmentFormPage.tsx b/devU-client/src/components/pages/forms/assignments/assignmentFormPage.tsx index 9881fb5..3e4c935 100644 --- a/devU-client/src/components/pages/forms/assignments/assignmentFormPage.tsx +++ b/devU-client/src/components/pages/forms/assignments/assignmentFormPage.tsx @@ -1,25 +1,24 @@ -import React, {useState} from 'react' -import {ExpressValidationError} from 'devu-shared-modules' +import React, { useState } from 'react' +import { ExpressValidationError } from 'devu-shared-modules' import 'react-datepicker/dist/react-datepicker.css' import PageWrapper from 'components/shared/layouts/pageWrapper' import RequestService from 'services/request.service' -import {useActionless} from 'redux/hooks' +import { useActionless } from 'redux/hooks' import TextField from 'components/shared/inputs/textField' -// import Button from '@mui/material/Button' -import Button from '../../../shared/inputs/button' +// import Button from '../../../shared/inputs/button' import DragDropFile from 'components/utils/dragDropFile' -import {SET_ALERT} from 'redux/types/active.types' +import { SET_ALERT } from 'redux/types/active.types' -import {applyMessageToErrorFields, removeClassFromField} from "../../../../utils/textField.utils"; -import {useHistory, useParams} from 'react-router-dom' +import { applyMessageToErrorFields, removeClassFromField } from "../../../../utils/textField.utils"; +import { useHistory, useParams } from 'react-router-dom' import formStyles from './assignmentFormPage.scss' const AssignmentCreatePage = () => { const [setAlert] = useActionless(SET_ALERT) - const {courseId} = useParams<{ courseId: string }>() + const { courseId } = useParams<{ courseId: string }>() const history = useHistory() const [formData, setFormData] = useState({ @@ -35,32 +34,32 @@ const AssignmentCreatePage = () => { const [dueDate, setDueDate] = useState('') const [startDate, setStartDate] = useState('') const [invalidFields, setInvalidFields] = useState(new Map()) - const [files, setFiles] = useState>(new Map()) + const [files, setFiles] = useState>(new Map()) - const handleChange = (value: String, e : React.ChangeEvent) => { + const handleChange = (value: String, e: React.ChangeEvent) => { const key = e.target.id const newInvalidFields = removeClassFromField(invalidFields, key) setInvalidFields(newInvalidFields) - setFormData(prevState => ({...prevState,[key] : value})) + setFormData(prevState => ({ ...prevState, [key]: value })) } const handleCheckbox = (e: React.ChangeEvent) => { - setFormData(prevState => ({...prevState,disableHandins : e.target.checked})) + setFormData(prevState => ({ ...prevState, disableHandins: e.target.checked })) } - const handleStartDateChange = (e : React.ChangeEvent) => {setStartDate(e.target.value)} - const handleEndDateChange = (e : React.ChangeEvent) => {setEndDate(e.target.value)} - const handleDueDateChange = (e : React.ChangeEvent) => {setDueDate(e.target.value)} + const handleStartDateChange = (e: React.ChangeEvent) => { setStartDate(e.target.value) } + const handleEndDateChange = (e: React.ChangeEvent) => { setEndDate(e.target.value) } + const handleDueDateChange = (e: React.ChangeEvent) => { setDueDate(e.target.value) } const handleSubmit = () => { const finalFormData = { courseId: courseId, name: formData.name, - startDate : startDate, + startDate: startDate, dueDate: dueDate, - endDate : endDate, + endDate: endDate, categoryName: formData.categoryName, description: formData.description, maxFileSize: formData.maxFileSize, @@ -75,11 +74,11 @@ const AssignmentCreatePage = () => { multipart.append('dueDate', finalFormData.dueDate) multipart.append('endDate', finalFormData.endDate) multipart.append('categoryName', finalFormData.categoryName) - if(finalFormData.description !== null) { multipart.append('description', finalFormData.description) } + if (finalFormData.description !== null) { multipart.append('description', finalFormData.description) } multipart.append('maxFileSize', finalFormData.maxFileSize.toString()) - if(finalFormData.maxSubmissions !== null) { multipart.append('maxSubmissions', finalFormData.maxSubmissions.toString()) } + if (finalFormData.maxSubmissions !== null) { multipart.append('maxSubmissions', finalFormData.maxSubmissions.toString()) } multipart.append('disableHandins', finalFormData.disableHandins.toString()) - for(const file of files.values()){ + for (const file of files.values()) { multipart.append('files', file) } @@ -97,9 +96,9 @@ const AssignmentCreatePage = () => { setAlert({ autoDelete: false, type: 'error', message }) }) - .finally(() => { + .finally(() => { - }) + }) } @@ -121,80 +120,77 @@ const AssignmentCreatePage = () => { }); }; - return( + return (

Create Assignment

-

Assignment Information

+ invalidated={!!invalidFields.get("name")} + helpText={invalidFields.get("name")} + /> + invalidated={!!invalidFields.get("categoryName")} + helpText={invalidFields.get("categoryName")} + />
- +
+ invalidated={!!invalidFields.get("maxFileSize")} + helpText={invalidFields.get("maxFileSize")} + /> + invalidated={!!invalidFields.get("maxSubmission")} + helpText={invalidFields.get("maxSubmission")} + />
-
- -
-
+
+ +
+
-
- -
-
+
+ +
+
-
- +
+
-
-
+
+
+ onChange={handleCheckbox} className={formStyles.submitBtn} />
-
-
- +
+
+
-
+
{/*TODO: Whenever file uploads is available on backend, store the files + create Object URLs*/}

Attachments

-

Add up to 5 attachments with this assignment:

+

Add up to 5 attachments with this assignment:

Files Uploaded (click to delete) :

{Array.from(files.keys()).map((fileName) => { @@ -211,14 +207,13 @@ const AssignmentCreatePage = () => { ); })}
-
-
- -
+ {/*
*/} +
+
+ {/*
*/}
-
) } diff --git a/devU-client/src/components/pages/gradebook/gradebookInstructorPage.tsx b/devU-client/src/components/pages/gradebook/gradebookInstructorPage.tsx index c2c8efc..6d0c721 100644 --- a/devU-client/src/components/pages/gradebook/gradebookInstructorPage.tsx +++ b/devU-client/src/components/pages/gradebook/gradebookInstructorPage.tsx @@ -1,6 +1,6 @@ -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' @@ -9,7 +9,7 @@ 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[] @@ -18,19 +18,27 @@ type TableProps = { assignmentScores: AssignmentScore[] } type RowProps = { - index: Number + index: number user: User userCourse: UserCourse assignments: Assignment[] assignmentScores: AssignmentScore[] } //table for style -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 ( - + {index} {user.email} - {user.externalId} + {/* {user.externalId} */} {user.preferredName} {userCourse.dropped.toString()} {assignments.map(a => ( @@ -40,16 +48,16 @@ const TableRow = ({index, user, userCourse, assignments, assignmentScores}: RowP ) } -const GradebookTable = ({users, userCourses, assignments, assignmentScores}: TableProps) => { +const GradebookTable = ({ users, userCourses, assignments, assignmentScores }: TableProps) => { return ( - + - + {/* */} {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/`) @@ -86,12 +94,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) { @@ -105,12 +113,12 @@ const GradebookInstructorPage = () => { if (error) return return ( - -
-

Instructor Gradebook

-
-
- + {/*
*/} +

Instructor Gradebook

+ {/*
*/} +
+ { const categories = [...new Set(assignments.map(a => a.categoryName))]; return ( - +

Student Gradebook

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

{category}

-
## EmailExternal IDExternal IDPreferred Name Dropped{a.name}{a.name}
{/* Add table class */} - - {/* Add class for purple header */} + {categories.map(category => ( +
+

{category}

+ {/*
Add table class */} +
+ + {/* Add class for purple header */} - - - + {/* */} + + {assignments.filter(a => a.categoryName === category).map((assignment, index) => ( - - + ))} - -
Assignment Score
-
- {assignment.name}
- - 		-
- {assignmentScores.find(aScore => aScore.assignmentId === assignment.id)?.score ?? 'N/A'} +
+ {assignment.name}
+ {/*
*/} + {assignmentScores.find(aScore => aScore.assignmentId === assignment.id)?.score ?? 'N/A'} + {/*
*/} +
-
- ))} + + +
+ ))}
); diff --git a/devU-client/src/components/pages/homePage/homePage.scss b/devU-client/src/components/pages/homePage/homePage.scss index da8e93f..5ca2b80 100644 --- a/devU-client/src/components/pages/homePage/homePage.scss +++ b/devU-client/src/components/pages/homePage/homePage.scss @@ -2,14 +2,14 @@ -.courses_heading{ +.courses_heading { text-align: left; - margin-left: 20px; - font-size: 30px; - font-weight: 550; + // margin-left: 20px; + // font-size: 30px; + // font-weight: 550; margin-bottom: 30px; - } + // h1 { // align-items:left; // margin-left 20px; @@ -19,67 +19,73 @@ // } -.no_courses { - margin-left: 20px; -} +// .no_courses { +// margin-left: 20px; +// } .coursesContainer { display: flex; flex-direction: row; - gap: 20px; - margin:20px; + gap: 20px; + // margin: 20px; } + .courseCard { display: flex; flex-direction: column; justify-content: space-between; align-items: stretch; - width:400px; - padding: 0; - background-color: #D9D9D9; - border-radius: 5px; - box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); - overflow: hidden; + width: 400px; + padding: 0; + background-color: $list-item-background; + border-radius: 20px; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); + overflow: hidden; margin-bottom: 20px; - } -.create_course { - border:0; /* Primary button color */ - color: $primary; - padding: 10px 20px; - border-radius: 5px; - text-decoration: none; - font-weight: 600; - transition: background-color 0.3s ease; - margin:20px } + +// .create_course { +// border: 0; +// color: $primary; +// padding: 10px 20px; +// border-radius: 5px; +// text-decoration: none; +// font-weight: 600; +// transition: background-color 0.3s ease; +// margin: 20px +// } + .header { color: $text-color; display: block; - align-items: center; + align-items: center; } - -.courses_heading::after { - content: ''; +#createCourseBtn { display: block; - margin-top: 10px; - width: 100%; - height: 1px; - font-weight: 600; - background-color: $text-color; - } + margin-left: auto; +} +// .courses_heading::after { +// content: ''; +// display: block; +// margin-top: 10px; +// width: 100%; +// height: 1px; +// font-weight: 600; +// background-color: $text-color; +// } @media (max-width: 768px) { .coursesContainer { - flex-direction: column; - align-items: center; + flex-direction: column; + align-items: center; } .courseCard { - width: 100%; - max-width: none; + width: 100%; + max-width: none; } -} +} \ No newline at end of file diff --git a/devU-client/src/components/pages/homePage/homePage.tsx b/devU-client/src/components/pages/homePage/homePage.tsx index 6d1a561..69a97ee 100644 --- a/devU-client/src/components/pages/homePage/homePage.tsx +++ b/devU-client/src/components/pages/homePage/homePage.tsx @@ -1,4 +1,4 @@ -import React, {useEffect, useState} from 'react' +import React, { useEffect, useState } from 'react' import PageWrapper from 'components/shared/layouts/pageWrapper' import LoadingOverlay from 'components/shared/loaders/loadingOverlay' @@ -6,17 +6,17 @@ import ErrorPage from '../errorPage/errorPage' import styles from './homePage.scss' import UserCourseListItem from "../../listItems/userCourseListItem"; -import {useAppSelector} from 'redux/hooks' +import { useAppSelector } from 'redux/hooks' import RequestService from 'services/request.service' -import {Assignment, Course} from 'devu-shared-modules' -import {useHistory} from "react-router-dom"; +import { Assignment, Course } from 'devu-shared-modules' +import { useHistory } from "react-router-dom"; const HomePage = () => { const userId = useAppSelector((store) => store.user.id) - + const [loading, setLoading] = useState(true) const [error, setError] = useState(null) const [enrollCourses, setEnrollCourses] = useState(new Array()) - const [upcomingCourses,setupcomingCourses] = useState(new Array()) + const [upcomingCourses, setupcomingCourses] = useState(new Array()) const [pastCourses, setPastCourses] = useState(new Array()) const [assignments, setAssignments] = useState(new Map>()) const [instructorCourses, setInstructorCourses] = useState(new Array()) @@ -26,7 +26,7 @@ const HomePage = () => { }, []) const fetchData = async () => { - + try { const assignmentMap = new Map>() const allCourses = await RequestService.get<{ @@ -39,14 +39,14 @@ const HomePage = () => { const upcomingCourses: Course[] = allCourses.upcomingCourses; const pastCourses: Course[] = allCourses.pastCourses; const instructorCourses: Course[] = allCourses.instructorCourses; - + const assignmentPromises = enrolledCourses.map((course) => { const assignments = RequestService.get(`/api/course/${course.id}/assignments/released`) return Promise.all([course, assignments]) }) const assignmentResults = await Promise.all(assignmentPromises) assignmentResults.forEach(([course, assignments]) => assignmentMap.set(course, assignments)) - + const assignmentPromises_instructor = instructorCourses.map((course) => { const assignments = RequestService.get(`/api/course/${course.id}/assignments/released`) return Promise.all([course, assignments]) @@ -59,7 +59,7 @@ const HomePage = () => { setEnrollCourses(enrolledCourses) setInstructorCourses(instructorCourses) setupcomingCourses(upcomingCourses) - + } catch (error: any) { setError(error) } finally { @@ -72,87 +72,83 @@ const HomePage = () => { if (error) return const history = useHistory(); const handleCourseClick = (courseId: any) => { - history.push(`/course/${courseId}`); // Assuming your course page route is '/course/:courseId' - } - return( + history.push(`/course/${courseId}`); // Assuming your course page route is '/course/:courseId' + } + return (
-
+ {/*
*/}

Courses

- -
-
-
-
-

Current

-
+ {/*
*/}
+ {/*
*/} + {/*
*/} +

Current

+ {/*
*/} + {/*
*/}
{instructorCourses.map((course) => ( -
handleCourseClick(course.id)} style={{ cursor: 'pointer' }}> - -
+
handleCourseClick(course.id)} style={{ cursor: 'pointer' }}> + +
))}
{enrollCourses && enrollCourses.map((course) => (
handleCourseClick(course.id)} style={{ cursor: 'pointer' }}> + key={course.id} + onClick={() => handleCourseClick(course.id)} style={{ cursor: 'pointer' }}> - +
))} {enrollCourses.length === 0 && instructorCourses.length == 0 &&

You do not have current enrollment yet

}
- -
-
-

Completed

-
-
- - + {/*
*/} + {/*
*/} +

Completed

+ {/*
*/} + {/*
*/}
{pastCourses && pastCourses.map((course) => ( -
handleCourseClick(course.id)} style={{ cursor: 'pointer' }}> - handleCourseClick(course.id)} style={{ cursor: 'pointer' }}> + -
+
))} {pastCourses.length === 0 &&

No completed courses

}
-
-
-

Upcoming

-
-
+ {/*
*/} + {/*
*/} +

Upcoming

+ {/*
*/} + {/*
*/} -
+
{upcomingCourses && upcomingCourses.map((course) => (
handleCourseClick(course.id)} style={{ cursor: 'pointer' }}> - + onClick={() => handleCourseClick(course.id)} style={{ cursor: 'pointer' }}> +
))} {upcomingCourses.length === 0 &&

No upcoming Courses

} -
- - - +
+ + + ) } diff --git a/devU-client/src/components/shared/layouts/pageWrapper.scss b/devU-client/src/components/shared/layouts/pageWrapper.scss index 5daad34..8c0cf1d 100644 --- a/devU-client/src/components/shared/layouts/pageWrapper.scss +++ b/devU-client/src/components/shared/layouts/pageWrapper.scss @@ -9,7 +9,7 @@ } .content { - margin-top: 20px; + // margin-top: 20px; flex-grow: 1; - padding: 10px 50px; + padding: 0px 50px; } diff --git a/devU-client/src/components/utils/dragDropFile.scss b/devU-client/src/components/utils/dragDropFile.scss index 4587605..b6b981b 100644 --- a/devU-client/src/components/utils/dragDropFile.scss +++ b/devU-client/src/components/utils/dragDropFile.scss @@ -10,11 +10,11 @@ .formFileUploadWide { height: 16rem; - width: 80%; - margin-left: 10%; - margin-right: 10%; + width: 100%; + // margin-left: 10%; + // margin-right: 10%; text-align: center; - position: relative; + // position: relative; } .inputFileUpload { @@ -29,8 +29,8 @@ border-width: 2px; border-radius: 1rem; border-style: dashed; - border-color: #cbd5e1; - background-color: $list-item-background; + border-color: $input-field-label; + background-color: $input-field-background; &.dragActive { background-color: #ffffff;