Skip to content

Commit

Permalink
added styling to the assignment details page for instructor, I added …
Browse files Browse the repository at this point in the history 
…options section for the buttons to be placed next to the assignment, I added the description of the assignment as well in the assignment section. I also fixed the nav bar for the breadcrumbs, to be more uniform
  • Loading branch information
@ashwaqaljanahi2021
ashwaqaljanahi2021 committed Oct 15, 2024
1 parent 4e5c1cd commit ab93022
Show file tree
Hide file tree
Showing 6 changed files with 235 additions and 73 deletions.
17 changes: 16 additions & 1 deletion devU-client/src/components/misc/navbar.scss
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,21 @@
@import 'variables';

.breadcrumbContainer {
display: flex;
align-items: center;
}

.link {
text-decoration: none;
color: #52468A;
color: $text-color; /* Breadcrumb link color */

}

.link:hover {
text-decoration: underline;
}

.separator {
color: #888; /* Separator color */
margin: 0 5px; /* Add spacing between breadcrumbs */
}
6 changes: 3 additions & 3 deletions devU-client/src/components/misc/navbar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -81,16 +81,16 @@ const Navbar = ({breadcrumbs}: any) => {
]

return (
<div>
<div className={styles.breadcrumbContainer}>
{breadcrumbs.map(({breadcrumb, match}: any, index: number) => {
let url = match.url
if (excludedPaths.includes(match.params.path)) return <div key={index} ></div>
if (excludedPaths.includes(match.params.path)) return null
if (match.params.home) url = '/'

return (
<span key={match.url}>
<Link to={url} className={styles.link}> {breadcrumb} </Link>
{index < (breadcrumbs.length - 1) ? ' > ' : ''}
{index < (breadcrumbs.length - 1) && ( <span className={styles.separator}> &gt; </span> )}
</span>
)
})}
Expand Down
191 changes: 153 additions & 38 deletions devU-client/src/components/pages/assignments/assignmentDetailPage.scss
View file
Original file line number Diff line number Diff line change
@@ -1,67 +1,182 @@
@import 'variables';

.wrap {
display:flex;
align-items: baseline;
gap:20px;
padding:20px;
justify-content:center;
}


.header {
display: flex;
align-items: center;
flex-direction: column;
align-items: flex-start;
color: $text-color;
}

.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 */

.line {
border: none;
height: 2px;
background-color: #ccc;
width: 100%;
margin-top: 10px;
}

.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 */
.card {
background-color: #f9f9f9;
border-radius: 8px;
padding: 20px;
width: 300px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
margin: 20px;
}

.buttons {
margin : 0 10px;

.card_heading {
font-size: 20px;
font-weight: 550;
margin-bottom: 15px;
color: #52468a;
text-align: center;
}

.card {
width: 60%;
height: 50%;
display: flex;
flex-direction: column;
justify-content: center;

.options_buttons {
display: flex;
flex-direction: column;
align-items: center;
padding-top: 20px;
justify-content: center;
gap: 10px;

}

.accordion {
width: 90%;
.submit_container{
display: flex;
flex-direction: column;
margin-top: 10px;
margin-left: 10px;
margin-right: 10px;
background-color: $list-item-background;
color:$list-item-background
justify-content: flex-end;
align-items: flex-end;
width: 100%;
margin-top: auto;

}

.accordionDetails {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: $list-item-background;
color:$text-color;

.buttons {
color: #52468a;
background-color: #f9f9f9;
padding: 10px 20px;
border-radius:15px;
cursor: pointer;
font-size: 15px;
border: none;
width: fit-content;
text-align: center;
margin-left: 20px;
}


.buttons:hover {
background-color: #888;

}

.assignment_card {
background-color: #f9f9f9;
border-radius: 8px;
padding: 20px;
width: 100%;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
width:800px;
}

.accordion {
background-color: #f9f9f9;
box-shadow: none;
border: 1px solid #ddd;
margin-bottom: 10px;
}

.accordionDetails {
background-color: #f9f9f9;
padding: 10px;
border-top: 1px solid #ddd;
}
.typography {
font-size: 16px;
color: #333;
}
.gridContainer {
display: flex;
justify-content: center;
align-items: center;
margin-top: 20px;
}
.textField {
align-items: center;
justify-content: center;
margin-top: 10px;
margin-bottom: 20px;
}

.submissionCard {
margin-bottom : 15px;
}

.fileInput {
margin-top: 10px;
margin-bottom: 10px;
margin-top: 20px;
}

.due_date {
font-size: 14px;
color: #888;
margin-top: 5px;
margin-bottom: 15px;
}


.submissionsContainer {
display: flex;
flex-direction: column;
width: 100%;
margin-top: 20px;
}


.submissionCard {
display: flex;
justify-content: space-between;
align-items: flex-start;
background-color: #f9f9f9;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
transition: transform 0.2s ease;
}

.submissionCard:hover {
transform: scale(1.02);
}

.submissionHeading {
font-size: 16px;
font-weight: bold;
color: #52468a;
}


.submissionTime {
font-size: 14px;
color: #888;
margin-top: 5px;
}

@media (max-width: 768px) {
.header {
flex-direction: column;
align-items: center;
}

.buttons {
width: 100%;
max-width: none;
}
}
81 changes: 53 additions & 28 deletions devU-client/src/components/pages/assignments/assignmentDetailPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,7 @@ import {SET_ALERT} from 'redux/types/active.types'
import Card from '@mui/material/Card'
import CardContent from '@mui/material/CardContent'
import {Accordion, AccordionDetails, AccordionSummary, CardActionArea, TextField, Typography} from '@mui/material'
import Stack from '@mui/material/Stack'
import Button from '@mui/material/Button'

import Grid from '@mui/material/Unstable_Grid2'

import styles from './assignmentDetailPage.scss'
Expand Down Expand Up @@ -143,28 +142,50 @@ const AssignmentDetailPage = () => {
return(
<PageWrapper>
<div className={styles.header}>
<div className={styles.smallLine}></div>
<h1>{assignment?.name}</h1>
<div className={styles.largeLine}></div>
<Stack spacing={2} direction='row'>
{role.isInstructor() && <Button variant='contained' className={styles.buttons} onClick={() => {
<h1 className = {styles.assignment_heading}>{assignment?.name}</h1>
<hr className= {styles.line}/>
</div>
<div className = {styles.wrap}>

{role.isInstructor() && (
<>
<div className={styles.card}>
<h2 className={styles.card_heading}>Options</h2>
<hr className = {styles.line} />
<div className={styles.options_buttons}>
{role.isInstructor() && <button className={styles.buttons} onClick={() => {
history.push(`/course/${courseId}/assignment/${assignmentId}/createNCAG`)
}}>Add NCAG</Button>}
{role.isInstructor() && <Button variant='contained' className={styles.buttons} onClick={() => {
}}>Add NCAG</button>}
<hr className = {styles.line} />
{role.isInstructor() && <button className={styles.buttons} onClick={() => {
history.push(`/course/${courseId}/assignment/${assignmentId}/createCAG`)
}}>Add CAG</Button>}
{role.isInstructor() && <Button variant='contained' className={styles.buttons} onClick={() => {
}}>Add CAG</button>}
<hr className = {styles.line} />
{role.isInstructor() && <button className={styles.buttons} onClick={() => {
history.push(`/course/${courseId}/assignment/${assignmentId}/createProblem`)
}}>Add Problem</Button>}
{role.isInstructor() && <Button variant='contained' className={styles.buttons} onClick={() => {
}}>Add Problem</button>}
<hr className = {styles.line} />
{role.isInstructor() && <button className={styles.buttons} onClick={() => {
history.push(`/course/${courseId}/assignment/${assignmentId}/update`)
}}>Edit Assignment</Button>}
</Stack>
</div>
}}>Edit Assignment</button>}
</div>
</div>
</>
)}







<Grid display='flex' justifyContent='center' alignItems='center'>
<Card className={styles.card}>
<Card className={styles.assignment_card}>
<Typography className={styles.assignment_description}>{assignment?.description}</Typography>
<hr className={styles.line} />

{assignment?.dueDate && (
<Typography className={styles.due_date}>{`Due Date: ${new Date(assignment.dueDate).toLocaleDateString()}`}</Typography>
)}
{nonContainerAutograders && nonContainerAutograders.length > 0 ? (
nonContainerAutograders.map((nonContainer, index) => (
<Accordion className={styles.accordion} key={index}>
Expand All @@ -182,37 +203,41 @@ const AssignmentDetailPage = () => {
<Typography>No Problems Exist</Typography>
</CardContent>
)}

{!(assignment?.disableHandins) && (<input type="file" className={styles.fileInput} onChange={handleFileChange} />)}

{assignmentProblems && assignmentProblems.length > 0 ? (
<Button variant='contained' style={{marginTop: 10, marginBottom: 10}} onClick={handleSubmit}>Submit</Button>
<div className = {styles.submit_container}>
<button className={styles.buttons} onClick={handleSubmit}>Submit</button>
</div>
) : null}
</Card>
</Grid>

</div>

<div className={styles.header}>
<div className={styles.smallLine}></div>
<h1>{`Submissions`}</h1>
<div className={styles.largeLine}></div>
<hr className = {styles.line}/>
</div>

{/**Submissions List */}
<div>
<div className={styles.submissionsContainer}>
{submissions.map((submission, index) => (
<Card className={styles.submissionCard} key={index}>
<CardActionArea onClick={() => {
history.push(`/course/${courseId}/assignment/${assignmentId}/submission/${submission.id}`)
}}>
<CardContent>
{`Submission ${submissions.length - index}`}
<Typography>{`Submitted at: ${submission.createdAt && prettyPrintDateTime(submission.createdAt)}`}</Typography>
</CardContent>
<CardContent>
<Typography className={styles.submissionHeading}>{`Submission ${submissions.length - index}`}</Typography>
<Typography className={styles.submissionTime}>{`Submitted at: ${submission.createdAt && prettyPrintDateTime(submission.createdAt)}`}</Typography>
</CardContent>
</CardActionArea>
</Card>
))}
</div>
</div>

</PageWrapper>
)
}
Expand Down
Loading

0 comments on commit ab93022

Please sign in to comment.