nocebo/diaspora
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

update login page

Browse source
This commit is contained in:
danielgrippi 2011-05-13 22:05:35 -07:00
parent 70fd2e916a
commit 0e72a91d1b
8 changed files with 288 additions and 100 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
Gemfile.lock
View file

@ -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)

3
app/views/layouts/application.html.haml
View file

@ -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'

91
app/views/sessions/new.haml
View file

@ -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();
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(){
$(this).fadeOut(200, function(){
$('#logo').animate({
'margin-top': '+=80'
}, 250, function(){
$("#spinner").fadeIn(300);
$('#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');
}
});
$(".login_error").remove();
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
= 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
- 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"

BIN
public/images/asterisk.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 2.3 KiB

14
public/stylesheets/sass/_mixins.scss
View file

@ -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;
}

63
public/stylesheets/sass/application.sass
View file

@ -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

89
public/stylesheets/sass/login.sass Normal file
View file

@ -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

118
public/stylesheets/sass/login.scss Normal file
View file

@ -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;
}