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

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

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

8
res/template/404.html
View File

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

8
res/template/451.html
View File

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

8
res/template/500.html
View File

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

8
res/template/appearance.html
View File

@@ -7,10 +7,10 @@
<body> <body>
{{template "page_top" .}} {{template "page_top" .}}
<div class="checkers inset"> <header>
<h1>Change website appearance</h1> <h1>Change website appearance</h1>
</div> </header>
<div class="limit_width"> <section>
<p> <p>
You can change how pixeldrain looks! Your theme choice will You can change how pixeldrain looks! Your theme choice will
be saved in a cookie. 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/> (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>--> <!--<input type="radio" id="style_sunny" name="style"><label for="style_sunny">Sunny Style</label>-->
</div> </div>
</div> </section>
<script> <script>
// Style selector // Style selector

8
res/template/apps.html
View File

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

15
res/template/email_confirm.html
View File

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

16
res/template/file_not_found.html
View File

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

8
res/template/file_viewer_compat.html
View File

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

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

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

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

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

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

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

11
res/template/history.html
View File

@@ -5,14 +5,13 @@
{{template "user_style" .}} {{template "user_style" .}}
</head> </head>
<body> <body>
<div id='body' class="body">
{{template "page_top" .}} {{template "page_top" .}}
<div class="checkers inset"> <header>
<h1>Upload History</h1> <h1>Upload History</h1>
</div> </header>
<div class="limit_width"> <section>
<p> <p>
Here are all files you have previously uploaded to pixeldrain using this computer. 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. 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/> <br/>
<div id="uploaded_files" class="highlight_dark"></div> <div id="uploaded_files" class="highlight_dark"></div>
</div> </section>
{{template "page_bottom" .}} {{template "page_bottom" .}}
</div>
<script> <script>
let apiEndpoint = '{{.APIEndpoint}}'; let apiEndpoint = '{{.APIEndpoint}}';
{{template `util.js`}} {{template `util.js`}}

12
res/template/home.html
View File

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

4
res/template/user_buckets.html
View File

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

9
res/template/user_logout.html
View File

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

8
res/template/widgets.html
View File

@@ -8,10 +8,10 @@
<body> <body>
{{template "page_top" .}} {{template "page_top" .}}
<div class="checkers inset"> <header">
<h1>Widget showcase</h1> <h1>Widget showcase</h1>
</div> </header>
<div class="limit_width"> <section>
<h2>Size 2 header</h2> <h2>Size 2 header</h2>
<h3>Size 3 header</h3> <h3>Size 3 header</h3>
<h4>Size 4 header</h4> <h4>Size 4 header</h4>
@@ -64,7 +64,7 @@
<br/><br/> <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> <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" .}} {{template "page_bottom" .}}
</body> </body>
</html> </html>

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

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

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

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

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

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

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

@@ -159,10 +159,9 @@ onDestroy(() => {
}) })
</script> </script>
<div> <section>
<div class="limit_width">
<h3>Bandwidth usage and file views</h3> <h3>Bandwidth usage and file views</h3>
</div> </section>
<div class="highlight_dark" style="margin-bottom: 6px;"> <div class="highlight_dark" style="margin-bottom: 6px;">
<button on:click={() => { loadGraph(1440, 1, true) }}>Day</button> <button on:click={() => { loadGraph(1440, 1, true) }}>Day</button>
<button on:click={() => { loadGraph(10080, 10, false) }}>Week</button> <button on:click={() => { loadGraph(10080, 10, false) }}>Week</button>
@@ -189,7 +188,7 @@ onDestroy(() => {
<a class="button" href="/api/admin/cpu_profile">CPU profile (wait 1 min)</a> <a class="button" href="/api/admin/cpu_profile">CPU profile (wait 1 min)</a>
<br/> <br/>
<div class="limit_width"> <section>
<table> <table>
<tr> <tr>
<td>DB Time</td> <td>DB Time</td>
@@ -217,7 +216,7 @@ onDestroy(() => {
</thead> </thead>
<tbody> <tbody>
{#each status.peers as peer} {#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_red={peer.free_space < peer.min_free_space / 2 || !peer.reachable}
class:highlight_yellow={peer.free_space < peer.min_free_space} class:highlight_yellow={peer.free_space < peer.min_free_space}
class:highlight_green={peer.reachable} class:highlight_green={peer.reachable}
@@ -316,11 +315,4 @@ onDestroy(() => {
</tbody> </tbody>
</table> </table>
</div> </div>
</div> </section>
</div>
<style>
.peer_row {
text-align: left;
}
</style>

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

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

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

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

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

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

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

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

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

@@ -1,13 +1,10 @@
<script> <script>
import { fs_delete_bucket } from "../filesystem/FilesystemAPI.svelte"; import { fs_delete_bucket } from "../filesystem/FilesystemAPI.svelte";
import { createEventDispatcher } from "svelte"; import { createEventDispatcher } from "svelte";
import Expandable from "../util/Expandable.svelte";
let dispatch = createEventDispatcher() let dispatch = createEventDispatcher()
export let bucket export let bucket
let details_hidden = true
const expand_bucket = () => {
details_hidden = !details_hidden
}
const save_bucket = () => { const save_bucket = () => {
alert("save") alert("save")
@@ -32,21 +29,14 @@ const delete_bucket = async () => {
</script> </script>
<div class="bucket"> <Expandable>
<div class="bucket_header"> <div slot="header">
<a href={'/d/' + bucket.id} class="bucket_title"> <a href={'/d/' + bucket.id} class="bucket_title">
<img class="bucket_icon" src="/res/img/mime/folder-remote.png" alt="Bucket icon"/> <img class="bucket_icon" src="/res/img/mime/folder-remote.png" alt="Bucket icon"/>
{bucket.name} {bucket.name}
</a> </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>
<div class="bucket_details" class:hidden={details_hidden}> <div>
<form on:submit|preventDefault={save_bucket}> <form on:submit|preventDefault={save_bucket}>
<table class="form"> <table class="form">
<tr class="form"> <tr class="form">
@@ -66,26 +56,9 @@ const delete_bucket = async () => {
</table> </table>
</form> </form>
</div> </div>
</div> </Expandable>
<style> <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 { .bucket_title {
flex: 1 1 auto; flex: 1 1 auto;
align-self: center; align-self: center;
@@ -98,18 +71,4 @@ const delete_bucket = async () => {
margin: 4px; margin: 4px;
vertical-align: middle; 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> </style>

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

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

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

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

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

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

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

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

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

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

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

@@ -8,7 +8,6 @@ export let used = 0
$: frac = used / total $: frac = used / total
</script> </script>
<div>
<ProgressBar total={total} used={used}></ProgressBar> <ProgressBar total={total} used={used}></ProgressBar>
{#if frac > 0.99} {#if frac > 0.99}
@@ -33,4 +32,3 @@ $: frac = used / total
</a> </a>
</div> </div>
{/if} {/if}
</div>

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

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

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

@@ -7,7 +7,6 @@ export let used = 0
$: frac = used / total $: frac = used / total
</script> </script>
<div>
Storage: Storage:
{formatDataVolume(used, 3)} {formatDataVolume(used, 3)}
out of out of
@@ -56,7 +55,6 @@ $: frac = used / total
</p> </p>
</div> </div>
{/if} {/if}
</div>
<style> <style>
.warn_text { .warn_text {

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

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

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

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

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

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