s444498/gonito-frontend
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

MyEntries and Leaderboard Table on mobile hard code synchro

Browse Source
This commit is contained in:
Mateusz Tylka 2023-04-11 11:35:30 +02:00
parent acbcd41948
commit ea76b05610
3 changed files with 33 additions and 96 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/specific_challenge/Leaderboard/Leaderboard.js
View File

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

5
src/components/specific_challenge/MyEntries/MyEntries.js
View File

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

111
src/components/specific_challenge/Table.js
View File

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