Mirror
/
zulip
mirror of https://github.com/zulip/zulip.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Use not-tables for loading indicators 

(imported from commit 37a18feea4366e66d4e0a42d8f66edc55928c5f7)
This commit is contained in:
Zev Benjamin 2013-01-15 15:41:16 -05:00
parent beea0f747e
commit 5e76815c43
4 changed files with 33 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
templates/zephyr/home.html
View File

@ -37,8 +37,8 @@
<div class="span9">
<div class="message_list" id="main_div">
<div id="top_whitespace"></div>
<table id="load_more_messages_indicator"></table>
<table id="page_loading_indicator"></table>
<div id="load_more_messages_indicator"></div>
<div id="page_loading_indicator"></div>
<table class="message_table focused_table" id="zhome">
<tbody>
</tbody>

2
zephyr/static/js/ui.js
View File

@ -368,7 +368,7 @@ var load_more_messages_spinner;
exports.show_load_more_messages_spinner = function () {
if (load_more_messages_spinner === undefined) {
var indicator = $('#load_more_messages_indicator');
load_more_messages_spinner = util.make_spinner(indicator, '');
load_more_messages_spinner = util.make_spinner(indicator);
indicator.show();
hide_floating_recipient_bar();
}

23
zephyr/static/js/util.js
View File

@ -15,14 +15,23 @@ exports.reset_favicon = function () {
};
exports.make_spinner = function (container, text) {
// assumes that container is a table
var row = $('<tr>');
var spinner_elem = $('<td class="loading_spinner"></td>');
var text_elem = $('<td></td>');
text_elem.text(text);
container.empty();
var spinner_elem = $('<div class="loading_spinner"></div>');
container.append(spinner_elem);
var text_width = 0;
row.append(spinner_elem, text_elem);
container.append(row);
if (text !== '' && text !== undefined) {
var text_elem = $('<span class="loading_text"></span>');
text_elem.text(text);
container.append(text_elem);
// See note, below
text_width = 20 + text_elem.width();
}
// These width calculations are tied to the spinner width and
// margins defined via CSS
container.css({width: 38 + text_width,
height: 38});
var spinner = new Spinner({
lines: 8,

24
zephyr/static/styles/zephyr.css
View File

@ -509,15 +509,17 @@ table.floating_recipient {
display: none;
}
#page_loading_indicator {
margin-top: 40px;
font-size: 36px;
font-weight: bold;
.loading_spinner {
height: 38px;
width: 38px;
float: left;
}
.loading_spinner {
width: 40px;
padding-right: 40px;
.loading_text {
margin-left: 20px;
font-size: 36px;
font-weight: bold;
line-height: 38px;
}
#message-type-tabs {
@ -562,9 +564,11 @@ table.floating_recipient {
#load_more_messages_indicator {
display: none;
margin: 0 auto;
height: 50px;
padding-top: 30px;
margin: 10px auto;
}
#page_loading_indicator {
margin: 10px auto;
}
.table-striped thead th {