allEntries mobile
This commit is contained in:
parent
ea76b05610
commit
d23a5b5566
@ -6,6 +6,7 @@ import { H2 } from '../../../utils/fonts';
|
|||||||
import {
|
import {
|
||||||
CALC_PAGES,
|
CALC_PAGES,
|
||||||
EVALUATIONS_FORMAT,
|
EVALUATIONS_FORMAT,
|
||||||
|
IS_MOBILE,
|
||||||
RENDER_WHEN,
|
RENDER_WHEN,
|
||||||
} from '../../../utils/globals';
|
} from '../../../utils/globals';
|
||||||
import Loading from '../../generic/Loading';
|
import Loading from '../../generic/Loading';
|
||||||
@ -55,10 +56,11 @@ const AllEntries = (props) => {
|
|||||||
|
|
||||||
const getAllEntriesHeader = () => {
|
const getAllEntriesHeader = () => {
|
||||||
let header = ['#', 'submitter'];
|
let header = ['#', 'submitter'];
|
||||||
|
if (IS_MOBILE()) header.push('when');
|
||||||
for (let metric of getPossibleMetrics()) {
|
for (let metric of getPossibleMetrics()) {
|
||||||
header.push(metric);
|
header.push(metric);
|
||||||
}
|
}
|
||||||
header.push('when');
|
if (!IS_MOBILE()) header.push('when');
|
||||||
return header;
|
return header;
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -147,7 +149,52 @@ const AllEntries = (props) => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
const mobileRender = () => {
|
const mobileRender = () => {
|
||||||
return <></>;
|
return (
|
||||||
|
<FlexColumn padding="24px 12px" width="70%" as="section" id="start">
|
||||||
|
<H2 as="h2" margin="0 0 12px 0">
|
||||||
|
All Entries
|
||||||
|
</H2>
|
||||||
|
{!loading ? (
|
||||||
|
<>
|
||||||
|
<Search searchQueryHandler={searchQueryHandler} />
|
||||||
|
<Table
|
||||||
|
challengeName={props.challengeName}
|
||||||
|
headerElements={getAllEntriesHeader()}
|
||||||
|
possibleMetrics={getPossibleMetrics()}
|
||||||
|
tableType="allEntries"
|
||||||
|
gridTemplateColumns={
|
||||||
|
'1fr ' + '4fr '.repeat(getAllEntriesHeader().length - 1)
|
||||||
|
}
|
||||||
|
staticColumnElements={[
|
||||||
|
{ name: 'id', format: null, order: 1, align: 'left' },
|
||||||
|
{ name: 'submitter', format: null, order: 2, align: 'left' },
|
||||||
|
{ name: 'when', format: RENDER_WHEN, order: 5, align: 'right' },
|
||||||
|
]}
|
||||||
|
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>
|
||||||
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
const desktopRender = () => {
|
const desktopRender = () => {
|
||||||
|
@ -180,7 +180,7 @@ const Leaderboard = (props) => {
|
|||||||
<Table
|
<Table
|
||||||
challengeName={props.challengeName}
|
challengeName={props.challengeName}
|
||||||
headerElements={getLeaderboardHeaderMobile()}
|
headerElements={getLeaderboardHeaderMobile()}
|
||||||
tableType="Leaderboard"
|
tableType="leaderboard"
|
||||||
gridTemplateColumns={
|
gridTemplateColumns={
|
||||||
entries[0]
|
entries[0]
|
||||||
? '1fr 3fr ' +
|
? '1fr 3fr ' +
|
||||||
|
@ -177,7 +177,7 @@ const MyEntries = (props) => {
|
|||||||
return (
|
return (
|
||||||
<FlexColumn padding="24px" as="section" width="100%" maxWidth="1400px">
|
<FlexColumn padding="24px" as="section" width="100%" maxWidth="1400px">
|
||||||
<FlexColumn padding="24px 12px" width="70%" as="section" id="start">
|
<FlexColumn padding="24px 12px" width="70%" as="section" id="start">
|
||||||
<H2 as="h2" margin="0 0 12px 0">
|
<H2 as="h2" margin="0 0 32px 0">
|
||||||
My Entries
|
My Entries
|
||||||
</H2>
|
</H2>
|
||||||
</FlexColumn>
|
</FlexColumn>
|
||||||
|
@ -95,7 +95,9 @@ const Table = (props) => {
|
|||||||
elem = newElem;
|
elem = newElem;
|
||||||
}
|
}
|
||||||
let indexModificator = 2;
|
let indexModificator = 2;
|
||||||
if (props.tableType === 'Leaderboard') indexModificator = 4;
|
if (props.tableType === 'leaderboard') indexModificator = 4;
|
||||||
|
if (props.tableType === 'allEntries') indexModificator = 3;
|
||||||
|
|
||||||
return elem.map((iterableElem, i) => {
|
return elem.map((iterableElem, i) => {
|
||||||
return (
|
return (
|
||||||
<Body
|
<Body
|
||||||
|
Loading…
Reference in New Issue
Block a user