allEntries mobile

This commit is contained in:
Mateusz Tylka 2023-04-11 13:07:17 +02:00
parent ea76b05610
commit d23a5b5566
4 changed files with 54 additions and 5 deletions

View File

@ -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 = () => {

View File

@ -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 ' +

View File

@ -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>

View File

@ -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