fixed sidebar & updated dependencies

Author: dongcai

README.md

@@ -1,9 +1,9 @@
 
 # React Redux Universal Hot Example With Semantic UI
 
-[![Build Status](https://travis-ci.org/bertho-zero/react-redux-universal-hot-example.svg?branch=master&style=flat-square)](https://travis-ci.org/bertho-zero/react-redux-universal-hot-example)
-[![Dependency Status](https://david-dm.org/bertho-zero/react-redux-universal-hot-example.svg?style=flat-square)](https://david-dm.org/bertho-zero/react-redux-universal-hot-example)
-[![devDependency Status](https://david-dm.org/bertho-zero/react-redux-universal-hot-example/dev-status.svg?style=flat-square)](https://david-dm.org/bertho-zero/react-redux-universal-hot-example?type=dev)
+[![Build Status](https://travis-ci.org/dongcai/react-redux-semantic-ui.svg?branch=master&style=flat-square)](https://travis-ci.org/dongcai/react-redux-semantic-ui)
+[![Dependency Status](https://david-dm.org/dongcai/react-redux-semantic-ui.svg?style=flat-square)](https://david-dm.org/dongcai/react-redux-semantic-ui)
+[![devDependency Status](https://david-dm.org/dongcai/react-redux-semantic-ui/dev-status.svg?style=flat-square)](https://david-dm.org/dongcai/react-redux-semantic-ui?type=dev)
 
 ---
 ## Demo

package.json

@@ -154,23 +154,23 @@
     "feathers-errors": "^2.9.1",
     "feathers-hooks": "^2.0.1",
     "feathers-hooks-common": "^3.7.1",
-    "feathers-nedb": "^2.6.0",
+    "feathers-nedb": "^3.0.0",
     "feathers-rest": "^1.7.3",
     "feathers-socketio": "^2.0.0",
     "history": "^4.7.2",
     "http-proxy": "^1.16.2",
     "is-promise": "^2.1.0",
     "js-cookie": "^2.1.3",
-    "localforage": "^1.4.3",
+    "localforage": "^1.5.5",
     "lru-memoize": "^1.0.1",
     "morgan": "^1.8.1",
     "multireducer": "^3.1.0",
     "nedb": "^1.8.0",
     "passport-facebook-token": "^3.3.0",
     "pretty-error": "^2.0.2",
     "prop-types": "^15.5.8",
-    "react": "^16.0.0",
-    "react-dom": "^16.0.0",
+    "react": "^16.2.0",
+    "react-dom": "^16.2.0",
     "react-helmet": "^5.0.3",
     "react-loadable": "^5.3.0",
     "react-redux": "^5.0.6",
@@ -182,7 +182,7 @@
     "redial": "^0.5.0",
     "redux": "^3.6.0",
     "redux-auth-wrapper": "^2.0.2",
-    "redux-form": "^7.1.1",
+    "redux-form": "^7.2.0",
     "redux-logger": "^3.0.6",
     "redux-persist": "^5.4.0",
     "semantic-ui-less": "^2.2.12",
@@ -194,7 +194,7 @@
     "verror": "^1.10.0"
   },
   "devDependencies": {
-    "babel-eslint": "^8.0.1",
+    "babel-eslint": "^8.0.3",
     "babel-jest": "^21.0.2",
     "babel-loader": "^7.0.0",
     "babel-plugin-transform-react-jsx-source": "^6.22.0",
@@ -204,7 +204,7 @@
     "concurrently": "^3.5.1",
     "css-loader": "^0.28.5",
     "enzyme": "^3.1.0",
-    "eslint": "^4.4.1",
+    "eslint": "^4.12.1",
     "eslint-config-airbnb": "^16.0.0",
     "eslint-loader": "^1.6.1",
     "eslint-plugin-import": "^2.2.0",
@@ -222,19 +222,19 @@
     "less": "^3.0.0-alpha.3",
     "less-loader": "^4.0.3",
     "lighthouse": "^2.6.0",
-    "lint-staged": "^5.0.0",
+    "lint-staged": "^6.0.0",
     "mocha": "^4.0.1",
     "node-sass": "^4.7.2",
     "piping": "^1.0.0-rc.4",
     "postcss": "^6.0.9",
     "postcss-browser-reporter": "^0.5.0",
     "postcss-cssnext": "^3.0.2",
     "postcss-import": "^11.0.0",
-    "postcss-loader": "^2.0.5",
+    "postcss-loader": "^2.0.9",
     "postcss-reporter": "^5.0.0",
-    "postcss-url": "^7.2.1",
-    "prettier-eslint-cli": "^4.3.2",
-    "react-a11y": "^0.3.3",
+    "postcss-url": "^7.3.0",
+    "prettier-eslint-cli": "^4.4.2",
+    "react-a11y": "^1.0.0",
     "react-addons-test-utils": "^15.4.2",
     "react-hot-loader": "^3.0.0-beta.3",
     "react-to-html-webpack-plugin": "^2.2.0",
@@ -247,9 +247,9 @@
     "style-loader": "^0.19.0",
     "sw-precache-webpack-plugin": "^0.11.3",
     "url-loader": "^0.6.2",
-    "webpack": "^3.7.1",
-    "webpack-dev-middleware": "^1.12.0",
-    "webpack-hot-middleware": "^2.17.0",
+    "webpack": "^3.10.0",
+    "webpack-dev-middleware": "^1.12.2",
+    "webpack-hot-middleware": "^2.21.0",
     "webpack-isomorphic-tools": "^3.0.2"
   },
   "engines": {

src/components/InfoBar/InfoBar.js

@@ -22,11 +22,13 @@ export default class InfoBar extends Component {
     const { info, load } = this.props; // eslint-disable-line no-shadow
     const styles = require('./InfoBar.scss');
     return (
-      <Message info>
-        This is an info bar <strong>{info ? info.message : 'no info!'}</strong>
-        <span className={styles.time}>{info && new Date(info.time).toString()}</span>
-        <Button onClick={load}>Reload from server</Button>
-      </Message>
+      <div className={styles.wrapper}>
+        <Message info>
+          This is an info bar <strong>{info ? info.message : 'no info!'}</strong>
+          <span className={styles.time}>{info && new Date(info.time).toString()}</span>
+          <Button onClick={load}>Reload from server</Button>
+        </Message>
+      </div>
     );
   }
 }

src/components/InfoBar/InfoBar.scss

@@ -1,7 +1,8 @@
-.infoBar {
-  font-variant: italics;
-}
-
 .time {
   margin: 0 30px;
 }
+
+.wrapper{
+  font-style: italic;
+  margin-top: 2em;
+}

src/components/Navigation/Navigation.js

@@ -4,11 +4,12 @@ import PropTypes from 'prop-types';
 import { Link } from 'react-router-dom';
 import _ from 'lodash';
 
-import { Container, Icon, Image, Menu, Sidebar, Responsive } from 'semantic-ui-react';
+import { Icon, Image, Menu, Sidebar, Responsive } from 'semantic-ui-react';
 
 const NavBarMobile = props => (
   <Sidebar.Pushable>
-    <Sidebar as={Menu} animation="push" inverted visible={props.visible} width="tiny" style={{ height: '100vh' }}>
+    <Sidebar as={Menu} animation="overlay" inverted visible={props.visible} width="wide" style={{ height: '100vh' }}>
+      <Icon className={props.styles.closeIt} name="close" size="large" onClick={props.onToggle} />
       <Menu vertical inverted fluid>
         <Menu.Item>
           <Image size="mini" src="https://react.semantic-ui.com/logo.png" />
@@ -20,16 +21,14 @@ const NavBarMobile = props => (
         ))}
       </Menu>
     </Sidebar>
-    <Sidebar.Pusher dimmed={props.visible} onClick={props.onPusherClick} style={{ minHeight: '100vh' }}>
+    <Sidebar.Pusher dimmed={props.visible} onClick={props.onPusherClick}>
       <Menu fixed="top" inverted>
         <Menu.Item onClick={props.onToggle}>
           <Icon name="sidebar" />
         </Menu.Item>
-        {!props.visible && (
-          <Menu.Item>
-            <Image size="mini" src="https://react.semantic-ui.com/logo.png" />
-          </Menu.Item>
-        )}
+        <Menu.Item>
+          <Image size="mini" src="https://react.semantic-ui.com/logo.png" />
+        </Menu.Item>
         <Menu.Menu position="right">
           {_.map(props.rightItems, item => (
             <Menu.Item as={Link} to={item.to} key={item.key}>
@@ -49,13 +48,15 @@ NavBarMobile.propTypes = {
   onPusherClick: PropTypes.func.isRequired,
   onToggle: PropTypes.func.isRequired,
   rightItems: PropTypes.arrayOf(PropTypes.object),
-  visible: PropTypes.bool
+  visible: PropTypes.bool,
+  styles: PropTypes.objectOf(PropTypes.any)
 };
 
 NavBarMobile.defaultProps = {
   leftItems: [],
   rightItems: [],
-  visible: false
+  visible: false,
+  styles: {}
 };
 
 const NavBarDesktop = ({ leftItems, rightItems }) => (
@@ -88,7 +89,7 @@ NavBarDesktop.defaultProps = {
   rightItems: []
 };
 
-const NavBarChildren = ({ children }) => <Container style={{ marginTop: '6em' }}>{children}</Container>;
+const NavBarChildren = ({ children }) => <div style={{ margin: '6em auto 2em' }}>{children}</div>;
 
 NavBarChildren.propTypes = {
   children: PropTypes.node.isRequired
@@ -116,6 +117,7 @@ export default class Navigation extends Component {
   render() {
     const { children, leftItems, rightItems } = this.props;
     const { visible } = this.state;
+    const styles = require('./Navigation.scss');
 
     return (
       <div style={{ flex: 1 }}>
@@ -126,6 +128,7 @@ export default class Navigation extends Component {
             onToggle={this.handleToggle}
             rightItems={rightItems}
             visible={visible}
+            styles={styles}
           >
             <NavBarChildren>{children}</NavBarChildren>
           </NavBarMobile>

src/components/Navigation/Navigation.scss

@@ -0,0 +1,7 @@
+.closeIt{
+  position: absolute;
+  top: 1em;
+  right: 1em;
+  color: #fff;
+  z-index: 9999;
+}

src/containers/App/App.js

@@ -6,7 +6,7 @@ import { push } from 'react-router-redux';
 import { renderRoutes } from 'react-router-config';
 import { provideHooks } from 'redial';
 import Helmet from 'react-helmet';
-import { Message, Segment } from 'semantic-ui-react';
+import { Container, Message, Segment } from 'semantic-ui-react';
 import { isLoaded as isInfoLoaded, load as loadInfo } from 'redux/modules/info';
 import { isLoaded as isAuthLoaded, load as loadAuth, logout } from 'redux/modules/auth';
 import { Notifs, InfoBar } from 'components';
@@ -151,21 +151,20 @@ export default class App extends Component {
         <Helmet {...config.app.head} />
 
         <Navigation leftItems={leftItems} rightItems={rightItems}>
-          <div className={styles.appContent}>
+          <Container>
             {notifs.global && (
-              <div className="container">
-                <Notifs
-                  className={styles.notifs}
-                  namespace="global"
-                  NotifComponent={props => <Message warning>{props.message}</Message>}
-                />
-              </div>
+              <Notifs
+                className={styles.notifs}
+                namespace="global"
+                NotifComponent={props => <Message warning>{props.message}</Message>}
+              />
             )}
             {renderRoutes(route.routes)}
             <InfoBar />
-          </div>
+          </Container>
         </Navigation>
-        <Segment textAlign="center" vertical inverted style={{ marginTop: '2em' }}>
+
+        <Segment textAlign="center" vertical inverted>
           <p>
             Have questions? Ask for help{' '}
             <a

src/containers/App/App.scss

@@ -6,6 +6,7 @@
 
 .appContent {
   position: relative;
+  flex: 1
 }
 
 .notifs {

src/semantic/site/modules/sidebar.variables

@@ -1,3 +1,6 @@
 /*******************************
          Site Overrides
 *******************************/
+.pusher.dimmed{
+  height: 100vh;
+}