From 14bc345ec865f215bdc16b11319c82fa2677693d Mon Sep 17 00:00:00 2001 From: Wim Brand Date: Tue, 22 Jun 2021 17:14:21 +0200 Subject: [PATCH] Rewrite home page in svelte --- res/include/style/layout.css | 1 + res/template/home.html | 130 +---- svelte/rollup.config.js | 1 + svelte/src/home_page.js | 8 + svelte/src/home_page/HomePage.svelte | 490 ++++++++++++++++++ svelte/src/home_page/UploadProgressBar.svelte | 264 ++++++++++ svelte/src/icons/Facebook.svelte | 5 + svelte/src/icons/Reddit.svelte | 5 + svelte/src/icons/Tumblr.svelte | 5 + svelte/src/icons/Twitter.svelte | 5 + svelte/src/util/Formatting.svelte | 4 +- svelte/src/util/Util.svelte | 38 ++ 12 files changed, 830 insertions(+), 126 deletions(-) create mode 100644 svelte/src/home_page.js create mode 100644 svelte/src/home_page/HomePage.svelte create mode 100644 svelte/src/home_page/UploadProgressBar.svelte create mode 100644 svelte/src/icons/Facebook.svelte create mode 100644 svelte/src/icons/Reddit.svelte create mode 100644 svelte/src/icons/Tumblr.svelte create mode 100644 svelte/src/icons/Twitter.svelte create mode 100644 svelte/src/util/Util.svelte diff --git a/res/include/style/layout.css b/res/include/style/layout.css index d0f5f9d..6cb8bcc 100644 --- a/res/include/style/layout.css +++ b/res/include/style/layout.css @@ -487,6 +487,7 @@ select:disabled , select.disabled { box-shadow: none; transition: none; padding: 4px 5px 4px 5px; + cursor: not-allowed; } /* Dropdown list of the select tag */ diff --git a/res/template/home.html b/res/template/home.html index 43c0faa..e69bb68 100644 --- a/res/template/home.html +++ b/res/template/home.html @@ -10,53 +10,6 @@ max-width: 800px; margin: 0 auto 50px auto; } - .big_button{ - width: 40%; - min-width: 250px; - max-width: 400px; - margin: 10px !important; - border-radius: 5px; - font-size: 1.8em; - } - .instruction_highlight { - border-top: 1px solid var(--layer_2_color_border); - border-bottom: 1px solid var(--layer_2_color_border); - box-sizing: border-box; - margin: 1.5em 0; - padding: 5px; - } - .big_number { - font-size: 1.5em; - font-weight: bold; - line-height: 1em; - text-align: center; - display: inline-block; - box-sizing: border-box; - background-color: var(--highlight_color); - color: var(--highlight_text_color); - border-radius: 30px; - padding: 0.15em; - margin-right: 0.4em; - width: 1.4em; - height: 1.4em; - vertical-align: middle; - } - .instruction_text { - margin: 0.1em; - font-size: 1.5em; - display: inline; - box-sizing: border-box; - vertical-align: middle; - } - .social_button { - margin: 5px; - } - .social_button > img, .social_button > svg { - width: 40px; - height: 40px; - margin: 5px 15px; - } - .feat_table { display: flex; flex-direction: column; @@ -116,6 +69,10 @@ {{template `modal.css`}} + + + + {{template "page_top" .}} @@ -125,80 +82,9 @@ Header image
-
-
- 1 - Select files to upload -
You can also drop files on this page from your file - manager or paste an image from your clipboard -
- - - -
-

- By uploading files to pixeldrain you acknowledge and accept our - content policy. -

-

-
- 2Wait for the files to finish uploading -
-
- -
- -
-
3Share the files
-
- -
+ +

What is pixeldrain?

@@ -459,11 +345,7 @@ + + { dragging = true }} + on:dragenter|preventDefault|stopPropagation={() => { dragging = true }} + on:dragleave|preventDefault|stopPropagation={() => { dragging = false }} + on:drop={drop} + on:paste={paste} + on:keydown={keydown} /> + +
+
+
+ 1 + Select files to upload +
+ You can also drop files on this page from your file + manager or paste an image from your clipboard +
+
+ + + + + + text_fields + Upload Text + +
+

+ By uploading files to pixeldrain you acknowledge and accept our + content policy. +

+ +

+
+ 2 + Wait for the files to finish uploading +
+
+ +
+ Gimme gimme gimme!
+ Drop your files to upload them +
+ + {#each upload_queue as file} + + {/each} + +
+
+ 3 + Share the files +
+
+ + + + + +

+ + + + +
+ + {#each created_lists as list} + + list icon + List created!
+ {list.title}
+ {list.link} + + {/each} +
+ + diff --git a/svelte/src/home_page/UploadProgressBar.svelte b/svelte/src/home_page/UploadProgressBar.svelte new file mode 100644 index 0000000..39c12f7 --- /dev/null +++ b/svelte/src/home_page/UploadProgressBar.svelte @@ -0,0 +1,264 @@ + + + +
+ {#if job.status === "queued"} + cloud_queue + {:else if job.status === "uploading"} + cloud_upload + {:else if job.status === "finished"} + file thumbnail + {:else if job.status === "error"} + error + {/if} +
+
+
+ {#if job.status === "error"} + {error_reason} + {:else} + {job.name} + {/if} +
+
+ {#if job.status === "queued"} + Queued... + {:else if job.status === "uploading"} +
+ {((loaded_size/total_size)*100).toPrecision(3)}% +
+
+ ETA {formatDuration(remaining_time, 0)} +
+
+ {formatDataVolume(transfer_rate, 3)}/s +
+ {:else if job.status === "finished"} + + {domain_url() + "/u/" + job.id} + + {:else if job.status === "error"} + {error_id} + {/if} +
+
+ + + diff --git a/svelte/src/icons/Facebook.svelte b/svelte/src/icons/Facebook.svelte new file mode 100644 index 0000000..e03be13 --- /dev/null +++ b/svelte/src/icons/Facebook.svelte @@ -0,0 +1,5 @@ + + + + + diff --git a/svelte/src/icons/Reddit.svelte b/svelte/src/icons/Reddit.svelte new file mode 100644 index 0000000..fdfa045 --- /dev/null +++ b/svelte/src/icons/Reddit.svelte @@ -0,0 +1,5 @@ + + + + + diff --git a/svelte/src/icons/Tumblr.svelte b/svelte/src/icons/Tumblr.svelte new file mode 100644 index 0000000..2738466 --- /dev/null +++ b/svelte/src/icons/Tumblr.svelte @@ -0,0 +1,5 @@ + + + + + diff --git a/svelte/src/icons/Twitter.svelte b/svelte/src/icons/Twitter.svelte new file mode 100644 index 0000000..069e571 --- /dev/null +++ b/svelte/src/icons/Twitter.svelte @@ -0,0 +1,5 @@ + + + + + diff --git a/svelte/src/util/Formatting.svelte b/svelte/src/util/Formatting.svelte index 18552ac..7feafea 100644 --- a/svelte/src/util/Formatting.svelte +++ b/svelte/src/util/Formatting.svelte @@ -36,12 +36,12 @@ const minute = second*60 const hour = minute*60 const day = hour*24 -export const formatDuration = (ms) => { +export const formatDuration = (ms, decimals) => { let res = "" if (ms >= day) { res += Math.floor(ms/day) + "d " } if (ms >= hour) { res += Math.floor((ms%day)/hour) + "h " } if (ms >= minute) { res += Math.floor((ms%hour)/minute) + "m " } - return res + ((ms%minute)/second).toFixed(3) + "s" + return res + ((ms%minute)/second).toFixed(decimals) + "s" } export const formatDate = (date, hours, minutes, seconds) => { diff --git a/svelte/src/util/Util.svelte b/svelte/src/util/Util.svelte new file mode 100644 index 0000000..a6de939 --- /dev/null +++ b/svelte/src/util/Util.svelte @@ -0,0 +1,38 @@ +