Skip to content

Commit

Permalink
done visuals
Browse files Browse the repository at this point in the history
  • Loading branch information
@friedrecursion
friedrecursion committed May 19, 2024
1 parent 40ee204 commit 4dc8e36
Show file tree
Hide file tree
Showing 11 changed files with 413 additions and 371 deletions.
7 changes: 5 additions & 2 deletions frontend/frontend/src/components/CopyToClipboard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { Box, Collapse, Tooltip, Typography } from '@mui/material'
import { Button } from './CustomComponents.tsx'
import { AssignmentTurnedIn, ContentPaste } from '@mui/icons-material'
import { t } from 'i18next'
import theme from "../Theme.ts";
import theme from '../Theme.ts'

interface CopyToClipboardProps {
invitationLink: string
Expand Down Expand Up @@ -57,7 +57,10 @@ export const CopyToClipboard = ({ invitationLink }: CopyToClipboardProps) => {
padding: 0,
gap: 1,
'&:hover': {
backgroundColor: darken(theme.palette.secondary.main,0.2)
backgroundColor: darken(
theme.palette.secondary.main,
0.2
),
},
}}
>
Expand Down
14 changes: 8 additions & 6 deletions frontend/frontend/src/components/CustomComponents.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -90,7 +90,7 @@ interface CustomDividerProps extends DividerProps {
children?: ReactNode
}

export const Divider = ({ children, ...props }: CustomCardProps) => {
export const Divider = ({ children, ...props }: CustomDividerProps) => {
return (
<BaseDivider
sx={{
Expand All @@ -104,7 +104,6 @@ export const Divider = ({ children, ...props }: CustomCardProps) => {
)
}


interface EvenlySpacedRowProps {
items: ReactNode[]
}
Expand All @@ -116,10 +115,13 @@ export const EvenlySpacedRow = ({ items }: EvenlySpacedRowProps) => {
<Box
key={index}
width={
index == 0 || index == items.length - 1
? 50 / items.length + '%'
: (100 - 100 / items.length) / (items.length - 2) +
'%'
items.length == 2
? '50%'
: index == 0 || index == items.length - 1
? 50 / items.length + '%'
: (100 - 100 / items.length) /
(items.length - 2) +
'%'
}
sx={{
//border: '1px solid red',
Expand Down
1 change: 0 additions & 1 deletion frontend/frontend/src/components/DeadlineCalendar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,6 @@ import {
SxProps,
Stack,
Typography,
Box,
List,
ListItem,
ListItemButton,
Expand Down
2 changes: 0 additions & 2 deletions frontend/frontend/src/i18n/en.ts
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,3 @@
import {t} from "i18next";

const english = {
logo: '/assets/logo_UGent_EN_RGB_2400_white.png',
logo_blue: '/assets/logo_UGent_EN_RGB_2400_color.png',
Expand Down
209 changes: 112 additions & 97 deletions frontend/frontend/src/pages/groupsPage/ChooseGroup.tsx
View file

Large diffs are not rendered by default.

21 changes: 15 additions & 6 deletions frontend/frontend/src/pages/scoresPage/ProjectScoresPage.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { Header } from '../../components/Header'
import {Button, Card, SecondaryButton} from '../../components/CustomComponents.tsx'
import { Card, SecondaryButton } from '../../components/CustomComponents.tsx'
import {
Box,
CircularProgress,
Expand Down Expand Up @@ -372,11 +372,15 @@ export function ProjectScoresPage() {
spacing={2}
marginY={6}
>
<SecondaryButton onClick={exportSubmissions}>
<SecondaryButton
onClick={exportSubmissions}
>
{t('export_submissions')}
</SecondaryButton>

<SecondaryButton variant={'contained'}>
<SecondaryButton
variant={'contained'}
>
{t('upload_scores')}
<VisuallyHiddenInput
type="file"
Expand All @@ -392,7 +396,11 @@ export function ProjectScoresPage() {
display="flex"
flexDirection="row-reverse"
padding={'3px'}
sx={{ width: '50%', height: '40px', marginTop: 6 }}
sx={{
width: '50%',
height: '40px',
marginTop: 6,
}}
>
{loading ? (
<Skeleton
Expand All @@ -413,15 +421,16 @@ export function ProjectScoresPage() {
'&:hover': {
color: 'text.primary',
},
backgroundColor: 'primary.main',
backgroundColor:
'primary.main',
borderRadius: 2,
}}
>
<SaveIcon />
</IconButton>
</>
)}
<Box paddingLeft={'10px'}/>
<Box paddingLeft={'10px'} />
<IconButton
onClick={() =>
setOpenDeleteScoresPopup(true)
Expand Down
130 changes: 72 additions & 58 deletions frontend/frontend/src/pages/scoresPage/StudentScoreListItem.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import {Divider, EvenlySpacedRow} from '../../components/CustomComponents.tsx'
import { Divider, EvenlySpacedRow } from '../../components/CustomComponents.tsx'
import {
CircularProgress,
ListItemIcon,
Expand Down Expand Up @@ -103,63 +103,77 @@ export function StudentScoreListItem({
{loading ? (
<CircularProgress size={20} color={'primary'} />
) : (
<EvenlySpacedRow items={[
<ListItemText
sx={{ maxWidth: 200 }}
primary={name}
/>,
<ListItemText
primary={
lastSubmission
? t('last_submission') +
' ' +
dayjs(lastSubmission.tijdstip).format(
'DD/MM/YYYY HH:mm'
)
: t('no_submissions')
}
/>,
<ListItem>
{lastSubmission ? (
<>
<Box width={'24px'} height={'25px'}>
<TextField
hiddenLabel
defaultValue={score}
onChange={(event) =>
changeScore(
parseInt(event.target.value)
)
}
variant="standard"
size="small"
/>
</Box>
<ListItemText primary={'/' + maxScore} />
</>
) : (
<ListItemText primary={'0/' + maxScore} />
)}
</ListItem>,
<ListItemText >
<ListItemIcon>
<div onClick={downloadSubmission}>
{lastSubmission ? (
<DownloadIcon
sx={{
color: 'primary.main',
'&:hover': {
color: 'primary.light',
},
}}
/>
) : (
<DownloadIcon sx={{ color: 'gray' }} />
)}
</div>
</ListItemIcon>
</ListItemText>]}
/>
<EvenlySpacedRow
items={[
<ListItemText
sx={{ maxWidth: 200 }}
primary={name}
/>,
<ListItemText
primary={
lastSubmission
? t('last_submission') +
' ' +
dayjs(
lastSubmission.tijdstip
).format('DD/MM/YYYY HH:mm')
: t('no_submissions')
}
/>,
<ListItem>
{lastSubmission ? (
<>
<Box
width={'24px'}
height={'25px'}
>
<TextField
hiddenLabel
defaultValue={score}
onChange={(event) =>
changeScore(
parseInt(
event.target
.value
)
)
}
variant="standard"
size="small"
/>
</Box>
<ListItemText
primary={'/' + maxScore}
/>
</>
) : (
<ListItemText
primary={'0/' + maxScore}
/>
)}
</ListItem>,
<ListItemText>
<ListItemIcon>
<div onClick={downloadSubmission}>
{lastSubmission ? (
<DownloadIcon
sx={{
color: 'primary.main',
'&:hover': {
color: 'primary.light',
},
}}
/>
) : (
<DownloadIcon
sx={{ color: 'gray' }}
/>
)}
</div>
</ListItemIcon>
</ListItemText>,
]}
/>
)}
</>
</ListItem>
Expand Down
30 changes: 16 additions & 14 deletions frontend/frontend/src/pages/scoresPage/StudentsView.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import {Divider, EvenlySpacedRow} from '../../components/CustomComponents.tsx'
import { Divider, EvenlySpacedRow } from '../../components/CustomComponents.tsx'
import { Box, Skeleton, Typography } from '@mui/material'
import List from '@mui/material/List'
import { StudentScoreListItem } from './StudentScoreListItem.tsx'
Expand Down Expand Up @@ -121,19 +121,21 @@ export function StudentsView({
padding: 3,
}}
>
<EvenlySpacedRow items={[
<Typography variant="h5" sx={{ fontWeight: 'bold' }}>
{t('group')}
</Typography>,
<Typography variant="h5" sx={{ fontWeight: 'bold' }}>
{t('time')}
</Typography>,
<Typography variant="h5" sx={{ fontWeight: 'bold' }}>
Score
</Typography>,
<Typography variant="h5" sx={{ fontWeight: 'bold' }}>
Download
</Typography>]}
<EvenlySpacedRow
items={[
<Typography variant="h5" sx={{ fontWeight: 'bold' }}>
{t('group')}
</Typography>,
<Typography variant="h5" sx={{ fontWeight: 'bold' }}>
{t('time')}
</Typography>,
<Typography variant="h5" sx={{ fontWeight: 'bold' }}>
Score
</Typography>,
<Typography variant="h5" sx={{ fontWeight: 'bold' }}>
Download
</Typography>,
]}
/>
</Box>
<Divider color={'text.main'}></Divider>
Expand Down
Loading

0 comments on commit 4dc8e36

Please sign in to comment.