adding in columns for responsive layout

This commit is contained in:
Alex Windett 2017-02-03 12:35:33 +00:00
parent 63699eb2c7
commit e08fa9fb78
7 changed files with 66 additions and 33 deletions

View File

@ -1,4 +1,6 @@
const Container = require('@ui/components/container'); const Container = require('@ui/components/container');
const Row = require('@ui/components/row');
const Column = require('@ui/components/column');
const PropTypes = require('@root/prop-types'); const PropTypes = require('@root/prop-types');
const React = require('react'); const React = require('react');
const ReactRouter = require('react-router'); const ReactRouter = require('react-router');
@ -78,6 +80,8 @@ const Breadcrumb = ({
}) => { }) => {
return ( return (
<Container> <Container>
<Row>
<Column xs={12}>
<StyledDiv> <StyledDiv>
<H1 <H1
style={{ style={{
@ -87,6 +91,8 @@ const Breadcrumb = ({
{getNameLink(name)} {getNameLink(name)}
</H1> </H1>
</StyledDiv> </StyledDiv>
</Column>
</Row>
</Container> </Container>
); );
}; };

View File

@ -28,21 +28,21 @@ module.exports = () => (
</Column> </Column>
</Row> </Row>
<Row> <Row>
<Column xs={12}>
<Button> <Button>
<FormattedMessage id='edit-project-manifest' /> <FormattedMessage id='edit-project-manifest' />
</Button> </Button>
</Column>
</Row> </Row>
<Row> <Row>
<Column xs={12}>
<P> <P>
<FormattedMessage id='or-bring-in-from' /> <FormattedMessage id='or-bring-in-from' />
</P> </P>
</Row>
<Row>
<Column>
<Button secondary>GitHub</Button> <Button secondary>GitHub</Button>
</Column>
<Column>
<Button secondary>BitBucket</Button> <Button secondary>BitBucket</Button>
</Column> </Column>
</Row> </Row>
</div> </div>

View File

@ -1,12 +1,18 @@
const React = require('react'); const React = require('react');
const ReactIntl = require('react-intl'); const ReactIntl = require('react-intl');
const ReactRouter = require('react-router'); const ReactRouter = require('react-router');
const Styled = require('styled-components');
const Li = require('@ui/components/horizontal-list/li'); const Li = require('@ui/components/horizontal-list/li');
const constants = require('@ui/shared/constants');
const PropTypes = require('@root/prop-types'); const PropTypes = require('@root/prop-types');
const Ul = require('@ui/components/horizontal-list/ul'); const Ul = require('@ui/components/horizontal-list/ul');
const Breadcrumb = require('@components/breadcrumb'); const Breadcrumb = require('@components/breadcrumb');
const {
default: styled
} = Styled;
const { const {
FormattedMessage FormattedMessage
} = ReactIntl; } = ReactIntl;
@ -15,6 +21,22 @@ const {
Link Link
} = ReactRouter; } = ReactRouter;
const {
breakpoints,
} = constants;
const StyledHorizontalList = styled(Ul)`
${breakpoints.smallOnly`
padding: 0
`}
`;
const StyledHorizontalListItem = styled(Li)`
${breakpoints.smallOnly`
display: block;
`}
`;
const Section = (props) => { const Section = (props) => {
const { const {
children, children,
@ -22,19 +44,19 @@ const Section = (props) => {
} = props; } = props;
const navLinks = links.map((link) => ( const navLinks = links.map((link) => (
<Li key={link.name}> <StyledHorizontalListItem key={link.name}>
<Link activeClassName='active' to={link.pathname}> <Link activeClassName='active' to={link.pathname}>
<FormattedMessage id={link.name} /> <FormattedMessage id={link.name} />
</Link> </Link>
</Li> </StyledHorizontalListItem>
)); ));
return ( return (
<div> <div>
<Breadcrumb {...props} /> <Breadcrumb {...props} />
<Ul> <StyledHorizontalList name="project-nav">
{navLinks} {navLinks}
</Ul> </StyledHorizontalList>
{children} {children}
</div> </div>
); );

View File

@ -6,6 +6,8 @@ const PropTypes = require('@root/prop-types');
const ServiceItem = require('@components/service-item'); const ServiceItem = require('@components/service-item');
const selectors = require('@state/selectors'); const selectors = require('@state/selectors');
const Row = require('@ui/components/row');
const Column = require('@ui/components/column');
const { const {
connect connect
} = ReactRedux; } = ReactRedux;
@ -35,10 +37,12 @@ const Services = ({
)); ));
return ( return (
<div> <Row>
<Column xs={12}>
{empty} {empty}
{serviceList} {serviceList}
</div> </Column>
</Row>
); );
}; };

View File

@ -65,7 +65,7 @@ const borderRadius = match({
// based on bootstrap 4 // based on bootstrap 4
const style = css` const style = css`
box-sizing: border-box; box-sizing: border-box;
display: flex; display: inline-block;
justify-content: center; justify-content: center;
align-items: center; align-items: center;

View File

@ -59,6 +59,7 @@ module.exports = styled.div`
margin-left: ${margin}; margin-left: ${margin};
margin-right: ${margin}; margin-right: ${margin};
min-width: 100%;
flex-direction: ${direction('xs')}; flex-direction: ${direction('xs')};
justify-content: ${justify('xs')}; justify-content: ${justify('xs')};

View File

@ -23,7 +23,7 @@ const screen = 'only screen';
const screens = { const screens = {
// >= 768px // >= 768px
'small-only': `${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}) 'medium-only': `${screen} and (min-width: ${medium.lower})