Style fixes

res/static/script/compiled/home.js

@@ -52,7 +52,7 @@ var UploadProgressBar = /** @class */ (function () {
         this.uploadDiv.appendChild(document.createElement("br"));
         this.uploadDiv.appendChild(linkSpan);
     };
-    UploadProgressBar.prototype.onFailure = function (response, error) {
+    UploadProgressBar.prototype.onFailure = function (error) {
         this.uploadDiv.style.background = 'var(--danger_color)';
         this.uploadDiv.appendChild(document.createTextNode(this.file.name));
         this.uploadDiv.appendChild(document.createElement("br"));
@@ -308,7 +308,7 @@ var UploadWorker = /** @class */ (function () {
     };
     UploadWorker.prototype.newFile = function () {
         var file = this.manager.grabFile();
-        if (file === undefined) {
+        if (file === undefined) { // No more files in the queue. We're finished
             this.uploading = false;
             console.debug("No files left in queue");
             return; // Stop the thread

res/static/style/layout.css

@@ -202,26 +202,29 @@ body{
 .highlight_headerbar,
 .highlight_green,
 .highlight_blue,
-.highlight_red {
+.highlight_red,
+.highlight_1,
+.highlight_2,
+.highlight_3,
+.highlight_4 {
 	position: relative;
 	width: auto;
 	height: auto;
-	/* margin: 0; */
 	box-sizing: border-box;
 	overflow: hidden;
 	text-align: center;
 	padding: .5em;
 }
-.highlight_dark   {
+.highlight_dark, .highlight_1 {
 	background-color: var(--layer_1_color);
 	box-shadow: 1px 1px var(--layer_1_shadow) 0 var(--shadow_color);}
-.highlight_middle {
+.highlight_middle, .highlight_2 {
 	background-color: var(--layer_2_color);
 	box-shadow: 1px 1px var(--layer_2_shadow) 0 var(--shadow_color);}
-.highlight_light  {
+.highlight_light, .highlight_3 {
 	background-color: var(--layer_3_color);
 	box-shadow: 1px 1px var(--layer_3_shadow) 0 var(--shadow_color);}
-.highlight_headerbar   {
+.highlight_headerbar, .highlight_4 {
 	background-color: var(--layer_4_color);
 	box-shadow: 1px 1px var(--layer_4_shadow) 0 var(--shadow_color);}
 .highlight_green  {

res/static/style/viewer.css

@@ -16,24 +16,25 @@
 }
 
 /* Headerbar (row 1) */
-.file_viewer > .highlight_headerbar {
+.file_viewer > .file_viewer_headerbar {
 	flex-grow: 0;
 	flex-shrink: 0;
 	display: flex;
 	flex-direction: row;
 	text-align: left;
 	padding: 8px;
+	z-index: 10;
 }
 
 /* Headerbar components */
-.file_viewer > .highlight_headerbar > * {
+.file_viewer > .file_viewer_headerbar > * {
 	flex-grow: 0;
 	flex-shrink: 0;
 	margin-left: .4em;
 	margin-right: .4em;
 	display: inline-flex;
 }
-.file_viewer > .highlight_headerbar > .file_viewer_headerbar_title {
+.file_viewer > .file_viewer_headerbar > .file_viewer_headerbar_title {
 	flex-grow: 1;
 	flex-shrink: 1;
 	display: flex;
@@ -43,18 +44,18 @@
 	line-height: 2em;
 	text-overflow: ellipsis;
 }
-.file_viewer > .highlight_headerbar > .button_home::after {
+.file_viewer > .file_viewer_headerbar > .button_home::after {
 	content: "pixeldrain";
 }
 @media (max-width: 500px) {
-	.file_viewer > .highlight_headerbar > .button_home::after {
+	.file_viewer > .file_viewer_headerbar > .button_home::after {
 		content: "pd";
 	}
-	.file_viewer > .highlight_headerbar > .list_navigator_buttons {
+	.file_viewer > .file_viewer_headerbar > .list_navigator_buttons {
 		display: none;
 	}
 }
-.file_viewer > .highlight_headerbar > .file_viewer_headerbar_title > span {
+.file_viewer > .file_viewer_headerbar > .file_viewer_headerbar_title > span {
 	flex-grow: 0;
 	flex-shrink: 0;
 	margin-right: 1em;
@@ -89,6 +90,7 @@
 	width: auto;
 	height: auto;
 	margin: 0;
+	z-index: 9;
 }
 .file_viewer > .file_viewer_window > .file_viewer_file_preview {
 	position: absolute;
@@ -101,7 +103,7 @@
 	min-width: 100px;
 	text-align: center;
 	vertical-align: middle;
-	transition: left 1s;
+	transition: left 0.5s;
 	overflow: hidden;
 }
 
@@ -118,8 +120,8 @@
 	top: 0;
 	padding: 0;
 	text-align: left;
-	box-shadow: 2px 2px 8px var(--shadow_color);
-	transition: left 1s;
+	box-shadow: 1px 1px var(--layer_1_shadow) 0 var(--shadow_color);
+	transition: left 0.5s;
 }
 .file_viewer > .file_viewer_window > .file_viewer_sharebar{
 	position: absolute;
@@ -135,7 +137,7 @@
 	text-align: center;
 	z-index: 48;
 	overflow: hidden;
-	transition: left 1s;
+	transition: left 0.5s;
 }
 
 /* =====================
@@ -261,8 +263,8 @@
 	flex-direction: column;
 	opacity: 0;
 	transition: visibility .5s, opacity .5s;
-	background-color: var(--layer_1_color);
-	border-color: var(--layer_1_color_border);
+	background-color: var(--layer_2_color);
+	border-color: var(--layer_2_color_border);
 	max-height: 100%;
 	max-width: 100%;
 	top: 20%;

res/static/typescript/home/home.ts

@@ -67,7 +67,7 @@ class UploadProgressBar implements FileUpload {
 		this.uploadDiv.appendChild(document.createElement("br"))
 		this.uploadDiv.appendChild(linkSpan)
 	}
-	public onFailure(response: JQuery.Ajax.ErrorTextStatus, error: string) {
+	public onFailure(error: string) {
 		this.uploadDiv.style.background = 'var(--danger_color)'
 		this.uploadDiv.appendChild(document.createTextNode(this.file.name))
 		this.uploadDiv.appendChild(document.createElement("br"))

res/static/typescript/home/tsconfig.json

@@ -8,4 +8,4 @@
 		"../lib/jquery.d.ts",
 		"../lib/uploader.ts"
 	]
-}
+}

res/static/typescript/lib/jquery.d.ts

@@ -8024,4 +8024,4 @@ interface JQueryEasingFunctions {
     swing: JQueryEasingFunction;
 }
 
-// endregion
+// endregion

res/static/typescript/lib/uploader.ts

@@ -78,12 +78,12 @@ class UploadWorker {
 	private upload(file: FileUpload){
 		console.debug("Starting upload of " + file.name)
 
+		var that = this // jquery changes the definiton of "this"
+
 		var formData = new FormData()
 		formData.append("name", file.name)
 		formData.append('file', file.file)
 
-		var that = this // jquery changes the definiton of "this"
-
 		$.ajax({
 			type: 'POST',
 			url: apiEndpoint+"/file",

res/template/file_viewer.html

@@ -23,7 +23,7 @@
 
 	<body>
 		<div id="file_viewer" class="file_viewer">
-			<div id="file_viewer_headerbar" class="highlight_headerbar">
+			<div id="file_viewer_headerbar" class="highlight_1 file_viewer_headerbar">
 				<button id="button_toggle_toolbar" class="button_toggle_toolbar" onClick="Toolbar.toggle();">☰</button>
 				<a href="/" id="button_home" class="button button_home">
 					<img src="/res/img/pixeldrain_transparent.png"
@@ -107,7 +107,7 @@
 		</div>
 
 		<div id="details_popup" class="popup details_popup">
-			<div id="details_popup_title" class="highlight_headerbar">
+			<div id="details_popup_title" class="highlight_1">
 				File Info
 				<button style="position: absolute; top: 3px; right: 3px;" class="button_red" onclick="DetailsWindow.toggle();">🞫</button>
 			</div>