Finish new style

res/static/script/Viewer.js

@@ -42,12 +42,14 @@ var Viewer = {
 		this.currentFile = file.id;
 		var title = "";
 		if (this.isList) {
-			title = this.title + " ~ " + file.name;
+			document.getElementById("file_viewer_headerbar_title").style.lineHeight = "1em";
+			document.getElementById("file_viewer_list_title").innerText = this.title;
+			document.getElementById("file_viewer_file_title").innerText = file.name;
+			document.title = this.title + " ~ " + file.name + " ~ PixelDrain";
 		} else {
-			title = file.name;
+			document.getElementById("file_viewer_file_title").innerText = file.name;
+			document.title = file.name + " ~ PixelDrain";
 		}
-		document.title = title + " ~ PixelDrain";
-		document.getElementById("file_viewer_headerbar_title").innerText = title;
 
 		$.get("/u/" + file.id + "/preview", function(response){
 			$("#filepreview").html(response);

res/static/script/compiled/home.js

@@ -151,11 +151,6 @@ document.addEventListener('drop', function (e) {
         handleUploads(e.dataTransfer.files);
     }
 });
-// Style selector
-$("input[name=style]").change(function (evt) {
-    Cookie.write("style", evt.target.id.substring(6));
-    location.reload();
-});
 function copyText(text) {
     // Create a textarea to copy the text from
     var ta = document.createElement("textarea");

res/static/style/layout.css

@@ -70,15 +70,6 @@ body{
 
 /* Page layout elements */
 
-.page_wrapper {
-	position: absolute;
-	top: 0;
-	right: 0;
-	bottom: 0;
-	left: 0;
-	overflow: hidden;
-}
-
 .button_toggle_navigation {
 	position: absolute;
 	z-index: 300;
@@ -92,23 +83,24 @@ body{
 	border-bottom-right-radius: 90%;
 	box-shadow: 2px 2px 8px -3px var(--shadow_color);
 }
-.page_wrapper > .page_navigation {
+.page_navigation {
 	position: absolute;
 	z-index: 100;
 	width: 250px;
+	top: 0;
+	bottom: 0;
+	left: 0;
 	float: left;
 	background-color: var(--layer_1_color);
-	left: 0;
-	bottom: 0;
-	top: 0;
 	padding: 20px 0 0.5em 0;
+	box-sizing: border-box;
 	overflow-y: auto;
 	overflow-x: hidden;
 	text-align: left;
 	box-shadow: inset -10px 0px 10px -10px var(--shadow_color);
 	transition: left 0.5s;
 }
-.page_wrapper > .page_body {
+.page_body {
 	position: absolute;
 	z-index: 200;
 	top: 0;
@@ -122,20 +114,18 @@ body{
 	overflow-x: hidden;
 	z-index: 50;
 	transition: left 0.5s;
-	padding-top: 40px;
-	background-image: var(--background_pattern);
-	background-attachment: local;
+	padding: 50px 0 50px 0;
 }
 @media (max-width: 600px) {
-	.page_wrapper > .page_navigation {
+	.page_navigation {
 		left: -250px;
 	}
-	.page_wrapper > .page_body {
+	.page_body {
 		left: 0;
 	}
 }
 
-.page_wrapper > .page_body > .page_content {
+.page_body > .page_content {
 	position: relative;
 	display: inline-block;
 	width: 100%;
@@ -146,7 +136,7 @@ body{
 	box-sizing: border-box;
 	clear: both;
 }
-.page_wrapper > .page_body > .page_content > .limit_width {
+.page_body > .page_content > .limit_width {
 	position: relative;
 	display: inline-block;
 	max-width: 1000px;
@@ -158,7 +148,7 @@ body{
 	word-break: break-word;
 	clear: both;
 }
-.page_wrapper > .page_body > h1 {
+.page_body > h1 {
 	text-shadow: 1px 1px 25px #000000;
 }
 
@@ -166,12 +156,12 @@ body{
 
 .header_image{
 	width: 100%;
-	max-width: 1000px;
+	max-width: 1200px;
 	margin-top: 30px;
 	margin-bottom: 30px;
 }
 
-.page_wrapper > .page_navigation a {
+.page_navigation a {
 	float: none;
 	display: block;
 	box-sizing: border-box;
@@ -188,8 +178,9 @@ body{
 	transition: background-color 0.5s;
 	border-radius: 5px;
 }
-.page_wrapper > .page_navigation a:hover {
+.page_navigation a:hover {
 	background-color: var(--input_color);
+	color: var(--input_text_color);
 	text-decoration: none;
 }
 
@@ -286,6 +277,9 @@ hr{
 	border-radius: 0.5em;
 	border: 0.22em solid var(--scrollbar_background_color);
 }
+::-webkit-scrollbar-thumb:hover {
+	background-color: var(--scrollbar_hover_color);
+}
 ::-webkit-scrollbar-corner{background: var(--scrollbar_background_color);}
 
 a       {color: var(--highlight_color); text-decoration: none;}

res/static/style/viewer.css

@@ -36,12 +36,29 @@
 .file_viewer > .highlight_headerbar > .file_viewer_headerbar_title {
 	flex-grow: 1;
 	flex-shrink: 1;
+	display: flex;
+	flex-direction: column;
 	overflow: hidden;
 	white-space: nowrap;
 	line-height: 2em;
 	text-overflow: ellipsis;
 }
-
+.file_viewer > .highlight_headerbar > .button_home::after {
+	content: "pixeldrain";
+}
+@media (max-width: 500px) {
+	.file_viewer > .highlight_headerbar > .button_home::after {
+		content: "pd";
+	}
+	.file_viewer > .highlight_headerbar > .list_navigator_buttons {
+		display: none;
+	}
+}
+.file_viewer > .highlight_headerbar > .file_viewer_headerbar_title > span {
+	flex-grow: 0;
+	flex-shrink: 0;
+	margin-right: 1em;
+}
 /* List Navigator (row 2) */
 .file_viewer > .list_navigator {
 	flex-grow: 0;
@@ -60,7 +77,7 @@
 }
 .file_viewer > .list_navigator > .list_item{
 	height: 2.6em !important;
-	width: 250px !important;
+	width: 220px !important;
 }
 
 /* File preview area (row 3) */
@@ -244,7 +261,7 @@
 	flex-direction: column;
 	opacity: 0;
 	transition: visibility .5s, opacity .5s;
-	background-color: var(--body_color);
+	background-color: var(--layer_1_color);
 	border-color: var(--layer_1_color_border);
 	max-height: 100%;
 	max-width: 100%;

res/static/typescript/home/home.ts

@@ -183,12 +183,6 @@ document.addEventListener('drop', function(e: DragEvent){
 	}
 })
 
-// Style selector
-$("input[name=style]").change(function(evt){
-	Cookie.write("style", evt.target.id.substring(6))
-	location.reload()
-})
-
 function copyText(text: string) : boolean {
 	// Create a textarea to copy the text from
 	var ta = document.createElement("textarea");

res/template/about.html

@@ -7,7 +7,7 @@
 
 	<body>
 		{{template "page_top" .}}
-		<h1>About Pixeldrain</h1>
+		<h1>About pixeldrain</h1>
 		<div class="page_content"><div class="limit_width">
 			<h2>Questions and Answers</h2>
 
@@ -94,7 +94,7 @@
 				appearance of the website for you.
 			</p>
 
-			<h2>Legality</h2>
+			<h2 id="legality">Legality</h2>
 			<p>
 				I cannot be held liable for any illegal and / or copyrighted
 				material that's uploaded by the users of this application.

res/template/account/user_files.html

@@ -44,7 +44,7 @@
 			</a><!--
 			-->{{end}}
 
-			<br/>
+			<br/><br/>
 			<div class="highlight_dark">
 				{{if ne $page 0}}
 					<a href="?page={{sub $page 4}}" class="button">🡄 4 Pages</a>

res/template/account/user_home.html

@@ -20,7 +20,7 @@
 
 			<h2>Your most recently uploaded files:</h2>
 			<div class="highlight_dark">
-				{{$files := .PixelAPI.UserFiles 0 18}}
+				{{$files := .PixelAPI.UserFiles 0 15}}
 				{{range $files.Files}}<!--
 					--><a class="file_button" href="/u/{{.ID}}" target="_blank">
 						<img src="{{$.APIEndpoint}}/file/{{.ID}}/thumbnail" alt="{{.Name}}" />
@@ -34,7 +34,7 @@
 			</div>
 			<h2>Your most recently created lists:</h2>
 			<div class="highlight_dark">
-				{{$lists := .PixelAPI.UserLists 0 18}}
+				{{$lists := .PixelAPI.UserLists 0 15}}
 				{{range $lists.Lists}}<!--
 					--><a class="file_button" href="/l/{{.ID}}" target="_blank">
 						<img src="{{$.APIEndpoint}}/list/{{.ID}}/thumbnail" alt="{{.Title}}" />

res/template/account/user_lists.html

@@ -38,7 +38,7 @@
 				</a><!--
 			-->{{end}}
 
-			<br/>
+			<br/><br/>
 			<div class="highlight_dark">
 				{{if ne $page 0}}
 					<a href="?page={{sub $page 4}}" class="button">🡄 4 Pages</a>

res/template/apidoc.html

@@ -31,7 +31,7 @@
 
 	<body>
 		{{template "page_top" .}}
-		<h1>Pixeldrain API Documentation</h1>
+		<h1>Pixeldrain API documentation</h1>
 
 		<div class="page_content"><div class="limit_width">
 			<p>
@@ -80,10 +80,10 @@
 			{{template "api-list-post"}}
 			{{template "api-list-get"}}
 
-			<h2>Filesystem Methods</h2>
-			{{template "api-filesystem-path-post"}}
-			{{template "api-filesystem-path-get"}}
-			{{template "api-filesystem-path-delete"}}
+			<!--<h2>Filesystem Methods</h2>-->
+			{{/*template "api-filesystem-path-post"*/}}
+			{{/*template "api-filesystem-path-get"*/}}
+			{{/*template "api-filesystem-path-delete"*/}}
 		</div></div>
 		{{template "page_bottom" .}}
 		{{template "analytics"}}

res/template/appearance.html

@@ -0,0 +1,46 @@
+{{define "appearance"}}<!DOCTYPE html>
+<html>
+	<head>
+		{{template "meta_tags" "Appearance settings"}}
+		{{template "user_style" .}}
+	</head>
+
+	<body>
+		{{template "page_top" .}}
+		<h1>Change website appearance</h1>
+		<div class="page_content"><div class="limit_width">
+			<p>
+				You can change how pixeldrain looks! Your theme choice will
+				be saved in a cookie.
+			</p>
+			<div class="indent">
+				<input type="radio" id="style_default"        name="style"><label for="style_default">Pixeldrain Style</label><br/>
+				<input type="radio" id="style_solarized_dark" name="style"><label for="style_solarized_dark">Solarized Dark Style</label><br/>
+				<input type="radio" id="style_maroon"         name="style"><label for="style_maroon">Maroon Style</label><br/>
+				<input type="radio" id="style_hacker"         name="style"><label for="style_hacker">Hacker Style</label><br/>
+				<input type="radio" id="style_canta"          name="style"><label for="style_canta">Canta Style</label>
+				(Inspired by <a href="https://github.com/vinceliuice/Canta-theme" target="_blank">Canta GTK</a>)<br/>
+				<input type="radio" id="style_arc"            name="style"><label for="style_arc">Arc Style</label>
+				(Inspired by <a href="https://github.com/horst3180/Arc-theme" target="_blank">Arc GTK</a>)<br/>
+				<input type="radio" id="style_deepsea"        name="style"><label for="style_deepsea">Deep Sea Style</label><br/>
+				<!--<input type="radio" id="style_sunny"          name="style"><label for="style_sunny">Sunny Style</label>-->
+			</div>
+		</div></div>
+
+		<script>
+		// Style selector
+		document.getElementsByName("style").forEach(function(elem) {
+			elem.addEventListener("change", function(evt){
+				var date = new Date();
+				date.setTime(date.getTime() + (10 * 365 * 24 * 60 * 60 * 1000));
+				document.cookie = "style=" + evt.target.id.substring(6) + "; expires=" + date.toUTCString() + "; path=/";
+
+				location.reload();
+			})
+		});
+		</script>
+		{{template "page_bottom"}}
+		{{template "analytics"}}
+	</body>
+</html>
+{{end}}

res/template/file_viewer.html

@@ -26,10 +26,15 @@
 			<div id="file_viewer_headerbar" class="highlight_headerbar">
 				<button id="button_toggle_toolbar" class="button_toggle_toolbar" onClick="Toolbar.toggle();">☰</button>
 				<a href="/" id="button_home" class="button button_home">
-					<img src="/res/img/pixeldrain_transparent.png" alt="Back to the Home page" style="height: 1.5em; margin: -0.3em;"/>
+					<img src="/res/img/pixeldrain_transparent.png"
+						alt="Back to the Home page"
+						style="height: 1.5em; margin: -0.2em; margin-right: 0.2em;"/>
 				</a>
-				<span id="file_viewer_headerbar_title" class="file_viewer_headerbar_title">{{.Title}}</span>
-				<div id="list_navigator_buttons" class="button_group"></div>
+				<div id="file_viewer_headerbar_title" class="file_viewer_headerbar_title">
+					<div id="file_viewer_list_title"></div>
+					<div id="file_viewer_file_title">{{.Title}}</div>
+				</div>
+				<div id="list_navigator_buttons" class="button_group list_navigator_buttons"></div>
 				<button id="button_close_file_viewer" class="button_close_file_viewer button_red" onClick="window.close();">🞫</button>
 			</div>
 			<div id="list_navigator" class="list_navigator"></div>

res/template/fragments/meta_tags.html

@@ -9,9 +9,8 @@
 <link rel="icon" sizes="256x256" href="/res/img/pixeldrain_big.png"/>
 
 <meta name="description" content="Pixeldrain is a free file sharing service, you
-	  can upload any file and you will be given a shareable link right away.
-	  PixelDrain also supports previews for images, videos, audio, PDFs and much more.
-	  Uncensored, unmonitored and unmoderated."/>
+can upload any file and you will be given a shareable link right away.
+pixeldrain also supports previews for images, videos, audio, PDFs and much more."/>
 <meta property="og:type" content="website" />
 <meta property="og:title" content="{{.}} ~ pixeldrain" />
 <meta property="og:site_name" content="pixeldrain" />

res/template/fragments/page_wrap.html

@@ -1,37 +1,34 @@
 {{define "page_top"}}
-<div id="page_wrapper" class="page_wrapper">
-	<button id="button_toggle_navigation" class="button_toggle_navigation" onClick="toggleMenu();">☰</button>
-
-	<div id="page_navigation" class="page_navigation">
-		<a href="/">Home</a>
-		<hr/>
-		{{if .Authenticated}}<a href="/user">{{.Username}}</a>
-		<a href="/user/files">My Files</a>
-		<a href="/user/lists">My Lists</a>
-		<a href="/logout">Log out</a>
-		{{else}}
-		<a href="/login">Login</a>
-		<a href="/register">Register</a>
-		<a href="/history">Upload History</a>
-		{{end}}
-		<hr/>
-		<a href="/about">About</a>
-		<!--<a href="/technology">Technology</a>-->
-		<a href="/api">API</a>
-	</div>
-	<div id="page_body" class="page_body">
+<button id="button_toggle_navigation" class="button_toggle_navigation" onclick="toggleMenu();">☰</button>
+<div id="page_navigation" class="page_navigation">
+	<a href="/">Home</a>
+	<hr/>
+	{{if .Authenticated}}<a href="/user">{{.Username}}</a>
+	<a href="/user/files">My Files</a>
+	<a href="/user/lists">My Lists</a>
+	<a href="/logout">Log out</a>
+	{{else}}
+	<a href="/login">Login</a>
+	<a href="/register">Register</a>
+	<a href="/history">Upload History</a>
+	{{end}}
+	<hr/>
+	<a href="/about">About</a>
+	<!--<a href="/technology">Technology</a>-->
+	<a href="/api">API</a>
+	<a href="/appearance">Appearance</a>
+</div>
+<div id="page_body" class="page_body">
 {{end}}
 
 {{define "page_bottom"}}
-		<br/>
-		<div class="highlight_dark" style="margin-bottom: 100px;">
-			Pixeldrain is a product by <a href="//fornaxian.com" target="_blank">Fornaxian Technologies</a> |
-			Twitter:&nbsp;<a href="https://twitter.com/Fornax96" target="_blank">@Fornax96</a>
-			Reddit:&nbsp;<a href="https://reddit.com/r/pixeldrain" target="_blank">/r/pixeldrain</a>
-			Medium:&nbsp;<a href="https://medium.com/pixeldrain" target="_blank">Pixeldrain</a>
-		</div>
-	</div><!-- end page_body -->
-</div><!-- end page_wrapper-->
+	<div class="highlight_dark">
+		Pixeldrain is a product by <a href="//fornaxian.com" target="_blank">Fornaxian Technologies</a> |
+		Twitter:&nbsp;<a href="https://twitter.com/Fornax96" target="_blank">@Fornax96</a>
+		Reddit:&nbsp;<a href="https://reddit.com/r/pixeldrain" target="_blank">/r/pixeldrain</a>
+		Medium:&nbsp;<a href="https://medium.com/pixeldrain" target="_blank">Pixeldrain</a>
+	</div>
+</div><!-- end page_body -->
 
 <script>
 var nav = document.getElementById("page_navigation");
@@ -41,13 +38,13 @@ function toggleMenu() {
 	if (nav.offsetLeft === 0) {
 		// Menu is visible
 
-		nav.style.left = -nav.clientWidth + "px";
+		nav.style.left = -nav.offsetWidth + "px";
 		body.style.left = "0";
 	} else {
 		// Menu is hidden
 
 		nav.style.left = "0";
-		body.style.left = nav.clientWidth + "px";
+		body.style.left = nav.offsetWidth + "px";
 	}
 }
 </script>

res/template/home.html

@@ -9,7 +9,7 @@
 	<body>
 		{{template "page_top" .}}
 
-		<img id="header_image" class="header_image" src="/res/img/header_neuropol.png" alt="Header image"/>
+		<img id="header_image" class="header_image" src="/res/img/header_2019.png" alt="Header image"/>
 		<br/>
 		<div class="page_content">
 			<input id="file_input_field" type="file" name="file" multiple="multiple"/>
@@ -30,7 +30,7 @@
 
 			<br/>
 			<div class="limit_width">
-				<h1>What is Pixeldrain?</h1>
+				<h1>What is pixeldrain?</h1>
 				<p>
 					Pixeldrain is a file sharing website built for speed and
 					ease of use. Pixeldrain does not cost any money, though
@@ -60,23 +60,6 @@
 					For more information see the <a href="/about">about</a>
 					page.
 				</p>
-
-				<h2>Style selector</h2>
-				<p>
-					You can change how pixeldrain looks! Your theme choice will
-					be saved in a cookie.
-				</p>
-				<div class="indent">
-					<input type="radio" id="style_default"        name="style"><label for="style_default">Pixeldrain Style</label><br/>
-					<input type="radio" id="style_solarized_dark" name="style"><label for="style_solarized_dark">Solarized Dark Style</label><br/>
-					<input type="radio" id="style_maroon"         name="style"><label for="style_maroon">Maroon Style</label><br/>
-					<input type="radio" id="style_hacker"         name="style"><label for="style_hacker">Hacker Style</label><br/>
-					<input type="radio" id="style_canta"          name="style"><label for="style_canta">Canta Style</label>
-					(Inspired by <a href="https://github.com/vinceliuice/Canta-theme" target="_blank">Canta GTK</a>)<br/>
-					<input type="radio" id="style_arc"            name="style"><label for="style_arc">Arc Style</label>
-					(Inspired by <a href="https://github.com/horst3180/Arc-theme" target="_blank">Arc GTK</a>)<br/>
-					<input type="radio" id="style_sunny"          name="style"><label for="style_sunny">Sunny Style</label>
-				</div>
 			</div>
 		</div>