implement a simple header
This commit is contained in:
parent
f933346f4b
commit
16f0ec6321
16
frontend/src/components/article/index.js
Normal file
16
frontend/src/components/article/index.js
Normal 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)};
|
||||
`;
|
7
frontend/src/components/footer/index.js
Normal file
7
frontend/src/components/footer/index.js
Normal file
@ -0,0 +1,7 @@
|
||||
const Styled = require('styled-components');
|
||||
|
||||
const {
|
||||
default: styled
|
||||
} = Styled;
|
||||
|
||||
module.exports = styled.footer``;
|
46
frontend/src/components/header/index.js
Normal file
46
frontend/src/components/header/index.js
Normal 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;
|
@ -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>
|
||||
);
|
||||
};
|
||||
|
BIN
frontend/src/resources/logo.png
Normal file
BIN
frontend/src/resources/logo.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 4.3 KiB |
@ -476,3 +476,5 @@ module.exports = styled.div`
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
`;
|
||||
|
||||
module.exports.global = require('./global');
|
||||
|
Loading…
Reference in New Issue
Block a user