RomanNum3ral
/
vert
mirror of https://github.com/VERT-sh/VERT.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

fix: FormatDropdown on mobile

This commit is contained in:
JovannMC 2025-05-28 15:59:32 +03:00
parent 12f2216baf
commit 31a3fa08b9
No known key found for this signature in database
2 changed files with 7 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/lib/components/functional/FormatDropdown.svelte
View File

@ -1,6 +1,6 @@
<script lang="ts"> <script lang="ts">
import { duration, fade, transition } from "$lib/animation"; import { duration, fade, transition } from "$lib/animation";
import { files } from "$lib/store/index.svelte"; import { isMobile, files } from "$lib/store/index.svelte";
import type { Categories } from "$lib/types"; import type { Categories } from "$lib/types";
import { ChevronDown, SearchIcon } from "lucide-svelte"; import { ChevronDown, SearchIcon } from "lucide-svelte";
import { onMount } from "svelte"; import { onMount } from "svelte";
@ -24,6 +24,7 @@
let dropdown = $state<HTMLDivElement>(); let dropdown = $state<HTMLDivElement>();
let currentCategory = $state<string | null>(); let currentCategory = $state<string | null>();
let searchQuery = $state(""); let searchQuery = $state("");
let dropdownMenu: HTMLElement | undefined = $state();
// initialize current category // initialize current category
$effect(() => { $effect(() => {
@ -180,16 +181,17 @@
: 0}deg); transition: transform {duration}ms {transition};" : 0}deg); transition: transform {duration}ms {transition};"
/> />
</button> </button>
{#if open} {#if open}
<!-- TODO: fix positioning for mobile -->
<div <div
bind:this={dropdownMenu}
style={hover ? "will-change: opacity, fade, transform" : ""} style={hover ? "will-change: opacity, fade, transform" : ""}
transition:fade={{ transition:fade={{
duration, duration,
easing: quintOut, easing: quintOut,
}} }}
class="w-[250%] min-w-full shadow-xl bg-panel-alt shadow-black/25 absolute left-1/2 -translate-x-1/2 top-full mt-1 z-50 rounded-2xl overflow-hidden" class={$isMobile
? "fixed inset-x-0 bottom-0 w-full z-[200] shadow-xl bg-panel-alt shadow-black/25 rounded-t-2xl overflow-hidden"
: "w-[250%] min-w-full shadow-xl bg-panel-alt shadow-black/25 absolute -translate-x-1/2 top-full mt-2 z-50 rounded-2xl overflow-hidden"}
> >
<!-- search box --> <!-- search box -->
<div class="p-3 w-full"> <div class="p-3 w-full">

2
src/lib/components/layout/Navbar/Mobile.svelte
View File

@ -2,7 +2,7 @@
import Navbar from "./Base.svelte"; import Navbar from "./Base.svelte";
</script> </script>
<div class="fixed md:hidden bottom-0 left-0 w-screen p-8 justify-center z-50"> <div class="fixed md:hidden bottom-0 left-0 w-screen p-8 justify-center z-100">
<div class="flex flex-col justify-center items-center"> <div class="flex flex-col justify-center items-center">
<Navbar /> <Navbar />
</div> </div>