commit e15a956125ac6d0c6dd60fa2f657d642ed893a8f
author Michael Davis <michael.s.davis@ibm.com> Fri Mar 03 14:30:24 2017 -0600
committer Patrick Williams <patrick@stwcx.xyz> Wed Sep 20 12:41:10 2017 -0500
tree 25d56b68f86fc64143207b8de9188fd08643b963
parent 5d01469c32865eb4bddd1390fe703f19a53820a3

misc changes to header and login

    * Header optimizations for small screens
    * Style changes to login page.

Change-Id: Ia7a4fc0cab8e105348f8f8e36b3c61cdc938b2bb
Signed-off-by: Michael Davis <michael.s.davis@ibm.com>

src/scss/layout/_header.scss

diff --git a/src/scss/layout/_header.scss b/src/scss/layout/_header.scss
index f0431ca..9b7dff5 100644
--- a/src/scss/layout/_header.scss
+++ b/src/scss/layout/_header.scss
@@ -42,17 +42,29 @@
 
 .header__functions-wrapper {
   color: $white;
-  background: $lightbg__primary;
+  background: $darkbg__primary;
   padding: 0 1.1em;
   box-sizing: border-box;
   display: block;
   position: relative;
   overflow: hidden;
   min-height: 5em;
+  #header__server-name {
+    //margin-top: .8em;
+    font-size: 1.5em;
+    font-weight: 500;
+    color: $white;
+    padding: .9em;
+    height: 100%;
+    background: transparent;
+    max-width: 350px;
+    white-space: nowrap;
+  }
   .logo__wrapper {
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
+    padding-top: .5em;
+    //position: absolute;
+    //top: 50%;
+    //transform: translateY(-50%);
   }
 
   #header__logo {
@@ -64,6 +76,21 @@
     max-width: $logoMaxWidth;
     width: auto;
   }
+  #header__funct-icon {
+    display: block;
+    font-size: 2.3em;
+    color: $white;
+    padding: 0;
+    &:before {
+      content: '\2261';
+      line-height: .5;
+      font-size: 2em;
+      padding: 0 .3em;
+    }
+    @include mediaQuery(medium) {
+      display: none;
+    }
+  }
 
   .header__functions {
     position: absolute;
@@ -71,29 +98,14 @@
     right: 0;
     bottom: 0;
     background: $darkbg__primary;
+    z-index: 100;
+    @include fastTransition-all;
     span {
       display: block;
       color: $white;
       font-size: 1em;
-      &.status-light__disabled {
-        color: $darkgrey;
-        &::before {
-          @include status-light__disabled;
-        }
-      }
-      &.status-light__good{
-        &::before {
-          @include status-light__good;
-        }
-      }
-      &.status-light__error{
-        color: $error-color;
-        &::before {
-          @include status-light__error;
-        }
-      }
     }
-    a,  p, button {
+    a, p, button {
       display: block;
       float: left;
       text-decoration: none;
@@ -103,21 +115,40 @@
       padding: 1.250em 1.688em;
       height: 100%;
       font-size: 0.875em;
-      line-height: 1.3;
-      > span {font-size: 1rem;
-        font-weight: bold;}
+      line-height: 1;
+      > span {
+        font-size: 1rem;
+        font-weight: bold;
+      }
     }
   }
+
+  // hide/show header functions based on screen size
+  .header__functions > #header__server-health {
+    display: none;
+    @include mediaQuery(small) {
+      display: block;
+    }
+  }
+
+  .header__functions > .header__refresh {
+    display: none;
+    @include mediaQuery(medium) {
+      display: block;
+    }
+  }
+
   .header__functions {
     .header__refresh {
       color: $lightgrey;
-      line-height: 1.6;
+      line-height: 1.8;
+      margin-top: -4px;
     }
   }
   .header__server-power,
-  .header__page-refresh{
+  .header__page-refresh {
     &:hover {
-      background: rgba(60,109,240,.4);
+      background: rgba(60, 109, 240, .4);
     }
   }
   .header__page-refresh {
@@ -127,4 +158,6 @@
       width: 24px;
     }
   }
-}// end header__functions-wrapper
+}
+
+// end header__functions-wrapper