init new mobile table
This commit is contained in:
parent
0b3d809e3b
commit
d26a91b65c
@ -53,7 +53,6 @@ const getChallengeLeaderboard = (
|
|||||||
for (let _ of tests) {
|
for (let _ of tests) {
|
||||||
initSetScoreSorted.push(false);
|
initSetScoreSorted.push(false);
|
||||||
}
|
}
|
||||||
console.log(result);
|
|
||||||
for (let setDataState of setDataStates) setDataState(result);
|
for (let setDataState of setDataStates) setDataState(result);
|
||||||
if (setScoreSorted) setScoreSorted(initSetScoreSorted);
|
if (setScoreSorted) setScoreSorted(initSetScoreSorted);
|
||||||
if (setLoadingState) setLoadingState(false);
|
if (setLoadingState) setLoadingState(false);
|
||||||
|
@ -7,6 +7,8 @@ import TableRowFooter from './components/TableRowFooter';
|
|||||||
import deleteSubmission from '../../../api/deleteSubmission';
|
import deleteSubmission from '../../../api/deleteSubmission';
|
||||||
import theme from '../../../utils/theme';
|
import theme from '../../../utils/theme';
|
||||||
import DeletePopUp from './components/DeletePopUp/DeletePopUp';
|
import DeletePopUp from './components/DeletePopUp/DeletePopUp';
|
||||||
|
import MobileTable from './components/MobileTable/MobileTable';
|
||||||
|
import Media from 'react-media';
|
||||||
|
|
||||||
const Table = ({
|
const Table = ({
|
||||||
items,
|
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 (
|
return (
|
||||||
<TableStyle rowFooter={rowFooter}>
|
<>
|
||||||
<TableHeader
|
<Media query={theme.mobile}>
|
||||||
orderedKeys={orderedKeys}
|
<MobileTable
|
||||||
sortByUpdate={sortByUpdate}
|
elements={itemsToRender}
|
||||||
tableUpdate={tableUpdate}
|
setDeletePopUp={setDeletePopUp}
|
||||||
/>
|
deletePopUp={deletePopUp}
|
||||||
{itemsToRender.map((item, i) => {
|
deleteItem={deleteItem}
|
||||||
return (
|
orderedKeys={orderedKeys}
|
||||||
<tr key={`table-row-${i}`} className="TableStyle__tr">
|
rowFooter={rowFooter}
|
||||||
<DeletePopUp
|
/>
|
||||||
item={item}
|
</Media>
|
||||||
setDeletePopUp={setDeletePopUp}
|
<Media query={theme.desktop}>{desktopRender()}</Media>
|
||||||
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>
|
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -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;
|
@ -0,0 +1 @@
|
|||||||
|
export { default } from './MobileTable';
|
@ -1,5 +1,10 @@
|
|||||||
import React from 'react';
|
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 TableRowItems = ({ orderedKeys, item, i }) => {
|
||||||
const renderValue = (keyValue) => {
|
const renderValue = (keyValue) => {
|
||||||
@ -15,6 +20,9 @@ const TableRowItems = ({ orderedKeys, item, i }) => {
|
|||||||
{orderedKeys.map((keyValue, j) => {
|
{orderedKeys.map((keyValue, j) => {
|
||||||
return (
|
return (
|
||||||
<td key={`table-item-${i}-${j}`} className="TableStyle__td">
|
<td key={`table-item-${i}-${j}`} className="TableStyle__td">
|
||||||
|
{IS_MOBILE() && (
|
||||||
|
<Container className="mobile-table-header">{keyValue}</Container>
|
||||||
|
)}
|
||||||
{renderValue(keyValue)}
|
{renderValue(keyValue)}
|
||||||
</td>
|
</td>
|
||||||
);
|
);
|
||||||
|
@ -159,7 +159,6 @@ const Leaderboard = (props) => {
|
|||||||
|
|
||||||
const n = (pageNr - 1) * (ELEMENTS_PER_PAGE * 2);
|
const n = (pageNr - 1) * (ELEMENTS_PER_PAGE * 2);
|
||||||
const elements = entries.slice(n, n + ELEMENTS_PER_PAGE * 2);
|
const elements = entries.slice(n, n + ELEMENTS_PER_PAGE * 2);
|
||||||
console.log(entries);
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<FlexColumn
|
<FlexColumn
|
||||||
|
@ -1,7 +1,6 @@
|
|||||||
import SUBMIT_ACTION from './SubmitActionEnum';
|
import SUBMIT_ACTION from './SubmitActionEnum';
|
||||||
|
|
||||||
const SubmitReducer = (state, action) => {
|
const SubmitReducer = (state, action) => {
|
||||||
console.log(`SubmitReducer: ${action.type}`);
|
|
||||||
let newTags = state.tags;
|
let newTags = state.tags;
|
||||||
switch (action.type) {
|
switch (action.type) {
|
||||||
case SUBMIT_ACTION.SET_DESCRIPTION:
|
case SUBMIT_ACTION.SET_DESCRIPTION:
|
||||||
|
Loading…
Reference in New Issue
Block a user