moved paginator progress bar into paginator block, better mobile handling, and hiding it on page load

public/src/ajaxify.js

@@ -29,7 +29,7 @@ var ajaxify = {};
 		}
 	};
 
-	var pagination;
+	var pagination, paginator_bar;
 
 	ajaxify.go = function (url, callback, template, quiet) {
 		// start: the following should be set like so: ajaxify.onchange(function(){}); where the code actually belongs
@@ -37,8 +37,10 @@ var ajaxify = {};
 		app.enterRoom('global');
 
 		pagination = pagination || document.getElementById('pagination');
+		paginator_bar = pagination ? document.body.querySelector('.progress-container') : undefined;
 		if (pagination) {
 			pagination.parentNode.style.display = 'none';
+			paginator_bar.style.display = 'none';
 		}
 
 		window.onscroll = null;

public/src/forum/topic.js

@@ -789,12 +789,14 @@ define(function() {
 			}
 			pagination = pagination || document.getElementById('pagination');
 
-			pagination.parentNode.style.display = 'block';
-
 			var windowHeight = jQuery(window).height();
 			var scrollTop = jQuery(window).scrollTop();
 			var scrollBottom = scrollTop + windowHeight;
 			var progressBar = $('.progress-bar');
+			var	progressBarContainer = $('.progress-container');
+
+			pagination.parentNode.style.display = 'block';
+			progressBarContainer.css('display', '');
 
 			if (scrollTop < 50 && Topic.postCount > 1) {
 				localStorage.removeItem("topic:" + tid + ":bookmark");

public/templates/header.tpl

@@ -140,10 +140,10 @@
 							<i class="fa fa-chevron-up pointer"></i>
 							<span id="pagination"></span>
 							<i class="fa fa-chevron-down pointer"></i>
-						</a>
 							<div class="progress-container">
 								<div class="progress-bar"></div>
 							</div>
+						</a>
 					</li>
 				</ul>
 			</div>