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

Add some borders. Fix style override when switching pages

Browse Source
This commit is contained in:
Wim Brand
2026-02-12 20:00:43 +01:00
parent ec1c8b0f5b
commit cc417535fa
6 changed files with 54 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
res/static/style/layout.css
View File

@@ -393,10 +393,6 @@ table:not(.form) {
min-width: 100%; min-width: 100%;
} }
tr {
border-bottom: 1px var(--separator) solid;
}
tr>td { tr>td {
padding: 0.2em 0.5em; padding: 0.2em 0.5em;
} }

9
svelte/src/filesystem/Filesystem.svelte
View File

@@ -47,13 +47,16 @@ onMount(() => {
return return
} }
// Custom CSS rules for the whole viewer // Custom CSS rules for the whole viewer. The MainMenu applies its
document.documentElement.style = css_from_path(nav.path) // styles to the <html> element. So we apply to the <body> element, our
// styles take precedence since they're lower level, and we can clean it
// up afterwards without overwriting global style
document.body.style = css_from_path(nav.path)
}) })
return () => { return () => {
page_sub() page_sub()
nav_sub() nav_sub()
document.documentElement.style = "" document.body.style = ""
} }
}) })

2
svelte/src/user_home/dashboard/Dashboard.svelte
View File

@@ -185,7 +185,7 @@ onMount(() => {
max-width: 100%; max-width: 100%;
background: var(--body_background); background: var(--body_background);
border-radius: 8px; border-radius: 8px;
padding: 2px; border: 1px solid var(--separator);
text-align: initial; text-align: initial;
} }
.card_component { .card_component {

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

@@ -135,6 +135,7 @@ these padding divs to move it 25% up */
border-radius: 18px 18px 8px 8px; border-radius: 18px 18px 8px 8px;
overflow: hidden; overflow: hidden;
text-align: left; text-align: left;
border: 1px solid var(--separator);
} }
.header { .header {
flex-grow: 0; flex-grow: 0;

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

@@ -20,10 +20,10 @@ const toggle_menu = (e: MouseEvent) => {
menu_collapsed = !menu_collapsed menu_collapsed = !menu_collapsed
} }
onMount(async () => { onMount(() => {
menu_collapsed = document.documentElement.clientWidth < 1000 menu_collapsed = document.documentElement.clientWidth < 1000
await loading_run(async () => { loading_run(async () => {
const user = await get_user() const user = await get_user()
if (user.username === undefined || user.username === "") { if (user.username === undefined || user.username === "") {
return return

92
svelte/src/wrap/Tree.svelte
View File

@@ -15,56 +15,52 @@ onMount(() => {
}) })
</script> </script>
{#if $global_navigator.path.length > 1} <MenuEntry id="tree_parents" collapsed={menu_collapsed}>
<MenuEntry id="tree_parents" collapsed={menu_collapsed}> {#snippet title()}
{#snippet title()} <div class="title">Parent directories</div>
<div class="title">Parent directories</div> <button title="Navigate up" onclick={() => global_navigator.navigate_up()}>
<button title="Navigate up" onclick={() => global_navigator.navigate_up()}> <i class="icon">north</i>
<i class="icon">north</i>
</button>
{/snippet}
{#snippet body()}
{#each $global_navigator.path.slice(0, $global_navigator.path.length-1) as node (node.id)}
{#if node.type === "dir"}
<div class="row">
<a class="button" href="/d{fs_encode_path(node.path)}" title="{node.name}">
<img class="thumbnail" src="{fs_node_icon(node, 32, 32)}" alt="{node.name}"/>
<span class:hide={menu_collapsed}>{node.name}</span>
</a>
</div>
{/if}
{/each}
{/snippet}
</MenuEntry>
{/if}
{#if siblings.length !== 0}
<MenuEntry id="tree_siblings" collapsed={menu_collapsed}>
{#snippet title()}
<div class="title">Siblings</div>
<button title="Open previous sibling" onclick={() => global_navigator.open_sibling(-1)}>
<i class="icon">west</i>
</button> </button>
<button title="Open next sibling" onclick={() => global_navigator.open_sibling(1)}> {/snippet}
<i class="icon">east</i>
</button>
{/snippet}
{#snippet body()} {#snippet body()}
{#each siblings as node (node.id)} {#each $global_navigator.path.slice(0, $global_navigator.path.length-1) as node (node.id)}
{#if !node.is_hidden()} {#if node.type === "dir"}
<div class="row"> <div class="row">
<a class="button" href="/d{fs_encode_path(node.path)}" title="{node.name}" use:highlight_current_page> <a class="button" href="/d{fs_encode_path(node.path)}" title="{node.name}">
<img class="thumbnail" src="{fs_node_icon(node, 32, 32)}" alt="{node.name}"/> <img class="thumbnail" src="{fs_node_icon(node, 32, 32)}" alt="{node.name}"/>
<span class:hide={menu_collapsed}>{node.name}</span> <span class:hide={menu_collapsed}>{node.name}</span>
</a> </a>
</div> </div>
{/if} {/if}
{/each} {/each}
{/snippet} {/snippet}
</MenuEntry> </MenuEntry>
{/if}
<MenuEntry id="tree_siblings" collapsed={menu_collapsed}>
{#snippet title()}
<div class="title">Siblings</div>
<button title="Open previous sibling" onclick={() => global_navigator.open_sibling(-1)}>
<i class="icon">west</i>
</button>
<button title="Open next sibling" onclick={() => global_navigator.open_sibling(1)}>
<i class="icon">east</i>
</button>
{/snippet}
{#snippet body()}
{#each siblings as node (node.id)}
{#if !node.is_hidden()}
<div class="row">
<a class="button" href="/d{fs_encode_path(node.path)}" title="{node.name}" use:highlight_current_page>
<img class="thumbnail" src="{fs_node_icon(node, 32, 32)}" alt="{node.name}"/>
<span class:hide={menu_collapsed}>{node.name}</span>
</a>
</div>
{/if}
{/each}
{/snippet}
</MenuEntry>
<style> <style>
.title { .title {