Convert every page to new layout

This commit is contained in:
2019-09-17 23:38:40 +02:00
parent b1107236cd
commit 9f836801f2
28 changed files with 586 additions and 642 deletions

View File

@@ -1,3 +0,0 @@
{{define "bgpattern"}}
<style>.checkers{background-image: url("/res/img/{{bgPattern}}");}</style>
{{end}}

View File

@@ -24,7 +24,7 @@
<!-- The invisible username field is so browsers know which user the form was for -->
<input type="text" autocomplete="username" value="{{.Username}}" style="display: none;" readonly="readonly"/>
{{end}}
<table style="margin-left: auto; margin-right: auto; text-align: left; max-width: 30em;">
<table class="form">
{{range $index, $field := .Fields}}
<tr class="form">
<td>{{$field.Label}}</td>
@@ -91,11 +91,12 @@
<body>
<div id='body' class="body">
{{template "menu" .}}
{{template "form" .Form}}
{{template "footer"}}
{{template "page_top" .}}
<div class="page_content"><div class="limit_width">
{{template "form" .Form}}
<br/>
</div></div>
{{template "page_bottom" .}}
</div>
{{template "analytics"}}

View File

@@ -2,12 +2,11 @@
<title>{{.}} ~ PixelDrain</title>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" href="/res/style/layout.css"/>
<link rel="stylesheet" href="/res/style/layout.css?v2"/>
<link rel="shortcut icon" href="/res/img/tray32.png"/>
<meta name="theme-color" content="#75AD38"/>
<link rel="icon" sizes="180x180" href="/res/img/pixeldrain.png"/>
<link rel="icon" sizes="256x256" href="/res/img/pixeldrain_big.png"/>
{{template "bgpattern"}}
<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.

View File

@@ -1,55 +1,53 @@
{{define "page_top"}}
<div id="page_wrapper" class="page_wrapper">
<div id="page_header" class="page_header highlight_headerbar navigation">
<button id="button_toggle_toolbar" class="button_toggle_toolbar" onClick="toggleMenu();"></button>
<span>Pixeldrain ~ Free file sharing</span>
</div>
<button id="button_toggle_navigation" class="button_toggle_navigation" onClick="toggleMenu();"></button>
<div id="page_content_wrapper" class="page_content_wrapper">
<div id="page_navigation" class="page_navigation">
<a href="/">Home</a>
<hr/>
{{if .Authenticated}}<a href="/user">{{.Username}}</a>
<a href="{{if .Authenticated}}/user/files{{else}}/history{{end}}">My&nbsp;Files</a>
{{if .Authenticated}}<a href="/user/lists">My&nbsp;Lists</a>{{end}}
<a href="/logout" style="vertical-align: 0.6em; font-size: 0.9em; padding: 1px;">(Log out)</a>{{else}}
<a href="/login">Login</a>
<a href="/register">Register</a>
{{end}}
<hr/>
<a href="/api">API</a>
</div>
<div id="page_content" class="page_content">
<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">
{{end}}
{{define "page_bottom"}}
<br/>
<div class="checkers inset" style="height: 100px;"></div>
<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_content -->
</div><!-- end page_content_wrapper -->
<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-->
<script>
var nav = document.getElementById("page_navigation");
var content = document.getElementById("page_content");
var body = document.getElementById("page_body");
function toggleMenu() {
if (nav.offsetLeft === 0) {
// Menu is visible
nav.style.left = -nav.clientWidth - 10 + "px";
content.style.left = "0";
nav.style.left = -nav.clientWidth + "px";
body.style.left = "0";
} else {
// Menu is hidden
nav.style.left = "0";
content.style.left = nav.clientWidth + "px";
body.style.left = nav.clientWidth + "px";
}
}
</script>

View File

@@ -1,5 +1,14 @@
{{define "user_style"}}
<style>
{{.UserStyle}}
body,
.checkers {
background-image: url("/res/img/{{bgPattern}}");
}
:root {
--background_pattern: url("/res/img/{{bgPattern}}");
}
</style>
{{end}}