Skip to content

Commit 97c9693

Browse files
scottophersonscottopherson
authored
Tweak navbar and sidebar styles to handle smaller viewports (#3654)
Until a more permanent solution is implemented, this commit retrofits the main navbar and sidebar styles to better handle smaller viewport sizes. The bulk of this diff is tweaks to paddings and font-sizes within Carbon grid breakpoints. The largest visual change is the main navbar collapsing to two rows within smaller viewports. Signed-off-by: Scott Christopherson <[email protected]>
1 parent 95a990f commit 97c9693

12 files changed

+187
-196
lines changed

‎components/automate-ui/.sass-lint.yml

-7
Original file line numberDiff line numberDiff line change
@@ -15,13 +15,6 @@ rules:
1515
extends-before-mixins: 2
1616
extends-before-declarations: 2
1717

18-
# Mixinss
19-
mixins-before-declarations:
20-
- 2
21-
- exclude:
22-
- breakpoint
23-
- mq
24-
2518
# Line Spacing
2619
one-declaration-per-line: 2
2720
empty-line-between-blocks: 2

‎components/automate-ui/src/app/components/sidebar-entry/sidebar-entry.component.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
<ng-template #sidebarEntryTemplate>
1313
<chef-icon class="sidebar-icon" *ngIf="icon"
1414
[style.transform]="'rotate(' + (iconRotation ? iconRotation : 0) + 'deg)'">{{icon}}</chef-icon>
15-
<ng-content></ng-content>
15+
<span class="text"><ng-content></ng-content></span>
1616
<chef-icon *ngIf="!openInNewPage" class="arrow">play_arrow</chef-icon>
1717
<chef-icon *ngIf="openInNewPage" class="open-in-new sidebar-icon">launch</chef-icon>
1818
</ng-template>

‎components/automate-ui/src/app/components/sidebar-entry/sidebar-entry.component.scss

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
:host {
2+
display: block;
3+
}

‎components/automate-ui/src/app/components/sidebar-entry/sidebar-entry.component.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { Component, Input } from '@angular/core';
33
@Component({
44
selector: 'chef-sidebar-entry',
55
templateUrl: './sidebar-entry.component.html',
6-
styleUrls: []
6+
styleUrls: ['./sidebar-entry.component.scss']
77
})
88
export class SidebarEntryComponent {
99
@Input() icon: string;

‎components/automate-ui/src/app/components/sidebar/sidebar.component.html

+29-21
Original file line numberDiff line numberDiff line change
@@ -4,36 +4,44 @@
44
</div>
55
<nav role="navigation" class="sidebar-nav">
66
<div class="nav-items">
7-
<span *ngFor="let menuGroup of menuGroups$ | async">
7+
<ng-container *ngFor="let menuGroup of menuGroups$ | async; index as groupIndex">
88
<div
99
[hidden]="!((menuGroup.visible$ | async) && menuGroup.hasVisibleMenuItems)"
10-
class="menu-item-groups"
11-
>
10+
class="menu-item-groups">
1211
<div class="group">{{ menuGroup.name }}</div>
13-
<span *ngFor="let menuItem of menuGroup.items">
14-
<span *ngIf="!menuItem.authorized && (menuItem.visible$ | async)">
12+
<div class="group-item" *ngFor="let menuItem of menuGroup.items; index as itemIndex">
13+
<ng-container *ngIf="!menuItem.authorized && (menuItem.visible$ | async)">
1514
<chef-sidebar-entry
15+
[id]="'entry' + groupIndex + '-' + itemIndex"
1616
[route]="menuItem.route"
1717
[icon]="menuItem.icon"
1818
[openInNewPage]="menuItem.openInNewPage"
1919
>{{ menuItem.name }}</chef-sidebar-entry>
20-
</span>
21-
<span *ngIf="menuItem.authorized && (menuItem.visible$ | async)">
22-
<app-authorized
23-
[anyOf]="menuItem.authorized.anyOf"
24-
[allOf]="menuItem.authorized.allOf"
25-
(isAuthorized)="isAuthorized($event, menuItem, menuGroup)"
26-
>
27-
<chef-sidebar-entry
28-
[route]="menuItem.route"
29-
[icon]="menuItem.icon"
30-
[openInNewPage]="menuItem.openInNewPage"
31-
>{{ menuItem.name }}</chef-sidebar-entry>
32-
</app-authorized>
33-
</span>
34-
</span>
20+
<chef-tooltip
21+
[attr.for]="'entry' + groupIndex + '-' + itemIndex"
22+
position="right"
23+
delay="0">{{ menuItem.name }}</chef-tooltip>
24+
</ng-container>
25+
<ng-container *ngIf="menuItem.authorized && (menuItem.visible$ | async)">
26+
<app-authorized
27+
[anyOf]="menuItem.authorized.anyOf"
28+
[allOf]="menuItem.authorized.allOf"
29+
(isAuthorized)="isAuthorized($event, menuItem, menuGroup)">
30+
<chef-sidebar-entry
31+
[id]="'entry' + groupIndex + '-' + itemIndex"
32+
[route]="menuItem.route"
33+
[icon]="menuItem.icon"
34+
[openInNewPage]="menuItem.openInNewPage"
35+
>{{ menuItem.name }}</chef-sidebar-entry>
36+
<chef-tooltip
37+
[attr.for]="'entry' + groupIndex + '-' + itemIndex"
38+
position="right"
39+
delay="0">{{ menuItem.name }}</chef-tooltip>
40+
</app-authorized>
41+
</ng-container>
42+
</div>
3543
</div>
36-
</span>
44+
</ng-container>
3745
</div>
3846

3947
<ng-content select=".nav-items"></ng-content>

‎components/automate-ui/src/app/components/sidebar/sidebar.component.scss

+28-26
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
@import "~styles/variables";
2+
@import "@carbon/layout/scss/layout";
23

34
.sidebar {
45
display: block;
@@ -8,7 +9,20 @@
89
width: $sidebar-width;
910
height: 100%;
1011
background-color: $chef-white;
11-
border-right: 1px solid #DFE3E5;
12+
border-right: 1px solid $chef-grey;
13+
14+
@include carbon--breakpoint-down(lg) {
15+
width: $sidebar-small-width;
16+
}
17+
18+
chef-tooltip {
19+
display: none;
20+
transition-duration: 0.1s;
21+
22+
@include carbon--breakpoint-down(lg) {
23+
display: block;
24+
}
25+
}
1226

1327
.sidebar-selector {
1428

@@ -73,6 +87,7 @@
7387
text-decoration: none;
7488
font-size: 16px;
7589
overflow: hidden;
90+
white-space: nowrap;
7691

7792
// yields required 16px gap between elements
7893
padding-top: 8px;
@@ -87,6 +102,7 @@
87102

88103
.arrow {
89104
display: inline;
105+
margin-right: -3px;
90106
}
91107
}
92108
}
@@ -97,16 +113,17 @@
97113
vertical-align: -2px;
98114
}
99115

100-
.arrow {
116+
.arrow,
117+
.open-in-new {
101118
display: none;
102119
margin-top: 4px;
103120
float: right;
104121
font-size: 14px;
105122
}
106123

107124
.open-in-new {
108-
font-size: 14px;
109-
padding-left: 4px;
125+
display: inline;
126+
margin-right: -3px;
110127
}
111128

112129
.group {
@@ -116,30 +133,15 @@
116133
font-size: 12px;
117134
color: #6F7878;
118135
}
119-
}
120-
}
121-
}
122-
123-
@media screen and (max-width: 769px) {
124-
.sidebar {
125-
width: $sidebar-small-width;
126-
127-
.text {
128-
display: none;
129-
}
130136

131-
ul {
132-
li {
133-
padding: 0;
134-
}
135-
}
137+
@include carbon--breakpoint-down(lg) {
138+
.menu-item-groups:not(:last-child) {
139+
border-bottom: 1px solid $chef-grey;
140+
}
136141

137-
.sidebar-nav {
138-
ul {
139-
li {
140-
a {
141-
padding: 30px 7px 30px 7px;
142-
}
142+
.group,
143+
.text {
144+
display: none;
143145
}
144146
}
145147
}

‎components/automate-ui/src/app/page-components/navbar/navbar.component.html

+44-46
Original file line numberDiff line numberDiff line change
@@ -1,55 +1,53 @@
11
<header role="banner">
22
<nav role="navigation" class="navigation-wrapper">
3-
<div class="left-nav" role="menubar">
4-
<div role="menuitem" class="logo-wrapper">
5-
<a tabindex="0" routerLink="/" class="logo" title="logo link to homepage"></a>
6-
</div>
7-
<div class="navigation-menu">
8-
<app-authorized [allOf]="[
9-
['/api/v0/eventfeed', 'get'],
10-
['/api/v0/eventstrings', 'get'],
11-
['/api/v0/event_type_counts', 'get'],
12-
['/api/v0/event_task_counts', 'get']]">
13-
<div role="menuitem" class="nav-link"><a routerLink="/dashboards/event-feed" routerLinkActive="active" tabindex="0">Dashboards</a></div>
14-
</app-authorized>
3+
<div role="menuitem" class="logo-wrapper">
4+
<a tabindex="0" routerLink="/" class="logo" title="logo link to homepage"></a>
5+
</div>
6+
<div class="navigation-menu">
7+
<app-authorized [allOf]="[
8+
['/api/v0/eventfeed', 'get'],
9+
['/api/v0/eventstrings', 'get'],
10+
['/api/v0/event_type_counts', 'get'],
11+
['/api/v0/event_task_counts', 'get']]">
12+
<div role="menuitem" class="nav-link"><a routerLink="/dashboards/event-feed" routerLinkActive="active" tabindex="0">Dashboards</a></div>
13+
</app-authorized>
1514

16-
<app-authorized [allOf]="[
17-
['/api/v0/applications/services', 'get'],
18-
['/api/v0/applications/service-groups', 'get']]">
19-
<div role="menuitem" class="nav-link"><a routerLink="/applications/service-groups" routerLinkActive="active" tabindex="0">Applications</a></div>
20-
</app-authorized>
15+
<app-authorized [allOf]="[
16+
['/api/v0/applications/services', 'get'],
17+
['/api/v0/applications/service-groups', 'get']]">
18+
<div role="menuitem" class="nav-link"><a routerLink="/applications/service-groups" routerLinkActive="active" tabindex="0">Applications</a></div>
19+
</app-authorized>
2120

22-
<app-authorized [allOf]="[
23-
['/api/v0/cfgmgmt/nodes', 'get'],
24-
['/api/v0/cfgmgmt/stats/node_counts', 'get']]">
25-
<div role="menuitem" class="nav-link"><a routerLink="/infrastructure" routerLinkActive="active" tabindex="0">Infrastructure</a></div>
26-
</app-authorized>
21+
<app-authorized [allOf]="[
22+
['/api/v0/cfgmgmt/nodes', 'get'],
23+
['/api/v0/cfgmgmt/stats/node_counts', 'get']]">
24+
<div role="menuitem" class="nav-link"><a routerLink="/infrastructure" routerLinkActive="active" tabindex="0">Infrastructure</a></div>
25+
</app-authorized>
2726

28-
<app-authorized [anyOf]="[
29-
['/api/v0/compliance/reporting/stats/summary', 'post'],
30-
['/api/v0/compliance/reporting/stats/failures', 'post'],
31-
['/api/v0/compliance/reporting/stats/trend', 'post'],
32-
['/api/v0/compliance/scanner/jobs', 'post'],
33-
['/api/v0/compliance/scanner/jobs/search', 'post'],
34-
['/api/v0/compliance/profiles/search', 'post']]">
35-
<div role="menuitem" class="nav-link"><a routerLink="/compliance" routerLinkActive="active" tabindex="0">Compliance</a></div>
36-
</app-authorized>
27+
<app-authorized [anyOf]="[
28+
['/api/v0/compliance/reporting/stats/summary', 'post'],
29+
['/api/v0/compliance/reporting/stats/failures', 'post'],
30+
['/api/v0/compliance/reporting/stats/trend', 'post'],
31+
['/api/v0/compliance/scanner/jobs', 'post'],
32+
['/api/v0/compliance/scanner/jobs/search', 'post'],
33+
['/api/v0/compliance/profiles/search', 'post']]">
34+
<div role="menuitem" class="nav-link"><a routerLink="/compliance" routerLinkActive="active" tabindex="0">Compliance</a></div>
35+
</app-authorized>
3736

38-
<app-authorized [anyOf]="[
39-
['/api/v0/datafeed/destinations', 'post'],
40-
['/api/v0/notifications/rules', 'get'],
41-
['/api/v0/secrets/search', 'post'],
42-
['/api/v0/nodemanagers/search', 'post'],
43-
['/api/v0/retention/nodes/status', 'get'],
44-
['/apis/iam/v2/users', 'get'],
45-
['/apis/iam/v2/teams', 'get'],
46-
['/apis/iam/v2/tokens', 'get'],
47-
['/apis/iam/v2/policies', 'get'],
48-
['/apis/iam/v2/roles', 'get'],
49-
['/apis/iam/v2/projects', 'get']] ">
50-
<div role="menuitem" class="nav-link"><a routerLink="/settings" routerLinkActive="active" tabindex="0">Settings</a></div>
51-
</app-authorized>
52-
</div>
37+
<app-authorized [anyOf]="[
38+
['/api/v0/datafeed/destinations', 'post'],
39+
['/api/v0/notifications/rules', 'get'],
40+
['/api/v0/secrets/search', 'post'],
41+
['/api/v0/nodemanagers/search', 'post'],
42+
['/api/v0/retention/nodes/status', 'get'],
43+
['/apis/iam/v2/users', 'get'],
44+
['/apis/iam/v2/teams', 'get'],
45+
['/apis/iam/v2/tokens', 'get'],
46+
['/apis/iam/v2/policies', 'get'],
47+
['/apis/iam/v2/roles', 'get'],
48+
['/apis/iam/v2/projects', 'get']] ">
49+
<div role="menuitem" class="nav-link"><a routerLink="/settings" routerLinkActive="active" tabindex="0">Settings</a></div>
50+
</app-authorized>
5351
</div>
5452
<div class="right-nav" role="menubar">
5553
<app-projects-filter></app-projects-filter>

0 commit comments

Comments
 (0)