Commit 41373171c8ec436dc81719b6768230dc330b3aa1

Authored by Daniela Feitosa
1 parent 2758921d

Fixed balloons alignment on signup

All fixed fields have balloons
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>&nbsp;</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>&nbsp;</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,
... ...