Redesigning signup screen

Daniela Feitosa · Daniela Feitosa
1 parent 8cb271f9
Showing 4 changed files with 58 additions and 116 deletions Show diff stats
app/helpers/application_helper.rb
app/views/account/_signup_form.rhtml
plugins/stoa/public/javascripts/signup_complement.js
public/stylesheets/application.css
@@ -1340,8 +1340,8 @@ module ApplicationHelper
       content_tag('li', labelled_radio_button(template.name, "#{field_name}[template_id]", template.id, counter==1))
     end.join("\n")
-    content_tag('div', content_tag('span', _('Template:')) +
-      content_tag('ul', radios, :style => 'list-style: none; padding-left: 0; margin-top: 0.5em;'),
+    content_tag('div', content_tag('label', _('Template'), :for => 'template-options', :class => 'formlabel') +
+      content_tag('ul', radios, :style => 'list-style: none; padding-left: 20px; margin-top: 0.5em;'),
       :id => 'template-options',
       :style => 'margin-top: 1em'
     )
@@ -6,14 +6,17 @@
 <div id='signup-form-header'>
-  <span id="signup-domain"><%= environment.default_hostname %>/</span>
-  <div id='signup-login'>
-    <div id='signup-login-field'>
-      <%= required f.text_field(:login, :onchange => 'this.value = convToValidLogin(this.value);', :rel => s_('signup|Login')) %>
-      <div id='url-check'><p>&nbsp;</p></div>
+  <div id='signup-formfield-group'>
+    <%= label(:profile_data, :login, _('Username'), {:class => 'formlabel'}) %>
+    <span id="signup-domain"><%= environment.default_hostname %>/</span>
+    <div id='signup-login'>
+      <div id='signup-login-field' class='formfield'>
+        <%= required text_field(:profile_data, :login, :id => 'user_login', :onchange => 'this.value = convToValidLogin(this.value);') %>
+        <div id='url-check'><p>&nbsp;</p></div>
+      </div>
+      <%= 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') %>
+      <br style="clear: both;" />
     </div>
-    <%= 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') %>
-    <br style="clear: both;" />
   </div>
   <%= observe_field 'user_login',
         :url => { :action => 'check_url' },
@@ -26,19 +29,17 @@
   <div id='signup-password'>
     <%= required f.password_field(:password, :id => 'user_pw') %>
-    <%= f.text_field(:password_clear, :value => _('password')) %>
     <%= content_tag(:small,_('Choose a password that you can remember easily. It must have at least 4 characters.'), :id => 'password-balloon') %>
     <div id='fake-check'><p>&nbsp;</p></div>
   </div>
   <div id='signup-password-confirmation'>
     <%= required f.password_field(:password_confirmation) %>
-    <%= f.text_field(:password_confirmation_clear, :value => _('password confirmation')) %>
     <div id='password-check'><p>&nbsp;</p></div>
   </div>
   <div id='signup-email'>
-    <%= required f.text_field(:email, :rel => _('e-Mail')) %>
+    <%= required f.text_field(:email) %>
     <%= content_tag(:small,_('This e-mail address will be used to contact you.')) %>
     <div id='email-check'><p>&nbsp;</p></div>
   </div>
@@ -62,8 +63,10 @@
                       }"
   %>
-  <%= label :profile_data, :name %>
-  <%= required text_field(:profile_data, :name, :rel => _('Full name')) %>
+  <div class='formfield'>
+    <%= label(:profile_data, :name, _('Full name'), {:class => 'formlabel'}) %>
+    <%= required text_field(:profile_data, :name) %>
+  </div>
 </div>
@@ -99,6 +102,9 @@
 <script type="text/javascript">
 jQuery(function($) {
+
+  $('#signup-form #user_login').css('width', 335 - $('#signup-domain').outerWidth());
+
   $('#signup-form input[type=text], #signup-form textarea').each(function() {
     if ($(this).attr('rel')) var default_value = $(this).attr('rel').toLowerCase();
     if ($(this).val() == '') $(this).val(default_value);
@@ -122,40 +128,20 @@ jQuery(function($) {
     return true;
   });
-  $('#user_password_clear, #user_password_confirmation_clear').show();
-  $('#user_password_clear, #user_password_confirmation_clear').unbind();
-  $('#user_pw, #user_password_confirmation').hide();
-  $('#user_password_clear').focus(function() {
-    $(this).hide();
-    $('#user_pw').show();
-    $('#user_pw').focus();
-  });
   $('#user_pw').focus(function() {
     $('#password-balloon').fadeIn('slow');
   });
-  $('#user_pw').blur(function() {
-    if ($(this).val() == '') {
-      $('#user_password_clear').show();
-      $(this).hide();
-    }
-  });
-  $('#user_password_confirmation_clear').focus(function() {
-    $(this).hide();
-    $('#user_password_confirmation').show();
-    $('#user_password_confirmation').focus();
-  });
   $('#user_password_confirmation, #user_pw').blur(function() {
-    if ($('#user_password_confirmation').val() == '') {
-      $('#user_password_confirmation_clear').show();
-      $('#user_password_confirmation').hide();
-    } else if ($('#user_password_confirmation').val() == $('#user_pw').val()) {
-      $('#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('validated').addClass('invalid');
-      $('#user_pw').addClass('invalid_input').removeClass('valid_input');
-      $('#password-check').html("<p><span class='invalid'><%= _('Passwords don\'t match') %></span></p>");
+    if ($('#user_password_confirmation').val() != '') {
+      if ($('#user_password_confirmation').val() == $('#user_pw').val()) {
+        $('#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('validated').addClass('invalid');
+        $('#user_pw').addClass('invalid_input').removeClass('valid_input');
+        $('#password-check').html("<p><span class='invalid'><%= _('Passwords don\'t match') %></span></p>");
+      }
     }
     $('#password-balloon').fadeOut('slow');
   });
 jQuery("#usp_id_field").observe_field(1, function(){
   var me=this;
   jQuery(this).addClass('checking').removeClass('validated');
-  jQuery(this.parentNode).addClass('checking')
+//  jQuery(this.parentNode).addClass('checking')
   jQuery.getJSON('/plugin/stoa/check_usp_id?usp_id='+me.value,
     function(data){
       if(data.exists) {
@@ -21,12 +21,12 @@ jQuery(&quot;#usp_id_field&quot;).observe_field(1, function(){
             }
             jQuery('#signup-form .submit').attr('disabled', false);
             jQuery(me).removeClass('checking').addClass('validated');
-            jQuery(me.parentNode).removeClass('checking')
+ //           jQuery(me.parentNode).removeClass('checking')
           });
       }
       else {
         jQuery(me).removeClass('checking');
-        jQuery(me.parentNode).removeClass('checking')
+//       jQuery(me.parentNode).removeClass('checking')
         if(me.value) {
           jQuery('#signup-form .submit').attr('disabled', true);
           jQuery(me).addClass('invalid');
@@ -5629,45 +5629,37 @@ li.profile-activity-item.upload_image .activity-gallery-images-count-1 img {
   clear: both;
 }
-.action-account-signup #main-content-wrapper-8 {
-  background: #ECECEC;
-}
-
-@font-face {
-  font-family: droidserif;
-  src: url('/fonts/DroidSerif-Regular.eot'); /* EOT file for IE */
-  src: local("DroidSerif-Regular"), url('/fonts/DroidSerif-Regular.ttf');
-}
-
 .action-account-signup #content .no-boxes h1 {
   font-variant: normal;
   border-bottom: 0;
   color: #666666;
-  font-family: droidserif, serif;
   font-weight: lighter;
   text-align: center;
   margin-top: 35px;
   margin-left: 12px;
 }
-#signup-form label,
-#signup-form small,
-#signup-form #user_password,
-#signup-form #user_password_confirmation {
+#signup-form {
+  color: #4A4A4A;
+}
+
+#signup-form small {
    display: none;
 }
 #signup-form #signup-form-header {
-  background: #E3E3E3;
-  padding: 22px 0;
   -moz-border-radius: 8px;
   border-radius: 8px;
   -webkit-border-radius: 8px;
-  margin: 60px auto 20px;
+  margin: 60px auto 5px;
   position: relative;
   width: 563px;
 }
+#signup-form #signup-form-profile {
+  width: 563px;
+}
+
 #signup-form input.invalid_input {
   border: 2px solid #FFA000;
   background: #FFF;
@@ -5684,21 +5676,21 @@ li.profile-activity-item.upload_image .activity-gallery-images-count-1 img {
 #signup-form textarea,
 #signup-form #profile_data_name,
 #signup-form input {
-  background: transparent url(/images/field-bg.png) left top no-repeat;
   padding: 7px 30px 10px 7px;
-  height: 24px;
+  height: 20px;
   width: 335px;
   color: #6d786e;
-  font-size: 20px;
-  font-family: droidserif, serif;
+  font-size: 18px;
   margin: 9px 14px 0;
-  border: 0;
 }
-#signup-form #user_password,
-#signup-form #user_password_confirmation,
+#signup-form #profile_data_login {
+  margin: 3px 0px 0px 5px;
+}
+
 #signup-form .filled-in,
 #signup-form .invalid,
+#signup-form .validated,
 #signup-form .checking {
   border-width: 2px;
   border-style: solid;
@@ -5738,44 +5730,21 @@ li.profile-activity-item.upload_image .activity-gallery-images-count-1 img {
 #signup-form input[type=radio] {
   height: auto;
-  margin: 0;
-  margin-left: 3px;
+  margin: 0px 5px 0px 3px;
 }
 #signup-form .fieldgroup {
   margin: 5px 10px;
-
-}
-
-
-#signup-form #template-options a,
-#signup-form #template-options label,
-#signup-form #template-options span {
-  color: #6D786E;
-  font-size: 20px;
-  font-family: droidserif;
-}
-
-#signup-form #template-options span {
-  color: #4A4A4A;
-}
-
-#signup-form #template-options label {
-  display: inline;
-  margin-left: 8px;
 }
-#signup-form #template-options input {
-  width: auto;
+#signup-form #template-options li label {
+  font-size: 18px;
 }
-
 #signup-form label[for=profile_data_sex_female],
 #signup-form label[for=profile_data_sex_male] {
   color: #6d786e;
   font-size: 20px;
-  font-family: droidserif;
-  text-transform: lowercase;
   display: inline;
   margin-left: 8px;
 }
@@ -5833,23 +5802,18 @@ li.profile-activity-item.upload_image .activity-gallery-images-count-1 img {
   float: left;
   display: inline-block;
   vertical-align: middle;
-  background: #EAEAEA;
-  border-right: 2px solid #FFFFFF;
-  border-top: 2px solid #FFFFFF;
-  border-left: 2px solid #CFCFCF;
-  border-bottom: 2px solid #CFCFCF;
+  background: #EEE;
+  border: 1px solid #CFCFCF;
   line-height: 37px;
   padding: 0px 7px;
   color: #4A4A4A;
   font-size: 20px;
-  font-family: droidserif;
   text-transform: lowercase;
   margin-left: 14px;
 }
 #signup-form #signup-form-header #user_login {
   margin: 0;
-  width: 200px;
   padding-right: 30px;
 }
@@ -5887,12 +5851,10 @@ li.profile-activity-item.upload_image .activity-gallery-images-count-1 img {
 #signup-form .required-field label,
 #signup-form .formlabel {
-  color: #b4b9b5;
+  color: #4A4A4A;
   font-size: 20px;
-  text-transform: lowercase;
   font-weight: normal;
   margin-left: 15px;
-  font-family: droidserif;
 }
 #signup-form .required-field label::after {
@@ -5933,7 +5895,6 @@ li.profile-activity-item.upload_image .activity-gallery-images-count-1 img {
   padding: 8px 36px 12px;
   background: transparent url(/images/orange-bg.png) left center repeat-x;
   font-size: 17px;
-  font-family: droidserif;
   color: #FFFFD5;
   text-align: center;
   text-shadow: #d45500 0 -1px 0;
@@ -5945,12 +5906,8 @@ li.profile-activity-item.upload_image .activity-gallery-images-count-1 img {
 }
 .action-account-signup .no-boxes {
-  margin-left: 128px;
-  margin-right: 128px;
-}
-
-#signup-form-profile {
-  margin: 30px 0 0 40px;
+  margin-left: 247px;
+  margin-right: 247px;
 }
 .select-birth-date {
@@ -5983,7 +5940,6 @@ li.profile-activity-item.upload_image .activity-gallery-images-count-1 img {
 }
 #thanks-for-signing h4 {
-  font-family: droidserif, serif;
   color: #6D786E;
   font-size: 20px;
 }
1	jQuery("#usp_id_field").observe_field(1, function(){	1	jQuery("#usp_id_field").observe_field(1, function(){
2	var me=this;	2	var me=this;
3	jQuery(this).addClass('checking').removeClass('validated');	3	jQuery(this).addClass('checking').removeClass('validated');
4	- jQuery(this.parentNode).addClass('checking')	4	+// jQuery(this.parentNode).addClass('checking')
5	jQuery.getJSON('/plugin/stoa/check_usp_id?usp_id='+me.value,	5	jQuery.getJSON('/plugin/stoa/check_usp_id?usp_id='+me.value,
6	function(data){	6	function(data){
7	if(data.exists) {	7	if(data.exists) {
	@@ -21,12 +21,12 @@ jQuery("#usp_id_field").observe_field(1, function(){		@@ -21,12 +21,12 @@ jQuery("#usp_id_field").observe_field(1, function(){
21	}	21	}
22	jQuery('#signup-form .submit').attr('disabled', false);	22	jQuery('#signup-form .submit').attr('disabled', false);
23	jQuery(me).removeClass('checking').addClass('validated');	23	jQuery(me).removeClass('checking').addClass('validated');
24	- jQuery(me.parentNode).removeClass('checking')	24	+ // jQuery(me.parentNode).removeClass('checking')
25	});	25	});
26	}	26	}
27	else {	27	else {
28	jQuery(me).removeClass('checking');	28	jQuery(me).removeClass('checking');
29	- jQuery(me.parentNode).removeClass('checking')	29	+// jQuery(me.parentNode).removeClass('checking')
30	if(me.value) {	30	if(me.value) {
31	jQuery('#signup-form .submit').attr('disabled', true);	31	jQuery('#signup-form .submit').attr('disabled', true);
32	jQuery(me).addClass('invalid');	32	jQuery(me).addClass('invalid');