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

Make the UI flatter

Browse Source
This commit is contained in:
Fornax
2022-01-03 14:02:50 +01:00
parent bdec963be0
commit 4f17c71b56
30 changed files with 239 additions and 247 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -10,8 +10,9 @@ let graphTimeout = null
let start_time = ""
let end_time = ""
let total_bandwidth = 0
let total_views = 0
let total_bandwidth_paid = 0
let total_views = 0
let total_downloads = 0
const loadGraph = (minutes, interval, live) => {
if (graphTimeout !== null) { clearTimeout(graphTimeout) }
if (live) {
@@ -51,8 +52,9 @@ const loadGraph = (minutes, interval, live) => {
start_time = resp.views.timestamps[0]
end_time = resp.views.timestamps.slice(-1)[0];
total_bandwidth = resp.bandwidth.amounts.reduce((acc, val) => acc + val)
total_views = resp.views.amounts.reduce((acc, val) => acc + val)
total_bandwidth_paid = resp.bandwidth_paid.amounts.reduce((acc, val) => acc + val)
total_views = resp.views.amounts.reduce((acc, val) => acc + val)
total_downloads = resp.downloads.amounts.reduce((acc, val) => acc + val)
})
}
@@ -176,8 +178,9 @@ onDestroy(() => {
<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 and
{formatThousands(total_views, 3)} views
{formatDataVolume(total_bandwidth_paid, 3)} paid bandwidth,
{formatThousands(total_views, 3)} views and
{formatThousands(total_downloads, 3)} downloads
</div>
<br/>

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

@@ -26,7 +26,9 @@ onMount(() => {
})
</script>
<div>
<div class="checkers inset">
<h1>Admin Panel</h1>
<div class="tab_bar">
<a class="button"
href="/admin"
@@ -75,18 +77,18 @@ onMount(() => {
Update global settings
</a>
</div>
{#if page === "status"}
<Home></Home>
{:else if page === "block_files"}
<BlockFiles></BlockFiles>
{:else if page === "abuse_reports"}
<AbuseReports></AbuseReports>
{:else if page === "abuse_reporters"}
<AbuseReporters></AbuseReporters>
{:else if page === "ip_bans"}
<IpBans></IpBans>
{:else if page === "subscriptions"}
<Subscriptions></Subscriptions>
{/if}
</div>
{#if page === "status"}
<Home></Home>
{:else if page === "block_files"}
<BlockFiles></BlockFiles>
{:else if page === "abuse_reports"}
<AbuseReports></AbuseReports>
{:else if page === "abuse_reporters"}
<AbuseReporters></AbuseReporters>
{:else if page === "ip_bans"}
<IpBans></IpBans>
{:else if page === "subscriptions"}
<Subscriptions></Subscriptions>
{/if}

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

@@ -391,15 +391,14 @@ const keydown = (e) => {
</div>
{/if}
<div class="instruction" style="margin-top: 0;">
<div class="limit_width">
<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>
<div class="instruction limit_width" 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>
<br/>
<input bind:this={file_input_field} on:change={file_input_change} type="file" name="file" multiple="multiple"/>
<button on:click={() => { file_input_field.click() }} class="big_button button_highlight">
@@ -417,22 +416,21 @@ const keydown = (e) => {
<a href="/about#content-policy">content policy</a>.
<p>
<div class="instruction" style="margin-bottom: 0;">
<div class="limit_width">
<span class="big_number">2</span>
<span class="instruction_text">Wait for the files to finish uploading</span>
<br/>
<div class="stats_box">
<div>Size {formatDataVolume(total_size, 3)}</div>
<div>Progress {(total_progress*100).toPrecision(3)}%</div>
<div>ETA {formatDuration(remaining_time, 0)}</div>
<div>Rate {formatDataVolume(total_rate, 3)}/s</div>
</div>
<div class="instruction limit_width" style="margin-bottom: 0;">
<span class="big_number">2</span>
<span class="instruction_text">Wait for the files to finish uploading</span>
<br/>
<div class="stats_box">
<div>Size {formatDataVolume(total_size, 3)}</div>
<div>Progress {(total_progress*100).toPrecision(3)}%</div>
<div>ETA {formatDuration(remaining_time, 0)}</div>
<div>Rate {formatDataVolume(total_rate, 3)}/s</div>
</div>
</div>
<div class="progress_bar_outer" style="margin-bottom: 1.5em;">
<div bind:this={progress_bar_inner} class="progress_bar_inner"></div>
</div>
<br/>
<div id="file_drop_highlight" class="highlight_green" class:hide={!dragging}>
Gimme gimme gimme!<br/>
@@ -443,12 +441,11 @@ const keydown = (e) => {
<UploadProgressBar bind:this={file.component} job={file}></UploadProgressBar>
{/each}
<div class="instruction">
<div class="limit_width">
<span class="big_number">3</span>
<span class="instruction_text">Share the files</span>
</div>
<div class="instruction limit_width">
<span class="big_number">3</span>
<span class="instruction_text">Share the files</span>
</div>
<br/>
{#if upload_queue.length > 1}
You can create an album to group your files together into one link<br/>
@@ -507,8 +504,8 @@ const keydown = (e) => {
<br/>
{#if qr_visible}
<img src="/api/misc/qr?text={encodeURIComponent(share_link)}" alt="QR code" style="width: 300px; max-width: 100%;">
<br/>
{/if}
<br/>
<button bind:this={btn_copy_links} on:click={copy_links} disabled={state !== "finished"}>
<i class="icon">content_copy</i> Copy <u>a</u>ll links to clipboard
</button>
@@ -521,11 +518,9 @@ const keydown = (e) => {
<br/>
{#if window.user.subscription.name === ""}
<div class="instruction">
<div class="limit_width">
<span class="big_number">4</span>
<span class="instruction_text">Support me on Patreon!</span>
</div>
<div class="instruction limit_width">
<span class="big_number">4</span>
<span class="instruction_text">Support me on Patreon!</span>
</div>
<div class="limit_width">
<p>

4
svelte/src/user_file_manager/DirectoryElement.svelte
View File

@@ -325,7 +325,7 @@ const node_click = (index) => {
{/each}
</div>
</div>
<div id="footer" class="status_bar highlight_1">
<div id="footer">
{statusBar}
</div>
</div>
@@ -382,6 +382,8 @@ const node_click = (index) => {
#footer {
flex-shrink: 0;
text-align: left;
background-color: var(--layer_1_color);
padding: 4px;
}
.node {

19
svelte/src/user_file_manager/FileManager.svelte
View File

@@ -256,8 +256,16 @@ onMount(() => {
<svelte:window on:keydown={keydown} on:hashchange={hashChange} />
<svetle:head>
<style>
#footer {
border-top-left-radius: 16px;
}
</style>
</svetle:head>
<div id="file_manager" class="file_manager">
<div id="nav_bar" class="nav_bar highlight_1">
<div id="nav_bar" class="nav_bar" class:expanded={selecting}>
<button id="btn_menu" onclick="toggleMenu()"><i class="icon">menu</i></button>
<button on:click={toggleSelecting} id="btn_select" class:button_highlight={selecting}>
<i class="icon">select_all</i> Select
@@ -271,7 +279,7 @@ onMount(() => {
</button>
</div>
{#if selecting}
<div class="nav_bar highlight_3">
<div class="nav_bar">
<!-- Buttons to make a list and bulk delete files will show up here soon. Stay tuned ;-) -->
{#if contentType === "files"}
<button on:click={createList}><i class="icon">list</i> Make list</button>
@@ -337,7 +345,6 @@ is collapsed */
#file_manager {
position: absolute;
padding: 0;
background-color: var(--layer_2_color);
width: 100%;
height: 100%;
display: flex;
@@ -347,6 +354,12 @@ is collapsed */
flex-shrink: 0;
display: flex;
flex-direction: row;
border-bottom-left-radius: 16px;
background-color: var(--layer_1_color);
padding: 4px;
}
.nav_bar.expanded {
border-bottom-left-radius: 0;
}
.nav_bar > button {
flex-shrink: 0;

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

@@ -33,7 +33,9 @@ onMount(() => {
<svelte:window on:popstate={get_page} />
<div>
<div class="checkers inset">
<h1>Welcome home, {window.user.username}!</h1>
<div class="tab_bar">
<a class="button"
href="/user"
@@ -73,18 +75,18 @@ onMount(() => {
</a>
{/if}
</div>
{#if page === "home"}
<Home/>
{:else if page === "settings"}
<AccountSettings/>
{:else if page === "api_keys"}
<APIKeys/>
{:else if page === "connect_app"}
<ConnectApp/>
{:else if page === "transactions"}
<Transactions/>
{:else if page === "subscription"}
<Subscription/>
{/if}
</div>
{#if page === "home"}
<Home/>
{:else if page === "settings"}
<AccountSettings/>
{:else if page === "api_keys"}
<APIKeys/>
{:else if page === "connect_app"}
<ConnectApp/>
{:else if page === "transactions"}
<Transactions/>
{:else if page === "subscription"}
<Subscription/>
{/if}

2
svelte/src/util/Modal.svelte
View File

@@ -86,7 +86,7 @@ const keydown = e => {
left: 50%;
transform: translate(-50%, -20%);
padding: 0;
border-radius: 20px 20px 8px 8px;
border-radius: 20px 20px 16px 16px;
overflow: hidden;
text-align: left;
box-shadow: var(--shadow_color) 0px 0px 50px;