[stoa] Fixing signup css

Rodrigo Souto
1 parent bfce4eb1
Showing 4 changed files with 83 additions and 78 deletions Show diff stats
app/controllers/public/account_controller.rb
app/helpers/account_helper.rb
app/views/account/_signup_form.rhtml
public/stylesheets/application.css
@@ -211,10 +211,10 @@ class AccountController &lt; ApplicationController
     valid = Person.is_available?(@identifier, environment)
     if valid
       @status = _('This login name is available')
-      @status_class = 'available'
+      @status_class = 'validated'
     else
       @status = _('This login name is unavailable')
-      @status_class = 'unavailable'
+      @status_class = 'invalid'
     end
     render :partial => 'identifier_status'
   end
@@ -222,10 +222,10 @@ class AccountController &lt; ApplicationController
   def check_email
     if User.find_by_email_and_environment_id(params[:address], environment.id).nil?
       @status = _('This e-mail address is available')
-      @status_class = 'available'
+      @status_class = 'validated'
     else
       @status = _('This e-mail address is taken')
-      @status_class = 'unavailable'
+      @status_class = 'invalid'
     end
     render :partial => 'email_status'
   end
 module AccountHelper
   def validation_classes
-    'available unavailable valid invalid checking'
+    'available unavailable valid validated invalid checking'
   end
   def checking_message(key)
@@ -49,9 +49,15 @@
         :loading  => "jQuery('#user_email').removeClass('#{validation_classes}').addClass('checking');
                       jQuery('#email-check').html('<p><span class=\"checking\">#{checking_message(:email)}</span></p>');",
         :complete => "jQuery('#user_email').removeClass('checking')",
-        :before   => "if (!( jQuery('#user_email').valid() )) {
-                        jQuery('#user_email').removeClass('#{validation_classes}').addClass('unavailable');
-                        jQuery('#email-check').html('<p><span class=\"unavailable\">#{_('This e-mail address is not valid')}</span></p>');
+        :before   => "var field = jQuery('#user_email');
+                      if (field.val()=='') {
+                        field.removeClass('#{validation_classes}');
+                        jQuery('#email-check').html('<p>&nbsp;</p>');
+                        return false;
+                      }
+                      if (!( field.valid() )) {
+                        field.removeClass('#{validation_classes}').addClass('invalid');
+                        jQuery('#email-check').html('<p><span class=\"invalid\">#{_('This e-mail address is not valid')}</span></p>');
                         return false;
                       }"
   %>
@@ -139,13 +145,13 @@ jQuery(function($) {
       $('#user_password_confirmation_clear').show();
       $('#user_password_confirmation').hide();
     } else if ($('#user_password_confirmation').val() == $('#user_pw').val()) {
-      $('#user_password_confirmation').addClass('passwords_match').removeClass('passwords_differ');
+      $('#user_password_confirmation').addClass('validated').removeClass('invalid');
       $('#user_pw').removeClass('invalid_input').addClass('valid_input');
       $('#password-check').html("<p>&nbsp;</p>");
     } else if ($('#user_password_confirmation').val() != $('#user_pw').val()) {
-      $('#user_password_confirmation').removeClass('passwords_match').addClass('passwords_differ');
+      $('#user_password_confirmation').removeClass('validated').addClass('invalid');
       $('#user_pw').addClass('invalid_input').removeClass('valid_input');
-      $('#password-check').html("<p><span class='unavailable'><%= _('Passwords dont match') %></span></p>");
+      $('#password-check').html("<p><span class='invalid'><%= _('Passwords dont match') %></span></p>");
     }
     $('#password-balloon').fadeOut('slow');
   });
@@ -6500,14 +6500,14 @@ h1#agenda-title {
   margin-left: 12px;
 }
-.action-account-signup #wrap-1 label,
-.action-account-signup #wrap-1 small,
-.action-account-signup #wrap-1 #user_password,
-.action-account-signup #wrap-1 #user_password_confirmation {
+#signup-form label,
+#signup-form small,
+#signup-form #user_password,
+#signup-form #user_password_confirmation {
    display: none;
 }
-.action-account-signup #wrap-1 #signup-form-header {
+#signup-form #signup-form-header {
   background: #E3E3E3;
   padding: 22px 0;
   -moz-border-radius: 8px;
@@ -6518,24 +6518,24 @@ h1#agenda-title {
   width: 563px;
 }
-.action-account-signup #wrap-1 .formfield input.invalid_input {
+#signup-form input.invalid_input {
   border: 2px solid #FFA000;
   background: #FFF;
   padding: 5px 30px 8px 5px;
 }
-.action-account-signup #wrap-1 .formfield input.valid_input {
+#signup-form input.valid_input {
   border: 2px solid #88BD00;
   background: #FFF;
   padding: 5px 30px 8px 5px;
 }
-.action-account-signup #wrap-1 .formfield select,
-.action-account-signup #wrap-1 .formfield textarea,
-.action-account-signup #wrap-1 #profile_data_name,
-.action-account-signup #wrap-1 .formfield input {
+#signup-form select,
+#signup-form textarea,
+#signup-form #profile_data_name,
+#signup-form input {
   background: transparent url(/images/field-bg.png) left top no-repeat;
-  padding: 7px 3px 10px 7px;
+  padding: 7px 30px 10px 7px;
   height: 24px;
   width: 335px;
   color: #6d786e;
@@ -6543,71 +6543,60 @@ h1#agenda-title {
   font-family: droidserif, serif;
   margin: 9px 14px 0;
   border: 0;
-  padding-right: 30px;
 }
-.action-account-signup #wrap-1 #user_login.checking,
-.action-account-signup #wrap-1 #user_login.available,
-.action-account-signup #wrap-1 #user_login.unavailable,
-.action-account-signup #wrap-1 #user_email.checking,
-.action-account-signup #wrap-1 #user_email.available,
-.action-account-signup #wrap-1 #user_email.unavailable,
-.action-account-signup #wrap-1 .formfield input.passwords_differ,
-.action-account-signup #wrap-1 .formfield input.passwords_match {
+#signup-form #user_password,
+#signup-form #user_password_confirmation,
+#signup-form .filled-in,
+#signup-form .passwords_match {
   border-width: 2px;
   border-style: solid;
   background-color: #fff;
   background-position: right center;
   background-repeat: no-repeat;
   padding: 5px 30px 8px 5px;
+  color: #4A4A4A;
 }
-.action-account-signup #wrap-1 .formfield select.filled-in,
-.action-account-signup #wrap-1 .formfield textarea.filled-in,
-.action-account-signup #wrap-1 #profile_data_name.filled-in,
-.action-account-signup #wrap-1 .formfield input.filled-in {
-   color: #4A4A4A;
-}
-
-.action-account-signup #wrap-1 .formfield select {
+#signup-form select {
   height: auto;
   padding-right: 3px;
   width: 365px;
 }
-.action-account-signup #wrap-1 .formfield .select-birth-date select {
+#signup-form .select-birth-date select {
   width: 93px;
   margin-right: 2px;
   margin-left: 0;
 }
-.webkit.action-account-signup #wrap-1 .formfield select {
+.webkit #signup-form select {
   background: #fff;
 }
-.action-account-signup #wrap-1 .formfield textarea {
+#signup-form textarea {
   background: #fff;
   height: 100px;
   padding-right: 3px;
   width: 365px;
 }
-.action-account-signup #wrap-1 .formfield input[type=file] {
+#signup-form input[type=file] {
   font-size: 12px;
 }
-.action-account-signup #wrap-1 input[type=radio] {
+#signup-form input[type=radio] {
   height: auto;
   margin: 0;
   margin-left: 3px;
 }
-.action-account-signup #wrap-1 .fieldgroup {
+#signup-form .fieldgroup {
   margin: 5px 10px;
 }
-.action-account-signup #wrap-1 label[for=profile_data_sex_female],
-.action-account-signup #wrap-1 label[for=profile_data_sex_male] {
+#signup-form label[for=profile_data_sex_female],
+#signup-form label[for=profile_data_sex_male] {
   color: #6d786e;
   font-size: 20px;
   font-family: droidserif;
@@ -6616,41 +6605,51 @@ h1#agenda-title {
   margin-left: 8px;
 }
-.action-account-signup #wrap-1 label[for=profile_data_country],
-.action-account-signup #wrap-1 label[for=profile_data_preferred_domain_id],
-.action-account-signup #wrap-1 label[for=profile_data_birth_date_2i],
-.action-account-signup #wrap-1 label[for=profile_data_birth_date_3i],
-.action-account-signup #wrap-1 label[for=profile_data_schooling],
-.action-account-signup #wrap-1 label[for=profile_data_formation],
-.action-account-signup #wrap-1 label[for=profile_data_area_of_study],
-.action-account-signup #wrap-1 label[for=profile_data_image_builder_uploaded_data] {
+#signup-form label[for=profile_data_country],
+#signup-form label[for=profile_data_preferred_domain_id],
+#signup-form label[for=profile_data_birth_date_2i],
+#signup-form label[for=profile_data_birth_date_3i],
+#signup-form label[for=profile_data_schooling],
+#signup-form label[for=profile_data_formation],
+#signup-form label[for=profile_data_area_of_study],
+#signup-form label[for=profile_data_image_builder_uploaded_data] {
   display: block;
 }
-.action-account-signup #wrap-1 #profile_data_name {
+#signup-form #profile_data_name {
   padding-left: 10px;
 }
-.action-account-signup #wrap-1 #user_login.unavailable,
-.action-account-signup #wrap-1 #user_email.unavailable,
-.action-account-signup #wrap-1 .formfield input.passwords_differ {
+#signup-form .invalid {
   border-color: #FFA000;
   background-image: url(/images/passwords_nomatch.png);
 }
-.action-account-signup #wrap-1 #user_email.checking,
-.action-account-signup #wrap-1 #user_login.checking {
+#signup-form span.invalid {
+  background: transparent;
+  color: #FFA000;
+}
+
+#signup-form .checking {
   border-color: #4A4A4A;
   background-image: url(/images/login_checking.png);
 }
-.action-account-signup #wrap-1 #user_login.available,
-.action-account-signup #wrap-1 #user_email.available,
-.action-account-signup #wrap-1 .formfield input.passwords_match {
+#signup-form span.checking {
+  background: transparent;
+  color: #4A4A4A;
+}
+
+#signup-form .validated {
   border-color: #88BD00;
   background-image: url(/images/passwords_match.png);
 }
+#signup-form span.validated {
+  background: transparent;
+  color: #88BD00;
+}
+
 #signup-domain {
   float: left;
   display: inline-block;
@@ -6669,7 +6668,7 @@ h1#agenda-title {
   margin-left: 14px;
 }
-.action-account-signup #wrap-1 #signup-form-header #user_login {
+#signup-form #signup-form-header #user_login {
   margin: 0;
   width: 200px;
   padding-right: 30px;
@@ -6683,14 +6682,14 @@ h1#agenda-title {
   float: left;
 }
-.action-account-signup #wrap-1 #signup-password,
-.action-account-signup #wrap-1 #signup-password-confirmation,
-.action-account-signup #wrap-1 #signup-login {
+#signup-form #signup-password,
+#signup-form #signup-password-confirmation,
+#signup-form #signup-login {
   position: relative;
 }
-.action-account-signup #wrap-1 small#signup-balloon,
-.action-account-signup #wrap-1 small#password-balloon {
+#signup-form small#signup-balloon,
+#signup-form small#password-balloon {
   display: none;
   width: 142px;
   height: 69px;
@@ -6707,8 +6706,8 @@ h1#agenda-title {
   top: -100px;
 }
-.action-account-signup #wrap-1 .required-field label,
-.action-account-signup #wrap-1 .formlabel {
+#signup-form .required-field label,
+#signup-form .formlabel {
   color: #b4b9b5;
   font-size: 20px;
   text-transform: lowercase;
@@ -6717,7 +6716,7 @@ h1#agenda-title {
   font-family: droidserif;
 }
-.action-account-signup #wrap-1 .required-field label::after {
+#signup-form .required-field label::after {
   content: '';
 }
@@ -6741,16 +6740,16 @@ h1#agenda-title {
   background: #FFF;
 }
-.action-account-signup #terms-of-use-box label {
+#signup-form #terms-of-use-box label {
   display: inline;
   font-size: 16px;
 }
-.action-account-signup #terms-of-use-box label a {
+#signup-form #terms-of-use-box label a {
   color: #FF7F2A;
 }
-.action-account-signup #content form input.button.submit {
+#content #signup-form .submit {
   border: 0;
   padding: 8px 36px 12px;
   background: transparent url(/images/orange-bg.png) left center repeat-x;
@@ -6784,7 +6783,7 @@ h1#agenda-title {
   text-align: center;
 }
-.action-account-signup .formfieldline {
+#signup-form .formfieldline {
   padding: 0;
 }
	@@ -211,10 +211,10 @@ class AccountController < ApplicationController		@@ -211,10 +211,10 @@ class AccountController < ApplicationController
211	valid = Person.is_available?(@identifier, environment)	211	valid = Person.is_available?(@identifier, environment)
212	if valid	212	if valid
213	@status = _('This login name is available')	213	@status = _('This login name is available')
214	- @status_class = 'available'	214	+ @status_class = 'validated'
215	else	215	else
216	@status = _('This login name is unavailable')	216	@status = _('This login name is unavailable')
217	- @status_class = 'unavailable'	217	+ @status_class = 'invalid'
218	end	218	end
219	render :partial => 'identifier_status'	219	render :partial => 'identifier_status'
220	end	220	end
	@@ -222,10 +222,10 @@ class AccountController < ApplicationController		@@ -222,10 +222,10 @@ class AccountController < ApplicationController
222	def check_email	222	def check_email
223	if User.find_by_email_and_environment_id(params[:address], environment.id).nil?	223	if User.find_by_email_and_environment_id(params[:address], environment.id).nil?
224	@status = _('This e-mail address is available')	224	@status = _('This e-mail address is available')
225	- @status_class = 'available'	225	+ @status_class = 'validated'
226	else	226	else
227	@status = _('This e-mail address is taken')	227	@status = _('This e-mail address is taken')
228	- @status_class = 'unavailable'	228	+ @status_class = 'invalid'
229	end	229	end
230	render :partial => 'email_status'	230	render :partial => 'email_status'
231	end	231	end
1	module AccountHelper	1	module AccountHelper
2		2
3	def validation_classes	3	def validation_classes
4	- 'available unavailable valid invalid checking'	4	+ 'available unavailable valid validated invalid checking'
5	end	5	end
6		6
7	def checking_message(key)	7	def checking_message(key)