From 8719d9b0f9ebe45a3d05dea845170da66956d353 Mon Sep 17 00:00:00 2001 From: Fornax Date: Tue, 11 Jan 2022 13:28:22 +0100 Subject: [PATCH] Replace CSS classes with semantic HTML --- res/include/style/layout.css | 23 +- res/template/404.html | 8 +- res/template/451.html | 8 +- res/template/500.html | 8 +- res/template/appearance.html | 8 +- res/template/apps.html | 8 +- res/template/email_confirm.html | 23 +- res/template/file_not_found.html | 16 +- res/template/file_viewer_compat.html | 8 +- res/template/fragments/form.html | 8 +- res/template/fragments/markdown_wrapper.html | 8 +- res/template/fragments/page_wrap.html | 10 +- res/template/history.html | 29 +- res/template/home.html | 12 +- res/template/user_buckets.html | 4 +- res/template/user_logout.html | 9 +- res/template/widgets.html | 8 +- svelte/src/admin_panel/AbuseReporters.svelte | 144 ++++---- svelte/src/admin_panel/AbuseReports.svelte | 60 ++-- svelte/src/admin_panel/BlockFiles.svelte | 21 +- svelte/src/admin_panel/Home.svelte | 318 +++++++++--------- svelte/src/admin_panel/IPBans.svelte | 156 +++++---- svelte/src/admin_panel/Router.svelte | 4 +- svelte/src/admin_panel/Subscriptions.svelte | 4 +- svelte/src/home_page/HomePage.svelte | 42 +-- svelte/src/user_buckets/UserBucket.svelte | 51 +-- svelte/src/user_buckets/UserBuckets.svelte | 82 +++-- svelte/src/user_home/APIKeys.svelte | 152 +++++---- svelte/src/user_home/AccountSettings.svelte | 43 ++- svelte/src/user_home/ConnectApp.svelte | 213 ++++++------ svelte/src/user_home/Home.svelte | 264 +++++++-------- .../src/user_home/HotlinkProgressBar.svelte | 48 ++- svelte/src/user_home/Router.svelte | 4 +- .../src/user_home/StorageProgressBar.svelte | 96 +++--- svelte/src/user_home/Subscription.svelte | 313 +++++++++-------- svelte/src/user_home/Transactions.svelte | 275 ++++++++------- svelte/src/util/Expandable.svelte | 6 +- 37 files changed, 1215 insertions(+), 1279 deletions(-) diff --git a/res/include/style/layout.css b/res/include/style/layout.css index d96f2a0..def788f 100644 --- a/res/include/style/layout.css +++ b/res/include/style/layout.css @@ -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 */ diff --git a/res/template/404.html b/res/template/404.html index 866cf93..c4ac34e 100644 --- a/res/template/404.html +++ b/res/template/404.html @@ -7,10 +7,10 @@ {{template "page_top" .}} -
+

This page does not exist!

-
-
+ +

If you came here by a link from this very same website you can tell me about it on @@ -23,7 +23,7 @@

Bye!

-
+ {{template "page_bottom" .}} {{template "analytics"}} diff --git a/res/template/451.html b/res/template/451.html index 552cd3c..57efc43 100644 --- a/res/template/451.html +++ b/res/template/451.html @@ -7,15 +7,15 @@ {{template "page_top" .}} -
+

451, Unavailable For Legal Reasons

-
-
+ +

Hello. This file has received an abuse report and has been taken down. It cannot be shared anymore.

-
+ {{template "page_bottom" .}} {{template "analytics"}} diff --git a/res/template/500.html b/res/template/500.html index 865e717..9c23e69 100644 --- a/res/template/500.html +++ b/res/template/500.html @@ -7,10 +7,10 @@ {{template "page_top" .}} -
+

You broke pixeldrain

-
-
+ +

Great job.

@@ -24,7 +24,7 @@ try again in a few minutes (or hours), or go back to the home page and start over.

-
+ {{template "page_bottom" .}} {{template "analytics"}} diff --git a/res/template/appearance.html b/res/template/appearance.html index 6f86f33..0e9eb65 100644 --- a/res/template/appearance.html +++ b/res/template/appearance.html @@ -7,10 +7,10 @@ {{template "page_top" .}} -
+

Change website appearance

-
-
+ +

You can change how pixeldrain looks! Your theme choice will be saved in a cookie. @@ -30,7 +30,7 @@ (Inspired by Skeuos GTK)

- + -
- {#if loading} - + diff --git a/svelte/src/admin_panel/Home.svelte b/svelte/src/admin_panel/Home.svelte index 3e77fb8..8827899 100644 --- a/svelte/src/admin_panel/Home.svelte +++ b/svelte/src/admin_panel/Home.svelte @@ -159,168 +159,160 @@ onDestroy(() => { }) -
-
-

Bandwidth usage and file views

-
-
- - - - - - - - -
- - -
- Total usage from {start_time} to {end_time}
- {formatDataVolume(total_bandwidth, 3)} bandwidth, - {formatDataVolume(total_bandwidth_paid, 3)} paid bandwidth, - {formatThousands(total_views, 3)} views and - {formatThousands(total_downloads, 3)} downloads -
- -
- Call stack - Heap profile - CPU profile (wait 1 min) -
- -
- - - - - - - -
DB Time{formatDate(new Date(status.db_time), true, true, true)}DB Latency{formatNumber(status.db_latency / 1000, 3)} ms
-

Pixelstore peers

-
- - - - - - - - - - - - - - - - - {#each status.peers as peer} - - - - - - - - - - - - - {/each} - -
AddressPosAliveErr1m5m15mPingFreeMin free
{peer.address}{peer.position}{peer.reachable}{peer.unreachable_count}{peer.load_1_min.toFixed(1)}{peer.load_5_min.toFixed(1)}{peer.load_15_min.toFixed(1)}{formatDuration(peer.latency, 3)}{formatDataVolume(peer.free_space, 4)}{formatDataVolume(peer.min_free_space, 3)}
-
-

Pixelstore stats

- - - - - - - - - - - - - - - - - - - - - - - -
Local readsLocal read sizeRemote readsRemote read size
{status.local_reads}{formatDataVolume(status.local_read_size, 4)}{status.remote_reads}{formatDataVolume(status.remote_read_size, 4)}
{status.local_reads_per_sec.toPrecision(4)} / s{formatDataVolume(status.local_read_size_per_sec, 4)} / s{status.remote_reads_per_sec.toPrecision(4)} / s{formatDataVolume(status.remote_read_size_per_sec, 4)} /s
-

Socket statistics

- - - - - - - - - - - - - - - - - - - - - - - -
WatcherThreadsListenersAvg
File statistics{status.stats_watcher_threads}{status.stats_watcher_listeners}{(status.stats_watcher_listeners / status.stats_watcher_threads).toPrecision(3)}
Downloads{status.download_clients}{status.download_connections}{(status.download_connections / status.download_clients).toPrecision(3)}
-

Query statistics

-
- - - - - - - - - - - - {#each status.query_statistics as q} - - - - - - - - {/each} - -
{ getStats('query_name') }}>Query { getStats('calls') }}>Calls { getStats('average_duration') }}>Avg dur { getStats('total_duration') }}>Total durCallers
{q.query_name}{q.calls}{q.average_duration}ms{formatDuration(q.total_duration, 0)} - {#each q.callers as caller} - {caller.count}x {caller.name}
- {/each} -
-
-
+
+

Bandwidth usage and file views

+
+
+ + + + + + + + +
+ + +
+ Total usage from {start_time} to {end_time}
+ {formatDataVolume(total_bandwidth, 3)} bandwidth, + {formatDataVolume(total_bandwidth_paid, 3)} paid bandwidth, + {formatThousands(total_views, 3)} views and + {formatThousands(total_downloads, 3)} downloads
- +
+Call stack +Heap profile +CPU profile (wait 1 min) +
+ +
+ + + + + + + +
DB Time{formatDate(new Date(status.db_time), true, true, true)}DB Latency{formatNumber(status.db_latency / 1000, 3)} ms
+

Pixelstore peers

+
+ + + + + + + + + + + + + + + + + {#each status.peers as peer} + + + + + + + + + + + + + {/each} + +
AddressPosAliveErr1m5m15mPingFreeMin free
{peer.address}{peer.position}{peer.reachable}{peer.unreachable_count}{peer.load_1_min.toFixed(1)}{peer.load_5_min.toFixed(1)}{peer.load_15_min.toFixed(1)}{formatDuration(peer.latency, 3)}{formatDataVolume(peer.free_space, 4)}{formatDataVolume(peer.min_free_space, 3)}
+
+

Pixelstore stats

+ + + + + + + + + + + + + + + + + + + + + + + +
Local readsLocal read sizeRemote readsRemote read size
{status.local_reads}{formatDataVolume(status.local_read_size, 4)}{status.remote_reads}{formatDataVolume(status.remote_read_size, 4)}
{status.local_reads_per_sec.toPrecision(4)} / s{formatDataVolume(status.local_read_size_per_sec, 4)} / s{status.remote_reads_per_sec.toPrecision(4)} / s{formatDataVolume(status.remote_read_size_per_sec, 4)} /s
+

Socket statistics

+ + + + + + + + + + + + + + + + + + + + + + + +
WatcherThreadsListenersAvg
File statistics{status.stats_watcher_threads}{status.stats_watcher_listeners}{(status.stats_watcher_listeners / status.stats_watcher_threads).toPrecision(3)}
Downloads{status.download_clients}{status.download_connections}{(status.download_connections / status.download_clients).toPrecision(3)}
+

Query statistics

+
+ + + + + + + + + + + + {#each status.query_statistics as q} + + + + + + + + {/each} + +
{ getStats('query_name') }}>Query { getStats('calls') }}>Calls { getStats('average_duration') }}>Avg dur { getStats('total_duration') }}>Total durCallers
{q.query_name}{q.calls}{q.average_duration}ms{formatDuration(q.total_duration, 0)} + {#each q.callers as caller} + {caller.count}x {caller.name}
+ {/each} +
+
+
diff --git a/svelte/src/admin_panel/IPBans.svelte b/svelte/src/admin_panel/IPBans.svelte index 77e4b81..52e3815 100644 --- a/svelte/src/admin_panel/IPBans.svelte +++ b/svelte/src/admin_panel/IPBans.svelte @@ -80,91 +80,89 @@ const delete_ban = async (addr) => { onMount(get_bans); -
- {#if loading} - diff --git a/svelte/src/user_buckets/UserBuckets.svelte b/svelte/src/user_buckets/UserBuckets.svelte index 6675362..a80f765 100644 --- a/svelte/src/user_buckets/UserBuckets.svelte +++ b/svelte/src/user_buckets/UserBuckets.svelte @@ -41,51 +41,49 @@ const create_bucket = async () => { onMount(get_buckets); -
- {#if loading} - + {#each buckets as bucket (bucket.id)} + + {/each} + +

Change e-mail address

+
+
+
+ +

Change name

+
+
+
+ +

Delete account

+
+
+
+ diff --git a/svelte/src/user_home/ConnectApp.svelte b/svelte/src/user_home/ConnectApp.svelte index d1cc4f8..881766b 100644 --- a/svelte/src/user_home/ConnectApp.svelte +++ b/svelte/src/user_home/ConnectApp.svelte @@ -56,114 +56,113 @@ onMount(() => { }) -
- {#if loading} - - {/if} -
- {#if app_name === "jdownloader"} -

- Connect - JDownloader logo - JDownloader to your pixeldrain account -

-

- To connect JDownloader to pixeldrain you need to generate an API - key and enter it in JDownloader's Account Manager. -
- Do not show the generated key to anyone, it can - be used to gain access to your pixeldrain account! -

- - {#if !api_key} -
- -
- {:else} -

Key created

- -
- - - -
- {/if} - -

- Paste the key in JDownloader to authenticate the app. -

- {:else if app_name === "sharex"} -

- Connect - ShareX logo - ShareX to your pixeldrain account -

-

- ShareX is a Screen capture, file sharing and productivity tool. - Pixeldrain is supported as a custom uploader. You can get ShareX - here. -

-

- Here you can download our custom ShareX uploader which uses - pixeldrain to upload your files. This uploader is configured to - upload files to your personal pixeldrain account. Do not - share the configuration file with anyone, it contains - your account credentials. -

- -
- - save - Download ShareX Uploader - -
- -

Setting pixeldrain as default uploader

-

- Download the uploader config and choose 'Open file' -
-
- Set pixeldrain.com as active uploader. Choose Yes -
-
-

- {:else} -

Connect an app to your pixeldrain account

-
    -
  • - -
    • -
  • - -
    • -
- {/if} +{#if loading} + -
+{/if} + +
+ {#if app_name === "jdownloader"} +

+ Connect + JDownloader logo + JDownloader to your pixeldrain account +

+

+ To connect JDownloader to pixeldrain you need to generate an API + key and enter it in JDownloader's Account Manager. +
+ Do not show the generated key to anyone, it can + be used to gain access to your pixeldrain account! +

+ + {#if !api_key} +
+ +
+ {:else} +

Key created

+ +
+ + + +
+ {/if} + +

+ Paste the key in JDownloader to authenticate the app. +

+ {:else if app_name === "sharex"} +

+ Connect + ShareX logo + ShareX to your pixeldrain account +

+

+ ShareX is a Screen capture, file sharing and productivity tool. + Pixeldrain is supported as a custom uploader. You can get ShareX + here. +

+

+ Here you can download our custom ShareX uploader which uses + pixeldrain to upload your files. This uploader is configured to + upload files to your personal pixeldrain account. Do not + share the configuration file with anyone, it contains + your account credentials. +

+ +
+ + save + Download ShareX Uploader + +
+ +

Setting pixeldrain as default uploader

+

+ Download the uploader config and choose 'Open file' +
+
+ Set pixeldrain.com as active uploader. Choose Yes +
+
+

+ {:else} +

Connect an app to your pixeldrain account

+
    +
  • + +
    • +
  • + +
    • +
+ {/if} +