Leaderboard on desktop complete
This commit is contained in:
parent
98821fff5a
commit
b4acc25550
@ -1,10 +1,12 @@
|
|||||||
import React from "react";
|
import React from "react";
|
||||||
import {FlexColumn, FlexRow, Grid} from "../../../utils/containers";
|
import {FlexColumn, FlexRow, Grid} from "../../../utils/containers";
|
||||||
import getChallengeSubmissions from "../../../api/getChallengeSubmissions";
|
import getChallengeSubmissions from "../../../api/getChallengeSubmissions";
|
||||||
import {Medium} from "../../../utils/fonts";
|
import {H3, Medium} from "../../../utils/fonts";
|
||||||
import _renderSubmissions from "./_renderSubmissions";
|
import _renderSubmissions from "./_renderSubmissions";
|
||||||
import Pager from "../Pager";
|
import Pager from "../Pager";
|
||||||
import {CALC_PAGES} from "../../../utils/globals";
|
import {CALC_PAGES} from "../../../utils/globals";
|
||||||
|
import Media from "react-media";
|
||||||
|
import theme from "../../../utils/theme";
|
||||||
|
|
||||||
const Table = (props) => {
|
const Table = (props) => {
|
||||||
const headerElements = ['#', 'submitter', 'when', 'result', 'entries'];
|
const headerElements = ['#', 'submitter', 'when', 'result', 'entries'];
|
||||||
@ -38,9 +40,9 @@ const Table = (props) => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const mobileRender = () => {
|
||||||
return (
|
return (
|
||||||
<>
|
<FlexColumn as='table' margin='0 0 32px 0' minHeight='380px'>
|
||||||
<FlexColumn as='table' margin='0 0 32px 0'>
|
|
||||||
<Grid as='thead' gridTemplateColumns='1fr 3fr 3fr 1fr 1fr'
|
<Grid as='thead' gridTemplateColumns='1fr 3fr 3fr 1fr 1fr'
|
||||||
gridGap='10px' width='100%'>
|
gridGap='10px' width='100%'>
|
||||||
{headerElements.map((elem, index) => {
|
{headerElements.map((elem, index) => {
|
||||||
@ -54,6 +56,37 @@ const Table = (props) => {
|
|||||||
</Grid>
|
</Grid>
|
||||||
{renderSubmissions()}
|
{renderSubmissions()}
|
||||||
</FlexColumn>
|
</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}
|
<Pager pageNr={pageNr} nextPage={nextPage} previousPage={previousPage}
|
||||||
pages={CALC_PAGES(challengeData.submissions ? challengeData.submissions : [])}/>
|
pages={CALC_PAGES(challengeData.submissions ? challengeData.submissions : [])}/>
|
||||||
</>
|
</>
|
||||||
|
@ -16,27 +16,28 @@ const _renderSubmissions = (pageNr, submissions) => {
|
|||||||
const n = (pageNr - 1) * ELEMENTS_PER_PAGE;
|
const n = (pageNr - 1) * ELEMENTS_PER_PAGE;
|
||||||
if (submissions) {
|
if (submissions) {
|
||||||
return (
|
return (
|
||||||
<FlexColumn as='tbody'>
|
<FlexColumn as='tbody' width='100%'>
|
||||||
{submissions.slice(n, n + ELEMENTS_PER_PAGE).map((submission, index) => {
|
{submissions.slice(n, n + ELEMENTS_PER_PAGE).map((submission, index) => {
|
||||||
return (
|
return (
|
||||||
<Grid as='tr' key={`leaderboard-row-${index}`} gridTemplateColumns='1fr 3fr 3fr 1fr 1fr'
|
<Grid as='tr' key={`leaderboard-row-${index}`} gridTemplateColumns='1fr 3fr 3fr 1fr 1fr'
|
||||||
gridGap='10px' margin='10px 0 0 0' position='relative'>
|
gridGap='10px' margin='10px 0 0 0' position='relative' width='100%'>
|
||||||
<Line as='td'/>
|
|
||||||
<Body as='td'>
|
<Body as='td'>
|
||||||
{index + n + 1}
|
{index + n + 1}
|
||||||
</Body>
|
</Body>
|
||||||
<Body as='td'>
|
<Body as='td'>
|
||||||
{submission.submitter}
|
{submission.submitter ? submission.submitter : '[anonymized]'}
|
||||||
</Body>
|
</Body>
|
||||||
<Body as='td'>
|
<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>
|
||||||
<Body as='td'>
|
<Body as='td'>
|
||||||
{submission.evaluations[0].score}
|
{submission.evaluations[0] ? submission.evaluations[0].score : 'xxx'}
|
||||||
</Body>
|
</Body>
|
||||||
<Body as='td' textAlign='right' padding='0 2px 0 0'>
|
<Body as='td' textAlign='right' padding='0 2px 0 0'>
|
||||||
{submission.version.length}
|
{submission.version ? submission.version.length : 1}
|
||||||
</Body>
|
</Body>
|
||||||
|
<Line as='td'/>
|
||||||
</Grid>
|
</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 getChallenges from "../api/getChallenges";
|
||||||
import theme from "../utils/theme";
|
import theme from "../utils/theme";
|
||||||
import MobileChallengeMenu from "../components/elements/MobileChallengeMenu";
|
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 Readme from "../components/sections/Readme";
|
||||||
import HowTo from "../components/sections/HowTo";
|
import HowTo from "../components/sections/HowTo";
|
||||||
import MyEntries from "../components/sections/MyEntries";
|
import MyEntries from "../components/sections/MyEntries";
|
||||||
@ -47,7 +47,7 @@ const Challenge = () => {
|
|||||||
case 4:
|
case 4:
|
||||||
return <Submit/>
|
return <Submit/>
|
||||||
default:
|
default:
|
||||||
return <Leaderboard/>
|
return <Leaderboard challengeName={challengeName}/>
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user