lfk/frontend
2
0
Fork 0
Code Issues 3 Pull Requests Actions Projects Releases Wiki Activity

feat(donationcreate): improved focus handling

Browse Source
This commit is contained in:
Philipp Dormann 2025-05-20 00:14:50 +02:00
parent b0063cdead
commit a827279163
Signed by: philipp
GPG Key ID: 3BB9ADD52DCA4314
1 changed files with 40 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
src/components/tools/DonationCreate.svelte
View File

@ -20,7 +20,7 @@
postalcode: "",
country: "Germany",
};
let amount = 0;
let amount = null;
let address_checked = false;
let donor_create_new = false;
let last_created = null;
@ -111,6 +111,7 @@
noOptionsMessage={$_("no-runners-found")}
on:select={(selectedValue) => {
runnerinfo = selectedValue.detail.value;
document.querySelector("#donation_amount_eur").focus();
}}
on:clear={() => (runnerinfo = { id: 0, firstname: "", lastname: "" })}
/>
@ -126,11 +127,19 @@
class:focus:border-red-500={!amount > 0}
class:focus:ring-red-500={!amount > 0}
bind:value={amount}
on:keydown={(e)=>
{
if(e.key==="Enter"){
e.preventDefault();
document.querySelector("#button_existing_donor").focus();
}
}}
type="number"
step="0.01"
id="donation_amount_eur"
name="donation_amount_eur"
class="focus:ring-indigo-500 focus:border-indigo-500 flex-1 block w-full rounded-none rounded-l-md sm:text-sm border-neutral-300 border bg-neutral-50 text-neutral-800 p-2"
placeholder="2.00"
placeholder="z.B. 1,50"
/>
<span
class="inline-flex items-center px-3 rounded-r-md border border-neutral-300 bg-neutral-50 text-neutral-500 text-sm"
@ -147,17 +156,35 @@
<div class="mb-2">
<div class="flex border rounded-md overflow-hidden shadow-sm">
<button
class:bg-indigo-600={!donor_create_new}
class:text-white={!donor_create_new}
class="py-2 px-4 w-1/2 transition-colors"
on:click={() => {
donor_create_new = false;
donorinfo = { id: 0, firstname: "", lastname: "" };
}}
on:keydown={(e)=>
{
if(e.key==="ArrowRight"){
e.preventDefault();
document.querySelector("#button_new_donor").focus();
document.querySelector("#button_new_donor").click();
}
}}
id="button_existing_donor"
class:bg-indigo-600={!donor_create_new}
class:text-white={!donor_create_new}
class="py-2 px-4 w-1/2 transition-colors"
on:click={() => {
donor_create_new = false;
donorinfo = { id: 0, firstname: "", lastname: "" };
}}
>
{$_("existing-donor")}
</button>
<button
{$_("existing-donor")}
</button>
<button
on:keydown={(e)=>
{
if(e.key==="ArrowLeft"){
e.preventDefault();
document.querySelector("#button_existing_donor").focus();
document.querySelector("#button_existing_donor").click();
}
}}
id="button_new_donor"
class={`py-2 px-4 w-1/2 transition-colors ${donor_create_new ? "bg-indigo-600 text-white" : "bg-gray-100 text-gray-700"}`}
on:click={() => {
donor_create_new = true;
@ -311,6 +338,7 @@
<!-- Submit Button -->
<div class="mt-6">
<button
id="submit_button"
type="button"
class="w-full inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 disabled:bg-gray-400 disabled:cursor-not-allowed"
disabled={!amount > 0 ||