1
0
mirror of https://github.com/yldio/copilot.git synced 2024-11-11 05:40:11 +02:00

implement a simple header

This commit is contained in:
Sérgio Ramos 2016-12-13 14:35:39 +00:00
parent f933346f4b
commit 16f0ec6321
6 changed files with 98 additions and 10 deletions

View File

@ -0,0 +1,16 @@
const React = require('react');
const Styled = require('styled-components');
const fns = require('@ui/shared/functions');
const {
default: styled
} = Styled;
const {
remcalc
} = fns;
module.exports = styled.article`
margin-top: ${remcalc(78)};
`;

View File

@ -0,0 +1,7 @@
const Styled = require('styled-components');
const {
default: styled
} = Styled;
module.exports = styled.footer``;

View File

@ -0,0 +1,46 @@
const React = require('react');
const Styled = require('styled-components');
const Column = require('@ui/components/column');
const Container = require('@ui/components/container');
const fns = require('@ui/shared/functions');
const logo = require('@resources/logo.png');
const Row = require('@ui/components/row');
const {
default: styled
} = Styled;
const {
remcalc
} = fns;
const StyledHeader = styled.header`
height: ${remcalc(78)};
background-color: #ffffff;
position: fixed;
width: 100%;
top: 0;
left: 0
`;
const StyledLogo = styled.img`
padding-top: ${remcalc(21)};
padding-bottom: ${remcalc(21)};
`;
const Header = () => {
return (
<StyledHeader>
<Container fluid>
<Row>
<Column xs={2}>
<StyledLogo src={logo} />
</Column>
</Row>
</Container>
</StyledHeader>
);
};
module.exports = Header;

View File

@ -1,8 +1,13 @@
const React = require('react');
const ReactRedux = require('react-redux');
const ReactRouter = require('react-router');
const Styled = require('styled-components');
const actions = require('@state/actions');
const Article = require('@components/article');
const Base = require('@ui/components/base');
const Footer = require('@components/footer');
const Header = require('@components/header');
const Home = require('@containers/home');
const NotFound = require('@containers/not-found');
@ -19,6 +24,10 @@ const {
Match
} = ReactRouter;
const {
injectGlobal
} = Styled;
const App = connect()(React.createClass({
propTypes: {
children: React.PropTypes.node,
@ -35,6 +44,10 @@ const App = connect()(React.createClass({
// that doens't pass it's instance to matched routes
// wait for react-router-redux@5
dispatch(updateRouter(router));
injectGlobal`
${Base.global}
`;
},
render: function() {
const {
@ -46,9 +59,9 @@ const App = connect()(React.createClass({
}
return (
<div>
<Base>
{children}
</div>
</Base>
);
}
}));
@ -56,14 +69,18 @@ const App = connect()(React.createClass({
module.exports = (props) => {
return (
<App {...props}>
<Match
component={Home}
exactly
pattern='/'
/>
<Miss
component={NotFound}
/>
<Header />
<Article>
<Match
component={Home}
exactly
pattern='/'
/>
<Miss
component={NotFound}
/>
</Article>
<Footer />
</App>
);
};

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.3 KiB

View File

@ -476,3 +476,5 @@ module.exports = styled.div`
-webkit-appearance: none;
}
`;
module.exports.global = require('./global');