From 6d0897e7563789504e72dfe22c04938898aec378 Mon Sep 17 00:00:00 2001 From: Wim Brand Date: Wed, 8 Apr 2026 19:54:09 +0200 Subject: [PATCH] Styling and usability fixes --- svelte/src/admin_panel/Home.svelte | 26 +++---- svelte/src/filesystem/DetailsWindow.svelte | 2 +- svelte/src/filesystem/edit_window/Branding.ts | 8 +-- .../filesystem/edit_window/EditWindow.svelte | 2 +- .../edit_window/ThemePresets.svelte | 24 +++++++ svelte/src/filesystem/viewers/Audio.svelte | 5 +- svelte/src/layout/checkout/CheckoutLib.ts | 70 +++++++++---------- svelte/src/lib/FilesystemAPI.svelte.ts | 2 +- svelte/src/util/Modal.svelte | 12 ++-- svelte/src/wrap/Bookmarks.svelte | 18 ++--- svelte/src/wrap/MainMenu.svelte | 57 +++++++-------- svelte/src/wrap/MenuEntry.svelte | 11 ++- svelte/src/wrap/Tree.svelte | 12 ++-- 13 files changed, 140 insertions(+), 109 deletions(-) diff --git a/svelte/src/admin_panel/Home.svelte b/svelte/src/admin_panel/Home.svelte index 3f1047e..85a181c 100644 --- a/svelte/src/admin_panel/Home.svelte +++ b/svelte/src/admin_panel/Home.svelte @@ -188,18 +188,20 @@ onMount(() => {

Process stats

- - - - - - - - - - - -
DB Time{formatDate(new Date(status.db_time), true, true, true)}DB Latency{formatNumber(status.db_latency / 1000, 3)} msPID{status.pid}
+
+ + + + + + + + + + + +
DB Time{formatDate(new Date(status.db_time), true, true, true)}DB Latency{formatNumber(status.db_latency / 1000, 3)} msPID{status.pid}
+

Pixelstore stats

diff --git a/svelte/src/filesystem/DetailsWindow.svelte b/svelte/src/filesystem/DetailsWindow.svelte index 594b8a2..0769ea0 100644 --- a/svelte/src/filesystem/DetailsWindow.svelte +++ b/svelte/src/filesystem/DetailsWindow.svelte @@ -193,7 +193,7 @@ run(() => { {formatThousands(total_downloads)} (unique, counted once per IP) - Egress bandwidth + Egress traffic {formatDataVolume(total_egress, 4)} ( {formatThousands(total_egress)} B ), diff --git a/svelte/src/filesystem/edit_window/Branding.ts b/svelte/src/filesystem/edit_window/Branding.ts index 3f5ba4d..a230c59 100644 --- a/svelte/src/filesystem/edit_window/Branding.ts +++ b/svelte/src/filesystem/edit_window/Branding.ts @@ -4,7 +4,7 @@ import hsl2rgb from "pure-color/convert/hsl2rgb"; import rgb2hex from "pure-color/convert/rgb2hex"; import type { FSNode, FSNodeProperties } from "lib/FilesystemAPI.svelte"; -const text_contrast = 75 +const text_contrast = 80 const body_alpha = 0.9 type Style = { @@ -116,9 +116,9 @@ const add_styles = (style: Style, properties: FSNodeProperties) => { const add_contrast = (color: string, amt: number) => { let hsl = rgb2hsl(parse(color)) // Convert hex to hsl - // If the lightness is less than 30 it is considered a dark colour. This - // threshold is 30 instead of 50 because overall dark text is more legible - if (hsl[2] < 30) { + // If the lightness is less than 40 it is considered a dark colour. This + // threshold is 40 instead of 50 because overall dark text is more legible + if (hsl[2] < 40) { hsl[2] = hsl[2] + amt // Dark color, add lightness } else { hsl[2] = hsl[2] - amt // Light color, remove lightness diff --git a/svelte/src/filesystem/edit_window/EditWindow.svelte b/svelte/src/filesystem/edit_window/EditWindow.svelte index e561aa3..19cf94b 100644 --- a/svelte/src/filesystem/edit_window/EditWindow.svelte +++ b/svelte/src/filesystem/edit_window/EditWindow.svelte @@ -163,7 +163,7 @@ const save = async (e: SubmitEvent) => { diff --git a/svelte/src/layout/checkout/CheckoutLib.ts b/svelte/src/layout/checkout/CheckoutLib.ts index bc128ac..b0398d7 100644 --- a/svelte/src/layout/checkout/CheckoutLib.ts +++ b/svelte/src/layout/checkout/CheckoutLib.ts @@ -24,45 +24,45 @@ export const payment_providers: PaymentProvider[] = [ name: "paypal", label: "PayPal", }, { - // icon: "bancontact", - // name: "bancontact", - // label: "Bancontact", - // need_name: true, - // country_filter: ["BE"], - // }, { - // icon: "eps", - // name: "eps", - // label: "EPS", - // need_name: true, - // country_filter: ["AT"], - // }, { - // icon: "ideal", - // name: "ideal", - // label: "iDEAL", - // need_name: true, - // country_filter: ["NL"], - // }, { - // icon: "p24", - // name: "p24", - // label: "Przelewy24", - // need_name: true, - // country_filter: ["PL"], - // }, { - // icon: "trustly", - // name: "trustly", - // label: "Trustly", - // need_name: true, - // country_filter: ["AT", "DE", "DK", "EE", "ES", "FI", "GB", "LT", "LV", "NL", "NO", "SE"] - // }, { + icon: "bancontact", + name: "bancontact", + label: "Bancontact", + need_name: true, + country_filter: ["BE"], + }, { + icon: "eps", + name: "eps", + label: "EPS", + need_name: true, + country_filter: ["AT"], + }, { + icon: "ideal", + name: "ideal", + label: "iDEAL", + need_name: true, + country_filter: ["NL"], + }, { + icon: "p24", + name: "p24", + label: "Przelewy24", + need_name: true, + country_filter: ["PL"], + }, { + icon: "trustly", + name: "trustly", + label: "Trustly", + need_name: true, + country_filter: ["AT", "DE", "DK", "EE", "ES", "FI", "GB", "LT", "LV", "NL", "NO", "SE"] + }, { icon: "bitcoin", name: "btc", label: "Bitcoin", crypto: true, - // }, { - // icon: "dogecoin", - // name: "doge", - // label: "Dogecoin", - // crypto: true, + }, { + icon: "dogecoin", + name: "doge", + label: "Dogecoin", + crypto: true, }, { icon: "monero", name: "xmr", diff --git a/svelte/src/lib/FilesystemAPI.svelte.ts b/svelte/src/lib/FilesystemAPI.svelte.ts index ba02ede..029696e 100644 --- a/svelte/src/lib/FilesystemAPI.svelte.ts +++ b/svelte/src/lib/FilesystemAPI.svelte.ts @@ -364,7 +364,7 @@ export const fs_node_type = (node: FSNode) => { export const fs_node_icon = (node: FSNode, width = 64, height = 64) => { if (node.type === "dir") { - // Folders with an ID are publically shared, use the shared folder icon + // Folders with an ID are publicly shared, use the shared folder icon if (node.is_shared()) { return "/res/img/mime/folder-remote.png" } else { diff --git a/svelte/src/util/Modal.svelte b/svelte/src/util/Modal.svelte index caba000..232c057 100644 --- a/svelte/src/util/Modal.svelte +++ b/svelte/src/util/Modal.svelte @@ -5,8 +5,6 @@ let global_index = 10000; {#if $bookmarks_store.length !== 0} - + {#snippet title()}
Bookmarks
{:else} - {bookmark.icon} - {bookmark.label} + Bookmark icon + {bookmark.label} {/if}
@@ -145,11 +143,13 @@ const drop = (e: DragEvent, drop_idx: number) => { background: none; box-shadow: none; } -.hide { - display: none; -} .highlight { box-shadow: 0 0 0px 1px var(--highlight_color); text-decoration: none; } +.thumbnail { + height: 1.5em; + width: 1.5em; + border-radius: 2px; +} diff --git a/svelte/src/wrap/MainMenu.svelte b/svelte/src/wrap/MainMenu.svelte index f723ebc..710214a 100644 --- a/svelte/src/wrap/MainMenu.svelte +++ b/svelte/src/wrap/MainMenu.svelte @@ -21,7 +21,7 @@ import { breadcrumbs_store } from "./BreadcrumbStore"; // The menu swipe will be detected if it was less than this much pixels from the // screen edge -const screen_edge_offset = 50 +const screen_edge_offset = 40 // Dead zone before the swipe action gets detected const swipe_dead_zone = screen_edge_offset/4 @@ -77,12 +77,12 @@ const touchmove = (e: TouchEvent) => { const abs_x = Math.abs(x) const abs_y = Math.abs(y) - // The cursor must have moved at least swipe_dead_zone pixels and three - // times as much on the x axis than the y axis for it to count as a swipe - if (abs_x > swipe_dead_zone && abs_x / 3 > abs_y) { + // The cursor must have moved at least swipe_dead_zone pixels and twice as + // much on the x axis than the y axis for it to count as a swipe + if (abs_x > swipe_dead_zone && abs_x / 2 > abs_y) { set_offset(initial_offset+(x*2)) } else { - set_offset(initial_offset) + touchend(e) } } @@ -158,10 +158,25 @@ const set_offset = (off: number) => { Menu {/if} - - home - Home - + + + {#snippet title()} + + Nova.storage + Nova.storage logo + + {/snippet} + {#snippet body()} + + speed + Speedtest + + + palette + Themes + + {/snippet} + {#if $user.username !== undefined && $user.username !== ""} @@ -212,19 +227,8 @@ const set_offset = (off: number) => { {/if} -
- - - speed - Speedtest - - - palette - Themes - - - - + + @@ -273,6 +277,7 @@ const set_offset = (off: number) => { flex: 0 0 auto; border-right: 1px solid var(--separator); background: var(--body_background); + backdrop-filter: blur(3px); z-index: 9; } .scroll_container { @@ -288,7 +293,7 @@ const set_offset = (off: number) => { flex-direction: column; width: 15em; } -.nav > .button { +.button { background: none; box-shadow: none; } @@ -304,11 +309,6 @@ const set_offset = (off: number) => { margin: 3px; } -.separator { - height: 1px; - width: 100%; - background-color: var(--separator); -} .stats_table { display: grid; grid-template-columns: auto auto; @@ -324,6 +324,7 @@ const set_offset = (off: number) => { justify-content: left; background: var(--body_background); border-bottom: 1px solid var(--separator); + backdrop-filter: blur(3px); position: sticky; top: 0; z-index: 8; /* below navigation, on top of most other things */ diff --git a/svelte/src/wrap/MenuEntry.svelte b/svelte/src/wrap/MenuEntry.svelte index 1e2971e..5e1fabb 100644 --- a/svelte/src/wrap/MenuEntry.svelte +++ b/svelte/src/wrap/MenuEntry.svelte @@ -7,11 +7,13 @@ type Expandable = {[key: string]: boolean} let { id, collapsed = false, + no_border, title, body, }: { id: string - collapsed: boolean + collapsed?: boolean + no_border?: boolean title: import('svelte').Snippet body: import('svelte').Snippet } = $props(); @@ -43,8 +45,8 @@ const toggle = (e: MouseEvent) => { } -
- +
+ {#if !collapsed} {@render title()} @@ -63,4 +65,7 @@ const toggle = (e: MouseEvent) => { align-items: center; border-top: 1px solid var(--separator); } +.no_border { + border-top: none; +} diff --git a/svelte/src/wrap/Tree.svelte b/svelte/src/wrap/Tree.svelte index b90f077..052fd16 100644 --- a/svelte/src/wrap/Tree.svelte +++ b/svelte/src/wrap/Tree.svelte @@ -5,7 +5,6 @@ import { highlight_current_page } from "lib/HighlightCurrentPage"; import { onMount } from "svelte"; import MenuEntry from "./MenuEntry.svelte"; -let { menu_collapsed }: { menu_collapsed: boolean } = $props(); let siblings: FSNode[] = $state([]) onMount(() => { @@ -29,7 +28,7 @@ onMount(() => { }) - + {#snippet title()}
Parent directories