File viewer fixes

res/static/script/Keyboard.js

@@ -1,37 +0,0 @@
-/* global ListNavigator, Toolbar */
-
-$(document).keydown(function(event){
-	if (event.ctrlKey || event.altKey) {
-		return // prevent custom shortcuts from interfering with system shortcuts
-	}
-
-	switch (event.which) {
-	case 65: // A or left arrow key go to previous file
-	case 37:
-		ListNavigator.previousItem();
-		break;
-	case 68: // D or right arrow key go to next file
-	case 39:
-		ListNavigator.nextItem();
-		break;
-	case 83: 
-		if (event.shiftKey) {
-			Toolbar.downloadList(); // SHIFT + S downloads all files in list
-		} else {
-			Toolbar.download(); // S to download the current file
-		}
-		break;
-	case 82: // R to toggle list shuffle
-		ListNavigator.toggleShuffle();
-		break;
-	case 67: // C to copy to clipboard
-		Toolbar.copyUrl();
-		break;
-	case 73: // I to open the details window
-		DetailsWindow.toggle();
-		break;
-	case 81: // Q to close the window
-		window.close();
-		break;
-	}
-});

res/static/script/Viewer.js

@@ -65,3 +65,40 @@ function escapeHTML(str) {
 		.replace(/>/g, '>')
 		.replace(/"/g, '"');
 }
+
+// Register keyboard shortcuts
+document.addEventListener("keydown", function(event){
+	if (event.ctrlKey || event.altKey) {
+		return // prevent custom shortcuts from interfering with system shortcuts
+	}
+
+	switch (event.which) {
+	case 65: // A or left arrow key go to previous file
+	case 37:
+		ListNavigator.previousItem();
+		break;
+	case 68: // D or right arrow key go to next file
+	case 39:
+		ListNavigator.nextItem();
+		break;
+	case 83:
+		if (event.shiftKey) {
+			Toolbar.downloadList(); // SHIFT + S downloads all files in list
+		} else {
+			Toolbar.download(); // S to download the current file
+		}
+		break;
+	case 82: // R to toggle list shuffle
+		ListNavigator.toggleShuffle();
+		break;
+	case 67: // C to copy to clipboard
+		Toolbar.copyUrl();
+		break;
+	case 73: // I to open the details window
+		DetailsWindow.toggle();
+		break;
+	case 81: // Q to close the window
+		window.close();
+		break;
+	}
+});

res/static/script/compiled/home.js

@@ -65,7 +65,6 @@ var UploadProgressBar = /** @class */ (function () {
 function handleUploads(files) {
     if (uploader === null) {
         uploader = new UploadManager();
-        queueDiv.style.height = "340px";
     }
     for (var i = 0; i < files.length; i++) {
         uploader.uploadFile(new UploadProgressBar(files.item(i)));

res/static/style/viewer.css

@@ -88,8 +88,8 @@ body{
 	min-width: 100px;
 	text-align: center;
 	vertical-align: middle;
-	transition: left 1s, top 1.5s;
+	transition: left 1s;
-	overflow: auto;
+	overflow: hidden;
 }
 
 /* Toolbars */
@@ -106,7 +106,7 @@ body{
 	padding: 0;
 	text-align: left;
 	box-shadow: 2px 2px 8px var(--shadow_color);
-	transition: left 1s, top 1.5s;
+	transition: left 1s;
 }
 .file_viewer > .file_viewer_window > .file_viewer_sharebar{
 	position: absolute;
@@ -122,7 +122,7 @@ body{
 	text-align: center;
 	z-index: 48;
 	overflow: hidden;
-	transition: left 1s, top 1.5s;
+	transition: left 1s;
 }
 
 /* =====================
@@ -130,10 +130,6 @@ body{
    =====================*/
 .image-container{
 	position: relative;
-	top: 0px;
-	left: 0px;
-	right: 0px;
-	bottom: 0px;
 	height: 100%;
 	width: 100%;
 	text-align: center;
@@ -152,10 +148,8 @@ body{
 	background: #333 none;
 	position: relative;
 	text-align: left;
-	top: 0;
+	height: 100%;
-	bottom: 0;
+	width: 100%;
-	left: 0;
-	right: 0;
 	padding: 5px 5px 5px 20px;
 	box-sizing: border-box;
 }

res/static/typescript/home/home.ts

@@ -80,7 +80,6 @@ class UploadProgressBar implements FileUpload {
 function handleUploads(files: FileList) {
 	if (uploader === null){
 		uploader = new UploadManager()
-		queueDiv.style.height = "340px"
 	}
 
 	for (var i = 0; i < files.length; i++) {

res/template/file_viewer.html

@@ -162,15 +162,15 @@
 
 		<script src="/res/misc/chartjs/Chart.min.js"></script>
 		<script src="/res/script/jquery.js"></script>
-		<script src="/res/script/Keyboard.js?v4"></script>
+		<script src="/res/script/Toolbar.js?v6"></script>
-		<script src="/res/script/Toolbar.js?v4"></script>
+		<script src="/res/script/Viewer.js?v6"></script>
-		<script src="/res/script/Viewer.js?v4"></script>
+		<script src="/res/script/ListNavigator.js?v6"></script>
-		<script src="/res/script/ListNavigator.js?v4"></script>
-
 		<script>
 			// This info gets filled in on the server side to prevent having to make an API call right after the page loads.
 			// Just to slice another few milliseconds from the load time :)
-			Viewer.init('{{.Other.Type}}', {{.Other.APIResponse}});
+			window.addEventListener("load", function(){
+				Viewer.init('{{.Other.Type}}', {{.Other.APIResponse}});
+			});
 		</script>
 
 		{{template "analytics"}}

res/template/home.html

@@ -5,16 +5,6 @@
 		{{template "meta_tags" "Free file sharing service"}}
 		{{template "user_style" .}}
 		<script type="text/javascript">var apiEndpoint = '{{.APIEndpoint}}';</script>
-		<style>
-		#uploads_queue{
-			position: relative;
-			width: 100%;
-			height: 0;
-			overflow-x: hidden;
-			overflow-y: scroll;
-			transition: height 2s;
-		}
-		</style>
 	</head>
 
 	<body>

res/template/paste.html

@@ -13,13 +13,19 @@
 				height: 100%;
 				background-color: var(--accent_color_medium)
 			}
-			.textarea{
+			.textarea_container {
 				position: absolute;
-				top: 0;
 				left: 8em;
+				top: 0;
+				right: 0;
+				bottom: 0;
+				display: inline-block;
+			}
+			.textarea{
+				position: relative;
 				height: 100%;
 				width: 100%;
-				border: none !important;
+				/* border: none !important; */
 				background: var(--accent_color_dark);
 			}
 
@@ -43,14 +49,16 @@
 				<span>Upload</span>
 			</button>
 			<a href="/" class="button toolbar_button button_full_width">
-				<img src="/res/img/pixeldrain_small.png" alt="Visit the home page" style="width:22px; height: 22px;"/>
+				<img src="/res/img/pixeldrain_transparent.png" alt="Back to the Home page"/>
 				<span>Home</span>
 			</a>
 			<br/><br/>
-			Tip: Save your file with extension '.md' to use markdown<br/>
+			Tip: Save your file with extension '.md' to use markdown formatting<br/>
 			{{template "advertisement" .}}
 		</div>
-		<textarea id="textarea" class="textarea" placeholder="Your text here..." autofocus="autofocus"></textarea>
+		<div class="textarea_container">
+			<textarea id="textarea" class="textarea" placeholder="Your text here..." autofocus="autofocus"></textarea>
+		</div>
 		<script src="/res/script/compiled/textupload.js"></script>
 		{{template "analytics"}}
 	</body>