diff options
author | Ryan Arnell <iffy.ryan@ibm.com> | 2019-01-16 15:07:58 -0600 |
---|---|---|
committer | Gunnar Mills <gmills@us.ibm.com> | 2019-02-15 16:37:37 +0000 |
commit | 75494d4a69260f8e192d250d1f8c7813e4c759e1 (patch) | |
tree | c7c381ce6c198eca00d709481aec9d1b2c97d0b7 /app | |
parent | 8ccbc4a72c2d790fd291f3883135c77a1edae285 (diff) | |
download | phosphor-webui-75494d4a69260f8e192d250d1f8c7813e4c759e1.tar.gz phosphor-webui-75494d4a69260f8e192d250d1f8c7813e4c759e1.zip |
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>
Diffstat (limited to 'app')
-rw-r--r-- | app/common/directives/app-header.html | 5 | ||||
-rw-r--r-- | app/common/styles/layout/header.scss | 15 |
2 files changed, 11 insertions, 9 deletions
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 { .header__functions { position: absolute; top: 0; - right: -680px; + right: -480px; bottom: 0; z-index: 100; margin: .3em 0; @@ -119,7 +119,7 @@ header { 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 { .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 @@ header { 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 { } } .header__page-refresh { - padding-top: 0; + padding: 0 0.5rem 0.6rem; position: relative; span { font-size: 0.875em; |