Table on mobile
This commit is contained in:
parent
44c7b87d6b
commit
818c841d2b
@ -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>
|
||||
{!loading ?
|
||||
<>
|
||||
<Search searchQueryHandler={searchQueryHandler}/>
|
||||
<Table challengeName={props.challengeName} loading={loading}
|
||||
headerElements={['#', 'submitter', 'result', 'entries', 'when']}
|
||||
pageNr={pageNr} submissions={entries} sortByUpdate={sortByUpdate}/>
|
||||
<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 ? entries : [])}
|
||||
pages={CALC_PAGES(entries)}
|
||||
nextPage={nextPage} previousPage={previousPage}
|
||||
number={`${pageNr} / ${CALC_PAGES(entries ? entries : [])}`}/>
|
||||
number={`${pageNr} / ${CALC_PAGES(entries)}`}/>
|
||||
</>
|
||||
: <Loading/>}
|
||||
</FlexColumn>
|
||||
);
|
||||
};
|
||||
|
||||
@ -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}>
|
||||
|
||||
@ -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,8 +85,7 @@ const Challenge = (props) => {
|
||||
</FlexColumn>
|
||||
</>
|
||||
);
|
||||
}
|
||||
else {
|
||||
} else {
|
||||
return (
|
||||
<FlexColumn position='fixed' top='0' left='0' width='100%' height='100vh' zIndex='10'>
|
||||
<H2 as='h1'>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user