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

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 lev from '$lib/assets/logo/lev.png';
import SplitLayout from '$lib/components/layout/SplitLayout.svelte'; import SplitLayout from '$lib/components/layout/SplitLayout.svelte';
import TextField from '$lib/components/textfield/TextField.svelte';
let applicationValue = ''; let applicationValue = '';
@ -25,12 +26,9 @@
<p class="mt-8 font-light text-sspsGray text-center"> <p class="mt-8 font-light text-sspsGray text-center">
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>
<input <div class="w-3/5">
bind:value={applicationValue} <TextField bind:value={applicationValue} placeholder="Ev. číslo" type="number" />
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" </div>
type="number"
placeholder="Ev. číslo"
/>
<input <input
on:click={redirectToCode} 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" 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 lev from '$lib/assets/logo/lev.png';
import SplitLayout from '$lib/components/layout/SplitLayout.svelte'; import SplitLayout from '$lib/components/layout/SplitLayout.svelte';
import TextField from '$lib/components/textfield/TextField.svelte';
let applicationValue = ''; let applicationValue = '';
@ -13,7 +14,7 @@
} }
}; };
let pageIndex = 1; let pageIndex = 3;
</script> </script>
<SplitLayout> <SplitLayout>
@ -29,23 +30,13 @@
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 md:flex-col items-center justify-center w-full md:w-3/5"> <div class="flex md:flex-col items-center justify-center w-full md:w-3/5">
<input <TextField type="text" placeholder="Jméno a příjmení" />
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" <TextField type="e-mail" placeholder="Email" />
type="text" </div>
placeholder="Jméno a příjmení" <div class="w-full md:w-3/5">
/> <TextField type="tel" placeholder="Telefon" />
<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"
/>
</div> </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 <input
on:click={redirectToCode} 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" 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"> <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. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.<br /> Fusce suscipit libero eget elit.
</p> </p>
<input <div class="flex flex-col w-full md:w-3/5">
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" <TextField type="text" placeholder="Rodné příjmení" />
type="text" <TextField type="text" placeholder="Místo narození" />
placeholder="Rodné přijmení" </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="Místo narození"
/>
<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">
<input <TextField type="text" placeholder="Datum narození" />
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" <TextField type="text" placeholder="Pohlaví" />
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í"
/>
</div> </div>
<input <input
on:click={redirectToCode} on:click={redirectToCode}
@ -92,23 +70,12 @@
<p class="block mt-8 font-light text-sspsGray text-center"> <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. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.<br /> Fusce suscipit libero eget elit.
</p> </p>
<input <div class="flex flex-col w-full md:w-3/5">
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" <TextField type="text" placeholder="Adresa trvalého bydliště" />
type="text" <TextField type="e-mail" placeholder="E-mail zákonného zástupce" />
placeholder="Adresa trvalého bydliště" <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 <input
on:click={redirectToCode} 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" 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"> <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. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.<br /> Fusce suscipit libero eget elit.
</p> </p>
<input <div class="flex flex-col w-full md:w-3/5">
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" <TextField type="text" placeholder="Občanství" />
type="text" </div>
placeholder="Občanství" <div class="flex items-center justify-center w-full md:w-3/5">
/> <TextField type="text" placeholder="Rodné číslo" />
<div class="flex items-center justify-center w-full md:w-3/5"> <TextField type="text" placeholder="Obor" />
<input </div>
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" <div class="flex flex-col w-full md:w-3/5">
type="text" <TextField type="text" placeholder="Evidenční číslo přihlášky" />
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> </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 <input
on:click={redirectToCode} 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" 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"