rewrite results styles

ZdruzenieSTROM · May 19, 2024 · 0c03f6e · 0c03f6e
1 parent b2b2b46
commit 0c03f6e
Show file tree

Hide file tree

Showing 6 changed files with 37 additions and 125 deletions.
diff --git a/src/components/Results/Results.module.scss b/src/components/Results/Results.module.scss
diff --git a/src/components/Results/Results.module.scss.d.ts b/src/components/Results/Results.module.scss.d.ts
diff --git 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 (
     <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>
   )
 }
diff --git a/src/components/Results/ResultsRow.module.scss b/src/components/Results/ResultsRow.module.scss
diff --git a/src/components/Results/ResultsRow.module.scss.d.ts b/src/components/Results/ResultsRow.module.scss.d.ts
diff --git 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 (
-    <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>
   )
 }