Commit af8e08a45dd3b1d6d595c57799d1f420f95b795d
1 parent
bfce4eb1
Exists in
staging
and in
42 other branches
[stoa] Fixing signup css
Showing
4 changed files
with
83 additions
and
78 deletions
Show diff stats
app/controllers/public/account_controller.rb
| ... | ... | @@ -211,10 +211,10 @@ class AccountController < ApplicationController |
| 211 | 211 | valid = Person.is_available?(@identifier, environment) |
| 212 | 212 | if valid |
| 213 | 213 | @status = _('This login name is available') |
| 214 | - @status_class = 'available' | |
| 214 | + @status_class = 'validated' | |
| 215 | 215 | else |
| 216 | 216 | @status = _('This login name is unavailable') |
| 217 | - @status_class = 'unavailable' | |
| 217 | + @status_class = 'invalid' | |
| 218 | 218 | end |
| 219 | 219 | render :partial => 'identifier_status' |
| 220 | 220 | end |
| ... | ... | @@ -222,10 +222,10 @@ class AccountController < ApplicationController |
| 222 | 222 | def check_email |
| 223 | 223 | if User.find_by_email_and_environment_id(params[:address], environment.id).nil? |
| 224 | 224 | @status = _('This e-mail address is available') |
| 225 | - @status_class = 'available' | |
| 225 | + @status_class = 'validated' | |
| 226 | 226 | else |
| 227 | 227 | @status = _('This e-mail address is taken') |
| 228 | - @status_class = 'unavailable' | |
| 228 | + @status_class = 'invalid' | |
| 229 | 229 | end |
| 230 | 230 | render :partial => 'email_status' |
| 231 | 231 | end | ... | ... |
app/helpers/account_helper.rb
app/views/account/_signup_form.rhtml
| ... | ... | @@ -49,9 +49,15 @@ |
| 49 | 49 | :loading => "jQuery('#user_email').removeClass('#{validation_classes}').addClass('checking'); |
| 50 | 50 | jQuery('#email-check').html('<p><span class=\"checking\">#{checking_message(:email)}</span></p>');", |
| 51 | 51 | :complete => "jQuery('#user_email').removeClass('checking')", |
| 52 | - :before => "if (!( jQuery('#user_email').valid() )) { | |
| 53 | - jQuery('#user_email').removeClass('#{validation_classes}').addClass('unavailable'); | |
| 54 | - jQuery('#email-check').html('<p><span class=\"unavailable\">#{_('This e-mail address is not valid')}</span></p>'); | |
| 52 | + :before => "var field = jQuery('#user_email'); | |
| 53 | + if (field.val()=='') { | |
| 54 | + field.removeClass('#{validation_classes}'); | |
| 55 | + jQuery('#email-check').html('<p> </p>'); | |
| 56 | + return false; | |
| 57 | + } | |
| 58 | + if (!( field.valid() )) { | |
| 59 | + field.removeClass('#{validation_classes}').addClass('invalid'); | |
| 60 | + jQuery('#email-check').html('<p><span class=\"invalid\">#{_('This e-mail address is not valid')}</span></p>'); | |
| 55 | 61 | return false; |
| 56 | 62 | }" |
| 57 | 63 | %> |
| ... | ... | @@ -139,13 +145,13 @@ jQuery(function($) { |
| 139 | 145 | $('#user_password_confirmation_clear').show(); |
| 140 | 146 | $('#user_password_confirmation').hide(); |
| 141 | 147 | } else if ($('#user_password_confirmation').val() == $('#user_pw').val()) { |
| 142 | - $('#user_password_confirmation').addClass('passwords_match').removeClass('passwords_differ'); | |
| 148 | + $('#user_password_confirmation').addClass('validated').removeClass('invalid'); | |
| 143 | 149 | $('#user_pw').removeClass('invalid_input').addClass('valid_input'); |
| 144 | 150 | $('#password-check').html("<p> </p>"); |
| 145 | 151 | } else if ($('#user_password_confirmation').val() != $('#user_pw').val()) { |
| 146 | - $('#user_password_confirmation').removeClass('passwords_match').addClass('passwords_differ'); | |
| 152 | + $('#user_password_confirmation').removeClass('validated').addClass('invalid'); | |
| 147 | 153 | $('#user_pw').addClass('invalid_input').removeClass('valid_input'); |
| 148 | - $('#password-check').html("<p><span class='unavailable'><%= _('Passwords dont match') %></span></p>"); | |
| 154 | + $('#password-check').html("<p><span class='invalid'><%= _('Passwords dont match') %></span></p>"); | |
| 149 | 155 | } |
| 150 | 156 | $('#password-balloon').fadeOut('slow'); |
| 151 | 157 | }); | ... | ... |
public/stylesheets/application.css
| ... | ... | @@ -6500,14 +6500,14 @@ h1#agenda-title { |
| 6500 | 6500 | margin-left: 12px; |
| 6501 | 6501 | } |
| 6502 | 6502 | |
| 6503 | -.action-account-signup #wrap-1 label, | |
| 6504 | -.action-account-signup #wrap-1 small, | |
| 6505 | -.action-account-signup #wrap-1 #user_password, | |
| 6506 | -.action-account-signup #wrap-1 #user_password_confirmation { | |
| 6503 | +#signup-form label, | |
| 6504 | +#signup-form small, | |
| 6505 | +#signup-form #user_password, | |
| 6506 | +#signup-form #user_password_confirmation { | |
| 6507 | 6507 | display: none; |
| 6508 | 6508 | } |
| 6509 | 6509 | |
| 6510 | -.action-account-signup #wrap-1 #signup-form-header { | |
| 6510 | +#signup-form #signup-form-header { | |
| 6511 | 6511 | background: #E3E3E3; |
| 6512 | 6512 | padding: 22px 0; |
| 6513 | 6513 | -moz-border-radius: 8px; |
| ... | ... | @@ -6518,24 +6518,24 @@ h1#agenda-title { |
| 6518 | 6518 | width: 563px; |
| 6519 | 6519 | } |
| 6520 | 6520 | |
| 6521 | -.action-account-signup #wrap-1 .formfield input.invalid_input { | |
| 6521 | +#signup-form input.invalid_input { | |
| 6522 | 6522 | border: 2px solid #FFA000; |
| 6523 | 6523 | background: #FFF; |
| 6524 | 6524 | padding: 5px 30px 8px 5px; |
| 6525 | 6525 | } |
| 6526 | 6526 | |
| 6527 | -.action-account-signup #wrap-1 .formfield input.valid_input { | |
| 6527 | +#signup-form input.valid_input { | |
| 6528 | 6528 | border: 2px solid #88BD00; |
| 6529 | 6529 | background: #FFF; |
| 6530 | 6530 | padding: 5px 30px 8px 5px; |
| 6531 | 6531 | } |
| 6532 | 6532 | |
| 6533 | -.action-account-signup #wrap-1 .formfield select, | |
| 6534 | -.action-account-signup #wrap-1 .formfield textarea, | |
| 6535 | -.action-account-signup #wrap-1 #profile_data_name, | |
| 6536 | -.action-account-signup #wrap-1 .formfield input { | |
| 6533 | +#signup-form select, | |
| 6534 | +#signup-form textarea, | |
| 6535 | +#signup-form #profile_data_name, | |
| 6536 | +#signup-form input { | |
| 6537 | 6537 | background: transparent url(/images/field-bg.png) left top no-repeat; |
| 6538 | - padding: 7px 3px 10px 7px; | |
| 6538 | + padding: 7px 30px 10px 7px; | |
| 6539 | 6539 | height: 24px; |
| 6540 | 6540 | width: 335px; |
| 6541 | 6541 | color: #6d786e; |
| ... | ... | @@ -6543,71 +6543,60 @@ h1#agenda-title { |
| 6543 | 6543 | font-family: droidserif, serif; |
| 6544 | 6544 | margin: 9px 14px 0; |
| 6545 | 6545 | border: 0; |
| 6546 | - padding-right: 30px; | |
| 6547 | 6546 | } |
| 6548 | 6547 | |
| 6549 | -.action-account-signup #wrap-1 #user_login.checking, | |
| 6550 | -.action-account-signup #wrap-1 #user_login.available, | |
| 6551 | -.action-account-signup #wrap-1 #user_login.unavailable, | |
| 6552 | -.action-account-signup #wrap-1 #user_email.checking, | |
| 6553 | -.action-account-signup #wrap-1 #user_email.available, | |
| 6554 | -.action-account-signup #wrap-1 #user_email.unavailable, | |
| 6555 | -.action-account-signup #wrap-1 .formfield input.passwords_differ, | |
| 6556 | -.action-account-signup #wrap-1 .formfield input.passwords_match { | |
| 6548 | +#signup-form #user_password, | |
| 6549 | +#signup-form #user_password_confirmation, | |
| 6550 | +#signup-form .filled-in, | |
| 6551 | +#signup-form .passwords_match { | |
| 6557 | 6552 | border-width: 2px; |
| 6558 | 6553 | border-style: solid; |
| 6559 | 6554 | background-color: #fff; |
| 6560 | 6555 | background-position: right center; |
| 6561 | 6556 | background-repeat: no-repeat; |
| 6562 | 6557 | padding: 5px 30px 8px 5px; |
| 6558 | + color: #4A4A4A; | |
| 6563 | 6559 | } |
| 6564 | 6560 | |
| 6565 | -.action-account-signup #wrap-1 .formfield select.filled-in, | |
| 6566 | -.action-account-signup #wrap-1 .formfield textarea.filled-in, | |
| 6567 | -.action-account-signup #wrap-1 #profile_data_name.filled-in, | |
| 6568 | -.action-account-signup #wrap-1 .formfield input.filled-in { | |
| 6569 | - color: #4A4A4A; | |
| 6570 | -} | |
| 6571 | - | |
| 6572 | -.action-account-signup #wrap-1 .formfield select { | |
| 6561 | +#signup-form select { | |
| 6573 | 6562 | height: auto; |
| 6574 | 6563 | padding-right: 3px; |
| 6575 | 6564 | width: 365px; |
| 6576 | 6565 | } |
| 6577 | 6566 | |
| 6578 | -.action-account-signup #wrap-1 .formfield .select-birth-date select { | |
| 6567 | +#signup-form .select-birth-date select { | |
| 6579 | 6568 | width: 93px; |
| 6580 | 6569 | margin-right: 2px; |
| 6581 | 6570 | margin-left: 0; |
| 6582 | 6571 | } |
| 6583 | 6572 | |
| 6584 | -.webkit.action-account-signup #wrap-1 .formfield select { | |
| 6573 | +.webkit #signup-form select { | |
| 6585 | 6574 | background: #fff; |
| 6586 | 6575 | } |
| 6587 | 6576 | |
| 6588 | -.action-account-signup #wrap-1 .formfield textarea { | |
| 6577 | +#signup-form textarea { | |
| 6589 | 6578 | background: #fff; |
| 6590 | 6579 | height: 100px; |
| 6591 | 6580 | padding-right: 3px; |
| 6592 | 6581 | width: 365px; |
| 6593 | 6582 | } |
| 6594 | 6583 | |
| 6595 | -.action-account-signup #wrap-1 .formfield input[type=file] { | |
| 6584 | +#signup-form input[type=file] { | |
| 6596 | 6585 | font-size: 12px; |
| 6597 | 6586 | } |
| 6598 | 6587 | |
| 6599 | -.action-account-signup #wrap-1 input[type=radio] { | |
| 6588 | +#signup-form input[type=radio] { | |
| 6600 | 6589 | height: auto; |
| 6601 | 6590 | margin: 0; |
| 6602 | 6591 | margin-left: 3px; |
| 6603 | 6592 | } |
| 6604 | 6593 | |
| 6605 | -.action-account-signup #wrap-1 .fieldgroup { | |
| 6594 | +#signup-form .fieldgroup { | |
| 6606 | 6595 | margin: 5px 10px; |
| 6607 | 6596 | } |
| 6608 | 6597 | |
| 6609 | -.action-account-signup #wrap-1 label[for=profile_data_sex_female], | |
| 6610 | -.action-account-signup #wrap-1 label[for=profile_data_sex_male] { | |
| 6598 | +#signup-form label[for=profile_data_sex_female], | |
| 6599 | +#signup-form label[for=profile_data_sex_male] { | |
| 6611 | 6600 | color: #6d786e; |
| 6612 | 6601 | font-size: 20px; |
| 6613 | 6602 | font-family: droidserif; |
| ... | ... | @@ -6616,41 +6605,51 @@ h1#agenda-title { |
| 6616 | 6605 | margin-left: 8px; |
| 6617 | 6606 | } |
| 6618 | 6607 | |
| 6619 | -.action-account-signup #wrap-1 label[for=profile_data_country], | |
| 6620 | -.action-account-signup #wrap-1 label[for=profile_data_preferred_domain_id], | |
| 6621 | -.action-account-signup #wrap-1 label[for=profile_data_birth_date_2i], | |
| 6622 | -.action-account-signup #wrap-1 label[for=profile_data_birth_date_3i], | |
| 6623 | -.action-account-signup #wrap-1 label[for=profile_data_schooling], | |
| 6624 | -.action-account-signup #wrap-1 label[for=profile_data_formation], | |
| 6625 | -.action-account-signup #wrap-1 label[for=profile_data_area_of_study], | |
| 6626 | -.action-account-signup #wrap-1 label[for=profile_data_image_builder_uploaded_data] { | |
| 6608 | +#signup-form label[for=profile_data_country], | |
| 6609 | +#signup-form label[for=profile_data_preferred_domain_id], | |
| 6610 | +#signup-form label[for=profile_data_birth_date_2i], | |
| 6611 | +#signup-form label[for=profile_data_birth_date_3i], | |
| 6612 | +#signup-form label[for=profile_data_schooling], | |
| 6613 | +#signup-form label[for=profile_data_formation], | |
| 6614 | +#signup-form label[for=profile_data_area_of_study], | |
| 6615 | +#signup-form label[for=profile_data_image_builder_uploaded_data] { | |
| 6627 | 6616 | display: block; |
| 6628 | 6617 | } |
| 6629 | 6618 | |
| 6630 | -.action-account-signup #wrap-1 #profile_data_name { | |
| 6619 | +#signup-form #profile_data_name { | |
| 6631 | 6620 | padding-left: 10px; |
| 6632 | 6621 | } |
| 6633 | 6622 | |
| 6634 | -.action-account-signup #wrap-1 #user_login.unavailable, | |
| 6635 | -.action-account-signup #wrap-1 #user_email.unavailable, | |
| 6636 | -.action-account-signup #wrap-1 .formfield input.passwords_differ { | |
| 6623 | +#signup-form .invalid { | |
| 6637 | 6624 | border-color: #FFA000; |
| 6638 | 6625 | background-image: url(/images/passwords_nomatch.png); |
| 6639 | 6626 | } |
| 6640 | 6627 | |
| 6641 | -.action-account-signup #wrap-1 #user_email.checking, | |
| 6642 | -.action-account-signup #wrap-1 #user_login.checking { | |
| 6628 | +#signup-form span.invalid { | |
| 6629 | + background: transparent; | |
| 6630 | + color: #FFA000; | |
| 6631 | +} | |
| 6632 | + | |
| 6633 | +#signup-form .checking { | |
| 6643 | 6634 | border-color: #4A4A4A; |
| 6644 | 6635 | background-image: url(/images/login_checking.png); |
| 6645 | 6636 | } |
| 6646 | 6637 | |
| 6647 | -.action-account-signup #wrap-1 #user_login.available, | |
| 6648 | -.action-account-signup #wrap-1 #user_email.available, | |
| 6649 | -.action-account-signup #wrap-1 .formfield input.passwords_match { | |
| 6638 | +#signup-form span.checking { | |
| 6639 | + background: transparent; | |
| 6640 | + color: #4A4A4A; | |
| 6641 | +} | |
| 6642 | + | |
| 6643 | +#signup-form .validated { | |
| 6650 | 6644 | border-color: #88BD00; |
| 6651 | 6645 | background-image: url(/images/passwords_match.png); |
| 6652 | 6646 | } |
| 6653 | 6647 | |
| 6648 | +#signup-form span.validated { | |
| 6649 | + background: transparent; | |
| 6650 | + color: #88BD00; | |
| 6651 | +} | |
| 6652 | + | |
| 6654 | 6653 | #signup-domain { |
| 6655 | 6654 | float: left; |
| 6656 | 6655 | display: inline-block; |
| ... | ... | @@ -6669,7 +6668,7 @@ h1#agenda-title { |
| 6669 | 6668 | margin-left: 14px; |
| 6670 | 6669 | } |
| 6671 | 6670 | |
| 6672 | -.action-account-signup #wrap-1 #signup-form-header #user_login { | |
| 6671 | +#signup-form #signup-form-header #user_login { | |
| 6673 | 6672 | margin: 0; |
| 6674 | 6673 | width: 200px; |
| 6675 | 6674 | padding-right: 30px; |
| ... | ... | @@ -6683,14 +6682,14 @@ h1#agenda-title { |
| 6683 | 6682 | float: left; |
| 6684 | 6683 | } |
| 6685 | 6684 | |
| 6686 | -.action-account-signup #wrap-1 #signup-password, | |
| 6687 | -.action-account-signup #wrap-1 #signup-password-confirmation, | |
| 6688 | -.action-account-signup #wrap-1 #signup-login { | |
| 6685 | +#signup-form #signup-password, | |
| 6686 | +#signup-form #signup-password-confirmation, | |
| 6687 | +#signup-form #signup-login { | |
| 6689 | 6688 | position: relative; |
| 6690 | 6689 | } |
| 6691 | 6690 | |
| 6692 | -.action-account-signup #wrap-1 small#signup-balloon, | |
| 6693 | -.action-account-signup #wrap-1 small#password-balloon { | |
| 6691 | +#signup-form small#signup-balloon, | |
| 6692 | +#signup-form small#password-balloon { | |
| 6694 | 6693 | display: none; |
| 6695 | 6694 | width: 142px; |
| 6696 | 6695 | height: 69px; |
| ... | ... | @@ -6707,8 +6706,8 @@ h1#agenda-title { |
| 6707 | 6706 | top: -100px; |
| 6708 | 6707 | } |
| 6709 | 6708 | |
| 6710 | -.action-account-signup #wrap-1 .required-field label, | |
| 6711 | -.action-account-signup #wrap-1 .formlabel { | |
| 6709 | +#signup-form .required-field label, | |
| 6710 | +#signup-form .formlabel { | |
| 6712 | 6711 | color: #b4b9b5; |
| 6713 | 6712 | font-size: 20px; |
| 6714 | 6713 | text-transform: lowercase; |
| ... | ... | @@ -6717,7 +6716,7 @@ h1#agenda-title { |
| 6717 | 6716 | font-family: droidserif; |
| 6718 | 6717 | } |
| 6719 | 6718 | |
| 6720 | -.action-account-signup #wrap-1 .required-field label::after { | |
| 6719 | +#signup-form .required-field label::after { | |
| 6721 | 6720 | content: ''; |
| 6722 | 6721 | } |
| 6723 | 6722 | |
| ... | ... | @@ -6741,16 +6740,16 @@ h1#agenda-title { |
| 6741 | 6740 | background: #FFF; |
| 6742 | 6741 | } |
| 6743 | 6742 | |
| 6744 | -.action-account-signup #terms-of-use-box label { | |
| 6743 | +#signup-form #terms-of-use-box label { | |
| 6745 | 6744 | display: inline; |
| 6746 | 6745 | font-size: 16px; |
| 6747 | 6746 | } |
| 6748 | 6747 | |
| 6749 | -.action-account-signup #terms-of-use-box label a { | |
| 6748 | +#signup-form #terms-of-use-box label a { | |
| 6750 | 6749 | color: #FF7F2A; |
| 6751 | 6750 | } |
| 6752 | 6751 | |
| 6753 | -.action-account-signup #content form input.button.submit { | |
| 6752 | +#content #signup-form .submit { | |
| 6754 | 6753 | border: 0; |
| 6755 | 6754 | padding: 8px 36px 12px; |
| 6756 | 6755 | background: transparent url(/images/orange-bg.png) left center repeat-x; |
| ... | ... | @@ -6784,7 +6783,7 @@ h1#agenda-title { |
| 6784 | 6783 | text-align: center; |
| 6785 | 6784 | } |
| 6786 | 6785 | |
| 6787 | -.action-account-signup .formfieldline { | |
| 6786 | +#signup-form .formfieldline { | |
| 6788 | 6787 | padding: 0; |
| 6789 | 6788 | } |
| 6790 | 6789 | ... | ... |