From 16f0ec63212371c388ce124522f88e33b965327f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Se=CC=81rgio=20Ramos?= Date: Tue, 13 Dec 2016 14:35:39 +0000 Subject: [PATCH] implement a simple header --- frontend/src/components/article/index.js | 16 ++++++++ frontend/src/components/footer/index.js | 7 ++++ frontend/src/components/header/index.js | 46 +++++++++++++++++++++++ frontend/src/containers/app.js | 37 +++++++++++++----- frontend/src/resources/logo.png | Bin 0 -> 4359 bytes ui/src/components/base/index.js | 2 + 6 files changed, 98 insertions(+), 10 deletions(-) create mode 100644 frontend/src/components/article/index.js create mode 100644 frontend/src/components/footer/index.js create mode 100644 frontend/src/components/header/index.js create mode 100644 frontend/src/resources/logo.png diff --git a/frontend/src/components/article/index.js b/frontend/src/components/article/index.js new file mode 100644 index 00000000..30751514 --- /dev/null +++ b/frontend/src/components/article/index.js @@ -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)}; +`; diff --git a/frontend/src/components/footer/index.js b/frontend/src/components/footer/index.js new file mode 100644 index 00000000..50f9215a --- /dev/null +++ b/frontend/src/components/footer/index.js @@ -0,0 +1,7 @@ +const Styled = require('styled-components'); + +const { + default: styled +} = Styled; + +module.exports = styled.footer``; diff --git a/frontend/src/components/header/index.js b/frontend/src/components/header/index.js new file mode 100644 index 00000000..306cfa6f --- /dev/null +++ b/frontend/src/components/header/index.js @@ -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 ( + + + + + + + + + + ); +}; + +module.exports = Header; diff --git a/frontend/src/containers/app.js b/frontend/src/containers/app.js index 758d09de..a42b984b 100644 --- a/frontend/src/containers/app.js +++ b/frontend/src/containers/app.js @@ -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 ( -
+ {children} -
+ ); } })); @@ -56,14 +69,18 @@ const App = connect()(React.createClass({ module.exports = (props) => { return ( - - +
+
+ + +
+