Added spinner for pjax notice pagination

Nathan Broadbent
1 parent b264ce02
Showing 4 changed files with 13 additions and 0 deletions Show diff stats
app/views/errs/show.html.haml
public/images/loader.gif
public/javascripts/application.js
public/stylesheets/application.css
@@ -45,6 +45,7 @@
  
 = will_paginate @notices, :param_name => :notice, :page_links => false, :class => 'notice-pagination'
 viewing occurrence #{@notices.current_page} of #{@notices.total_pages}
+.notice-pagination-loader= image_tag 'loader.gif'
  
 .tab-bar
   %ul
@@ -37,6 +37,7 @@ $(function() {
     $('.notice-pagination').each(function() {
       $('.notice-pagination a').pjax('#content', { timeout: 2000});
       $('#content').bind('pjax:start',  function() {
+	$('.notice-pagination-loader').css("visibility", "visible");
         currentTab = $('.tab-bar ul li a.button.active').attr('rel');
       });
  
@@ -462,6 +462,7 @@ pre {
   font-weight: bold;
 }
  
+
 /* Buttons */
 input[type="submit"].button,
 a.button {
@@ -674,8 +675,18 @@ table.deploys td.when {
 /* Notices Pagination */
 .notice-pagination {
   float: left;
+  margin-right: 10px;
+}
+
+.notice-pagination-loader {
+  visibility: hidden;
+  float: left;
   margin-right: 2em;
 }
+.notice-pagination-loader img {
+  vertical-align: middle
+}
+
  
 /* Backtrace */
 .window {
...	...	@@ -45,6 +45,7 @@
45	45
46	46	= will_paginate @notices, :param_name => :notice, :page_links => false, :class => 'notice-pagination'
47	47	viewing occurrence #{@notices.current_page} of #{@notices.total_pages}
	48	+.notice-pagination-loader= image_tag 'loader.gif'
48	49
49	50	.tab-bar
50	51	%ul
...	...
...	...	@@ -37,6 +37,7 @@ $(function() {
37	37	$('.notice-pagination').each(function() {
38	38	$('.notice-pagination a').pjax('#content', { timeout: 2000});
39	39	$('#content').bind('pjax:start', function() {
	40	+ $('.notice-pagination-loader').css("visibility", "visible");
40	41	currentTab = $('.tab-bar ul li a.button.active').attr('rel');
41	42	});
42	43
...	...
...	...	@@ -462,6 +462,7 @@ pre {
462	462	font-weight: bold;
463	463	}
464	464
	465	+
465	466	/* Buttons */
466	467	input[type="submit"].button,
467	468	a.button {
...	...	@@ -674,8 +675,18 @@ table.deploys td.when {
674	675	/* Notices Pagination */
675	676	.notice-pagination {
676	677	float: left;
	678	+ margin-right: 10px;
	679	+}
	680	+
	681	+.notice-pagination-loader {
	682	+ visibility: hidden;
	683	+ float: left;
677	684	margin-right: 2em;
678	685	}
	686	+.notice-pagination-loader img {
	687	+ vertical-align: middle
	688	+}
	689	+
679	690
680	691	/* Backtrace */
681	692	.window {
...	...