loading popup

diff --git a/manifoldapi/static/css/manifold.css b/manifoldapi/static/css/manifold.css
index 42c034d..535950e 100644 (file)
--- a/manifoldapi/static/css/manifold.css
+++ b/manifoldapi/static/css/manifold.css
@@ -2,3 +2,18 @@
        visibility: hidden;
        position: absolute;
 }
+
+.loading {
+    background-color:white;
+    color:black;
+    position:fixed;
+    top:160px;
+    left:50%;
+    width:30%;
+    margin: 0 0 0 -15%;
+    padding:25px 50px;
+    box-shadow: 4px 4px 5px #888;
+    border:1pt solid #30196D;
+    display:none;
+    z-index:100;
+}

diff --git a/manifoldapi/static/js/plugin.js b/manifoldapi/static/js/plugin.js
index 76e1cb5..324c8c4 100644 (file)
--- a/manifoldapi/static/js/plugin.js
+++ b/manifoldapi/static/js/plugin.js
@@ -316,15 +316,18 @@ var Plugin = Class.extend({
     // use spin() to get our default spin settings (called presets)
     // use spin(true) to get spin's builtin defaults
     // you can also call spin_presets() yourself and tweak what you need to, like topmenuvalidation does
-    spin: function (presets) {
-       var presets = ( presets === undefined ) ? spin_presets() : presets;
-       try { this.$element.spin(presets); }
-       catch (err) { messages.debug("Cannot turn on spin " + err); }
+    spin: function (message) {
+       if (!message) {
+               message = 'Please be patient, this can take a few seconds.';
+       }
+       $('div.loading').fadeIn('fast');
+       $('div.loading').find('.message').text(message);
+
     },
 
     unspin: function() {
-       try { this.$element.spin(false); }
-       catch (err) { messages.debug("Cannot turn off spin " + err); }
+       $('div.loading').fadeOut('fast');
+
     },
 
     /* TEMPLATE */

diff --git a/portal/templates/base.html b/portal/templates/base.html
index 237cfa6..96aa08e 100644 (file)
--- a/portal/templates/base.html
+++ b/portal/templates/base.html
@@ -92,5 +92,14 @@ $(document).ready(function() {
        {% block base_content %}
        {% endblock %}
 {% endblock container %}
+<div class="loading">
+       <div class="row">
+               <div class="col-xs-11">Loading...</div>
+               <div class="col-xs-1"><img src="{{ STATIC_URL }}/img/loading.gif" /></div>
+       </div>
+       <div class="row">
+               <div class="col-xs-12 message"></div>
+       </div>
+</div>
 </body>
 </html>