Compare commits

...

2 commits

Author SHA1 Message Date
bd72659215
Fix: don't show dummy on mobile
All checks were successful
continuous-integration/drone/push Build is passing
2022-07-29 01:10:04 +02:00
d493777de3
Fix: show final and small final in one column 2022-07-29 01:01:45 +02:00
2 changed files with 44 additions and 17 deletions

View file

@ -4,8 +4,14 @@ import { useParams } from 'react-router-dom';
import { import {
convertResultsToSpeedFlowchartResult, convertResultsToSpeedFlowchartResult,
SpeedFlowchartResult, SpeedFlowchartResult,
SpeedRoundPair,
} from '../data/SpeedFlowchart'; } from '../data/SpeedFlowchart';
import { Card, CardContent, Grid, Skeleton, Typography } from '@mui/material'; import { Card, CardContent, Grid, Skeleton, Typography } from '@mui/material';
import { theme } from '../utils/Theme';
interface SpeedRoundPairDummy extends SpeedRoundPair {
dummy: boolean;
}
/** /**
* *
@ -37,7 +43,17 @@ export default function SpeedFlowchartPage() {
console.log('loading false'); console.log('loading false');
const flowchartResult = convertResultsToSpeedFlowchartResult(r); const flowchartResult = convertResultsToSpeedFlowchartResult(r);
console.log(flowchartResult); const l = flowchartResult.rounds.length;
const dummy: SpeedRoundPairDummy = { dummy: true };
flowchartResult.rounds[l - 2].pairs = [
dummy,
...flowchartResult.rounds[l - 1].pairs,
...flowchartResult.rounds[l - 2].pairs,
];
flowchartResult.rounds[l - 2].roundName = `${
flowchartResult.rounds[l - 1].roundName
} / ${flowchartResult.rounds[l - 2].roundName}`;
flowchartResult.rounds.pop();
setFlowchartResult(flowchartResult); setFlowchartResult(flowchartResult);
}); });
}, []); }, []);
@ -56,7 +72,7 @@ export default function SpeedFlowchartPage() {
xs={12} xs={12}
md={12 / flowchartResult.rounds.length} md={12 / flowchartResult.rounds.length}
> >
<Grid item xs={12}> <Grid item className='center-children' xs={12}>
<Typography variant='h6' fontWeight={'bold'} gutterBottom> <Typography variant='h6' fontWeight={'bold'} gutterBottom>
{round.roundName} {round.roundName}
</Typography> </Typography>
@ -70,7 +86,18 @@ export default function SpeedFlowchartPage() {
> >
{round.pairs.map((pair, pairKey) => ( {round.pairs.map((pair, pairKey) => (
<Grid key={`flowchart-column-${roundKey}-pair-${pairKey}`} item> <Grid key={`flowchart-column-${roundKey}-pair-${pairKey}`} item>
<Card> <Card
sx={{
opacity: (pair as SpeedRoundPairDummy).dummy ? 0 : 1,
[theme.breakpoints.down('md')]: (
pair as SpeedRoundPairDummy
).dummy
? {
display: 'none',
}
: undefined,
}}
>
<CardContent> <CardContent>
<Typography <Typography
sx={{ sx={{

View file

@ -1,6 +1,19 @@
import { CssBaseline } from '@mui/material'; import { CssBaseline } from '@mui/material';
import { ThemeProvider, createTheme } from '@mui/material/styles'; import { ThemeProvider, createTheme } from '@mui/material/styles';
export const theme = createTheme({
components: {
MuiToggleButton: {
defaultProps: {
disableRipple: true,
},
},
},
palette: {
mode: 'dark',
},
});
/** /**
* Sets a MaterialUi theme for its children * Sets a MaterialUi theme for its children
* @param {any} props accepts JSX elements to wrap theme in * @param {any} props accepts JSX elements to wrap theme in
@ -8,21 +21,8 @@ import { ThemeProvider, createTheme } from '@mui/material/styles';
*/ */
export default function Theme(props: { children: JSX.Element }) { export default function Theme(props: { children: JSX.Element }) {
const { children } = props; const { children } = props;
const Theme = createTheme({
components: {
MuiToggleButton: {
defaultProps: {
disableRipple: true,
},
},
},
palette: {
mode: 'dark',
},
});
return ( return (
<ThemeProvider theme={Theme}> <ThemeProvider theme={theme}>
<CssBaseline /> <CssBaseline />
{children} {children}
</ThemeProvider> </ThemeProvider>