Skip to content

Commit 3a357a7

Browse files
DingoEatingFuzzDingoEatingFuzz
authored
Merge pull request #4536 from hashicorp/f-ui-mobile-views
UI: Mobile Views
2 parents 561d0b9 + ce117bf commit 3a357a7

20 files changed

+270
-13
lines changed

‎ui/app/components/global-header.js

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import Component from '@ember/component';
2+
3+
export default Component.extend({
4+
onHamburgerClick() {},
5+
});

‎ui/app/components/gutter-menu.js

+2
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,8 @@ export default Component.extend({
3232
});
3333
}),
3434

35+
onHamburgerClick() {},
36+
3537
gotoJobsForNamespace(namespace) {
3638
if (!namespace || !namespace.get('id')) return;
3739

‎ui/app/components/page-layout.js

+2
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,6 @@ import Component from '@ember/component';
22

33
export default Component.extend({
44
classNames: ['page-layout'],
5+
6+
isGutterOpen: false,
57
});

‎ui/app/styles/components.scss

+2
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,14 @@
66
@import './components/empty-message';
77
@import './components/error-container';
88
@import './components/gutter';
9+
@import './components/gutter-toggle';
910
@import './components/inline-definitions';
1011
@import './components/job-diff';
1112
@import './components/json-viewer';
1213
@import './components/loading-spinner';
1314
@import './components/metrics';
1415
@import './components/node-status-light';
16+
@import './components/nomad-logo';
1517
@import './components/page-layout';
1618
@import './components/simple-list';
1719
@import './components/status-text';

‎ui/app/styles/components/gutter-toggle.scss

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
.gutter-toggle {
2+
display: none;
3+
4+
position: absolute;
5+
left: 0;
6+
padding: 1.25rem 0.7rem;
7+
z-index: 1; // Make sure the toggle is on top of its siblings
8+
height: 100%;
9+
fill: desaturate(lighten($nomad-green, 20%), 30%);
10+
cursor: pointer;
11+
12+
> svg {
13+
width: 15px;
14+
}
15+
16+
@media #{$mq-hidden-gutter} {
17+
display: inline-block;
18+
}
19+
}

‎ui/app/styles/components/gutter.scss

+70
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,74 @@
11
.gutter {
22
height: 100%;
33
border-right: 1px solid $grey-blue;
4+
overflow: hidden;
5+
6+
@media #{$mq-hidden-gutter} {
7+
border-right: none;
8+
9+
&.is-open {
10+
box-shadow: 0 0 30px darken($nomad-green-darker, 20%);
11+
}
12+
}
13+
14+
.collapsed-menu {
15+
display: none;
16+
position: relative;
17+
height: 3.5rem;
18+
width: $gutter-width;
19+
transform: translateX($gutter-width);
20+
z-index: $z-gutter;
21+
transition: transform ease-in-out 0.2s;
22+
23+
&.is-open {
24+
transform: translateX(0);
25+
}
26+
27+
.gutter-toggle {
28+
fill: $grey-light;
29+
}
30+
31+
.nomad-logo {
32+
fill: $grey-light;
33+
}
34+
35+
.logo-container {
36+
display: flex;
37+
align-items: center;
38+
height: 100%;
39+
padding: 0.5rem 1rem;
40+
margin-left: 20px;
41+
}
42+
43+
@media #{$mq-hidden-gutter} {
44+
display: block;
45+
}
46+
}
47+
48+
.menu {
49+
z-index: $z-gutter;
50+
}
51+
}
52+
53+
// Treated as an element of the gutter component despite not being nested within
54+
// for z-index reasons.
55+
.gutter-backdrop {
56+
display: block;
57+
position: fixed;
58+
background: darken($nomad-green-darker, 10%);
59+
opacity: 0;
60+
width: calc(100vw + #{$gutter-width});
61+
height: 100vh;
62+
top: 0;
63+
left: 0;
64+
transform: translateY(-100%);
65+
transition: opacity ease-in-out 0.2s;
66+
z-index: $z-gutter-backdrop;
67+
68+
@media #{$mq-hidden-gutter} {
69+
&.is-open {
70+
transform: translateY(0);
71+
opacity: 0.7;
72+
}
73+
}
474
}

‎ui/app/styles/components/nomad-logo.scss

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
.nomad-logo {
2+
height: 26px;
3+
max-height: 26px;
4+
fill: $white;
5+
6+
.faded {
7+
opacity: 0.7;
8+
}
9+
}

‎ui/app/styles/components/page-layout.scss

+18
Original file line numberDiff line numberDiff line change
@@ -31,10 +31,28 @@
3131
bottom: 0;
3232
top: $header-height;
3333
z-index: $z-gutter;
34+
background: $white;
3435
}
3536

3637
&.is-right {
3738
margin-left: $gutter-width;
39+
overflow-x: auto;
40+
}
41+
42+
@media #{$mq-hidden-gutter} {
43+
&.is-left {
44+
top: 0;
45+
transform: translateX(-$gutter-width);
46+
transition: transform ease-in-out 0.2s;
47+
48+
&.is-open {
49+
transform: translateX(0);
50+
}
51+
}
52+
53+
&.is-right {
54+
margin-left: 0;
55+
}
3856
}
3957
}
4058
}

‎ui/app/styles/core/navbar.scss

+16-4
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,13 @@
11
.navbar {
2+
display: flex;
3+
24
&.is-primary {
35
background: linear-gradient(to right, $nomad-green-darker, $nomad-green-dark);
46
height: 3.5rem;
57
color: $primary-invert;
68
padding-left: 20px;
79
padding-right: 20px;
10+
overflow: hidden;
811

912
.navbar-item {
1013
color: rgba($primary-invert, 0.8);
@@ -35,11 +38,13 @@
3538
top: 1.25em;
3639
}
3740
}
41+
}
3842

39-
&.is-logo img {
40-
height: 26px;
41-
max-height: 26px;
42-
}
43+
.navbar-end {
44+
display: flex;
45+
align-items: stretch;
46+
justify-content: flex-end;
47+
margin-left: auto;
4348
}
4449

4550
.navbar-end > a.navbar-item {
@@ -65,8 +70,15 @@
6570
}
6671

6772
.navbar-item {
73+
display: flex;
74+
align-items: center;
75+
6876
&.is-gutter {
6977
width: $gutter-width;
78+
79+
@media #{$mq-hidden-gutter} {
80+
width: 0;
81+
}
7082
}
7183
}
7284
}

‎ui/app/styles/core/tabs.scss

+4
Original file line numberDiff line numberDiff line change
@@ -42,5 +42,9 @@
4242
+ * {
4343
margin-top: 5em;
4444
}
45+
46+
@media #{$mq-hidden-gutter} {
47+
left: 0;
48+
}
4549
}
4650
}

‎ui/app/styles/core/variables.scss

+2
Original file line numberDiff line numberDiff line change
@@ -39,3 +39,5 @@ $breadcrumb-item-color: $white;
3939
$breadcrumb-item-hover-color: $white;
4040
$breadcrumb-item-active-color: $white;
4141
$breadcrumb-item-separator-color: $primary;
42+
43+
$mq-hidden-gutter: 'only screen and (max-width : 960px)';

‎ui/app/styles/utils/z-indices.scss

+3-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
$z-tooltip: 250;
2-
$z-header: 200;
3-
$z-gutter: 200;
2+
$z-header: 210;
3+
$z-gutter: 220;
4+
$z-gutter-backdrop: 219;
45
$z-subnav: 200;
56
$z-base: 100;

‎ui/app/templates/components/freestyle/sg-header.hbs

+4-1
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,11 @@
11
{{#freestyle-usage "header" title="Global Header"}}
22
<nav class="navbar is-primary">
33
<div class="navbar-brand">
4+
<span class="gutter-toggle" aria-label="menu">
5+
{{partial "partials/hamburger-menu"}}
6+
</span>
47
<span class="navbar-item is-logo">
5-
<img src="/ui/images/nomad-logo.svg" alt="Nomad" />
8+
{{partial "partials/nomad-logo"}}
69
</span>
710
</div>
811
<div class="navbar-end">

‎ui/app/templates/components/global-header.hbs

+4-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,10 @@
11
<nav class="navbar is-primary">
22
<div class="navbar-brand">
3+
<span data-test-header-gutter-toggle class="gutter-toggle" aria-label="menu" onclick={{action onHamburgerClick}}>
4+
{{partial "partials/hamburger-menu"}}
5+
</span>
36
<span class="navbar-item is-logo">
4-
<img src="/ui/images/nomad-logo.svg" alt="Nomad" />
7+
{{partial "partials/nomad-logo"}}
58
</span>
69
</div>
710
<div class="navbar-end">

‎ui/app/templates/components/gutter-menu.hbs

+11-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,13 @@
1-
<div class="page-column is-left">
2-
<div class="gutter">
1+
<div data-test-gutter-menu class="page-column is-left {{if isOpen "is-open"}}">
2+
<div class="gutter {{if isOpen "is-open"}}">
3+
<header class="collapsed-menu {{if isOpen "is-open"}}">
4+
<span data-test-gutter-gutter-toggle class="gutter-toggle" aria-label="menu" onclick={{action onHamburgerClick}}>
5+
{{partial "partials/hamburger-menu"}}
6+
</span>
7+
<span class="logo-container">
8+
{{partial "partials/nomad-logo"}}
9+
</span>
10+
</header>
311
<aside class="menu">
412
<p class="menu-label">
513
Workload
@@ -42,3 +50,4 @@
4250
<div data-test-page-content class="page-column is-right">
4351
{{yield}}
4452
</div>
53+
<div data-test-gutter-backdrop class="gutter-backdrop {{if isOpen "is-open"}}" onclick={{action onHamburgerClick}}></div>

‎ui/app/templates/components/page-layout.hbs

+7-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,11 @@
1-
{{#global-header class="page-header"}}
1+
{{#global-header
2+
class="page-header"
3+
onHamburgerClick=(action (mut isGutterOpen) true)}}
24
{{app-breadcrumbs}}
35
{{/global-header}}
4-
{{#gutter-menu class="page-body"}}
6+
{{#gutter-menu
7+
class="page-body"
8+
isOpen=isGutterOpen
9+
onHamburgerClick=(action (mut isGutterOpen) false)}}
510
{{yield}}
611
{{/gutter-menu}}

‎ui/app/templates/partials/hamburger-menu.hbs

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
<svg class="hamburger-menu" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
2+
<rect x="0" y="0" width="100" height="16" />
3+
<rect x="0" y="42" width="100" height="16" />
4+
<rect x="0" y="84" width="100" height="16" />
5+
</svg>

‎ui/app/templates/partials/nomad-logo.hbs

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<svg class="nomad-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 206.31 60.07">
2+
<g>
3+
<g>
4+
<path d="M78.49,21.83V46.07h-5.9v-32h8.06L92.79,38.39V14.1h5.9v32H90.63Z"/>
5+
<path d="M113.09,46.55c-8,0-10.18-4.42-10.18-9.22V31.43c0-4.8,2.16-9.22,10.18-9.22s10.18,4.42,10.18,9.22v5.91C123.27,42.13,121.11,46.55,113.09,46.55Zm0-19.35c-3.12,0-4.32,1.39-4.32,4v6.29c0,2.64,1.2,4,4.32,4s4.32-1.39,4.32-4V31.24C117.41,28.6,116.21,27.2,113.09,27.2Z"/>
6+
<path d="M141.08,46.07V29.75c0-1.25-.53-1.87-1.87-1.87a16.16,16.16,0,0,0-6.1,2V46.07h-5.86V22.69h4.46l.58,2a23.43,23.43,0,0,1,9.36-2.45,4.44,4.44,0,0,1,4.42,2.5,23,23,0,0,1,9.41-2.5c3.89,0,5.28,2.74,5.28,6.91V46.07H154.9V29.75c0-1.25-.53-1.87-1.87-1.87a15.5,15.5,0,0,0-6.1,2V46.07Z"/>
7+
<path d="M182.88,46.07h-4.8l-.43-1.58a12.79,12.79,0,0,1-7,2.06c-4.27,0-6.1-2.93-6.1-7,0-4.75,2.06-6.58,6.82-6.58H177V30.56c0-2.59-.72-3.5-4.46-3.5a32.71,32.71,0,0,0-6.48.72l-.72-4.46a30.52,30.52,0,0,1,8-1.1c7.34,0,9.5,2.59,9.5,8.45ZM177,37.24h-4.32c-1.92,0-2.45.53-2.45,2.3s.53,2.35,2.35,2.35a9.2,9.2,0,0,0,4.42-1.2Z"/>
8+
<path d="M186.48,30.47c0-5.18,2.3-8.26,7.73-8.26a32.22,32.22,0,0,1,6.24.67V13.14l5.86-.82V46.07h-4.66l-.58-2a12.31,12.31,0,0,1-7.39,2.45c-4.7,0-7.2-2.79-7.2-8.11Zm14-2.64a26,26,0,0,0-5.18-.62c-2.11,0-2.93,1-2.93,3.12v8.26c0,1.92.72,3,2.88,3a8.28,8.28,0,0,0,5.23-2.11Z"/>
9+
<polygon class="faded" points="38.02 23.13 38.02 33.08 31.09 37.09 26.25 34.09 26.25 60.06 26.38 60.07 52.49 45.07 52.49 15.11 52.01 15.11 38.02 23.13"/>
10+
<polygon points="26.03 0.07 0 15.11 17.56 25.43 21.11 23.27 29.75 28.08 29.75 18.08 38.02 13.11 38.02 23.13 52.49 15.11 52.49 15.07 26.03 0.07"/>
11+
<polygon points="22.75 32.09 22.75 42.08 14.87 47.08 14.87 27.08 17.86 25.25 0.15 15.11 0 15.11 0 45.07 26.25 60.06 26.25 34.09 22.75 32.09"/>
12+
</g>
13+
</g>
14+
</svg>

‎ui/public/images/nomad-logo.svg

-1
This file was deleted.

0 commit comments

Comments
 (0)