From 61a791e8372d81c715f0b55f58374e12b061fa3b Mon Sep 17 00:00:00 2001
From: Felix Niklas <mrflix@gmail.com>
Date: Thu, 18 Dec 2014 12:25:49 +0100
Subject: [PATCH] fix layout issues at login page

new stucture:
  .fullscreen > .fullscreen-center > .fullscreen-content
---
 .../javascripts/app/views/login.jst.eco       | 99 ++++++++++---------
 .../app/views/password/reset.jst.eco          | 34 ++++---
 .../javascripts/app/views/signup.jst.eco      |  8 +-
 app/assets/stylesheets/zammad.css.scss        | 75 ++++++++++----
 4 files changed, 129 insertions(+), 87 deletions(-)

diff --git a/app/assets/javascripts/app/views/login.jst.eco b/app/assets/javascripts/app/views/login.jst.eco
index 78fb9a623..d75c53dca 100644
--- a/app/assets/javascripts/app/views/login.jst.eco
+++ b/app/assets/javascripts/app/views/login.jst.eco
@@ -1,59 +1,60 @@
-<div class="login">
-  <div class="flex vertical centered">
-    <p><%- @T( 'Login with %s', @C( 'fqdn' ) ) %></p>
+<div class="login fullscreen">
+  <div class="fullscreen-center">
+    <div class="fullscreen-body">
+      <p><%- @T( 'Login with %s', @C( 'fqdn' ) ) %></p>
 
-    <div class="hero-unit">
-      <img class="company-logo" src="<%= @logoUrl %>" alt="<%= @C( 'product_name' ) %>">
-      <form id="login">
-        <div class="form-group">
-          <label for="username"><%- @Ti( 'Username / email' ) %></label>
-          <input id="username" name="username" type="text" class="form-control" value="<%= @item.username %>" autocapitalize="off" />
-        </div>
+      <div class="hero-unit">
+        <img class="company-logo" src="<%= @logoUrl %>" alt="<%= @C( 'product_name' ) %>">
+        <form id="login">
+          <div class="form-group">
+            <label for="username"><%- @Ti( 'Username / email' ) %></label>
+            <input id="username" name="username" type="text" class="form-control" value="<%= @item.username %>" autocapitalize="off" />
+          </div>
 
-        <div class="form-group">
-          <label for="password"><%- @Ti( 'Password' ) %></label>
-          <input id="password" name="password" type="password" class="form-control"/>
-        </div>
+          <div class="form-group">
+            <label for="password"><%- @Ti( 'Password' ) %></label>
+            <input id="password" name="password" type="password" class="form-control"/>
+          </div>
 
-        <div class="form-group">
-<!--
-          <label for="remember_me"><%- @Ti( 'Remember me' ) %></label>
-          <input id="remember_me" name="remember_me" value="1" type="checkbox"/>
--->
-          <label><input name="remember_me" value="1" type="checkbox"/> <%- @T( 'Remember me' ) %></label>
-        </div>
+          <div class="form-group">
+    <!--
+            <label for="remember_me"><%- @Ti( 'Remember me' ) %></label>
+            <input id="remember_me" name="remember_me" value="1" type="checkbox"/>
+    -->
+            <label><input name="remember_me" value="1" type="checkbox"/> <%- @T( 'Remember me' ) %></label>
+          </div>
 
-        <div class="form-controls">
-          <button class="btn btn--primary" type="submit"><%- @T( 'Sign in' ) %></button>
+          <div class="form-controls">
+            <button class="btn btn--primary" type="submit"><%- @T( 'Sign in' ) %></button>
 
-          <% if @C('user_lost_password'): %>
-            <a href="#reset_password" class="subtle-link standalone pull-right"><%- @T( 'Forgot password?' ) %></a>
+            <% if @C('user_lost_password'): %>
+              <a href="#reset_password" class="subtle-link standalone pull-right"><%- @T( 'Forgot password?' ) %></a>
+            <% end %>
+          </div>
+
+          <% if !_.isEmpty( @auth_providers ): %>
+          <div class="separator">
+            <span class="separator-text"><%- @T( 'or sign in using' ) %></span>
+          </div>
+
+          <div class="auth_providers horizontal stretch">
+            <% for auth_provider in @auth_providers: %>
+              <a class="auth_provider <%= auth_provider.class %>" href="<%= auth_provider.url %>">
+                <span class="<%= auth_provider.class %> provider_icon"></span>
+                <span class="provider_name flex"><%- @T( auth_provider.name ) %></span>
+              </a>
+            <% end %>
+          </div>
           <% end %>
-        </div>
+        </form>
+      </div>
 
-        <% if !_.isEmpty( @auth_providers ): %>
-        <div class="separator">
-          <span class="separator-text"><%- @T( 'or sign in using' ) %></span>
-        </div>
-
-        <div class="auth_providers horizontal stretch">
-          <% for auth_provider in @auth_providers: %>
-            <a class="auth_provider <%= auth_provider.class %>" href="<%= auth_provider.url %>">
-              <span class="<%= auth_provider.class %> provider_icon"></span>
-              <span class="provider_name flex"><%- @T( auth_provider.name ) %></span>
-            </a>
-          <% end %>
-        </div>
+      <p>
+        <%- @T( "You're already registered with your email adress if you've been in touch with our support team.") %><br>
+        <% if @C('user_lost_password'): %>
+          <%- @T( "You can request your password") %> <a href="#reset_password"><%- @T( "here") %></a>.
         <% end %>
-      </form>
-    </div>
-
-    <p>
-      <%- @T( "You're already registered with your email adress if you've been in touch with our support team.") %><br>
-      <% if @C('user_lost_password'): %>
-        <%- @T( "You can request your password") %> <a href="#reset_password"><%- @T( "here") %></a>.
-      <% end %>
-    </p>
+      </p>
 
     <% if @C('user_create_account'): %>
       <hr>
@@ -61,8 +62,8 @@
         <a href="#signup"><%- @T( 'Register as a new customer' ) %></a>
       </p>
     <% end %>
+    </div>
   </div>
-
   <div class="poweredBy">
     <img class="logo" src="<%= @C('image_path') + '/' + 'logo.svg' %>">
     <%- @T("Powered by") %>
diff --git a/app/assets/javascripts/app/views/password/reset.jst.eco b/app/assets/javascripts/app/views/password/reset.jst.eco
index b934523ce..de43a6e9c 100644
--- a/app/assets/javascripts/app/views/password/reset.jst.eco
+++ b/app/assets/javascripts/app/views/password/reset.jst.eco
@@ -1,18 +1,20 @@
-<div class="fullHeight vertical center justified reset_password fit">
-  <div class="hero-unit">
-    <% if @sent: %>
-      <h2><%- @T('We\'ve sent password reset instructions to your email address.') %><small></small></h2>
-      <p><%- @T('If you don\'t receive instructions within a minute or two, check your email\'s spam and junk filters, or try resending your request.') %></p>
-      <a href="#" class="subtle retry">&raquo; <%- @T('again') %> &laquo;</a>
-    <% else: %>
-      <h2><%- @T( 'Forgot your password?' ) %><small></small></h2>
-      <form class="form-password">
-        <div class="form-password-item"></div>
-        <div class="form-controls">
-          <a class="subtle-link standalone pull-left cancel" href="#/"><%- @T( 'Cancel & Go Back' ) %></a>
-          <button class="btn btn--primary submit pull-right"><%- @T( 'Submit' ) %></button>
-        </div>
-      </form>
-    <% end %>
+<div class="reset_password fullscreen">
+  <div class="fullscreen-center">
+    <div class="hero-unit fullscreen-body">
+      <% if @sent: %>
+        <h2><%- @T('We\'ve sent password reset instructions to your email address.') %><small></small></h2>
+        <p><%- @T('If you don\'t receive instructions within a minute or two, check your email\'s spam and junk filters, or try resending your request.') %></p>
+        <a href="#" class="subtle retry">&raquo; <%- @T('again') %> &laquo;</a>
+      <% else: %>
+        <h2><%- @T( 'Forgot your password?' ) %><small></small></h2>
+        <form class="form-password">
+          <div class="form-password-item"></div>
+          <div class="form-controls">
+            <a class="subtle-link standalone pull-left cancel" href="#/"><%- @T( 'Cancel & Go Back' ) %></a>
+            <button class="btn btn--primary submit pull-right"><%- @T( 'Submit' ) %></button>
+          </div>
+        </form>
+      <% end %>
+    </div>
   </div>
 </div>
diff --git a/app/assets/javascripts/app/views/signup.jst.eco b/app/assets/javascripts/app/views/signup.jst.eco
index 5bcc03c19..35b473ce7 100644
--- a/app/assets/javascripts/app/views/signup.jst.eco
+++ b/app/assets/javascripts/app/views/signup.jst.eco
@@ -1,11 +1,13 @@
-<div class="fullHeight vertical center justified signup fit">
-  <div class="hero-unit">
-    <h1><%- @T( 'Join' ) %> <%= @C( 'product_name' ) %></h1>
+<div class="signup fullscreen">
+  <div class="fullscreen-center">
+    <div class="hero-unit fullscreen-body">
+      <h1><%- @T( 'Join' ) %> <%= @C( 'product_name' ) %></h1>
       <form>
         <div class="form-controls">
           <a class="subtle-link standalone pull-left" href="#/"><%- @T( 'Cancel & Go Back' ) %></a>
           <button class="btn btn--primary submit pull-right"><%- @T( 'Create my account' ) %></button>
         </div>
       </form>
+    </div>
   </div>
 </div>
diff --git a/app/assets/stylesheets/zammad.css.scss b/app/assets/stylesheets/zammad.css.scss
index e49d555f8..353c162fa 100644
--- a/app/assets/stylesheets/zammad.css.scss
+++ b/app/assets/stylesheets/zammad.css.scss
@@ -822,13 +822,12 @@ textarea,
   margin-bottom: 5px;
 }
 
-.login, 
 .getstarted, 
 .reset_password,
 .signup,
-.darkBackground {
+.darkBackground,
+.login {
   padding: 10px;
-  height: auto;
   background: hsl(234,10%,19%);
 }
 
@@ -841,13 +840,37 @@ textarea,
 }
 
 .login {
-  @extend .fit;
-  @extend .vertical;
-  @extend .center;
+  padding: 24px 24px 97px;
+  color: hsl(212,8%,40%);  
+  
+  a {
+    color: hsl(229,2%,51%);
+  }
+
+  &.login--fancy {
+    color: hsla(0,0%,100%,.7);
+    background:
+      radial-gradient(circle at 49.06% 50.5%, #a36f71, transparent 74%),
+      radial-gradient(circle at 6.95% 9.56%, #745479, transparent 100%),
+      radial-gradient(circle at 2.58% 98.57%, #392e3e, transparent 51%),
+      radial-gradient(circle at 82.11% 97.15%, #5c404e, transparent 100%),
+      radial-gradient(circle at 50% 50%, #8b6b76, #8b6b76 100%);
+      
+    a {
+      color: white;
+    }
+
+    .hero-unit {
+      box-shadow: 
+        0 8px 17px 0 rgba(0, 0, 0, 0.1),
+        0 6px 20px 0 rgba(0, 0, 0, 0.09);
+    }
+  }
 }
 
 .login .hero-unit {
   width: 430px;
+  margin: 0 0 28px;
 }
 
   .login .company-logo {
@@ -858,32 +881,31 @@ textarea,
   }
 
   .login p {
-    margin: 10px 0;
+    margin: 0 auto 22px;
     max-width: 400px;
-    color: hsl(212,8%,40%);
     text-align: center;
   }
 
   .login hr {
-    margin: 10px 0;
+    margin: 0 auto 22px;
     border-top-color: rgba(255,255,255,.15);
     width: 100%;
     max-width: 400px;
   }
 
   .login p a {
-    color: hsl(229,2%,51%);
     text-decoration: underline;
   }
 
 .poweredBy {
-  @extend .horizontal;
-  @extend .center;
+  @extend .centered;
   color: hsl(233,7%,26%);
-  padding: 20px 0 10px;
-  margin-top: auto;
-  margin-left: -14px;
+  margin: auto 0 34px -16px;
   cursor: default;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
   
   .logo {
     height: 40px;
@@ -897,6 +919,24 @@ textarea,
   }
 }
 
+.fullscreen {
+  @extend .fit;
+  display: table;
+  width: 100%;
+  min-height: 100vh;
+}
+
+.fullscreen-center {
+  display: table-cell;
+  vertical-align: middle;
+  text-align: center;
+}
+
+.fullscreen-body {
+  text-align: left;
+  display: inline-block;
+}
+
 .subtle-link {
   color: rgba(0,0,0,.32);
   text-decoration: underline;
@@ -1720,6 +1760,7 @@ form {
 }
 
 .form-controls {
+  @extend .clearfix;
   margin-top: 10px;
 }
 
@@ -4801,10 +4842,6 @@ label + .wizard-buttonList {
   flex: 1;
 }
 
-.fullHeight {
-  min-height: 100%;
-}
-
 .relative {
   position: relative;
 }