Lots of style fixes

res/static/script/ListNavigator.js

@@ -67,13 +67,13 @@ var ListNavigator = {
 
 		this.addToHistory(index);
 
-		$("#listNavigatorItems").find("*").css("border-color", "#333");
-		$("#listNavigatorItems div").eq(this.position).css("border-color", "#fff");
+		$("#listNavigatorItems").find("*").removeClass("list_item_selected");
+		$("#listNavigatorItems div").eq(this.position).addClass("list_item_selected");
 
 		// This centers the scroll bar exactly on the selected item
 		$("#listNavigatorItems").animate(
 			{
-				scrollLeft: (this.position * 109) - (($("#listNavigatorItems").width() / 2) - 55)
+				scrollLeft: ((this.position * 109) + (109/2)) - ($("#listNavigator").width() / 2)
 			}, {
 				duration: 1000,
 				queue: false
@@ -110,8 +110,8 @@ var ListNavigator = {
 	},
 
 	loadThumbnails: function(index){
-		var startPos = +index - 30;
-		var endPos = +index + 30;
+		var startPos = +index - 50;
+		var endPos = +index + 50;
 		// fyi, the + is to let javascript know it's actually a number instead of a string
 
 		if(startPos < 0){
@@ -126,12 +126,17 @@ var ListNavigator = {
 		var navigatorItems = document.getElementById("listNavigatorItems").children
 
 		for (i = startPos; i <= endPos; i++){
+			if (navigatorItems[i].innerHTML.includes("listItemThumbnail")) {
+				console.log("skip");
+				continue;
+			}
+
 			var thumb = "/api/file/" + this.data[i].id + "/thumbnail";
 			var name = this.data[i].name;
 
 			var itemHtml = escapeHTML(name) + "<br>"
 				+ "<img src=\"" + thumb + "\" "
-				+ "class=\"listItemThumbnail lazy\" alt=\"" + escapeHTML(name) + "\"/>";
+				+ "class=\"listItemThumbnail\" alt=\"" + escapeHTML(name) + "\"/>";
 
 			navigatorItems[i].innerHTML = itemHtml;
 		}
@@ -165,6 +170,22 @@ var ListNavigator = {
 			this.setItem(0);
 		}
 
+		var btnLastItem = document.createElement("button");
+		btnLastItem.innerText = "◀";
+		btnLastItem.setAttribute("id", "button_last_item");
+		btnLastItem.setAttribute("class", "button_highlight");
+		btnLastItem.setAttribute("onClick", "ListNavigator.previousItem();");
+
+		var btnNextItem = document.createElement("button");
+		btnNextItem.innerText = "▶";
+		btnNextItem.setAttribute("id", "button_next_item");
+		btnNextItem.setAttribute("class", "button_highlight");
+		btnNextItem.setAttribute("onClick", "ListNavigator.nextItem();");
+
+		var headerbar = document.getElementById("list_navigator_buttons");
+		headerbar.appendChild(btnLastItem);
+		headerbar.appendChild(btnNextItem);
+
 		// Add the list download button to the toolbar
 		var btnDownloadList = document.createElement("button");
 		btnDownloadList.setAttribute("id", "btnDownloadList");
@@ -199,16 +220,8 @@ var ListNavigator = {
 		btnShuffle.appendChild(btnShuffleText);
 		document.getElementById("btnShare").after(btnShuffle);
 
-		// We need to adjust the height of some elements to make the navigation bar fit
-		var navHeight = $("#listNavigator").height() + 2;
-
-		window.setTimeout(function(){
-			document.getElementById("listNavigator").style.top         = "0px";
-			document.getElementById("filepreview").style.top           = navHeight+"px";
-			document.getElementById("toolbar").style.top               = navHeight+"px";
-			document.getElementById("button-expand-toolbar").style.top = navHeight+"px";
-			document.getElementById("sharebar").style.top              = navHeight+"px";
-		}, 200);
+		// Make the navigator visible
+		document.getElementById("listNavigator").style.display = "inline-block";
 	}
 };
 

res/static/script/Toolbar.js

@@ -9,7 +9,7 @@
 /* global Viewer */
 
 var Toolbar = {
-	visible: true,
+	visible: false,
 	toggle: function () {
 		if (this.visible) {
 			if (Sharebar.visible) {
@@ -18,11 +18,13 @@ var Toolbar = {
 
 			document.getElementById("toolbar").style.left = "-9em";
 			document.getElementById("filepreview").style.left = "0px";
+			document.getElementById("button_toggle_toolbar").classList.remove("button_highlight");
 
 			this.visible = false;
 		} else {
 			document.getElementById("toolbar").style.left = "0px";
 			document.getElementById("filepreview").style.left = "8em";
+			document.getElementById("button_toggle_toolbar").classList.add("button_highlight");
 
 			this.visible = true;
 		}

res/static/script/Viewer.js

@@ -14,7 +14,7 @@ var Viewer = {
 		}
 
 		// On small screens the toolbar takes too much space, so it collapses automatically
-		if($("#filepreview").width() < 400 && Toolbar.visible){
+		if($("#filepreview").width() > 400 && !Toolbar.visible){
 			Toolbar.toggle();
 		}
 
@@ -34,7 +34,14 @@ var Viewer = {
 	},
 	setFile: function(file){
 		this.currentFile = file.id;
-		document.title = file.name + " ~ PixelDrain";
+		var title = "";
+		if (this.isList) {
+			title = this.title + " ~ " + file.name;
+		} else {
+			title = file.name;
+		}
+		document.title = title + " ~ PixelDrain";
+		document.getElementById("file_viewer_headerbar_title").innerText = title;
 
 		$.get("/u/" + file.id + "/preview", function(response){
 			$("#filepreview").html(response);