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>

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;