From 75486d62d8464fbda6fab5158f2fa60f3c77ca3f Mon Sep 17 00:00:00 2001 From: Wim Brand Date: Tue, 10 Mar 2020 17:06:52 +0100 Subject: [PATCH] simplify theming --- .../script/file_manager/DirectoryElement.js | 14 +- .../script/file_viewer/DetailsWindow.js | 30 +-- .../file_viewer/viewer_scripts/ImageViewer.js | 35 ++- .../file_viewer/viewer_scripts/VideoViewer.js | 2 +- res/include/script/homepage.js | 6 +- res/include/style/file_manager.css | 38 +-- res/include/style/layout.css | 47 ++-- res/include/style/viewer.css | 11 +- res/template/about.html | 32 +-- res/template/account/file_manager.html | 4 +- res/template/admin.html | 24 +- res/template/file_viewer.html | 2 +- res/template/fragments/page_wrap.html | 8 +- webcontroller/user_style.go | 223 ++++++------------ 14 files changed, 202 insertions(+), 274 deletions(-) diff --git a/res/include/script/file_manager/DirectoryElement.js b/res/include/script/file_manager/DirectoryElement.js index b994492..cf413f8 100644 --- a/res/include/script/file_manager/DirectoryElement.js +++ b/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) diff --git a/res/include/script/file_viewer/DetailsWindow.js b/res/include/script/file_viewer/DetailsWindow.js index e7a2792..0af2a11 100644 --- a/res/include/script/file_viewer/DetailsWindow.js +++ b/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)" } } ], diff --git a/res/include/script/file_viewer/viewer_scripts/ImageViewer.js b/res/include/script/file_viewer/viewer_scripts/ImageViewer.js index 600c468..85deb79 100644 --- a/res/include/script/file_viewer/viewer_scripts/ImageViewer.js +++ b/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" diff --git a/res/include/script/file_viewer/viewer_scripts/VideoViewer.js b/res/include/script/file_viewer/viewer_scripts/VideoViewer.js index 48716df..c5ecf18 100644 --- a/res/include/script/file_viewer/viewer_scripts/VideoViewer.js +++ b/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") diff --git a/res/include/script/homepage.js b/res/include/script/homepage.js index a8c90fc..4765514 100644 --- a/res/include/script/homepage.js +++ b/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" diff --git a/res/include/style/file_manager.css b/res/include/style/file_manager.css index 6386613..1ffdc32 100644 --- a/res/include/style/file_manager.css +++ b/res/include/style/file_manager.css @@ -3,6 +3,8 @@ padding: 0; } +/* Override the menu button so it doesn't overlap the file manager when the menu +is collapsed */ #button_toggle_navigation { display: none; } @@ -10,24 +12,12 @@ .file_manager { position: absolute; padding: 0; - background-color: var(--layer_1_color); - box-shadow: #000000 8px 8px 50px 5px; - left: 24px; - top: 24px; - right: 24px; - bottom: 24px; + background-color: var(--layer_2_color); + width: 100%; + height: 100%; display: flex; flex-direction: column; } -@media (max-width: 1000px) { - .file_manager { - left: 0; - top: 0; - right: 0; - bottom: 0; - } -} - .file_manager > .nav_bar { flex-shrink: 0; display: flex; @@ -55,13 +45,14 @@ overflow: hidden; top: 0; z-index: 1; - background-color: var(--layer_1_color); + background-color: var(--layer_2_color); + min-width: 750px; /* Sum of all columns */ } .file_manager > .directory_area > .directory_sorters > div { - flex-shrink: 0; - flex-grow: 1; display: inline-block; margin: 4px 10px; + padding: 4px; + box-sizing: border-box; border-bottom: 1px solid var(--input_color); cursor: pointer; } @@ -76,12 +67,6 @@ flex-shrink: 0; flex-grow: 0; } -@media (max-width: 1000px) { - .file_manager > .directory_area > .directory_sorters > :not(:first-child), - .node > :not(:first-child) { - display: none; - } -} .file_manager > .directory_area { flex-shrink: 1; @@ -97,7 +82,7 @@ above are out of view*/ box-sizing: border-box; display: block; - overflow: hidden; + min-width: 750px; /* Sum of all columns */ } .file_manager > .status_bar { @@ -117,7 +102,6 @@ control over the size. Check out https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing*/ margin: 0; - padding: 4px; box-sizing: border-box; color: var(--text_color); @@ -136,6 +120,8 @@ height: 100%; overflow: hidden; margin: auto 10px; + padding: 4px; + box-sizing: border-box; display: inline-block; text-overflow: ellipsis; white-space: nowrap; diff --git a/res/include/style/layout.css b/res/include/style/layout.css index ee054c6..4127cee 100644 --- a/res/include/style/layout.css +++ b/res/include/style/layout.css @@ -54,7 +54,7 @@ html, body { } body{ background-color: #111111; /* Fallback */ - background-color: var(--body_color); + background-color: var(--layer_2_color); background-repeat: repeat; margin: 0; font-family: system-ui, sans-serif; @@ -123,7 +123,7 @@ body{ transition: left 0.5s; padding: 50px 0 50px 0; } -@media (max-width: 600px) { +@media (max-width: 800px) { .page_navigation { left: -250px; } @@ -210,43 +210,44 @@ body, .checkers { .highlight_dark, .highlight_middle, .highlight_light, -.highlight_headerbar, .highlight_green, .highlight_blue, .highlight_red, .highlight_1, .highlight_2, -.highlight_3, -.highlight_4 { +.highlight_3{ position: relative; width: auto; height: auto; box-sizing: border-box; overflow: hidden; text-align: center; - padding: .5em; + padding: 8px; } .highlight_dark, .highlight_1 { background-color: var(--layer_1_color); - box-shadow: 1px 1px var(--layer_1_shadow) 0 var(--shadow_color);} + box-shadow: 1px 1px var(--layer_1_shadow) 0 var(--shadow_color); +} .highlight_middle, .highlight_2 { background-color: var(--layer_2_color); - box-shadow: 1px 1px var(--layer_2_shadow) 0 var(--shadow_color);} + box-shadow: 1px 1px var(--layer_2_shadow) 0 var(--shadow_color); +} .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_4 { - background-color: var(--layer_4_color); - box-shadow: 1px 1px var(--layer_4_shadow) 0 var(--shadow_color);} -.highlight_green { + box-shadow: 1px 1px var(--layer_3_shadow) 0 var(--shadow_color); +} +.highlight_green { background-color: rgba(0, 255, 0, 0.05); - border-color: #00d000;} -.highlight_blue { + border-color: #00d000; +} +.highlight_blue { background-color: rgba(32, 32, 255, 0.2); - border-color: rgb(54, 54, 255);} -.highlight_red { + border-color: rgb(54, 54, 255); +} +.highlight_red { background-color: rgba(255, 0, 0, 0.1); - border-color: #B00000;} + border-color: #B00000; +} .highlight_green, .highlight_blue, @@ -264,13 +265,15 @@ h1, h2, h3, h4, h5, h6 { margin-left: 10px; margin-right: 10px; } -h1{font-size: 2em; font-family: "light", sans-serif; font-weight: normal;} -h2{font-size: 1.75em; font-family: "light", sans-serif; font-weight: normal;} +h2, h3{ /* Differentiate it a bit, else it just looks like bold text */ + border-bottom: 1px var(--layer_3_color_border) solid; +} +h1{font-size: 2.25em; font-family: "light", sans-serif; font-weight: normal;} +h2{font-size: 2em; font-family: "light", sans-serif; font-weight: normal;} h3{font-size: 1.5em; font-family: "light", sans-serif; font-weight: normal;} h4{font-size: 1.25em; font-family: sans-serif; font-weight: normal;} h5{font-size: 1em; font-family: sans-serif; font-weight: normal;} h6{font-size: .75em; font-family: sans-serif; font-weight: normal;} -h2, h3{border-bottom: 1px var(--layer_3_color_border) solid;} /* Differentiate it a bit, else it just looks like bold text */ p, .indent { margin: 10px; @@ -335,7 +338,7 @@ pre{ overflow: hidden; border-radius: 2px; box-shadow: 2px 2px 8px -3px var(--shadow_color); - background-color: var(--file_background_color); + background-color: var(--input_color_dark); color: #bfbfbf; /* Fallback */ color: var(--text_color); word-break: break-all; diff --git a/res/include/style/viewer.css b/res/include/style/viewer.css index 2aa3959..12b3e37 100644 --- a/res/include/style/viewer.css +++ b/res/include/style/viewer.css @@ -22,7 +22,6 @@ display: flex; flex-direction: row; text-align: left; - padding: 8px; z-index: 10; box-shadow: none; } @@ -31,8 +30,8 @@ .file_viewer > .file_viewer_headerbar > * { flex-grow: 0; flex-shrink: 0; - margin-left: .4em; - margin-right: .4em; + margin-left: 6px; + margin-right: 6px; display: inline-flex; } .file_viewer > .file_viewer_headerbar > .file_viewer_headerbar_title { @@ -148,7 +147,7 @@ overflow-x: hidden; float: left; background-color: var(--layer_1_color); - box-shadow: inset 1px 1px 6px var(--shadow_color); + box-shadow: inset 1px 1px var(--layer_1_shadow) var(--shadow_color); text-align: center; z-index: 48; overflow: hidden; @@ -193,8 +192,8 @@ transform: translateY(-50%); } -.pannable{ cursor: move; } -.drop-shadow{ box-shadow: var(--shadow_color) 10px 10px 50px; } +.pannable { cursor: move; } +.drop_shadow { box-shadow: 1px 1px var(--layer_3_shadow) var(--shadow_color); } /* ======================== || TOOLBAR COMPONENTS || diff --git a/res/template/about.html b/res/template/about.html index e106c37..24ad4a2 100644 --- a/res/template/about.html +++ b/res/template/about.html @@ -76,12 +76,6 @@

What cookies does pixeldrain use?

-

- When uploading a file pixeldrain will install a cookie named - 'pduploads'. This cookie keeps a dot-separated list of all files - you have uploaded anonymously in this browser. This cookie is - only used for viewing your upload history. -

When logging in to a pixeldrain account a cookie named 'pd_auth_key' will be installed. This cookie keeps your login @@ -89,20 +83,26 @@ your account.

- When you use the style selector at the bottom of this page a - cookie called 'style' will be set. This cookie controls the - appearance of the website for you. + When you use the style selector on the Appearance page a cookie called 'style' + will be set. This cookie controls the appearance of the website + for you. +

+

+ When uploading a file pixeldrain will save a list of file links + on your browser's local storage. This data is + only used for viewing your upload history on the history page.

-

Legality

+

Legality

I cannot be held liable for any illegal and / or copyrighted - material that's uploaded by the users of this application. - Files uploaded to this website are subjected to local laws. If - laws are being broken, and I've been notified of the fact I'll - have to delete the offending content (as the server does not - support geo filtering yet). If you find any files on this domain - that break the law, please contact me at + material that's uploaded by the users of this application. Files + uploaded to this website are subjected to local laws. If laws + are being broken, and I've been notified of the fact I'll have + to delete the offending content. If you find any files on this + domain that break the law, please contact me at abuse@pixeldrain.com, and I'll take care of it.
Please share responsibly. diff --git a/res/template/account/file_manager.html b/res/template/account/file_manager.html index 1cdfa38..b1bbb92 100644 --- a/res/template/account/file_manager.html +++ b/res/template/account/file_manager.html @@ -13,7 +13,7 @@

-