add loading animation

res/static/res/style/layout.css

@@ -291,7 +291,7 @@ input[type="color"]:active,
 select:active{
 	background: linear-gradient(var(--input_color_dark), var(--input_color));
 	box-shadow: inset 3px 3px 6px var(--shadow_color);
-	padding: 8px 8px 4px 12px;
+	padding: 9px 5px 3px 11px; /* Exactly 3px offset compared to the inactive padding to give a depth effect */
 }
 .button_full_width      {width: calc(100% - 4px);}
 .button_highlight       {background: linear-gradient(var(--highlight_color),      var(--highlight_color_dark)) !important; color: var(--highlight_text_color) !important;}

res/template/account/file_manager.html

@@ -13,7 +13,7 @@
 				top:100px;
 				right: 100px;
 				min-width: 600px;
-				max-width: 1400px;
+				max-width: 1000px;
 			}
 			.file_manager > .nav_bar {
 				display: flex;
@@ -24,9 +24,22 @@
 			.file_manager > .nav_bar > button       {flex: 0;}
 			.file_manager > .nav_bar > .breadcrumbs {flex: 1; margin: 1px 10px; min-width: 100px;}
 			.file_manager > .status_bar             {text-align: left;}
+			.file_manager > .directory_area {
+				margin: 0 -8px 0 -8px;
+				padding: 5px;
+				max-height: 500px;
+				overflow-x: hidden;
+				overflow-y: scroll;
+				text-align: left;
+			}
 
-			.file_button       {height: 40px !important;}
-			.file_button > img {max-height: 40px !important;}
+			.file_button {
+				height: 20px;
+				box-shadow: none;
+				background: none;
+				margin: 2px;
+			}
+			.file_button > img {height: 100% !important;}
 		</style>
 	</head>
 
@@ -47,11 +60,11 @@
 				<button class="button_red">✕</button>
 			</div>
 			<div class="directory_area">
-				{{$files := .PixelAPI.UserFiles 0 20}}
+				{{$files := .PixelAPI.UserFiles 0 1000}}
 				{{range $files.Files}}
 				<a class="file_button" href="/u/{{.ID}}" target="_blank">
-					<img src="{{$.APIEndpoint}}/file/{{.ID}}/thumbnail" alt="{{.File}}" />
-					{{.File}}
+					<img src="{{$.APIEndpoint}}/file/{{.ID}}/thumbnail" alt="{{.Name}}" />
+					{{.Name}}
 				</a>
 				{{end}}
 			</div>

res/template/file_viewer.html

@@ -166,7 +166,7 @@
 		</div>
 
 		<div id="filepreview">
-			Loading...
+			<img src="/res/img/misc/loadthink.gif" style="margin-top: 20%; width: 200px; height: 200px;" />
 		</div>
 
 		<script src="/res/script/jquery.js"></script>
@@ -181,7 +181,7 @@
 		<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('{{.Type}}', {{.APIResponse}});
+			//Viewer.init('{{.Type}}', {{.APIResponse}});
 		</script>
 
 		{{template "analytics"}}