globuzma/brawlset
1
0
Fork 0
Code Issues Pull requests Projects 2 Releases Packages 1 Wiki Activity

Fix: Better mobile menu + rules padding

Browse source
This commit is contained in:
zuma 2025-04-14 14:06:59 +02:00
parent 57436d6782
commit dd32378294
4 changed files with 12 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

6
frontend/src/lib/components/Accordion.svelte
View file

@ -6,13 +6,13 @@
<details class="group">
<summary class="flex items-center justify-center marker:content-none hover:cursor-pointer">
<summary class="flex items-center justify-center text-center marker:content-none hover:cursor-pointer">
<div class="flex flex-row items-center justify-between">
<span>{title}</span>
<ChevronRight class="size-4 transition group-open:rotate-90"/>
<ChevronRight class="size-4"/>
</div>
</summary>
<article class="mt-2 mb-2">
<article class="border-l-1 border-orange-500 pl-4 mt-2 mb-2">
{@render children()}
</article>
</details>

7
frontend/src/lib/components/Navbar.svelte
View file

@ -144,8 +144,11 @@
<label class="relative z-40 cursor-pointer block md:hidden" for="mobile-menu">
<input class="peer hidden" bind:checked={openMobileMenu} type="checkbox" id="mobile-menu" />
<MenuIcon />
<div class="fixed inset-0 z-40 hidden h-full w-full peer-checked:block">
&nbsp;
</div>
<div onclick={(e) => {if(e.target.nodeName == "A") {openMobileMenu = false}}} class="fixed top-16 left-0 z-40 h-fit w-screen hidden peer-checked:block bg-white p-4 shadow-md">
<ul class="w-full flex flex-col items-center">
<ul class="w-full flex flex-col items-center gap-4">
<li>
<Accordion title="Commandants">
<ul class="w-full">
@ -230,7 +233,7 @@
</li>
<li><a href="/regles">Règles</a></li>
<li><a href="/faq">F.A.Q</a></li>
<li><div class="mt-4 mb-4 max-w-screen w-64 block h-[1px] bg-stone-500 content-[' ']"></div></li>
<li><div class="max-w-screen w-64 block h-[1px] bg-stone-500 content-[' ']"></div></li>
{#if isLoggedIn}
<li><a href="/profil">{username}</a></li>
{:else}

2
frontend/src/routes/+layout.svelte
View file

@ -7,7 +7,7 @@
</script>
<div class="w-screen min-h-screen flex flex-col gap-0">
<span class="fixed z-40 bg-orange-500 text-white p-2 -translate-x-1/3 -rotate-45 origin-top-right after:content-[' '] after:w-full after:h-full after:bg-orange-500 after:fixed after:top-0 after:left-full after:ml-[-1px] before:content-[' '] before:w-full before:h-full before:bg-orange-500 before:fixed before:top-0 before:right-full before:mr-[-1px]">Version test</span>
<span class="text-xs fixed z-40 bg-orange-500 text-white p-2 -translate-x-1/3 -rotate-45 origin-top-right after:content-[' '] after:w-full after:h-full after:bg-orange-500 after:fixed after:top-0 after:left-full after:ml-[-1px] before:content-[' '] before:w-full before:h-full before:bg-orange-500 before:fixed before:top-0 before:right-full before:mr-[-1px]">Version test</span>
<Navbar />
<div class="mt-16 font-inter-tight grow">
{@render children()}

6
frontend/src/routes/regles/+page.svelte
View file

@ -1,10 +1,10 @@
<div class="flex flex-col items-center">
<div class="flex flex-col items-center w-full">
<div class="flex flex-col items-center p-4">
<div class="flex flex-col items-center w-full text-center">
<h1 class="text-3xl">BrawlSet Canon Règles Officielles</h1>
<h2>BrawlSet Committee</h2>
<h2>17 Octobre 2022</h2>
</div>
<div class="flex flex-col max-w-5xl gap-4 mt-8 mb-32">
<div class="flex flex-col max-w-5xl gap-4 mt-8">
<h2 class="font-bold">903.BS. Le mode de jeu BrawlSet</h2>
<ul class="flex flex-col gap-4">
<li><strong>903.BS.1</strong> Le BrawlSet est une variante du Commander. Cette variante utilise les règles classiques du Commander avec les modifications suivantes.</li>