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

Replace CSS classes with semantic HTML

Browse Source
This commit is contained in:
Fornax
2022-01-11 13:28:22 +01:00
parent c6f0421ad3
commit 8719d9b0f9
37 changed files with 1215 additions and 1279 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
res/include/style/layout.css
View File

@@ -46,8 +46,11 @@ a > svg { vertical-align: middle; }
*, *::before, *::after {
box-sizing: border-box;
}
html, body { overflow-x: hidden; }
body{
html, body {
/* This makes sure that no scrollbar shows up when the menu is open on small screens*/
overflow-x: hidden;
}
body {
margin: 0;
font-family: system-ui, sans-serif;
font-size: 17px;
@@ -56,20 +59,26 @@ body{
background-color: var(--layer_1_color);
padding: 0;
}
.checkers {
header, footer, .checkers {
background-image: url("{{bgPattern}}");
background-color: #111111; /* Fallback */
background-color: var(--layer_1_color);
background-repeat: repeat;
background-blend-mode: luminosity;
}
.inset {
header, footer {
padding-top: 70px;
box-shadow: inset 1px 1px 10px 0 var(--shadow_color);
border-radius: 12px;
text-align: center;
overflow: hidden;
}
header > h1 {
text-shadow: 1px 1px 10px var(--shadow_color);
}
footer {
padding: 200px 8px 40px 8px;
}
/* Page layout elements */
@@ -131,7 +140,7 @@ body{
padding: 4px;
}
}
.limit_width {
section {
position: relative;
display: inline-block;
max-width: 1000px;
@@ -141,10 +150,6 @@ body{
text-align: left;
clear: both;
}
.page_body > h1 {
text-shadow: 1px 1px 25px #000000;
text-shadow: 1px 1px 25px var(--shadow_color);
}
/* Page contents */

8
res/template/404.html
View File

@@ -7,10 +7,10 @@
<body>
{{template "page_top" .}}
<div class="checkers inset">
<header>
<h1>This page does not exist!</h1>
</div>
<div class="limit_width">
</header>
<section>
<p>
If you came here by a link from this very same website you can
tell me about it on
@@ -23,7 +23,7 @@
<p>
Bye!
</p>
</div>
</section>
{{template "page_bottom" .}}
{{template "analytics"}}
</body>

8
res/template/451.html
View File

@@ -7,15 +7,15 @@
<body>
{{template "page_top" .}}
<div class="checkers inset">
<header>
<h1>451, Unavailable For Legal Reasons</h1>
</div>
<div class="limit_width">
</header>
<section>
<p>
Hello. This file has received an abuse report and has been taken
down. It cannot be shared anymore.
</p>
</div>
</section>
{{template "page_bottom" .}}
{{template "analytics"}}
</body>

8
res/template/500.html
View File

@@ -7,10 +7,10 @@
<body>
{{template "page_top" .}}
<div class="checkers inset">
<header>
<h1>You broke pixeldrain</h1>
</div>
<div class="limit_width">
</header>
<section>
<p>
Great job.
</p>
@@ -24,7 +24,7 @@
try again in a few minutes (or hours), or go back to the <a
href='/'>home page</a> and start over.
</p>
</div>
</section>
{{template "page_bottom" .}}
{{template "analytics"}}
</body>

8
res/template/appearance.html
View File

@@ -7,10 +7,10 @@
<body>
{{template "page_top" .}}
<div class="checkers inset">
<header>
<h1>Change website appearance</h1>
</div>
<div class="limit_width">
</header>
<section>
<p>
You can change how pixeldrain looks! Your theme choice will
be saved in a cookie.
@@ -30,7 +30,7 @@
(Inspired by <a href="https://www.gnome-look.org/p/1441725/" target="_blank">Skeuos GTK</a>)<br/>
<!--<input type="radio" id="style_sunny" name="style"><label for="style_sunny">Sunny Style</label>-->
</div>
</div>
</section>
<script>
// Style selector

8
res/template/apps.html
View File

@@ -14,10 +14,10 @@
<body>
{{template "page_top" .}}
<div class="checkers inset">
<header>
<h1>Apps</h1>
</div>
<div class="limit_width">
</header>
<section>
<h2>ShareX</h2>
<div class="specs">
Platform: Windows 7, 8.1 and 10 |
@@ -110,7 +110,7 @@
please send them to
<a href="mailto:support@pixeldrain.com">support@pixeldrain.com</a>.
</p>
</div>
</section>
{{template "page_bottom" .}}
{{template "analytics"}}
</body>

15
res/template/email_confirm.html
View File

@@ -7,27 +7,38 @@
<body>
{{template "page_top" .}}
<div class="limit_width">
{{if eq .Other "success"}}
<header>
<h1>Success!</h1>
</header>
<section>
<p>
Your account's e-mail address has been updated.
</p>
</section>
{{else if eq .Other "not_found"}}
<header>
<h1>E-mail change failed</h1>
</header>
<section>
<p>
This e-mail change request does not exist or has expired.
Please try again if you still want to change your e-mail
address.
</p>
</section>
{{else}}
<header>
<h1>Error</h1>
</header>
<section>
<p>
Something went wrong while processing this request. Please
try again later.
</p>
</section>
{{end}}
</div>
{{template "page_bottom" .}}
{{template "analytics"}}
</body>

16
res/template/file_not_found.html
View File

@@ -7,10 +7,10 @@
<body>
{{template "page_top" .}}
<div class="checkers inset">
<header>
<h1>404, File Not Found!</h1>
</div>
<div class="limit_width">
</header>
<section>
<p>
This file does not exist, or it has been removed. Possible
reasons for this are:
@@ -34,7 +34,7 @@
<p>
I'm sorry for the inconvenience.
</p>
</div>
</section>
{{template "page_bottom" .}}
{{template "analytics"}}
</body>
@@ -49,10 +49,10 @@
<body>
{{template "page_top" .}}
<div class="checkers inset">
<header>
<h1>404, List Not Found!</h1>
</div>
<div class="limit_width">
</header>
<section>
<p>
This list does not exist, or it has been removed. Possible
reasons for this are:
@@ -70,7 +70,7 @@
<p>
I'm sorry for the inconvenience.
</p>
</div>
</section>
{{template "page_bottom" .}}
{{template "analytics"}}
</body>

8
res/template/file_viewer_compat.html
View File

@@ -25,10 +25,10 @@
<body>
{{template "page_top" .}}
<div class="checkers inset">
<header>
<h1>{{.Title}}</h1>
</div>
<div class="limit_width">
</header>
<section>
{{if eq .Other.Type "file"}}
Download <a href="{{.APIEndpoint}}/file/{{.Other.APIResponse.ID}}?download">{{.Other.APIResponse.Name}}</a> here.
{{else}}
@@ -66,7 +66,7 @@
<li><a href="https://www.apple.com/safari/">Safari</a> (Mac OS)</li>
<li><a href="https://www.microsoft.com/en-us/edge">Edge</a> (Windows)</li>
</ul>
</div>
</section>
{{template "analytics"}}
</body>
</html>

8
res/template/fragments/form.html
View File

@@ -110,14 +110,14 @@
<body>
<div id='body' class="body">
{{template "page_top" .}}
<div class="checkers inset">
<header>
<h1>{{.Form.Title}}</h1>
</div>
</header>
<br/>
<div class="limit_width">
<section>
{{template "form" .Form}}
<br/>
</div>
</section>
{{template "page_bottom" .}}
</div>

8
res/template/fragments/markdown_wrapper.html
View File

@@ -7,12 +7,12 @@
<body>
{{template "page_top" .}}
<div class="checkers inset">
<header>
<h1>{{.Title}}</h1>
</div>
<div class="limit_width">
</header>
<section>
{{.Other}}
</div>
</section>
{{template "page_bottom" .}}
{{template "analytics"}}
</body>

10
res/template/fragments/page_wrap.html
View File

@@ -1,6 +1,6 @@
{{define "page_menu"}}
<button id="button_toggle_navigation" class="button_toggle_navigation" onclick="toggleMenu();">☰</button>
<div id="page_navigation" class="page_navigation">
<nav id="page_navigation" class="page_navigation">
<a href="/">Home</a>
<hr />
{{if .Authenticated}}<a href="/user">{{.User.Username}}</a>
@@ -26,7 +26,7 @@
{{if eq .User.Subscription.ID ""}}
<a href="https://pixeldrain.com/vouchercodes">Shopping discounts</a>
{{end}}
</div>
</nav>
<script>
function toggleMenu() {
var nav = document.getElementById("page_navigation");
@@ -54,7 +54,7 @@ function resetMenu() {
{{end}}
{{define "page_bottom"}}
<div class="inset checkers" style="padding-top: 150px">
<footer>
<div style="display: inline-block; margin: 0 8px 0 8px;">
Pixeldrain is a product by <a href="//fornaxian.tech" target="_blank">Fornaxian Technologies</a>
</div>
@@ -71,8 +71,6 @@ function resetMenu() {
<span class="small_footer_text" style="font-size: .75em; line-height: .75em;">
page rendered by {{.Hostname}}
</span>
<br/>
<br/>
</div>
</footer>
</div><!-- end page_body -->
{{end}}

11
res/template/history.html
View File

@@ -5,14 +5,13 @@
{{template "user_style" .}}
</head>
<body>
<div id='body' class="body">
{{template "page_top" .}}
<div class="checkers inset">
<header>
<h1>Upload History</h1>
</div>
</header>
<div class="limit_width">
<section>
<p>
Here are all files you have previously uploaded to pixeldrain using this computer.
This data is saved locally in your web browser and gets updated every time you upload a file through your current browser.
@@ -20,9 +19,9 @@
<br/>
<div id="uploaded_files" class="highlight_dark"></div>
</div>
</section>
{{template "page_bottom" .}}
</div>
<script>
let apiEndpoint = '{{.APIEndpoint}}';
{{template `util.js`}}

12
res/template/home.html
View File

@@ -93,21 +93,21 @@
</head>
<body>
{{template "page_top" .}}
<div class="checkers inset" style="padding-bottom: 60px;">
<header style="padding-bottom: 60px;">
<picture>
<source media="(max-width: 800px)" srcset="/res/img/header_orbitron.png">
<img class="header_image" src="/res/img/header_orbitron_wide.png" alt="Header image">
</picture>
</div>
</header>
<!-- Svelte element -->
<div id="uploader" class="page_content"></div>
<div class="checkers inset">
<header>
<h1>What is pixeldrain?</h1>
</div>
</header>
<div class="limit_width">
<section>
<p>
Pixeldrain is a file sharing website built for speed and ease of
use. You can upload files you want to share online to our
@@ -475,7 +475,7 @@
logging in head to the <a href="/user/transactions">transactions
page</a> to deposit your coins.
</p>
</div>
</section>
<template id="tpl_file_expiry">
<p>

4
res/template/user_buckets.html
View File

@@ -10,9 +10,9 @@
<body>
{{template "page_top" .}}
<div class="checkers inset">
<header>
<h1>My Buckets</h1>
</div>
</header>
<div id="page_content" class="page_content"></div>
{{template "page_bottom" .}}

9
res/template/user_logout.html
View File

@@ -6,15 +6,14 @@
</head>
<body>
{{template "page_top" .}}
<div class="checkers inset">
<header>
<h1>Please confirm that you want to log out of your pixeldrain account</h1>
<br/>
</div>
</header>
<br/>
<form method="POST" action="/logout">
<input type="submit" value="I want to log out of pixeldrain on this computer" class="button_highlight"/>
</form>
<div class="limit_width">
<section>
<br/>
<h2>Why do I need to confirm my logout?</h2>
<p>
@@ -31,7 +30,7 @@
page visit we can confirm that you really want to log out.
</p>
<br/>
</div>
</section>
{{template "page_bottom" .}}
{{template "analytics"}}
</body>

8
res/template/widgets.html
View File

@@ -8,10 +8,10 @@
<body>
{{template "page_top" .}}
<div class="checkers inset">
<header">
<h1>Widget showcase</h1>
</div>
<div class="limit_width">
</header>
<section>
<h2>Size 2 header</h2>
<h3>Size 3 header</h3>
<h4>Size 4 header</h4>
@@ -64,7 +64,7 @@
<br/><br/>
<iframe src="https://pixeldrain.com/u/Nygt1on4?embed" style="border: none; width: 800px; max-width: 100%; height: 600px; max-height: 100%; border-radius: 16px;"></iframe>
</div>
</section>
{{template "page_bottom" .}}
</body>
</html>

14
svelte/src/admin_panel/AbuseReporters.svelte
View File

@@ -82,14 +82,13 @@ const delete_reporter = async (email) => {
onMount(get_reporters);
</script>
<div>
{#if loading}
{#if loading}
<div class="spinner_container">
<Spinner />
</div>
{/if}
{/if}
<div class="limit_width">
<section>
<div class="toolbar" style="text-align: left;">
<div class="toolbar_spacer"></div>
<button class:button_highlight={creating} on:click={() => {creating = !creating}}>
@@ -129,11 +128,11 @@ onMount(get_reporters);
</form>
</div>
{/if}
</div>
</section>
<br/>
<br/>
<div class="table_scroll">
<div class="table_scroll">
<table style="text-align: left;">
<tr>
<td>E-mail</td>
@@ -160,7 +159,6 @@ onMount(get_reporters);
</tr>
{/each}
</table>
</div>
</div>
<style>

10
svelte/src/admin_panel/AbuseReports.svelte
View File

@@ -91,14 +91,13 @@ onMount(() => {
});
</script>
<div>
{#if loading}
{#if loading}
<div class="spinner_container">
<Spinner />
</div>
{/if}
{/if}
<div class="limit_width">
<section>
<div class="toolbar" style="text-align: left;">
<div class="toolbar_spacer"></div>
<div>Start:</div>
@@ -121,8 +120,7 @@ onMount(() => {
<AbuseReport report={report} on:refresh={get_reports}/>
{/if}
{/each}
</div>
</div>
</section>
<style>
.spinner_container {

9
svelte/src/admin_panel/BlockFiles.svelte
View File

@@ -65,8 +65,7 @@ onMount(() => {
})
</script>
<div>
<div class="limit_width">
<section>
<h2>File removal</h2>
<p>
Paste any pixeldrain file links in here to remove them
@@ -74,8 +73,4 @@ onMount(() => {
<div class="highlight_dark">
<Form config={block_form}></Form>
</div>
</div>
</div>
<style>
</style>
</section>

40
svelte/src/admin_panel/Home.svelte
View File

@@ -159,11 +159,10 @@ onDestroy(() => {
})
</script>
<div>
<div class="limit_width">
<section>
<h3>Bandwidth usage and file views</h3>
</div>
<div class="highlight_dark" style="margin-bottom: 6px;">
</section>
<div class="highlight_dark" style="margin-bottom: 6px;">
<button on:click={() => { loadGraph(1440, 1, true) }}>Day</button>
<button on:click={() => { loadGraph(10080, 10, false) }}>Week</button>
<button on:click={() => { loadGraph(20160, 60, false) }}>Two Weeks</button>
@@ -172,24 +171,24 @@ onDestroy(() => {
<button on:click={() => { loadGraph(262800, 1440, false) }}>Half-year</button>
<button on:click={() => { loadGraph(525600, 1440, false) }}>Year</button>
<button on:click={() => { loadGraph(1051200, 1440, false) }}>Two Years</button>
</div>
<Chart bind:this={graphBandwidth} data_type="bytes" legend={false} />
<Chart bind:this={graphViews} data_type="number" legend={false} />
<div class="highlight_dark">
</div>
<Chart bind:this={graphBandwidth} data_type="bytes" legend={false} />
<Chart bind:this={graphViews} data_type="number" legend={false} />
<div class="highlight_dark">
Total usage from {start_time} to {end_time}<br/>
{formatDataVolume(total_bandwidth, 3)} bandwidth,
{formatDataVolume(total_bandwidth_paid, 3)} paid bandwidth,
{formatThousands(total_views, 3)} views and
{formatThousands(total_downloads, 3)} downloads
</div>
</div>
<br/>
<a class="button" href="/api/admin/call_stack">Call stack</a>
<a class="button" href="/api/admin/heap_profile">Heap profile</a>
<a class="button" href="/api/admin/cpu_profile">CPU profile (wait 1 min)</a>
<br/>
<br/>
<a class="button" href="/api/admin/call_stack">Call stack</a>
<a class="button" href="/api/admin/heap_profile">Heap profile</a>
<a class="button" href="/api/admin/cpu_profile">CPU profile (wait 1 min)</a>
<br/>
<div class="limit_width">
<section>
<table>
<tr>
<td>DB Time</td>
@@ -217,7 +216,7 @@ onDestroy(() => {
</thead>
<tbody>
{#each status.peers as peer}
<tr class="peer_row"
<tr style="text-align: left"
class:highlight_red={peer.free_space < peer.min_free_space / 2 || !peer.reachable}
class:highlight_yellow={peer.free_space < peer.min_free_space}
class:highlight_green={peer.reachable}
@@ -316,11 +315,4 @@ onDestroy(() => {
</tbody>
</table>
</div>
</div>
</div>
<style>
.peer_row {
text-align: left;
}
</style>
</section>

14
svelte/src/admin_panel/IPBans.svelte
View File

@@ -80,14 +80,13 @@ const delete_ban = async (addr) => {
onMount(get_bans);
</script>
<div>
{#if loading}
{#if loading}
<div class="spinner_container">
<Spinner />
</div>
{/if}
{/if}
<div class="limit_width">
<section>
<div class="toolbar" style="text-align: left;">
<div class="toolbar_spacer"></div>
<button class:button_highlight={creating} on:click={() => {creating = !creating}}>
@@ -135,11 +134,11 @@ onMount(get_bans);
</form>
</div>
{/if}
</div>
</section>
<br/>
<br/>
<div class="table_scroll">
<div class="table_scroll">
<table style="text-align: left;">
<tr>
<td>Address</td>
@@ -164,7 +163,6 @@ onMount(get_bans);
</tr>
{/each}
</table>
</div>
</div>
<style>

4
svelte/src/admin_panel/Router.svelte
View File

@@ -26,7 +26,7 @@ onMount(() => {
})
</script>
<div class="checkers inset">
<header>
<h1>Admin Panel</h1>
<div class="tab_bar">
@@ -77,7 +77,7 @@ onMount(() => {
Update global settings
</a>
</div>
</div>
</header>
{#if page === "status"}
<Home></Home>

4
svelte/src/admin_panel/Subscriptions.svelte
View File

@@ -173,7 +173,7 @@ onMount(get_coupons)
</script>
<div class="limit_width">
<section>
{#if loading}
<div class="spinner_container">
<Spinner />
@@ -221,7 +221,7 @@ onMount(get_coupons)
{/each}
</table>
</div>
</div>
</section>
<style>
.spinner_container {

24
svelte/src/home_page/HomePage.svelte
View File

@@ -386,18 +386,18 @@ const keydown = (e) => {
<div>
<!-- If the user is logged in and has used more than 50% of their storage space we will show a progress bar -->
{#if window.user.username !== "" && window.user.storage_space_used/window.user.subscription.storage_space > 0.5}
<div class="limit_width">
<section>
<StorageProgressBar used={window.user.storage_space_used} total={window.user.subscription.storage_space}></StorageProgressBar>
</div>
</section>
{/if}
<div class="instruction limit_width" style="margin-top: 0; border-top: none;">
<section class="instruction" style="margin-top: 0; border-top: none;">
<span class="big_number">1</span>
<span class="instruction_text">Select files to upload</span>
<br/>
You can also drop files on this page from your file manager or
paste an image from your clipboard
</div>
</section>
<br/>
<input bind:this={file_input_field} on:change={file_input_change} type="file" name="file" multiple="multiple"/>
@@ -416,7 +416,7 @@ const keydown = (e) => {
<a href="/about#content-policy">content policy</a>.
<p>
<div class="instruction limit_width" style="margin-bottom: 0;">
<section class="instruction" style="margin-bottom: 0;">
<span class="big_number">2</span>
<span class="instruction_text">Wait for the files to finish uploading</span>
<br/>
@@ -426,7 +426,7 @@ const keydown = (e) => {
<div>ETA {formatDuration(remaining_time, 0)}</div>
<div>Rate {formatDataVolume(total_rate, 3)}/s</div>
</div>
</div>
</section>
<div class="progress_bar_outer" style="margin-bottom: 1.5em;">
<div bind:this={progress_bar_inner} class="progress_bar_inner"></div>
</div>
@@ -441,10 +441,10 @@ const keydown = (e) => {
<UploadProgressBar bind:this={file.component} job={file}></UploadProgressBar>
{/each}
<div class="instruction limit_width">
<section class="instruction">
<span class="big_number">3</span>
<span class="instruction_text">Share the files</span>
</div>
</section>
<br/>
{#if upload_queue.length > 1}
@@ -518,11 +518,11 @@ const keydown = (e) => {
<br/>
{#if window.user.subscription.name === ""}
<div class="instruction limit_width">
<section>
<div class="instruction">
<span class="big_number">4</span>
<span class="instruction_text">Support me on Patreon!</span>
</div>
<div class="limit_width">
<p>
Pixeldrain is struggling to get by financially. Because anyone
can upload anything it's hard to find reputable advertisers who
@@ -537,13 +537,15 @@ const keydown = (e) => {
help with making pixeldrain the easiest and fastest way to share
files online!
</p>
</div>
<br/>
<div style="text-align: center;">
<a href="#pro" class="button big_button" style="min-width: 350px;">
<i class="icon">arrow_downward</i>
Check out Pro
<i class="icon">arrow_downward</i>
</a>
</div>
</section>
{/if}
</div>

51
svelte/src/user_buckets/UserBucket.svelte
View File

@@ -1,13 +1,10 @@
<script>
import { fs_delete_bucket } from "../filesystem/FilesystemAPI.svelte";
import { createEventDispatcher } from "svelte";
import Expandable from "../util/Expandable.svelte";
let dispatch = createEventDispatcher()
export let bucket
let details_hidden = true
const expand_bucket = () => {
details_hidden = !details_hidden
}
const save_bucket = () => {
alert("save")
@@ -32,21 +29,14 @@ const delete_bucket = async () => {
</script>
<div class="bucket">
<div class="bucket_header">
<Expandable>
<div slot="header">
<a href={'/d/' + bucket.id} class="bucket_title">
<img class="bucket_icon" src="/res/img/mime/folder-remote.png" alt="Bucket icon"/>
{bucket.name}
</a>
<button class="bucket_expand" on:click={expand_bucket}>
{#if details_hidden}
<i class="icon">expand_more</i>
{:else}
<i class="icon">expand_less</i>
{/if}
</button>
</div>
<div class="bucket_details" class:hidden={details_hidden}>
<div>
<form on:submit|preventDefault={save_bucket}>
<table class="form">
<tr class="form">
@@ -66,26 +56,9 @@ const delete_bucket = async () => {
</table>
</form>
</div>
</div>
</Expandable>
<style>
.bucket {
text-decoration: none;
background-color: var(--layer_3_color);
transition: box-shadow 0.5s;
box-shadow: 1px 1px 5px 0 var(--shadow_color);
margin: 1em 0;
border-radius: 8px;
overflow: hidden;
}
.bucket_header {
display: flex;
flex-direction: row;
color: var(--text_color);
}
.bucket_header:hover {
background-color: var(--input_color_dark)
}
.bucket_title {
flex: 1 1 auto;
align-self: center;
@@ -98,18 +71,4 @@ const delete_bucket = async () => {
margin: 4px;
vertical-align: middle;
}
.bucket_expand {
flex: 0 0 auto;
}
.bucket_details {
display: flex;
padding: 0.4em;
flex-direction: column;
text-decoration: none;
border-top: 1px solid var(--layer_3_color_border);
color: var(--text_color);
}
.hidden {
display: none;
}
</style>

12
svelte/src/user_buckets/UserBuckets.svelte
View File

@@ -41,14 +41,13 @@ const create_bucket = async () => {
onMount(get_buckets);
</script>
<div>
{#if loading}
{#if loading}
<div class="spinner_container">
<Spinner />
</div>
{/if}
{/if}
<div class="limit_width">
<section>
<div class="toolbar" style="text-align: right;">
<button
class:button_highlight={creating_bucket}
@@ -81,11 +80,10 @@ onMount(get_buckets);
</div>
{/if}
{#each buckets as bucket}
{#each buckets as bucket (bucket.id)}
<UserBucket bucket={bucket} on:refresh={get_buckets}></UserBucket>
{/each}
</div>
</div>
</section>
<style>
.spinner_container {

12
svelte/src/user_home/APIKeys.svelte
View File

@@ -82,14 +82,13 @@ const logout = async (key) => {
}
</script>
<div>
{#if loading}
{#if loading}
<div class="spinner_container">
<Spinner />
</div>
{/if}
{/if}
<div class="limit_width">
<section>
{#if !loaded}
<div class="highlight_yellow">
<h2>Warning</h2>
@@ -118,8 +117,8 @@ const logout = async (key) => {
without your authorization it's probably a good idea to delete all
your keys.
</p>
</div>
<div class="table_scroll">
</section>
<div class="table_scroll">
<table style="text-align: left;">
<tr>
<td>Key</td>
@@ -162,7 +161,6 @@ const logout = async (key) => {
</tr>
{/each}
</table>
</div>
</div>
<style>

9
svelte/src/user_home/AccountSettings.svelte
View File

@@ -137,8 +137,7 @@ let delete_account = {
}
</script>
<div>
<div class="limit_width">
<section>
<h2>Change password</h2>
<div class="highlight_dark">
<Form config={password_change}></Form>
@@ -158,8 +157,4 @@ let delete_account = {
<div class="highlight_dark">
<Form config={delete_account}></Form>
</div>
</div>
</div>
<style>
</style>
</section>

11
svelte/src/user_home/ConnectApp.svelte
View File

@@ -56,13 +56,13 @@ onMount(() => {
})
</script>
<div>
{#if loading}
{#if loading}
<div class="spinner_container">
<Spinner />
</div>
{/if}
<div class="limit_width">
{/if}
<section>
{#if app_name === "jdownloader"}
<h2>
Connect
@@ -162,8 +162,7 @@ onMount(() => {
</li>
</ul>
{/if}
</div>
</div>
</section>
<style>
.spinner_container {

24
svelte/src/user_home/Home.svelte
View File

@@ -174,8 +174,7 @@ onDestroy(() => {
})
</script>
<div>
<div class="limit_width">
<section>
<h2>Account information</h2>
<ul>
<li>Username: {window.user.username}</li>
@@ -240,8 +239,9 @@ onDestroy(() => {
the statistics will be updated periodically. No need to
refresh the page.
</p>
</div>
<div class="highlight_light">
</section>
<div class="highlight_light">
<button
on:click={() => { update_graphs(1440, 1, true) }}
class:button_highlight={graph_timespan == 1440}>
@@ -283,8 +283,8 @@ onDestroy(() => {
{formatThousands(total_downloads)} downloads,
{formatDataVolume(total_bandwidth, 3)} bandwidth and
{formatDataVolume(total_transfer_paid, 3)} paid transfers
</div>
<div class="limit_width">
</div>
<section>
<h3>Premium transfers and total bandwidth usage</h3>
<p>
A premium transfer is when a file is downloaded using the data cap
@@ -297,9 +297,10 @@ onDestroy(() => {
Total bandwidth usage is the combined bandwidth usage of all the
files on your account. This includes paid transfers.
</p>
</div>
<Chart bind:this={graph_bandwidth} data_type="bytes"/>
<div class="limit_width">
</section>
<Chart bind:this={graph_bandwidth} data_type="bytes"/>
<section>
<h3>Views and downloads</h3>
<p>
A view is counted when someone visits the download page of one of
@@ -310,6 +311,5 @@ onDestroy(() => {
of your files. It does not matter whether the download is completed
or not, only the start of the download is counted.
</p>
</div>
<Chart bind:this={graph_views_downloads} data_type="number"/>
</div>
</section>
<Chart bind:this={graph_views_downloads} data_type="number"/>

10
svelte/src/user_home/HotlinkProgressBar.svelte
View File

@@ -8,10 +8,9 @@ export let used = 0
$: frac = used / total
</script>
<div>
<ProgressBar total={total} used={used}></ProgressBar>
<ProgressBar total={total} used={used}></ProgressBar>
{#if frac > 0.99}
{#if frac > 0.99}
<div class="highlight_red">
You have used all of your data cap. People can still download your
files, but not directly from the API anymore. The file viewer shows
@@ -21,7 +20,7 @@ $: frac = used / total
Upgrade options
</a>
</div>
{:else if frac > 0.8}
{:else if frac > 0.8}
<div class="highlight_yellow">
You have used {(frac*100).toFixed(0)}% of your data cap. If your
data runs out people won't be able to download your files directly
@@ -32,5 +31,4 @@ $: frac = used / total
Upgrade options
</a>
</div>
{/if}
</div>
{/if}

4
svelte/src/user_home/Router.svelte
View File

@@ -33,7 +33,7 @@ onMount(() => {
<svelte:window on:popstate={get_page} />
<div class="checkers inset">
<header>
<h1>Welcome home, {window.user.username}!</h1>
<div class="tab_bar">
@@ -75,7 +75,7 @@ onMount(() => {
</a>
{/if}
</div>
</div>
</header>
<br/>
{#if page === "home"}

22
svelte/src/user_home/StorageProgressBar.svelte
View File

@@ -7,15 +7,14 @@ export let used = 0
$: frac = used / total
</script>
<div>
Storage:
{formatDataVolume(used, 3)}
out of
{formatDataVolume(total, 3)}
<br/>
<ProgressBar total={total} used={used}></ProgressBar>
Storage:
{formatDataVolume(used, 3)}
out of
{formatDataVolume(total, 3)}
<br/>
<ProgressBar total={total} used={used}></ProgressBar>
{#if frac > 2.0}
{#if frac > 2.0}
<div class="highlight_red">
<span class="warn_text">You are using more than 200% of your allowed storage space!</span>
<p>
@@ -27,7 +26,7 @@ $: frac = used / total
</a>
</p>
</div>
{:else if frac > 0.99}
{:else if frac > 0.99}
<div class="highlight_red">
<p>
You have used all of your storage space. You won't be able to
@@ -43,7 +42,7 @@ $: frac = used / total
deleting your files to free up the space.
</p>
</div>
{:else if frac > 0.8}
{:else if frac > 0.8}
<div class="highlight_yellow">
<p>
You have used {(frac*100).toFixed(0)}% of your
@@ -55,8 +54,7 @@ $: frac = used / total
</a>
</p>
</div>
{/if}
</div>
{/if}
<style>
.warn_text {

11
svelte/src/user_home/Subscription.svelte
View File

@@ -74,13 +74,13 @@ onMount(load_tranfer_used)
</script>
<div>
{#if loading}
{#if loading}
<div class="spinner_container">
<Spinner />
</div>
{/if}
<div class="limit_width">
{/if}
<section>
<h2>Manage subscription</h2>
{#if window.user.subscription.type !== "patreon"}
<p>
@@ -236,8 +236,7 @@ onMount(load_tranfer_used)
mostly useful for prepaid plans, but it works for patreon plans too.
Set to 0 to disable the limit.
</p>
</div>
</div>
</section>
<style>
.spinner_container {

11
svelte/src/user_home/Transactions.svelte
View File

@@ -120,13 +120,13 @@ onMount(() => {
})
</script>
<div>
{#if loading}
{#if loading}
<div class="spinner_container">
<Spinner />
</div>
{/if}
<div class="limit_width">
{/if}
<section>
<h2>Deposit credits</h2>
<p>
You can deposit credit on your pixeldrain account with Bitcoin,
@@ -269,8 +269,7 @@ onMount(() => {
</table>
</div>
{/each}
</div>
</div>
</section>
<style>
.spinner_container {

6
svelte/src/util/Expandable.svelte
View File

@@ -28,10 +28,8 @@ export const toggle = () => {
.expandable {
text-decoration: none;
background-color: var(--layer_3_color);
transition: box-shadow 0.5s;
box-shadow: 1px 1px 6px -2px var(--shadow_color);
margin: 1em 0;
border-radius: 8px;
margin: 0.8em 0;
border-radius: 6px;
overflow: hidden;
}
.header {