Commit 41373171c8ec436dc81719b6768230dc330b3aa1
1 parent
2758921d
Exists in
master
and in
29 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, | ... | ... |