brian/wanderer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

adds mobile drawer

Browse Source
This commit is contained in:
Christian Beutel
2024-02-24 16:01:09 +01:00
parent 90a683f268
commit 275874fba9
13 changed files with 215 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
web/src/lib/components/base/drawer.svelte Normal file
View File

@@ -0,0 +1,41 @@
<script lang="ts">
import { browser } from "$app/environment";
import { beforeNavigate } from "$app/navigation";
import { backIn, backOut } from "svelte/easing";
import { slide } from "svelte/transition";
export let open: boolean = false;
$: if (open && browser) {
document.body.style.position = "fixed";
document.body.style.top = `-${window.scrollY}px`;
} else if (browser) {
const scrollY = document.body.style.top;
document.body.style.position = "";
document.body.style.top = "";
window.scrollTo(0, parseInt(scrollY || "0") * -1);
}
beforeNavigate(() => {
open = false;
});
</script>
{#if open}
<div
class="fixed drawer-overlay h-screen w-screen backdrop-blur-md z-50 bg-gray-500/50 cursor-pointer"
on:click={() => (open = false)}
on:keydown={(e) => {
if (e.key == "Escape") open = false;
}}
role="button"
tabindex="0"
></div>
<div
class="absolute flex flex-col overflow-y-auto w-72 h-screen bg-background right-0 top-0 z-50"
in:slide={{ axis: "x", easing: backOut }}
out:slide={{ axis: "x", easing: backIn }}
>
<slot />
</div>
{/if}

16
web/src/lib/components/base/modal.svelte
View File

@@ -2,10 +2,19 @@
export let id: string;
export let title: string;
export function openModal() {
document.body.style.position = "fixed";
document.body.style.width = "100%";
document.body.style.top = `-${window.scrollY}px`;
(document.getElementById(id) as HTMLDialogElement).showModal();
}
export function closeModal() {
const scrollY = document.body.style.top;
document.body.style.position = "";
document.body.style.top = "";
window.scrollTo(0, parseInt(scrollY || "0") * -1);
(document.getElementById(id) as HTMLDialogElement).close();
}
</script>
@@ -40,13 +49,14 @@
<slot name="content" />
</div>
<!-- Modal footer -->
<div
class="p-4 md:p-5 border-t border-separator rounded-b"
>
<div class="p-4 md:p-5 border-t border-separator rounded-b">
<slot name="footer" {closeModal} />
</div>
</div>
</dialog>
<style>
dialog::backdrop {
@apply bg-gray-500/50;
}
</style>

2
web/src/lib/components/category_card.svelte
View File

@@ -6,7 +6,7 @@
</script>
<div
class="category-card relative rounded-2xl shadow-md w-48 h-48 overflow-hidden cursor-pointer"
class="category-card relative rounded-2xl shadow-md max-h-48 aspect-video overflow-hidden cursor-pointer"
>
<img
class="w-full h-full"

64
web/src/lib/components/nav_bar.svelte
View File

@@ -7,6 +7,7 @@
import { tweened } from "svelte/motion";
import Dropdown from "./base/dropdown.svelte";
import LogoTextLight from "./logo/logo_text_light.svelte";
import Drawer from "./base/drawer.svelte";
const navBarItems = [
{ text: "Home", value: "/" },
@@ -35,6 +36,8 @@
easing: backInOut,
});
let drawerOpen: boolean = false;
afterNavigate((e) => {
const routeId = e.to?.route.id;
const navBarLinks = document.getElementById("nav-bar-links");
@@ -76,18 +79,63 @@
}
</script>
<Drawer bind:open={drawerOpen}>
<div class="flex gap-4 items-center m-4">
<div class="basis-full"></div>
<button
class="btn-icon fa-regular fa-{$theme === 'light' ? 'sun' : 'moon'}"
on:click={() => toggleTheme()}
></button>
<button
class="btn-icon block fa fa-close float-right"
on:click={() => (drawerOpen = false)}
></button>
</div>
<div class="flex flex-col px-12 gap-8">
{#each navBarItems as item}
<a
class="font-semibold text-xl"
href={item.value}
data-sveltekit-preload-data="off">{item.text}</a
>
{/each}
</div>
<hr class="my-6 border-input-border" />
<div class="flex flex-col basis-full gap-y-3">
<a class="btn-primary btn-large text-center mx-4" href="/trail/edit/new"
><i class="fa fa-plus mr-2"></i>New Trail</a
>
{#if $currentUser}
<div class="basis-full"></div>
<hr class="border-input-border" />
<div class="flex gap-4 items-center mx-4">
<img
class="rounded-full w-8 aspect-square"
src="https://api.dicebear.com/7.x/initials/svg?seed={$currentUser.username}&backgroundType=gradientLinear"
alt=""
/>
<div>
<p class="text-sm">{$currentUser.username}</p>
<p class="text-sm text-gray-500">{$currentUser.email}</p>
</div>
<button class="btn-icon tooltip" data-title="Logout"
><i class="fa-solid fa-arrow-right-from-bracket"
></i></button
>
</div>
{/if}
</div>
</Drawer>
<nav class="flex justify-between items-center p-6">
<a href="/" data-sveltekit-preload-data="tap">
<a href="/" data-sveltekit-preload-data="off">
{#if $theme == "light"}
<LogoText></LogoText>
{:else}
<LogoTextLight></LogoTextLight>
{/if}
</a>
<menu
id="nav-bar-links"
class="hidden md:flex gap-8 relative py-1 px-2 "
>
<menu id="nav-bar-links" class="hidden md:flex gap-8 relative py-1 px-2">
<div
class="absolute h-full w-16 bg-menu-item-background-hover rounded-xl top-0 z-0"
style="width: {$indicatorWidth}px; left: {$indicatorPosition}px; scale: {$indicatorScale}"
@@ -96,7 +144,7 @@
<a
class="font-semibold z-10"
href={item.value}
data-sveltekit-preload-data="tap">{item.text}</a
data-sveltekit-preload-data="off">{item.text}</a
>
{/each}
</menu>
@@ -133,4 +181,8 @@
<a class="btn-primary btn-large" href="/login">Login</a>
</div>
{/if}
<button
class="btn-icon fa fa-bars md:hidden"
on:click={() => (drawerOpen = !drawerOpen)}
></button>
</nav>

1
web/src/lib/components/trail/trail_filter_panel.svelte
View File

@@ -134,6 +134,7 @@
<input
id="{category.name}-checkbox"
type="checkbox"
checked={filter.category.includes(category.id)}
value={category.id}
class="w-4 h-4 bg-input-background accent-primary border-input-border focus:ring-input-ring focus:ring-2"
on:change={() => setCategoryFilter(category)}