Download as
Browse Code »

Commit 3a8c189acc5b9215bd8429d0be99dd6a0d9b4021

Authored by Daniela Feitosa
Committed by Daniela Feitosa
1 parent 8cb271f9
Exists in master and in 22 other branches angular_poc, api-article-archived, article-readonly, backup-7-jan-2016, captcha_serpro_plugin, content-manager-hostspot, export-comment-paragraph, fix_event_date_issue, login-captcha, master_rails3, new_video_plugin, pg_search_rank, production, refactor_with_role, refactor_with_role_scope, remove_profile_cat_icons, resend_confirmation_email, staging, staging_rails3, tasks_keep_filter_params, theme-brasil-digital-from-staging, travis

Redesigning signup screen

Showing 4 changed files with 58 additions and 116 deletions   Show diff stats
app/helpers/application_helper.rb
  Diff comments   View file @3a8c189
... ... @@ -1340,8 +1340,8 @@ module ApplicationHelper
1340 1340 content_tag('li', labelled_radio_button(template.name, "#{field_name}[template_id]", template.id, counter==1))
1341 1341 end.join("\n")
1342 1342  
1343   - content_tag('div', content_tag('span', _('Template:')) +
1344   - content_tag('ul', radios, :style => 'list-style: none; padding-left: 0; margin-top: 0.5em;'),
  1343 + content_tag('div', content_tag('label', _('Template'), :for => 'template-options', :class => 'formlabel') +
  1344 + content_tag('ul', radios, :style => 'list-style: none; padding-left: 20px; margin-top: 0.5em;'),
1345 1345 :id => 'template-options',
1346 1346 :style => 'margin-top: 1em'
1347 1347 )
... ...
app/views/account/_signup_form.rhtml
  Diff comments   View file @3a8c189
... ... @@ -6,14 +6,17 @@
6 6  
7 7 <div id='signup-form-header'>
8 8  
9   - <span id="signup-domain"><%= environment.default_hostname %>/</span>
10   - <div id='signup-login'>
11   - <div id='signup-login-field'>
12   - <%= required f.text_field(:login, :onchange => 'this.value = convToValidLogin(this.value);', :rel => s_('signup|Login')) %>
13   - <div id='url-check'><p>&nbsp;</p></div>
  9 + <div id='signup-formfield-group'>
  10 + <%= label(:profile_data, :login, _('Username'), {:class => 'formlabel'}) %>
  11 + <span id="signup-domain"><%= environment.default_hostname %>/</span>
  12 + <div id='signup-login'>
  13 + <div id='signup-login-field' class='formfield'>
  14 + <%= required text_field(:profile_data, :login, :id => 'user_login', :onchange => 'this.value = convToValidLogin(this.value);') %>
  15 + <div id='url-check'><p>&nbsp;</p></div>
  16 + </div>
  17 + <%= content_tag(:small, _('Choose your login name carefully! It will be your network access and you will not be able to change it later.'), :id => 'signup-balloon') %>
  18 + <br style="clear: both;" />
14 19 </div>
15   - <%= content_tag(:small, _('Choose your login name carefully! It will be your network access and you will not be able to change it later.'), :id => 'signup-balloon') %>
16   - <br style="clear: both;" />
17 20 </div>
18 21 <%= observe_field 'user_login',
19 22 :url => { :action => 'check_url' },
... ... @@ -26,19 +29,17 @@
26 29  
27 30 <div id='signup-password'>
28 31 <%= required f.password_field(:password, :id => 'user_pw') %>
29   - <%= f.text_field(:password_clear, :value => _('password')) %>
30 32 <%= content_tag(:small,_('Choose a password that you can remember easily. It must have at least 4 characters.'), :id => 'password-balloon') %>
31 33 <div id='fake-check'><p>&nbsp;</p></div>
32 34 </div>
33 35  
34 36 <div id='signup-password-confirmation'>
35 37 <%= required f.password_field(:password_confirmation) %>
36   - <%= f.text_field(:password_confirmation_clear, :value => _('password confirmation')) %>
37 38 <div id='password-check'><p>&nbsp;</p></div>
38 39 </div>
39 40  
40 41 <div id='signup-email'>
41   - <%= required f.text_field(:email, :rel => _('e-Mail')) %>
  42 + <%= required f.text_field(:email) %>
42 43 <%= content_tag(:small,_('This e-mail address will be used to contact you.')) %>
43 44 <div id='email-check'><p>&nbsp;</p></div>
44 45 </div>
... ... @@ -62,8 +63,10 @@
62 63 }"
63 64 %>
64 65  
65   - <%= label :profile_data, :name %>
66   - <%= required text_field(:profile_data, :name, :rel => _('Full name')) %>
  66 + <div class='formfield'>
  67 + <%= label(:profile_data, :name, _('Full name'), {:class => 'formlabel'}) %>
  68 + <%= required text_field(:profile_data, :name) %>
  69 + </div>
67 70  
68 71 </div>
69 72  
... ... @@ -99,6 +102,9 @@
99 102  
100 103 <script type="text/javascript">
101 104 jQuery(function($) {
  105 +
  106 + $('#signup-form #user_login').css('width', 335 - $('#signup-domain').outerWidth());
  107 +
102 108 $('#signup-form input[type=text], #signup-form textarea').each(function() {
103 109 if ($(this).attr('rel')) var default_value = $(this).attr('rel').toLowerCase();
104 110 if ($(this).val() == '') $(this).val(default_value);
... ... @@ -122,40 +128,20 @@ jQuery(function($) {
122 128 return true;
123 129 });
124 130  
125   - $('#user_password_clear, #user_password_confirmation_clear').show();
126   - $('#user_password_clear, #user_password_confirmation_clear').unbind();
127   - $('#user_pw, #user_password_confirmation').hide();
128   - $('#user_password_clear').focus(function() {
129   - $(this).hide();
130   - $('#user_pw').show();
131   - $('#user_pw').focus();
132   - });
133 131 $('#user_pw').focus(function() {
134 132 $('#password-balloon').fadeIn('slow');
135 133 });
136   - $('#user_pw').blur(function() {
137   - if ($(this).val() == '') {
138   - $('#user_password_clear').show();
139   - $(this).hide();
140   - }
141   - });
142   - $('#user_password_confirmation_clear').focus(function() {
143   - $(this).hide();
144   - $('#user_password_confirmation').show();
145   - $('#user_password_confirmation').focus();
146   - });
147 134 $('#user_password_confirmation, #user_pw').blur(function() {
148   - if ($('#user_password_confirmation').val() == '') {
149   - $('#user_password_confirmation_clear').show();
150   - $('#user_password_confirmation').hide();
151   - } else if ($('#user_password_confirmation').val() == $('#user_pw').val()) {
152   - $('#user_password_confirmation').addClass('validated').removeClass('invalid');
153   - $('#user_pw').removeClass('invalid_input').addClass('valid_input');
154   - $('#password-check').html("<p>&nbsp;</p>");
155   - } else if ($('#user_password_confirmation').val() != $('#user_pw').val()) {
156   - $('#user_password_confirmation').removeClass('validated').addClass('invalid');
157   - $('#user_pw').addClass('invalid_input').removeClass('valid_input');
158   - $('#password-check').html("<p><span class='invalid'><%= _('Passwords don\'t match') %></span></p>");
  135 + if ($('#user_password_confirmation').val() != '') {
  136 + if ($('#user_password_confirmation').val() == $('#user_pw').val()) {
  137 + $('#user_password_confirmation').addClass('validated').removeClass('invalid');
  138 + $('#user_pw').removeClass('invalid_input').addClass('valid_input');
  139 + $('#password-check').html("<p>&nbsp;</p>");
  140 + } else if ($('#user_password_confirmation').val() != $('#user_pw').val()) {
  141 + $('#user_password_confirmation').removeClass('validated').addClass('invalid');
  142 + $('#user_pw').addClass('invalid_input').removeClass('valid_input');
  143 + $('#password-check').html("<p><span class='invalid'><%= _('Passwords don\'t match') %></span></p>");
  144 + }
159 145 }
160 146 $('#password-balloon').fadeOut('slow');
161 147 });
... ...
plugins/stoa/public/javascripts/signup_complement.js
  Diff comments   View file @3a8c189
1 1 jQuery("#usp_id_field").observe_field(1, function(){
2 2 var me=this;
3 3 jQuery(this).addClass('checking').removeClass('validated');
4   - jQuery(this.parentNode).addClass('checking')
  4 +// jQuery(this.parentNode).addClass('checking')
5 5 jQuery.getJSON('/plugin/stoa/check_usp_id?usp_id='+me.value,
6 6 function(data){
7 7 if(data.exists) {
... ... @@ -21,12 +21,12 @@ jQuery(&quot;#usp_id_field&quot;).observe_field(1, function(){
21 21 }
22 22 jQuery('#signup-form .submit').attr('disabled', false);
23 23 jQuery(me).removeClass('checking').addClass('validated');
24   - jQuery(me.parentNode).removeClass('checking')
  24 + // jQuery(me.parentNode).removeClass('checking')
25 25 });
26 26 }
27 27 else {
28 28 jQuery(me).removeClass('checking');
29   - jQuery(me.parentNode).removeClass('checking')
  29 +// jQuery(me.parentNode).removeClass('checking')
30 30 if(me.value) {
31 31 jQuery('#signup-form .submit').attr('disabled', true);
32 32 jQuery(me).addClass('invalid');
... ...
public/stylesheets/application.css
  Diff comments   View file @3a8c189
... ... @@ -5629,45 +5629,37 @@ li.profile-activity-item.upload_image .activity-gallery-images-count-1 img {
5629 5629 clear: both;
5630 5630 }
5631 5631  
5632   -.action-account-signup #main-content-wrapper-8 {
5633   - background: #ECECEC;
5634   -}
5635   -
5636   -@font-face {
5637   - font-family: droidserif;
5638   - src: url('/fonts/DroidSerif-Regular.eot'); /* EOT file for IE */
5639   - src: local("DroidSerif-Regular"), url('/fonts/DroidSerif-Regular.ttf');
5640   -}
5641   -
5642 5632 .action-account-signup #content .no-boxes h1 {
5643 5633 font-variant: normal;
5644 5634 border-bottom: 0;
5645 5635 color: #666666;
5646   - font-family: droidserif, serif;
5647 5636 font-weight: lighter;
5648 5637 text-align: center;
5649 5638 margin-top: 35px;
5650 5639 margin-left: 12px;
5651 5640 }
5652 5641  
5653   -#signup-form label,
5654   -#signup-form small,
5655   -#signup-form #user_password,
5656   -#signup-form #user_password_confirmation {
  5642 +#signup-form {
  5643 + color: #4A4A4A;
  5644 +}
  5645 +
  5646 +#signup-form small {
5657 5647 display: none;
5658 5648 }
5659 5649  
5660 5650 #signup-form #signup-form-header {
5661   - background: #E3E3E3;
5662   - padding: 22px 0;
5663 5651 -moz-border-radius: 8px;
5664 5652 border-radius: 8px;
5665 5653 -webkit-border-radius: 8px;
5666   - margin: 60px auto 20px;
  5654 + margin: 60px auto 5px;
5667 5655 position: relative;
5668 5656 width: 563px;
5669 5657 }
5670 5658  
  5659 +#signup-form #signup-form-profile {
  5660 + width: 563px;
  5661 +}
  5662 +
5671 5663 #signup-form input.invalid_input {
5672 5664 border: 2px solid #FFA000;
5673 5665 background: #FFF;
... ... @@ -5684,21 +5676,21 @@ li.profile-activity-item.upload_image .activity-gallery-images-count-1 img {
5684 5676 #signup-form textarea,
5685 5677 #signup-form #profile_data_name,
5686 5678 #signup-form input {
5687   - background: transparent url(/images/field-bg.png) left top no-repeat;
5688 5679 padding: 7px 30px 10px 7px;
5689   - height: 24px;
  5680 + height: 20px;
5690 5681 width: 335px;
5691 5682 color: #6d786e;
5692   - font-size: 20px;
5693   - font-family: droidserif, serif;
  5683 + font-size: 18px;
5694 5684 margin: 9px 14px 0;
5695   - border: 0;
5696 5685 }
5697 5686  
5698   -#signup-form #user_password,
5699   -#signup-form #user_password_confirmation,
  5687 +#signup-form #profile_data_login {
  5688 + margin: 3px 0px 0px 5px;
  5689 +}
  5690 +
5700 5691 #signup-form .filled-in,
5701 5692 #signup-form .invalid,
  5693 +#signup-form .validated,
5702 5694 #signup-form .checking {
5703 5695 border-width: 2px;
5704 5696 border-style: solid;
... ... @@ -5738,44 +5730,21 @@ li.profile-activity-item.upload_image .activity-gallery-images-count-1 img {
5738 5730  
5739 5731 #signup-form input[type=radio] {
5740 5732 height: auto;
5741   - margin: 0;
5742   - margin-left: 3px;
  5733 + margin: 0px 5px 0px 3px;
5743 5734 }
5744 5735  
5745 5736 #signup-form .fieldgroup {
5746 5737 margin: 5px 10px;
5747   -
5748   -}
5749   -
5750   -
5751   -#signup-form #template-options a,
5752   -#signup-form #template-options label,
5753   -#signup-form #template-options span {
5754   - color: #6D786E;
5755   - font-size: 20px;
5756   - font-family: droidserif;
5757   -}
5758   -
5759   -#signup-form #template-options span {
5760   - color: #4A4A4A;
5761   -}
5762   -
5763   -#signup-form #template-options label {
5764   - display: inline;
5765   - margin-left: 8px;
5766 5738 }
5767 5739  
5768   -#signup-form #template-options input {
5769   - width: auto;
  5740 +#signup-form #template-options li label {
  5741 + font-size: 18px;
5770 5742 }
5771 5743  
5772   -
5773 5744 #signup-form label[for=profile_data_sex_female],
5774 5745 #signup-form label[for=profile_data_sex_male] {
5775 5746 color: #6d786e;
5776 5747 font-size: 20px;
5777   - font-family: droidserif;
5778   - text-transform: lowercase;
5779 5748 display: inline;
5780 5749 margin-left: 8px;
5781 5750 }
... ... @@ -5833,23 +5802,18 @@ li.profile-activity-item.upload_image .activity-gallery-images-count-1 img {
5833 5802 float: left;
5834 5803 display: inline-block;
5835 5804 vertical-align: middle;
5836   - background: #EAEAEA;
5837   - border-right: 2px solid #FFFFFF;
5838   - border-top: 2px solid #FFFFFF;
5839   - border-left: 2px solid #CFCFCF;
5840   - border-bottom: 2px solid #CFCFCF;
  5805 + background: #EEE;
  5806 + border: 1px solid #CFCFCF;
5841 5807 line-height: 37px;
5842 5808 padding: 0px 7px;
5843 5809 color: #4A4A4A;
5844 5810 font-size: 20px;
5845   - font-family: droidserif;
5846 5811 text-transform: lowercase;
5847 5812 margin-left: 14px;
5848 5813 }
5849 5814  
5850 5815 #signup-form #signup-form-header #user_login {
5851 5816 margin: 0;
5852   - width: 200px;
5853 5817 padding-right: 30px;
5854 5818 }
5855 5819  
... ... @@ -5887,12 +5851,10 @@ li.profile-activity-item.upload_image .activity-gallery-images-count-1 img {
5887 5851  
5888 5852 #signup-form .required-field label,
5889 5853 #signup-form .formlabel {
5890   - color: #b4b9b5;
  5854 + color: #4A4A4A;
5891 5855 font-size: 20px;
5892   - text-transform: lowercase;
5893 5856 font-weight: normal;
5894 5857 margin-left: 15px;
5895   - font-family: droidserif;
5896 5858 }
5897 5859  
5898 5860 #signup-form .required-field label::after {
... ... @@ -5933,7 +5895,6 @@ li.profile-activity-item.upload_image .activity-gallery-images-count-1 img {
5933 5895 padding: 8px 36px 12px;
5934 5896 background: transparent url(/images/orange-bg.png) left center repeat-x;
5935 5897 font-size: 17px;
5936   - font-family: droidserif;
5937 5898 color: #FFFFD5;
5938 5899 text-align: center;
5939 5900 text-shadow: #d45500 0 -1px 0;
... ... @@ -5945,12 +5906,8 @@ li.profile-activity-item.upload_image .activity-gallery-images-count-1 img {
5945 5906 }
5946 5907  
5947 5908 .action-account-signup .no-boxes {
5948   - margin-left: 128px;
5949   - margin-right: 128px;
5950   -}
5951   -
5952   -#signup-form-profile {
5953   - margin: 30px 0 0 40px;
  5909 + margin-left: 247px;
  5910 + margin-right: 247px;
5954 5911 }
5955 5912  
5956 5913 .select-birth-date {
... ... @@ -5983,7 +5940,6 @@ li.profile-activity-item.upload_image .activity-gallery-images-count-1 img {
5983 5940 }
5984 5941  
5985 5942 #thanks-for-signing h4 {
5986   - font-family: droidserif, serif;
5987 5943 color: #6D786E;
5988 5944 font-size: 20px;
5989 5945 }
... ...