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

Style markdown component, competitionPage and Administration pages #289

Merged
merged 15 commits into from
Dec 10, 2023
Merged

Style markdown component, competitionPage and Administration pages #289

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
79d6972
Add typography to competition page
vikibrezinova Dec 9, 2023
c9d3d1f
fix typography
vikibrezinova Dec 9, 2023
10a0de7
fix typography in competition
vikibrezinova Dec 9, 2023
0c0fdcd
add typography to react component
vikibrezinova Dec 9, 2023
81730a6
add typography to texts
vikibrezinova Dec 9, 2023
8d116fe
add typography to administration
vikibrezinova Dec 9, 2023
96f9abc
add div to typography component
vikibrezinova Dec 9, 2023
83164b2
add paddings
vikibrezinova Dec 9, 2023
e4e828c
add to competition page
vikibrezinova Dec 9, 2023
b2f8312
add lists render
vikibrezinova Dec 9, 2023
e1521a0
remove ul from markdown
vikibrezinova Dec 9, 2023
88da679
Improve design on Semester administration
Matushl Dec 9, 2023
c9ddfad
Improve styles on CompetitionPage
Matushl Dec 10, 2023
ecc89d2
Improve markdown styles
Matushl Dec 10, 2023
134f64e
Add new styles to markdown
Matushl Dec 10, 2023
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
152 changes: 82 additions & 70 deletions src/components/CompetitionPage/CompetitionPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,12 @@
import {Stack, Typography} from '@mui/material'
import {useRouter} from 'next/router'
import {FC, Fragment} from 'react'
import {FC} from 'react'

import {Link} from '@/components/Clickable/Link'
import {Competition, Event} from '@/types/api/competition'
import {BannerContainer} from '@/utils/BannerContainer'
import {formatDateTime} from '@/utils/formatDate'

import styles from './competition.module.scss'

type OurCompetition = Omit<Competition, 'history_events'> & {history_events: Event[]}

type CompetitionPageProps = {
Expand All @@ -27,81 +26,94 @@ export const CompetitionPage: FC<CompetitionPageProps> = ({
const rulesLink = `${router.asPath}/pravidla`

return (
<>
<div className={styles.mainText}>
{who_can_participate && <p>Pre koho? {who_can_participate}</p>}
<p>{description}</p>
</div>
<div className={styles.mainText}>
<Stack gap={3}>
{who_can_participate && <Typography variant="body1">Súťaž je určená pre {who_can_participate}</Typography>}

{description && <Typography variant="body1">{description}</Typography>}

<Stack alignSelf="center">
<Link variant="button2" href={rulesLink}>
Pravidlá
</Link>
</Stack>

<Stack gap={2}>
<Typography variant="h2">Nadchádzajúci ročník</Typography>
{upcoming_or_current_event ? (
<div className={styles.mainText}>
<p>
<b>Nadchádzajúci ročník:</b>
</p>
{startDate && <p>Odkedy? {startDate} </p>}
{endDate && <p>Dokedy? {endDate}</p>}
<Stack gap={1}>
{startDate && (
<Typography variant="body1">
<b>Od:</b> {startDate}
</Typography>
)}
{endDate && (
<Typography variant="body1">
<b>Do:</b> {endDate}
</Typography>
)}
{upcoming_or_current_event.publication_set.length > 0 && (
<p>
<Link href={`/api/${upcoming_or_current_event.publication_set[0].file}`}>Pozvánka</Link>
</p>
<Stack alignSelf="center">
<Link variant="button2" href={`/api/${upcoming_or_current_event.publication_set[0].file}`}>
Pozvánka
</Link>
</Stack>
)}
<Stack alignSelf="center">
<Link variant="button2" href={`/api/`}>
Pozvánka
</Link>
</Stack>
{upcoming_or_current_event.registration_link && (
<div>
<p>
Registrácia prebieha do:
{upcoming_or_current_event.registration_link.end}
<Link href={upcoming_or_current_event.registration_link.url}>Registračný formulár</Link>
</p>

<p>{upcoming_or_current_event.registration_link.additional_info}</p>
</div>
<>
<Typography variant="body1">
<b>Registrácia prebieha do:</b> {formatDateTime(upcoming_or_current_event.registration_link.end)}
</Typography>
<Stack alignSelf="center">
<Link variant="button2" href={upcoming_or_current_event.registration_link.url}>
Registračný formulár
</Link>
</Stack>
<Typography variant="body1">{upcoming_or_current_event.registration_link.additional_info}</Typography>
</>
)}
</div>
</Stack>
) : (
<p>
<b>Nadchádzajúci ročník:</b> Pripravujeme
</p>
<Typography variant="body1" sx={{marginTop: 1}}>
Pripravujeme
</Typography>
)}
</div>

<div className={styles.container}>
<div className={styles.actions}>
<div className={styles.actionButton}>
<Link href={rulesLink}>Pravidlá</Link>
</div>
</div>
</div>
</Stack>

<div className={styles.h2}>
<h2>Archív: </h2>
</div>
{/* TODO: asi zjednotit styly, neriesit with/without publications */}
{competition_type?.name === 'Tábor' ? (
<div className={styles.archiveWithoutPublications}>
{history_events.map((event) => (
<Fragment key={event.id}>
<div>
<Stack>
<Typography variant="h2">Archív</Typography>
{/* TODO: asi zjednotit styly, neriesit with/without publications */}
{competition_type?.name === 'Tábor' ? (
<Stack gap={1}>
{history_events.map((event) => (
<Typography key={event.id} variant="h3" component="span">
{name + ' '} {event.school_year}
</div>
</Fragment>
))}
</div>
) : (
<div className={styles.archiveWithPublications}>
{history_events.map((event) => (
<Fragment key={event.id}>
<div>
{name} {event.school_year}
</div>
{event.publication_set.map((publication) => (
<Link key={publication.id} href={`/api/${publication.file}`}>
{publication.name}
</Link>
))}
</Fragment>
))}
</div>
)}
</>
</Typography>
))}
</Stack>
) : (
<Stack gap={1}>
{history_events.map((event) => (
<Stack key={event.id} direction="row" gap={20}>
<Typography variant="h3" component="span">
{name} {event.school_year}
</Typography>
<Stack direction="row" gap={2}>
{event.publication_set.map((publication) => (
<Link variant="button2" key={publication.id} href={`/api/${publication.file}`}>
{publication.name}
</Link>
))}
</Stack>
</Stack>
))}
</Stack>
)}
</Stack>
</Stack>
)
}
70 changes: 0 additions & 70 deletions src/components/CompetitionPage/competition.module.scss
View file
Open in desktop

This file was deleted.

17 changes: 0 additions & 17 deletions src/components/CompetitionPage/competition.module.scss.d.ts
View file
Open in desktop

This file was deleted.

18 changes: 13 additions & 5 deletions src/components/ProblemAdministration/ProblemAdministration.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -100,16 +100,20 @@ export const ProblemAdministration: FC = () => {

return (
<div className={styles.container}>
<h2>Opravovanie {problem.order}. úlohy</h2>
<Typography variant="h2">Opravovanie {problem.order}. úlohy</Typography>

<div className={styles.rightButton}>
<Link href={`/strom/admin/opravovanie/${problem.series.semester}`}>Späť na semester</Link>
<Link variant="button2" href={`/strom/admin/opravovanie/${problem.series.semester}`}>
Späť na semester
</Link>
</div>

<Latex>{problem.text ?? 'Načítavam...'}</Latex>

<div className={styles.row}>
Vzorové riešenie:
<Typography variant="body1" component="div">
Vzorové riešenie:
</Typography>
{problem.solution_pdf ? (
<a href={problem.solution_pdf} target="_blank" rel="noreferrer" className={styles.icon}>
<FormatAlignJustify />
Expand All @@ -126,7 +130,9 @@ export const ProblemAdministration: FC = () => {
</div>

<div className={styles.rightButton}>
<Link href={`/api/competition/problem/${problemId}/download-solutions`}>Stiahnuť riešenia</Link>
<Link variant="button2" href={`/api/competition/problem/${problemId}/download-solutions`}>
Stiahnuť riešenia
</Link>
</div>

<FileDropZone
Expand Down Expand Up @@ -202,7 +208,9 @@ export const ProblemAdministration: FC = () => {
</div>

<div className={styles.rightButton}>
<Button onClick={handleSavePoints}>Uložiť body</Button>
<Button variant="button2" onClick={handleSavePoints}>
Uložiť body
</Button>
</div>
</form>
</div>
Expand Down
8 changes: 5 additions & 3 deletions src/components/PublicationUploader/PublicationUploader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import {Stack} from '@mui/material'
import {Stack, Typography} from '@mui/material'
import {useQueryClient} from '@tanstack/react-query'
import {FC} from 'react'

Expand Down Expand Up @@ -28,9 +28,11 @@ export const PublicationUploader: FC<PublicationUploaderProps> = ({semesterId, o

return (
<Stack direction="row" gap={2} alignItems="center">
<h4>{order}. Časopis:</h4>
<Typography variant="body1">{order}. Časopis:</Typography>
{publication && (
<Link href={`/api/competition/publication/${publication.id}/download`}>{publication.name}.pdf</Link>
<Link variant="button2" href={`/api/competition/publication/${publication.id}/download`}>
{publication.name}.pdf
</Link>
)}
<FileUploader
uploadLink={'/api/competition/publication/upload/'}
Expand Down
7 changes: 2 additions & 5 deletions src/components/SemesterAdministration/SemesterAdministration.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,3 @@
.actions {
margin-top: .5rem;
display: flex;
justify-content: flex-start;
column-gap: 20px;
.textarea {
width: 100%;
}
2 changes: 1 addition & 1 deletion src/components/SemesterAdministration/SemesterAdministration.module.scss.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
export type Styles = {
actions: string
textarea: string
}

export type ClassNames = keyof Styles
Expand Down
Loading
Loading