Spearhead/joyent-portal
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

making data table responsive

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
ui/src/components/table-data-table/table-head.js
View File

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

13
ui/src/components/table-data-table/table-row.js
View File

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

10
ui/src/shared/constants/breakpoints.js
View File

@ -26,19 +26,19 @@ const screens = {
'smallOnly': `${screen} and (max-width: ${small.upper})`, 'smallOnly': `${screen} and (max-width: ${small.upper})`,
'small': `${screen} and (min-width: ${small.upper}})`, 'small': `${screen} and (min-width: ${small.upper}})`,
// >= 1024px // >= 1024px
'medium-only': `${screen} and (min-width: ${medium.lower}) 'mediumOnly': `${screen} and (min-width: ${medium.lower})
and (max-width: ${medium.upper})`, 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})`, 'medium': `${screen} and (min-width: ${medium.lower})`,
// >= 1200px // >= 1200px
'large-only': `${screen} and (min-width: ${large.lower}) 'largeOnly': `${screen} and (min-width: ${large.lower})
and (max-width: ${large.upper})`, 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)`, 'large': `${screen} and (min-width: 75rem)`,
'xlarge': `${screen} and (min-width: ${xlarge.lower}) 'xlarge': `${screen} and (min-width: ${xlarge.lower})
and (max-width: ${xlarge.upper})`, 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) => { const breakpoints = Object.keys(screens).reduce((acc, label) => {