Added infinite scrolling.

app/assets/javascripts/app/controllers/agent_ticket_view.js.coffee

@@ -31,6 +31,7 @@ class Index extends App.Controller
 
   fetch: ->
 
+
     # get data
     @ajax = new App.Ajax
     @ajax.ajax(
@@ -68,7 +69,7 @@ class Index extends App.Controller
         @loadCollection( type: 'Ticket', data: data.tickets )
 
         # remember ticket order
-        @tickets = data.tickets
+        @tickets = @tickets.concat( data.tickets )
 
         # remember ticket count
         @tickets_count = data.tickets_count
@@ -87,6 +88,7 @@ class Index extends App.Controller
 
   render: ->
 
+    # get total pages
     pages_total =  parseInt( ( @tickets_count / @overview.view[@view_mode].per_page ) + 0.99999 ) || 1
 
     # render init page
@@ -111,7 +113,7 @@ class Index extends App.Controller
     )
     html = $(html)
 #    html.find('li').removeClass('active')
-    html.find("[data-id=\"#{@start_page}\"]").parents('li').addClass('active')
+#    html.find("[data-id=\"#{@start_page}\"]").parents('li').addClass('active')
     @html html
     
     # create table/overview
@@ -159,6 +161,15 @@ class Index extends App.Controller
         @el.find('.bulk-action').removeClass('hide')
     )
 
+    # set waypoint if not already at the end
+    if @start_page < pages_total
+      a = =>
+#        alert('You have scrolled to an entry.')
+        @start_page = @start_page + 1
+        @fetch()
+      
+      $('footer').waypoint( a, { offset: '120%', triggerOnce: true } )
+
   page: (e) =>
     e.preventDefault()
     id = $(e.target).data('id')

app/assets/javascripts/app/index.js.coffee

@@ -16,6 +16,7 @@
 #= require ./lib/ba-linkify.js
 #= require ./lib/jquery.tagsinput.js
 #= require ./lib/jquery.noty.js
+#= require ./lib/waypoints.js
 #= require ./lib/fileuploader.js
 
 #not_used= require_tree ./lib
@@ -159,28 +160,18 @@ class App.Run extends Spine.Controller
     # start content
     new App.Content( el: @el.find('#content') );
 
-#class App.Content extends Spine.Stack
 class App.Content extends Spine.Controller
   className: 'container'
 
   constructor: ->
-#    @controllers = {}
-#    @routes = {}
-#    @default = '/'
-#    for route, controller of Config.Routes
-##      @log 'route,controller', route, controller
-#      @controllers[route] = controller
-#      @routes[route] = route
-
     super
     @log 'RUN content'#, @
 
     for route, callback of Config.Routes
-#      @log 'route,controller', route#, controller
       do (route, callback) =>
         @route(route, (params) ->
-#          @log 'routing...', route
           Config['ActiveController'] = route
+          Spine.trigger( 'ws:send', JSON.stringify( { action: 'active_controller', controller: route, params: params } ) )
 
           # unbind in controller area
           @el.unbind()
@@ -194,11 +185,6 @@ class App.Content extends Spine.Controller
 #          window.scrollTo(0,0)
         )
 
-#    for name, object of Config.Controller
-##      @log 'new', object, @el
-#      new object( el: @el, auth: @auth )
-
     Spine.Route.setup()    
 
 window.App = App
-

app/assets/javascripts/app/lib/waypoints.js

@@ -0,0 +1,674 @@
+/*!
+jQuery Waypoints - v1.1.6
+Copyright (c) 2011-2012 Caleb Troughton
+Dual licensed under the MIT license and GPL license.
+https://github.com/imakewebthings/jquery-waypoints/blob/master/MIT-license.txt
+https://github.com/imakewebthings/jquery-waypoints/blob/master/GPL-license.txt
+*/
+
+/*
+Waypoints is a small jQuery plugin that makes it easy to execute a function
+whenever you scroll to an element.
+
+GitHub Repository: https://github.com/imakewebthings/jquery-waypoints
+Documentation and Examples: http://imakewebthings.github.com/jquery-waypoints
+
+Changelog:
+	v1.1.6
+		- Fix potential memory leak by unbinding events on empty context elements.
+	v1.1.5
+		- Make plugin compatible with Browserify/RequireJS. (Thanks @cjroebuck)
+	v1.1.4
+		- Add handler option to give alternate binding method. (Issue #34)
+	v1.1.3
+		- Fix cases where waypoints are added post-load and should be triggered
+		  immediately. (Issue #28)
+	v1.1.2
+		- Fixed error thrown by waypoints with triggerOnce option that were
+			triggered via resize refresh.
+	v1.1.1
+		- Fixed bug in initialization where all offsets were being calculated
+		  as if set to 0 initially, causing unwarranted triggers during the
+		  subsequent refresh.
+		- Added onlyOnScroll, an option for individual waypoints that disables
+		  triggers due to an offset refresh that crosses the current scroll
+		  point. (All credit to @knuton on this one.)
+	v1.1
+		- Moved the continuous option out of global settings and into the options
+		  object for individual waypoints.
+		- Added the context option, which allows for using waypoints within any
+		  scrollable element, not just the window.
+	v1.0.2
+		- Moved scroll and resize handler bindings out of load.  Should play nicer
+		  with async loaders like Head JS and LABjs.
+		- Fixed a 1px off error when using certain % offsets.
+		- Added unit tests.
+	v1.0.1
+		- Added $.waypoints('viewportHeight').
+		- Fixed iOS bug (using the new viewportHeight method).
+		- Added offset function alias: 'bottom-in-view'.
+	v1.0
+		- Initial release.
+	
+Support:
+	- jQuery versions 1.4.3+
+	- IE6+, FF3+, Chrome 6+, Safari 4+, Opera 11
+	- Other versions and browsers may work, these are just the ones I've looked at.
+*/
+
+(function($, wp, wps, window, undefined){
+	'$:nomunge';
+	
+	var $w = $(window),
+	
+	// Keeping common strings as variables = better minification
+	eventName = 'waypoint.reached',
+	
+	/*
+	For the waypoint and direction passed in, trigger the waypoint.reached
+	event and deal with the triggerOnce option.
+	*/
+	triggerWaypoint = function(way, dir) {
+		way.element.trigger(eventName, dir);
+		if (way.options.triggerOnce) {
+			way.element[wp]('destroy');
+		}
+	},
+	
+	/*
+	Given a jQuery element and Context, returns the index of that element in the waypoints
+	array.  Returns the index, or -1 if the element is not a waypoint.
+	*/
+	waypointIndex = function(el, context) {
+		if (!context) return -1;
+		var i = context.waypoints.length - 1;
+		while (i >= 0 && context.waypoints[i].element[0] !== el[0]) {
+			i -= 1;
+		}
+		return i;
+	},
+	
+	// Private list of all elements used as scrolling contexts for waypoints.
+	contexts = [],
+	
+	/*
+	Context Class - represents a scrolling context.  Properties include:
+		element: jQuery object containing a single HTML element.
+		waypoints: Array of waypoints operating under this scroll context.
+		oldScroll: Keeps the previous scroll position to determine scroll direction.
+		didScroll: Flag used in scrolling the context's scroll event.
+		didResize: Flag used in scrolling the context's resize event.
+		doScroll: Function that checks for crossed waypoints. Called from throttler.
+	*/
+	Context = function(context) {
+		$.extend(this, {
+			element: $(context),
+			oldScroll: 0,
+			
+			/*
+			List of all elements that have been registered as waypoints.
+			Each object in the array contains:
+				element: jQuery object containing a single HTML element.
+				offset: The window scroll offset, in px, that triggers the waypoint event.
+				options: Options object that was passed to the waypoint fn function.
+			*/
+			'waypoints': [],
+			
+			didScroll: false,
+			didResize: false,
+	
+			doScroll: $.proxy(function() {
+				var newScroll = this.element.scrollTop(),
+				
+				// Are we scrolling up or down? Used for direction argument in callback.
+				isDown = newScroll > this.oldScroll,
+				that = this,
+
+				// Get a list of all waypoints that were crossed since last scroll move.
+				pointsHit = $.grep(this.waypoints, function(el, i) {
+					return isDown ?
+						(el.offset > that.oldScroll && el.offset <= newScroll) :
+						(el.offset <= that.oldScroll && el.offset > newScroll);
+				}),
+				len = pointsHit.length;
+				
+				// iOS adjustment
+				if (!this.oldScroll || !newScroll) {
+					$[wps]('refresh');
+				}
+
+				// Done with scroll comparisons, store new scroll before ejection
+				this.oldScroll = newScroll;
+
+				// No waypoints crossed? Eject.
+				if (!len) return;
+
+				// If several waypoints triggered, need to do so in reverse order going up
+				if (!isDown) pointsHit.reverse();
+
+				/*
+				One scroll move may cross several waypoints.  If the waypoint's continuous
+				option is true it should fire even if it isn't the last waypoint.  If false,
+				it will only fire if it's the last one.
+				*/
+				$.each(pointsHit, function(i, point) {
+					if (point.options.continuous || i === len - 1) {
+						triggerWaypoint(point, [isDown ? 'down' : 'up']);
+					}
+				});
+			}, this)
+		});
+		
+		// Setup scroll and resize handlers.  Throttled at the settings-defined rate limits.
+		$(context).bind('scroll.waypoints', $.proxy(function() {
+			if (!this.didScroll) {
+				this.didScroll = true;
+				window.setTimeout($.proxy(function() {
+					this.doScroll();
+					this.didScroll = false;
+				}, this), $[wps].settings.scrollThrottle);
+			}
+		}, this)).bind('resize.waypoints', $.proxy(function() {
+			if (!this.didResize) {
+				this.didResize = true;
+				window.setTimeout($.proxy(function() {
+					$[wps]('refresh');
+					this.didResize = false;
+				}, this), $[wps].settings.resizeThrottle);
+			}
+		}, this));
+		
+		$w.load($.proxy(function() {
+			/*
+			Fire a scroll check, should the page be loaded at a non-zero scroll value,
+			as with a fragment id link or a page refresh.
+			*/
+			this.doScroll();
+		}, this));
+	},
+	
+	/* Returns a Context object from the contexts array, given the raw HTML element
+	for that context. */
+	getContextByElement = function(element) {
+		var found = null;
+		
+		$.each(contexts, function(i, c) {
+			if (c.element[0] === element) {
+				found = c;
+				return false;
+			}
+		});
+		
+		return found;
+	},
+	
+	// Methods exposed to the effin' object 
+	methods = {
+		/*
+		jQuery.fn.waypoint([handler], [options])
+		
+		handler
+			function, optional
+			A callback function called when the user scrolls past the element.
+			The function signature is function(event, direction) where event is
+			a standard jQuery Event Object and direction is a string, either 'down'
+			or 'up' indicating which direction the user is scrolling.
+			
+		options
+			object, optional
+			A map of options to apply to this set of waypoints, including where on
+			the browser window the waypoint is triggered. For a full list of
+			options and their defaults, see $.fn.waypoint.defaults.
+			
+		This is how you register an element as a waypoint. When the user scrolls past
+		that element it triggers waypoint.reached, a custom event. Since the
+		parameters for creating a waypoint are optional, we have a few different
+		possible signatures. Let’s look at each of them.
+
+		someElements.waypoint();
+			
+		Calling .waypoint with no parameters will register the elements as waypoints
+		using the default options. The elements will fire the waypoint.reached event,
+		but calling it in this way does not bind any handler to the event. You can
+		bind to the event yourself, as with any other event, like so:
+
+		someElements.bind('waypoint.reached', function(event, direction) {
+		   // make it rain
+		});
+			
+		You will usually want to create a waypoint and immediately bind a function to
+		waypoint.reached, and can do so by passing a handler as the first argument to
+		.waypoint:
+
+		someElements.waypoint(function(event, direction) {
+		   if (direction === 'down') {
+		      // do this on the way down
+		   }
+		   else {
+		      // do this on the way back up through the waypoint
+		   }
+		});
+			
+		This will still use the default options, which will trigger the waypoint when
+		the top of the element hits the top of the window. We can pass .waypoint an
+		options object to customize things:
+
+		someElements.waypoint(function(event, direction) {
+		   // do something amazing
+		}, {
+		   offset: '50%'  // middle of the page
+		});
+			
+		You can also pass just an options object.
+
+		someElements.waypoint({
+		   offset: 100  // 100px from the top
+		});
+			
+		This behaves like .waypoint(), in that it registers the elements as waypoints
+		but binds no event handlers.
+
+		Calling .waypoint on an existing waypoint will extend the previous options.
+		If the call includes a handler, it will be bound to waypoint.reached without
+		unbinding any other handlers.
+		*/
+		init: function(f, options) {
+			// Register each element as a waypoint, add to array.
+			this.each(function() {
+				var cElement = $.fn[wp].defaults.context,
+				context,
+				$this = $(this);
+
+				// Default window context or a specific element?
+				if (options && options.context) {
+					cElement = options.context;
+				}
+
+				// Find the closest element that matches the context
+				if (!$.isWindow(cElement)) {
+					cElement = $this.closest(cElement)[0];
+				}
+				context = getContextByElement(cElement);
+
+				// Not a context yet? Create and push.
+				if (!context) {
+					context = new Context(cElement);
+					contexts.push(context);
+				}
+				
+				// Extend default and preexisting options
+				var ndx = waypointIndex($this, context),
+				base = ndx < 0 ? $.fn[wp].defaults : context.waypoints[ndx].options,
+				opts = $.extend({}, base, options);
+				
+				// Offset aliases
+				opts.offset = opts.offset === "bottom-in-view" ?
+					function() {
+						var cHeight = $.isWindow(cElement) ? $[wps]('viewportHeight')
+							: $(cElement).height();
+						return cHeight - $(this).outerHeight();
+					} : opts.offset;
+
+				// Update, or create new waypoint
+				if (ndx < 0) {
+					context.waypoints.push({
+						'element': $this,
+						'offset': null,
+						'options': opts
+					});
+				}
+				else {
+					context.waypoints[ndx].options = opts;
+				}
+				
+				// Bind the function if it was passed in.
+				if (f) {
+					$this.bind(eventName, f);
+				}
+				// Bind the function in the handler option if it exists.
+				if (options && options.handler) {
+					$this.bind(eventName, options.handler);
+				}
+			});
+			
+			// Need to re-sort+refresh the waypoints array after new elements are added.
+			$[wps]('refresh');
+			
+			return this;
+		},
+		
+		
+		/*
+		jQuery.fn.waypoint('remove')
+		
+		Passing the string 'remove' to .waypoint unregisters the elements as waypoints
+		and wipes any custom options, but leaves the waypoint.reached events bound.
+		Calling .waypoint again in the future would reregister the waypoint and the old
+		handlers would continue to work.
+		*/
+		remove: function() {
+			return this.each(function(i, el) {
+				var $el = $(el);
+				
+				$.each(contexts, function(i, c) {
+					var ndx = waypointIndex($el, c);
+
+					if (ndx >= 0) {
+						c.waypoints.splice(ndx, 1);
+
+						if (!c.waypoints.length) {
+							c.element.unbind('scroll.waypoints resize.waypoints');
+							contexts.splice(i, 1);
+						}
+					}
+				});
+			});
+		},
+		
+		/*
+		jQuery.fn.waypoint('destroy')
+		
+		Passing the string 'destroy' to .waypoint will unbind all waypoint.reached
+		event handlers on those elements and unregisters them as waypoints.
+		*/
+		destroy: function() {
+			return this.unbind(eventName)[wp]('remove');
+		}
+	},
+	
+	/*
+	Methods used by the jQuery object extension.
+	*/
+	jQMethods = {
+		
+		/*
+		jQuery.waypoints('refresh')
+		
+		This will force a recalculation of each waypoint’s trigger point based on
+		its offset option and context. This is called automatically whenever the window
+		(or other defined context) is resized, new waypoints are added, or a waypoint’s
+		options are modified. If your project is changing the DOM or page layout without
+		doing one of these things, you may want to manually call this refresh.
+		*/
+		refresh: function() {
+			$.each(contexts, function(i, c) {
+				var isWin = $.isWindow(c.element[0]),
+				contextOffset = isWin ? 0 : c.element.offset().top,
+				contextHeight = isWin ? $[wps]('viewportHeight') : c.element.height(),
+				contextScroll = isWin ? 0 : c.element.scrollTop();
+				
+				$.each(c.waypoints, function(j, o) {
+					/* $.each isn't safe from element removal due to triggerOnce.
+					Should rewrite the loop but this is way easier. */
+					if (!o) return;
+
+					// Adjustment is just the offset if it's a px value
+					var adjustment = o.options.offset,
+					oldOffset = o.offset;
+					
+					// Set adjustment to the return value if offset is a function.
+					if (typeof o.options.offset === "function") {
+						adjustment = o.options.offset.apply(o.element);
+					}
+					// Calculate the adjustment if offset is a percentage.
+					else if (typeof o.options.offset === "string") {
+						var amount = parseFloat(o.options.offset);
+						adjustment = o.options.offset.indexOf("%") ?
+							Math.ceil(contextHeight * (amount / 100)) : amount;
+					}
+
+					/* 
+					Set the element offset to the window scroll offset, less
+					all our adjustments.
+					*/
+					o.offset = o.element.offset().top - contextOffset
+						+ contextScroll - adjustment;
+
+					/*
+					An element offset change across the current scroll point triggers
+					the event, just as if we scrolled past it unless prevented by an
+					optional flag.
+					*/
+					if (o.options.onlyOnScroll) return;
+
+					if (oldOffset !== null && c.oldScroll > oldOffset && c.oldScroll <= o.offset) {
+						triggerWaypoint(o, ['up']);
+					}
+					else if (oldOffset !== null && c.oldScroll < oldOffset && c.oldScroll >= o.offset) {
+						triggerWaypoint(o, ['down']);
+					}
+					/* For new waypoints added after load, check that down should have
+					already been triggered */
+					else if (!oldOffset && c.element.scrollTop() > o.offset) {
+						triggerWaypoint(o, ['down']);
+					}
+				});
+				
+				// Keep waypoints sorted by offset value.
+				c.waypoints.sort(function(a, b) {
+					return a.offset - b.offset;
+				});
+			});
+		},
+		
+		
+		/*
+		jQuery.waypoints('viewportHeight')
+		
+		This will return the height of the viewport, adjusting for inconsistencies
+		that come with calling $(window).height() in iOS. Recommended for use
+		within any offset functions.
+		*/
+		viewportHeight: function() {
+			return (window.innerHeight ? window.innerHeight : $w.height());
+		},
+		
+		
+		/*
+		jQuery.waypoints()
+		
+		This will return a jQuery object with a collection of all registered waypoint
+		elements.
+
+		$('.post').waypoint();
+		$('.ad-unit').waypoint(function(event, direction) {
+		   // Passed an ad unit
+		});
+		console.log($.waypoints());
+		
+		The example above would log a jQuery object containing all .post and .ad-unit
+		elements.
+		*/
+		aggregate: function() {
+			var points = $();
+			$.each(contexts, function(i, c) {
+				$.each(c.waypoints, function(i, e) {
+					points = points.add(e.element);
+				});
+			});
+			return points;
+		}
+	};
+
+	
+	/*
+	fn extension.  Delegates to appropriate method.
+	*/
+	$.fn[wp] = function(method) {
+		
+		if (methods[method]) {
+			return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
+		}
+		else if (typeof method === "function" || !method) {
+			return methods.init.apply(this, arguments);
+		}
+		else if (typeof method === "object") {
+			return methods.init.apply(this, [null, method]);
+		}
+		else {
+			$.error( 'Method ' + method + ' does not exist on jQuery ' + wp );
+		}
+	};
+	
+	
+	/*
+	The default options object that is extended when calling .waypoint. It has the
+	following properties:
+	
+	context
+		string | element | jQuery*
+		default: window
+		The context defines which scrollable element the waypoint belongs to and acts
+		within. The default, window, means the waypoint offset is calculated with relation
+		to the whole viewport.  You can set this to another element to use the waypoints
+		within that element.  Accepts a selector string, *but if you use jQuery 1.6+ it
+		also accepts a raw HTML element or jQuery object.
+	
+	continuous
+		boolean
+		default: true
+		If true, and multiple waypoints are triggered in one scroll, this waypoint will
+		trigger even if it is not the last waypoint reached.  If false, it will only
+		trigger if it is the last waypoint.
+		
+	handler
+		function
+		default: undefined
+		An alternative way to bind functions to the waypoint, without using the function
+		as the first argument to the waypoint function.
+
+	offset
+		number | string | function
+		default: 0
+		Determines how far the top of the element must be from the top of the browser
+		window to trigger a waypoint. It can be a number, which is taken as a number
+		of pixels, a string representing a percentage of the viewport height, or a
+		function that will return a number of pixels.
+		
+	onlyOnScroll
+		boolean
+		default: false
+		If true, this waypoint will not trigger if an offset change during a refresh
+		causes it to pass the current scroll point.
+		
+	triggerOnce
+		boolean
+		default: false
+		If true, the waypoint will be destroyed when triggered.
+	
+	An offset of 250 would trigger the waypoint when the top of the element is 250px
+	from the top of the viewport. Negative values for any offset work as you might
+	expect. A value of -100 would trigger the waypoint when the element is 100px above
+	the top of the window.
+
+	offset: '100%'
+	
+	A string percentage will determine the pixel offset based on the height of the
+	window. When resizing the window, this offset will automatically be recalculated
+	without needing to call $.waypoints('refresh').
+
+	// The bottom of the element is in view
+	offset: function() {
+	   return $.waypoints('viewportHeight') - $(this).outerHeight();
+	}
+	
+	Offset can take a function, which must return a number of pixels from the top of
+	the window. The this value will always refer to the raw HTML element of the
+	waypoint. As with % values, functions are recalculated automatically when the
+	window resizes. For more on recalculating offsets, see $.waypoints('refresh').
+	
+	An offset value of 'bottom-in-view' will act as an alias for the function in the
+	example above, as this is a common usage.
+	
+	offset: 'bottom-in-view'
+	
+	You can see this alias in use on the Scroll Analytics example page.
+
+	The triggerOnce flag, if true, will destroy the waypoint after the first trigger.
+	This is just a shortcut for calling .waypoint('destroy') within the waypoint
+	handler. This is useful in situations such as scroll analytics, where you only
+	want to record an event once for each page visit.
+	
+	The context option lets you use Waypoints within an element other than the window.
+	You can define the context with a selector string and the waypoint will act within
+	the nearest ancestor that matches this selector.
+	
+	$('.something-scrollable .waypoint').waypoint({
+	   context: '.something-scrollable'
+	});
+	
+	You can see this in action on the Dial Controls example.
+	
+	The handler option gives authors an alternative way to bind functions when
+	creating a waypoint.  In place of:
+	
+	$('.item').waypoint(function(event, direction) {
+	   // make things happen
+	});
+	
+	You may instead write:
+	
+	$('.item').waypoint({
+	   handler: function(event, direction) {
+	      // make things happen
+	   }
+	});
+	
+	*/
+	$.fn[wp].defaults = {
+		continuous: true,
+		offset: 0,
+		triggerOnce: false,
+		context: window
+	};
+	
+	
+	
+	
+	
+	/*
+	jQuery object extension. Delegates to appropriate methods above.
+	*/
+	$[wps] = function(method) {
+		if (jQMethods[method]) {
+			return jQMethods[method].apply(this);
+		}
+		else {
+			return jQMethods['aggregate']();
+		}
+	};
+	
+	
+	/*
+	$.waypoints.settings
+	
+	Settings object that determines some of the plugin’s behavior.
+		
+	resizeThrottle
+		number
+		default: 200
+		For performance reasons, the refresh performed during resizes is
+		throttled. This value is the rate-limit in milliseconds between resize
+		refreshes. For more information on throttling, check out Ben Alman’s
+		throttle / debounce plugin.
+		http://benalman.com/projects/jquery-throttle-debounce-plugin/
+		
+	scrollThrottle
+		number
+		default: 100
+		For performance reasons, checking for any crossed waypoints during a
+		scroll event is throttled. This value is the rate-limit in milliseconds
+		between scroll checks. For more information on throttling, check out Ben
+		Alman’s throttle / debounce plugin.
+		http://benalman.com/projects/jquery-throttle-debounce-plugin/
+	*/
+	$[wps].settings = {
+		resizeThrottle: 200,
+		scrollThrottle: 100
+	};
+	
+	$w.load(function() {
+		// Calculate everything once on load.
+		$[wps]('refresh');
+	});
+})(jQuery, 'waypoint', 'waypoints', window);

app/assets/javascripts/app/views/agent_ticket_view.jst.eco

@@ -1,7 +1,22 @@
 <div class="page-header">
+  <div class="row">
+    <div class="span6">
       <h1><%- @overview.meta.name %> <small><a href="#" data-type="settings" class="icon-edit"></a></small></h1>
     </div>
-
+    <div class="span6">
+      <div class="pagination keepright">
+        <ul>
+          <% for item in @view_modes: %>
+            <li class="<%= item.class %>">
+              <a href="#" data-type="view-mode" data-mode="<%= item.type %>"><%= item.name %></a>
+            </li>
+          <% end %>
+        </ul>
+      </div>
+    </div>
+  </div>
+</div>
+<!--
   <div class="pagination keepleft">
     <ul>
       <% if @start_page != 1: %>
@@ -17,16 +32,7 @@
       <% end %>
     </ul>
   </div>
-
+-->
-  <div class="pagination keepright">
-    <ul>
-      <% for item in @view_modes: %>
-        <li class="<%= item.class %>">
-          <a href="#" data-type="view-mode" data-mode="<%= item.type %>"><%= item.name %></a>
-        </li>
-      <% end %>
-    </ul>
-  </div>
 
 <div class="row">
   <div class="span12 table-overview"></div>