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 @@