CraftAttack/website
4
0
Fork 0
Code Issues 3 Pull Requests Actions Wiki Activity

update admin layout
All checks were successful
delpoy / build-and-deploy (push) Successful in 49s
Details

Browse Source
This commit is contained in:
bytedream 2024-12-03 03:12:17 +01:00
parent 332089228e
commit 672379c27b
2 changed files with 44 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/lib/components/PaginationTable/PaginationTableBody.svelte
View File

@ -24,6 +24,8 @@
await onUpdate();
await tick();
if (!bodyElem) return;
const intersectionObserver = new IntersectionObserver(
async (entries, observer) => {
if (entries.filter((e) => e.isIntersecting).length === 0 || !entries) return;

56
src/routes/admin/+layout.svelte
View File

@ -1,9 +1,10 @@
<script lang="ts">
import { page } from '$app/stores';
import { fly } from 'svelte/transition';
import { env } from '$env/dynamic/public';
import {
ArrowLeftOnRectangle,
Cog6Tooth,
AdjustmentsHorizontal,
Flag,
UserGroup,
Users,
@ -16,6 +17,8 @@
let { children, data } = $props();
let transitionPrefix = $state(0);
async function logout() {
const response = await fetch(`${env.PUBLIC_BASE_PATH}/admin/logout`, {
method: 'POST'
@ -62,18 +65,17 @@
},
{
path: `${env.PUBLIC_BASE_PATH}/admin/settings`,
icon: Cog6Tooth,
icon: AdjustmentsHorizontal,
name: 'Website Einstellungen',
badge: null,
enabled: data.settingsRead
}
];
let pageTitleSuffix =
(tabs.find((t) => $page.url.pathname === t.path)?.name ??
$page.url.pathname === `${env.PUBLIC_BASE_PATH}/admin/login`)
? 'Login '
: null;
let pageTitleSuffix = $derived(
tabs.find((t) => $page.url.pathname === t.path)?.name ??
($page.url.pathname === `${env.PUBLIC_BASE_PATH}/admin/login` ? 'Login' : null)
);
</script>
<svelte:head>
@ -81,23 +83,34 @@
</svelte:head>
{#if $page.url.pathname !== `${env.PUBLIC_BASE_PATH}/admin/login`}
<div class="h-12 relative bg-base-200 flex justify-center items-center">
<ul class="menu menu-horizontal h-10 p-0 flex items-center bg-base-300 rounded-lg">
{#each tabs as tab}
<div class="relative bg-base-200 w-full flex justify-center">
<div role="tablist" class="tabs tabs-lifted">
{#each tabs as tab, i}
{#if tab.enabled}
{@const Icon = tab.icon}
<li>
<a href={tab.path}>
<a
role="tab"
class="tab h-full"
class:tab-active={$page.url.pathname === tab.path}
href={tab.path}
onclick={() => {
let currIdx = tabs.findIndex((t) => $page.url.pathname === t.path);
if (currIdx !== -1) {
transitionPrefix = currIdx < i ? 1 : -1;
}
}}
>
<span class="my-2 flex items-center space-x-1">
<Icon />
<span class="mr-1" class:underline={$page.url.pathname === tab.path}>{tab.name}</span>
<span>{tab.name}</span>
{#if tab.badge != null}
<div class="badge">{tab.badge}</div>
{/if}
</span>
</a>
</li>
{/if}
{/each}
</ul>
</div>
<div class="absolute top-0 right-0 flex items-center h-full">
<ul class="menu menu-vertical">
<li>
@ -109,9 +122,20 @@
</ul>
</div>
</div>
<div class="h-full w-full -mt-12 pt-12 overflow-y-scroll overflow-x-hidden">
<div class="grid">
{#key $page.url.pathname}
<div
class="col-[1] row-[1] h-full w-full overflow-y-scroll overflow-x-hidden"
in:fly={{ x: transitionPrefix * window.innerWidth, duration: !transitionPrefix ? 0 : 150 }}
out:fly={{
x: transitionPrefix * -window.innerWidth,
duration: !transitionPrefix ? 0 : 150
}}
>
{@render children()}
</div>
{/key}
</div>
{:else}
<div class="h-full w-full">
{@render children()}