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

Styling and usability fixes

Browse Source
This commit is contained in:
Wim Brand
2026-04-08 19:54:09 +02:00
parent 2fb0947077
commit 6d0897e756
13 changed files with 140 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
svelte/src/wrap/MainMenu.svelte
View File

@@ -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
</button>
{/if}
<a class="button" href="/" use:highlight_current_page>
<i class="icon">home</i>
<span>Home</span>
</a>
<MenuEntry id="home" collapsed={false} no_border>
{#snippet title()}
<a class="button" style="flex: 1 1 auto;" href="/" use:highlight_current_page>
<span style="flex: 1 1 auto;">Nova.storage</span>
<img src="/res/img/nova_64.png" style="width: 1.5em; height: 1.5em; flex: 0 0 auto;" alt="Nova.storage logo">
</a>
{/snippet}
{#snippet body()}
<a class="button" href="/speedtest" use:highlight_current_page>
<i class="icon">speed</i>
<span>Speedtest</span>
</a>
<a class="button" href="/appearance" use:highlight_current_page>
<i class="icon">palette</i>
<span>Themes</span>
</a>
{/snippet}
</MenuEntry>
{#if $user.username !== undefined && $user.username !== ""}
<MenuEntry id="subscription_info" collapsed={false}>
@@ -212,19 +227,8 @@ const set_offset = (off: number) => {
</a>
{/if}
<div class="separator"></div>
<a class="button" href="/speedtest" use:highlight_current_page>
<i class="icon">speed</i>
<span>Speedtest</span>
</a>
<a class="button" href="/appearance" use:highlight_current_page>
<i class="icon">palette</i>
<span>Themes</span>
</a>
<Bookmarks menu_collapsed={false}/>
<Tree menu_collapsed={false}/>
<Bookmarks/>
<Tree/>
</nav>
</div>
</div>
@@ -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 */