dan/Portfolio
1
0
Fork 0
mirror of https://github.com/danbulant/Portfolio synced 2026-06-13 19:43:23 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: formatting & error for mobile code input

Browse source
This commit is contained in:
EETagent 2023-01-12 21:13:04 +01:00
parent 0a39410a64
commit a2d3b34ea2
1 changed files with 12 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
frontend/src/routes/(candidate)/auth/login/[code=application]/+page.svelte
View file

@ -6,7 +6,7 @@
import { page } from '$app/stores';
import { goto } from '$app/navigation';
import { apiLogin } from '$lib/@api/candidate';
import { SvelteToast, toast } from '@zerodevx/svelte-toast'
import { SvelteToast, toast } from '@zerodevx/svelte-toast';
let applicationId = Number($page.params.code);
let codeValueMobile: string = '';
@ -36,7 +36,7 @@
}
}
codeValueMobile = codeValueArray.join('');
if (codeValueArray.filter((item) => item !== '').length === 12) {
await submit();
} else {
@ -44,7 +44,6 @@
}
};
const submit = async () => {
console.log('submitting: ', codeValueArray);
try {
@ -57,8 +56,8 @@
'--toastColor': 'mintcream',
'--toastBackground': '#b91c1c',
'--toastBarBackground': '#7f1d1d'
}
})
}
});
isError = true;
}
};
@ -94,9 +93,14 @@
<FullLayout>
<div class="modal">
<img class="mx-auto" src={woman} alt="" />
<SvelteToast></SvelteToast>
<SvelteToast />
<div class="flex items-center justify-center">
<input bind:value={codeValueMobile} type="text" class="codeInputMobile" />
<input
class:error={isError}
bind:value={codeValueMobile}
type="text"
class="codeInputMobile"
/>
{#each [1, 2, 3, 4] as value}
<input
class="codeInputDesktop"
@ -166,6 +170,6 @@
.codeInputDesktop {
@apply hidden;
@apply mr-1 md:mr-2;
@apply sm:h-15 2xl:w-18 2xl:h-22 sm:w-12 sm:text-xl xl:text-2xl md:block md:h-20 md:w-16 md:text-4xl xl:h-20 xl:w-16 xl:p-0;
@apply sm:h-15 2xl:w-18 2xl:h-22 sm:w-12 sm:text-xl md:block md:h-20 md:w-16 md:text-4xl xl:h-20 xl:w-16 xl:p-0 xl:text-2xl;
}
</style>