From 5f14578f863b62b3996406a920fbb8d3b185637a Mon Sep 17 00:00:00 2001 From: mgerb42 Date: Thu, 2 Feb 2017 23:56:05 +0000 Subject: [PATCH] added wrapper and navbar --- app/Wrapper.js | 23 +++++++++ app/app.js | 32 ++----------- app/components/Footer.js | 0 app/components/{ => Navbar}/Navbar.js | 7 ++- app/components/Navbar/Navbar.scss | 47 +++++++++++++++++++ app/pages/{ => Home}/Home.js | 0 app/pages/New.js | 12 ----- .../{Default.js => NotFound/NotFound.js} | 5 +- .../NotFound/NotFound.scss} | 9 ++-- app/scss/Home.scss | 5 -- app/scss/Navbar.scss | 34 -------------- app/scss/index.scss | 5 -- app/scss/style.scss | 10 +++- app/scss/variables.scss | 14 +++++- package.json | 2 +- yarn.lock | 43 +++++++---------- 16 files changed, 128 insertions(+), 120 deletions(-) create mode 100644 app/Wrapper.js delete mode 100644 app/components/Footer.js rename app/components/{ => Navbar}/Navbar.js (68%) create mode 100644 app/components/Navbar/Navbar.scss rename app/pages/{ => Home}/Home.js (100%) delete mode 100644 app/pages/New.js rename app/pages/{Default.js => NotFound/NotFound.js} (61%) rename app/{scss/Default.scss => pages/NotFound/NotFound.scss} (56%) delete mode 100644 app/scss/Home.scss delete mode 100644 app/scss/Navbar.scss diff --git a/app/Wrapper.js b/app/Wrapper.js new file mode 100644 index 0000000..d8e51c9 --- /dev/null +++ b/app/Wrapper.js @@ -0,0 +1,23 @@ +import React from 'react'; +import Navbar from './components/Navbar/Navbar'; + +//styling +import './scss/index.scss'; + +export default class Wrapper extends React.Component { + + render() { + return ( +
+ +
+ {this.props.children} +
+
+ ); + } +} + +Wrapper.propTypes = { + children: React.PropTypes.node, +}; diff --git a/app/app.js b/app/app.js index bb9857c..8eed983 100644 --- a/app/app.js +++ b/app/app.js @@ -2,39 +2,17 @@ import React from 'react'; import ReactDOM from 'react-dom'; import { Router, Route, IndexRoute, browserHistory } from 'react-router'; +import Wrapper from './Wrapper'; +import NotFound from './pages/NotFound/NotFound'; + //pages -import Home from './pages/Home'; -import New from './pages/New'; -import Default from './pages/Default'; - -//components -import Navbar from './components/Navbar'; - -//styling -import './scss/index.scss'; - -class Wrapper extends React.Component { - - render() { - return ( -
- - {this.props.children} -
- ); - } -} - -Wrapper.propTypes = { - children: React.PropTypes.node, -}; +import Home from './pages/Home/Home'; ReactDOM.render( - - + , document.getElementById('app')); diff --git a/app/components/Footer.js b/app/components/Footer.js deleted file mode 100644 index e69de29..0000000 diff --git a/app/components/Navbar.js b/app/components/Navbar/Navbar.js similarity index 68% rename from app/components/Navbar.js rename to app/components/Navbar/Navbar.js index d1e868a..f5c856b 100644 --- a/app/components/Navbar.js +++ b/app/components/Navbar/Navbar.js @@ -1,13 +1,16 @@ import React from 'react'; import { Link } from 'react-router'; +import './Navbar.scss'; + export default class Navbar extends React.Component { render() { return (
- Home - New +
Title
+ Home + New
); } diff --git a/app/components/Navbar/Navbar.scss b/app/components/Navbar/Navbar.scss new file mode 100644 index 0000000..e414f58 --- /dev/null +++ b/app/components/Navbar/Navbar.scss @@ -0,0 +1,47 @@ +@import '../../scss/variables'; + +.Navbar { + position: fixed; + display: flex; + flex-direction: column; + top: 0; + left: 0; + height: 100%; + width: $navbarWidth; + background-color: $gray2; + border-right: 1px solid darken($gray2, 2%); + overflow-y: auto; +} + +.Navbar__header { + min-height: 100px; + display: flex; + align-items: center; + justify-content: center; + background-color: $gray2; +} + +.Navbar__item { + min-height: 50px; + text-decoration: none; + display: flex; + align-items: center; + justify-content: center; + text-align: center; + color: $white; + transition: background-color 0.1s linear; + + &:hover { + background-color: $gray1; + } + + & + .Navbar__item { + border-top: 1px solid $gray1; + } + +} + +.Navbar__item--active { + padding-left: 4px; + border-right: 4px solid $primaryBlue; +} diff --git a/app/pages/Home.js b/app/pages/Home/Home.js similarity index 100% rename from app/pages/Home.js rename to app/pages/Home/Home.js diff --git a/app/pages/New.js b/app/pages/New.js deleted file mode 100644 index 86b0bfa..0000000 --- a/app/pages/New.js +++ /dev/null @@ -1,12 +0,0 @@ -import React from 'react'; - -export default class New extends React.Component { - - render() { - return ( -
- Test new page -
- ); - } -} \ No newline at end of file diff --git a/app/pages/Default.js b/app/pages/NotFound/NotFound.js similarity index 61% rename from app/pages/Default.js rename to app/pages/NotFound/NotFound.js index ffad07b..1adc60f 100644 --- a/app/pages/Default.js +++ b/app/pages/NotFound/NotFound.js @@ -1,10 +1,11 @@ import React from 'react'; +import './NotFound.scss'; export default class Default extends React.Component { render() { return ( -
- 404 +
+ 404 Not Found
); } diff --git a/app/scss/Default.scss b/app/pages/NotFound/NotFound.scss similarity index 56% rename from app/scss/Default.scss rename to app/pages/NotFound/NotFound.scss index cc46eae..58005ea 100644 --- a/app/scss/Default.scss +++ b/app/pages/NotFound/NotFound.scss @@ -1,9 +1,8 @@ -.Default { +.NotFound { height: 100%; - width: 100%; display: flex; - justify-content: center; align-items: center; - text-align: center; - font-size: 5em; + justify-content: center; + + font-size: 20px; } \ No newline at end of file diff --git a/app/scss/Home.scss b/app/scss/Home.scss deleted file mode 100644 index 4737e1e..0000000 --- a/app/scss/Home.scss +++ /dev/null @@ -1,5 +0,0 @@ -.Home { - max-width: 800px; - margin-left: auto; - margin-right: auto; -} \ No newline at end of file diff --git a/app/scss/Navbar.scss b/app/scss/Navbar.scss deleted file mode 100644 index f819b60..0000000 --- a/app/scss/Navbar.scss +++ /dev/null @@ -1,34 +0,0 @@ -.Navbar { - position: fixed; - top: 0px; - display: flex; - align-items: center; - width: 100%; - height: $navbarHeight; - background-color: darken(white, 5%); - border-bottom: 1px solid darken(white, 10%); - - .active { - background-color: darken(white, 2%); - } -} - -.Navbar__item { - align-self: stretch; - display: flex; - align-items: center; - justify-content: center; - width: 100px; - background-color: white; - color: gray; - cursor: pointer; - text-decoration: none; - - &:hover { - background-color: darken(white, 2%); - } - - & + .Navbar__item { - border-left: 1px solid darken(white, 5%); - } -} \ No newline at end of file diff --git a/app/scss/index.scss b/app/scss/index.scss index 0d9cce9..31a5bc0 100644 --- a/app/scss/index.scss +++ b/app/scss/index.scss @@ -1,8 +1,3 @@ @import '../assets/normalize.css'; @import './variables.scss'; - -// import all css files @import './style.scss'; -@import './Navbar.scss'; -@import './Default.scss'; -@import './Home.scss'; diff --git a/app/scss/style.scss b/app/scss/style.scss index adfa5ad..c1b3f13 100644 --- a/app/scss/style.scss +++ b/app/scss/style.scss @@ -1,3 +1,11 @@ body { - padding-top: $navbarHeight; + background-color: $gray1; + color: $white; + padding-left: $navbarWidth; } + +.content { + padding: 10px; + height: 100%; + width: 100%; +} \ No newline at end of file diff --git a/app/scss/variables.scss b/app/scss/variables.scss index 8b1deea..45bcd69 100644 --- a/app/scss/variables.scss +++ b/app/scss/variables.scss @@ -1 +1,13 @@ -$navbarHeight: 50px; \ No newline at end of file +$navbarWidth: 200px; + + +// colors +$primaryBlue: #42adf4; +$white: darken(white, 10%); + +$gray1: #686a6e; +$gray2: #424549; +$gray3: #36393e; +$gray4: #2e3136; +$gray5: #282b30; +$gray6: #1e2124; diff --git a/package.json b/package.json index 81909b5..8293f48 100644 --- a/package.json +++ b/package.json @@ -22,7 +22,7 @@ "eslint-plugin-react": "^6.8.0", "extract-text-webpack-plugin": "2.0.0-rc.1", "html-webpack-plugin": "^2.24.1", - "node-sass": "^4.1.1", + "node-sass": "^4.5.0", "postcss-loader": "^1.2.1", "react": "^15.4.1", "react-dom": "^15.4.1", diff --git a/yarn.lock b/yarn.lock index 5e84ab0..1f647ce 100644 --- a/yarn.lock +++ b/yarn.lock @@ -898,8 +898,8 @@ batch@0.5.3: resolved "https://registry.yarnpkg.com/batch/-/batch-0.5.3.tgz#3f3414f380321743bfc1042f9a83ff1d5824d464" bcrypt-pbkdf@^1.0.0: - version "1.0.0" - resolved "https://registry.yarnpkg.com/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.0.tgz#3ca76b85241c7170bf7d9703e7b9aa74630040d4" + version "1.0.1" + resolved "https://registry.yarnpkg.com/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.1.tgz#63bc5dcb61331b92bc05fd528953c33462a06f8d" dependencies: tweetnacl "^0.14.3" @@ -1077,18 +1077,17 @@ camelcase@^3.0.0: resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-3.0.0.tgz#32fc4b9fcdaf845fcdf7e73bb97cac2261f0ab0a" caniuse-api@^1.5.2: - version "1.5.2" - resolved "https://registry.yarnpkg.com/caniuse-api/-/caniuse-api-1.5.2.tgz#8f393c682f661c0a997b77bba6e826483fb3600e" + version "1.5.3" + resolved "https://registry.yarnpkg.com/caniuse-api/-/caniuse-api-1.5.3.tgz#5018e674b51c393e4d50614275dc017e27c4a2a2" dependencies: browserslist "^1.0.1" caniuse-db "^1.0.30000346" lodash.memoize "^4.1.0" lodash.uniq "^4.3.0" - shelljs "^0.7.0" caniuse-db@^1.0.30000346, caniuse-db@^1.0.30000617, caniuse-db@^1.0.30000618: - version "1.0.30000618" - resolved "https://registry.yarnpkg.com/caniuse-db/-/caniuse-db-1.0.30000618.tgz#821258ff484f662864f28ffbcf849a6247acf1fa" + version "1.0.30000619" + resolved "https://registry.yarnpkg.com/caniuse-db/-/caniuse-db-1.0.30000619.tgz#bffaa8150637c3182d3914a9718369b079299529" caseless@~0.11.0: version "0.11.0" @@ -1992,8 +1991,8 @@ faye-websocket@~0.11.0: websocket-driver ">=0.5.1" fbjs@^0.8.1, fbjs@^0.8.4: - version "0.8.8" - resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.8.tgz#02f1b6e0ea0d46c24e0b51a2d24df069563a5ad6" + version "0.8.9" + resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.9.tgz#180247fbd347dcc9004517b904f865400a0c8f14" dependencies: core-js "^1.0.0" isomorphic-fetch "^2.1.1" @@ -2823,10 +2822,6 @@ lodash.clonedeep@^4.3.2: version "4.5.0" resolved "https://registry.yarnpkg.com/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz#e23f3f9c4f8fbdde872529c1071857a086e5ccef" -lodash.indexof@^4.0.5: - version "4.0.5" - resolved "https://registry.yarnpkg.com/lodash.indexof/-/lodash.indexof-4.0.5.tgz#53714adc2cddd6ed87638f893aa9b6c24e31ef3c" - lodash.memoize@^4.1.0: version "4.1.2" resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe" @@ -2884,10 +2879,8 @@ map-obj@^1.0.0, map-obj@^1.0.1: resolved "https://registry.yarnpkg.com/map-obj/-/map-obj-1.0.1.tgz#d933ceb9205d82bdcf4886f6742bdc2b4dea146d" math-expression-evaluator@^1.2.14: - version "1.2.15" - resolved "https://registry.yarnpkg.com/math-expression-evaluator/-/math-expression-evaluator-1.2.15.tgz#38dc5f0194c5bf5ff1c690ad4c4b64df71ac0187" - dependencies: - lodash.indexof "^4.0.5" + version "1.2.16" + resolved "https://registry.yarnpkg.com/math-expression-evaluator/-/math-expression-evaluator-1.2.16.tgz#b357fa1ca9faefb8e48d10c14ef2bcb2d9f0a7c9" media-typer@0.3.0: version "0.3.0" @@ -3076,8 +3069,8 @@ node-libs-browser@^2.0.0: vm-browserify "0.0.4" node-pre-gyp@^0.6.29: - version "0.6.32" - resolved "https://registry.yarnpkg.com/node-pre-gyp/-/node-pre-gyp-0.6.32.tgz#fc452b376e7319b3d255f5f34853ef6fd8fe1fd5" + version "0.6.33" + resolved "https://registry.yarnpkg.com/node-pre-gyp/-/node-pre-gyp-0.6.33.tgz#640ac55198f6a925972e0c16c4ac26a034d5ecc9" dependencies: mkdirp "~0.5.1" nopt "~3.0.6" @@ -3089,9 +3082,9 @@ node-pre-gyp@^0.6.29: tar "~2.2.1" tar-pack "~3.3.0" -node-sass@^4.1.1: - version "4.4.0" - resolved "https://registry.yarnpkg.com/node-sass/-/node-sass-4.4.0.tgz#ff08ff2fded2a1d0bee270e8ed1275f7bc9c5a16" +node-sass@^4.5.0: + version "4.5.0" + resolved "https://registry.yarnpkg.com/node-sass/-/node-sass-4.5.0.tgz#532e37bad0ce587348c831535dbc98ea4289508b" dependencies: async-foreach "^0.1.3" chalk "^1.1.1" @@ -4144,7 +4137,7 @@ sha.js@^2.3.6: dependencies: inherits "^2.0.1" -shelljs@^0.7.0, shelljs@^0.7.5: +shelljs@^0.7.5: version "0.7.6" resolved "https://registry.yarnpkg.com/shelljs/-/shelljs-0.7.6.tgz#379cccfb56b91c8601e4793356eb5382924de9ad" dependencies: @@ -4630,8 +4623,8 @@ wbuf@^1.1.0, wbuf@^1.4.0: minimalistic-assert "^1.0.0" webpack-dev-middleware@^1.9.0: - version "1.9.0" - resolved "https://registry.yarnpkg.com/webpack-dev-middleware/-/webpack-dev-middleware-1.9.0.tgz#a1c67a3dfd8a5c5d62740aa0babe61758b4c84aa" + version "1.10.0" + resolved "https://registry.yarnpkg.com/webpack-dev-middleware/-/webpack-dev-middleware-1.10.0.tgz#7d5be2651e692fddfafd8aaed177c16ff51f0eb8" dependencies: memory-fs "~0.4.1" mime "^1.3.4"