From dd3237829463c8dd08351986a9ae3341d4474cf7 Mon Sep 17 00:00:00 2001
From: zuma <lucien@shenanigans.cc>
Date: Mon, 14 Apr 2025 14:06:59 +0200
Subject: [PATCH] Fix: Better mobile menu + rules padding

---
 frontend/src/lib/components/Accordion.svelte | 6 +++---
 frontend/src/lib/components/Navbar.svelte    | 7 +++++--
 frontend/src/routes/+layout.svelte           | 2 +-
 frontend/src/routes/regles/+page.svelte      | 6 +++---
 4 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/frontend/src/lib/components/Accordion.svelte b/frontend/src/lib/components/Accordion.svelte
index a001bf0..821755e 100644
--- a/frontend/src/lib/components/Accordion.svelte
+++ b/frontend/src/lib/components/Accordion.svelte
@@ -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>
diff --git a/frontend/src/lib/components/Navbar.svelte b/frontend/src/lib/components/Navbar.svelte
index fe91d41..6035c7e 100644
--- a/frontend/src/lib/components/Navbar.svelte
+++ b/frontend/src/lib/components/Navbar.svelte
@@ -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}
diff --git a/frontend/src/routes/+layout.svelte b/frontend/src/routes/+layout.svelte
index ba346bc..55376ed 100644
--- a/frontend/src/routes/+layout.svelte
+++ b/frontend/src/routes/+layout.svelte
@@ -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()}
diff --git a/frontend/src/routes/regles/+page.svelte b/frontend/src/routes/regles/+page.svelte
index 4dbbff2..e26ae26 100644
--- a/frontend/src/routes/regles/+page.svelte
+++ b/frontend/src/routes/regles/+page.svelte
@@ -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>