dan/Portfolio
1
0
Fork 0
mirror of https://github.com/danbulant/Portfolio synced 2026-06-24 17:11:49 +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

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

@ -6,7 +6,7 @@
import { page } from '$app/stores'; import { page } from '$app/stores';
import { goto } from '$app/navigation'; import { goto } from '$app/navigation';
import { apiLogin } from '$lib/@api/candidate'; 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 applicationId = Number($page.params.code);
let codeValueMobile: string = ''; let codeValueMobile: string = '';
@ -44,7 +44,6 @@
} }
}; };
const submit = async () => { const submit = async () => {
console.log('submitting: ', codeValueArray); console.log('submitting: ', codeValueArray);
try { try {
@ -58,7 +57,7 @@
'--toastBackground': '#b91c1c', '--toastBackground': '#b91c1c',
'--toastBarBackground': '#7f1d1d' '--toastBarBackground': '#7f1d1d'
} }
}) });
isError = true; isError = true;
} }
}; };
@ -94,9 +93,14 @@
<FullLayout> <FullLayout>
<div class="modal"> <div class="modal">
<img class="mx-auto" src={woman} alt="" /> <img class="mx-auto" src={woman} alt="" />
<SvelteToast></SvelteToast> <SvelteToast />
<div class="flex items-center justify-center"> <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} {#each [1, 2, 3, 4] as value}
<input <input
class="codeInputDesktop" class="codeInputDesktop"
@ -166,6 +170,6 @@
.codeInputDesktop { .codeInputDesktop {
@apply hidden; @apply hidden;
@apply mr-1 md:mr-2; @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> </style>