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 | 35 | |
36 | 36 | <div id='signup-password-confirmation'> |
37 | 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 | 39 | <div id='password-check'><p> </p></div> |
39 | 40 | </div> |
40 | 41 | |
41 | 42 | <div id='signup-email'> |
42 | 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 | 45 | <div id='email-check'><p> </p></div> |
45 | 46 | </div> |
46 | 47 | <%= observe_field "user_email", |
... | ... | @@ -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 | 70 | </div> |
70 | 71 | |
71 | 72 | </div> |
... | ... | @@ -131,6 +132,9 @@ jQuery(function($) { |
131 | 132 | $('#user_pw').focus(function() { |
132 | 133 | $('#password-balloon').fadeIn('slow'); |
133 | 134 | }); |
135 | + $('#user_password_confirmation').focus(function() { | |
136 | + $('#password-confirmation-balloon').fadeIn('slow'); | |
137 | + }); | |
134 | 138 | $('#user_password_confirmation, #user_pw').blur(function() { |
135 | 139 | if ($('#user_password_confirmation').val() != '') { |
136 | 140 | if ($('#user_password_confirmation').val() == $('#user_pw').val()) { |
... | ... | @@ -144,11 +148,24 @@ jQuery(function($) { |
144 | 148 | } |
145 | 149 | } |
146 | 150 | $('#password-balloon').fadeOut('slow'); |
151 | + $('#password-confirmation-balloon').fadeOut('slow'); | |
147 | 152 | }); |
148 | 153 | $('#user_login').focus(function() { |
149 | 154 | $('#signup-balloon').fadeIn('slow'); |
150 | 155 | }); |
151 | 156 | $('#user_login').blur(function() { $('#signup-balloon').fadeOut('slow'); }); |
152 | 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 | 171 | </script> | ... | ... |
public/stylesheets/application.css
... | ... | @@ -5828,12 +5828,17 @@ li.profile-activity-item.upload_image .activity-gallery-images-count-1 img { |
5828 | 5828 | |
5829 | 5829 | #signup-form #signup-password, |
5830 | 5830 | #signup-form #signup-password-confirmation, |
5831 | +#signup-form #signup-email, | |
5832 | +#signup-form #signup-name, | |
5831 | 5833 | #signup-form #signup-login { |
5832 | 5834 | position: relative; |
5833 | 5835 | } |
5834 | 5836 | |
5835 | 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 | 5842 | display: none; |
5838 | 5843 | width: 142px; |
5839 | 5844 | height: 69px; |
... | ... | @@ -5846,8 +5851,27 @@ li.profile-activity-item.upload_image .activity-gallery-images-count-1 img { |
5846 | 5851 | background: transparent url(/images/orange-balloon.png) bottom center no-repeat; |
5847 | 5852 | position: absolute; |
5848 | 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 | 5877 | #signup-form .required-field label, | ... | ... |