From 02685a75f82d54c797937148af79c9a199f661ce Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Vikt=C3=B3ria=20Brezinov=C3=A1?= <52294703+vikibrezinova@users.noreply.github.com> Date: Sun, 10 Dec 2023 11:21:59 +0100 Subject: [PATCH] Style markdown component, competitionPage and Administration pages (#289) * Add typography to competition page * fix typography * fix typography in competition * add typography to react component * add typography to texts * add typography to administration * add div to typography component * add paddings * add to competition page * add lists render * remove ul from markdown * Improve design on Semester administration * Improve styles on CompetitionPage * Improve markdown styles * Add new styles to markdown --------- Co-authored-by: matushl --- .../CompetitionPage/CompetitionPage.tsx | 152 ++++++++++-------- .../CompetitionPage/competition.module.scss | 70 -------- .../competition.module.scss.d.ts | 17 -- .../ProblemAdministration.tsx | 18 ++- .../PublicationUploader.tsx | 8 +- .../SemesterAdministration.module.scss | 7 +- .../SemesterAdministration.module.scss.d.ts | 2 +- .../SemesterAdministration.tsx | 129 +++++++++------ src/components/StaticSites/Markdown.tsx | 11 +- src/components/StaticSites/Texts.module.scss | 12 +- .../StaticSites/Texts.module.scss.d.ts | 2 - src/components/StaticSites/Texts.tsx | 70 +++++++- 12 files changed, 255 insertions(+), 243 deletions(-) delete mode 100644 src/components/CompetitionPage/competition.module.scss delete mode 100644 src/components/CompetitionPage/competition.module.scss.d.ts diff --git a/src/components/CompetitionPage/CompetitionPage.tsx b/src/components/CompetitionPage/CompetitionPage.tsx index 42b05882..b10556cd 100644 --- a/src/components/CompetitionPage/CompetitionPage.tsx +++ b/src/components/CompetitionPage/CompetitionPage.tsx @@ -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 & {history_events: Event[]} type CompetitionPageProps = { @@ -27,81 +26,94 @@ export const CompetitionPage: FC = ({ const rulesLink = `${router.asPath}/pravidla` return ( - <> -
- {who_can_participate &&

Pre koho? {who_can_participate}

} -

{description}

-
-
+ + {who_can_participate && Súťaž je určená pre {who_can_participate}} + + {description && {description}} + + + + Pravidlá + + + + + Nadchádzajúci ročník {upcoming_or_current_event ? ( -
-

- Nadchádzajúci ročník: -

- {startDate &&

Odkedy? {startDate}

} - {endDate &&

Dokedy? {endDate}

} + + {startDate && ( + + Od: {startDate} + + )} + {endDate && ( + + Do: {endDate} + + )} {upcoming_or_current_event.publication_set.length > 0 && ( -

- Pozvánka -

+ + + Pozvánka + + )} + + + Pozvánka + + {upcoming_or_current_event.registration_link && ( -
-

- Registrácia prebieha do: - {upcoming_or_current_event.registration_link.end} - Registračný formulár -

- -

{upcoming_or_current_event.registration_link.additional_info}

-
+ <> + + Registrácia prebieha do: {formatDateTime(upcoming_or_current_event.registration_link.end)} + + + + Registračný formulár + + + {upcoming_or_current_event.registration_link.additional_info} + )} -
+ ) : ( -

- Nadchádzajúci ročník: Pripravujeme -

+ + Pripravujeme + )} -
- -
-
-
- Pravidlá -
-
-
+ -
-

Archív:

-
- {/* TODO: asi zjednotit styly, neriesit with/without publications */} - {competition_type?.name === 'Tábor' ? ( -
- {history_events.map((event) => ( - -
+ + Archív + {/* TODO: asi zjednotit styly, neriesit with/without publications */} + {competition_type?.name === 'Tábor' ? ( + + {history_events.map((event) => ( + {name + ' '} {event.school_year} -
- - ))} -
- ) : ( -
- {history_events.map((event) => ( - -
- {name} {event.school_year} -
- {event.publication_set.map((publication) => ( - - {publication.name} - - ))} - - ))} -
- )} - + + ))} + + ) : ( + + {history_events.map((event) => ( + + + {name} {event.school_year} + + + {event.publication_set.map((publication) => ( + + {publication.name} + + ))} + + + ))} + + )} + + ) } diff --git a/src/components/CompetitionPage/competition.module.scss b/src/components/CompetitionPage/competition.module.scss deleted file mode 100644 index 7911683a..00000000 --- a/src/components/CompetitionPage/competition.module.scss +++ /dev/null @@ -1,70 +0,0 @@ - .mainText{ - >p{ - padding: 20px; - } - } - - .h2{ - padding-top: 40px; - padding: 20px; - } - - .container { - display: grid; - grid-gap: 0px; - margin: -20px; - padding-top: 20px; -} - - .actions{ - margin-top: .5rem; - display: flex; - justify-content: flex-end; - } - - .actionButton, .commentActions>span{ - cursor: pointer; - font-size: 30px; - font-style: italic; - font-weight: bold; - margin-left: 40px; - user-select: none; - text-transform: uppercase; - - - &.disabled{ - color: #CCC; - border-color: #CCC; - } - } - - .archiveWithPublications{ - display: grid; - width: 50%; - grid-template-columns: 1fr max-content max-content; - font-weight: bold; - text-transform: uppercase; - margin-top: 10px; - font-style: italic; - row-gap: 10px; - margin-left: 20px; - - div:not(:nth-child(3n+1)){ - margin-left: 20px; - border-bottom: 4px solid black; - } - - div:nth-child(3n+1){ - font-size: 1.2rem; - } - } - - .archiveWithoutPublications{ - font-weight: bold; - text-transform: uppercase; - margin-top: 10px; - font-style: italic; - row-gap: 10px; - margin-left: 20px; - font-size: 1.2rem; - } \ No newline at end of file diff --git a/src/components/CompetitionPage/competition.module.scss.d.ts b/src/components/CompetitionPage/competition.module.scss.d.ts deleted file mode 100644 index 0409c32b..00000000 --- a/src/components/CompetitionPage/competition.module.scss.d.ts +++ /dev/null @@ -1,17 +0,0 @@ -export type Styles = { - actionButton: string - actions: string - archiveWithoutPublications: string - archiveWithPublications: string - commentActions: string - container: string - disabled: string - h2: string - mainText: string -} - -export type ClassNames = keyof Styles - -declare const styles: Styles - -export default styles diff --git a/src/components/ProblemAdministration/ProblemAdministration.tsx b/src/components/ProblemAdministration/ProblemAdministration.tsx index 025c6f70..fb58c232 100644 --- a/src/components/ProblemAdministration/ProblemAdministration.tsx +++ b/src/components/ProblemAdministration/ProblemAdministration.tsx @@ -100,16 +100,20 @@ export const ProblemAdministration: FC = () => { return (
-

Opravovanie {problem.order}. úlohy

+ Opravovanie {problem.order}. úlohy
- Späť na semester + + Späť na semester +
{problem.text ?? 'Načítavam...'}
- Vzorové riešenie: + + Vzorové riešenie: + {problem.solution_pdf ? ( @@ -126,7 +130,9 @@ export const ProblemAdministration: FC = () => {
- Stiahnuť riešenia + + Stiahnuť riešenia +
{
- +
diff --git a/src/components/PublicationUploader/PublicationUploader.tsx b/src/components/PublicationUploader/PublicationUploader.tsx index 4b3cddb8..012e02a2 100644 --- a/src/components/PublicationUploader/PublicationUploader.tsx +++ b/src/components/PublicationUploader/PublicationUploader.tsx @@ -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' @@ -28,9 +28,11 @@ export const PublicationUploader: FC = ({semesterId, o return ( -

{order}. Časopis:

+ {order}. Časopis: {publication && ( - {publication.name}.pdf + + {publication.name}.pdf + )} { if (permissionsIsLoading || semesterIsLoading) return if (!hasPermissions) return Nemáš oprávnenie na zobrazenie tejto stránky. if (semesterId === undefined || !semester) - return Nevalidný semester (semesterId) v URL alebo ho proste nevieme fetchnúť z BE. + return ( + + Nevalidný semester (semesterId) v URL alebo ho proste nevieme fetchnúť z BE. + + ) return ( <> -

+ {semester.year}. ročník ({semester.school_year}) - {semester.season_code === 0 ? 'zima' : 'leto'} -

- Administrácia semestra pre opravovateľov. + + Administrácia semestra pre opravovateľov. {semester.series_set.map((series) => ( -
-

{series.order}. séria

- - - - - - - - - -
Termín série:{series.deadline}
- -
-

Opravovanie úloh:

- {series?.problems.map((problem) => ( -
- {problem.order}. úloha -
- ))} -
+ + {series.order}. séria + + Opravovanie úloh: + + Termín série: {formatDateTime(series.deadline)} + + + + {series?.problems.map((problem) => ( + + {problem.order}. úloha + + ))} + + ))} -

Generovanie dát

-
+ + + Generovanie poradia + + {[...semester.series_set].reverse().map((series) => ( -
- -
+ ))} - -
-
- - - Zoznam riešiteľov -
-
- - -
- {textareaContent ? ( -
-