From 0e72a91d1ba37b997d812e2f98423d48c605aa90 Mon Sep 17 00:00:00 2001 From: danielgrippi Date: Fri, 13 May 2011 22:05:35 -0700 Subject: [PATCH] update login page --- Gemfile.lock | 2 +- app/views/layouts/application.html.haml | 3 + app/views/sessions/new.haml | 99 ++++++++++++------- public/images/asterisk.png | Bin 0 -> 2353 bytes public/stylesheets/sass/_mixins.scss | 14 +++ public/stylesheets/sass/application.sass | 63 ------------ public/stylesheets/sass/login.sass | 89 +++++++++++++++++ public/stylesheets/sass/login.scss | 118 +++++++++++++++++++++++ 8 files changed, 288 insertions(+), 100 deletions(-) create mode 100644 public/images/asterisk.png create mode 100644 public/stylesheets/sass/login.sass create mode 100644 public/stylesheets/sass/login.scss 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 0000000000000000000000000000000000000000..0aac946d0c5b150e9bd7b5c2bf4f199967cff5b5 GIT binary patch literal 2353 zcmcJR`9Bkk1IKr`@5u2W=cBm_5sfw}_gIe2@g;^B%~2U9$ILNDo;)Gf97T?DB|<}+ z9$F=mo@Ni3eUV$VM+~v2?{DAlAMpL*^Zxwsetmxb7KaLbH1RXs9 zTVk88cTU1*6KfU@KPB%bO-?l*RBl!dObTgc%3KurFQiW_MQNOACTUl~B!KD(I~vN1 zshm*kz&N2;bYe5=0v;@1k&`awYHO2qviAN(Id``Qxw=i`w#QN7T4MTU#{~axT2p*O znS-OhOe1;@g~GQIISR5HLYBfxVJ*%74opMSZ&Wv&abqx2pvt{UJZC9`Ga~>Idm>19E`swfjv?k6rhULC-1ABEOEe3u^>DHel+^kTuq81n`8Jj=$!dXW zr_BcFbpa!H0yC~iR&1}O07L+dvN35wBnqhjB#hpkUc5-j8|6+0ccvQB6uq`pikrWw zwD@(@MTgznn(n?xA&o9t0Nz{f9il~Pzl}TalG62+LFS+ufkoupbIGiD8FSoh{^%S# zHCuPL26_$>TE=CHY~doQ*606-eVk=3PN}k3-%E%on2$q}m%@{+7$|*Z!6Sgbfa-Hb ztaFyRA|=ZrxRcz|p4+A1(7jORj7|VwKFJADqQp7KZh4?G=y=t0-RZuMX7)ACHtoOY zV3y{2dEnkPw?X&ip7f3>-e!I?iw}hQfB6F)*0tC4n)+Ik-q)Pk>-?a#X+N~~JL*NU zm!8>7OZ$U}`~^FGpaM~cL*{Gr=l7GN+d6u+l7 zYOt610a-m{4sHdf-Z_30aAqn24(V8Q%>xBei^CG+9zRN2VB?GDs?_fpeD1U?DpFNY5 z3+oq}b~`Yg_}p4WC6ip~ifNOj?^3W(8C*11j-&TO*aUqj%+q5&#l+XU-1cTkuAntPQaH-5yUmHL_K#5b9ng$g+ZO zk_uXbTE4uSpR59gyT<&Qx-@0dD#IiZ;w4Ib`$3`F< zT$vXS%4WW8dcDBlNk?Csax!P(>;)S=2vXB8BK-z#DM154K z9Q!lUV0Mr=&h3)p;X!aNJ}xUcq0sZmf#fD|WI}}bizp{g;K#yB{!P72wQPX&ytP{* zHPWd4Amq@n9~QbYORs$CyQyI@XYH7{FL)6BIR(rFy`A)j8AXj7tf$`$ z$B^{E>anVGUuNdx=%zermlASXg6ka76$J0xR$bNK7CU5R*l*gr`8X^XTt@z`_4iIi z{cO?BrM+G7 z6*@cl1luZ~0erTyyHP8_hQl2#ebkYz^0GK!6he&zN0*4Ajc8ig6X?i+ad=J}(j zshXEeTB3;{FN)k=Mpd64V|{cHZX1LQ*7+#L#N45e$!z8D#Uiajus%}fk)Lhb@5uU^ zlpM3zVJwd)jeS$K@2@$eIJR34e;LY6flbNVsmBLL7eS;p0Rbuo_hr`$p2fxJf3@Lw zeyEKQjj1n>+tsEgX}@wWsf!33VZ&I7-?cIxvHouTU6g<8Pm#yRZjP{Z=?Iyk_Qla=8d@@)9p$)9AOSeN$TTnvo6TlT zg4?-fpU`6=>x<77YtjO9hP%aaYdWgF0RPpfS{pB*Ln7sWuSTXWg9yBr$;o*+RwwZD P3IUw#khX0XG3oyRN10)s literal 0 HcmV?d00001 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; +} + +