From 867a9c4d7a87b1df970e31f2e333fe51feb938cd Mon Sep 17 00:00:00 2001
From: zuma <lucien@shenanigans.cc>
Date: Sat, 12 Apr 2025 19:39:37 +0200
Subject: [PATCH] Fix: Better mobile layout for Connexion and BSet list

---
 frontend/src/routes/bset/all/+page.svelte  | 17 ++++++++++++-----
 frontend/src/routes/connexion/+page.svelte |  7 ++++---
 2 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/frontend/src/routes/bset/all/+page.svelte b/frontend/src/routes/bset/all/+page.svelte
index 7be4ca4..918f22b 100644
--- a/frontend/src/routes/bset/all/+page.svelte
+++ b/frontend/src/routes/bset/all/+page.svelte
@@ -4,18 +4,25 @@
     import { onMount } from "svelte";
 
   let brawlsets = $state([])
+  let displayedBrawlsets = $state([])
+  let searchQuery = $state("")
+
+  function filterBrawlsets() {
+    displayedBrawlsets = brawlsets.filter((brawlset) => brawlset.Name.toLowerCase().includes(searchQuery.toLowerCase()))
+  }
+
   onMount(async () => {
     fetch("/json/misc/brawlsets")
         .then( response => response.json() )
-        .then( data => { brawlsets = data; console.log(data) } )
+        .then( data => { brawlsets = displayedBrawlsets = data; console.log(data) } )
   })
   
 </script>
 
-<div class="m-auto mt-16 max-w-4xl flex flex-col gap-4">
-  <Input type="text" placeholder="Rechercher des brawlsets" />
-  <div class="grid grid-cols-3 gap-2">
-    {#each brawlsets as brawlset}
+<div class="m-auto max-w-4xl flex flex-col gap-4 p-8">
+  <Input oninput={filterBrawlsets} bind:value={searchQuery} type="text" placeholder="Rechercher des brawlsets" />
+  <div class="grid grid-cols-1 md:grid-cols-3 gap-2">
+    {#each displayedBrawlsets as brawlset}
       <a class="flex flex-row gap-2 items-center" href={"/bset/" + brawlset.SanitizedName}>
         <div class="flex flex-row items-center">
           {#each brawlset.IconsSvgUri as icon}
diff --git a/frontend/src/routes/connexion/+page.svelte b/frontend/src/routes/connexion/+page.svelte
index f985605..251783c 100644
--- a/frontend/src/routes/connexion/+page.svelte
+++ b/frontend/src/routes/connexion/+page.svelte
@@ -2,6 +2,7 @@
   import PocketBase from 'pocketbase';
   import Input from '$lib/components/base/Input.svelte';
   import { setContext } from 'svelte';
+    import Button from '$lib/components/base/Button.svelte';
 
   const pb = new PocketBase('http://localhost:8090');
 
@@ -25,10 +26,10 @@
 
 </script>
 
-<div class="flex flex-col items-center mt-32 h-full">
-  <form class="flex flex-col gap-4 w-lg" on:submit|preventDefault={(e) => login(e)}>
+<div class="flex flex-col items-center mt-32 h-full p-8">
+  <form class="flex flex-col gap-4 max-w-lg w-full" on:submit|preventDefault={(e) => login(e)}>
     <Input name="email" placeholder="email" type="email" />
     <Input name="password" placeholder="password" type="password" />
-    <button class="border rounded p-2 bg-gray-800 text-white hover:bg-gray-700">Connexion</button>
+    <Button>Connexion</Button>
   </form>
 </div>