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

@@ -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<Seminar, string> = {
@@ -25,7 +26,7 @@ const seminarTitle: Record<Seminar, string> = {
 
 // 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<PageLayoutProps> = ({contentWidth = 2, title = '', children}) => {
+export const PageLayout: FC<PageLayoutProps> = ({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<PageLayoutProps> = ({contentWidth = 2, title = '', c
               <Grid xs={0} md={3} sx={{position: 'relative', display: {xs: 'none', md: 'block'}}}>
                 <StromLogo />
               </Grid>
-              <Grid xs={12} md={contentWidth * 3} sx={{pb: 2, px: 1}}>
+              <Grid xs={12} md={contentWidth * 3} sx={{pb: 2, px: 1, ...sx}}>
                 {children}
               </Grid>
             </Grid>

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 (
     <div>
       {resultsIsLoading && <Loading />}
-      <div className={styles.results}>
+      <Box sx={{display: 'grid', rowGap: '10px', gridTemplateColumns: 'max-content 1fr repeat(3, max-content)'}}>
         {results.map((result, index) => (
           <ResultsRow result={result} key={index} />
         ))}
-      </div>
+      </Box>
     </div>
   )
 }

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 (
-    <div className={styles.rowWrapper}>
-      <div className={styles.rank}>
+    // `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
+    <Box sx={{display: 'contents', ':hover > div': {bgcolor: 'black', color: 'white'}}}>
+      <Stack
+        sx={{
+          justifyContent: 'center',
+          // top-level PageLayout padding je vypnuty, odsadzame to rucne tu
+          pl: 1,
+        }}
+      >
         <Typography variant="h1" component="span">
           {rank_changed && rank_start + '.'}
         </Typography>
-      </div>
-      <div className={styles.nameAndSchool}>
-        <Typography variant="h2" component="span" className={styles.name}>
+      </Stack>
+      <Stack sx={{px: '10px', justifyContent: 'center'}}>
+        <Typography variant="h3" component="span">
           {registration.profile.first_name + ' ' + registration.profile.last_name}
         </Typography>
-        <Typography variant="body3" className={styles.school}>
+        <Typography variant="body3">
           {registration.school.name + ' ' + registration.school.street + ' ' + registration.school.city}
         </Typography>
-      </div>
-      <div className={styles.grade}>
+      </Stack>
+      <Stack sx={{justifyContent: 'center'}}>
         <Typography variant="h3" component="span" fontWeight={400} fontStyle="italic">
           {registration.grade}
         </Typography>
-      </div>
-      <div className={styles.score}>
+      </Stack>
+      <Stack sx={{justifyContent: 'center', px: '10px'}}>
         {solutions.map((series, index) => (
-          <div key={index}>
+          <Stack key={index} direction="row">
             {series.map((solution, index) => (
-              <Typography variant="body2" key={index}>
+              <Typography key={index} variant="body2" sx={{width: '18px', textAlign: 'center'}}>
                 {solution.points}
               </Typography>
             ))}
             <Tooltip title={`Súčet bodov za ${index + 1}. sériu po uplatnení bonifikácie`}>
-              <Typography variant="body2" fontWeight={600} className={styles.subtotal}>
+              <Typography variant="body2" fontWeight={600} sx={{width: '25px', textAlign: 'center'}}>
                 {subtotal[index]}
               </Typography>
             </Tooltip>
-          </div>
+          </Stack>
         ))}
-      </div>
+      </Stack>
       <Tooltip title="Celkový súčet bodov po uplatnení bonifikácie">
-        <div className={styles.totalScore}>
+        <Stack
+          sx={{
+            justifyContent: 'center',
+            // top-level PageLayout padding je vypnuty, odsadzame to rucne tu
+            pr: 1,
+          }}
+        >
           <Typography variant="h3" component="span" fontStyle="italic">
             {total}
           </Typography>
-        </div>
+        </Stack>
       </Tooltip>
-    </div>
+    </Box>
   )
 }

src/pages/strom/vysledky/[[...params]].tsx

@@ -5,7 +5,7 @@ import {Results} from '@/components/Results/Results'
 
 const Vysledky: NextPage = () => {
   return (
-    <PageLayout contentWidth={2} title="Výsledky">
+    <PageLayout contentWidth={2} title="Výsledky" sx={{px: 0}}>
       <Results />
     </PageLayout>
   )