diff --git a/Gemfile.lock b/Gemfile.lock index 84362325e..4c14681c6 100644 --- a/Gemfile.lock +++ b/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) diff --git a/app/views/layouts/application.html.haml b/app/views/layouts/application.html.haml index 57beb0da9..f2f777690 100644 --- a/app/views/layouts/application.html.haml +++ b/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' diff --git a/app/views/sessions/new.haml b/app/views/sessions/new.haml index a567c9ec0..9dea73bce 100644 --- a/app/views/sessions/new.haml +++ b/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(){ - $(this).fadeOut(200, function(){ - $('#logo').animate({ - 'margin-top': '+=80' - }, 250, function(){ - $("#spinner").fadeIn(300); - }); - }); - $(".login_error").remove(); + + var username = $("#user_username"), + password = $("#user_password"), + forgotPass = $("#forgot_password_link"), + controls = $("#controls"); + + $("#login").center(); + $(window).resize(function(){ + $("#login").center(); }); + + 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) - %br - %br + %p + = image_tag('asterisk.png', :id => 'asterisk', :class => 'logo', :height => 154, :width => 154) + %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 - %span.pod_location - ="@#{AppConfig[:pod_uri].host}" - %br - %br + = f.text_field :username, :tabindex => 1 + %br %p = f.label :password , t('password') - = f.password_field :password - %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 - \. + = f.password_field :password, :tabindex => 2 - %p.submit - = f.submit t('devise.sessions.new.sign_in') + - if devise_mapping.recoverable? && controller_name != 'passwords' + = 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 - = image_tag 'ajax-loader.gif', :id => "spinner", :class => "hidden" + + - 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) + diff --git a/public/images/asterisk.png b/public/images/asterisk.png new file mode 100644 index 000000000..0aac946d0 Binary files /dev/null and b/public/images/asterisk.png differ diff --git a/public/stylesheets/sass/_mixins.scss b/public/stylesheets/sass/_mixins.scss index 74ffd8db6..df3bdbf09 100644 --- a/public/stylesheets/sass/_mixins.scss +++ b/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; +} diff --git a/public/stylesheets/sass/application.sass b/public/stylesheets/sass/application.sass index 957abc475..32d580f74 100644 --- a/public/stylesheets/sass/application.sass +++ b/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 diff --git a/public/stylesheets/sass/login.sass b/public/stylesheets/sass/login.sass new file mode 100644 index 000000000..1a0532bcc --- /dev/null +++ b/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 + diff --git a/public/stylesheets/sass/login.scss b/public/stylesheets/sass/login.scss new file mode 100644 index 000000000..7deb19a6b --- /dev/null +++ b/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; +} + +