From b06f34b55bca08a67b9bb7624ffed39d6ae0d492 Mon Sep 17 00:00:00 2001
From: Steve Howell <steve@humbughq.com>
Date: Thu, 27 Jun 2013 16:36:41 -0400
Subject: [PATCH] Use portrait alignment for adding-bots form.

The add-bots form used to have a landscape alignment, as it was
integrated into the same HTML table that showed your existing bots.
This became unwieldy once we allowed users to upload avatars.

(imported from commit 246a35be77ce1679d595271e6911dc339a6813ab)
---
 templates/zephyr/settings.html  | 53 ++++++++++++++++-----------------
 zephyr/static/js/settings.js    |  3 +-
 zephyr/static/styles/zephyr.css | 12 +++-----
 3 files changed, 31 insertions(+), 37 deletions(-)

diff --git a/templates/zephyr/settings.html b/templates/zephyr/settings.html
index 6e70810175..13671ce21d 100644
--- a/templates/zephyr/settings.html
+++ b/templates/zephyr/settings.html
@@ -130,8 +130,6 @@
     <hr class="settings_separator" />
 
     <h2>Your bots</h2>
-    <form id="create_bot_form">
-    <div id="bot_table_error" class="alert alert-error hide"></div>
       <table class="table table-condensed table-striped" id="bots_table">
         <tbody>
           <tr>
@@ -140,34 +138,33 @@
             <th>Avatar (optional)</th>
             <th class="bot_api_key_header">API key</th>
           </tr>
-          <tr id="create_bot_row">
-            <td>
-              <div class="create_bot_control">
-                <input type="text" name="bot_name" id="create_bot_name" class="required"
-                       maxlength=100 placeholder="Bot name" value="" />
-              </div>
-              <div><label for="create_bot_name" generated="true" class="text-error"></label></div>
-            </td>
-            <td>
-              <div class="create_bot_control">
-                <input type="text" name="bot_short_name" id="create_bot_short_name" class="required bot_local_part"
-                       placeholder="Bot username" value="" />-bot@{{ user_profile.realm.domain }}
-              </div>
-              <div><label for="create_bot_short_name" generated="true" class="text-error"></label></div>
-            </td>
-            <td>
-              <p>
-                  <input type="file" name="bot_avatar_file_input" id="bot_avatar_file_input" value="Upload avatar" />
-              </p>
-              <div id="bot_avatar_file_input_error"></div>
-            </td>
-            <td>
-              <input type="submit" class="btn btn-primary" id="create_bot_button" value="Create Bot" />
-              <div id="create_bot_spinner"></div>
-            </td>
-          </tr>
         </tbody>
       </table>
+
+    <form id="create_bot_form">
+    <div id="bot_table_error" class="alert alert-error hide"></div>
+      <h3>Add new bot:</h3>
+      <p>     
+        <div class="label">Full name:</div>
+        <input type="text" name="bot_name" id="create_bot_name" class="required"
+               maxlength=100 placeholder="Bot name" value="" />
+        <div><label for="create_bot_name" generated="true" class="text-error"></label></div>
+      </p>
+      <p>
+        <div class="label">Username:</div>
+        <input type="text" name="bot_short_name" id="create_bot_short_name" class="required bot_local_part"
+               placeholder="Bot username" value="" />-bot@{{ user_profile.realm.domain }}
+        <div><label for="create_bot_short_name" generated="true" class="text-error"></label></div>
+      </p>
+      <p>
+        <div class="label">Optional avatar:</div>
+        <input type="file" name="bot_avatar_file_input" id="bot_avatar_file_input" value="Upload avatar" />
+      </p>
+      <p>
+        <div id="bot_avatar_file_input_error"></div>
+      </p>
+      <input type="submit" class="btn btn-primary" id="create_bot_button" value="Create Bot" />
+      <div id="create_bot_spinner"></div>
     </form>
 
     <hr class="settings_separator" />
diff --git a/zephyr/static/js/settings.js b/zephyr/static/js/settings.js
index 57d30d1aba..24862ae1af 100644
--- a/zephyr/static/js/settings.js
+++ b/zephyr/static/js/settings.js
@@ -15,7 +15,8 @@ function add_bot_row(name, email, avatar_url, api_key) {
                                     $('<td>').text(email),
                                     $('<td>').html(avatar_cell),
                                     $('<td class="api_key">').text(api_key));
-    $('#create_bot_row').before(row);
+    $('#bots_table tr:last').after(row);
+    $('#bots_table').show();
 }
 
 function is_local_part(value, element) {
diff --git a/zephyr/static/styles/zephyr.css b/zephyr/static/styles/zephyr.css
index 5e471bd9c8..0920c32cbf 100644
--- a/zephyr/static/styles/zephyr.css
+++ b/zephyr/static/styles/zephyr.css
@@ -1808,6 +1808,10 @@ li.expanded_subject {
     overflow: hidden;
 }
 
+#bots_table {
+    display: none;
+}
+
 #create_bot_name {
     width: 85%;
 }
@@ -1829,14 +1833,6 @@ li.expanded_subject {
     font-size: 85%;
 }
 
-.create_bot_control {
-    vertical-align: middle;
-}
-
-#create_bot_row input {
-    margin: 0;
-}
-
 #onboarding-header {
     font-size: 16px;
     font-weight: bold;