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.scss b/ui/app/styles/components.scss index 83efbb6763b..be9bf7c74c1 100644 --- a/ui/app/styles/components.scss +++ b/ui/app/styles/components.scss @@ -6,12 +6,14 @@ @import './components/empty-message'; @import './components/error-container'; @import './components/gutter'; +@import './components/gutter-toggle'; @import './components/inline-definitions'; @import './components/job-diff'; @import './components/json-viewer'; @import './components/loading-spinner'; @import './components/metrics'; @import './components/node-status-light'; +@import './components/nomad-logo'; @import './components/page-layout'; @import './components/simple-list'; @import './components/status-text'; diff --git a/ui/app/styles/components/gutter-toggle.scss b/ui/app/styles/components/gutter-toggle.scss new file mode 100644 index 00000000000..8113fbba9c6 --- /dev/null +++ b/ui/app/styles/components/gutter-toggle.scss @@ -0,0 +1,19 @@ +.gutter-toggle { + display: none; + + position: absolute; + left: 0; + padding: 1.25rem 0.7rem; + z-index: 1; // Make sure the toggle is on top of its siblings + height: 100%; + fill: desaturate(lighten($nomad-green, 20%), 30%); + cursor: pointer; + + > svg { + width: 15px; + } + + @media #{$mq-hidden-gutter} { + display: inline-block; + } +} diff --git a/ui/app/styles/components/gutter.scss b/ui/app/styles/components/gutter.scss index 0e47bf881b2..e2f6396c2c5 100644 --- a/ui/app/styles/components/gutter.scss +++ b/ui/app/styles/components/gutter.scss @@ -1,4 +1,74 @@ .gutter { height: 100%; border-right: 1px solid $grey-blue; + overflow: hidden; + + @media #{$mq-hidden-gutter} { + border-right: none; + + &.is-open { + box-shadow: 0 0 30px darken($nomad-green-darker, 20%); + } + } + + .collapsed-menu { + display: none; + position: relative; + height: 3.5rem; + width: $gutter-width; + transform: translateX($gutter-width); + z-index: $z-gutter; + transition: transform ease-in-out 0.2s; + + &.is-open { + transform: translateX(0); + } + + .gutter-toggle { + fill: $grey-light; + } + + .nomad-logo { + fill: $grey-light; + } + + .logo-container { + display: flex; + align-items: center; + height: 100%; + padding: 0.5rem 1rem; + margin-left: 20px; + } + + @media #{$mq-hidden-gutter} { + display: block; + } + } + + .menu { + z-index: $z-gutter; + } +} + +// Treated as an element of the gutter component despite not being nested within +// for z-index reasons. +.gutter-backdrop { + display: block; + position: fixed; + background: darken($nomad-green-darker, 10%); + opacity: 0; + width: calc(100vw + #{$gutter-width}); + height: 100vh; + top: 0; + left: 0; + transform: translateY(-100%); + transition: opacity ease-in-out 0.2s; + z-index: $z-gutter-backdrop; + + @media #{$mq-hidden-gutter} { + &.is-open { + transform: translateY(0); + opacity: 0.7; + } + } } diff --git a/ui/app/styles/components/nomad-logo.scss b/ui/app/styles/components/nomad-logo.scss new file mode 100644 index 00000000000..a127a7d7529 --- /dev/null +++ b/ui/app/styles/components/nomad-logo.scss @@ -0,0 +1,9 @@ +.nomad-logo { + height: 26px; + max-height: 26px; + fill: $white; + + .faded { + opacity: 0.7; + } +} diff --git a/ui/app/styles/components/page-layout.scss b/ui/app/styles/components/page-layout.scss index d463be113b8..294f041ff96 100644 --- a/ui/app/styles/components/page-layout.scss +++ b/ui/app/styles/components/page-layout.scss @@ -31,10 +31,28 @@ 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; + transform: translateX(-$gutter-width); + transition: transform ease-in-out 0.2s; + + &.is-open { + transform: translateX(0); + } + } + + &.is-right { + margin-left: 0; + } } } } diff --git a/ui/app/styles/core/navbar.scss b/ui/app/styles/core/navbar.scss index 39232665d6c..4ab73cfe8b5 100644 --- a/ui/app/styles/core/navbar.scss +++ b/ui/app/styles/core/navbar.scss @@ -1,10 +1,13 @@ .navbar { + display: flex; + &.is-primary { background: linear-gradient(to right, $nomad-green-darker, $nomad-green-dark); height: 3.5rem; color: $primary-invert; padding-left: 20px; padding-right: 20px; + overflow: hidden; .navbar-item { color: rgba($primary-invert, 0.8); @@ -35,11 +38,13 @@ top: 1.25em; } } + } - &.is-logo img { - height: 26px; - max-height: 26px; - } + .navbar-end { + display: flex; + align-items: stretch; + justify-content: flex-end; + margin-left: auto; } .navbar-end > a.navbar-item { @@ -65,8 +70,15 @@ } .navbar-item { + display: flex; + align-items: center; + &.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)'; diff --git a/ui/app/styles/utils/z-indices.scss b/ui/app/styles/utils/z-indices.scss index 12c13b4adcf..d48c6b435f6 100644 --- a/ui/app/styles/utils/z-indices.scss +++ b/ui/app/styles/utils/z-indices.scss @@ -1,5 +1,6 @@ $z-tooltip: 250; -$z-header: 200; -$z-gutter: 200; +$z-header: 210; +$z-gutter: 220; +$z-gutter-backdrop: 219; $z-subnav: 200; $z-base: 100; diff --git a/ui/app/templates/components/freestyle/sg-header.hbs b/ui/app/templates/components/freestyle/sg-header.hbs index 1a6a11addce..54aacf62e5c 100644 --- a/ui/app/templates/components/freestyle/sg-header.hbs +++ b/ui/app/templates/components/freestyle/sg-header.hbs @@ -1,8 +1,11 @@ {{#freestyle-usage "header" title="Global Header"}}