Table on mobile

This commit is contained in:
mattyl006 2022-12-13 14:58:58 +01:00
parent 44c7b87d6b
commit 818c841d2b
3 changed files with 171 additions and 22 deletions

View File

@ -82,6 +82,14 @@ const Leaderboard = (props) => {
return header;
};
const getLeaderboardHeaderMobile = () => {
let header = ['#', 'submitter', 'entries', 'when'];
for (let metric of getPossibleMetrics()) {
header.push(metric);
}
return header;
};
const sortByUpdate = (elem) => {
let metricIndex = 0;
let newEntries = entries;
@ -129,18 +137,38 @@ const Leaderboard = (props) => {
const mobileRender = () => {
return (
<FlexColumn padding='24px 12px' as='section' id='start'>
<FlexColumn padding='24px 12px' width='70%' as='section' id='start'>
<H2 as='h2' margin='0 0 12px 0'>
Leaderboard
</H2>
<Search searchQueryHandler={searchQueryHandler}/>
<Table challengeName={props.challengeName} loading={loading}
headerElements={['#', 'submitter', 'result', 'entries', 'when']}
pageNr={pageNr} submissions={entries} sortByUpdate={sortByUpdate}/>
<Pager pageNr={pageNr} width='48px' borderRadius='64px'
pages={CALC_PAGES(entries ? entries : [])}
nextPage={nextPage} previousPage={previousPage}
number={`${pageNr} / ${CALC_PAGES(entries ? entries : [])}`}/>
{!loading ?
<>
<Search searchQueryHandler={searchQueryHandler}/>
<Table challengeName={props.challengeName} headerElements={getLeaderboardHeaderMobile()}
gridTemplateColumns={entries[0] ? '1fr 3fr ' + '2fr '.repeat(entries[0].evaluations.length) + '1fr 2fr' : ''}
user={props.user}
staticColumnElements={
[
{name: 'id', format: null, order: 1, align: 'left'},
{name: 'submitter', format: null, order: 2, align: 'left'},
{name: 'times', format: null, order: 4, align: 'left'},
{name: 'when', format: RENDER_WHEN, order: 5, align: 'right'}
]
}
metrics={getPossibleMetrics()}
iterableColumnElement={{
name: 'evaluations',
format: EVALUATIONS_FORMAT,
order: 3,
align: 'left'
}}
pageNr={pageNr} elements={entries} sortByUpdate={sortByUpdate}/>
<Pager pageNr={pageNr} width='48px' borderRadius='64px'
pages={CALC_PAGES(entries)}
nextPage={nextPage} previousPage={previousPage}
number={`${pageNr} / ${CALC_PAGES(entries)}`}/>
</>
: <Loading/>}
</FlexColumn>
);
};

View File

@ -1,5 +1,5 @@
import React from 'react';
import {FlexColumn, FlexRow, Grid} from '../../utils/containers';
import {Container, FlexColumn, FlexRow, Grid} from '../../utils/containers';
import Media from 'react-media';
import theme from '../../utils/theme';
import {ELEMENTS_PER_PAGE} from '../../utils/globals';
@ -17,20 +17,102 @@ const Line = styled(FlexRow)`
height: ${({height}) => height ? height : '1px'};
`;
const MobileTableStyle = styled(Container)`
width: 100%;
border-collapse: collapse;
margin: 32px 0;
tr:nth-of-type(odd) {
background: ${({theme}) => theme.colors.dark03};
}
th {
background: ${({theme}) => theme.colors.dark05};
color: ${({theme}) => theme.colors.white};
}
td, th {
padding: 6px;
border: 1px solid ${({theme}) => theme.colors.white};
text-align: left;
}
display: block;
thead, tbody, th, td {
display: block;
}
thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
td {
border: none;
border-bottom: 1px solid ${({theme}) => theme.colors.dark01};
position: relative;
padding-left: 50%;
&:before {
font-weight: 400;
position: absolute;
top: 6px;
left: 6px;
width: 45%;
padding-right: 10px;
white-space: nowrap;
}
}
td:nth-of-type(1):before {
content: ${({headerElements}) => headerElements[0] ? `'${headerElements[0]}'` : ''};
}
td:nth-of-type(2):before {
content: ${({headerElements}) => headerElements[1] ? `'${headerElements[1]}'` : ''};
}
td:nth-of-type(3):before {
content: ${({headerElements}) => headerElements[2] ? `'${headerElements[2]}'` : ''};
}
td:nth-of-type(4):before {
content: ${({headerElements}) => headerElements[3] ? `'${headerElements[3]}'` : ''};
}
td:nth-of-type(5):before {
content: ${({headerElements}) => headerElements[4] ? `'${headerElements[4]}'` : ''};
}
td:nth-of-type(6):before {
content: ${({headerElements}) => headerElements[5] ? `'${headerElements[5]}'` : ''};
}
td:nth-of-type(7):before {
content: ${({headerElements}) => headerElements[6] ? `'${headerElements[6]}'` : ''};
}
td:nth-of-type(8):before {
content: ${({headerElements}) => headerElements[7] ? `'${headerElements[7]}'` : ''};
}
td:nth-of-type(9):before {
content: ${({headerElements}) => headerElements[8] ? `'${headerElements[8]}'` : ''};
}
td:nth-of-type(10):before {
content: ${({headerElements}) => headerElements[9] ? `'${headerElements[9]}'` : ''};
}
`;
const Table = (props) => {
const [, updateState] = React.useState();
const forceUpdate = React.useCallback(() => updateState({}), []);
const [activeIcon, setActiveIcon] = React.useState(null);
const [rotateActiveIcon, setRotateActiveIcon] = React.useState(false);
const mobileRender = () => {
return (
<FlexColumn as='table' margin='20px 0 32px 0' minHeight='380px'>
{/*{props.renderElements('10px', props.headerElements)}*/}
</FlexColumn>
);
};
const metricsRender = (elem) => {
if (!props.iterableColumnElement)
return <></>;
@ -148,6 +230,45 @@ const Table = (props) => {
}
};
const mobileRender = () => {
const n = (props.pageNr - 1) * ELEMENTS_PER_PAGE;
let elementsToMap = props.elements.slice(n, n + ELEMENTS_PER_PAGE);
if (elementsToMap.length > 0) {
return (
<MobileTableStyle as='table' staticColumnElements={props.staticColumnElements}
headerElements={props.headerElements}>
<Container as='thead'>
<Container as='tr'>
{props.headerElements.map((elem, i) => {
return (
<Medium key={`table-header-${i}`} as='th'>
{elem}
</Medium>
);
})}
</Container>
</Container>
<Container as='tbody'>
{elementsToMap.map((elem, index) => {
return (
<Grid as='tr' key={`leaderboard-row-${index}`}>
{rowRender(elem)}
{props.headerElements ? metricsRender(elem) : ''}
</Grid>
);
})}
</Container>
</MobileTableStyle>
);
} else {
return (
<Medium margin='72px 0'>
No results ;c
</Medium>
);
}
};
return (
<>
<Media query={theme.mobile}>

View File

@ -41,7 +41,8 @@ const Challenge = (props) => {
case 3:
return <MyEntries challengeName={challengeName}/>;
case 4:
return <Submit popUpMessageHandler={props.popUpMessageHandler} challengeName={challengeName} setLoading={setLoading}/>;
return <Submit popUpMessageHandler={props.popUpMessageHandler} challengeName={challengeName}
setLoading={setLoading}/>;
default:
return <Leaderboard challengeName={challengeName} mainMetric={challenge.mainMetric}/>;
}
@ -84,14 +85,13 @@ const Challenge = (props) => {
</FlexColumn>
</>
);
}
else {
} else {
return (
<FlexColumn position='fixed' top='0' left='0' width='100%' height='100vh' zIndex='10'>
<H2 as='h1'>
Submission processing...
</H2>
<Loading />
<Loading/>
</FlexColumn>
);
}