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

feat: add pagination to registration

Browse source
This commit is contained in:
EETagent 2022-11-21 13:21:26 +01:00
parent e4fa662a44
commit b9f0e05755
1 changed files with 21 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

55
frontend/src/routes/register/+page.svelte
View file

@ -14,6 +14,7 @@
} }
}; };
const pageCount = 3;
let pageIndex = 0; let pageIndex = 0;
</script> </script>
@ -61,13 +62,6 @@
</div> </div>
</TextField> </TextField>
</div> </div>
<input
on:click={redirectToCode}
class="w-full mt-8 md:w-3/5 p-3 rounded-lg font-semibold text-xl transition-colors duration-300 bg-sspsBlue hover:bg-sspsBlueDark text-white"
type="submit"
value="Odeslat"
/>
{/if} {/if}
{#if pageIndex === 1} {#if pageIndex === 1}
<h1 class="mt-8 text-4xl text-sspsBlue font-semibold">Něco o tobě</h1> <h1 class="mt-8 text-4xl text-sspsBlue font-semibold">Něco o tobě</h1>
@ -100,12 +94,6 @@
<TextField type="text" placeholder="Datum narození" /> <TextField type="text" placeholder="Datum narození" />
<TextField type="text" placeholder="Pohlaví" /> <TextField type="text" placeholder="Pohlaví" />
</div> </div>
<input
on:click={redirectToCode}
class="w-full mt-8 md:w-3/5 p-3 rounded-lg font-semibold text-xl transition-colors duration-300 bg-sspsBlue hover:bg-sspsBlueDark text-white"
type="submit"
value="Odeslat"
/>
{/if} {/if}
{#if pageIndex === 2} {#if pageIndex === 2}
<h1 class="mt-8 text-4xl text-sspsBlue font-semibold">Už jen kousek!</h1> <h1 class="mt-8 text-4xl text-sspsBlue font-semibold">Už jen kousek!</h1>
@ -117,13 +105,6 @@
<TextField type="e-mail" placeholder="E-mail zákonného zástupce" /> <TextField type="e-mail" placeholder="E-mail zákonného zástupce" />
<TextField type="tel" placeholder="Telefon zákonného zástupce" /> <TextField type="tel" placeholder="Telefon zákonného zástupce" />
</div> </div>
<input
on:click={redirectToCode}
class="w-full mt-8 md:w-3/5 p-3 rounded-lg font-semibold text-xl transition-colors duration-300 bg-sspsBlue hover:bg-sspsBlueDark text-white"
type="submit"
value="Odeslat"
/>
{/if} {/if}
{#if pageIndex === 3} {#if pageIndex === 3}
<h1 class="mt-8 text-4xl text-sspsBlue font-semibold">Poslední krok</h1> <h1 class="mt-8 text-4xl text-sspsBlue font-semibold">Poslední krok</h1>
@ -131,10 +112,8 @@
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.<br /> Fusce suscipit libero eget elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.<br /> Fusce suscipit libero eget elit.
</p> </p>
<div class="flex flex-col w-full md:w-3/5"> <div class="flex flex-col w-full md:w-3/5">
<TextField type="text" placeholder="Občanství" icon> <TextField type="text" placeholder="Občanství" icon>
<div slot="icon"> <div slot="icon">ssj</div>
ssj
</div>
</TextField> </TextField>
</div> </div>
<div class="flex items-center justify-center w-full md:w-3/5"> <div class="flex items-center justify-center w-full md:w-3/5">
@ -144,19 +123,24 @@
<div class="flex flex-col w-full md:w-3/5"> <div class="flex flex-col w-full md:w-3/5">
<TextField type="text" placeholder="Evidenční číslo přihlášky" /> <TextField type="text" placeholder="Evidenční číslo přihlášky" />
</div> </div>
<input
on:click={redirectToCode}
class="w-full mt-8 md:w-3/5 p-3 rounded-lg font-semibold text-xl transition-colors duration-300 bg-sspsBlue hover:bg-sspsBlueDark text-white"
type="submit"
value="Odeslat"
/>
{/if} {/if}
<input
on:click={() => {
if (pageIndex === pageCount) {
//TODO: Submit
} else {
pageIndex++;
}
}}
class="w-full mt-8 md:w-3/5 p-3 rounded-lg font-semibold text-xl transition-colors duration-300 bg-sspsBlue hover:bg-sspsBlueDark text-white"
type="submit"
value={pageIndex === pageCount ? 'Odeslat' : 'Pokračovat'}
/>
<div class="mt-8 flex flex-row justify-center"> <div class="mt-8 flex flex-row justify-center">
<span class="w-3 h-3 rounded-full bg-sspsBlue" /> {#each Array(pageCount + 1) as _, i}
<span class="w-3 h-3 ml-2 rounded-full bg-sspsGray" /> <span class:dotActive={i === pageIndex} class="ml-2 w-3 h-3 rounded-full bg-sspsGray" />
<span class="w-3 h-3 ml-2 rounded-full bg-sspsGray" /> {/each}
<span class="w-3 h-3 ml-2 rounded-full bg-sspsGray" />
</div> </div>
</div> </div>
</SplitLayout> </SplitLayout>
@ -167,4 +151,7 @@
@apply mx-auto w-[90%] h-full; @apply mx-auto w-[90%] h-full;
@apply items-center justify-center; @apply items-center justify-center;
} }
.dotActive {
@apply bg-sspsBlue;
}
</style> </style>