Theming changes

This commit is contained in:
2022-06-07 14:43:01 +02:00
parent aed4c3b301
commit 6bed9e9374
96 changed files with 649 additions and 495 deletions

View File

@@ -2,7 +2,6 @@
<html lang="en">
<head>
{{template "meta_tags" "Not Found"}}
{{template "user_style" .}}
</head>
<body>

View File

@@ -2,7 +2,6 @@
<html lang="en">
<head>
{{template "meta_tags" "451, Unavailable For Legal Reasons"}}
{{template "user_style" .}}
</head>
<body>

View File

@@ -2,7 +2,6 @@
<html lang="en">
<head>
{{template "meta_tags" "500, Internal Server Error"}}
{{template "user_style" .}}
</head>
<body>

View File

@@ -4,7 +4,6 @@
{{if and .Authenticated .User.IsAdmin}}
<head>
{{template "meta_tags" "Administrator panel"}}
{{template "user_style" .}}
<script>
window.api_endpoint = '{{.APIEndpoint}}';
@@ -20,7 +19,6 @@
{{else}}
<head>
{{template "meta_tags" "Administrator panel"}}
{{template "user_style" .}}
</head>
<body>
{{template "page_top" .}}

View File

@@ -2,7 +2,7 @@
<html lang="en">
<head>
{{template "meta_tags" "Appearance settings"}}
{{template "user_style" .}}
<link id="stylesheet_theme_2" rel="stylesheet" type="text/css" href="/theme.css"/>
</head>
<body>
@@ -24,6 +24,8 @@
<input type="radio" id="style_nord_dark" name="style"><label for="style_nord_dark">Nord dark</label>
<br/>
<input type="radio" id="style_nord_light" name="style"><label for="style_nord_light">Nord light</label>
<!-- <br/>
Hue: <input id="hue" type="number" min="0" max="360" placeholder="0"/><br/> -->
<br/>
<br/>
<input type="radio" id="style_solarized" name="style"><label for="style_solarized">Solarized</label>
@@ -50,30 +52,56 @@
<br/>
Other (experimental) themes
<br/>
<input type="radio" id="style_maroon" name="style"><label for="style_maroon">Maroon Style</label>
<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>
<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>
<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_skeuos" name="style"><label for="style_skeuos">Skeuos Style</label>
<input type="radio" id="style_skeuos" name="style"><label for="style_skeuos">Skeuos Style</label>
(Inspired by <a href="https://www.gnome-look.org/p/1441725/" target="_blank">Skeuos GTK</a>)
<br/>
<input type="radio" id="style_sweet" name="style"><label for="style_sweet">Sweet</label>
<input type="radio" id="style_sweet" name="style"><label for="style_sweet">Sweet</label>
</div>
</section>
<script>
let style = "nord"
let hue = -1
// 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();
elem.addEventListener("change", e => {
style = e.target.id.substring(6)
setStyle()
})
});
document.getElementById("hue").addEventListener("change", e => {
hue = e.target.value
setStyle()
})
function setStyle() {
var date = new Date();
date.setTime(date.getTime() + (10 * 365 * 24 * 60 * 60 * 1000));
document.cookie = "style="+style+"; expires=" + date.toUTCString() + "; path=/"
if (hue >= 0 && hue <= 360) {
document.cookie = "hue="+hue+"; expires=" + date.toUTCString() + "; path=/"
}
let stylesheet1 = document.getElementById("stylesheet_theme")
let stylesheet2 = document.getElementById("stylesheet_theme_2")
// First load the sheet in the secondary tag, wait for it to load,
// and replace the original sheet when it has finished loading
stylesheet2.href= "/theme.css?style="+style+"&hue="+hue
stylesheet2.onload = e => {
stylesheet1.href= "/theme.css?style="+style+"&hue="+hue
}
}
</script>
{{template "page_bottom" .}}
{{template "analytics"}}

View File

@@ -2,7 +2,6 @@
<html lang="en">
<head>
{{template "meta_tags" "Apps"}}
{{template "user_style" .}}
<style>
.specs {

View File

@@ -2,7 +2,6 @@
<html lang="en">
<head>
{{template "meta_tags" "Directory upload"}}
{{template "user_style" . }}
<script>
window.api_endpoint = '{{.APIEndpoint}}';

View File

@@ -2,7 +2,6 @@
<html lang="en">
<head>
{{template "meta_tags" "E-mail verification"}}
{{template "user_style" .}}
</head>
<body>
{{template "page_top" .}}

View File

@@ -2,7 +2,6 @@
<html lang="en">
<head>
{{template "meta_tags" "404, File Not Found"}}
{{template "user_style" .}}
</head>
<body>
@@ -44,7 +43,6 @@
<html lang="en">
<head>
{{template "meta_tags" "404, List Not Found"}}
{{template "user_style" .}}
</head>
<body>

View File

@@ -5,7 +5,9 @@
<title>{{.Title}}</title>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
{{template "user_style" .}}
<link id="stylesheet_layout" rel="stylesheet" type="text/css" href="/res/style/layout.css"/>
<link id="stylesheet_theme" rel="stylesheet" type="text/css" href="/theme.css"/>
<link rel="icon" sizes="32x32" href="/res/img/pixeldrain_32.png" />
<link rel="icon" sizes="128x128" href="/res/img/pixeldrain_128.png" />

View File

@@ -7,7 +7,8 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
{{ template "opengraph" .OGData }}
{{ template "user_style" . }}
<link id="stylesheet_layout" rel="stylesheet" type="text/css" href="/res/style/layout.css"/>
<link id="stylesheet_layout" rel="stylesheet" type="text/css" href="{{.Other.ThemeURI}}"/>
<link rel="icon" sizes="32x32" href="/res/img/pixeldrain_32.png" />
<link rel="icon" sizes="128x128" href="/res/img/pixeldrain_128.png" />

View File

@@ -5,7 +5,9 @@
<title>{{.Title}}</title>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
{{template "user_style" .}}
<link id="stylesheet_layout" rel="stylesheet" type="text/css" href="/res/style/layout.css"/>
<link id="stylesheet_theme" rel="stylesheet" type="text/css" href="/theme.css"/>
<link rel="icon" sizes="32x32" href="/res/img/pixeldrain_32.png" />
<link rel="icon" sizes="128x128" href="/res/img/pixeldrain_128.png" />

View File

@@ -103,7 +103,6 @@
<html lang="en">
<head>
{{template "meta_tags" .Title}}
{{template "user_style" .}}
<script>var apiEndpoint = '{{.APIEndpoint}}';</script>
</head>

View File

@@ -2,7 +2,6 @@
<html lang="en">
<head>
{{template "meta_tags" .Title}}
{{template "user_style" .}}
</head>
<body>

View File

@@ -3,6 +3,10 @@
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
<meta name="theme-color" content="#220735" />
<link id="stylesheet_layout" rel="stylesheet" type="text/css" href="/res/style/layout.css"/>
<link id="stylesheet_theme" rel="stylesheet" type="text/css" href="/theme.css"/>
<link rel="icon" sizes="32x32" href="/res/img/pixeldrain_32.png" />
<link rel="icon" sizes="128x128" href="/res/img/pixeldrain_128.png" />
<link rel="icon" sizes="152x152" href="/res/img/pixeldrain_152.png" />

View File

@@ -1,6 +0,0 @@
{{define "user_style"}}
<style>
{{.UserStyle}}
{{template "layout.css" .}}
</style>
{{end}}

View File

@@ -2,7 +2,6 @@
<html lang="en">
<head>
{{template "meta_tags" "Upload History"}}
{{template "user_style" .}}
</head>
<body>
{{template "page_top" .}}
@@ -23,7 +22,93 @@
<script>
let apiEndpoint = '{{.APIEndpoint}}';
{{template `history.js`}}
function renderFileButton(apiURL, id, title, subtitle) {
let btn = document.createElement("a")
btn.classList = "file_button"
btn.href = "/u/" + id
btn.target = "_blank"
let thumbnail = document.createElement("img")
thumbnail.src = apiURL + "/file/" + id + "/thumbnail?width=80&height=80"
thumbnail.alt = title
let titleSpan = document.createElement("span")
titleSpan.classList = "file_button_title"
titleSpan.innerText = title
let br = document.createElement("br")
let subtitleSpan = document.createElement("span")
subtitleSpan.classList = "file_button_subtitle"
subtitleSpan.innerText = subtitle
btn.appendChild(thumbnail)
btn.appendChild(titleSpan)
btn.appendChild(br)
btn.appendChild(subtitleSpan)
return btn
}
function getCookie(name) {
var result = new RegExp('(?:^|; )' + encodeURIComponent(name) + '=([^;]*)').exec(document.cookie)
return result ? result[1] : null
}
function printDate(date, hours, minutes, seconds) {
let dateStr = date.getFullYear()
+ "-" + ("00" + (date.getMonth() + 1)).slice(-2)
+ "-" + ("00" + date.getDate()).slice(-2)
if (hours) { dateStr += " " + ("00" + date.getHours()).slice(-2) }
if (minutes) { dateStr += ":" + ("00" + date.getMinutes()).slice(-2) }
if (seconds) { dateStr += ":" + ("00" + date.getMinutes()).slice(-2) }
return dateStr
}
// Get the uploads from localstorage
let uploadsStr = localStorage.getItem("uploaded_files")
if (uploadsStr === null) { uploadsStr = "" }
let uploads = Array()
if (uploadsStr != "") {
// Strip the trailing comma
uploads = uploadsStr.slice(0, -1).split(",")
}
// Get the uploads from a cookie
uploadsStr = getCookie("pduploads")
if (uploadsStr === null) { uploadsStr = "" }
if (uploadsStr != "") {
uploadsStr = uploadsStr.slice(0, -1) // Strip the trailing dot
uploads.push(uploadsStr.split(".").reverse())
}
// Render all the items
function getHistoryItem() {
let item = uploads.shift()
if (item === undefined || item === "") { return }
fetch(
apiEndpoint + "/file/" + item + "/info"
).then(resp => {
if (!resp.ok) {
return Promise.reject()
}
return resp.json()
}).then(resp => {
document.getElementById("uploaded_files").appendChild(
renderFileButton(
apiEndpoint,
resp.id,
resp.name,
printDate(new Date(resp.date_upload), true, true, true),
)
)
getHistoryItem()
}).catch(err => {
console.log("Fetch failed: " + err)
getHistoryItem()
})
}
getHistoryItem()
</script>
{{template "analytics"}}
</body>

View File

@@ -3,7 +3,7 @@
<html lang="en">
<head>
{{template "meta_tags" "Free file sharing service"}}
{{template "user_style" .}}
<style>
/* Override the default background with something spectacular */
header, footer, .checkers {

View File

@@ -2,7 +2,6 @@
<html lang="en">
<head>
{{template "meta_tags" "Maintenance"}}
{{template "user_style" .}}
</head>
<body>

View File

@@ -3,7 +3,6 @@
<html lang="en">
<head>
{{template "meta_tags" "Text upload"}}
{{template "user_style" .}}
<script>
window.api_endpoint = '{{.APIEndpoint}}';

View File

@@ -2,7 +2,7 @@
<html lang="en">
<head>
{{template "meta_tags" "Buckets"}}
{{template "user_style" .}}
<script>window.api_endpoint = '{{.APIEndpoint}}';</script>
<link rel='stylesheet' href='/res/svelte/user_buckets.css?v{{.CacheID}}'>
<script defer src='/res/svelte/user_buckets.js?v{{.CacheID}}'></script>

View File

@@ -2,7 +2,6 @@
<html lang="en">
<head>
{{template "meta_tags" "File Manager"}}
{{template "user_style" .}}
<script>
window.api_endpoint = '{{.APIEndpoint}}';

View File

@@ -2,7 +2,6 @@
<html lang="en">
<head>
{{template "meta_tags" .User.Username }}
{{template "user_style" . }}
<script>
window.api_endpoint = '{{.APIEndpoint}}';

View File

@@ -2,7 +2,6 @@
<html lang="en">
<head>
{{template "meta_tags" "Logging out..."}}
{{template "user_style" .}}
</head>
<body>
{{template "page_top" .}}

View File

@@ -3,7 +3,6 @@
<html lang="en">
<head>
{{template "meta_tags" "Free file sharing service"}}
{{template "user_style" .}}
</head>
<body>
{{template "page_top" .}}