From c9a269231ce91eaa23e37adcb5a105c6d7640a66 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Richard=20Trembeck=C3=BD?= Date: Mon, 20 May 2024 23:49:05 +0200 Subject: [PATCH] 370 - Wider hover black box on ResultsRow, rework styles (#381) * fix #370 - make black hover box go from the edge of the screen * rewrite results styles --- src/components/PageLayout/PageLayout.tsx | 7 +- src/components/Results/Results.module.scss | 6 -- .../Results/Results.module.scss.d.ts | 9 --- src/components/Results/Results.tsx | 6 +- src/components/Results/ResultsRow.module.scss | 66 ------------------- .../Results/ResultsRow.module.scss.d.ts | 17 ----- src/components/Results/ResultsRow.tsx | 55 ++++++++++------ src/pages/strom/vysledky/[[...params]].tsx | 2 +- 8 files changed, 42 insertions(+), 126 deletions(-) delete mode 100644 src/components/Results/Results.module.scss delete mode 100644 src/components/Results/Results.module.scss.d.ts delete mode 100644 src/components/Results/ResultsRow.module.scss delete mode 100644 src/components/Results/ResultsRow.module.scss.d.ts diff --git a/src/components/PageLayout/PageLayout.tsx b/src/components/PageLayout/PageLayout.tsx index 9400453e..e70c54e1 100644 --- a/src/components/PageLayout/PageLayout.tsx +++ b/src/components/PageLayout/PageLayout.tsx @@ -1,4 +1,4 @@ -import {Stack} from '@mui/material' +import {Stack, SxProps} from '@mui/material' import Grid from '@mui/material/Unstable_Grid2' import Head from 'next/head' import {FC, ReactNode} from 'react' @@ -15,6 +15,7 @@ type PageLayoutProps = { contentWidth?: number title?: string children: ReactNode + sx?: SxProps } const seminarTitle: Record = { @@ -25,7 +26,7 @@ const seminarTitle: Record = { // pre pouzitie len na seminarovych strankach a podstrankach - `/matik(/*)` // ked budeme potrebovat top-level stranky ako `/ina-stranka`, budeme musiet upravit, ako sa pracuje s `useSeminarInfo` -export const PageLayout: FC = ({contentWidth = 2, title = '', children}) => { +export const PageLayout: FC = ({contentWidth = 2, title = '', children, sx}) => { const {seminar} = useSeminarInfo() const browserTitlePrefix = title && `${title} | ` const browserTitle = `${browserTitlePrefix}${seminarTitle[seminar]}` @@ -44,7 +45,7 @@ export const PageLayout: FC = ({contentWidth = 2, title = '', c - + {children} diff --git a/src/components/Results/Results.module.scss b/src/components/Results/Results.module.scss deleted file mode 100644 index 8654d6cb..00000000 --- a/src/components/Results/Results.module.scss +++ /dev/null @@ -1,6 +0,0 @@ -.results { - background-color: transparent; - display: grid; - row-gap: 10px; - grid-template-columns: max-content 1fr repeat(3, max-content); -} diff --git a/src/components/Results/Results.module.scss.d.ts b/src/components/Results/Results.module.scss.d.ts deleted file mode 100644 index ce1a207b..00000000 --- a/src/components/Results/Results.module.scss.d.ts +++ /dev/null @@ -1,9 +0,0 @@ -export type Styles = { - results: string -} - -export type ClassNames = keyof Styles - -declare const styles: Styles - -export default styles diff --git a/src/components/Results/Results.tsx b/src/components/Results/Results.tsx index 09db93e5..595df33d 100644 --- a/src/components/Results/Results.tsx +++ b/src/components/Results/Results.tsx @@ -1,3 +1,4 @@ +import {Box} from '@mui/material' import {useQuery} from '@tanstack/react-query' import axios from 'axios' import {FC, useEffect} from 'react' @@ -6,7 +7,6 @@ import {BannerContainer} from '@/utils/BannerContainer' import {useDataFromURL} from '@/utils/useDataFromURL' import {Loading} from '../Loading/Loading' -import styles from './Results.module.scss' import {Result, ResultsRow} from './ResultsRow' export const Results: FC = () => { @@ -37,11 +37,11 @@ export const Results: FC = () => { return (
{resultsIsLoading && } -
+ {results.map((result, index) => ( ))} -
+
) } diff --git a/src/components/Results/ResultsRow.module.scss b/src/components/Results/ResultsRow.module.scss deleted file mode 100644 index e89c86da..00000000 --- a/src/components/Results/ResultsRow.module.scss +++ /dev/null @@ -1,66 +0,0 @@ -.rowWrapper { - display: contents; -} - -.rowWrapper:hover > div { - background-color: #000; - color: #fff; -} - -.rank { - display: flex; - justify-content: flex-start; - align-items: center; - padding: 0px; -} - -.nameAndSchool { - display: grid; - grid-template-rows: 2fr 1fr; - padding: 0px 10px; -} - -.name { - align-self: end; - text-transform: uppercase; -} - -.school { - align-self: start; - padding-right: 20px; - white-space: nowrap; - overflow: hidden; -} - -.grade { - display: flex; - justify-content: flex-start; - align-items: center; - padding: 0px; -} - -.score { - display: flex; - flex-direction: column; - justify-content: center; - // border: 1px solid red; - grid-template-rows: max-content max-content; - padding: 0px 10px; - - > div { - // border: 1px solid red; - display: grid; - grid-template-columns: repeat(6, 18px) 25px; - justify-items: center; - } - - .subtotal { - padding-left: 5px; - } -} - -.totalScore { - display: flex; - justify-content: center; - align-items: center; -} diff --git a/src/components/Results/ResultsRow.module.scss.d.ts b/src/components/Results/ResultsRow.module.scss.d.ts deleted file mode 100644 index 230d09f7..00000000 --- a/src/components/Results/ResultsRow.module.scss.d.ts +++ /dev/null @@ -1,17 +0,0 @@ -export type Styles = { - grade: string - name: string - nameAndSchool: string - rank: string - rowWrapper: string - school: string - score: string - subtotal: string - totalScore: string -} - -export type ClassNames = keyof Styles - -declare const styles: Styles - -export default styles diff --git a/src/components/Results/ResultsRow.tsx b/src/components/Results/ResultsRow.tsx index bb528a4e..e6e78dc6 100644 --- a/src/components/Results/ResultsRow.tsx +++ b/src/components/Results/ResultsRow.tsx @@ -1,9 +1,7 @@ -import {Typography} from '@mui/material' +import {Box, Stack, Typography} from '@mui/material' import Tooltip from '@mui/material/Tooltip' import {FC} from 'react' -import styles from './ResultsRow.module.scss' - interface Registration { school: { code: number @@ -40,48 +38,63 @@ export const ResultsRow: FC<{result: Result}> = ({result}) => { const {solutions, rank_changed, rank_start, registration, subtotal, total} = result return ( -
-
+ // `display: 'contents'` je taka HTML verzia fragmentu - tento div sa v strukture nepocita pre ucely parent gridu, + // miesto toho sa pouzivaju jednotlive children. preto aj hover tu targetuje children divy, lebo parent v podstate nema velkost + // takisto `justifyContent: 'center'` je na vsetkych elementoch osobitne + div': {bgcolor: 'black', color: 'white'}}}> + {rank_changed && rank_start + '.'} -
-
- + + + {registration.profile.first_name + ' ' + registration.profile.last_name} - + {registration.school.name + ' ' + registration.school.street + ' ' + registration.school.city} -
-
+ + {registration.grade} -
-
+ + {solutions.map((series, index) => ( -
+ {series.map((solution, index) => ( - + {solution.points} ))} - + {subtotal[index]} -
+ ))} -
+ -
+ {total} -
+ -
+ ) } diff --git a/src/pages/strom/vysledky/[[...params]].tsx b/src/pages/strom/vysledky/[[...params]].tsx index 5208be76..75feae21 100644 --- a/src/pages/strom/vysledky/[[...params]].tsx +++ b/src/pages/strom/vysledky/[[...params]].tsx @@ -5,7 +5,7 @@ import {Results} from '@/components/Results/Results' const Vysledky: NextPage = () => { return ( - + )