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: "", postalcode: "",
country: "Germany", country: "Germany",
}; };
let amount = 0; let amount = null;
let address_checked = false; let address_checked = false;
let donor_create_new = false; let donor_create_new = false;
let last_created = null; let last_created = null;
@ -111,6 +111,7 @@
noOptionsMessage={$_("no-runners-found")} noOptionsMessage={$_("no-runners-found")}
on:select={(selectedValue) => { on:select={(selectedValue) => {
runnerinfo = selectedValue.detail.value; runnerinfo = selectedValue.detail.value;
document.querySelector("#donation_amount_eur").focus();
}} }}
on:clear={() => (runnerinfo = { id: 0, firstname: "", lastname: "" })} on:clear={() => (runnerinfo = { id: 0, firstname: "", lastname: "" })}
/> />
@ -126,11 +127,19 @@
class:focus:border-red-500={!amount > 0} class:focus:border-red-500={!amount > 0}
class:focus:ring-red-500={!amount > 0} class:focus:ring-red-500={!amount > 0}
bind:value={amount} bind:value={amount}
on:keydown={(e)=>
{
if(e.key==="Enter"){
e.preventDefault();
document.querySelector("#button_existing_donor").focus();
}
}}
type="number" type="number"
step="0.01" step="0.01"
id="donation_amount_eur"
name="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" 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 <span
class="inline-flex items-center px-3 rounded-r-md border border-neutral-300 bg-neutral-50 text-neutral-500 text-sm" 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="mb-2">
<div class="flex border rounded-md overflow-hidden shadow-sm"> <div class="flex border rounded-md overflow-hidden shadow-sm">
<button <button
class:bg-indigo-600={!donor_create_new} on:keydown={(e)=>
class:text-white={!donor_create_new} {
class="py-2 px-4 w-1/2 transition-colors" if(e.key==="ArrowRight"){
on:click={() => { e.preventDefault();
donor_create_new = false; document.querySelector("#button_new_donor").focus();
donorinfo = { id: 0, firstname: "", lastname: "" }; 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")} {$_("existing-donor")}
</button> </button>
<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"}`} 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={() => { on:click={() => {
donor_create_new = true; donor_create_new = true;
@ -311,6 +338,7 @@
<!-- Submit Button --> <!-- Submit Button -->
<div class="mt-6"> <div class="mt-6">
<button <button
id="submit_button"
type="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" 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 || disabled={!amount > 0 ||