From e45cb6e45b966d8a5018da4b0d7e7dcc62f2773f Mon Sep 17 00:00:00 2001
From: Wim Brand <fornax@fornaxian.com>
Date: Sun, 7 Jul 2019 22:34:20 +0200
Subject: [PATCH] Some style fixes

---
 res/static/script/Toolbar.js           | 16 +++++-
 res/static/style/viewer.css            | 13 ++++-
 res/template/account/file_manager.html |  1 -
 res/template/admin.html                | 23 ++++++--
 res/template/file_viewer.html          | 76 +++++++++++++-------------
 5 files changed, 83 insertions(+), 46 deletions(-)

diff --git a/res/static/script/Toolbar.js b/res/static/script/Toolbar.js
index 5679de6..3f89f3c 100644
--- a/res/static/script/Toolbar.js
+++ b/res/static/script/Toolbar.js
@@ -189,6 +189,10 @@ var DetailsWindow = {
 			this.detailsButton.classList.add("button_highlight")
 			this.visible = true;
 
+			// This is a workaround for a chrome bug which makes it so hidden
+			// windows can't be scrolled after they are shown
+			this.popupDiv.focus();
+
 			if (this.graph === 0) {
 				this.renderGraph();
 			}
@@ -301,6 +305,9 @@ var DetailsWindow = {
 								scaleLabel: {
 									display: true,
 									labelString: "Downloads"
+								},
+								gridLines: {
+									color: "rgba(100, 255, 100, .1)"
 								}
 							}, {
 								type: "linear",
@@ -312,7 +319,14 @@ var DetailsWindow = {
 									labelString: "Views"
 								},
 								gridLines: {
-									color: "rgba(0, 0, 0, 0)"
+									color: "rgba(128, 128, 255, .2)"
+								}
+							}
+						],
+						xAxes: [
+							{
+								gridLines: {
+									display: false
 								}
 							}
 						]
diff --git a/res/static/style/viewer.css b/res/static/style/viewer.css
index 2500f91..d8256ac 100644
--- a/res/static/style/viewer.css
+++ b/res/static/style/viewer.css
@@ -194,8 +194,10 @@ body{
 .popup {
 	position: fixed;
 	visibility: hidden;
+	display: flex;
+	flex-direction: column;
 	opacity: 0;
-	transition: visibility 1s, opacity 1s;
+	transition: visibility .5s, opacity .5s;
 	background-color: var(--body_color);
 	border-color: var(--accent_color_dark_border);
 	max-height: 100%;
@@ -207,13 +209,18 @@ body{
 	box-sizing: border-box;
 	text-align: left;
 	box-shadow: var(--shadow_color) 0px 0px 50px;
+	overflow: hidden;
 }
-.popup .highlight_light {
+.popup > .highlight_light {
 	font-size: 1.2em;
 }
+.popup > .content_area {
+	flex: 1;
+	overflow-y: scroll;
+	padding: 10px;
+}
 
 .details_popup{
-	overflow-y: scroll;
 	width: 1500px;
 	height: 800px;
 	z-index: 100;
diff --git a/res/template/account/file_manager.html b/res/template/account/file_manager.html
index 5848e4d..464103d 100644
--- a/res/template/account/file_manager.html
+++ b/res/template/account/file_manager.html
@@ -22,7 +22,6 @@
 			}
 			.file_manager > .nav_bar :first-child   {margin-left:  5px;}
 			.file_manager > .nav_bar :last-child    {margin-right: 5px;}
-			.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 {
diff --git a/res/template/admin.html b/res/template/admin.html
index 3e1aaa3..7b75ba4 100644
--- a/res/template/admin.html
+++ b/res/template/admin.html
@@ -20,7 +20,7 @@
 			<script src="/res/script/jquery.js"></script>
 			<script src="/res/misc/chartjs/Chart.min.js"></script>
 			<script>
-			$.get(apiEndpoint+"/admin/files/timeseries/10", function(response){
+			$.get(apiEndpoint+"/admin/files/timeseries/14", function(response){
 				console.log(response);
 				if (response.success) {
 					var ctx = document.getElementById('bandwidth_chart');
@@ -35,7 +35,7 @@
 								labels: response.labels,
 								datasets: [
 									{
-										label: "Downloads",
+										label: "Bandwidth",
 										backgroundColor: "rgba(100, 255, 100, .1)",
 										borderColor: "rgba(100, 255, 100, .8)",
 										borderWidth: 2,
@@ -44,7 +44,7 @@
 										data: response.downloads
 									}, {
 										label: "Views",
-										backgroundColor: "rgba(128, 128, 255, .1)",
+										backgroundColor: "rgba(128, 128, 255, .2)",
 										borderColor: "rgba(128, 128, 255, .8)",
 										borderWidth: 2,
 										fill: true,
@@ -71,6 +71,14 @@
 											scaleLabel: {
 												display: true,
 												labelString: "Bandwidth"
+											},
+											ticks: {
+												callback: function(value, index, values) {
+													return (value/1e9) + " GB";
+												}
+											},
+											gridLines: {
+												color: "rgba(100, 255, 100, .1)"
 											}
 										}, {
 											type: "linear",
@@ -82,7 +90,14 @@
 												labelString: "Views"
 											},
 											gridLines: {
-												color: "rgba(0, 0, 0, 0)"
+												color: "rgba(128, 128, 255, .2)"
+											}
+										}
+									],
+									xAxes: [
+										{
+											gridLines: {
+												display: false
 											}
 										}
 									]
diff --git a/res/template/file_viewer.html b/res/template/file_viewer.html
index d3daed2..e244321 100644
--- a/res/template/file_viewer.html
+++ b/res/template/file_viewer.html
@@ -112,46 +112,48 @@
 				File Info
 				<button style="position: absolute; top: 3px; right: 3px;" class="button_red" onclick="DetailsWindow.toggle();">X</button>
 			</div>
-			<span id="info_file_details"></span>
-			<span id="info_about">
-				<h3>Downloads and views</h3>
-				<div id="chart_container" class="chart-container" style="position: relative; width: 100%; height: auto;">
-					<canvas id="bandwidth_chart"></canvas>
-				</div>
-				<p style="text-align: center">
-					Chart rendered by the amazing <a href="https://www.chartjs.org/" target="_blank">Chart.js</a>.
-				</p>
+			<div class="content_area">
+				<span id="info_file_details"></span>
+				<span id="info_about">
+					<h3>Downloads and views</h3>
+					<div id="chart_container" class="chart-container" style="position: relative; width: 100%; height: auto;">
+						<canvas id="bandwidth_chart"></canvas>
+					</div>
+					<p style="text-align: center">
+						Chart rendered by the amazing <a href="https://www.chartjs.org/" target="_blank">Chart.js</a>.
+					</p>
 
-				<h3>About</h3>
-				Pixeldrain is a file sharing platform.
-				<a href="/" target="_blank">Visit the home page for more information.</a>
+					<h3>About</h3>
+					Pixeldrain is a file sharing platform.
+					<a href="/" target="_blank">Visit the home page for more information.</a>
 
-				<h3>Keyboard Controls</h3>
-				<table>
-					<tr><td colspan="2">File Shortcuts</td></tr>
-					<tr><td>c</td><td> = Copy URL of this page</td></tr>
-					<tr><td>i</td><td> = Toggle details window (this window)</td></tr>
-					<tr><td>s</td><td> = Download the file you are currently viewing</td></tr>
-					<tr><td colspan="2">List Shortcuts</td></tr>
-					<tr><td>a or &#8592;</td><td> = View previous item in list</td></tr>
-					<tr><td>d or &#8594;</td><td> = View next item in list</td></tr>
-					<tr><td>r</td><td> = Toggle shuffle (<b><u>r</u></b>andom)</td></tr>
-					<tr><td>SHIFT + s</td><td> = Download all the files in the list as a zip archive</td></tr>
-				</table>
+					<h3>Keyboard Controls</h3>
+					<table>
+						<tr><td colspan="2">File Shortcuts</td></tr>
+						<tr><td>c</td><td> = Copy URL of this page</td></tr>
+						<tr><td>i</td><td> = Toggle details window (this window)</td></tr>
+						<tr><td>s</td><td> = Download the file you are currently viewing</td></tr>
+						<tr><td colspan="2">List Shortcuts</td></tr>
+						<tr><td>a or &#8592;</td><td> = View previous item in list</td></tr>
+						<tr><td>d or &#8594;</td><td> = View next item in list</td></tr>
+						<tr><td>r</td><td> = Toggle shuffle (<b><u>r</u></b>andom)</td></tr>
+						<tr><td>SHIFT + s</td><td> = Download all the files in the list as a zip archive</td></tr>
+					</table>
 
-				<h3>Credits</h3>
-				All server side code written by
-				<a target="_blank" href="https://fornaxian.com/">Fornax (me)</a>.
-				<br/>
-				<br/>
-				Code syntax highlighting is by
-				<a target="_blank" href="https://github.com/google/code-prettify">Google Code-prettify</a>.
-				<br/>
-				<br/>
-				Thanks to the Mozilla team for their wonderful PDF viewer
-				<a target="_blank" href="https://github.com/mozilla/pdf.js">pdf.js</a>.
-				<br/>
-			</span>
+					<h3>Credits</h3>
+					All server side code written by
+					<a target="_blank" href="https://fornaxian.com/">Fornax (me)</a>.
+					<br/>
+					<br/>
+					Code syntax highlighting is by
+					<a target="_blank" href="https://github.com/google/code-prettify">Google Code-prettify</a>.
+					<br/>
+					<br/>
+					Thanks to the Mozilla team for their wonderful PDF viewer
+					<a target="_blank" href="https://github.com/mozilla/pdf.js">pdf.js</a>.
+					<br/>
+				</span>
+			</div>
 		</div>
 		<div id="captcha_popup" class="popup captcha_popup border_bottom">
 			<div id="captcha_popup_title" class="highlight_light border_top border_bottom"></div>