init new mobile table

src/api/getChallengeLeaderboard.js

@@ -53,7 +53,6 @@ const getChallengeLeaderboard = (
       for (let _ of tests) {
         initSetScoreSorted.push(false);
       }
-      console.log(result);
       for (let setDataState of setDataStates) setDataState(result);
       if (setScoreSorted) setScoreSorted(initSetScoreSorted);
       if (setLoadingState) setLoadingState(false);

src/components/generic/Table/Table.js

@@ -7,6 +7,8 @@ import TableRowFooter from './components/TableRowFooter';
 import deleteSubmission from '../../../api/deleteSubmission';
 import theme from '../../../utils/theme';
 import DeletePopUp from './components/DeletePopUp/DeletePopUp';
+import MobileTable from './components/MobileTable/MobileTable';
+import Media from 'react-media';
 
 const Table = ({
   items,
@@ -31,34 +33,52 @@ const Table = ({
     );
   };
 
+  const desktopRender = () => {
+    return (
+      <TableStyle rowFooter={rowFooter}>
+        <TableHeader
+          orderedKeys={orderedKeys}
+          sortByUpdate={sortByUpdate}
+          tableUpdate={tableUpdate}
+        />
+        {itemsToRender.map((item, i) => {
+          return (
+            <tr key={`table-row-${i}`} className="TableStyle__tr">
+              <DeletePopUp
+                item={item}
+                setDeletePopUp={setDeletePopUp}
+                deletePopUp={deletePopUp}
+                deleteItem={deleteItem}
+              />
+              <TableRowItems orderedKeys={orderedKeys} item={item} i={i} />
+              <TableRowFooter
+                deleteItem={() => setDeletePopUp(true)}
+                rowFooter={rowFooter}
+                item={item}
+                i={i}
+              />
+              <RowsBackgroundStyle i={i} />
+            </tr>
+          );
+        })}
+      </TableStyle>
+    );
+  };
+
   return (
-    <TableStyle rowFooter={rowFooter}>
-      <TableHeader
-        orderedKeys={orderedKeys}
-        sortByUpdate={sortByUpdate}
-        tableUpdate={tableUpdate}
-      />
-      {itemsToRender.map((item, i) => {
-        return (
-          <tr key={`table-row-${i}`} className="TableStyle__tr">
-            <DeletePopUp
-              item={item}
-              setDeletePopUp={setDeletePopUp}
-              deletePopUp={deletePopUp}
-              deleteItem={deleteItem}
-            />
-            <TableRowItems orderedKeys={orderedKeys} item={item} i={i} />
-            <TableRowFooter
-              deleteItem={() => setDeletePopUp(true)}
-              rowFooter={rowFooter}
-              item={item}
-              i={i}
-            />
-            <RowsBackgroundStyle i={i} />
-          </tr>
-        );
-      })}
-    </TableStyle>
+    <>
+      <Media query={theme.mobile}>
+        <MobileTable
+          elements={itemsToRender}
+          setDeletePopUp={setDeletePopUp}
+          deletePopUp={deletePopUp}
+          deleteItem={deleteItem}
+          orderedKeys={orderedKeys}
+          rowFooter={rowFooter}
+        />
+      </Media>
+      <Media query={theme.desktop}>{desktopRender()}</Media>
+    </>
   );
 };
 

src/components/generic/Table/components/MobileTable/MobileTable.js

@@ -0,0 +1,96 @@
+import React from 'react';
+import { Container } from '../../../../../utils/containers';
+import styled from 'styled-components';
+import DeletePopUp from '../DeletePopUp/DeletePopUp';
+import TableRowItems from '../TableRowItems/TableRowItems';
+import TableRowFooter from '../TableRowFooter/TableRowFooter';
+
+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;
+  }
+  thead,
+  tbody,
+  th,
+  tr,
+  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%;
+  }
+  .mobile-table-header {
+    font-weight: 500;
+    position: absolute;
+    top: 6px;
+    left: 6px;
+    width: 45%;
+    padding-right: 10px;
+    white-space: nowrap;
+  }
+  .TableStyle__row-footer {
+    padding: 0 8px;
+    min-height: 36px;
+    justify-content: space-between;
+  }
+  .TableStyle__tag {
+    color: ${({ theme }) => theme.colors.white};
+    background-color: ${({ theme }) => theme.colors.green08};
+    padding: 4px;
+    border-radius: 2px;
+    font-size: 12px;
+    font-weight: 600;
+  }
+  .TableStyle__tags-container {
+    gap: 4px;
+  }
+`;
+
+const MobileTable = (props) => {
+  return (
+    <MobileTableStyle as="table">
+      {props.elements.map((item, i) => {
+        return (
+          <tr key={`table-row-${i}`} className="TableStyle__tr">
+            <DeletePopUp
+              item={item}
+              setDeletePopUp={props.setDeletePopUp}
+              deletePopUp={props.deletePopUp}
+              deleteItem={props.deleteItem}
+            />
+            <TableRowItems orderedKeys={props.orderedKeys} item={item} i={i} />
+            <TableRowFooter
+              deleteItem={() => props.setDeletePopUp(true)}
+              rowFooter={props.rowFooter}
+              item={item}
+              i={i}
+            />
+          </tr>
+        );
+      })}
+    </MobileTableStyle>
+  );
+};
+
+export default MobileTable;

src/components/generic/Table/components/MobileTable/index.js

@@ -0,0 +1 @@
+export { default } from './MobileTable';

src/components/generic/Table/components/TableRowItems/TableRowItems.js

@@ -1,5 +1,10 @@
 import React from 'react';
-import { RENDER_WHEN, RENDER_METRIC_VALUE } from '../../../../../utils/globals';
+import {
+  RENDER_WHEN,
+  RENDER_METRIC_VALUE,
+  IS_MOBILE,
+} from '../../../../../utils/globals';
+import { Container } from '../../../../../utils/containers';
 
 const TableRowItems = ({ orderedKeys, item, i }) => {
   const renderValue = (keyValue) => {
@@ -15,6 +20,9 @@ const TableRowItems = ({ orderedKeys, item, i }) => {
       {orderedKeys.map((keyValue, j) => {
         return (
           <td key={`table-item-${i}-${j}`} className="TableStyle__td">
+            {IS_MOBILE() && (
+              <Container className="mobile-table-header">{keyValue}</Container>
+            )}
             {renderValue(keyValue)}
           </td>
         );

src/pages/Leaderboard/Leaderboard.js

@@ -159,7 +159,6 @@ const Leaderboard = (props) => {
 
   const n = (pageNr - 1) * (ELEMENTS_PER_PAGE * 2);
   const elements = entries.slice(n, n + ELEMENTS_PER_PAGE * 2);
-  console.log(entries);
 
   return (
     <FlexColumn

src/pages/Submit/model/SubmitReducer.js

@@ -1,7 +1,6 @@
 import SUBMIT_ACTION from './SubmitActionEnum';
 
 const SubmitReducer = (state, action) => {
-  console.log(`SubmitReducer: ${action.type}`);
   let newTags = state.tags;
   switch (action.type) {
     case SUBMIT_ACTION.SET_DESCRIPTION: