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:
parent
6a13f921ee
commit
6ba059b27b
@ -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>
|
||||
|
@ -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 = ({
|
||||
|
@ -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) => {
|
||||
|
Loading…
Reference in New Issue
Block a user