Skip to content

Commit

Permalink
Improve styles on CompetitionPage
Browse files Browse the repository at this point in the history
  • Loading branch information
@Matushl
Matushl committed Dec 10, 2023
1 parent 88da679 commit c9ddfad
Show file tree
Hide file tree
Showing 3 changed files with 69 additions and 172 deletions.
154 changes: 69 additions & 85 deletions src/components/CompetitionPage/CompetitionPage.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,12 @@
import {Typography} from '@mui/material'
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 @@ -28,108 +26,94 @@ export const CompetitionPage: FC<CompetitionPageProps> = ({
const rulesLink = `${router.asPath}/pravidla`

return (
<>
<div className={styles.mainText}>
{who_can_participate && (
<div className={styles.mainText}>
<Typography variant="body1" sx={{marginTop: 1}} component="div">
Pre koho? {who_can_participate}
</Typography>
<Typography variant="body1" sx={{marginTop: 1}} component="div">
{description}
</Typography>
</div>
)}
</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}>
<Typography variant="body1" sx={{marginTop: 1}} fontWeight="bold" component="div">
Nadchádzajúci ročník:
</Typography>
<Stack gap={1}>
{startDate && (
<Typography variant="body1" sx={{marginTop: 1}} component="div">
Odkedy? {startDate}
<Typography variant="body1">
<b>Od:</b> {startDate}
</Typography>
)}
{endDate && (
<Typography variant="body1" sx={{marginTop: 1}} component="div">
Dokedy? {endDate}
<Typography variant="body1">
<b>Do:</b> {endDate}
</Typography>
)}
{upcoming_or_current_event.publication_set.length > 0 && (
<Typography variant="body1" sx={{marginTop: 1}}>
<Stack alignSelf="center">
<Link variant="button2" href={`/api/${upcoming_or_current_event.publication_set[0].file}`}>
Pozvánka
</Link>
</Typography>
</Stack>
)}
<Stack alignSelf="center">
<Link variant="button2" href={`/api/`}>
Pozvánka
</Link>
</Stack>
{upcoming_or_current_event.registration_link && (
<div className={styles.mainText}>
<Typography variant="body1" sx={{marginTop: 1}} component="div">
Registrácia prebieha do:
{upcoming_or_current_event.registration_link.end}
<>
<Typography variant="body1">
<b>Registrácia prebieha do:</b> {formatDateTime(upcoming_or_current_event.registration_link.end)}
</Typography>
<Typography variant="body1" sx={{marginTop: 1}} component="div">
<Stack alignSelf="center">
<Link variant="button2" href={upcoming_or_current_event.registration_link.url}>
Registračný formulár
</Link>
</Typography>
<Typography variant="body1" sx={{marginTop: 1}} component="div">
{upcoming_or_current_event.registration_link.additional_info}
</Typography>
</div>
</Stack>
<Typography variant="body1">{upcoming_or_current_event.registration_link.additional_info}</Typography>
</>
)}
</div>
</Stack>
) : (
<div className={styles.mainText}>
<Typography variant="body1" sx={{marginTop: 1}}>
Nadchádzajúci ročník: Pripravujeme
</Typography>
</div>
<Typography variant="body1" sx={{marginTop: 1}}>
Pripravujeme
</Typography>
)}
</div>

<div className={styles.mainText}>
<Typography variant="body1" sx={{marginTop: 1}}>
<Link variant="button2" href={rulesLink}>
Pravidlá
</Link>
</Typography>
</div>
</Stack>

<div>
<Typography variant="h2" sx={{marginTop: 5}}>
Archív:
</Typography>
</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 variant="button2" 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

This file was deleted.

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

This file was deleted.

0 comments on commit c9ddfad

Please sign in to comment.