commit 859f502d5402fcf29e1bf4f637a3545bf5b62036
author Ryan Arnell <iffy.ryan@ibm.com> Mon Jan 14 14:55:08 2019 -0600
committer Ed Tanous <ed.tanous@intel.com> Tue Jan 29 18:19:48 2019 +0000
tree 80166fcbe37394601cd2ed7b115939e883126ea6
parent 7e48d0818a57f1e9024b21b4be589aad2d06ebca

Fix issue for responsive design: Login screen

This push fixes the issue of the logo and input alignment in login
screen on tablets portrait and landscape mode. They are centrally
aligned in these views. Gets rid of the unwanted horizontal scrollbar
in tablets.

Change-Id: I31fd9caa881e0ffb6b1cd58701d911ee916dd419
Signed-off-by: Ryan Arnell <iffy.ryan@ibm.com>

app/login/controllers/login-controller.html

diff --git a/app/login/controllers/login-controller.html b/app/login/controllers/login-controller.html
index e2ec999..b8fdf09 100644
--- a/app/login/controllers/login-controller.html
+++ b/app/login/controllers/login-controller.html
@@ -1,14 +1,8 @@
 <div>
   <div class="row">
     <div class="columns large-6">
-      <img src="../../assets/images/logo.svg" class="login__logo" alt="OpenBMC logo" role="img"/>
-    </div>
-    <div class="columns large-6">
-    </div>
-  </div>
-  <div class="row">
-    <div class="columns large-6 login__desc">
-      <h1>OpenBMC</h1>
+      <img src="../../assets/images/logo.svg" class="login__logo" alt="OpenBMC logo"/>
+      <h1 class="login__desc">OpenBMC</h1>
     </div>
     <div class="columns large-6 disabled">
       <form id="login__form" action="">

app/login/styles/index.scss

diff --git a/app/login/styles/index.scss b/app/login/styles/index.scss
index 1499c93..0bc424b 100644
--- a/app/login/styles/index.scss
+++ b/app/login/styles/index.scss
@@ -10,13 +10,11 @@
   padding-top: 1em;
   color: $black;
   .row {
-    max-width: 1040px;
+    max-width: 1080px;
   }
   @include mediaQuery(small) {
-    left: 50%;
     top: 50%;
     transform: translateY(-50%);
-    margin-left: -50%;
   }
   @include mediaQuery(medium) {
     left: 0;
@@ -25,9 +23,9 @@
   .login__logo {
     max-width: 200px;
     display: block;
-    margin-bottom: 2em;
+    margin: 0 auto 2em;
     @include mediaQuery(small) {
-      margin-bottom: 4em;
+      margin: 0 auto;
     }
   }
   @include fastTransition-all;
@@ -41,11 +39,15 @@
   overflow: hidden;
   @include mediaQuery(small) {
     max-width: 50%;
+    margin: 0 auto;
   }
   @include mediaQuery(medium) {
-    padding: 0 0 0 5em;
+    padding: 0 3em;
     max-width: 100%;
   }
+  @include mediaQuery(large) {
+    padding: 0 0 0 6em;
+  }
   @include fastTransition-all;
 
   input:disabled,
@@ -56,18 +58,10 @@
 }
 
 .login__desc {
-  text-align: left;
-  h1 {
-    font-size: 2em;
-    margin-bottom: 0;
-    font-weight: bold;
-    @include mediaQuery(small) {
-      max-width: 50%;
-    }
-    @include mediaQuery(medium) {
-      max-width: 100%;
-    }
-  }
+  text-align: center;
+  font-size: 2em;
+  margin: 0.5em 0 2em;
+  font-weight: bold;
 }
 
 .login__server-info {