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>

2 files changed, 14 insertions, 26 deletions

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="">
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 {