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

feat: stable dot navigation & continue button

Browse source
This commit is contained in:
Sebastian Pravda 2022-12-25 19:56:08 +01:00
parent 83d4b08437
commit 326aef5483
No known key found for this signature in database
GPG key ID: F3BC84F08EFA3F57
1 changed files with 54 additions and 51 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

105
frontend/src/routes/(candidate)/(authenticated)/register/+page.svelte
View file

@ -330,10 +330,11 @@
</script> </script>
<SplitLayout> <SplitLayout>
<div class="form"> <div class="form relative">
<div class="h-24 w-24 md:h-auto md:w-auto"> <div class="absolute bottom-3/12 flex flex-col w-full">
<SchoolBadge /> <div class="h-24 w-24 md:h-32 md:w-32 self-center mb-4">
</div> <SchoolBadge />
</div>
<form on:submit={handleSubmit} id="triggerForm" class="invisible hidden"></form> <form on:submit={handleSubmit} id="triggerForm" class="invisible hidden"></form>
{#if pageIndex === 0} {#if pageIndex === 0}
<form on:submit={handleSubmit}> <form on:submit={handleSubmit}>
@ -444,35 +445,35 @@
<p class="description mt-8 block text-center"> <p class="description mt-8 block text-center">
Sběr dat o zákonném zástupci je klíčový pro získání důležitých kontaktů a informací. Sběr dat o zákonném zástupci je klíčový pro získání důležitých kontaktů a informací.
</p> </p>
<div class="flex w-full flex-col"> <div class="flex w-full flex-col">
<span class="mt-8 w-full"> <span class="mt-8 w-full">
<NameField <NameField
error={$typedErrors['parents'][0]['name'] || $typedErrors['parents'][0]['surname']} error={$typedErrors['parents'][0]['name'] || $typedErrors['parents'][0]['surname']}
on:change={handleChange} on:change={handleChange}
bind:valueName={$form.parents[0].name} bind:valueName={$form.parents[0].name}
bind:valueSurname={$form.parents[0].surname} bind:valueSurname={$form.parents[0].surname}
placeholder="Jméno a příjmení zákonného zástupce" placeholder="Jméno a příjmení zákonného zástupce"
/> />
</span> </span>
<div class="mt-8 flex flex-row items-center md:flex-col"> <div class="mt-8 flex flex-row items-center md:flex-col">
<span class="w-full"> <span class="w-full">
<EmailField <EmailField
error={$typedErrors['parents'][0]['email']} error={$typedErrors['parents'][0]['email']}
on:change={handleChange} on:change={handleChange}
bind:value={$form.parents[0].email} bind:value={$form.parents[0].email}
placeholder="E-mail zákonného zástupce" placeholder="E-mail zákonného zástupce"
/> />
</span> </span>
<span class="ml-2 w-full md:ml-0 md:mt-8"> <span class="ml-2 w-full md:ml-0 md:mt-8">
<TelephoneField <TelephoneField
error={$typedErrors['parents'][0]['telephone']} error={$typedErrors['parents'][0]['telephone']}
on:change={handleChange} on:change={handleChange}
bind:value={$form.parents[0].telephone} bind:value={$form.parents[0].telephone}
placeholder="Telefon zákonného zástupce" placeholder="Telefon zákonného zástupce"
/> />
</span> </span>
</div>
</div> </div>
</div>
{:else if pageIndex === 4} {:else if pageIndex === 4}
<h1 class="title mt-8">{pageTexts[4]}</h1> <h1 class="title mt-8">{pageTexts[4]}</h1>
<p class="description mt-8 block text-center"> <p class="description mt-8 block text-center">
@ -508,7 +509,7 @@
</div> </div>
</div> </div>
{:else if pageIndex === 5} {:else if pageIndex === 5}
<h1 class="text-sspsBlue mt-8 text-4xl font-semibold">{pageTexts[5]}</h1> <h1 class="title mt-8">{pageTexts[5]}</h1>
<p class="description mt-8 block text-center"> <p class="description mt-8 block text-center">
Zadejte prosím své občanství, rodné číslo a obor na který se hlásíte. Zadejte prosím své občanství, rodné číslo a obor na který se hlásíte.
</p> </p>
@ -553,41 +554,43 @@
</span> </span>
</div> </div>
{/if} {/if}
<div class="mt-8 w-full">
<Submit
on:click={async (e) => {
await handleSubmit(e);
if (isPageInvalid(pageIndex)) return;
if (pageIndex === pageCount) {
} else {
pagesFilled[pageIndex] = true;
pageIndex++;
}
// @ts-ignore
errors.set(formInitialValues);
}}
value={pageIndex === pageCount ? 'Odeslat' : 'Pokračovat'}
/>
</div> </div>
<div class="controls w-full absolute bottom-1/12">
<div class="mt-8 flex flex-row justify-center"> <div class="mt-8 w-full">
{#each Array(pageCount + 1) as _, i} <Submit
<button
class:dotActive={i === pageIndex}
on:click={async (e) => { on:click={async (e) => {
pageIndex -= pageIndex === pageCount ? 1 : 0;
await handleSubmit(e); await handleSubmit(e);
pagesFilled = pagesFilled.map((_, i) => !isPageInvalid(i)); if (isPageInvalid(pageIndex)) return;
if (pageIndex === pageCount) {
const progress = pagesFilled.slice(0, i).every((item) => item === true); } else {
if (progress) { pagesFilled[pageIndex] = true;
pageIndex = i; pageIndex++;
} }
// @ts-ignore
errors.set(formInitialValues);
}} }}
class="dot" value={pageIndex === pageCount ? 'Odeslat' : 'Pokračovat'}
/> />
{/each} </div>
<div class="mt-8 flex flex-row justify-center">
{#each Array(pageCount + 1) as _, i}
<button
class:dotActive={i === pageIndex}
on:click={async (e) => {
pageIndex -= pageIndex === pageCount ? 1 : 0;
await handleSubmit(e);
pagesFilled = pagesFilled.map((_, i) => !isPageInvalid(i));
const progress = pagesFilled.slice(0, i).every((item) => item === true);
if (progress) {
pageIndex = i;
}
}}
class="dot"
/>
{/each}
</div>
</div> </div>
</div> </div>
</SplitLayout> </SplitLayout>