Merge pull request #222 from huridocs/215-menu

LGTM
huridocs · Jul 26, 2016 · b668f6f · b668f6f
2 parents d521582 + 6c6a157
commit b668f6f
Show file tree

Hide file tree

Showing 12 changed files with 35 additions and 26 deletions.
diff --git a/app/react/App/App.js b/app/react/App/App.js
@@ -51,11 +51,13 @@ class App extends Component {
   render() {
     let menuClass = 'col-md-5 col-sm-6';
     let menuToggleClass = 'navbar-toggle ';
+    let MenuButtonClass = 'menu-button fa fa-bars';
     let navClass = 'nav nav-pills col-sm-6 col-md-5';
 
     if (this.state.showmenu) {
       menuClass += ' in';
       menuToggleClass += 'active';
+      MenuButtonClass = 'menu-button fa fa-close';
       navClass += ' is-active';
     }
 
@@ -78,10 +80,10 @@ class App extends Component {
               <div className="row">
                 <h1 className="col-sm-2"><SiteName/></h1>
                 <div className="col-sm-4 col-md-5">
-                  <i className="fa fa-bars" onClick={this.toggleMenu.bind(this)}></i>
+                  <i className={MenuButtonClass} onClick={this.toggleMenu.bind(this)}></i>
                   {this.renderTools()}
                 </div>
-                <Menu className={navClass} />
+                <Menu onClick={this.toggleMenu.bind(this)} className={navClass} />
               </div>
             </div>
           </header>

diff --git a/app/react/App/Menu.js b/app/react/App/Menu.js
@@ -8,7 +8,7 @@ class Menu extends Component {
   render() {
     const user = this.props.user.toJS();
     return (
-      <ul className={this.props.className}>
+      <ul onClick={this.props.onClick} className={this.props.className}>
         <li><Link to='/' className="btn"><i className="fa fa-th"></i>Library</Link></li>
         <NeedAuthorization>
           <li><Link to='/metadata' className="btn"><i className="fa fa-list-alt"></i>Metadata</Link></li>
@@ -31,7 +31,8 @@ class Menu extends Component {
 
 Menu.propTypes = {
   user: PropTypes.object,
-  className: PropTypes.string
+  className: PropTypes.string,
+  onClick: PropTypes.func
 };
 
 export function mapStateToProps({user}) {

diff --git a/app/react/App/scss/elements/_controls.scss b/app/react/App/scss/elements/_controls.scss
@@ -124,8 +124,8 @@
 
   .fa {
     display: inline-block;
-    width: 60px;
-    line-height: 60px;
+    width: 54px;
+    line-height: 54px;
     margin: 0 0 0 14px;
     text-align: center;
     font-size: $f-size-lg;

diff --git a/app/react/App/scss/fixes.scss b/app/react/App/scss/fixes.scss
@@ -2,7 +2,7 @@
   display: flex;
   flex-direction: column;
   height: 100vh;
-  padding-top: 60px;
+  padding-top: 54px;
   overflow: hidden;
 }
 

diff --git a/app/react/App/scss/layout/_header.scss b/app/react/App/scss/layout/_header.scss
@@ -11,16 +11,15 @@ header {
 		font-style: italic;
 		font-weight: 300;
 		margin: 0;
-		line-height: 60px;
+		line-height: 54px;
 		display: none;
 		@include desktop {
 			display: block;
 		}
 	}
 
 	.input-group {
-		line-height: 50px;
-		padding: 5px 0px;
+		line-height: 54px;
 		@include desktop {
       margin: 0 -30px;
 		}
@@ -79,17 +78,23 @@ header {
 	}
 
 	.nav-pills {
+    position: fixed;
+    top: 54px;
+    left: 0;
+    right: 0;
     display: none;
-		line-height: 60px;
+		line-height: 54px;
     padding: 0;
     box-shadow: $shadow;
+    background: $c-white;
     &.is-active {
       display: block;
     }
 		@include desktop {
+      position: relative;
+      top: 0;
 			display: block;
       text-align: right;
-      padding-right: 5px;
       box-shadow: none;
 		}
 		> li {
@@ -109,19 +114,21 @@ header {
 		}
 		a {
 			color: $c-black;
+      border-radius: 0;
 		}
 	}
 
 	/* menu buttons */
-	.fa-bars {
+	.menu-button {
     z-index: 1;
     float: left;
-    width: 60px;
-    height: 60px;
-    line-height: 60px;
+    width: 54px;
+    height: 54px;
+    line-height: 54px;
     padding: 0 15px;
     margin-left: -15px;
     text-align: center;
+    font-size: $f-size-lg;
     cursor: pointer;
 		@include desktop {
 			display: none;

diff --git a/app/react/App/scss/layout/_nav.scss b/app/react/App/scss/layout/_nav.scss
@@ -44,7 +44,8 @@ nav ul {
 	}
 }
 
-.nav>li>a {
-  padding: 6px 10px;
-  line-height: 44px;
+.nav > li > a {
+  padding: 0px 10px;
+  line-height: 54px;
+  border: 0;
 }
diff --git a/app/react/App/scss/modules/_login.scss b/app/react/App/scss/modules/_login.scss
@@ -2,7 +2,7 @@
   display: flex;
   flex-direction: column;
   justify-content: center;
-  padding-bottom: 60px;
+  padding-bottom: 54px;
 }
 
 .login-title {

diff --git a/app/react/App/scss/modules/_uploads.scss b/app/react/App/scss/modules/_uploads.scss
@@ -2,7 +2,7 @@
   display: block;
   position: relative;
   max-width: 1024px;
-  padding: 25px 45px 20px 60px;
+  padding: 25px 45px 20px 54px;
   margin: auto;
   margin-bottom: 15px;
   text-align: center;

diff --git a/app/react/ContextMenu/scss/contextMenu.scss b/app/react/ContextMenu/scss/contextMenu.scss
@@ -27,8 +27,8 @@
 	background: $c-success;
 	color: $c-white;
 	text-align: center;
-	line-height: 60px;
-	width: 60px;
+	line-height: 54px;
+	width: 54px;
 	box-shadow: $shadow;
 	border-radius: 50%;
 	font-size: $f-size-lg;

diff --git a/app/react/Layout/scss/sidepanel.scss b/app/react/Layout/scss/sidepanel.scss
@@ -6,7 +6,7 @@
   $c-sidebar: darken($c-primary-lighten, 2%);
   position: fixed;
   right: 0;
-  top: 60px;
+  top: 54px;
   bottom: 0;
   padding: 15px;
   overflow-y: scroll;

diff --git a/app/react/Users/specs/SettingsAPI.spec.js b/app/react/Users/specs/SettingsAPI.spec.js
@@ -4,7 +4,6 @@ import backend from 'fetch-mock';
 import {catchErrors} from 'api/utils/jasmineHelpers';
 
 describe('SettingsAPI', () => {
-
   beforeEach(() => {
     backend.restore();
     backend

diff --git a/app/react/Users/specs/UsersAPI.spec.js b/app/react/Users/specs/UsersAPI.spec.js
@@ -4,7 +4,6 @@ import backend from 'fetch-mock';
 import {catchErrors} from 'api/utils/jasmineHelpers';
 
 describe('UsersAPI', () => {
-
   beforeEach(() => {
     backend.restore();
     backend