Replace weird "loading" animation with a nice plain glyphicon.

diff --git a/apps/workbench/app/assets/javascripts/application.js b/apps/workbench/app/assets/javascripts/application.js
index 4c83198f541e85de3b93ad75da130227ccfb35b1..bb988d7753d98fe6979b06327dc914ff4906f42b 100644 (file)
--- a/apps/workbench/app/assets/javascripts/application.js
+++ b/apps/workbench/app/assets/javascripts/application.js
@@ -43,12 +43,9 @@ jQuery(function($){
     });
     $(document).
         on('ajax:send', function(e, xhr) {
-            $('.loading').show();
+            $('.loading').fadeTo('fast', 1);
         }).
         on('ajax:complete', function(e, status) {
-            $('.loading').hide();
+            $('.loading').fadeOut('fast', 0);
         });
 })(jQuery);
-
-
-

diff --git a/apps/workbench/app/assets/stylesheets/loading.css b/apps/workbench/app/assets/stylesheets/loading.css
index c76f104b4068aca91aa538fa170c8c4ff1a00cfb..7a0736ad1f3ba015060691672aa0d7d822832b3c 100644 (file)
--- a/apps/workbench/app/assets/stylesheets/loading.css
+++ b/apps/workbench/app/assets/stylesheets/loading.css
@@ -1,374 +1,46 @@
-/* http://codepen.io/alucard11/pen/IxLDJ */
-
 .loading {
-    background: #1b1b1b;
-}
-
-.loading .socket{
-    width: 200px;
-    height: 200px;
-    position: absolute;
-    left: 50%;
-    margin-left: -100px;
-    top: 50%;
-    margin-top: -100px;
-}
-
-.loading .hex-brick{
-    background: #ABF8FF;
-    width: 30px;
-    height: 17px;
-    position: absolute;
-    top: 5px;
-    animation-name: fade;
-    animation-duration: 2s;
-    animation-iteration-count: infinite;
-    -webkit-animation-name: fade;
-    -webkit-animation-duration: 2s;
-    -webkit-animation-iteration-count: infinite;
-}
-
-.loading .h2{
-    transform: rotate(60deg);
-    -webkit-transform: rotate(60deg);
-}
-
-.loading .h3{
-    transform: rotate(-60deg);
-    -webkit-transform: rotate(-60deg);
-}
-
-.loading .gel{
-    height: 30px;
-    width: 30px;       
-    transition: all .3s;
-    -webkit-transition: all .3s;
-    position: absolute;
-    top: 50%;
-    left: 50%;
-}
-
-.loading .center-gel{
-    margin-left: -15px;
-    margin-top: -15px;
-    
-    animation-name: pulse;
-    animation-duration: 2s;
-    animation-iteration-count: infinite;
-    -webkit-animation-name: pulse;
-    -webkit-animation-duration: 2s;
-    -webkit-animation-iteration-count: infinite;
-}
-
-.loading .c1{
-    margin-left: -47px;
-    margin-top: -15px;
-}
-
-.loading .c2{
-    margin-left: -31px;
-    margin-top: -43px;
-}
-
-.loading .c3{
-    margin-left: 1px;
-    margin-top: -43px;
-}
-
-.loading .c4{
-    margin-left: 17px;
-    margin-top: -15px;
-}
-.loading .c5{
-    margin-left: -31px;
-    margin-top: 13px;
-}
-
-.loading .c6{
-    margin-left: 1px;
-    margin-top: 13px;
-}
-
-.loading .c7{
-    margin-left: -63px;
-    margin-top: -43px;
-}
-
-.loading .c8{
-    margin-left: 33px;
-    margin-top: -43px;
-}
-
-.loading .c9{
-    margin-left: -15px;
-    margin-top: 41px;
-}
-
-.loading .c10{
-    margin-left: -63px;
-    margin-top: 13px;
-}
-
-.loading .c11{
-    margin-left: 33px;
-    margin-top: 13px;
-}
-
-.loading .c12{
-    margin-left: -15px;
-    margin-top: -71px;
-}
-
-.loading .c13{
-    margin-left: -47px;
-    margin-top: -71px;
-}
-
-.loading .c14{
-    margin-left: 17px;
-    margin-top: -71px;
-}
-
-.loading .c15{
-    margin-left: -47px;
-    margin-top: 41px;
-}
-
-.loading .c16{
-    margin-left: 17px;
-    margin-top: 41px;
-}
-
-.c17{
-    margin-left: -79px;
-    margin-top: -15px;
-}
-
-.loading .c18{
-    margin-left: 49px;
-    margin-top: -15px;
-}
-
-.loading .c19{
-    margin-left: -63px;
-    margin-top: -99px;
-}
-
-.loading .c20{
-    margin-left: 33px;
-    margin-top: -99px;
-}
-
-.loading .c21{
-    margin-left: 1px;
-    margin-top: -99px;
-}
-
-.loading .c22{
-    margin-left: -31px;
-    margin-top: -99px;
-}
-
-.loading .c23{
-    margin-left: -63px;
-    margin-top: 69px;
-}
-
-.loading .c24{
-    margin-left: 33px;
-    margin-top: 69px;
-}
-
-.loading .c25{
-    margin-left: 1px;
-    margin-top: 69px;
-}
-
-.loading .c26{
-    margin-left: -31px;
-    margin-top: 69px;
-}
-
-.loading .c27{
-    margin-left: -79px;
-    margin-top: -15px;
-}
-
-.loading .c28{
-    margin-left: -95px;
-    margin-top: -43px;
-}
-
-.loading .c29{
-    margin-left: -95px;
-    margin-top: 13px;
-}
-
-.loading .c30{
-    margin-left: 49px;
-    margin-top: 41px;
+    opacity: 0;
 }
 
-.loading .c31{
-    margin-left: -79px;
-    margin-top: -71px;
-}
-
-.loading .c32{
-    margin-left: -111px;
-    margin-top: -15px;
-}
-
-.loading .c33{
-    margin-left: 65px;
-    margin-top: -43px;
-}
-
-.loading .c34{
-    margin-left: 65px;
-    margin-top: 13px;
-}
-
-.loading .c35{
-    margin-left: -79px;
-    margin-top: 41px;
-}
-
-.loading .c36{
-    margin-left: 49px;
-    margin-top: -71px;
-}
-
-.loading .c37{
-    margin-left: 81px;
-    margin-top: -15px;
-}
-
-.loading .r1{
-    animation-name: pulse;
+.rotating {
+    animation-name: rotateThis;
     animation-duration: 2s;
     animation-iteration-count: infinite;
-    animation-delay: .2s;
-    -webkit-animation-name: pulse;
-    -webkit-animation-duration: 2s;
-    -webkit-animation-iteration-count: infinite;
-    -webkit-animation-delay: .2s;
-}
+    animation-timing-function: linear;
+    -moz-animation-name: rotateThis;
+    -moz-animation-duration: 2s;
+    -moz-animation-iteration-count: infinite;
+    -moz-animation-timing-function: linear;
+    -ms-animation-name: rotateThis;
+    -ms-animation-duration: 2s;
+    -ms-animation-iteration-count: infinite;
+    -ms-animation-timing-function: linear;
+    /* Chrome, at least in Linux, renders a horrible shaky mess -- better
+       not to bother.
 
-.loading .r2{
-    animation-name: pulse;
-    animation-duration: 2s;
-    animation-iteration-count: infinite;
-    animation-delay: .4s;
-    -webkit-animation-name: pulse;
-    -webkit-animation-duration: 2s;
-    -webkit-animation-iteration-count: infinite;
-    -webkit-animation-delay: .4s;
-}
-
-.loading .r3{
-    animation-name: pulse;
-    animation-duration: 2s;
-    animation-iteration-count: infinite;
-    animation-delay: .6s;
-    -webkit-animation-name: pulse;
-    -webkit-animation-duration: 2s;
-    -webkit-animation-iteration-count: infinite;
-    -webkit-animation-delay: .6s;
+      -webkit-animation-name: rotateThis;
+      -webkit-animation-duration: 2s;
+      -webkit-animation-iteration-count: infinite;
+      -webkit-animation-timing-function: linear;
+      */
 }
 
-.loading .r1 > .hex-brick{
-    animation-name: fade;
-    animation-duration: 2s;
-    animation-iteration-count: infinite;
-    animation-delay: .2s;
-    -webkit-animation-name: fade;
-    -webkit-animation-duration: 2s;
-    -webkit-animation-iteration-count: infinite;
-    -webkit-animation-delay: .2s;
-}
-
-.loading .r2 > .hex-brick{
-    animation-name: fade;
-    animation-duration: 2s;
-    animation-iteration-count: infinite;
-    animation-delay: .4s;
-    -webkit-animation-name: fade;
-    -webkit-animation-duration: 2s;
-    -webkit-animation-iteration-count: infinite;
-    -webkit-animation-delay: .4s;
-}
-
-.loading .r3 > .hex-brick{
-    animation-name: fade;
-    animation-duration: 2s;
-    animation-iteration-count: infinite;
-    animation-delay: .6s;
-    -webkit-animation-name: fade;
-    -webkit-animation-duration: 2s;
-    -webkit-animation-iteration-count: infinite;
-    -webkit-animation-delay: .6s;
-}
-
-
-@keyframes pulse{
-    0%{
-       -webkit-transform: scale(1);
-       transform: scale(1);
-    }
-    
-    50%{
-       -webkit-transform: scale(0.01);
-       transform: scale(0.01);
-    }
-    
-    100%{
-       -webkit-transform: scale(1);
-       transform: scale(1);
-    }
+@keyframes rotateThis {
+  from { transform: rotate( 0deg );   }
+  to   { transform: rotate( 360deg ); }
 }
 
-@keyframes fade{
-    0%{
-       background: #ABF8FF;
-    }
-    
-    50%{
-       background: #90BBBF;
-    }
-    
-    100%{
-       background: #ABF8FF;
-    }
+@-webkit-keyframes rotateThis {
+  from { -webkit-transform: rotate( 0deg );   }
+  to   { -webkit-transform: rotate( 360deg ); }
 }
 
-@-webkit-keyframes pulse{
-    0%{
-       -webkit-transform: scale(1);
-       transform: scale(1);
-    }
-    
-    50%{
-       -webkit-transform: scale(0.01);
-       transform: scale(0.01);
-    }
-    
-    100%{
-       -webkit-transform: scale(1);
-       transform: scale(1);
-    }
+@-moz-keyframes rotateThis {
+  from { -moz-transform: rotate( 0deg );   }
+  to   { -moz-transform: rotate( 360deg ); }
 }
 
-@-webkit-keyframes fade{
-    0%{
-       background: #ABF8FF;
-    }
-    
-    50%{
-       background: #389CA6;
-    }
-    
-    100%{
-       background: #ABF8FF;
-    }
+@-ms-keyframes rotateThis {
+  from { -ms-transform: rotate( 0deg );   }
+  to   { -ms-transform: rotate( 360deg ); }
 }

diff --git a/apps/workbench/app/views/layouts/application.html.erb b/apps/workbench/app/views/layouts/application.html.erb
index 30d454e831c4409e8397ee64ffb89dd83e6244cf..24991cd5eb8f0269ab5f760d22277789393ee819 100644 (file)
--- a/apps/workbench/app/views/layouts/application.html.erb
+++ b/apps/workbench/app/views/layouts/application.html.erb
@@ -114,13 +114,11 @@
   
       <ul class="nav navbar-nav navbar-right">
 
-        <% if current_user %>
         <li>
-          <div class="loading" style="transform: translate(-20px,20px) scale(0.1,0.1); -ms-transform: translate(-20px,20px) scale(0.1,0.1); -webkit-transform: translate(-20px,20px) scale(0.1,0.1); display: none">
-            <%= render partial: 'loading' %>
-          </div>
+          <a><i class="rotating loading glyphicon glyphicon-refresh"></i></a>
         </li>
 
+        <% if current_user %>
         <!-- XXX placeholder for this when search is implemented
         <li>
           <form class="navbar-form" role="search">
@@ -247,5 +245,6 @@
   <%= javascript_tag do %>
   <%= yield :footer_js %>
   <% end %>
+
 </body>
 </html>

diff --git a/apps/workbench/app/views/users/home.js.erb b/apps/workbench/app/views/users/home.js.erb
index 401c6b1b0be335c130e86b8b4d1772fec32b3b5d..b67a933b784ac435c79b6086b7bfd08ec6a84f55 100644 (file)
--- a/apps/workbench/app/views/users/home.js.erb
+++ b/apps/workbench/app/views/users/home.js.erb
@@ -1,4 +1,4 @@
 var new_content = "<%= escape_javascript(render partial: 'tables') %>";
 if ($('div#home-tables').html() != new_content)
    $('div#home-tables').html(new_content);
-$('.loading').hide();
+$(document).trigger('ajax:complete');