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
challengeName={props.challengeName}
headerElements={getLeaderboardHeaderMobile()}
tableType="Leaderboard"
gridTemplateColumns={
entries[0]
? '1fr 3fr ' +

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

@ -6,6 +6,7 @@ import Pager from '../../generic/Pager';
import {
CALC_PAGES,
EVALUATIONS_FORMAT,
IS_MOBILE,
RENDER_WHEN,
} from '../../../utils/globals';
import Media from 'react-media';
@ -60,10 +61,11 @@ const MyEntries = (props) => {
const getMyEntriesHeader = () => {
let header = ['#'];
if (IS_MOBILE()) header.push('when');
for (let myEval of getPossibleMetrics()) {
header.push(myEval);
}
header.push('when');
if (!IS_MOBILE()) header.push('when');
return header;
};
@ -136,6 +138,7 @@ const MyEntries = (props) => {
challengeName={props.challengeName}
headerElements={getMyEntriesHeader()}
possibleMetrics={getPossibleMetrics()}
tableType="myEntries"
gridTemplateColumns={
'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 Media from 'react-media';
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 styled from 'styled-components';
import ColumnFilterIcon from './ColumnFilterIcon';
@ -58,8 +58,9 @@ const MobileTableStyle = styled(Container)`
border-bottom: 1px solid ${({ theme }) => theme.colors.dark01};
position: relative;
padding-left: 50%;
}
&:before {
.mobile-table-header {
font-weight: 400;
position: absolute;
top: 6px;
@ -68,57 +69,6 @@ const MobileTableStyle = styled(Container)`
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) => {
@ -144,6 +94,8 @@ const Table = (props) => {
}
elem = newElem;
}
let indexModificator = 2;
if (props.tableType === 'Leaderboard') indexModificator = 4;
return elem.map((iterableElem, i) => {
return (
<Body
@ -153,6 +105,11 @@ const Table = (props) => {
textAlign={props.iterableColumnElement.align}
minWidth="72px"
>
{IS_MOBILE() && (
<Container className="mobile-table-header">
{props.headerElements[indexModificator + i]}
</Container>
)}
{props.iterableColumnElement.format
? props.iterableColumnElement.format(iterableElem)
: iterableElem}
@ -162,34 +119,25 @@ const Table = (props) => {
};
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 (
<Medium
<RowStyle
key={`leaderboard-static-elemName-${i}-${elem[elemName.name]}`}
as="td"
order={elemName.order}
textAlign={elemName.align}
>
{IS_MOBILE() && (
<Container className="mobile-table-header">
{props.headerElements[i]}
</Container>
)}
{elemName.format
? elemName.format(elem[elemName.name])
: elem[elemName.name]}
</Medium>
);
});
}
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>
</RowStyle>
);
});
};
@ -239,15 +187,13 @@ const Table = (props) => {
>
{elem.replace('.', ' ')}
</Medium>
{elem !== '#' ? (
{elem !== '#' && (
<ColumnFilterIcon
cursor="pointer"
index={i}
active={activeIcon}
rotateIcon={rotateActiveIcon}
/>
) : (
''
)}
</FlexRow>
);
@ -276,9 +222,8 @@ const Table = (props) => {
</FlexColumn>
</FlexColumn>
);
} else {
return <Medium margin="72px 0">No results ;c</Medium>;
}
return <Medium margin="72px 0">No results ;c</Medium>;
};
const mobileRender = () => {
@ -291,17 +236,6 @@ const Table = (props) => {
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 (
@ -314,9 +248,8 @@ const Table = (props) => {
</Container>
</MobileTableStyle>
);
} else {
return <Medium margin="72px 0">No results ;c</Medium>;
}
return <Medium margin="72px 0">No results ;c</Medium>;
};
return (