[ARVADOS] updated: 19552d4ecd7552ab5dfdfc6d894b22dce6b7f107
git at public.curoverse.com
git at public.curoverse.com
Mon Feb 3 11:02:27 EST 2014
Summary of changes:
.../app/assets/javascripts/application.js | 7 +
apps/workbench/app/assets/stylesheets/loading.css | 374 ++++++++++++++++++++
.../app/views/application/_loading.html.erb | 190 ++++++++++
.../app/views/layouts/application.html.erb | 5 +
4 files changed, 576 insertions(+), 0 deletions(-)
create mode 100644 apps/workbench/app/assets/stylesheets/loading.css
create mode 100644 apps/workbench/app/views/application/_loading.html.erb
via 19552d4ecd7552ab5dfdfc6d894b22dce6b7f107 (commit)
from 18c60ea458cb2a97c9d7318e702da8296e102466 (commit)
Those revisions listed above that are new to this repository have
not appeared on any other notification email; so we list those
revisions in full, below.
commit 19552d4ecd7552ab5dfdfc6d894b22dce6b7f107
Author: Tom Clegg <tom at curoverse.com>
Date: Mon Feb 3 08:01:19 2014 -0800
Show "loading" indicator in nav bar while waiting for AJAX requests.
refs #1976
closes #2040
diff --git a/apps/workbench/app/assets/javascripts/application.js b/apps/workbench/app/assets/javascripts/application.js
index f474fc3..8bd556b 100644
--- a/apps/workbench/app/assets/javascripts/application.js
+++ b/apps/workbench/app/assets/javascripts/application.js
@@ -37,4 +37,11 @@ jQuery(function($){
}
targets.fadeToggle(200);
});
+ $(document).
+ on('ajax:send', function(e, xhr) {
+ $('.loading').show();
+ }).
+ on('ajax:complete', function(e, status) {
+ $('.loading').hide();
+ });
})(jQuery);
diff --git a/apps/workbench/app/assets/stylesheets/loading.css b/apps/workbench/app/assets/stylesheets/loading.css
new file mode 100644
index 0000000..a6c208b
--- /dev/null
+++ b/apps/workbench/app/assets/stylesheets/loading.css
@@ -0,0 +1,374 @@
+// 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;
+}
+
+.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;
+ 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;
+}
+
+.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;
+}
+
+.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;
+}
+
+
+ at 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);
+ }
+}
+
+ at keyframes fade{
+ 0%{
+ background: #ABF8FF;
+ }
+
+ 50%{
+ background: #90BBBF;
+ }
+
+ 100%{
+ background: #ABF8FF;
+ }
+}
+
+ at -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);
+ }
+}
+
+ at -webkit-keyframes fade{
+ 0%{
+ background: #ABF8FF;
+ }
+
+ 50%{
+ background: #389CA6;
+ }
+
+ 100%{
+ background: #ABF8FF;
+ }
+}
diff --git a/apps/workbench/app/views/application/_loading.html.erb b/apps/workbench/app/views/application/_loading.html.erb
new file mode 100644
index 0000000..870abaf
--- /dev/null
+++ b/apps/workbench/app/views/application/_loading.html.erb
@@ -0,0 +1,190 @@
+<div class="socket">
+ <div class="gel center-gel">
+ <div class="hex-brick h1"></div>
+ <div class="hex-brick h2"></div>
+ <div class="hex-brick h3"></div>
+ </div>
+ <div class="gel c1 r1">
+ <div class="hex-brick h1"></div>
+ <div class="hex-brick h2"></div>
+ <div class="hex-brick h3"></div>
+ </div>
+ <div class="gel c2 r1">
+ <div class="hex-brick h1"></div>
+ <div class="hex-brick h2"></div>
+ <div class="hex-brick h3"></div>
+ </div>
+ <div class="gel c3 r1">
+ <div class="hex-brick h1"></div>
+ <div class="hex-brick h2"></div>
+ <div class="hex-brick h3"></div>
+ </div>
+ <div class="gel c4 r1">
+ <div class="hex-brick h1"></div>
+ <div class="hex-brick h2"></div>
+ <div class="hex-brick h3"></div>
+ </div>
+ <div class="gel c5 r1">
+ <div class="hex-brick h1"></div>
+ <div class="hex-brick h2"></div>
+ <div class="hex-brick h3"></div>
+ </div>
+ <div class="gel c6 r1">
+ <div class="hex-brick h1"></div>
+ <div class="hex-brick h2"></div>
+ <div class="hex-brick h3"></div>
+ </div>
+
+ <div class="gel c7 r2">
+ <div class="hex-brick h1"></div>
+ <div class="hex-brick h2"></div>
+ <div class="hex-brick h3"></div>
+ </div>
+
+ <div class="gel c8 r2">
+ <div class="hex-brick h1"></div>
+ <div class="hex-brick h2"></div>
+ <div class="hex-brick h3"></div>
+ </div>
+ <div class="gel c9 r2">
+ <div class="hex-brick h1"></div>
+ <div class="hex-brick h2"></div>
+ <div class="hex-brick h3"></div>
+ </div>
+ <div class="gel c10 r2">
+ <div class="hex-brick h1"></div>
+ <div class="hex-brick h2"></div>
+ <div class="hex-brick h3"></div>
+ </div>
+ <div class="gel c11 r2">
+ <div class="hex-brick h1"></div>
+ <div class="hex-brick h2"></div>
+ <div class="hex-brick h3"></div>
+ </div>
+ <div class="gel c12 r2">
+ <div class="hex-brick h1"></div>
+ <div class="hex-brick h2"></div>
+ <div class="hex-brick h3"></div>
+ </div>
+ <div class="gel c13 r2">
+ <div class="hex-brick h1"></div>
+ <div class="hex-brick h2"></div>
+ <div class="hex-brick h3"></div>
+ </div>
+ <div class="gel c14 r2">
+ <div class="hex-brick h1"></div>
+ <div class="hex-brick h2"></div>
+ <div class="hex-brick h3"></div>
+ </div>
+ <div class="gel c15 r2">
+ <div class="hex-brick h1"></div>
+ <div class="hex-brick h2"></div>
+ <div class="hex-brick h3"></div>
+ </div>
+ <div class="gel c16 r2">
+ <div class="hex-brick h1"></div>
+ <div class="hex-brick h2"></div>
+ <div class="hex-brick h3"></div>
+ </div>
+ <div class="gel c17 r2">
+ <div class="hex-brick h1"></div>
+ <div class="hex-brick h2"></div>
+ <div class="hex-brick h3"></div>
+ </div>
+ <div class="gel c18 r2">
+ <div class="hex-brick h1"></div>
+ <div class="hex-brick h2"></div>
+ <div class="hex-brick h3"></div>
+ </div>
+ <div class="gel c19 r3">
+ <div class="hex-brick h1"></div>
+ <div class="hex-brick h2"></div>
+ <div class="hex-brick h3"></div>
+ </div>
+ <div class="gel c20 r3">
+ <div class="hex-brick h1"></div>
+ <div class="hex-brick h2"></div>
+ <div class="hex-brick h3"></div>
+ </div>
+ <div class="gel c21 r3">
+ <div class="hex-brick h1"></div>
+ <div class="hex-brick h2"></div>
+ <div class="hex-brick h3"></div>
+ </div>
+ <div class="gel c22 r3">
+ <div class="hex-brick h1"></div>
+ <div class="hex-brick h2"></div>
+ <div class="hex-brick h3"></div>
+ </div>
+ <div class="gel c23 r3">
+ <div class="hex-brick h1"></div>
+ <div class="hex-brick h2"></div>
+ <div class="hex-brick h3"></div>
+ </div>
+ <div class="gel c24 r3">
+ <div class="hex-brick h1"></div>
+ <div class="hex-brick h2"></div>
+ <div class="hex-brick h3"></div>
+ </div>
+ <div class="gel c25 r3">
+ <div class="hex-brick h1"></div>
+ <div class="hex-brick h2"></div>
+ <div class="hex-brick h3"></div>
+ </div>
+ <div class="gel c26 r3">
+ <div class="hex-brick h1"></div>
+ <div class="hex-brick h2"></div>
+ <div class="hex-brick h3"></div>
+ </div>
+ <div class="gel c28 r3">
+ <div class="hex-brick h1"></div>
+ <div class="hex-brick h2"></div>
+ <div class="hex-brick h3"></div>
+ </div>
+ <div class="gel c29 r3">
+ <div class="hex-brick h1"></div>
+ <div class="hex-brick h2"></div>
+ <div class="hex-brick h3"></div>
+ </div>
+ <div class="gel c30 r3">
+ <div class="hex-brick h1"></div>
+ <div class="hex-brick h2"></div>
+ <div class="hex-brick h3"></div>
+ </div>
+ <div class="gel c31 r3">
+ <div class="hex-brick h1"></div>
+ <div class="hex-brick h2"></div>
+ <div class="hex-brick h3"></div>
+ </div>
+ <div class="gel c32 r3">
+ <div class="hex-brick h1"></div>
+ <div class="hex-brick h2"></div>
+ <div class="hex-brick h3"></div>
+ </div>
+ <div class="gel c33 r3">
+ <div class="hex-brick h1"></div>
+ <div class="hex-brick h2"></div>
+ <div class="hex-brick h3"></div>
+ </div>
+ <div class="gel c34 r3">
+ <div class="hex-brick h1"></div>
+ <div class="hex-brick h2"></div>
+ <div class="hex-brick h3"></div>
+ </div>
+ <div class="gel c35 r3">
+ <div class="hex-brick h1"></div>
+ <div class="hex-brick h2"></div>
+ <div class="hex-brick h3"></div>
+ </div>
+ <div class="gel c36 r3">
+ <div class="hex-brick h1"></div>
+ <div class="hex-brick h2"></div>
+ <div class="hex-brick h3"></div>
+ </div>
+ <div class="gel c37 r3">
+ <div class="hex-brick h1"></div>
+ <div class="hex-brick h2"></div>
+ <div class="hex-brick h3"></div>
+ </div>
+
+</div>
diff --git a/apps/workbench/app/views/layouts/application.html.erb b/apps/workbench/app/views/layouts/application.html.erb
index 9af00d5..4a0528b 100644
--- a/apps/workbench/app/views/layouts/application.html.erb
+++ b/apps/workbench/app/views/layouts/application.html.erb
@@ -37,6 +37,11 @@
<a class="brand" style="margin-left: 1px" href="/"><%= Rails.configuration.site_name rescue Rails.application.class.parent_name %></a>
<ul class="nav pull-right">
+ <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>
+ </li>
<% if current_user -%>
<li><span class="badge badge-info" style="margin: 10px auto 10px; padding-top: 4px; padding-bottom: 4px"><%= current_user.email %></span></li>
<li><a href="<%= logout_path %>">Log out</a></li>
-----------------------------------------------------------------------
hooks/post-receive
--
More information about the arvados-commits
mailing list