optimized login views for mobile

src/js/controller/login.js

@@ -29,7 +29,7 @@ define(function(require) {
 
                 // check if account needs to be selected
                 if (!emailAddress) {
-                    goTo('/add-account');
+                    //goTo('/add-account');
                     return;
                 }
 

src/sass/views/_login.scss

@@ -4,26 +4,34 @@
     height: 100%;
     background-color: $color-grey-lightest;
     color: $color-grey-dark;
+    text-align: center;
+    padding: 20px;
 
-    .logo-wrapper {
+    .logo {
         max-width: 700px;
-        height: 58px;
-        margin: 145px auto 75px auto;
-
-        .logo {
-            background-image:url('../img/whiteout_logo.svg');
-            background-repeat: no-repeat;
-            background-size: 320px 58px;
+        margin: 135px auto 75px;
+        img {
+            display: block;
+            max-width: 100%;
             width: 320px;
-            height: 58px;
+            margin-left: auto;
+            margin-right: auto;
+
+            @include respond-to(desktop) {
+                margin-left: 0;
+            }
         }
     }
 
+    .spinner {
+        font-size: 150%;
+    }
+
     .content {
         max-width: 400px;
         margin-left: auto;
         margin-right: auto;
-
+        text-align: left;
         b, a {
             color: $color-blue;
         }
@@ -39,8 +47,14 @@
         input {
             margin-right: 10px;
         }
+        input[type="text"],
+        input[type="password"] {
+            margin-bottom: 10px;
+            width: 100%;
+        }
 
         input[type=file] {
+            width: 100%;
             background-color: white;
             border-width: 1px;
             border-style: solid;
@@ -76,6 +90,21 @@
                 float: left;
             }
         }
+
+        .popover-info {
+            display: none; // hide on mobile
+        }
+
+        @include respond-to(desktop) {
+            input[type="text"],
+            input[type="password"],
+            input[type="file"] {
+                width: auto;
+            }
+            .popover-info {
+                display: inline-block;
+            }
+        }
     }
 }
 

src/tpl/login-existing.html

@@ -1,6 +1,6 @@
 <div class="view-login view-login-existing">
-  <div class="logo-wrapper">
-    <div class="logo"></div>
+  <div class="logo">
+    <img src="img/whiteout_logo.svg" alt="whiteout.io">
   </div><!--/logo-->
 
   <div class="content">

src/tpl/login-initial.html

@@ -1,6 +1,6 @@
 <div class="view-login view-login-initial" ng-class="{'waiting-cursor': state.ui === 2}">
-  <div class="logo-wrapper">
-    <div class="logo"></div>
+  <div class="logo">
+    <img src="img/whiteout_logo.svg" alt="whiteout.io">
   </div><!--/logo-->
 
   <div class="content" ng-switch on="state.ui">

src/tpl/login-new-device.html

@@ -1,6 +1,6 @@
 <div class="view-login">
-  <div class="logo-wrapper">
-    <div class="logo"></div>
+  <div class="logo">
+    <img src="img/whiteout_logo.svg" alt="whiteout.io">
   </div><!--/logo-->
 
   <div class="content">

src/tpl/login.html

@@ -1,11 +1,9 @@
 <div class="view-login waiting-cursor">
 
-  <div class="logo-wrapper">
-    <div class="logo"></div>
+  <div class="logo">
+    <img src="img/whiteout_logo.svg" alt="whiteout.io">
   </div><!--/logo-->
 
-  <div class="content">
-    <p><b>Login.</b> Authenticating with the mail server...</p>
-  </div><!--/content-->
+  <span class="spinner"></span>
 
 </div>