diff --git a/app/react/App/App.js b/app/react/App/App.js
index 040ae149ec..c211fd3983 100644
--- 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 {
-
+
{this.renderTools()}
-
+
diff --git a/app/react/App/Menu.js b/app/react/App/Menu.js
index 366e51a9c2..aa85f8d9e9 100644
--- 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 (
-
+
- Library
- Metadata
@@ -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
index 16b7f3431f..dd289612a9 100644
--- 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
index 315ae5a077..437cbaada9 100644
--- 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
index 5decae28e7..13a5dc8c56 100644
--- a/app/react/App/scss/layout/_header.scss
+++ b/app/react/App/scss/layout/_header.scss
@@ -11,7 +11,7 @@ header {
font-style: italic;
font-weight: 300;
margin: 0;
- line-height: 60px;
+ line-height: 54px;
display: none;
@include desktop {
display: block;
@@ -19,8 +19,7 @@ header {
}
.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
index 00742029ae..0f56c59956 100644
--- 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
index bd3f92f62a..20325bc6de 100644
--- 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
index d2288b4688..a593ae06cd 100644
--- 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
index 69b013ca37..f9d9f3350a 100644
--- 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
index 0e38826e29..f2b2d5ddd7 100644
--- 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
index 16564a80d7..81f96ca462 100644
--- 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
index 991a3495f3..b70a566a9b 100644
--- 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