dan/Portfolio
1
0
Fork 0
mirror of https://github.com/danbulant/Portfolio synced 2026-05-24 12:35:31 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

refactor: Use TextField component

Browse source
This commit is contained in:
EETagent 2022-11-21 12:37:06 +01:00
parent ace4242ca1
commit 6454a84586
3 changed files with 54 additions and 79 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
frontend/src/lib/components/textfield/TextField.svelte Normal file
View file

@ -0,0 +1,22 @@
<script lang="ts">
export let type: 'text' | 'number' | 'tel' | 'e-mail' = 'text';
const typeAction = (node: HTMLInputElement) => {
node.type = type;
}
export let placeholder: string = '';
export let value: string = '';
</script>
<input
bind:value
on:click
on:keydown
on:keyup
class="bg-[#f8fafb] mt-8 w-full shadow-lg p-3 rounded-lg text-xl outline-none border transition-colors duration-300 hover:border-sspsBlue border-2"
use:typeAction
{placeholder}
/>
<style>
</style>

10
frontend/src/routes/login/+page.svelte
View file

@ -3,6 +3,7 @@
import lev from '$lib/assets/logo/lev.png';
import SplitLayout from '$lib/components/layout/SplitLayout.svelte';
import TextField from '$lib/components/textfield/TextField.svelte';
let applicationValue = '';
@ -25,12 +26,9 @@
<p class="mt-8 font-light text-sspsGray text-center">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.<br /> Fusce suscipit libero eget elit.
</p>
<input
bind:value={applicationValue}
class="bg-[#f8fafb] mt-8 w-3/5 shadow-lg p-3 rounded-lg text-xl outline-none border transition-colors duration-300 hover:border-sspsBlue border-2"
type="number"
placeholder="Ev. číslo"
/>
<div class="w-3/5">
<TextField bind:value={applicationValue} placeholder="Ev. číslo" type="number" />
</div>
<input
on:click={redirectToCode}
class="mt-8 w-3/5 p-3 rounded-lg font-semibold text-xl transition-colors duration-300 bg-sspsBlue hover:bg-sspsBlueDark text-white"

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

@ -3,6 +3,7 @@
import lev from '$lib/assets/logo/lev.png';
import SplitLayout from '$lib/components/layout/SplitLayout.svelte';
import TextField from '$lib/components/textfield/TextField.svelte';
let applicationValue = '';
@ -13,7 +14,7 @@
}
};
let pageIndex = 1;
let pageIndex = 3;
</script>
<SplitLayout>
@ -29,23 +30,13 @@
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.<br /> Fusce suscipit libero eget elit.
</p>
<div class="flex md:flex-col items-center justify-center w-full md:w-3/5">
<input
class="bg-[#f8fafb] mt-8 w-full shadow-lg p-3 rounded-lg text-xl outline-none border transition-colors duration-300 hover:border-sspsBlue border-2"
type="text"
placeholder="Jméno a příjmení"
/>
<input
class="ml-2 md:ml-0 bg-[#f8fafb] mt-8 w-full shadow-lg p-3 rounded-lg text-xl outline-none border transition-colors duration-300 hover:border-sspsBlue border-2"
type="email"
placeholder="E-mail"
/>
<TextField type="text" placeholder="Jméno a příjmení" />
<TextField type="e-mail" placeholder="Email" />
</div>
<div class="w-full md:w-3/5">
<TextField type="tel" placeholder="Telefon" />
</div>
<input
class="w-full bg-[#f8fafb] mt-8 md:w-3/5 shadow-lg p-3 rounded-lg text-xl outline-none border transition-colors duration-300 hover:border-sspsBlue border-2"
type="tel"
placeholder="Telefon"
/>
<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"
@ -58,27 +49,14 @@
<p class="block mt-8 font-light text-sspsGray text-center">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.<br /> Fusce suscipit libero eget elit.
</p>
<input
class="w-full bg-[#f8fafb] mt-8 md:w-3/5 shadow-lg p-3 rounded-lg text-xl outline-none border transition-colors duration-300 hover:border-sspsBlue border-2"
type="text"
placeholder="Rodné přijmení"
/>
<input
class="w-full bg-[#f8fafb] mt-8 md:w-3/5 shadow-lg p-3 rounded-lg text-xl outline-none border transition-colors duration-300 hover:border-sspsBlue border-2"
type="text"
placeholder="Místo narození"
/>
<div class="flex flex-col w-full md:w-3/5">
<TextField type="text" placeholder="Rodné příjmení" />
<TextField type="text" placeholder="Místo narození" />
</div>
<div class="flex items-center justify-center w-full md:w-3/5">
<input
class="bg-[#f8fafb] mt-8 w-full shadow-lg p-3 rounded-lg text-xl outline-none border transition-colors duration-300 hover:border-sspsBlue border-2"
type="text"
placeholder="Datum narození"
/>
<input
class="ml-2 bg-[#f8fafb] mt-8 w-full shadow-lg p-3 rounded-lg text-xl outline-none border transition-colors duration-300 hover:border-sspsBlue border-2"
type="text"
placeholder="Polaví"
/>
<TextField type="text" placeholder="Datum narození" />
<TextField type="text" placeholder="Pohlaví" />
</div>
<input
on:click={redirectToCode}
@ -92,23 +70,12 @@
<p class="block mt-8 font-light text-sspsGray text-center">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.<br /> Fusce suscipit libero eget elit.
</p>
<input
class="w-full bg-[#f8fafb] mt-8 md:w-3/5 shadow-lg p-3 rounded-lg text-xl outline-none border transition-colors duration-300 hover:border-sspsBlue border-2"
type="text"
placeholder="Adresa trvalého bydliště"
/>
<div class="flex flex-col w-full md:w-3/5">
<TextField type="text" placeholder="Adresa trvalého bydliště" />
<TextField type="e-mail" placeholder="E-mail zákonného zástupce" />
<TextField type="tel" placeholder="Telefon zákonného zástupce" />
</div>
<input
class="w-full bg-[#f8fafb] mt-8 md:w-3/5 shadow-lg p-3 rounded-lg text-xl outline-none border transition-colors duration-300 hover:border-sspsBlue border-2"
type="email"
placeholder="E-mail zákonného zástupce"
/>
<input
class="w-full bg-[#f8fafb] mt-8 md:w-3/5 shadow-lg p-3 rounded-lg text-xl outline-none border transition-colors duration-300 hover:border-sspsBlue border-2"
type="tel"
placeholder="Telefon zákonného zástupce"
/>
<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"
@ -121,28 +88,16 @@
<p class="block mt-8 font-light text-sspsGray text-center">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.<br /> Fusce suscipit libero eget elit.
</p>
<input
class="w-full bg-[#f8fafb] mt-8 md:w-3/5 shadow-lg p-3 rounded-lg text-xl outline-none border transition-colors duration-300 hover:border-sspsBlue border-2"
type="text"
placeholder="Občanství"
/>
<div class="flex items-center justify-center w-full md:w-3/5">
<input
class="bg-[#f8fafb] mt-8 w-full shadow-lg p-3 rounded-lg text-xl outline-none border transition-colors duration-300 hover:border-sspsBlue border-2"
type="text"
placeholder="Rodné číslo"
/>
<input
class="ml-2 bg-[#f8fafb] mt-8 w-full shadow-lg p-3 rounded-lg text-xl outline-none border transition-colors duration-300 hover:border-sspsBlue border-2"
type="text"
placeholder="Obor"
/>
<div class="flex flex-col w-full md:w-3/5">
<TextField type="text" placeholder="Občanství" />
</div>
<div class="flex items-center justify-center w-full md:w-3/5">
<TextField type="text" placeholder="Rodné číslo" />
<TextField type="text" placeholder="Obor" />
</div>
<div class="flex flex-col w-full md:w-3/5">
<TextField type="text" placeholder="Evidenční číslo přihlášky" />
</div>
<input
class="w-full bg-[#f8fafb] mt-8 md:w-3/5 shadow-lg p-3 rounded-lg text-xl outline-none border transition-colors duration-300 hover:border-sspsBlue border-2"
type="text"
placeholder="Evidenční číslo přihlášky"
/>
<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"