feat: enhance Footer and GameBoard components with accessibility improvements
This commit is contained in:
pd0a6847
parent
89f62e18a8
commit
ad7554a15e
@ -1,7 +1,7 @@
|
||||
<script lang="ts">
|
||||
import { UserRound } from '@lucide/svelte';
|
||||
</script>
|
||||
<footer class="sticky bottom-0 isolate z-50 border-border bg-background text-foreground " role="contentinfo" aria-label="Site footer">
|
||||
<footer class="sticky bottom-0 isolate z-50 border-border bg-background text-foreground ">
|
||||
<div class="mx-auto max-w-3xl px-5 lg:max-w-6xl lg:px-6">
|
||||
<div class="relative flex flex-col justify-between border-x border-t border-border ">
|
||||
<div class="flex w-full items-stretch">
|
||||
|
||||
@ -25,85 +25,87 @@
|
||||
);
|
||||
</script>
|
||||
|
||||
<footer class="min-h-[100dvh] flex flex-col border-border bg-background text-foreground">
|
||||
<div class="mx-auto max-w-3xl px-5 lg:max-w-6xl lg:px-6 w-full">
|
||||
<div class="relative flex-1 flex flex-col justify-between border-x border-border p-4">
|
||||
<div class="mb-3 flex justify-start">
|
||||
<ToggleGroup.Root
|
||||
variant="outline"
|
||||
type="multiple"
|
||||
class="pr-5"
|
||||
bind:value={selectedCategories}
|
||||
>
|
||||
<ToggleGroup.Item value="BS" aria-label="Toggle BS"
|
||||
><span class="text-xs">BS</span></ToggleGroup.Item
|
||||
<footer class="flex flex-col border-border bg-background text-foreground">
|
||||
<div class="mx-auto w-full max-w-3xl px-5 lg:max-w-6xl lg:px-6">
|
||||
<div class="border-x border-border min-h-[100dvh] ">
|
||||
<div class="relative flex flex-1 flex-col justify-between p-4">
|
||||
<div class="mb-3 flex justify-start">
|
||||
<ToggleGroup.Root
|
||||
variant="outline"
|
||||
type="multiple"
|
||||
class="pr-5"
|
||||
bind:value={selectedCategories}
|
||||
>
|
||||
<ToggleGroup.Item value="EO" aria-label="Toggle EO"
|
||||
><span class="text-xs">EO</span></ToggleGroup.Item
|
||||
>
|
||||
<ToggleGroup.Item value="PAIR" aria-label="Toggle PAIR"
|
||||
><span class="text-xs">PR</span></ToggleGroup.Item
|
||||
>
|
||||
<ToggleGroup.Item value="TRIPLE" aria-label="Toggle TRIPLE"
|
||||
><span class="text-xs">TRP</span></ToggleGroup.Item
|
||||
>
|
||||
<ToggleGroup.Item value="TOTAL" aria-label="Toggle TOTAL"
|
||||
><span class="text-xs">TOT</span></ToggleGroup.Item
|
||||
>
|
||||
<ToggleGroup.Item value="DOMINO" aria-label="Toggle DOMINO"
|
||||
><span class="text-xs">DOM</span></ToggleGroup.Item
|
||||
>
|
||||
<ToggleGroup.Item value="SINGLE" aria-label="Toggle SINGLE"
|
||||
><span class="text-xs">SGL</span></ToggleGroup.Item
|
||||
>
|
||||
</ToggleGroup.Root>
|
||||
<ToggleGroup.Root variant="outline" type="multiple" bind:value={selectedPayouts}>
|
||||
<ToggleGroup.Item value="PO1" aria-label="Toggle PO1"
|
||||
><span class="text-xs">1</span></ToggleGroup.Item
|
||||
>
|
||||
<ToggleGroup.Item value="PO5" aria-label="Toggle PO5"
|
||||
><span class="text-xs">5</span></ToggleGroup.Item
|
||||
>
|
||||
<ToggleGroup.Item value="PO6" aria-label="Toggle PO6"
|
||||
><span class="text-xs">6</span></ToggleGroup.Item
|
||||
>
|
||||
<ToggleGroup.Item value="PO8" aria-label="Toggle PO8"
|
||||
><span class="text-xs">8</span></ToggleGroup.Item
|
||||
>
|
||||
<ToggleGroup.Item value="PO12" aria-label="Toggle PO12"
|
||||
><span class="text-xs">12</span></ToggleGroup.Item
|
||||
>
|
||||
<ToggleGroup.Item value="PO18" aria-label="Toggle PO18"
|
||||
><span class="text-xs">18</span></ToggleGroup.Item
|
||||
>
|
||||
<ToggleGroup.Item value="PO24" aria-label="Toggle PO24"
|
||||
><span class="text-xs">24</span></ToggleGroup.Item
|
||||
>
|
||||
<ToggleGroup.Item value="PO30" aria-label="Toggle PO30"
|
||||
><span class="text-xs">30</span></ToggleGroup.Item
|
||||
>
|
||||
<ToggleGroup.Item value="PO50" aria-label="Toggle PO50"
|
||||
><span class="text-xs">50</span></ToggleGroup.Item
|
||||
>
|
||||
<ToggleGroup.Item value="PO150" aria-label="Toggle PO150"
|
||||
><span class="text-xs">150</span></ToggleGroup.Item
|
||||
>
|
||||
</ToggleGroup.Root>
|
||||
</div>
|
||||
<div class="grid grid-cols-7 gap-4">
|
||||
{#each filteredGame as betSection (betSection.id)}
|
||||
<div
|
||||
animate:flip={{ duration: 400 }}
|
||||
in:fly={{ y: 20, duration: 300, delay: 100 }}
|
||||
out:fade={{ duration: 200 }}
|
||||
class="hover:border-black flex h-[85px] w-full flex-col items-center justify-center gap-0.5 rounded-lg border p-1 text-[12px] leading-tight transition-colors"
|
||||
>
|
||||
<span class="font-semibold">{betSection.category}</span>
|
||||
<span>{betSection.id}</span>
|
||||
<span>Max ₩ {betSection.maxBet}</span>
|
||||
<span>{betSection.payout}:1</span>
|
||||
</div>
|
||||
{/each}
|
||||
<ToggleGroup.Item value="BS" aria-label="Toggle BS"
|
||||
><span class="text-xs">BS</span></ToggleGroup.Item
|
||||
>
|
||||
<ToggleGroup.Item value="EO" aria-label="Toggle EO"
|
||||
><span class="text-xs">EO</span></ToggleGroup.Item
|
||||
>
|
||||
<ToggleGroup.Item value="PAIR" aria-label="Toggle PAIR"
|
||||
><span class="text-xs">PR</span></ToggleGroup.Item
|
||||
>
|
||||
<ToggleGroup.Item value="TRIPLE" aria-label="Toggle TRIPLE"
|
||||
><span class="text-xs">TRP</span></ToggleGroup.Item
|
||||
>
|
||||
<ToggleGroup.Item value="TOTAL" aria-label="Toggle TOTAL"
|
||||
><span class="text-xs">TOT</span></ToggleGroup.Item
|
||||
>
|
||||
<ToggleGroup.Item value="DOMINO" aria-label="Toggle DOMINO"
|
||||
><span class="text-xs">DOM</span></ToggleGroup.Item
|
||||
>
|
||||
<ToggleGroup.Item value="SINGLE" aria-label="Toggle SINGLE"
|
||||
><span class="text-xs">SGL</span></ToggleGroup.Item
|
||||
>
|
||||
</ToggleGroup.Root>
|
||||
<ToggleGroup.Root variant="outline" type="multiple" bind:value={selectedPayouts}>
|
||||
<ToggleGroup.Item value="PO1" aria-label="Toggle PO1"
|
||||
><span class="text-xs">1</span></ToggleGroup.Item
|
||||
>
|
||||
<ToggleGroup.Item value="PO5" aria-label="Toggle PO5"
|
||||
><span class="text-xs">5</span></ToggleGroup.Item
|
||||
>
|
||||
<ToggleGroup.Item value="PO6" aria-label="Toggle PO6"
|
||||
><span class="text-xs">6</span></ToggleGroup.Item
|
||||
>
|
||||
<ToggleGroup.Item value="PO8" aria-label="Toggle PO8"
|
||||
><span class="text-xs">8</span></ToggleGroup.Item
|
||||
>
|
||||
<ToggleGroup.Item value="PO12" aria-label="Toggle PO12"
|
||||
><span class="text-xs">12</span></ToggleGroup.Item
|
||||
>
|
||||
<ToggleGroup.Item value="PO18" aria-label="Toggle PO18"
|
||||
><span class="text-xs">18</span></ToggleGroup.Item
|
||||
>
|
||||
<ToggleGroup.Item value="PO24" aria-label="Toggle PO24"
|
||||
><span class="text-xs">24</span></ToggleGroup.Item
|
||||
>
|
||||
<ToggleGroup.Item value="PO30" aria-label="Toggle PO30"
|
||||
><span class="text-xs">30</span></ToggleGroup.Item
|
||||
>
|
||||
<ToggleGroup.Item value="PO50" aria-label="Toggle PO50"
|
||||
><span class="text-xs">50</span></ToggleGroup.Item
|
||||
>
|
||||
<ToggleGroup.Item value="PO150" aria-label="Toggle PO150"
|
||||
><span class="text-xs">150</span></ToggleGroup.Item
|
||||
>
|
||||
</ToggleGroup.Root>
|
||||
</div>
|
||||
<div class="grid grid-cols-7 gap-4">
|
||||
{#each filteredGame as betSection (betSection.id)}
|
||||
<div
|
||||
animate:flip={{ duration: 400 }}
|
||||
in:fly={{ y: 20, duration: 300, delay: 100 }}
|
||||
out:fade={{ duration: 200 }}
|
||||
class="flex h-[85px] w-full flex-col items-center justify-center gap-0.5 rounded-lg border p-1 text-[12px] leading-tight transition-colors hover:border-black"
|
||||
>
|
||||
<span class="font-semibold">{betSection.category}</span>
|
||||
<span>{betSection.id}</span>
|
||||
<span>Max ₩ {betSection.maxBet}</span>
|
||||
<span>{betSection.payout}:1</span>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user