From 5e76815c438de5a0523a5b9267ba9d819f9ee37e Mon Sep 17 00:00:00 2001
From: Zev Benjamin <zev@humbughq.com>
Date: Tue, 15 Jan 2013 15:41:16 -0500
Subject: [PATCH] Use not-tables for loading indicators

(imported from commit 37a18feea4366e66d4e0a42d8f66edc55928c5f7)
---
 templates/zephyr/home.html      |  4 ++--
 zephyr/static/js/ui.js          |  2 +-
 zephyr/static/js/util.js        | 23 ++++++++++++++++-------
 zephyr/static/styles/zephyr.css | 24 ++++++++++++++----------
 4 files changed, 33 insertions(+), 20 deletions(-)

diff --git a/templates/zephyr/home.html b/templates/zephyr/home.html
index cd20334ce9..34b13f11ac 100644
--- a/templates/zephyr/home.html
+++ b/templates/zephyr/home.html
@@ -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>
diff --git a/zephyr/static/js/ui.js b/zephyr/static/js/ui.js
index 1e8b2987c2..98360d44de 100644
--- a/zephyr/static/js/ui.js
+++ b/zephyr/static/js/ui.js
@@ -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();
     }
diff --git a/zephyr/static/js/util.js b/zephyr/static/js/util.js
index f05785a09e..8b8e58f0f1 100644
--- a/zephyr/static/js/util.js
+++ b/zephyr/static/js/util.js
@@ -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,
diff --git a/zephyr/static/styles/zephyr.css b/zephyr/static/styles/zephyr.css
index 060dac6e03..4d87c490e1 100644
--- a/zephyr/static/styles/zephyr.css
+++ b/zephyr/static/styles/zephyr.css
@@ -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 {