From 818c841d2bb1ba36e5aa8aefd140414d60d0218f Mon Sep 17 00:00:00 2001
From: mattyl006 <mattyl@st.amu.edu.pl>
Date: Tue, 13 Dec 2022 14:58:58 +0100
Subject: [PATCH] Table on mobile

---
 .../Leaderboard/Leaderboard.js                |  46 ++++--
 src/components/specific_challenge/Table.js    | 139 ++++++++++++++++--
 src/pages/Challenge.js                        |   8 +-
 3 files changed, 171 insertions(+), 22 deletions(-)

diff --git a/src/components/specific_challenge/Leaderboard/Leaderboard.js b/src/components/specific_challenge/Leaderboard/Leaderboard.js
index 86c4d9e..6a3ce2a 100644
--- a/src/components/specific_challenge/Leaderboard/Leaderboard.js
+++ b/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}/>
-                <Table challengeName={props.challengeName} loading={loading}
-                       headerElements={['#', 'submitter', 'result', 'entries', 'when']}
-                       pageNr={pageNr} submissions={entries} sortByUpdate={sortByUpdate}/>
-                <Pager pageNr={pageNr} width='48px' borderRadius='64px'
-                       pages={CALC_PAGES(entries ? entries : [])}
-                       nextPage={nextPage} previousPage={previousPage}
-                       number={`${pageNr} / ${CALC_PAGES(entries ? entries : [])}`}/>
+                {!loading ?
+                    <>
+                        <Search searchQueryHandler={searchQueryHandler}/>
+                        <Table challengeName={props.challengeName} headerElements={getLeaderboardHeaderMobile()}
+                               gridTemplateColumns={entries[0] ? '1fr 3fr ' + '2fr '.repeat(entries[0].evaluations.length) + '1fr 2fr' : ''}
+                               user={props.user}
+                               staticColumnElements={
+                                   [
+                                       {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>
         );
     };
diff --git a/src/components/specific_challenge/Table.js b/src/components/specific_challenge/Table.js
index 41786c0..fc919fc 100644
--- a/src/components/specific_challenge/Table.js
+++ b/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}>
diff --git a/src/pages/Challenge.js b/src/pages/Challenge.js
index 255fd5d..2429a5b 100644
--- a/src/pages/Challenge.js
+++ b/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>
             );
         }