(html) Improve login page

UI/Templates/MainUI/SOGoRootPage.wox

@@ -15,17 +15,23 @@
       MUST be the first html element after body
       SHOULD  be a main tag (with role="main")
   -->
-  <main class="view layout-fill layout-padding" ui-view="login" layout="row" layout-align="center start">
-    <md-content class="md-padding" md-scroll-y="true">
-      <div class="sg-login" ng-controller="LoginController as app">
-
+  <main class="view layout-fill layout-padding md-default-theme md-background md-hue-1 md-bg"
+        ui-view="login"
+        layout="row" layout-align="center start"
+        ng-controller="LoginController as app">
+    <md-content class="ng-cloak md-whiteframe-z1"
+                layout="row" layout-align="center center"
+                layout-sm="column" layout-align-sm="space-between center"
+                md-scroll-y="true"
+                ng-show="app.showLogin">
+      <div id="logo" class="md-padding">
+        <img const:alt="*" id="splash" rsrc:src="img/sogo-full.svg"/>
+      </div>
+      <div class="sg-login md-padding md-default-theme md-bg md-accent layout-fill">
         <script type="text/javascript">
           var cookieUsername = '<var:string var:value="cookieUsername" const:escapeHTML="NO"/>';
         </script>
         <div id="login">
-          <div id="logo">
-            <img const:alt="*" id="splash" rsrc:src="img/sogo-full.svg"/>
-          </div>
 
           <form name="loginForm" layout="column"
                 ng-cloak="ng-cloak"
@@ -44,10 +50,8 @@
 
             <!-- CONNECT BUTTON -->
             <div layout="row" layout-align="end center">
-              <md-button class="md-raised" type="submit" ng-disabled='app.loginForm.$invalid'>
-                <span>
-                  <var:string label:value="Connect"/>
-                </span>
+              <md-button class="md-primary md-hue-1" type="submit" ng-disabled='app.loginForm.$invalid'>
+                <var:string label:value="Connect"/>
               </md-button>
             </div>
 
@@ -84,10 +88,10 @@
             </div>
           </form>
           <div layout="row" layout-align="end end" ng-cloak="ng-cloak">
-            <md-button class="sg-icon-button fg-sogoPaper-500"
+            <md-button class="md-icon-button"
                        label:aria-label="About"
                        ng-click="app.showAbout()">
-              <md-icon class="material-icons fg-sogoPaper-500">info</md-icon>
+              <md-icon class="md-fg">info</md-icon>
             </md-button>
           </div>
         </div>
@@ -96,7 +100,7 @@
   </main>
 
   <script type="text/ng-template" id="aboutBox.html">
-    <md-dialog flex="50">
+    <md-dialog flex="50" sm-flex="100">
       <md-dialog-content>
         <p><a href="http://sogo.nu/" target="_new">sogo.nu</a></p>
         <p>Version <var:string value="version"/> (<var:string value="buildDate" />)</p>

UI/WebServerResources/js/Main/Main.app.js

@@ -9,14 +9,17 @@
   /**
    * @ngInject
    */
-  LoginController.$inject = ['$scope', 'Dialog', '$mdDialog', 'Authentication'];
-  function LoginController($scope, Dialog, $mdDialog, Authentication) {
+  LoginController.$inject = ['$scope', '$timeout', 'Dialog', '$mdDialog', 'Authentication'];
+  function LoginController($scope, $timeout, Dialog, $mdDialog, Authentication) {
     var vm = this;
 
     vm.creds = { username: cookieUsername, password: null };
     vm.login = login;
     vm.showAbout = showAbout;
 
+    vm.showLogin = false;
+    $timeout(function() { vm.showLogin = true; }, 100);
+
     function login() {
       Authentication.login(vm.creds)
         .then(function(url) {

UI/WebServerResources/scss/views/LoginUI.scss

@@ -1,31 +1,45 @@
 /// LoginUI.scss -*- Mode: scss; indent-tabs-mode: nil; basic-offset: 2 -*-
 
-[ui-view="login"] > md-content {
+[ui-view="login"] {
+  md-content {
+    @include to(sm) {
+      [id=logo] {
+        text-align: center;
+        img {
+          max-width: 75%;
+        }
+      }
+    }
+    @include from(md) {
+      &.ng-hide {
+        [id=logo] {
+          opacity: 0;
+          transform: translateX(50%);
+        }
+        .sg-login {
+          opacity: 0;
+          transform: translateX(100%);
+        }
+      }
+      [id=logo], .sg-login {
+        opacity: 1;
+        transform: translateX(0%);
+      }
+      [id=logo] {
+        transition: transform $swift-ease-out-duration $swift-ease-out-timing-function 600ms,
+        opacity 400ms linear;
+      }
+      .sg-login {
+        transition: all $swift-ease-out-duration $swift-ease-out-timing-function 600ms;
+      }
+    }
+  }
+}
+
+[ui-view="login"] > md-content > div {
   width: grid-step(5);
 }
 
 [id=logo] img {
   max-width: 100%;
 }
-
-.sg-login {
-  .md-button.md-raised {
-    width: 100%;
-    margin-top: 25px;
-    margin-bottom: 25px;
-    height: 48px;
-  }
-  md-icon {
-    color: #526261;
-  }
-  md-input-container.md-input-invalid > md-icon {
-    color: red;
-  }
-  md-input-container.md-icon-float {
-    margin-bottom: 10px;
-  }
-  md-select {
-    margin-left: 14px;
-    margin-top: 10px;
-  }
-}