MyEntries and Leaderboard Table on mobile hard code synchro
This commit is contained in:
parent
acbcd41948
commit
ea76b05610
@ -180,6 +180,7 @@ const Leaderboard = (props) => {
|
|||||||
<Table
|
<Table
|
||||||
challengeName={props.challengeName}
|
challengeName={props.challengeName}
|
||||||
headerElements={getLeaderboardHeaderMobile()}
|
headerElements={getLeaderboardHeaderMobile()}
|
||||||
|
tableType="Leaderboard"
|
||||||
gridTemplateColumns={
|
gridTemplateColumns={
|
||||||
entries[0]
|
entries[0]
|
||||||
? '1fr 3fr ' +
|
? '1fr 3fr ' +
|
||||||
|
@ -6,6 +6,7 @@ import Pager from '../../generic/Pager';
|
|||||||
import {
|
import {
|
||||||
CALC_PAGES,
|
CALC_PAGES,
|
||||||
EVALUATIONS_FORMAT,
|
EVALUATIONS_FORMAT,
|
||||||
|
IS_MOBILE,
|
||||||
RENDER_WHEN,
|
RENDER_WHEN,
|
||||||
} from '../../../utils/globals';
|
} from '../../../utils/globals';
|
||||||
import Media from 'react-media';
|
import Media from 'react-media';
|
||||||
@ -60,10 +61,11 @@ const MyEntries = (props) => {
|
|||||||
|
|
||||||
const getMyEntriesHeader = () => {
|
const getMyEntriesHeader = () => {
|
||||||
let header = ['#'];
|
let header = ['#'];
|
||||||
|
if (IS_MOBILE()) header.push('when');
|
||||||
for (let myEval of getPossibleMetrics()) {
|
for (let myEval of getPossibleMetrics()) {
|
||||||
header.push(myEval);
|
header.push(myEval);
|
||||||
}
|
}
|
||||||
header.push('when');
|
if (!IS_MOBILE()) header.push('when');
|
||||||
return header;
|
return header;
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -136,6 +138,7 @@ const MyEntries = (props) => {
|
|||||||
challengeName={props.challengeName}
|
challengeName={props.challengeName}
|
||||||
headerElements={getMyEntriesHeader()}
|
headerElements={getMyEntriesHeader()}
|
||||||
possibleMetrics={getPossibleMetrics()}
|
possibleMetrics={getPossibleMetrics()}
|
||||||
|
tableType="myEntries"
|
||||||
gridTemplateColumns={
|
gridTemplateColumns={
|
||||||
'1fr ' + '4fr '.repeat(getMyEntriesHeader().length - 1)
|
'1fr ' + '4fr '.repeat(getMyEntriesHeader().length - 1)
|
||||||
}
|
}
|
||||||
|
@ -2,7 +2,7 @@ import React from 'react';
|
|||||||
import { Container, FlexColumn, FlexRow, Grid } from '../../utils/containers';
|
import { Container, FlexColumn, FlexRow, Grid } from '../../utils/containers';
|
||||||
import Media from 'react-media';
|
import Media from 'react-media';
|
||||||
import theme from '../../utils/theme';
|
import theme from '../../utils/theme';
|
||||||
import { ELEMENTS_PER_PAGE } from '../../utils/globals';
|
import { ELEMENTS_PER_PAGE, IS_MOBILE } from '../../utils/globals';
|
||||||
import { Body, Medium } from '../../utils/fonts';
|
import { Body, Medium } from '../../utils/fonts';
|
||||||
import styled from 'styled-components';
|
import styled from 'styled-components';
|
||||||
import ColumnFilterIcon from './ColumnFilterIcon';
|
import ColumnFilterIcon from './ColumnFilterIcon';
|
||||||
@ -58,8 +58,9 @@ const MobileTableStyle = styled(Container)`
|
|||||||
border-bottom: 1px solid ${({ theme }) => theme.colors.dark01};
|
border-bottom: 1px solid ${({ theme }) => theme.colors.dark01};
|
||||||
position: relative;
|
position: relative;
|
||||||
padding-left: 50%;
|
padding-left: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
&:before {
|
.mobile-table-header {
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 6px;
|
top: 6px;
|
||||||
@ -68,57 +69,6 @@ const MobileTableStyle = styled(Container)`
|
|||||||
padding-right: 10px;
|
padding-right: 10px;
|
||||||
white-space: nowrap;
|
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 Table = (props) => {
|
||||||
@ -144,6 +94,8 @@ const Table = (props) => {
|
|||||||
}
|
}
|
||||||
elem = newElem;
|
elem = newElem;
|
||||||
}
|
}
|
||||||
|
let indexModificator = 2;
|
||||||
|
if (props.tableType === 'Leaderboard') indexModificator = 4;
|
||||||
return elem.map((iterableElem, i) => {
|
return elem.map((iterableElem, i) => {
|
||||||
return (
|
return (
|
||||||
<Body
|
<Body
|
||||||
@ -153,6 +105,11 @@ const Table = (props) => {
|
|||||||
textAlign={props.iterableColumnElement.align}
|
textAlign={props.iterableColumnElement.align}
|
||||||
minWidth="72px"
|
minWidth="72px"
|
||||||
>
|
>
|
||||||
|
{IS_MOBILE() && (
|
||||||
|
<Container className="mobile-table-header">
|
||||||
|
{props.headerElements[indexModificator + i]}
|
||||||
|
</Container>
|
||||||
|
)}
|
||||||
{props.iterableColumnElement.format
|
{props.iterableColumnElement.format
|
||||||
? props.iterableColumnElement.format(iterableElem)
|
? props.iterableColumnElement.format(iterableElem)
|
||||||
: iterableElem}
|
: iterableElem}
|
||||||
@ -162,34 +119,25 @@ const Table = (props) => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
const rowRender = (elem) => {
|
const rowRender = (elem) => {
|
||||||
if (elem.submitter === props.user) {
|
let RowStyle = Body;
|
||||||
|
if (elem.submitter === props.user) RowStyle = Medium;
|
||||||
return props.staticColumnElements.map((elemName, i) => {
|
return props.staticColumnElements.map((elemName, i) => {
|
||||||
return (
|
return (
|
||||||
<Medium
|
<RowStyle
|
||||||
key={`leaderboard-static-elemName-${i}-${elem[elemName.name]}`}
|
key={`leaderboard-static-elemName-${i}-${elem[elemName.name]}`}
|
||||||
as="td"
|
as="td"
|
||||||
order={elemName.order}
|
order={elemName.order}
|
||||||
textAlign={elemName.align}
|
textAlign={elemName.align}
|
||||||
>
|
>
|
||||||
|
{IS_MOBILE() && (
|
||||||
|
<Container className="mobile-table-header">
|
||||||
|
{props.headerElements[i]}
|
||||||
|
</Container>
|
||||||
|
)}
|
||||||
{elemName.format
|
{elemName.format
|
||||||
? elemName.format(elem[elemName.name])
|
? elemName.format(elem[elemName.name])
|
||||||
: elem[elemName.name]}
|
: elem[elemName.name]}
|
||||||
</Medium>
|
</RowStyle>
|
||||||
);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
return props.staticColumnElements.map((elemName, i) => {
|
|
||||||
return (
|
|
||||||
<Body
|
|
||||||
key={`leaderboard-static-elemName-${i}-${elem[elemName.name]}`}
|
|
||||||
as="td"
|
|
||||||
order={elemName.order}
|
|
||||||
textAlign={elemName.align}
|
|
||||||
>
|
|
||||||
{elemName.format
|
|
||||||
? elemName.format(elem[elemName.name])
|
|
||||||
: elem[elemName.name]}
|
|
||||||
</Body>
|
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
@ -239,15 +187,13 @@ const Table = (props) => {
|
|||||||
>
|
>
|
||||||
{elem.replace('.', ' ')}
|
{elem.replace('.', ' ')}
|
||||||
</Medium>
|
</Medium>
|
||||||
{elem !== '#' ? (
|
{elem !== '#' && (
|
||||||
<ColumnFilterIcon
|
<ColumnFilterIcon
|
||||||
cursor="pointer"
|
cursor="pointer"
|
||||||
index={i}
|
index={i}
|
||||||
active={activeIcon}
|
active={activeIcon}
|
||||||
rotateIcon={rotateActiveIcon}
|
rotateIcon={rotateActiveIcon}
|
||||||
/>
|
/>
|
||||||
) : (
|
|
||||||
''
|
|
||||||
)}
|
)}
|
||||||
</FlexRow>
|
</FlexRow>
|
||||||
);
|
);
|
||||||
@ -276,9 +222,8 @@ const Table = (props) => {
|
|||||||
</FlexColumn>
|
</FlexColumn>
|
||||||
</FlexColumn>
|
</FlexColumn>
|
||||||
);
|
);
|
||||||
} else {
|
|
||||||
return <Medium margin="72px 0">No results ;c</Medium>;
|
|
||||||
}
|
}
|
||||||
|
return <Medium margin="72px 0">No results ;c</Medium>;
|
||||||
};
|
};
|
||||||
|
|
||||||
const mobileRender = () => {
|
const mobileRender = () => {
|
||||||
@ -291,17 +236,6 @@ const Table = (props) => {
|
|||||||
staticColumnElements={props.staticColumnElements}
|
staticColumnElements={props.staticColumnElements}
|
||||||
headerElements={props.headerElements}
|
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">
|
<Container as="tbody">
|
||||||
{elementsToMap.map((elem, index) => {
|
{elementsToMap.map((elem, index) => {
|
||||||
return (
|
return (
|
||||||
@ -314,9 +248,8 @@ const Table = (props) => {
|
|||||||
</Container>
|
</Container>
|
||||||
</MobileTableStyle>
|
</MobileTableStyle>
|
||||||
);
|
);
|
||||||
} else {
|
|
||||||
return <Medium margin="72px 0">No results ;c</Medium>;
|
|
||||||
}
|
}
|
||||||
|
return <Medium margin="72px 0">No results ;c</Medium>;
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
Loading…
Reference in New Issue
Block a user