mirror of
https://github.com/yldio/copilot.git
synced 2024-11-10 21:30:06 +02:00
adding in columns for responsive layout
This commit is contained in:
parent
63699eb2c7
commit
e08fa9fb78
@ -1,4 +1,6 @@
|
||||
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 React = require('react');
|
||||
const ReactRouter = require('react-router');
|
||||
@ -78,15 +80,19 @@ const Breadcrumb = ({
|
||||
}) => {
|
||||
return (
|
||||
<Container>
|
||||
<StyledDiv>
|
||||
<H1
|
||||
style={{
|
||||
fontSize: remcalc(24)
|
||||
}}
|
||||
>
|
||||
{getNameLink(name)}
|
||||
</H1>
|
||||
</StyledDiv>
|
||||
<Row>
|
||||
<Column xs={12}>
|
||||
<StyledDiv>
|
||||
<H1
|
||||
style={{
|
||||
fontSize: remcalc(24)
|
||||
}}
|
||||
>
|
||||
{getNameLink(name)}
|
||||
</H1>
|
||||
</StyledDiv>
|
||||
</Column>
|
||||
</Row>
|
||||
</Container>
|
||||
);
|
||||
};
|
||||
|
@ -28,21 +28,21 @@ module.exports = () => (
|
||||
</Column>
|
||||
</Row>
|
||||
<Row>
|
||||
<Button>
|
||||
<FormattedMessage id='edit-project-manifest' />
|
||||
</Button>
|
||||
</Row>
|
||||
<Row>
|
||||
<P>
|
||||
<FormattedMessage id='or-bring-in-from' />
|
||||
</P>
|
||||
</Row>
|
||||
<Row>
|
||||
<Column>
|
||||
<Button secondary>GitHub</Button>
|
||||
<Column xs={12}>
|
||||
<Button>
|
||||
<FormattedMessage id='edit-project-manifest' />
|
||||
</Button>
|
||||
</Column>
|
||||
<Column>
|
||||
</Row>
|
||||
<Row>
|
||||
<Column xs={12}>
|
||||
<P>
|
||||
<FormattedMessage id='or-bring-in-from' />
|
||||
</P>
|
||||
|
||||
<Button secondary>GitHub</Button>
|
||||
<Button secondary>BitBucket</Button>
|
||||
|
||||
</Column>
|
||||
</Row>
|
||||
</div>
|
||||
|
@ -1,12 +1,18 @@
|
||||
const React = require('react');
|
||||
const ReactIntl = require('react-intl');
|
||||
const ReactRouter = require('react-router');
|
||||
const Styled = require('styled-components');
|
||||
|
||||
const Li = require('@ui/components/horizontal-list/li');
|
||||
const constants = require('@ui/shared/constants');
|
||||
const PropTypes = require('@root/prop-types');
|
||||
const Ul = require('@ui/components/horizontal-list/ul');
|
||||
const Breadcrumb = require('@components/breadcrumb');
|
||||
|
||||
const {
|
||||
default: styled
|
||||
} = Styled;
|
||||
|
||||
const {
|
||||
FormattedMessage
|
||||
} = ReactIntl;
|
||||
@ -15,6 +21,22 @@ const {
|
||||
Link
|
||||
} = ReactRouter;
|
||||
|
||||
const {
|
||||
breakpoints,
|
||||
} = constants;
|
||||
|
||||
const StyledHorizontalList = styled(Ul)`
|
||||
${breakpoints.smallOnly`
|
||||
padding: 0
|
||||
`}
|
||||
`;
|
||||
|
||||
const StyledHorizontalListItem = styled(Li)`
|
||||
${breakpoints.smallOnly`
|
||||
display: block;
|
||||
`}
|
||||
`;
|
||||
|
||||
const Section = (props) => {
|
||||
const {
|
||||
children,
|
||||
@ -22,19 +44,19 @@ const Section = (props) => {
|
||||
} = props;
|
||||
|
||||
const navLinks = links.map((link) => (
|
||||
<Li key={link.name}>
|
||||
<StyledHorizontalListItem key={link.name}>
|
||||
<Link activeClassName='active' to={link.pathname}>
|
||||
<FormattedMessage id={link.name} />
|
||||
</Link>
|
||||
</Li>
|
||||
</StyledHorizontalListItem>
|
||||
));
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Breadcrumb {...props} />
|
||||
<Ul>
|
||||
<StyledHorizontalList name="project-nav">
|
||||
{navLinks}
|
||||
</Ul>
|
||||
</StyledHorizontalList>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
|
@ -6,6 +6,8 @@ const PropTypes = require('@root/prop-types');
|
||||
const ServiceItem = require('@components/service-item');
|
||||
const selectors = require('@state/selectors');
|
||||
|
||||
const Row = require('@ui/components/row');
|
||||
const Column = require('@ui/components/column');
|
||||
const {
|
||||
connect
|
||||
} = ReactRedux;
|
||||
@ -35,10 +37,12 @@ const Services = ({
|
||||
));
|
||||
|
||||
return (
|
||||
<div>
|
||||
{empty}
|
||||
{serviceList}
|
||||
</div>
|
||||
<Row>
|
||||
<Column xs={12}>
|
||||
{empty}
|
||||
{serviceList}
|
||||
</Column>
|
||||
</Row>
|
||||
);
|
||||
};
|
||||
|
||||
|
@ -65,7 +65,7 @@ const borderRadius = match({
|
||||
// based on bootstrap 4
|
||||
const style = css`
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
display: inline-block;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
|
@ -59,6 +59,7 @@ module.exports = styled.div`
|
||||
|
||||
margin-left: ${margin};
|
||||
margin-right: ${margin};
|
||||
min-width: 100%;
|
||||
|
||||
flex-direction: ${direction('xs')};
|
||||
justify-content: ${justify('xs')};
|
||||
|
@ -23,7 +23,7 @@ const screen = 'only screen';
|
||||
|
||||
const screens = {
|
||||
// >= 768px
|
||||
'small-only': `${screen} and (max-width: ${small.upper})`,
|
||||
'smallOnly': `${screen} and (max-width: ${small.upper})`,
|
||||
'small': `${screen} and (min-width: ${small.upper}})`,
|
||||
// >= 1024px
|
||||
'medium-only': `${screen} and (min-width: ${medium.lower})
|
||||
|
Loading…
Reference in New Issue
Block a user