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,6 +45,7 @@
45		45
46	= will_paginate @notices, :param_name => :notice, :page_links => false, :class => 'notice-pagination'	46	= will_paginate @notices, :param_name => :notice, :page_links => false, :class => 'notice-pagination'
47	viewing occurrence #{@notices.current_page} of #{@notices.total_pages}	47	viewing occurrence #{@notices.current_page} of #{@notices.total_pages}
		48	+.notice-pagination-loader= image_tag 'loader.gif'
48		49
49	.tab-bar	50	.tab-bar
50	%ul	51	%ul
	@@ -37,6 +37,7 @@ $(function() {		@@ -37,6 +37,7 @@ $(function() {
37	$('.notice-pagination').each(function() {	37	$('.notice-pagination').each(function() {
38	$('.notice-pagination a').pjax('#content', { timeout: 2000});	38	$('.notice-pagination a').pjax('#content', { timeout: 2000});
39	$('#content').bind('pjax:start', function() {	39	$('#content').bind('pjax:start', function() {
		40	+ $('.notice-pagination-loader').css("visibility", "visible");
40	currentTab = $('.tab-bar ul li a.button.active').attr('rel');	41	currentTab = $('.tab-bar ul li a.button.active').attr('rel');
41	});	42	});
42		43