Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

157 Frontend Style Fixes #158

Merged
merged 13 commits into from
May 18, 2024
Merged

157 Frontend Style Fixes #158

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
0e9640f
init commit
gilles-arnout May 9, 2024
bee80e9
Merge branch '140-project-submit-page' of https://github.com/SELab-2/…
gilles-arnout May 9, 2024
b8267e9
fix to layout submit page
gilles-arnout May 9, 2024
1844a00
fix to layout submission page
gilles-arnout May 9, 2024
8da5433
margin fixes
gilles-arnout May 9, 2024
741f705
add text to listviews
gilles-arnout May 9, 2024
6299bea
all course page styling
gilles-arnout May 9, 2024
f80e597
adding linearProgress to edit project
gilles-arnout May 9, 2024
86004b3
fixing infinite loading error in project add page
gilles-arnout May 9, 2024
1a9e2ff
Merge branch 'develop' of https://github.com/SELab-2/UGent-1 into 157…
gilles-arnout May 13, 2024
60e5f90
temp push
gilles-arnout May 13, 2024
a6f6f80
layout fixes after layout.tsx changes
gilles-arnout May 13, 2024
7a84758
Merge branch 'develop' into 157-frontend-style-fixes
PJDeSmijter May 18, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion Makefile
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,8 @@ lint:
docker exec pigeonhole-frontend npm run lint

superuser:
docker exec -it pigeonhole-backend python manage.py createsuperuser



mockdata:
docker exec -it pigeonhole-backend python manage.py runscript mockdata
Expand Down
320 changes: 161 additions & 159 deletions frontend/app/[locale]/components/EditCourseForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,10 @@ import React, {useEffect, useState} from "react";
import {useTranslation} from "react-i18next";
import {getCourse, getImage, postData, updateCourse} from "@lib/api";
import Typography from "@mui/material/Typography";
import {Box, Button, Input, MenuItem, Select, TextField } from "@mui/material";
import {Box, Button, Input, LinearProgress, MenuItem, Select, TextField} from "@mui/material";
import {LocalizationProvider} from "@mui/x-date-pickers/LocalizationProvider";
import {AdapterDayjs} from "@mui/x-date-pickers/AdapterDayjs";
import { DatePicker } from '@mui/x-date-pickers/DatePicker';
import {DatePicker} from '@mui/x-date-pickers/DatePicker';
import {visuallyHidden} from '@mui/utils';
import UploadFileIcon from '@mui/icons-material/UploadFile';
import dayjs from "dayjs";
Expand Down Expand Up @@ -85,178 +85,180 @@ const EditCourseForm = ({courseId}: EditCourseFormProps) => {
setSelectedImageURL(imageURL);
};

if (loading) {
return <LinearProgress/>;
}

return (
loading ? (<div>Loading...</div>) : (
<Box
component={"form"}
onSubmit={handleSubmit}
sx={{
display: 'flex',
flexDirection: 'column',
justifyContent: 'space-evenly',
flexWrap: 'no-wrap',
height: 'fit-content',
width: '100%',
}}
>
<Box
component={"form"}
onSubmit={handleSubmit}
sx={{
display: 'flex',
flexDirection: 'column',
justifyContent: 'space-evenly',
flexWrap: 'no-wrap',
height: 'fit-content',
width: '100%',
}}
height={'fit-content'}
>
<Box
height={'fit-content'}
<Typography
variant="h3"
>
<Typography
variant="h3"
>
{t("course name")}
</Typography>
<TextField
type="text"
id="name"
name="name"
defaultValue={name}
onChange={(event: any) => setName(event.target.value)}
required
style={{
fontSize: '20px',
fontFamily: 'Quicksand, sans-serif',
borderRadius: '6px',
height: '30px',
width: '400px',
marginBottom: '32px'
{t("course name")}
</Typography>
<TextField
type="text"
id="name"
name="name"
defaultValue={name}
onChange={(event: any) => setName(event.target.value)}
required
style={{
fontSize: '20px',
fontFamily: 'Quicksand, sans-serif',
borderRadius: '6px',
height: '30px',
width: '400px',
marginBottom: '32px'
}}/>
</Box>
<Box
height={'fit-content'}
>
<Typography variant={"h3"}>
{t("year")}
</Typography>
<LocalizationProvider dateAdapter={AdapterDayjs}>
<DatePicker
views={['year']}
value={year !== 0 ? dayjs().year(year) : null}
onChange={(date: any) => setYear(date.year())}
sx={{
width: 'fit-content',
height: 'fit-content',
}}
/>
</LocalizationProvider>
</Box>
<Box sx={{marginTop: '32px', height: 'fit-content'}}>
<Typography
variant="h3"
>
{t("banner")}
</Typography>
<Box
borderRadius={'16px'}
sx={{position: 'relative', width: '100%', height: 'fit-content', borderRadius: '16px',}}
>
<Box
component={'img'}
alt={t('select image')}
src={selectedImageURL}
sx={{
borderRadius: '16px',
height: 'fit-content',
maxHeight: '200px',
width: '100%'
}}
/>
</Box>
</Box>
<Box>
<Button variant={"contained"} color={"secondary"} size={'small'}
startIcon={<UploadFileIcon sx={{color: 'secondary.contrastText'}}/>}
component="label"
role={undefined}
tabIndex={-1}
sx={{
padding: 1,
width: 'fit-content',
color: 'secondary.contrastText',
marginTop: '16px'
}}
>
{t("select image")}
<Input type="file"
id="Image"
name="Image"
onChange={handleImageUpload}
style={visuallyHidden}
/>
</Button>
</Box>
<Box sx={{marginTop: '16px'}}>
<Typography
variant="h3"
>
{t("description")}
</Typography>
<TextField id="description" name="description" defaultValue={description}
label="Description"
multiline
rows={4}
onChange={(event: any) => setDescription(event.target.value)} required
style={{
width: '100%',
fontFamily: 'Quicksand',
color: 'black',
borderRadius: '6px',
padding: '10px',
boxSizing: 'border-box'
}}/>
</Box>
<Box sx={{marginTop: '16px'}}>
<Typography
variant="h3"
>
{t("access")}
</Typography>
<Select
id="choice"
name="choice"
label={t("access")}
value={open}
onChange={(event: any) => setOpen(event.target.value)}
</Box>
<Box
height={'fit-content'}
>
<Typography variant={"h3"}>
{t("year")}
</Typography>
<LocalizationProvider dateAdapter={AdapterDayjs}>
<DatePicker
views={['year']}
value={year !== 0 ? dayjs().year(year) : null}
onChange={(date: any) => setYear(date.year())}
sx={{
fontSize: '20px',
width: 'fit-content',
height: 'fit-content',
}}
>
<MenuItem value="false">{t("private")}</MenuItem>
<MenuItem value="true">{t("public")}</MenuItem>
</Select>
</Box>
/>
</LocalizationProvider>
</Box>
<Box sx={{marginTop: '32px', height: 'fit-content'}}>
<Typography
variant="h3"
>
{t("banner")}
</Typography>
<Box
display={'flex'}
sx={{marginTop: '16px', gap: 2}}
borderRadius={'16px'}
sx={{position: 'relative', width: '100%', height: 'fit-content', borderRadius: '16px',}}
>
<Button
type="submit"
color={'primary'}
<Box
component={'img'}
alt={t('select image')}
src={selectedImageURL}
sx={{
width: 'fit-content',
backgroundColor: 'primary.main',
color: 'primary.contrastText'
borderRadius: '16px',
height: 'fit-content',
maxHeight: '200px',
width: '100%'
}}
href={'/course/' + courseId + "/"}
>
{t("save changes")}
</Button>
<Button
href={'/course/' + courseId + "/"}
/>
</Box>
</Box>
<Box>
<Button variant={"contained"} color={"secondary"} size={'small'}
startIcon={<UploadFileIcon sx={{color: 'secondary.contrastText'}}/>}
component="label"
role={undefined}
tabIndex={-1}
sx={{
padding: 1,
width: 'fit-content',
backgroundColor: 'secondary.main',
color: 'secondary.contrastText'
color: 'secondary.contrastText',
marginTop: '16px'
}}
>
{t("cancel")}
</Button>
</Box>
>
{t("select image")}
<Input type="file"
id="Image"
name="Image"
onChange={handleImageUpload}
style={visuallyHidden}
/>
</Button>
</Box>
));

<Box sx={{marginTop: '16px'}}>
<Typography
variant="h3"
>
{t("description")}
</Typography>
<TextField id="description" name="description" defaultValue={description}
label="Description"
multiline
rows={4}
onChange={(event: any) => setDescription(event.target.value)} required
style={{
width: '100%',
fontFamily: 'Quicksand',
color: 'black',
borderRadius: '6px',
padding: '10px',
boxSizing: 'border-box'
}}/>
</Box>
<Box sx={{marginTop: '16px'}}>
<Typography
variant="h3"
>
{t("access")}
</Typography>
<Select
id="choice"
name="choice"
label={t("access")}
value={open}
onChange={(event: any) => setOpen(event.target.value)}
sx={{
fontSize: '20px',
height: 'fit-content',
}}
>
<MenuItem value="false">{t("private")}</MenuItem>
<MenuItem value="true">{t("public")}</MenuItem>
</Select>
</Box>
<Box
display={'flex'}
sx={{marginTop: '16px', gap: 2}}
>
<Button
type="submit"
color={'primary'}
sx={{
width: 'fit-content',
backgroundColor: 'primary.main',
color: 'primary.contrastText'
}}
href={'/course/' + courseId + "/"}
>
{t("save changes")}
</Button>
<Button
href={'/course/' + courseId + "/"}
sx={{
width: 'fit-content',
backgroundColor: 'secondary.main',
color: 'secondary.contrastText'
}}
>
{t("cancel")}
</Button>
</Box>
</Box>
);
}

export default EditCourseForm
export default EditCourseForm
6 changes: 4 additions & 2 deletions frontend/app/[locale]/components/GroupSubmissionList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,10 @@
import ListView from "@app/[locale]/components/ListView";
import React from "react";

const GroupSubmissionList = ({project_id, page_size = 5}: {
const GroupSubmissionList = ({project_id, page_size = 5, search}: {
project_id: number,
page_size: number
page_size: number,
search: string
}) => {
const headers = ["Group number", "Submission date", "Status", "View"]
const headers_backend = ["group_nr", "submission_date", "status", "View"]
Expand All @@ -21,6 +22,7 @@ const GroupSubmissionList = ({project_id, page_size = 5}: {
action_name={'download_submission'}
page_size={page_size}
headers_backend={headers_backend}
search_text={search}
/>

)
Expand Down
Loading
Loading