Leaderboard on desktop complete
This commit is contained in:
parent
98821fff5a
commit
b4acc25550
@ -1,10 +1,12 @@
|
||||
import React from "react";
|
||||
import {FlexColumn, FlexRow, Grid} from "../../../utils/containers";
|
||||
import getChallengeSubmissions from "../../../api/getChallengeSubmissions";
|
||||
import {Medium} from "../../../utils/fonts";
|
||||
import {H3, Medium} from "../../../utils/fonts";
|
||||
import _renderSubmissions from "./_renderSubmissions";
|
||||
import Pager from "../Pager";
|
||||
import {CALC_PAGES} from "../../../utils/globals";
|
||||
import Media from "react-media";
|
||||
import theme from "../../../utils/theme";
|
||||
|
||||
const Table = (props) => {
|
||||
const headerElements = ['#', 'submitter', 'when', 'result', 'entries'];
|
||||
@ -38,9 +40,9 @@ const Table = (props) => {
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<FlexColumn as='table' margin='0 0 32px 0'>
|
||||
const mobileRender = () => {
|
||||
return (
|
||||
<FlexColumn as='table' margin='0 0 32px 0' minHeight='380px'>
|
||||
<Grid as='thead' gridTemplateColumns='1fr 3fr 3fr 1fr 1fr'
|
||||
gridGap='10px' width='100%'>
|
||||
{headerElements.map((elem, index) => {
|
||||
@ -54,6 +56,37 @@ const Table = (props) => {
|
||||
</Grid>
|
||||
{renderSubmissions()}
|
||||
</FlexColumn>
|
||||
|
||||
);
|
||||
}
|
||||
|
||||
const desktopRender = () => {
|
||||
return (
|
||||
<FlexColumn as='table' margin='0 0 72px 0' minHeight='438px'>
|
||||
<Grid as='thead' gridTemplateColumns='1fr 3fr 3fr 1fr 1fr'
|
||||
gridGap='10px' width='100%' margin='0 0 28px 0'>
|
||||
{headerElements.map((elem, index) => {
|
||||
return (
|
||||
<FlexRow as='tr' key={`leaderboard-header-${index}`}
|
||||
alignmentX={elem === 'entries' ? 'flex-end' : 'flex-start'}>
|
||||
<H3 as='th'>{elem}</H3>
|
||||
</FlexRow>
|
||||
)
|
||||
})}
|
||||
</Grid>
|
||||
{renderSubmissions()}
|
||||
</FlexColumn>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Media query={theme.mobile}>
|
||||
{mobileRender()}
|
||||
</Media>
|
||||
<Media query={theme.desktop}>
|
||||
{desktopRender()}
|
||||
</Media>
|
||||
<Pager pageNr={pageNr} nextPage={nextPage} previousPage={previousPage}
|
||||
pages={CALC_PAGES(challengeData.submissions ? challengeData.submissions : [])}/>
|
||||
</>
|
||||
|
||||
@ -16,27 +16,28 @@ const _renderSubmissions = (pageNr, submissions) => {
|
||||
const n = (pageNr - 1) * ELEMENTS_PER_PAGE;
|
||||
if (submissions) {
|
||||
return (
|
||||
<FlexColumn as='tbody'>
|
||||
<FlexColumn as='tbody' width='100%'>
|
||||
{submissions.slice(n, n + ELEMENTS_PER_PAGE).map((submission, index) => {
|
||||
return (
|
||||
<Grid as='tr' key={`leaderboard-row-${index}`} gridTemplateColumns='1fr 3fr 3fr 1fr 1fr'
|
||||
gridGap='10px' margin='10px 0 0 0' position='relative'>
|
||||
<Line as='td'/>
|
||||
gridGap='10px' margin='10px 0 0 0' position='relative' width='100%'>
|
||||
<Body as='td'>
|
||||
{index + n + 1}
|
||||
</Body>
|
||||
<Body as='td'>
|
||||
{submission.submitter}
|
||||
{submission.submitter ? submission.submitter : '[anonymized]'}
|
||||
</Body>
|
||||
<Body as='td'>
|
||||
{submission.when.slice(11, 16)} {submission.when.slice(0, 10)}
|
||||
{submission.when ? `${submission.when.slice(11, 16)} ${submission.when.slice(0, 10)}`
|
||||
: 'xxx'}
|
||||
</Body>
|
||||
<Body as='td'>
|
||||
{submission.evaluations[0].score}
|
||||
{submission.evaluations[0] ? submission.evaluations[0].score : 'xxx'}
|
||||
</Body>
|
||||
<Body as='td' textAlign='right' padding='0 2px 0 0'>
|
||||
{submission.version.length}
|
||||
{submission.version ? submission.version.length : 1}
|
||||
</Body>
|
||||
<Line as='td'/>
|
||||
</Grid>
|
||||
);
|
||||
})}
|
||||
|
||||
@ -1,32 +0,0 @@
|
||||
import React from "react";
|
||||
import Media from "react-media";
|
||||
import theme from "../../../utils/theme";
|
||||
import _mobileRender from "./_mobileRender";
|
||||
import _desktopRender from "./_desktopRender";
|
||||
|
||||
const Leaderboard = (props) => {
|
||||
const [variant, setVariant] = React.useState(0);
|
||||
|
||||
const mobileRender = () => {
|
||||
return _mobileRender(variant, setVariant, props.challengeName);
|
||||
}
|
||||
|
||||
const desktopRender = () => {
|
||||
return _desktopRender(variant, setVariant, props.challengeName);
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Media query={theme.mobile}>
|
||||
{mobileRender()}
|
||||
</Media>
|
||||
<Media query={theme.desktop}>
|
||||
{desktopRender()}
|
||||
</Media>
|
||||
</>
|
||||
)
|
||||
|
||||
|
||||
}
|
||||
|
||||
export default Leaderboard;
|
||||
@ -1,44 +0,0 @@
|
||||
import {FlexColumn, FlexRow} from "../../../utils/containers";
|
||||
import {H2, H3} from "../../../utils/fonts";
|
||||
import theme from "../../../utils/theme";
|
||||
import styled from "styled-components";
|
||||
|
||||
const BoardVariantDesktop = styled(FlexRow)`
|
||||
transition: background-color 0.3s ease-in-out;
|
||||
border: 1px solid ${({theme}) => theme.colors.green05};
|
||||
background-color: ${({theme, active}) => active ? theme.colors.green05 : theme.colors.white};
|
||||
|
||||
&:hover {
|
||||
background-color: ${({theme}) => theme.colors.green05};
|
||||
}
|
||||
|
||||
div {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
`;
|
||||
|
||||
const desktopRender = (variant, setVariant) => {
|
||||
return (
|
||||
<FlexColumn padding='24px' as='section'>
|
||||
<H2 as='h2' margin='0 0 32px 0'>
|
||||
Leaderboard
|
||||
</H2>
|
||||
<FlexRow border={`1px solid ${theme.colors.green05}`}>
|
||||
<BoardVariantDesktop as='button' width='150px' height='48px'
|
||||
active={0 === variant} onClick={() => setVariant(0)}>
|
||||
<H3 as='span'>
|
||||
By user
|
||||
</H3>
|
||||
</BoardVariantDesktop>
|
||||
<BoardVariantDesktop as='button' width='150px' height='48px'
|
||||
active={1 === variant} onClick={() => setVariant(1)}>
|
||||
<H3 as='span'>
|
||||
By metric
|
||||
</H3>
|
||||
</BoardVariantDesktop>
|
||||
</FlexRow>
|
||||
</FlexColumn>
|
||||
);
|
||||
}
|
||||
|
||||
export default desktopRender;
|
||||
@ -1,48 +0,0 @@
|
||||
import {FlexColumn, FlexRow} from "../../../utils/containers";
|
||||
import {H2} from "../../../utils/fonts";
|
||||
import styled from "styled-components";
|
||||
import Table from "../../elements/Table";
|
||||
|
||||
const BoardVariantMobile = styled(FlexRow)`
|
||||
transition: color, background-color 0.3s ease-in-out;
|
||||
background-color: ${({theme, active}) => active ? theme.colors.dark : theme.colors.white};
|
||||
color: ${({theme, active}) => active ? theme.colors.white : theme.colors.dark};
|
||||
font-size: 10px;
|
||||
font-family: 'Roboto', sans-serif;
|
||||
font-weight: 300;
|
||||
border-radius: 16px;
|
||||
border: 1px solid ${({theme}) => theme.colors.dark};
|
||||
padding: 6px 8px;
|
||||
cursor: pointer;
|
||||
box-shadow: ${({theme}) => theme.shadowRight};
|
||||
|
||||
* {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: ${({theme, active}) => active ? theme.colors.dark : theme.colors.white};
|
||||
color: ${({theme, active}) => active ? theme.colors.white : theme.colors.dark};
|
||||
}
|
||||
`;
|
||||
|
||||
const mobileRender = (variant, setVariant, challengeName) => {
|
||||
return (
|
||||
<FlexColumn padding='24px 12px' as='section'>
|
||||
<H2 as='h2' margin='0 0 12px 0'>
|
||||
Leaderboard
|
||||
</H2>
|
||||
<FlexRow gap='12px' margin='0 0 20px 0'>
|
||||
<BoardVariantMobile as='button' active={0 === variant} onClick={() => setVariant(0)}>
|
||||
By user
|
||||
</BoardVariantMobile>
|
||||
<BoardVariantMobile as='button' active={1 === variant} onClick={() => setVariant(1)}>
|
||||
By metric
|
||||
</BoardVariantMobile>
|
||||
</FlexRow>
|
||||
<Table challengeName={challengeName}/>
|
||||
</FlexColumn>
|
||||
);
|
||||
}
|
||||
|
||||
export default mobileRender;
|
||||
@ -1 +0,0 @@
|
||||
export {default} from './Leaderboard';
|
||||
105
src/components/sections/Leaderboard.js
Normal file
105
src/components/sections/Leaderboard.js
Normal file
@ -0,0 +1,105 @@
|
||||
import React from "react";
|
||||
import Media from "react-media";
|
||||
import theme from "../../utils/theme";
|
||||
import {FlexColumn, FlexRow} from "../../utils/containers";
|
||||
import {H2, H3} from "../../utils/fonts";
|
||||
import Table from "../elements/Table";
|
||||
import styled from "styled-components";
|
||||
|
||||
const BoardVariantMobile = styled(FlexRow)`
|
||||
transition: color, background-color 0.3s ease-in-out;
|
||||
background-color: ${({theme, active}) => active ? theme.colors.dark : theme.colors.white};
|
||||
color: ${({theme, active}) => active ? theme.colors.white : theme.colors.dark};
|
||||
font-size: 10px;
|
||||
font-family: 'Roboto', sans-serif;
|
||||
font-weight: 300;
|
||||
border-radius: 16px;
|
||||
border: 1px solid ${({theme}) => theme.colors.dark};
|
||||
padding: 6px 8px;
|
||||
cursor: pointer;
|
||||
box-shadow: ${({theme}) => theme.shadowRight};
|
||||
|
||||
* {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: ${({theme, active}) => active ? theme.colors.dark : theme.colors.white};
|
||||
color: ${({theme, active}) => active ? theme.colors.white : theme.colors.dark};
|
||||
}
|
||||
`;
|
||||
|
||||
const BoardVariantDesktop = styled(FlexRow)`
|
||||
transition: background-color 0.3s ease-in-out;
|
||||
border: 1px solid ${({theme}) => theme.colors.green05};
|
||||
background-color: ${({theme, active}) => active ? theme.colors.green05 : theme.colors.white};
|
||||
|
||||
&:hover {
|
||||
background-color: ${({theme}) => theme.colors.green05};
|
||||
}
|
||||
|
||||
div {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
`;
|
||||
|
||||
const Leaderboard = (props) => {
|
||||
const [variant, setVariant] = React.useState(0);
|
||||
|
||||
const mobileRender = () => {
|
||||
return (
|
||||
<FlexColumn padding='24px 12px' as='section'>
|
||||
<H2 as='h2' margin='0 0 12px 0'>
|
||||
Leaderboard
|
||||
</H2>
|
||||
<FlexRow gap='12px' margin='0 0 20px 0'>
|
||||
<BoardVariantMobile as='button' active={0 === variant} onClick={() => setVariant(0)}>
|
||||
By user
|
||||
</BoardVariantMobile>
|
||||
<BoardVariantMobile as='button' active={1 === variant} onClick={() => setVariant(1)}>
|
||||
By metric
|
||||
</BoardVariantMobile>
|
||||
</FlexRow>
|
||||
<Table challengeName={props.challengeName}/>
|
||||
</FlexColumn>
|
||||
);
|
||||
}
|
||||
|
||||
const desktopRender = () => {
|
||||
return (
|
||||
<FlexColumn padding='24px' as='section'>
|
||||
<H2 as='h2' margin='0 0 32px 0'>
|
||||
Leaderboard
|
||||
</H2>
|
||||
<FlexRow border={`1px solid ${theme.colors.green05}`} margin='0 0 76px 0'>
|
||||
<BoardVariantDesktop as='button' width='150px' height='48px'
|
||||
active={0 === variant} onClick={() => setVariant(0)}>
|
||||
<H3 as='span'>
|
||||
By user
|
||||
</H3>
|
||||
</BoardVariantDesktop>
|
||||
<BoardVariantDesktop as='button' width='150px' height='48px'
|
||||
active={1 === variant} onClick={() => setVariant(1)}>
|
||||
<H3 as='span'>
|
||||
By metric
|
||||
</H3>
|
||||
</BoardVariantDesktop>
|
||||
</FlexRow>
|
||||
<Table challengeName={props.challengeName}/>
|
||||
</FlexColumn>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Media query={theme.mobile}>
|
||||
{mobileRender()}
|
||||
</Media>
|
||||
<Media query={theme.desktop}>
|
||||
{desktopRender()}
|
||||
</Media>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default Leaderboard;
|
||||
@ -5,7 +5,7 @@ import {H1, Medium} from "../utils/fonts";
|
||||
import getChallenges from "../api/getChallenges";
|
||||
import theme from "../utils/theme";
|
||||
import MobileChallengeMenu from "../components/elements/MobileChallengeMenu";
|
||||
import Leaderboard from "../components/sections/Leaderboar/Leaderboard";
|
||||
import Leaderboard from "../components/sections/Leaderboard";
|
||||
import Readme from "../components/sections/Readme";
|
||||
import HowTo from "../components/sections/HowTo";
|
||||
import MyEntries from "../components/sections/MyEntries";
|
||||
@ -47,7 +47,7 @@ const Challenge = () => {
|
||||
case 4:
|
||||
return <Submit/>
|
||||
default:
|
||||
return <Leaderboard/>
|
||||
return <Leaderboard challengeName={challengeName}/>
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user