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

Line to rows in Leaderboard table

Browse Source
This commit is contained in:
mattyl006 2022-07-18 15:50:38 +02:00
parent eade652339
commit 6a13edfdd9
3 changed files with 18 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/components/elements/Table.js
View File

@ -2,6 +2,16 @@ 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 {Body, Medium} from "../../utils/fonts"; import {Body, Medium} from "../../utils/fonts";
import styled from "styled-components";
const Line = styled(FlexRow)`
position: absolute;
top: -6px;
left: 0;
width: 100%;
background-color: ${({theme}) => theme.colors.dark04};
height: 1px;
`;
const Table = (props) => { const Table = (props) => {
const headerElements = ['#', 'submitter', 'when', 'result', 'entries']; const headerElements = ['#', 'submitter', 'when', 'result', 'entries'];
@ -22,8 +32,9 @@ const Table = (props) => {
<FlexColumn as='tbody'> <FlexColumn as='tbody'>
{submissions.map((submission, index) => { {submissions.map((submission, index) => {
return ( return (
<Grid as='tr' gridTemplateColumns='1fr 3fr 3fr 1fr 1fr' gridGap='10px' <Grid as='tr' key={`leaderboard-row-${index}`} gridTemplateColumns='1fr 3fr 3fr 1fr 1fr'
key={`leaderboard-row-${index}`}> gridGap='10px' margin='10px 0 0 0' position='relative'>
<Line/>
<Body as='td'> <Body as='td'>
{index} {index}
</Body> </Body>
@ -34,7 +45,7 @@ const Table = (props) => {
{submission.when.slice(11, 16)} {submission.when.slice(0, 10)} {submission.when.slice(11, 16)} {submission.when.slice(0, 10)}
</Body> </Body>
<Body as='td'> <Body as='td'>
{submission.evaluations[0].score.slice(0, 7)} {submission.evaluations[0].score}
</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.length}
@ -50,7 +61,8 @@ const Table = (props) => {
return ( return (
<> <>
<FlexColumn as='table'> <FlexColumn as='table'>
<Grid as='thead' gridTemplateColumns='1fr 3fr 3fr 1fr 1fr' gridGap='10px' width='100%'> <Grid as='thead' gridTemplateColumns='1fr 3fr 3fr 1fr 1fr'
gridGap='10px' width='100%'>
{headerElements.map((elem, index) => { {headerElements.map((elem, index) => {
return ( return (
<FlexRow as='tr' key={`leaderboard-header-${index}`} <FlexRow as='tr' key={`leaderboard-header-${index}`}

1
src/utils/colors.js
View File

@ -5,6 +5,7 @@ const colors = {
green05: 'rgba(27, 153, 139, 0.5)', green05: 'rgba(27, 153, 139, 0.5)',
dark: '#343434', dark: '#343434',
dark03: 'rgba(52, 52, 52, 0.3)', dark03: 'rgba(52, 52, 52, 0.3)',
dark04: 'rgba(52, 52, 52, 0.4)',
dark05: 'rgba(52, 52, 52, 0.5)', dark05: 'rgba(52, 52, 52, 0.5)',
dark08: 'rgba(52, 52, 52, 0.8)', dark08: 'rgba(52, 52, 52, 0.8)',
}; };

1
src/utils/containers.js
View File

@ -1,6 +1,7 @@
import styled from 'styled-components'; import styled from 'styled-components';
const Container = styled.div` const Container = styled.div`
position: ${({position}) => position ? position : 'static'};
padding: ${({padding}) => padding ? padding : '0'}; padding: ${({padding}) => padding ? padding : '0'};
margin: ${({margin}) => margin ? margin : '0'}; margin: ${({margin}) => margin ? margin : '0'};
width: ${({width}) => width ? width : 'auto'}; width: ${({width}) => width ? width : 'auto'};