pixeldrain/fnx_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

More styling fixes, and fix the file not found page

Browse Source
This commit is contained in:
Wim Brand
2019-07-28 22:34:15 +02:00
parent 2241421761
commit 5aaf121a17
10 changed files with 106 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
res/static/script/Toolbar.js
View File

@@ -215,7 +215,7 @@ var DetailsWindow = {
$("#info_file_details").html( $("#info_file_details").html(
"<table>" "<table>"
+ "<tr><td>Name<td><td>" + escapeHTML(data.name) + "</td></tr>" + "<tr><td>Name<td><td>" + escapeHTML(data.name) + "</td></tr>"
+ "<tr><td>Url<td><td><a href=\"/u/" + data.id + "\">/u/" + data.id + "</a></td></tr>" + "<tr><td>URL<td><td><a href=\"/u/" + data.id + "\">/u/" + data.id + "</a></td></tr>"
+ "<tr><td>Mime Type<td><td>" + escapeHTML(data.mime_type) + "</td></tr>" + "<tr><td>Mime Type<td><td>" + escapeHTML(data.mime_type) + "</td></tr>"
+ "<tr><td>ID<td><td>" + data.id + "</td></tr>" + "<tr><td>ID<td><td>" + data.id + "</td></tr>"
+ "<tr><td>Size<td><td class=\"bytecounter\">" + data.size + "</td></tr>" + "<tr><td>Size<td><td class=\"bytecounter\">" + data.size + "</td></tr>"

14
res/static/style/layout.css
View File

@@ -254,15 +254,13 @@ pre{
} }
.big_button{ .big_button{
height: 1.3em;
width: 40%; width: 40%;
min-width: 200px; min-width: 200px;
max-width: 400px; max-width: 400px;
margin: 10px !important; margin: 10px !important;
border-radius: 5px; border-radius: 5px;
font-size: 1.9em; font-size: 1.8em;
font-weight: normal; font-weight: normal;
line-height: 8px;
} }
.progress_bar{ .progress_bar{
@@ -347,13 +345,13 @@ select{
border: none; border: none;
margin: 3px; margin: 3px;
background: linear-gradient(var(--input_color), var(--input_color_dark)); background: linear-gradient(var(--input_color), var(--input_color_dark));
padding: 6px 8px 6px 8px; padding: .4em .5em .4em .5em;
box-shadow: 2px 2px 6px -3px var(--shadow_color); box-shadow: 2px 2px 6px -3px var(--shadow_color);
font-weight: bold; font-size: 0.9em;
font-size: 0.85em; line-height: 1em;
overflow: hidden; overflow: hidden;
line-height: 1;
text-decoration: none; text-decoration: none;
font-family: inherit;
color: #bfbfbf; /* Fallback */ color: #bfbfbf; /* Fallback */
color: var(--input_text_color); color: var(--input_text_color);
outline: 0; outline: 0;
@@ -386,7 +384,7 @@ input[type="color"]:active,
select:active{ select:active{
background: linear-gradient(var(--input_color_dark), var(--input_color)); background: linear-gradient(var(--input_color_dark), var(--input_color));
box-shadow: inset 4px 4px 8px var(--shadow_color); box-shadow: inset 4px 4px 8px var(--shadow_color);
padding: 10px 4px 2px 12px; /* Exactly 4px offset compared to the inactive padding to give a depth effect */ padding: .6em .3em .2em .7em; /* Exactly .2em offset compared to the inactive padding to give a depth effect */
} }
.button_full_width {width: calc(100% - 6px);} .button_full_width {width: calc(100% - 6px);}
.button_highlight {background: linear-gradient(var(--highlight_color), var(--highlight_color_dark)) !important; color: var(--highlight_text_color) !important;} .button_highlight {background: linear-gradient(var(--highlight_color), var(--highlight_color_dark)) !important; color: var(--highlight_text_color) !important;}

27
res/static/style/viewer.css
View File

@@ -7,6 +7,7 @@ body{
overflow: hidden; overflow: hidden;
} }
/* Viewer container */
.file_viewer { .file_viewer {
position: absolute; position: absolute;
display: flex; display: flex;
@@ -17,6 +18,8 @@ body{
left: 0; left: 0;
overflow: hidden; overflow: hidden;
} }
/* Headerbar (row 1) */
.file_viewer > .highlight_headerbar { .file_viewer > .highlight_headerbar {
flex-grow: 0; flex-grow: 0;
flex-shrink: 0; flex-shrink: 0;
@@ -25,20 +28,15 @@ body{
text-align: left; text-align: left;
padding: 0.2em; padding: 0.2em;
} }
.file_viewer > .highlight_headerbar > .button_group {
/* Headerbar components */
.file_viewer > .highlight_headerbar > * {
flex-grow: 0; flex-grow: 0;
flex-shrink: 0; flex-shrink: 0;
margin-left: .4em;
margin-right: .4em;
display: inline-flex; display: inline-flex;
} }
.file_viewer > .highlight_headerbar > .button_toggle_toolbar {
flex-grow: 0;
flex-shrink: 0;
}
.file_viewer > .highlight_headerbar > .button_home {
flex-grow: 0;
flex-shrink: 0;
margin-right: .5em;
}
.file_viewer > .highlight_headerbar > .file_viewer_headerbar_title { .file_viewer > .highlight_headerbar > .file_viewer_headerbar_title {
flex-grow: 1; flex-grow: 1;
flex-shrink: 1; flex-shrink: 1;
@@ -47,11 +45,8 @@ body{
line-height: 2em; line-height: 2em;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
.file_viewer > .highlight_headerbar > .button_close_file_viewer {
flex-grow: 0; /* List Navigator (row 2) */
flex-shrink: 0;
margin-left: .5em;
}
.file_viewer > .list_navigator { .file_viewer > .list_navigator {
flex-grow: 0; flex-grow: 0;
flex-shrink: 0; flex-shrink: 0;
@@ -71,6 +66,8 @@ body{
height: 40px !important; height: 40px !important;
width: 250px !important; width: 250px !important;
} }
/* File preview area (row 3) */
.file_viewer > .file_viewer_window { .file_viewer > .file_viewer_window {
flex-grow: 1; flex-grow: 1;
flex-shrink: 1; flex-shrink: 1;

24
res/template/404.html
View File

@@ -6,18 +6,22 @@
</head> </head>
<body> <body>
<div id='body' class="body"> <div id="body" class="body">
{{template "menu" .}} {{template "menu" .}}
<br/>
<h1>This page does not exist!</h1> <h1>This page does not exist!</h1>
If you came here by a link from this very same website you can tell <p>
me about it on <a href="https://twitter.com/Fornax96">twitter</a>. If you came here by a link from this very same website you can
<br/><br/> tell me about it on
Either way, there's nothing to see here, so you'll have to <a href="https://twitter.com/Fornax96">twitter</a>.
<a href='/'>head over to the home page</a>. </p>
<br/> <p>
<br/> Either way, there's nothing to see here, so you'll have to
Bye! <a href='/'>head over to the home page</a>.
</p>
<p>
Bye!
</p>
{{template "footer"}} {{template "footer"}}
</div> </div>
{{template "analytics"}} {{template "analytics"}}

20
res/template/500.html
View File

@@ -1,7 +1,7 @@
{{define "500"}}<!DOCTYPE html> {{define "500"}}<!DOCTYPE html>
<html> <html>
<head> <head>
{{template "meta_tags" "Internal Server Error"}} {{template "meta_tags" "500, Internal Server Error"}}
{{template "user_style" .}} {{template "user_style" .}}
</head> </head>
@@ -10,15 +10,15 @@
{{template "menu" .}} {{template "menu" .}}
<br/> <br/>
<h1>You broke pixeldrain</h1> <h1>You broke pixeldrain</h1>
Great job. <p>
<br/><br/> Great job.
But not to worry, the engineering team has been pulled out of bed to </p>
have a look at the issue. You can try again in a few minutes (maybe <p>
hours, who knows?), or go back to the <a href='/'>home page</a> and Just kidding, something went wrong on the pixeldrain server and
start over. it's my fault. I'll soon be notified of the problem and will
<br/> take a look at it. You can try again in a few minutes (or
<br/> hours), or go back to the <a href='/'>home page</a> and start over.
Bye! </p>
{{template "footer"}} {{template "footer"}}
</div> </div>
{{template "analytics"}} {{template "analytics"}}

60
res/template/file_not_found.html
View File

@@ -1,19 +1,61 @@
{{define "file_not_found"}}<!DOCTYPE html> {{define "file_not_found"}}<!DOCTYPE html>
<html> <html>
<head> <head>
{{template "meta_tags" "File Not Found"}} {{template "meta_tags" "404, File Not Found"}}
{{template "user_style" .}} {{template "user_style" .}}
</head> </head>
<body> <body>
<div id="body"> <div id="body" class="body">
{{template "menu"}} {{template "menu" .}}
<h1>File not Found</h1>
I'm sorry, but this file does not exist!<br/>
It may have expired, or taken down by the owner.<br/>
You can <a href='/'>Visit the homepage to upload your own files</a>.
<br/><br/>
It was fun having you, bye for now!
<br/> <br/>
<h1>404, File Not Found!</h1>
<p>
This file does not exist, or it has been removed. Possible
reasons for this are:
</p>
<ul>
<li>The file has not been viewed for 100 days and has expired</li>
<li>Something went wrong on the pixeldrain servers causing the file to be temporarily unavailable</li>
<li>The file voilated copyright laws and has received a takedown request</li>
<li>The content was deemed illegal in some country and censorship was requested by a government organisation</li>
</ul>
<p>
I'm sorry for the inconvenience.
</p>
{{template "footer"}}
</div>
{{template "analytics"}}
</body>
</html>
{{end}}
{{define "list_not_found"}}<!DOCTYPE html>
<html>
<head>
{{template "meta_tags" "404, List Not Found"}}
{{template "user_style" .}}
</head>
<body>
<div id="body" class="body">
{{template "menu" .}}
<br/>
<h1>404, List Not Found!</h1>
<p>
This list does not exist, or it has been removed. Possible
reasons for this are:
</p>
<ul>
<li>All files in this list have not been viewed for 100 days and have expired</li>
<li>Something went wrong on the pixeldrain servers causing the list to be temporarily unavailable</li>
<li>The files in the list voilated copyright laws and have received a takedown request</li>
<li>The files in the list were deemed illegal in some country and censorship was requested by a government organisation</li>
</ul>
<p>
I'm sorry for the inconvenience.
</p>
{{template "footer"}} {{template "footer"}}
</div> </div>
{{template "analytics"}} {{template "analytics"}}

4
res/template/file_viewer.html
View File

@@ -52,7 +52,7 @@
</button> </button>
<button id="btnCopy" class="toolbar_button button_full_width" onClick="Toolbar.copyUrl();"> <button id="btnCopy" class="toolbar_button button_full_width" onClick="Toolbar.copyUrl();">
<img src="/res/img/clipboard_small.png" alt="Copy file URL to clipboard"/> <img src="/res/img/clipboard_small.png" alt="Copy file URL to clipboard"/>
<span>Copy</span> <span><u>C</u>opy Link</span>
</button> </button>
<button id="btnShare" class="toolbar_button button_full_width" onClick="Sharebar.toggle();"> <button id="btnShare" class="toolbar_button button_full_width" onClick="Sharebar.toggle();">
<img src="/res/img/share_small.png" alt="Share this file on social media"/> <img src="/res/img/share_small.png" alt="Share this file on social media"/>
@@ -60,7 +60,7 @@
</button> </button>
<button id="btnDetails" class="toolbar_button button_full_width" onClick="DetailsWindow.toggle();"> <button id="btnDetails" class="toolbar_button button_full_width" onClick="DetailsWindow.toggle();">
<img src="/res/img/info_small.png" alt="Help"/> <img src="/res/img/info_small.png" alt="Help"/>
<span>Details</span> <span>Deta<u>i</u>ls</span>
</button> </button>
{{template "advertisement" .}} {{template "advertisement" .}}

1
res/template/home.html
View File

@@ -92,6 +92,7 @@
your address bar. If you don't have Brave browser yet you your address bar. If you don't have Brave browser yet you
can download it here: can download it here:
<a class="button button_highlight" href="https://brave.com/pix009" target="_blank">Install Brave</a>. <a class="button button_highlight" href="https://brave.com/pix009" target="_blank">Install Brave</a>.
<button class="button_highlight">Install Brave</button>.
Installing and using Brave with this referral link also Installing and using Brave with this referral link also
counts as a 5$ donation. counts as a 5$ donation.
</li> </li>

8
webcontroller/file_viewer.go
View File

@@ -42,12 +42,14 @@ func (wc *WebController) serveFileViewer(w http.ResponseWriter, r *http.Request,
finfo = append(finfo, inf) finfo = append(finfo, inf)
} }
templateData := wc.newTemplateData(w, r)
if len(finfo) == 0 { if len(finfo) == 0 {
wc.serveNotFound(w, r) w.WriteHeader(http.StatusNotFound)
wc.templates.Get().ExecuteTemplate(w, "file_not_found", templateData)
return return
} }
templateData := wc.newTemplateData(w, r)
templateData.OGData = metadataFromFile(*finfo[0]) templateData.OGData = metadataFromFile(*finfo[0])
var err error var err error
if list { if list {
@@ -58,7 +60,7 @@ func (wc *WebController) serveFileViewer(w http.ResponseWriter, r *http.Request,
APIResponse: map[string]interface{}{ APIResponse: map[string]interface{}{
"data": finfo, "data": finfo,
"date_created": "now", "date_created": "now",
"title": "Concatenation of files", "title": "Multiple files",
"date_lastview": "now", "date_lastview": "now",
"views": 0, "views": 0,
}, },

6
webcontroller/list_viewer.go
View File

@@ -14,15 +14,17 @@ import (
func (wc *WebController) serveListViewer(w http.ResponseWriter, r *http.Request, p httprouter.Params) { func (wc *WebController) serveListViewer(w http.ResponseWriter, r *http.Request, p httprouter.Params) {
var api = pixelapi.New(wc.conf.APIURLInternal, "") var api = pixelapi.New(wc.conf.APIURLInternal, "")
var list, err = api.GetList(p.ByName("id")) var list, err = api.GetList(p.ByName("id"))
var templateData = wc.newTemplateData(w, r)
if err != nil { if err != nil {
if err, ok := err.(pixelapi.Error); ok && err.ReqError { if err, ok := err.(pixelapi.Error); ok && err.ReqError {
log.Error("API request error occurred: %s", err.Value) log.Error("API request error occurred: %s", err.Value)
} }
wc.serveNotFound(w, r) w.WriteHeader(http.StatusNotFound)
wc.templates.Get().ExecuteTemplate(w, "list_not_found", templateData)
return return
} }
var templateData = wc.newTemplateData(w, r)
templateData.Title = fmt.Sprintf("%s ~ Pixeldrain list", list.Title) templateData.Title = fmt.Sprintf("%s ~ Pixeldrain list", list.Title)
templateData.OGData = metadataFromList(*list) templateData.OGData = metadataFromList(*list)
templateData.Other = viewerData{ templateData.Other = viewerData{