1
0
mirror of https://github.com/yldio/copilot.git synced 2024-11-10 21:30:06 +02:00

making data table responsive

This commit is contained in:
Alex Windett 2017-02-03 13:27:14 +00:00
parent 6a13f921ee
commit 6ba059b27b
3 changed files with 34 additions and 8 deletions

View File

@ -2,27 +2,40 @@ const React = require('react');
const Styled = require('styled-components');
const fns = require('../../shared/functions');
const constants = require('../../shared/constants');
const {
remcalc
} = fns;
const {
breakpoints
} = constants;
const {
default: styled
} = Styled;
const StyledTableHeadItem = styled.td`
${props => `width: ${props.width}`}
border-bottom: none;
padding: ${remcalc(24)};
${breakpoints.medium`
${props => `width: ${props.mdWidth}`}
`}
`;
const StyledTableHead = styled.thead`
background: #fafafa;
box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.05);
border: solid ${remcalc(1)} #d8d8d8;
${breakpoints.smallOnly`
display: none;
`}
`;
const TableHeader = ({
columns
}) => {
@ -34,7 +47,7 @@ const TableHeader = ({
return (
<StyledTableHeadItem
key={i}
width={column.width || fallBackWidth}
mdWidth={column.width || fallBackWidth}
>
{column.title}
</StyledTableHeadItem>

View File

@ -2,6 +2,7 @@ const React = require('react');
const Styled = require('styled-components');
const fns = require('../../shared/functions');
const constants = require('../../shared/constants');
const {
remcalc
@ -11,12 +12,24 @@ const {
default: styled
} = Styled;
const {
breakpoints
} = constants;
const StyledRow = styled.tr`
border: solid ${remcalc(1)} #d8d8d8;
${breakpoints.smallOnly`
display: block;
`}
`;
const StyledTableItem = styled.td`
padding: ${remcalc(24)};
${breakpoints.smallOnly`
display: block;
`}
`;
const Row = ({

View File

@ -26,19 +26,19 @@ const screens = {
'smallOnly': `${screen} and (max-width: ${small.upper})`,
'small': `${screen} and (min-width: ${small.upper}})`,
// >= 1024px
'medium-only': `${screen} and (min-width: ${medium.lower})
'mediumOnly': `${screen} and (min-width: ${medium.lower})
and (max-width: ${medium.upper})`,
'medium-down': `${screen} and (max-width: ${medium.upper})`,
'mediumDown': `${screen} and (max-width: ${medium.upper})`,
'medium': `${screen} and (min-width: ${medium.lower})`,
// >= 1200px
'large-only': `${screen} and (min-width: ${large.lower})
'largeOnly': `${screen} and (min-width: ${large.lower})
and (max-width: ${large.upper})`,
'larg-down': `${screen} and (max-width: ${large.upper})`,
'largeDown': `${screen} and (max-width: ${large.upper})`,
'large': `${screen} and (min-width: 75rem)`,
'xlarge': `${screen} and (min-width: ${xlarge.lower})
and (max-width: ${xlarge.upper})`,
'xlarge-up': `${screen} and (min-width: ${xlarge.lower})`,
'xlargeUp': `${screen} and (min-width: ${xlarge.lower})`,
};
const breakpoints = Object.keys(screens).reduce((acc, label) => {