From 13c5889a5639c94b3402da3d9a960ee7fd1d48e3 Mon Sep 17 00:00:00 2001 From: Fornax Date: Fri, 15 Mar 2024 13:58:27 +0100 Subject: [PATCH] Clean up UI for small screens --- svelte/src/filesystem/DetailsWindow.svelte | 63 +++++++++++----------- svelte/src/filesystem/FileStats.svelte | 2 +- svelte/src/filesystem/Filesystem.svelte | 2 +- svelte/src/filesystem/Menu.svelte | 23 ++++++-- svelte/src/filesystem/Toolbar.svelte | 3 +- 5 files changed, 54 insertions(+), 39 deletions(-) diff --git a/svelte/src/filesystem/DetailsWindow.svelte b/svelte/src/filesystem/DetailsWindow.svelte index e4564e3..72ba9fa 100644 --- a/svelte/src/filesystem/DetailsWindow.svelte +++ b/svelte/src/filesystem/DetailsWindow.svelte @@ -30,7 +30,7 @@ let chart_interval = 0 let chart_timespans = [ {label: "Day (1m)", span: 1440, interval: 1}, {label: "Week (1h)", span: 10080, interval: 60}, - {label: "Month (1h)", span: 43200, interval: 60}, + {label: "Month (1d)", span: 43200, interval: 1440}, {label: "Quarter (1d)", span: 131400, interval: 1440}, {label: "Year (1d)", span: 525600, interval: 1440}, {label: "Two Years (1d)", span: 1051200, interval: 1440}, @@ -38,7 +38,6 @@ let chart_timespans = [ ] let total_downloads = 0 -let total_transfer_free = 0 let total_transfer_paid = 0 $: update_chart(state.base, chart_timespan, chart_interval) @@ -81,19 +80,13 @@ let update_chart = async (base, timespan, interval) => { chart.data().datasets = [ { - label: "Unique downloads", + label: "Unique Downloads", borderWidth: 2, pointRadius: 0, borderColor: color_by_name("chart_1_color"), backgroundColor: color_by_name("chart_1_color"), }, { - label: "Free downloads", - borderWidth: 2, - pointRadius: 0, - borderColor: color_by_name("chart_2_color"), - backgroundColor: color_by_name("chart_2_color"), - }, { - label: "Paid downloads", + label: "Total Downloads", borderWidth: 2, pointRadius: 0, borderColor: color_by_name("chart_3_color"), @@ -111,22 +104,16 @@ let update_chart = async (base, timespan, interval) => { }); total_downloads = 0 - total_transfer_free = 0 total_transfer_paid = 0 resp.downloads.amounts.forEach(val => total_downloads += val); - resp.transfer_free.amounts.forEach((val, idx) => { - resp.transfer_free.amounts[idx] = val / base.file_size; - total_transfer_free += val - }); resp.transfer_paid.amounts.forEach((val, idx) => { resp.transfer_paid.amounts[idx] = val / base.file_size; total_transfer_paid += val }); chart.data().labels = resp.downloads.timestamps chart.data().datasets[0].data = resp.downloads.amounts - chart.data().datasets[1].data = resp.transfer_free.amounts - chart.data().datasets[2].data = resp.transfer_paid.amounts + chart.data().datasets[1].data = resp.transfer_paid.amounts chart.update() } catch (err) { console.error("Failed to get time series data:", err) @@ -135,13 +122,27 @@ let update_chart = async (base, timespan, interval) => { -

Node details

- - - - - + + + + + + + + + + + + + + + + + + + + {#if state.base.id} @@ -149,22 +150,20 @@ let update_chart = async (base, timespan, interval) => { {/if} {#if state.base.type === "file"} - + + + + - - - + + - +
Name{state.base.name}
Path{state.base.path}
Date created{formatDate(state.base.created, true, true, true)}
Date modified{formatDate(state.base.modified, true, true, true)}
Mode{state.base.mode_string}
Name{state.base.name}
Path{state.base.path}
Created{formatDate(state.base.created, true, true, true)}
Modified{formatDate(state.base.modified, true, true, true)}
Mode{state.base.mode_string}
Public ID
File type{state.base.file_type}
File type{state.base.file_type}
File size {formatDataVolume(state.base.file_size, 4)} ( {formatThousands(state.base.file_size)} B )
Unique downloads{formatThousands(total_downloads)}
Free bandwidth used - {formatDataVolume(total_transfer_free, 4)} - ( {formatThousands(total_transfer_free)} B ), - {(total_transfer_free/state.base.file_size).toFixed(1)}x file size - Downloads{formatThousands(total_downloads)} (unique, counted once per IP)
Premium bandwidth usedTransfer used {formatDataVolume(total_transfer_paid, 4)} ( {formatThousands(total_transfer_paid)} B ), diff --git a/svelte/src/filesystem/FileStats.svelte b/svelte/src/filesystem/FileStats.svelte index c6557c6..cd66165 100644 --- a/svelte/src/filesystem/FileStats.svelte +++ b/svelte/src/filesystem/FileStats.svelte @@ -130,7 +130,7 @@ onDestroy(close_socket) line-height: 0.75em; margin-top: 0.5em; } -@media (max-width: 700px) { +@media (max-width: 800px) { .label { text-align: center; padding-left: 0; diff --git a/svelte/src/filesystem/Filesystem.svelte b/svelte/src/filesystem/Filesystem.svelte index fca2372..abd1b71 100644 --- a/svelte/src/filesystem/Filesystem.svelte +++ b/svelte/src/filesystem/Filesystem.svelte @@ -236,7 +236,7 @@ const update_css = path => document.documentElement.style = branding_from_path(p /* This max-width needs to be synced with the .toolbar max-width in Toolbar.svelte and the .label max-width in FileStats.svelte */ -@media (max-width: 700px) { +@media (max-width: 800px) { .viewer_area { flex-direction: column-reverse; } diff --git a/svelte/src/filesystem/Menu.svelte b/svelte/src/filesystem/Menu.svelte index a5f5693..d00af29 100644 --- a/svelte/src/filesystem/Menu.svelte +++ b/svelte/src/filesystem/Menu.svelte @@ -25,8 +25,8 @@ const click = e => {
@@ -37,6 +37,7 @@ const click = e => {
{#if window.user.username !== ""} +
{window.user.username}
Subscription
{window.user.subscription.name}
@@ -53,9 +54,13 @@ const click = e => {