From 57f1bf1ddd7b2a3cefcb83a816723664cbc358b4 Mon Sep 17 00:00:00 2001
From: Guo Xiang Tan <tgx_world@hotmail.com>
Date: Mon, 18 Jul 2016 17:26:34 +0800
Subject: [PATCH] UX: Better handle width for fields in sign up form.

---
 .../templates/modal/create-account.hbs        |  4 ++--
 app/assets/stylesheets/common/base/login.scss | 20 ++++++++++++++++---
 app/assets/stylesheets/mobile/login.scss      | 13 ++++++++----
 3 files changed, 28 insertions(+), 9 deletions(-)

diff --git a/app/assets/javascripts/discourse/templates/modal/create-account.hbs b/app/assets/javascripts/discourse/templates/modal/create-account.hbs
index ca5485a27..26ec9fae4 100644
--- a/app/assets/javascripts/discourse/templates/modal/create-account.hbs
+++ b/app/assets/javascripts/discourse/templates/modal/create-account.hbs
@@ -37,10 +37,10 @@
 
         {{#if fullnameRequired}}
           <tr class="input">
-            <td style="width:80px" class="label">
+            <td class="label">
               <label for='new-account-name'>{{i18n 'user.name.title'}}</label>
             </td>
-            <td style="width:496px">
+            <td>
               {{text-field value=accountName id="new-account-name"}}&nbsp;{{input-tip validation=nameValidation}}
             </td>
           </tr>
diff --git a/app/assets/stylesheets/common/base/login.scss b/app/assets/stylesheets/common/base/login.scss
index f66944b9d..c22321d81 100644
--- a/app/assets/stylesheets/common/base/login.scss
+++ b/app/assets/stylesheets/common/base/login.scss
@@ -12,22 +12,36 @@
   display: none;
 }
 
+
+$label-width: 92px;
+$input-width: 220px;
+
 .create-account {
+  table {
+    td.label {
+      width: $label-width;
+    }
+
+    td input {
+      width: $input-width;
+    }
+  }
+
   .user-field.confirm {
     margin-top: 20px;
   }
 
   .user-field {
     label {
-      width: 92px;
+      width: $label-width;
       float: left;
     }
     input[type=text] {
-      width: 220px;
+      width: $input-width;
       margin-bottom: 0;
     }
     .controls {
-      margin-left: 92px;
+      margin-left: $label-width;
       margin-bottom: 15px;
       label {
         width: auto;
diff --git a/app/assets/stylesheets/mobile/login.scss b/app/assets/stylesheets/mobile/login.scss
index 790d84864..eb178011d 100644
--- a/app/assets/stylesheets/mobile/login.scss
+++ b/app/assets/stylesheets/mobile/login.scss
@@ -33,11 +33,16 @@ a#forgot-password-link {clear: left; float: left; }
 
 .btn-primary {margin-bottom: 10px; font-size: 15; float: left;}
 
+
+$label-width: 85px;
+$input-width: 184px;
+
 .create-account .modal-body {
   input[type=text], input[type=email], input[type=password] {
     display: inline-block;
     margin-bottom: 5px;
     margin-top: 10px;
+    width: $input-width;
   }
 
   tr.instructions {
@@ -48,7 +53,7 @@ a#forgot-password-link {clear: left; float: left; }
 
   tr.input {
     td.label {
-      padding-right: 5px;
+      width: $label-width;
     }
   }
 }
@@ -61,15 +66,15 @@ a#forgot-password-link {clear: left; float: left; }
   .user-field {
     margin-top: 10px;
     label {
-      width: 85px;
+      width: $label-width;
     }
 
     input[type=text] {
       margin-top: 0;
-      width: 184px;
+      width: $input-width;
     }
     .controls {
-      margin-left: 85px;
+      margin-left: $label-width;
     }
   }
 }