From 5fa417efbeac69818c0ea45896734c934a583339 Mon Sep 17 00:00:00 2001 From: danicatalan Date: Mon, 25 Jul 2016 17:35:00 +0200 Subject: [PATCH 1/3] fix headercss --- app/react/App/App.js | 4 +++- app/react/App/scss/elements/_controls.scss | 4 ++-- app/react/App/scss/fixes.scss | 2 +- app/react/App/scss/layout/_header.scss | 25 +++++++++++++-------- app/react/App/scss/layout/_nav.scss | 7 +++--- app/react/App/scss/modules/_login.scss | 2 +- app/react/App/scss/modules/_uploads.scss | 2 +- app/react/ContextMenu/scss/contextMenu.scss | 4 ++-- app/react/Layout/scss/sidepanel.scss | 2 +- 9 files changed, 31 insertions(+), 21 deletions(-) diff --git a/app/react/App/App.js b/app/react/App/App.js index 040ae149ec..3dbb1a7f31 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,7 +80,7 @@ class App extends Component {

- + {this.renderTools()}
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; From 638ae9192846090856b2234789c76015d7d0d0dd Mon Sep 17 00:00:00 2001 From: A Happy Cat Date: Tue, 26 Jul 2016 11:09:57 +0200 Subject: [PATCH 2/3] Mobile menu now closes when navigating --- app/react/App/App.js | 2 +- app/react/App/Menu.js | 5 +++-- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/app/react/App/App.js b/app/react/App/App.js index 3dbb1a7f31..c211fd3983 100644 --- a/app/react/App/App.js +++ b/app/react/App/App.js @@ -83,7 +83,7 @@ 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}) { From 6c6a15784d93a3c32c1809a71499967cee538880 Mon Sep 17 00:00:00 2001 From: A Happy Cat Date: Tue, 26 Jul 2016 11:10:09 +0200 Subject: [PATCH 3/3] deleted blank lines --- app/react/Users/specs/SettingsAPI.spec.js | 1 - app/react/Users/specs/UsersAPI.spec.js | 1 - 2 files changed, 2 deletions(-) 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