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

feat: 12 letter code input

Browse source
This commit is contained in:
EETagent 2022-12-16 13:31:22 +01:00
parent 25b403c909
commit 9d8be9875e
1 changed files with 17 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -89,7 +89,7 @@
type="text" type="text"
/> />
{/each} {/each}
<span class="bg-sspsBlue mr-2 hidden h-2 w-8 sm:block" /> <span class="separater" />
{#each [5, 6, 7, 8] as value} {#each [5, 6, 7, 8] as value}
<input <input
class="codeInputDesktop" class="codeInputDesktop"
@ -100,6 +100,17 @@
type="text" type="text"
/> />
{/each} {/each}
<span class="separater" />
{#each [9, 10, 11, 12] as value}
<input
class="codeInputDesktop"
bind:this={codeElementArray[value - 1]}
bind:value={codeValueArray[value - 1]}
on:keydown={(e) => inputDesktopOnKeyDown(value - 1, e)}
on:paste|preventDefault={(e) => onPaste(e)}
type="text"
/>
{/each}
</div> </div>
<h3 class="text-sspsBlue mx-8 mt-8 text-center text-xl font-semibold"> <h3 class="text-sspsBlue mx-8 mt-8 text-center text-xl font-semibold">
Zadejte 8místný kód pro aktivaci účtu Zadejte 8místný kód pro aktivaci účtu
@ -120,13 +131,16 @@
@apply text-sspsBlue text-center font-semibold; @apply text-sspsBlue text-center font-semibold;
@apply focus:border-sspsBlue hover:border-sspsBlue rounded-xl border border-2 bg-[#f8fafb] p-3 caret-transparent shadow-lg outline-none transition-colors duration-300; @apply focus:border-sspsBlue hover:border-sspsBlue rounded-xl border border-2 bg-[#f8fafb] p-3 caret-transparent shadow-lg outline-none transition-colors duration-300;
} }
.separater {
@apply bg-sspsBlue mr-2 hidden h-2 w-8 md:block
}
.codeInputMobile { .codeInputMobile {
@apply sm:hidden; @apply md:hidden;
@apply mx-5 w-full; @apply mx-5 w-full;
} }
.codeInputDesktop { .codeInputDesktop {
@apply hidden; @apply hidden;
@apply mr-1 md:mr-2; @apply mr-1 md:mr-2;
@apply sm:h-15 xl:w-18 xl:h-22 sm:block sm:w-12 sm:text-xl md:h-20 md:w-16 md:text-4xl xl:p-0 xl:text-4xl; @apply sm:h-15 xl:w-18 xl:h-22 md:block sm:w-12 sm:text-xl md:h-20 md:w-16 md:text-4xl xl:p-0 xl:text-4xl;
} }
</style> </style>