Feat: better style
All checks were successful
continuous-integration/drone/push Build is passing

This commit is contained in:
Dorian Zedler 2022-07-29 00:36:15 +02:00
parent b831ab4079
commit 1f3ad14be0
Signed by: dorian
GPG key ID: 989DE36109AFA354
6 changed files with 44 additions and 16 deletions

View file

@ -16,10 +16,10 @@ import { Context } from '../data/Context';
* @return {JSX.Element} * @return {JSX.Element}
*/ */
export default function Header() { export default function Header() {
const { title } = useContext(Context); const { title, containerMaxWidth } = useContext(Context);
return ( return (
<AppBar position='sticky'> <AppBar position='sticky'>
<Container maxWidth='lg'> <Container maxWidth={containerMaxWidth} className='header-container'>
<Toolbar className='header-container'> <Toolbar className='header-container'>
<Link to='/' style={{ textDecoration: 'none', color: 'inherit' }}> <Link to='/' style={{ textDecoration: 'none', color: 'inherit' }}>
<img src='/logo192.png' className='header-icon'></img> <img src='/logo192.png' className='header-icon'></img>

View file

@ -1,3 +1,4 @@
import { Breakpoint } from '@mui/material/styles';
import { createContext } from 'react'; import { createContext } from 'react';
import { DigitalrockAPi } from './DigitalrockApi'; import { DigitalrockAPi } from './DigitalrockApi';
@ -10,6 +11,9 @@ export const Context = createContext<{
title: string; title: string;
setTitle: (title: string) => void; setTitle: (title: string) => void;
containerMaxWidth: false | Breakpoint | undefined;
setContainerMaxWidth: (maxWidth: false | Breakpoint | undefined) => void;
}>({ }>({
api: new DigitalrockAPi(), api: new DigitalrockAPi(),
@ -17,4 +21,9 @@ export const Context = createContext<{
setTitle: () => { setTitle: () => {
return; return;
}, },
containerMaxWidth: 'lg',
setContainerMaxWidth: () => {
return;
},
}); });

View file

@ -23,11 +23,12 @@ export default function CalendarPage() {
React.useState<Competiton[]>(); React.useState<Competiton[]>();
const [filter, setFilter] = React.useState<string>(); const [filter, setFilter] = React.useState<string>();
const { api, setTitle } = React.useContext(Context); const { api, setTitle, setContainerMaxWidth } = React.useContext(Context);
const navigate = useNavigate(); const navigate = useNavigate();
React.useEffect(() => { React.useEffect(() => {
setTitle('DAV calendar'); setTitle('DAV calendar');
setContainerMaxWidth('lg');
}, []); }, []);
React.useEffect(() => { React.useEffect(() => {
@ -62,8 +63,8 @@ export default function CalendarPage() {
return ( return (
<> <>
<Grid container spacing={2}> <Grid container spacing={2} direction={'column'}>
<Grid item xs={12}> <Grid item>
<TextField <TextField
label='search for competition' label='search for competition'
variant='outlined' variant='outlined'
@ -72,7 +73,7 @@ export default function CalendarPage() {
/> />
</Grid> </Grid>
{filteredCompetitions?.map(competition => ( {filteredCompetitions?.map(competition => (
<Grid item key={`competition-card-${competition.WetId}`} xs={12}> <Grid item key={`competition-card-${competition.WetId}`}>
<Card> <Card>
<CardContent> <CardContent>
<Typography gutterBottom variant='h5' component='div'> <Typography gutterBottom variant='h5' component='div'>

View file

@ -13,7 +13,7 @@ import { Card, CardContent, Grid, Skeleton, Typography } from '@mui/material';
*/ */
export default function SpeedFlowchartPage() { export default function SpeedFlowchartPage() {
const { competitionId, categoryId } = useParams(); const { competitionId, categoryId } = useParams();
const { api, setTitle } = useContext(Context); const { api, setTitle, setContainerMaxWidth } = useContext(Context);
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
const [flowchartResult, setFlowchartResult] = const [flowchartResult, setFlowchartResult] =
@ -24,6 +24,7 @@ export default function SpeedFlowchartPage() {
return; return;
} }
setTitle(''); setTitle('');
setContainerMaxWidth(false);
api.getCompetitionResults(competitionId, categoryId).then(r => { api.getCompetitionResults(competitionId, categoryId).then(r => {
setTitle( setTitle(
@ -55,19 +56,26 @@ export default function SpeedFlowchartPage() {
xs={12} xs={12}
md={12 / flowchartResult.rounds.length} md={12 / flowchartResult.rounds.length}
> >
<h3>{round.roundName}</h3> <Grid item xs={12}>
<Grid container spacing={2}> <Typography variant='h6' fontWeight={'bold'} gutterBottom>
{round.roundName}
</Typography>
</Grid>
<Grid
container
spacing={2}
sx={{ height: '100%', justifyContent: 'space-around' }}
direction={'column'}
>
{round.pairs.map((pair, pairKey) => ( {round.pairs.map((pair, pairKey) => (
<Grid <Grid key={`flowchart-column-${roundKey}-pair-${pairKey}`} item>
key={`flowchart-column-${roundKey}-pair-${pairKey}`}
item
xs={12}
>
<Card> <Card>
<CardContent> <CardContent>
<Typography <Typography
sx={{ sx={{
fontWeight: pair.winner === 'A' ? 'bold' : 'plain', fontWeight: pair.winner === 'A' ? 'bold' : 'plain',
color: pair.winner === 'A' ? '#4CAF50' : '',
}} }}
> >
A: {pair.laneA?.participant.firstName}{' '} A: {pair.laneA?.participant.firstName}{' '}
@ -77,6 +85,7 @@ export default function SpeedFlowchartPage() {
<Typography <Typography
sx={{ sx={{
fontWeight: pair.winner === 'B' ? 'bold' : 'plain', fontWeight: pair.winner === 'B' ? 'bold' : 'plain',
color: pair.winner === 'B' ? '#4CAF50' : '',
}} }}
> >
B: {pair.laneB?.participant.firstName}{' '} B: {pair.laneB?.participant.firstName}{' '}

View file

@ -1,3 +1,4 @@
import { Breakpoint } from '@mui/material/styles';
import React from 'react'; import React from 'react';
import { Context } from '../data/Context'; import { Context } from '../data/Context';
import { DigitalrockAPi } from '../data/DigitalrockApi'; import { DigitalrockAPi } from '../data/DigitalrockApi';
@ -12,9 +13,14 @@ export default function ContextWrapper(props: { children: JSX.Element }) {
const api = new DigitalrockAPi(); const api = new DigitalrockAPi();
const [title, setTitle] = React.useState(''); const [title, setTitle] = React.useState('');
const [containerMaxWidth, setContainerMaxWidth] = React.useState<
false | Breakpoint | undefined
>('lg');
return ( return (
<Context.Provider value={{ api, title, setTitle }}> <Context.Provider
value={{ api, title, setTitle, containerMaxWidth, setContainerMaxWidth }}
>
{children} {children}
</Context.Provider> </Context.Provider>
); );

View file

@ -1,4 +1,6 @@
import Container from '@mui/material/Container'; import Container from '@mui/material/Container';
import React from 'react';
import { Context } from '../data/Context';
import LocalizationProviderWrapper from './LocalizationProviderWrapper'; import LocalizationProviderWrapper from './LocalizationProviderWrapper';
/** /**
@ -8,13 +10,14 @@ import LocalizationProviderWrapper from './LocalizationProviderWrapper';
*/ */
export default function PageTemplate(props: { children: JSX.Element }) { export default function PageTemplate(props: { children: JSX.Element }) {
const { children } = props; const { children } = props;
const { containerMaxWidth } = React.useContext(Context);
return ( return (
<LocalizationProviderWrapper> <LocalizationProviderWrapper>
<Container <Container
sx={{ marginTop: '16px', marginBottom: '16px' }} sx={{ marginTop: '16px', marginBottom: '16px' }}
className='root-container' className='root-container'
maxWidth='lg' maxWidth={containerMaxWidth}
> >
{children} {children}
</Container> </Container>