Size in toolbar

res/include/script/dependencies/util.js

@@ -90,3 +90,17 @@ function domainURL() {
 	}
 	return url;
 }
+
+function formatDataVolume(amt = 0, precision = 3) {
+	if (precision < 3) { precision = 3; }
+	if (amt >= 1e12) {
+		return (amt/1e12).toPrecision(precision) + " TB";
+	} else if (amt >= 1e9) {
+		return (amt/1e9).toPrecision(precision) + " GB";
+	} else if (amt >= 1e6) {
+		return (amt/1e6).toPrecision(precision) + " MB";
+	} else if (amt >= 1e3) {
+		return (amt/1e3).toPrecision(precision) + " kB";
+	}
+	return amt + " B"
+}

res/include/script/file_viewer/DetailsWindow.js

@@ -56,13 +56,12 @@ class DetailsWindow {
 			+ "<tr><td>URL<td><td><a href=\"/u/" + file.id + "\">"+domainURL()+"/u/" + file.id + "</a></td></tr>"
 			+ "<tr><td>Mime Type<td><td>" + escapeHTML(file.mime_type) + "</td></tr>"
 			+ "<tr><td>ID<td><td>" + file.id + "</td></tr>"
-			+ "<tr><td>Size<td><td>" + formatDataVolume(file.size) + "</td></tr>"
+			+ "<tr><td>Size<td><td>" + formatDataVolume(file.size, 4) + "</td></tr>"
-			+ "<tr><td>Bandwidth<td><td>" + formatDataVolume(file.bandwidth_used) + "</td></tr>"
+			+ "<tr><td>Bandwidth<td><td>" + formatDataVolume(file.bandwidth_used, 4) + "</td></tr>"
 			+ "<tr><td>Upload Date<td><td>" + file.date_upload + "</td></tr>"
 			+ "<tr><td>Description<td><td>" + escapeHTML(desc) + "</td></tr>"
 			+ "</table>";
 
-		dw.viewer.toolbar.setStats(file.views, file.bandwidth_used/file.size);
 		if(dw.visible) {
 			dw.updateGraph(file.id);
 		}

res/include/script/file_viewer/Toolbar.js

@@ -7,10 +7,11 @@ class Toolbar {
 	// Elements
 	divToolbar       = null;
 	divFilePreview   = null;
-	downloadFrame    = null
+	downloadFrame    = null;
 
 	spanViews        = null;
 	spanDownloads    = null;
+	spanSize         = null;
 
 	btnToggleToolbar = null;
 	btnDownload      = null;
@@ -27,6 +28,7 @@ class Toolbar {
 		t.downloadFrame    = document.getElementById("download_frame");
 		t.spanViews        = document.getElementById("stat_views");
 		t.spanDownloads    = document.getElementById("stat_downloads");
+		t.spanSize         = document.getElementById("stat_size");
 
 		t.btnToggleToolbar = document.getElementById("btn_toggle_toolbar");
 		t.btnDownload      = document.getElementById("btn_download");
@@ -148,9 +150,10 @@ class Toolbar {
 		}, 60000);
 	}
 
-	setStats(views, downloads) {let t = this;
+	setStats(file) {let t = this;
-		t.spanViews.innerText = views
+		t.spanViews.innerText = file.views
-		t.spanDownloads.innerText = Math.round(downloads*10)/10;
+		t.spanDownloads.innerText = Math.round((file.bandwidth_used/file.size)*10)/10;
+		t.spanSize.innerText = formatDataVolume(file.size, 3);
 	}
 }
 
@@ -171,16 +174,3 @@ function loadCaptcha(){
 		}
 	});
 }
-
-function formatDataVolume(amt) {
-	if (amt > 1e12) {
-		return Math.round(amt/1e9)/1e3 + " TB";
-	} else if (amt > 1e9) {
-		return Math.round(amt/1e6)/1e3 + " GB";
-	} else if (amt > 1e6) {
-		return Math.round(amt/1e3)/1e3 + " MB";
-	} else if (amt > 1e3) {
-		return Math.round(amt)/1e3 + " kB";
-	}
-	return amt + " B"
-}

res/include/script/file_viewer/Viewer.js

@@ -73,6 +73,7 @@ class Viewer {
 
 		// Update the file details
 		v.detailsWindow.setDetails(file);
+		v.toolbar.setStats(file);
 
 		// Register a new view. We don't care what this returns becasue we can't
 		// do anything about it anyway

res/include/style/layout.css

@@ -275,7 +275,8 @@ table:not(.form) {border-collapse: collapse; width: 100%;}
 tr:not(.form)    {border-bottom: 1px var(--layer_2_color_border) solid;}
 tr > td          {padding: 0.3em;}
 @media(max-width: 30em) {
-	tr > td {
+	/* Forms will be stacked on small screens */
+	tr.form > td {
 		box-sizing: border-box;
 		float: left;
 		width: 100%;

res/template/admin.html

@@ -29,6 +29,8 @@
 				<script>
 				var apiEndpoint = '{{.APIEndpoint}}';
 
+				{{template `util.js`}}
+
 				Chart.defaults.global.defaultFontColor = "#b3b3b3";
 				Chart.defaults.global.defaultFontSize = 15;
 				Chart.defaults.global.defaultFontFamily = "Ubuntu";
@@ -79,14 +81,7 @@
 										},
 										ticks: {
 											callback: function(value, index, values) {
-												if (value >= 1e12) {
+												return formatDataVolume(value, 3);
-													return Math.round(value/1e9)/1e3 + " TB";
-												} else if (value >= 1e9) {
-													return Math.round(value/1e6)/1e3 + " GB";
-												} else if (value >= 1e6) {
-													return Math.round(value/1e3)/1e3 + " MB";
-												}
-												return value/1e3 + " kB";
 											}
 										},
 										gridLines: {

res/template/file_viewer.html

@@ -41,6 +41,8 @@
 					<div id="stat_views" style="text-align: center;">N/A</div>
 					<div id="stat_downloads_label" class="toolbar_label">Downloads</div>
 					<div id="stat_downloads" style="text-align: center;">N/A</div>
+					<div id="stat_size_label" class="toolbar_label">Size</div>
+					<div id="stat_size" style="text-align: center;">N/A</div>
 
 					<button id="btn_download" class="toolbar_button button_full_width">
 						{{template `save.svg` .}}