From cae126168c9f7f8f959b7968ae042ec7ab4c51d0 Mon Sep 17 00:00:00 2001 From: Michael Lange Date: Tue, 24 Jul 2018 17:58:32 -0700 Subject: [PATCH 01/12] Undo the responsive styles that come with bulma --- ui/app/styles/core/navbar.scss | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/ui/app/styles/core/navbar.scss b/ui/app/styles/core/navbar.scss index 39232665d6c..900f5f4a6c6 100644 --- a/ui/app/styles/core/navbar.scss +++ b/ui/app/styles/core/navbar.scss @@ -1,4 +1,6 @@ .navbar { + display: flex; + &.is-primary { background: linear-gradient(to right, $nomad-green-darker, $nomad-green-dark); height: 3.5rem; @@ -42,6 +44,13 @@ } } + .navbar-end { + display: flex; + align-items: stretch; + justify-content: flex-end; + margin-left: auto; + } + .navbar-end > a.navbar-item { color: rgba($primary-invert, 0.8); @@ -65,6 +74,9 @@ } .navbar-item { + display: flex; + align-items: center; + &.is-gutter { width: $gutter-width; } From b06ee4f1a73395cf103dc6f9b0ff51f8a7cbf5be Mon Sep 17 00:00:00 2001 From: Michael Lange Date: Tue, 24 Jul 2018 18:42:20 -0700 Subject: [PATCH 02/12] Hide the gutter menu at low width resolutions --- ui/app/styles/components/page-layout.scss | 17 +++++++++++++++++ ui/app/styles/core/navbar.scss | 4 ++++ ui/app/styles/core/tabs.scss | 4 ++++ ui/app/styles/core/variables.scss | 2 ++ 4 files changed, 27 insertions(+) diff --git a/ui/app/styles/components/page-layout.scss b/ui/app/styles/components/page-layout.scss index d463be113b8..84c81e4c15c 100644 --- a/ui/app/styles/components/page-layout.scss +++ b/ui/app/styles/components/page-layout.scss @@ -31,10 +31,27 @@ bottom: 0; top: $header-height; z-index: $z-gutter; + background: $white; } &.is-right { margin-left: $gutter-width; + overflow-x: auto; + } + + @media #{$mq-hidden-gutter} { + &.is-left { + top: 0; + left: -$gutter-width; + + &.is-open { + left: 0; + } + } + + &.is-right { + margin-left: 0; + } } } } diff --git a/ui/app/styles/core/navbar.scss b/ui/app/styles/core/navbar.scss index 900f5f4a6c6..c38f676d3af 100644 --- a/ui/app/styles/core/navbar.scss +++ b/ui/app/styles/core/navbar.scss @@ -79,6 +79,10 @@ &.is-gutter { width: $gutter-width; + + @media #{$mq-hidden-gutter} { + width: 0; + } } } } diff --git a/ui/app/styles/core/tabs.scss b/ui/app/styles/core/tabs.scss index b3c033c027c..f7fa0a84419 100644 --- a/ui/app/styles/core/tabs.scss +++ b/ui/app/styles/core/tabs.scss @@ -42,5 +42,9 @@ + * { margin-top: 5em; } + + @media #{$mq-hidden-gutter} { + left: 0; + } } } diff --git a/ui/app/styles/core/variables.scss b/ui/app/styles/core/variables.scss index bef6396612f..63d90c700e0 100644 --- a/ui/app/styles/core/variables.scss +++ b/ui/app/styles/core/variables.scss @@ -39,3 +39,5 @@ $breadcrumb-item-color: $white; $breadcrumb-item-hover-color: $white; $breadcrumb-item-active-color: $white; $breadcrumb-item-separator-color: $primary; + +$mq-hidden-gutter: 'only screen and (max-width : 960px)'; From 05273c7c3643f63defceff3bf47e0fc3ea09f35f Mon Sep 17 00:00:00 2001 From: Michael Lange Date: Wed, 25 Jul 2018 10:35:03 -0700 Subject: [PATCH 03/12] Add open/close functionality to the gutter-menu when it's collapsed --- ui/app/components/global-header.js | 5 +++++ ui/app/components/gutter-menu.js | 2 ++ ui/app/components/page-layout.js | 2 ++ ui/app/styles/components/page-layout.scss | 1 + ui/app/templates/components/global-header.hbs | 1 + ui/app/templates/components/gutter-menu.hbs | 7 ++++++- ui/app/templates/components/page-layout.hbs | 9 +++++++-- 7 files changed, 24 insertions(+), 3 deletions(-) create mode 100644 ui/app/components/global-header.js diff --git a/ui/app/components/global-header.js b/ui/app/components/global-header.js new file mode 100644 index 00000000000..6ee147b08e7 --- /dev/null +++ b/ui/app/components/global-header.js @@ -0,0 +1,5 @@ +import Component from '@ember/component'; + +export default Component.extend({ + onHamburgerClick() {}, +}); diff --git a/ui/app/components/gutter-menu.js b/ui/app/components/gutter-menu.js index 26151644045..66db45e8f93 100644 --- a/ui/app/components/gutter-menu.js +++ b/ui/app/components/gutter-menu.js @@ -32,6 +32,8 @@ export default Component.extend({ }); }), + onHamburgerClick() {}, + gotoJobsForNamespace(namespace) { if (!namespace || !namespace.get('id')) return; diff --git a/ui/app/components/page-layout.js b/ui/app/components/page-layout.js index 4c5658fda26..722b5f9ebd3 100644 --- a/ui/app/components/page-layout.js +++ b/ui/app/components/page-layout.js @@ -2,4 +2,6 @@ import Component from '@ember/component'; export default Component.extend({ classNames: ['page-layout'], + + isGutterOpen: false, }); diff --git a/ui/app/styles/components/page-layout.scss b/ui/app/styles/components/page-layout.scss index 84c81e4c15c..e6f9494d3eb 100644 --- a/ui/app/styles/components/page-layout.scss +++ b/ui/app/styles/components/page-layout.scss @@ -43,6 +43,7 @@ &.is-left { top: 0; left: -$gutter-width; + transition: left ease-in-out 0.3s; &.is-open { left: 0; diff --git a/ui/app/templates/components/global-header.hbs b/ui/app/templates/components/global-header.hbs index 8996b11d473..428310e9694 100644 --- a/ui/app/templates/components/global-header.hbs +++ b/ui/app/templates/components/global-header.hbs @@ -1,5 +1,6 @@