Commit 41373171c8ec436dc81719b6768230dc330b3aa1
1 parent
2758921d
Exists in
master
and in
28 other branches
Fixed balloons alignment on signup
All fixed fields have balloons
Showing
2 changed files
with
48 additions
and
7 deletions
Show diff stats
app/views/account/_signup_form.rhtml
@@ -35,12 +35,13 @@ | @@ -35,12 +35,13 @@ | ||
35 | 35 | ||
36 | <div id='signup-password-confirmation'> | 36 | <div id='signup-password-confirmation'> |
37 | <%= required f.password_field(:password_confirmation) %> | 37 | <%= required f.password_field(:password_confirmation) %> |
38 | + <%= content_tag(:small,_('We need to be sure that you filled in your password correctly. Confirm you password.'), :id => 'password-confirmation-balloon') %> | ||
38 | <div id='password-check'><p> </p></div> | 39 | <div id='password-check'><p> </p></div> |
39 | </div> | 40 | </div> |
40 | 41 | ||
41 | <div id='signup-email'> | 42 | <div id='signup-email'> |
42 | <%= required f.text_field(:email) %> | 43 | <%= required f.text_field(:email) %> |
43 | - <%= content_tag(:small,_('This e-mail address will be used to contact you.')) %> | 44 | + <%= content_tag(:small,_('This e-mail address will be used to contact you.'), :id => 'email-balloon') %> |
44 | <div id='email-check'><p> </p></div> | 45 | <div id='email-check'><p> </p></div> |
45 | </div> | 46 | </div> |
46 | <%= observe_field "user_email", | 47 | <%= observe_field "user_email", |
@@ -63,9 +64,9 @@ | @@ -63,9 +64,9 @@ | ||
63 | }" | 64 | }" |
64 | %> | 65 | %> |
65 | 66 | ||
66 | - <div class='formfield'> | ||
67 | - <%= label(:profile_data, :name, _('Full name'), {:class => 'formlabel'}) %> | ||
68 | - <%= required text_field(:profile_data, :name) %> | 67 | + <div id='signup-name'> |
68 | + <%= labelled_form_field(_('Full name'), text_field(:profile_data, :name)) %> | ||
69 | + <%= content_tag(:small,_('Tell us your name, it will be used to identify yourself.'), :id => 'name-balloon') %> | ||
69 | </div> | 70 | </div> |
70 | 71 | ||
71 | </div> | 72 | </div> |
@@ -131,6 +132,9 @@ jQuery(function($) { | @@ -131,6 +132,9 @@ jQuery(function($) { | ||
131 | $('#user_pw').focus(function() { | 132 | $('#user_pw').focus(function() { |
132 | $('#password-balloon').fadeIn('slow'); | 133 | $('#password-balloon').fadeIn('slow'); |
133 | }); | 134 | }); |
135 | + $('#user_password_confirmation').focus(function() { | ||
136 | + $('#password-confirmation-balloon').fadeIn('slow'); | ||
137 | + }); | ||
134 | $('#user_password_confirmation, #user_pw').blur(function() { | 138 | $('#user_password_confirmation, #user_pw').blur(function() { |
135 | if ($('#user_password_confirmation').val() != '') { | 139 | if ($('#user_password_confirmation').val() != '') { |
136 | if ($('#user_password_confirmation').val() == $('#user_pw').val()) { | 140 | if ($('#user_password_confirmation').val() == $('#user_pw').val()) { |
@@ -144,11 +148,24 @@ jQuery(function($) { | @@ -144,11 +148,24 @@ jQuery(function($) { | ||
144 | } | 148 | } |
145 | } | 149 | } |
146 | $('#password-balloon').fadeOut('slow'); | 150 | $('#password-balloon').fadeOut('slow'); |
151 | + $('#password-confirmation-balloon').fadeOut('slow'); | ||
147 | }); | 152 | }); |
148 | $('#user_login').focus(function() { | 153 | $('#user_login').focus(function() { |
149 | $('#signup-balloon').fadeIn('slow'); | 154 | $('#signup-balloon').fadeIn('slow'); |
150 | }); | 155 | }); |
151 | $('#user_login').blur(function() { $('#signup-balloon').fadeOut('slow'); }); | 156 | $('#user_login').blur(function() { $('#signup-balloon').fadeOut('slow'); }); |
152 | $('#signup-form').validate({ rules: { 'user[email]': { email: true } }, messages: { 'user[email]' : '' } }); | 157 | $('#signup-form').validate({ rules: { 'user[email]': { email: true } }, messages: { 'user[email]' : '' } }); |
158 | + $('#user_email').focus(function() { | ||
159 | + $('#email-balloon').fadeIn('slow'); | ||
160 | + }); | ||
161 | + $('#user_email').blur(function() { | ||
162 | + $('#email-balloon').fadeOut('slow'); | ||
163 | + }); | ||
164 | + $('#profile_data_name').focus(function() { | ||
165 | + $('#name-balloon').fadeIn('slow'); | ||
166 | + }); | ||
167 | + $('#profile_data_name').blur(function() { | ||
168 | + $('#name-balloon').fadeOut('slow'); | ||
169 | + }); | ||
153 | }); | 170 | }); |
154 | </script> | 171 | </script> |
public/stylesheets/application.css
@@ -5828,12 +5828,17 @@ li.profile-activity-item.upload_image .activity-gallery-images-count-1 img { | @@ -5828,12 +5828,17 @@ li.profile-activity-item.upload_image .activity-gallery-images-count-1 img { | ||
5828 | 5828 | ||
5829 | #signup-form #signup-password, | 5829 | #signup-form #signup-password, |
5830 | #signup-form #signup-password-confirmation, | 5830 | #signup-form #signup-password-confirmation, |
5831 | +#signup-form #signup-email, | ||
5832 | +#signup-form #signup-name, | ||
5831 | #signup-form #signup-login { | 5833 | #signup-form #signup-login { |
5832 | position: relative; | 5834 | position: relative; |
5833 | } | 5835 | } |
5834 | 5836 | ||
5835 | #signup-form small#signup-balloon, | 5837 | #signup-form small#signup-balloon, |
5836 | -#signup-form small#password-balloon { | 5838 | +#signup-form small#password-balloon, |
5839 | +#signup-form small#password-confirmation-balloon, | ||
5840 | +#signup-form small#email-balloon, | ||
5841 | +#signup-form small#name-balloon { | ||
5837 | display: none; | 5842 | display: none; |
5838 | width: 142px; | 5843 | width: 142px; |
5839 | height: 69px; | 5844 | height: 69px; |
@@ -5846,8 +5851,27 @@ li.profile-activity-item.upload_image .activity-gallery-images-count-1 img { | @@ -5846,8 +5851,27 @@ li.profile-activity-item.upload_image .activity-gallery-images-count-1 img { | ||
5846 | background: transparent url(/images/orange-balloon.png) bottom center no-repeat; | 5851 | background: transparent url(/images/orange-balloon.png) bottom center no-repeat; |
5847 | position: absolute; | 5852 | position: absolute; |
5848 | z-index: 2; | 5853 | z-index: 2; |
5849 | - right: -40px; | ||
5850 | - top: -100px; | 5854 | + right: 30px; |
5855 | +} | ||
5856 | + | ||
5857 | +#signup-form small#signup-balloon { | ||
5858 | + top: -110px; | ||
5859 | +} | ||
5860 | + | ||
5861 | +#signup-form small#password-balloon { | ||
5862 | + top: -75px; | ||
5863 | +} | ||
5864 | + | ||
5865 | +#signup-form small#password-confirmation-balloon { | ||
5866 | + top: -75px; | ||
5867 | +} | ||
5868 | + | ||
5869 | +#signup-form small#email-balloon { | ||
5870 | + top: -75px; | ||
5871 | +} | ||
5872 | + | ||
5873 | +#signup-form small#name-balloon { | ||
5874 | + top: -75px; | ||
5851 | } | 5875 | } |
5852 | 5876 | ||
5853 | #signup-form .required-field label, | 5877 | #signup-form .required-field label, |