Table on mobile

src/components/specific_challenge/Leaderboard/Leaderboard.js

@@ -82,6 +82,14 @@ const Leaderboard = (props) => {
         return header;
     };
 
+    const getLeaderboardHeaderMobile = () => {
+        let header = ['#', 'submitter', 'entries', 'when'];
+        for (let metric of getPossibleMetrics()) {
+            header.push(metric);
+        }
+        return header;
+    };
+
     const sortByUpdate = (elem) => {
         let metricIndex = 0;
         let newEntries = entries;
@@ -129,18 +137,38 @@ const Leaderboard = (props) => {
 
     const mobileRender = () => {
         return (
-            <FlexColumn padding='24px 12px' as='section' id='start'>
+            <FlexColumn padding='24px 12px' width='70%' as='section' id='start'>
                 <H2 as='h2' margin='0 0 12px 0'>
                     Leaderboard
                 </H2>
-                <Search searchQueryHandler={searchQueryHandler}/>
+                {!loading ?
-                <Table challengeName={props.challengeName} loading={loading}
+                    <>
-                       headerElements={['#', 'submitter', 'result', 'entries', 'when']}
+                        <Search searchQueryHandler={searchQueryHandler}/>
-                       pageNr={pageNr} submissions={entries} sortByUpdate={sortByUpdate}/>
+                        <Table challengeName={props.challengeName} headerElements={getLeaderboardHeaderMobile()}
-                <Pager pageNr={pageNr} width='48px' borderRadius='64px'
+                               gridTemplateColumns={entries[0] ? '1fr 3fr ' + '2fr '.repeat(entries[0].evaluations.length) + '1fr 2fr' : ''}
-                       pages={CALC_PAGES(entries ? entries : [])}
+                               user={props.user}
-                       nextPage={nextPage} previousPage={previousPage}
+                               staticColumnElements={
-                       number={`${pageNr} / ${CALC_PAGES(entries ? entries : [])}`}/>
+                                   [
+                                       {name: 'id', format: null, order: 1, align: 'left'},
+                                       {name: 'submitter', format: null, order: 2, align: 'left'},
+                                       {name: 'times', format: null, order: 4, align: 'left'},
+                                       {name: 'when', format: RENDER_WHEN, order: 5, align: 'right'}
+                                   ]
+                               }
+                               metrics={getPossibleMetrics()}
+                               iterableColumnElement={{
+                                   name: 'evaluations',
+                                   format: EVALUATIONS_FORMAT,
+                                   order: 3,
+                                   align: 'left'
+                               }}
+                               pageNr={pageNr} elements={entries} sortByUpdate={sortByUpdate}/>
+                        <Pager pageNr={pageNr} width='48px' borderRadius='64px'
+                               pages={CALC_PAGES(entries)}
+                               nextPage={nextPage} previousPage={previousPage}
+                               number={`${pageNr} / ${CALC_PAGES(entries)}`}/>
+                    </>
+                    : <Loading/>}
             </FlexColumn>
         );
     };

src/components/specific_challenge/Table.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import {FlexColumn, FlexRow, Grid} from '../../utils/containers';
+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';
@@ -17,20 +17,102 @@ const Line = styled(FlexRow)`
   height: ${({height}) => height ? height : '1px'};
 `;
 
+const MobileTableStyle = styled(Container)`
+  width: 100%;
+  border-collapse: collapse;
+  margin: 32px 0;
+
+  tr:nth-of-type(odd) {
+    background: ${({theme}) => theme.colors.dark03};
+  }
+
+  th {
+    background: ${({theme}) => theme.colors.dark05};
+    color: ${({theme}) => theme.colors.white};
+  }
+
+  td, th {
+    padding: 6px;
+    border: 1px solid ${({theme}) => theme.colors.white};
+    text-align: left;
+  }
+
+  display: block;
+
+  thead, tbody, th, td {
+    display: block;
+  }
+
+  thead tr {
+    position: absolute;
+    top: -9999px;
+    left: -9999px;
+  }
+
+  td {
+    border: none;
+    border-bottom: 1px solid ${({theme}) => theme.colors.dark01};
+    position: relative;
+    padding-left: 50%;
+
+    &:before {
+      font-weight: 400;
+      position: absolute;
+      top: 6px;
+      left: 6px;
+      width: 45%;
+      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) => {
     const [, updateState] = React.useState();
     const forceUpdate = React.useCallback(() => updateState({}), []);
     const [activeIcon, setActiveIcon] = React.useState(null);
     const [rotateActiveIcon, setRotateActiveIcon] = React.useState(false);
 
-    const mobileRender = () => {
-        return (
-            <FlexColumn as='table' margin='20px 0 32px 0' minHeight='380px'>
-                {/*{props.renderElements('10px', props.headerElements)}*/}
-            </FlexColumn>
-        );
-    };
-
     const metricsRender = (elem) => {
         if (!props.iterableColumnElement)
             return <></>;
@@ -148,6 +230,45 @@ const Table = (props) => {
         }
     };
 
+    const mobileRender = () => {
+        const n = (props.pageNr - 1) * ELEMENTS_PER_PAGE;
+        let elementsToMap = props.elements.slice(n, n + ELEMENTS_PER_PAGE);
+        if (elementsToMap.length > 0) {
+            return (
+                <MobileTableStyle as='table' 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 (
+                                <Grid as='tr' key={`leaderboard-row-${index}`}>
+                                    {rowRender(elem)}
+                                    {props.headerElements ? metricsRender(elem) : ''}
+                                </Grid>
+                            );
+                        })}
+                    </Container>
+                </MobileTableStyle>
+            );
+        } else {
+            return (
+                <Medium margin='72px 0'>
+                    No results ;c
+                </Medium>
+            );
+        }
+    };
+
     return (
         <>
             <Media query={theme.mobile}>

src/pages/Challenge.js

@@ -41,7 +41,8 @@ const Challenge = (props) => {
             case 3:
                 return <MyEntries challengeName={challengeName}/>;
             case 4:
-                return <Submit popUpMessageHandler={props.popUpMessageHandler} challengeName={challengeName} setLoading={setLoading}/>;
+                return <Submit popUpMessageHandler={props.popUpMessageHandler} challengeName={challengeName}
+                               setLoading={setLoading}/>;
             default:
                 return <Leaderboard challengeName={challengeName} mainMetric={challenge.mainMetric}/>;
         }
@@ -84,14 +85,13 @@ const Challenge = (props) => {
                     </FlexColumn>
                 </>
             );
-        }
+        } else {
-        else {
             return (
                 <FlexColumn position='fixed' top='0' left='0' width='100%' height='100vh' zIndex='10'>
                     <H2 as='h1'>
                         Submission processing...
                     </H2>
-                    <Loading />
+                    <Loading/>
                 </FlexColumn>
             );
         }