update login page

Gemfile.lock

@@ -164,7 +164,7 @@ GEM
       warden (~> 1.0.3)
     devise_invitable (0.5.0)
       devise (~> 1.3.1)
-      rails (>= 3.0.0, <= 3.2)
+      rails (<= 3.2, >= 3.0.0)
     diff-lcs (1.1.2)
     erubis (2.6.6)
       abstract (>= 1.0.0)

app/views/layouts/application.html.haml

@@ -21,6 +21,9 @@
 
     = stylesheet_link_tag "blueprint/screen", :media => 'screen'
     = stylesheet_link_tag "blueprint/print", :media => 'print'
+
+    = stylesheet_link_tag "login", :media => 'screen'
+
     = include_stylesheets :default, :media => 'all'
     - if rtl?
       = include_stylesheets :rtl, :media => 'all'

app/views/sessions/new.haml

@@ -5,63 +5,90 @@
 = content_for :head do
   :css
     header{ display:none; }
-    footer{ position: absolute; bottom: 12px; }
+    footer{ position: absolute; bottom: 6px; }
 
   :javascript
+    jQuery.fn.center = function () {
+      this.css("position","absolute");
+      this.css("top", ( $(window).height() - this.height() ) / 2+$(window).scrollTop() + "px");
+      this.css("left", ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + "px");
+      return this;
+    }
+
     $(document).ready( function(){
-      $("#user_username").focus();
+
-      $("form").submit(function(){
+      var username = $("#user_username"),
-        $(this).fadeOut(200, function(){
+          password = $("#user_password"),
-          $('#logo').animate({
+          forgotPass = $("#forgot_password_link"),
-            'margin-top': '+=80'
+          controls = $("#controls");
-          }, 250, function(){
+
-            $("#spinner").fadeIn(300);
+      $("#login").center();
-          });
+      $(window).resize(function(){
-        });
+        $("#login").center();
-        $(".login_error").remove();
       });
+
+      username.focus();
+      $("form").submit(function(){
+        $('#asterisk').addClass('rideSpinners');
+        forgotPass.addClass('hidden');
+        controls.addClass('hidden');
+      });
+
+      $(document).keydown(function(){
+        if($('#user_username').val() != "" && $('#user_password').val() != ""){
+          controls.removeClass('hidden');
+        }else{
+          controls.addClass('hidden');
+        }
+      });
+
+      password
+        .focus(function(){
+          forgotPass.removeClass('hidden');
+        })
+        .blur(function(){
+          forgotPass.addClass('hidden');
+        });
     });
 
 .container{:style => 'text-align:center;'}
   #login
-    = image_tag('logo_caps.png', :id => 'logo', :width => 143, :height => 21)
+    %p
-    %br
+      = image_tag('asterisk.png', :id => 'asterisk', :class => 'logo', :height => 154, :width => 154)
-    %br
+    %p
+      = image_tag('logo_caps.png', :id => 'logo', :width => 98, :height => 14)
 
     - flash.each do |name, msg|
       = content_tag :p, msg, :class => "login_error"
 
     = form_for(resource, :as => resource_name, :url => session_path(resource_name)) do |f|
+
       %p
         = f.label :username , t('username')
-        = f.text_field :username
+        = f.text_field :username, :tabindex => 1
-        %span.pod_location
+      %br
-          ="@#{AppConfig[:pod_uri].host}"
-          %br
-          %br
 
       %p
         = f.label :password , t('password')
-        = f.password_field :password
+        = f.password_field :password, :tabindex => 2
-        %span
-          - if devise_mapping.recoverable? && controller_name != 'passwords'
-            = link_to t('devise.shared.links.forgot_your_password'), new_password_path(resource_name)
-          - else
-            \.
-          %br
-          - if !AppConfig[:registrations_closed] && devise_mapping.registerable? && controller_name != 'registrations'
-            = link_to t('devise.shared.links.sign_up'), new_registration_path(resource_name)
-          - else
-            \.
 
-      %p.submit
+        - if devise_mapping.recoverable? && controller_name != 'passwords'
-        = f.submit t('devise.sessions.new.sign_in')
+          = link_to t('devise.shared.links.forgot_your_password'), new_password_path(resource_name), :id => "forgot_password_link", :class => 'hidden', :tabindex => 5
+
+      %br
+      %p#controls.hidden
         %span#remember_me
           - if devise_mapping.rememberable?
-            = f.check_box :remember_me
+            = f.check_box :remember_me, :tabindex => 3
             = f.label :remember_me, t('devise.sessions.new.remember_me')
-          - else
+        = f.submit 'Log in', :tabindex => 4
-            \.
+
+
+      - if !AppConfig[:registrations_closed] && devise_mapping.registerable? && controller_name != 'registrations'
+        %br
+        %br
+        %br
+        %br
+        = link_to t('devise.shared.links.sign_up'), new_registration_path(resource_name)
       
-    = image_tag 'ajax-loader.gif', :id => "spinner", :class => "hidden"
 

public/stylesheets/sass/_mixins.scss

@@ -1,3 +1,10 @@
+$blue: #3f8fba;
+$red: red;
+$background: rgb(252, 252, 252);
+
+$speed: 0.1s;
+$easing: linear;
+
 @mixin mobile-box {
   margin: 10px;
   padding: 0 15px;
@@ -34,3 +41,10 @@
   -khtml-opacity: $val;
   opacity: $val;
 }
+
+@mixin transition($type, $speed:$speed, $easing:$easing){
+  -webkit-transition: $type $speed $easing;
+  -moz-transition: $type $speed $easing;
+  -o-transition: $type $speed $easing;
+  transition: $type $speed $easing;
+}

public/stylesheets/sass/application.sass

@@ -4,10 +4,6 @@
 
 @import 'mixins'
 
-$blue: #3F8FBA
-$red: #FF0000 
-$background: rgb(252,252,252)
-
 body
   :padding 2em
   :margin 0
@@ -2441,66 +2437,7 @@ ul.show_comments,
       :right 4px
     :top 5px
 
-#login
-  :width 600px
-  :padding
-    :top 10%
-    :bottom 20%
-  :text
-    :align center
-  :display inline-block
 
-  form
-    input,
-    label
-      :font
-        :size 21px
-      :display inline
-
-    label
-      :top 13px
-      :text-shadow 0 1px 1px #ccc
-
-    input[type='text'],
-    input[type='password']
-      :-webkit-box-shadow 0 1px 0px #fff, 0 -1px 0px #888
-      :-moz-box-shadow 0 1px 0px #fff, 0 -1px 0px #888
-      :box-shadow 0 1px 0px #fff, 0 -1px 0px #888
-      :width 180px
-      :max-width 180px
-
-    p
-      :display inline-block
-      :position relative
-      :width 200px
-
-      &:last-child
-        :margin
-          :left 3px
-
-      span
-        :display block
-        :color #fff
-        &.pod_location
-          :color #888
-
-      &.submit
-        :width auto
-        :bottom 15px
-
-        input
-          :width auto
-          :position relative
-          :height 40px
-          :top 0px
-          :color #666
-          :margin
-            :bottom 10px
-          &:hover
-            :color #444
-
-#logo
-  :position relative
 
 #email_invitation
   input

public/stylesheets/sass/login.sass

@@ -0,0 +1,89 @@
+//   Copyright (c) 2010, Diaspora Inc.  This file is
+//   licensed under the Affero General Public License version 3 or later.  See
+//   the COPYRIGHT file.
+
+@import 'mixins'
+
+$blue: #3F8FBA
+$red: #FF0000 
+$background: rgb(252,252,252)
+
+body
+  :background-color $background
+
+.hidden
+  :display none
+
+#login
+  :width 600px
+  :padding
+    :top 10%
+    :bottom 20%
+  :text
+    :align center
+  :display inline-block
+
+  form
+    input,
+    label
+      :font
+        :size 14px
+      :display inline
+
+    label
+      :top 10px
+      :left 12px
+      :text-shadow none
+
+    input[type='text'],
+    input[type='password']
+      :-webkit-box-shadow 0 1px 0px #fff, 0 -1px 0px #888
+      :-moz-box-shadow 0 1px 0px #fff, 0 -1px 0px #888
+      :box-shadow 0 1px 0px #fff, 0 -1px 0px #888
+      :width 180px
+      :max-width 180px
+
+    p
+      :display inline-block
+      :position relative
+      :width 200px
+
+      span
+        :display inline-block
+
+      &.submit
+        :width auto
+        :bottom 15px
+
+        input
+          :width auto
+          :position relative
+          :height 40px
+          :top 0px
+          :color #666
+          :margin
+            :bottom 10px
+          &:hover
+            :color #444
+
+    #forgot_password_link
+      :text-align left
+      :position absolute
+      :left 205px
+      :top 12px
+      :width 150px
+      :color #999
+
+    .controls.hidden
+      :display none
+
+    #remember_me
+      :position absolute
+      :top 0
+      :left 4px
+
+    #user_submit
+      :position absolute
+      :top -6px
+      :right 5px
+

public/stylesheets/sass/login.scss

@@ -0,0 +1,118 @@
+//   Copyright (c) 2010, Diaspora Inc.  This file is
+//   licensed under the Affero General Public License version 3 or later.  See
+//   the COPYRIGHT file.
+
+@import "mixins";
+
+#login {
+  width: 400px;
+  text: {
+    align: center;
+  };
+
+  display: inline-block;
+
+  form {
+    input,
+    label {
+      font: {
+        size: 14px;
+      };
+      display: inline;
+    }
+
+    label {
+      top: 10px;
+      left: 12px;
+      text-shadow: none;
+    }
+
+    input[type='text'],
+    input[type='password'] {
+      -webkit-box-shadow: 0 1px 0px white, 0 -1px 0px #888888;
+      -moz-box-shadow: 0 1px 0px white, 0 -1px 0px #888888;
+      box-shadow: 0 1px 0px white, 0 -1px 0px #888888;
+      width: 180px;
+      max-width: 180px;
+    }
+
+    p {
+      display: inline-block;
+      position: relative;
+      width: 200px;
+
+      span {
+        display: inline-block;
+      }
+
+      &.submit {
+        width: auto;
+        bottom: 15px;
+        input {
+          width: auto;
+          position: relative;
+          height: 40px;
+          top: 0px;
+          color: #666666;
+          margin: {
+            bottom: 10px;
+          };
+          &:hover {
+            color: #444444;
+          }
+        }
+      }
+    }
+
+    #forgot_password_link {
+      @include transition(opacity, 0.2s);
+      &.hidden {
+        display: block;
+        @include opacity(0);
+      }
+      text-align: left;
+      position: absolute;
+      left: 205px;
+      top: 12px;
+      width: 150px;
+      color: #aaa;
+    }
+
+    #controls {
+      @include transition(opacity);
+      &.hidden {
+        @include opacity(0);
+      }
+    }
+
+    #remember_me {
+      position: absolute;
+      top: 0;
+      left: 4px;
+    }
+
+    #user_submit {
+      position: absolute;
+      top: -6px;
+      right: 5px;
+    }
+  }
+}
+
+@-webkit-keyframes rotate {
+  from {
+    -webkit-transform: rotate(0deg);
+  }
+  to { 
+    -webkit-transform: rotate(360deg);
+  }
+}
+
+.rideSpinners
+{
+  -webkit-animation-name: rotate; 
+  -webkit-animation-duration: 5s; 
+  -webkit-animation-iteration-count: infinite;
+}
+
+