Skip to content

Commit

Permalink
Merge pull request #166 from makeopensource/task-105-fixing-styling-e…
Browse files Browse the repository at this point in the history 
…ach-page-on-course-website

Task 105 fixing styling each page on course website
  • Loading branch information
@jessehartloff
jessehartloff authored Oct 29, 2024
2 parents abdf79f + dfe969f commit f5400cd
Show file tree
Hide file tree
Showing 13 changed files with 259 additions and 217 deletions.
9 changes: 1 addition & 8 deletions devU-client/src/components/listItems/simpleAssignmentListItem.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,14 +4,10 @@
padding: 10px;
display: flex;
flex-direction: row;

border-radius: 0.6rem;

justify-content: space-between;

transition: background-color 0.2s linear;


color:$primary;
}

.meta {
Expand Down Expand Up @@ -46,9 +42,6 @@


border-radius: 0.6rem;



transition: background-color 0.2s linear;

color: #52468A;
Expand Down
30 changes: 14 additions & 16 deletions devU-client/src/components/listItems/userCourseListItem.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,15 @@
font-size: 1.2rem;
font-weight: 600;
margin: 0;
padding: 15px; /* Add padding to the text inside the name block */
background: #b5acdd; /* Background color for the name area */
width: 100%; /* Make sure it spans the entire width of the card */
padding: 30px; /* Add padding to the text inside the name block */
background: $primary;
width: 100%;
text-align: center;
color: #52468a;
color: $text-color;
border-radius: 5px 5px 0 0;
box-sizing: border-box;
text-overflow: ellipsis;
overflow-wrap: break-word;
}

.No_assignments
Expand All @@ -23,23 +25,24 @@
font-size: 12px;
font-weight: 600;
border-radius:5px;
padding: 10px;
padding: 30px;
flex-wrap: wrap;
color:#52468A;
color:$primary;
text-overflow: ellipsis;
overflow-wrap: break-word;
}
.Buttons{
display: flex;
justify-content: space-between;
padding: 15px;
justify-content: space-around;
margin-top: auto;
padding:10px;
}
.gradebook_button ,.coursepage_button {
border: 0;
color: #52468A;
color: $primary;
background: none;
font-weight: 600;
margin-left: 15px;
padding: 10px;
cursor: pointer;
}

Expand All @@ -51,7 +54,7 @@

.subText {
font-size: 1rem;
display: grid;
display: inline-block;
justify-content: space-between;
gap: 1.5rem;
width: 100%;
Expand Down Expand Up @@ -81,12 +84,7 @@
text-decoration: none;

border-radius: 0.6rem;

padding: 5px;

margin-bottom: 1rem;


color: $text-color;

}
Expand Down
35 changes: 20 additions & 15 deletions devU-client/src/components/pages/assignments/assignmentDetailPage.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,13 +20,13 @@
.line {
border: none;
height: 2px;
background-color: #ccc;
background-color: $list-item-background;
width: 100%;
margin-top: 10px;
}

.card {
background-color: #f9f9f9;
background-color: $list-item-background;
border-radius: 8px;
padding: 20px;
width: 300px;
Expand All @@ -39,7 +39,7 @@
font-size: 20px;
font-weight: 550;
margin-bottom: 15px;
color: #52468a;
color: $text-color;
text-align: center;
}

Expand All @@ -64,8 +64,8 @@


.buttons {
color: #52468a;
background-color: #f9f9f9;
color: $primary;
background-color: $list-item-background;
padding: 10px 20px;
border-radius:15px;
cursor: pointer;
Expand All @@ -78,12 +78,12 @@


.buttons:hover {
background-color: #888;
background-color: $list-item-background-hover;

}

.assignment_card {
background-color: #f9f9f9;
background-color: $list-item-background;
border-radius: 8px;
padding: 20px;
width: 100%;
Expand All @@ -92,14 +92,14 @@
}

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

.accordionDetails {
background-color: #f9f9f9;
background-color:$list-item-background;
padding: 10px;
border-top: 1px solid #ddd;
}
Expand All @@ -112,14 +112,17 @@
justify-content: center;
align-items: center;
margin-top: 20px;
background-color: $list-item-background;
}

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

.submissionCard {
margin-bottom : 15px;
background-color: $list-item-background;
}

.fileInput {
Expand All @@ -128,7 +131,7 @@

.due_date {
font-size: 14px;
color: #888;
color: $text-color;
margin-top: 5px;
margin-bottom: 15px;
}
Expand All @@ -137,6 +140,7 @@
.submissionsContainer {
display: flex;
flex-direction: column;
padding: 30px;
width: 100%;
margin-top: 20px;
}
Expand All @@ -146,27 +150,28 @@
display: flex;
justify-content: space-between;
align-items: flex-start;
background-color: #f9f9f9;
background-color: $list-item-background;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
transition: transform 0.2s ease;
padding: 10px;
}

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

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


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

@media (max-width: 768px) {
Expand Down
45 changes: 23 additions & 22 deletions devU-client/src/components/pages/assignments/assignmentDetailPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,9 @@ import LoadingOverlay from 'components/shared/loaders/loadingOverlay'
import {useActionless, useAppSelector} from 'redux/hooks'
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 Card from '@mui/material/Card'
//import CardContent from '@mui/material/CardContent'
import {/*Accordion AccordionDetails, AccordionSummary*/ TextField, Typography} from '@mui/material'

import Grid from '@mui/material/Unstable_Grid2'

Expand Down Expand Up @@ -187,30 +187,31 @@ const AssignmentDetailPage = () => {


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

{assignment?.dueDate && (
<Typography className={styles.due_date}>{`Due Date: ${new Date(assignment.dueDate).toLocaleDateString()}`}</Typography>
)}
{assignmentProblems && assignmentProblems.length > 0 ? (
assignmentProblems.map((assignment, index) => (
<Accordion className={styles.accordion} key={index}>
<AccordionSummary>
<Typography className={styles.accordionDetails}>{`Assignment Problem ${index + 1}`}</Typography>
</AccordionSummary>
<AccordionDetails className={styles.accordionDetails}>
<div className={styles.accordion} key={index}>
<div>
<div className={styles.accordionDetails}>{`Assignment Problem ${index + 1}`}</div>
</div>
<div className={styles.accordionDetails}>
<Typography>{assignment.problemName}</Typography>
<TextField id={assignment.problemName} fullWidth className={styles.textField} variant='outlined' label='Answer' onChange={handleChange}></TextField>
</AccordionDetails>
</Accordion>
</div>
</div>
))

) : (
<CardContent>
<div>
<Typography>No Problems Exist</Typography>
</CardContent>
</div>
)}

{!(assignment?.disableHandins) && (<input type="file" className={styles.fileInput} onChange={handleFileChange} />)}
Expand All @@ -220,7 +221,7 @@ const AssignmentDetailPage = () => {
<button className={styles.buttons} onClick={handleSubmit}>Submit</button>
</div>
) : null}
</Card>
</div>
</Grid>
</div>

Expand All @@ -233,16 +234,16 @@ const AssignmentDetailPage = () => {
<div>
<div className={styles.submissionsContainer}>
{submissions.map((submission, index) => (
<Card className={styles.submissionCard} key={index}>
<CardActionArea onClick={() => {
<div className={styles.submissionCard} key={index}>
<div onClick={() => {
history.push(`/course/${courseId}/assignment/${assignmentId}/submission/${submission.id}`)
}}>
<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 className={styles.submissionHeading}>{`Submission ${submissions.length - index}`}</div>
<div className={styles.submissionTime}>{`Submitted at: ${submission.createdAt && prettyPrintDateTime(submission.createdAt)}`}</div>
</div>
</div>
</div>
))}
</div>
</div>
Expand Down
Loading

0 comments on commit f5400cd

Please sign in to comment.