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

Fix: Better mobile layout for Connexion and BSet list

Browse source
This commit is contained in:
zuma 2025-04-12 19:39:37 +02:00
parent 93f437b086
commit 867a9c4d7a
2 changed files with 16 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

17
frontend/src/routes/bset/all/+page.svelte
View file

@ -4,18 +4,25 @@
import { onMount } from "svelte"; import { onMount } from "svelte";
let brawlsets = $state([]) let brawlsets = $state([])
let displayedBrawlsets = $state([])
let searchQuery = $state("")
function filterBrawlsets() {
displayedBrawlsets = brawlsets.filter((brawlset) => brawlset.Name.toLowerCase().includes(searchQuery.toLowerCase()))
}
onMount(async () => { onMount(async () => {
fetch("/json/misc/brawlsets") fetch("/json/misc/brawlsets")
.then( response => response.json() ) .then( response => response.json() )
.then( data => { brawlsets = data; console.log(data) } ) .then( data => { brawlsets = displayedBrawlsets = data; console.log(data) } )
}) })
</script> </script>
<div class="m-auto mt-16 max-w-4xl flex flex-col gap-4"> <div class="m-auto max-w-4xl flex flex-col gap-4 p-8">
<Input type="text" placeholder="Rechercher des brawlsets" /> <Input oninput={filterBrawlsets} bind:value={searchQuery} type="text" placeholder="Rechercher des brawlsets" />
<div class="grid grid-cols-3 gap-2"> <div class="grid grid-cols-1 md:grid-cols-3 gap-2">
{#each brawlsets as brawlset} {#each displayedBrawlsets as brawlset}
<a class="flex flex-row gap-2 items-center" href={"/bset/" + brawlset.SanitizedName}> <a class="flex flex-row gap-2 items-center" href={"/bset/" + brawlset.SanitizedName}>
<div class="flex flex-row items-center"> <div class="flex flex-row items-center">
{#each brawlset.IconsSvgUri as icon} {#each brawlset.IconsSvgUri as icon}

7
frontend/src/routes/connexion/+page.svelte
View file

@ -2,6 +2,7 @@
import PocketBase from 'pocketbase'; import PocketBase from 'pocketbase';
import Input from '$lib/components/base/Input.svelte'; import Input from '$lib/components/base/Input.svelte';
import { setContext } from 'svelte'; import { setContext } from 'svelte';
import Button from '$lib/components/base/Button.svelte';
const pb = new PocketBase('http://localhost:8090'); const pb = new PocketBase('http://localhost:8090');
@ -25,10 +26,10 @@
</script> </script>
<div class="flex flex-col items-center mt-32 h-full"> <div class="flex flex-col items-center mt-32 h-full p-8">
<form class="flex flex-col gap-4 w-lg" on:submit|preventDefault={(e) => login(e)}> <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="email" placeholder="email" type="email" />
<Input name="password" placeholder="password" type="password" /> <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> </form>
</div> </div>