From bd8a284ce695a7f8004370640e93c2fa77e1c3a4 Mon Sep 17 00:00:00 2001
From: phoenixeliot <phoenixjeliot@gmail.com>
Date: Tue, 26 Jul 2016 11:54:02 -0700
Subject: [PATCH] Improve layout of help blocks in signup form

---
 .../modal/create-account-modal/basic-info-view.sass |  8 ++++++++
 .../core/create-account-modal/basic-info-view.jade  | 13 +++++--------
 2 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/app/styles/modal/create-account-modal/basic-info-view.sass b/app/styles/modal/create-account-modal/basic-info-view.sass
index ff0a9ba12..e6c4065fe 100644
--- a/app/styles/modal/create-account-modal/basic-info-view.sass
+++ b/app/styles/modal/create-account-modal/basic-info-view.sass
@@ -19,10 +19,18 @@
       
       input
         max-height: 5vh
+
+      .help-block
+        float: right
+
+      .fancy-error
+        padding-top: 29px
+        line-height: 14px
     
     .form-container
       > .form-group, > .row
         max-height: 84px
+        max-height: calc(29px + 29px + 5vh)
         flex-grow: 1
         align-self: flex-start
     
diff --git a/app/templates/core/create-account-modal/basic-info-view.jade b/app/templates/core/create-account-modal/basic-info-view.jade
index 4b1172cdf..350d56675 100644
--- a/app/templates/core/create-account-modal/basic-info-view.jade
+++ b/app/templates/core/create-account-modal/basic-info-view.jade
@@ -34,12 +34,11 @@ form#basic-info-form.modal-body.basic-info
           .col-xs-5.col-xs-offset-3
             label.control-label(for="email-input")
               span(data-i18n="share_progress_modal.form_label")
-          .col-xs-5.col-xs-offset-3
-            input.form-control.input-lg#email-input(name="email" type="email")
             if view.signupState.get('path') === 'student'
               .help-block.optional-help-block.pull-right
                 span(data-i18n="signup.optional")
-          .col-xs-4.email-check
+            input.form-control.input-lg#email-input(name="email" type="email")
+          .col-xs-4.email-check.fancy-error
             - var checkEmailState = view.state.get('checkEmailState');
             if checkEmailState === 'checking'
               span.small(data-i18n="signup.checking")
@@ -59,12 +58,11 @@ form#basic-info-form.modal-body.basic-info
 
       .form-group
         .row
-          .col-xs-7.col-xs-offset-3
+          .col-xs-5.col-xs-offset-3
             label.control-label(for="username-input")
               span(data-i18n="general.username")
-          .col-xs-5.col-xs-offset-3
             input.form-control.input-lg#username-input(name="name")
-          .col-xs-4.name-check
+          .col-xs-4.name-check.fancy-error
             - var checkNameState = view.state.get('checkNameState');
             if checkNameState === 'checking'
               span.small(data-i18n="signup.checking")
@@ -81,10 +79,9 @@ form#basic-info-form.modal-body.basic-info
 
       .form-group
         .row
-          .col-xs-7.col-xs-offset-3
+          .col-xs-5.col-xs-offset-3
             label.control-label(for="password-input")
               span(data-i18n="general.password")
-          .col-xs-5.col-xs-offset-3
             input.form-control.input-lg#password-input(name="password" type="password")
 
       .form-group.checkbox.subscribe