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)
This commit is contained in:
Steve Howell 2013-06-27 16:36:41 -04:00
parent 0da7ead83d
commit b06f34b55b
3 changed files with 31 additions and 37 deletions

View File

@ -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" />

View File

@ -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) {

View File

@ -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;