simplify theming

res/include/script/file_manager/DirectoryElement.js

@@ -17,17 +17,18 @@ function DirectoryElement(directoryArea, footer) {
 	let makeSortButton = (field, label, width) => {
 		this.sortButtons[field] = document.createElement("div")
 		this.sortButtons[field].innerText = label
-		this.sortButtons[field].style.width = width
+		this.sortButtons[field].style.minWidth = width
 		this.sortButtons[field].addEventListener("click", () => {
 			this.sortBy(field)
 		})
 		this.directorySorters.appendChild(this.sortButtons[field])
 	}
 
+	this.fieldNameWidth = "300px"
 	this.fieldDateWidth = "160px"
-	this.fieldSizeWidth = "100px"
+	this.fieldSizeWidth = "90px"
 	this.fieldTypeWidth = "200px"
-	makeSortButton("name",        "Name",          "")
+	makeSortButton("name",        "Name",          this.fieldNameWidth)
 	makeSortButton("dateCreated", "Creation Date", this.fieldDateWidth)
 	makeSortButton("size",        "Size",          this.fieldSizeWidth)
 	makeSortButton("type",        "Type",          this.fieldTypeWidth)
@@ -178,6 +179,7 @@ DirectoryElement.prototype.createFileButton = function(file, index) {
 
 	{
 		let cell = document.createElement("div")
+		cell.style.minWidth = this.fieldNameWidth
 		let thumb = document.createElement("img")
 		thumb.src = file.icon
 		cell.appendChild(thumb)
@@ -189,7 +191,7 @@ DirectoryElement.prototype.createFileButton = function(file, index) {
 	}
 	{
 		let cell = document.createElement("div")
-		cell.style.width = this.fieldDateWidth
+		cell.style.minWidth = this.fieldDateWidth
 		let label = document.createElement("span")
 		label.innerText = printDate(new Date(file.dateCreated), true, true, false)
 		cell.appendChild(label)
@@ -197,7 +199,7 @@ DirectoryElement.prototype.createFileButton = function(file, index) {
 	}
 	{
 		let cell = document.createElement("div")
-		cell.style.width = this.fieldSizeWidth
+		cell.style.minWidth = this.fieldSizeWidth
 		let label = document.createElement("span")
 		label.innerText = file.sizeLabel
 		cell.appendChild(label)
@@ -205,7 +207,7 @@ DirectoryElement.prototype.createFileButton = function(file, index) {
 	}
 	{
 		let cell = document.createElement("div")
-		cell.style.width = this.fieldTypeWidth
+		cell.style.minWidth = this.fieldTypeWidth
 		let label = document.createElement("span")
 		label.innerText = file.type
 		cell.appendChild(label)

res/include/script/file_viewer/DetailsWindow.js

@@ -72,7 +72,7 @@ DetailsWindow.prototype.renderGraph = function() {
 	Chart.defaults.global.defaultFontColor = "#b3b3b3"
 	Chart.defaults.global.defaultFontSize = 15
 	Chart.defaults.global.defaultFontFamily = "Ubuntu"
-	Chart.defaults.global.aspectRatio = 2.5
+	Chart.defaults.global.maintainAspectRatio = false;
 	Chart.defaults.global.elements.point.radius = 0
 	Chart.defaults.global.tooltips.mode = "index"
 	Chart.defaults.global.tooltips.axis = "x"
@@ -80,25 +80,25 @@ DetailsWindow.prototype.renderGraph = function() {
 	this.graph = new Chart(
 		document.getElementById('bandwidth_chart'),
 		{
-			type: 'line',
+			type: 'bar',
 			data: {
 				datasets: [
 					{
-						label: "Downloads",
-						backgroundColor: "rgba(64, 255, 64, .05)",
-						borderColor: "rgba(128, 255, 128, 1)",
-						borderWidth: 1.5,
-						lineTension: 0.1,
+						label: "Bandwidth",
+						backgroundColor: "rgba(64, 255, 64, .01)",
+						borderColor: "rgba(96, 255, 96, 1)",
+						borderWidth: 2,
+						lineTension: 0.2,
 						fill: true,
-						yAxisID: "y_bandwidth",
+						yAxisID: "y_bandwidth"
 					}, {
 						label: "Views",
-						backgroundColor: "rgba(64, 64, 255, .1)",
-						borderColor: "rgba(128, 128, 255, 1)",
-						borderWidth: 1.5,
-						lineTension: 0.1,
+						backgroundColor: "rgba(64, 64, 255, .01)",
+						borderColor: "rgba(64, 64, 255, 1)",
+						borderWidth: 2,
+						lineTension: 0.2,
 						fill: true,
-						yAxisID: "y_views",
+						yAxisID: "y_views"
 					}
 				]
 			},
@@ -115,7 +115,7 @@ DetailsWindow.prototype.renderGraph = function() {
 								labelString: "Downloads"
 							},
 							gridLines: {
-								color: "rgba(100, 255, 100, .1)"
+								color: "rgba(100, 255, 100, .05)"
 							}
 						}, {
 							type: "linear",
@@ -127,7 +127,7 @@ DetailsWindow.prototype.renderGraph = function() {
 								labelString: "Views"
 							},
 							gridLines: {
-								color: "rgba(128, 128, 255, .2)"
+								color: "rgba(128, 128, 255, .05)"
 							}
 						}
 					],

res/include/script/file_viewer/viewer_scripts/ImageViewer.js

@@ -6,15 +6,19 @@ function ImageViewer(viewer, file) {
 	this.y        = 0
 	this.dragging = false
 
+	this.zoom = 1
+
 	this.container = document.createElement("dv")
 	this.container.classList = "image-container"
 
 	this.element = document.createElement("img")
-	this.element.classList = "pannable center drop-shadow"
+	this.element.classList = "pannable center drop_shadow"
 	this.element.src = this.file.get_href
 	this.element.addEventListener("dblclick",  (e) => { return this.doubleclick(e) })
 	this.element.addEventListener("doubletap", (e) => { return this.doubleclick(e) })
 	this.element.addEventListener("mousedown", (e) => { return this.mousedown(e) })
+	this.element.addEventListener("mousedown", (e) => { return this.mousedown(e) })
+	this.element.addEventListener("wheel",    (e) => { return this.scroll(e) })
 	document.addEventListener("mousemove",     (e) => { return this.mousemove(e) })
 	document.addEventListener("mouseup",       (e) => { return this.mouseup(e) })
 
@@ -25,14 +29,31 @@ ImageViewer.prototype.render = function(parent) {
 	parent.appendChild(this.container)
 }
 
+ImageViewer.prototype.scroll = function(e) {
+	if (!this.zoomed) {
+		this.doubleclick(e)
+	}
+
+	console.log(e.deltaY)
+
+	this.zoom = this.zoom - (e.deltaY * 0.01);
+	if (this.zoom < 1) { this.zoom = 1 }
+	if (this.zoom > 10) { this.zoom = 10 }
+
+	this.element.style.width = this.zoom * 100 + "%"
+	this.element.style.height = "auto"
+	this.element.style.maxWidth = "1000%"
+	this.element.style.maxHeight = "1000%"
+
+	e.preventDefault()
+	e.stopPropagation()
+	return false
+}
+
 ImageViewer.prototype.doubleclick = function(e) {
 	if (this.zoomed) {
-		this.element.style.maxWidth = "100%"
-		this.element.style.maxHeight = "100%"
-		this.element.style.top = "50%"
-		this.element.style.left = "auto"
-		this.element.style.transform = "translateY(-50%)"
-		this.container.style.overflow = "hidden"
+		this.element.removeAttribute("style")
+		this.container.style.overflow = ""
 		this.zoomed = false
 	} else {
 		this.element.style.maxWidth = "none"

res/include/script/file_viewer/viewer_scripts/VideoViewer.js

@@ -9,7 +9,7 @@ function VideoViewer(viewer, file, next) {
 	this.vidElement = document.createElement("video")
 	this.vidElement.autoplay = "autoplay"
 	this.vidElement.controls = "controls"
-	this.vidElement.classList = "center drop-shadow"
+	this.vidElement.classList = "center drop_shadow"
 	this.vidElement.addEventListener("ended", () => { this.next() }, false)
 
 	this.videoSource = document.createElement("source")

res/include/script/homepage.js

@@ -28,14 +28,14 @@ UploadProgressBar.prototype.onProgress = function(progress){
 	this.uploadDiv.innerText = "Uploading... " + Math.round(progress*1000)/10 + "%\n" + this.name
 	this.uploadDiv.style.background = 'linear-gradient('
 		+'to right, '
-		+'var(--file_background_color) 0%, '
+		+'var(--input_color_dark) 0%, '
 		+'var(--highlight_color) '+ ((progress*100)) +'%, '
-		+'var(--file_background_color) '+ ((progress*100)+1) +'%)'
+		+'var(--input_color_dark) '+ ((progress*100)+1) +'%)'
 }
 UploadProgressBar.prototype.onFinished = function(id){
 	console.log("Upload finished: "+this.file.name+" "+id)
 
-	this.uploadDiv.style.background = 'var(--file_background_color)'
+	this.uploadDiv.style.background = 'var(--input_color_dark)'
 	this.uploadDiv.href = '/u/'+id
 	this.uploadDiv.target= "_blank"