From 41373171c8ec436dc81719b6768230dc330b3aa1 Mon Sep 17 00:00:00 2001
From: Daniela Soares Feitosa <danielafeitosa@colivre.coop.br>
Date: Sun, 11 Nov 2012 11:21:56 -0200
Subject: [PATCH] Fixed balloons alignment on signup

---
 app/views/account/_signup_form.rhtml | 25 +++++++++++++++++++++----
 public/stylesheets/application.css   | 30 +++++++++++++++++++++++++++---
 2 files changed, 48 insertions(+), 7 deletions(-)

diff --git a/app/views/account/_signup_form.rhtml b/app/views/account/_signup_form.rhtml
index fd1cdcc..47dc4fa 100644
--- a/app/views/account/_signup_form.rhtml
+++ b/app/views/account/_signup_form.rhtml
@@ -35,12 +35,13 @@
 
   <div id='signup-password-confirmation'>
     <%= required f.password_field(:password_confirmation) %>
+    <%= content_tag(:small,_('We need to be sure that you filled in your password correctly. Confirm you password.'), :id => 'password-confirmation-balloon') %>
     <div id='password-check'><p>&nbsp;</p></div>
   </div>
 
   <div id='signup-email'>
     <%= required f.text_field(:email) %>
-    <%= content_tag(:small,_('This e-mail address will be used to contact you.')) %>
+    <%= content_tag(:small,_('This e-mail address will be used to contact you.'), :id => 'email-balloon') %>
     <div id='email-check'><p>&nbsp;</p></div>
   </div>
   <%= observe_field "user_email",
@@ -63,9 +64,9 @@
                       }"
   %>
 
-  <div class='formfield'>
-    <%= label(:profile_data, :name, _('Full name'), {:class => 'formlabel'}) %>
-    <%= required text_field(:profile_data, :name) %>
+  <div id='signup-name'>
+    <%= labelled_form_field(_('Full name'), text_field(:profile_data, :name)) %>
+    <%= content_tag(:small,_('Tell us your name, it will be used to identify yourself.'), :id => 'name-balloon') %>
   </div>
 
 </div>
@@ -131,6 +132,9 @@ jQuery(function($) {
   $('#user_pw').focus(function() {
     $('#password-balloon').fadeIn('slow');
   });
+  $('#user_password_confirmation').focus(function() {
+    $('#password-confirmation-balloon').fadeIn('slow');
+  });
   $('#user_password_confirmation, #user_pw').blur(function() {
     if ($('#user_password_confirmation').val() != '') {
       if ($('#user_password_confirmation').val() == $('#user_pw').val()) {
@@ -144,11 +148,24 @@ jQuery(function($) {
       }
     }
     $('#password-balloon').fadeOut('slow');
+    $('#password-confirmation-balloon').fadeOut('slow');
   });
   $('#user_login').focus(function() {
     $('#signup-balloon').fadeIn('slow');
   });
   $('#user_login').blur(function() { $('#signup-balloon').fadeOut('slow'); });
   $('#signup-form').validate({ rules: { 'user[email]': { email: true } }, messages: { 'user[email]' : '' } });
+  $('#user_email').focus(function() {
+    $('#email-balloon').fadeIn('slow');
+  });
+  $('#user_email').blur(function() {
+    $('#email-balloon').fadeOut('slow');
+  });
+  $('#profile_data_name').focus(function() {
+    $('#name-balloon').fadeIn('slow');
+  });
+  $('#profile_data_name').blur(function() {
+    $('#name-balloon').fadeOut('slow');
+  });
 });
 </script>
diff --git a/public/stylesheets/application.css b/public/stylesheets/application.css
index c0f7f0a..8638502 100644
--- a/public/stylesheets/application.css
+++ b/public/stylesheets/application.css
@@ -5828,12 +5828,17 @@ li.profile-activity-item.upload_image .activity-gallery-images-count-1 img {
 
 #signup-form #signup-password,
 #signup-form #signup-password-confirmation,
+#signup-form #signup-email,
+#signup-form #signup-name,
 #signup-form #signup-login {
   position: relative;
 }
 
 #signup-form small#signup-balloon,
-#signup-form small#password-balloon {
+#signup-form small#password-balloon,
+#signup-form small#password-confirmation-balloon,
+#signup-form small#email-balloon,
+#signup-form small#name-balloon {
   display: none;
   width: 142px;
   height: 69px;
@@ -5846,8 +5851,27 @@ li.profile-activity-item.upload_image .activity-gallery-images-count-1 img {
   background: transparent url(/images/orange-balloon.png) bottom center no-repeat;
   position: absolute;
   z-index: 2;
-  right: -40px;
-  top: -100px;
+  right: 30px;
+}
+
+#signup-form small#signup-balloon {
+  top: -110px;
+}
+
+#signup-form small#password-balloon {
+  top: -75px;
+}
+
+#signup-form small#password-confirmation-balloon {
+  top: -75px;
+}
+
+#signup-form small#email-balloon {
+  top: -75px;
+}
+
+#signup-form small#name-balloon {
+  top: -75px;
 }
 
 #signup-form .required-field label,
--
libgit2 0.21.2