Fix layout for responsive design: Header
Get rid of "BMC host/IP address" & "server info" text, make the
buttons tighter and make more buttons visible in header so that
the information is more useful to users in tablet view.
Change-Id: I6b4166390b1828fca265e7bb56f51106b4e6f21b
Signed-off-by: Ryan Arnell <iffy.ryan@ibm.com>
diff --git a/app/common/directives/app-header.html b/app/common/directives/app-header.html
index 0b473ed..8d6a2ad 100644
--- a/app/common/directives/app-header.html
+++ b/app/common/directives/app-header.html
@@ -8,10 +8,10 @@
<div class="logo__wrapper"><img src="../../assets/images/logo.svg" class="header__logo" alt="company logo"/></div>
<div class="inline header__server-name">
<p class="header__hostname">{{dataService.hostname}}</p>
- <p class="header__server-ip courier-bold">BMC host/IP address {{dataService.server_id}}</p>
+ <p class="header__server-ip courier-bold">{{dataService.server_id}}</p>
</div>
<div class="header__functions" ng-class="{'active' : toggle}">
- <a class="header__info" ng-click="toggle = !toggle"><span>Server Info</span><i class="icon icon-angle" aria-hidden="true"></i></a>
+ <button type="button" class="header__info" ng-click="toggle = !toggle"><i class="icon icon-angle" aria-hidden="true"></i></button>
<a href="#/server-health/event-log" class="header__server-health">Server health
<i class="icon icon-angle" aria-hidden="true"></i><span ng-class="{'status-light__error': dataService.server_health == 'Critical', 'status-light__warn': dataService.server_health == 'Warning', 'status-light__good': dataService.server_health == 'Good'}">{{dataService.server_health}}</span></a>
<a href="#/server-control/power-operations" class="header__server-power" role="button">Server power
@@ -22,6 +22,7 @@
<span>Refresh</span>
<svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52.18 51.91">
<path class="cls-1" d="M38,20.77H52v-14H48.3v6.07A26,26,0,1,0,48.7,38H44.32a22.14,22.14,0,1,1,1.8-20.92H38v3.67Z" transform="translate(0.16 0.14)"/>
+ </svg>
</button>
</div>
</div>
diff --git a/app/common/styles/layout/header.scss b/app/common/styles/layout/header.scss
index a18d8ac..bb326fd 100644
--- a/app/common/styles/layout/header.scss
+++ b/app/common/styles/layout/header.scss
@@ -97,7 +97,7 @@
.header__functions {
position: absolute;
top: 0;
- right: -680px;
+ right: -480px;
bottom: 0;
z-index: 100;
margin: .3em 0;
@@ -119,7 +119,7 @@
float: left;
text-decoration: none;
color: $darkgrey;
- padding: 1.250em 1.688em;
+ padding: 1.250em;
height: 100%;
font-size: 0.875em;
font-weight: 400;
@@ -171,9 +171,9 @@
.header__functions {
.header__info {
padding: .3em;
- min-width: 60px;
+ min-width: 40px;
text-align: center;
- display: inline-block;
+ float: left;
span {
padding: .7em 0 .3em;
font-size: 1em;
@@ -181,10 +181,11 @@
color: $darkgrey;
}
.icon-angle {
- margin-bottom: .9em;
+ margin: 0.2em 0 0 0;
}
.icon-angle::before {
- font-size: 2em;
+ font-size: 1.625em;
+ font-weight: 400;
margin-left: 0;
display: block;
transform: rotate(180deg);
@@ -210,7 +211,7 @@
}
}
.header__page-refresh {
- padding-top: 0;
+ padding: 0 0.5rem 0.6rem;
position: relative;
span {
font-size: 0.875em;