From 4f64117dddca715880a2064336635ef54a113f79 Mon Sep 17 00:00:00 2001
From: Sebastian Pravda <sebastian.pravda@gmail.com>
Date: Sun, 25 Dec 2022 23:08:43 +0100
Subject: [PATCH] feat: phone optimizations

---
 .../lib/components/layout/SplitLayout.svelte  |  4 +-
 .../(authenticated)/register/+page.svelte     | 92 +++++++++----------
 .../login/[code=application]/+page.svelte     |  2 +-
 3 files changed, 47 insertions(+), 51 deletions(-)

diff --git a/frontend/src/lib/components/layout/SplitLayout.svelte b/frontend/src/lib/components/layout/SplitLayout.svelte
index 4a4d9aa..8251601 100644
--- a/frontend/src/lib/components/layout/SplitLayout.svelte
+++ b/frontend/src/lib/components/layout/SplitLayout.svelte
@@ -28,11 +28,11 @@
 <style lang="postcss">
 	.bgImage {
 		@apply -z-20;
-		@apply min-w-screen absolute min-h-screen md:min-w-[50vw];
+		@apply min-w-screen absolute min-h-full md:min-w-[50vw];
 		@apply bg-cover bg-no-repeat;
 	}
 	.bgOverlay {
-		@apply min-w-screen absolute -z-10 min-h-screen md:min-w-[50vw];
+		@apply min-w-screen absolute -z-10 min-h-full md:min-w-[50vw];
 		background: linear-gradient(45deg, rgba(18, 48, 75, 1), rgba(119, 173, 224, 0.443));
 		@apply bg-cover;
 	}
diff --git a/frontend/src/routes/(candidate)/(authenticated)/register/+page.svelte b/frontend/src/routes/(candidate)/(authenticated)/register/+page.svelte
index 5cb205e..1c8e35d 100644
--- a/frontend/src/routes/(candidate)/(authenticated)/register/+page.svelte
+++ b/frontend/src/routes/(candidate)/(authenticated)/register/+page.svelte
@@ -332,7 +332,7 @@
 <SplitLayout>
 	<div class="form relative">
 		<div class="absolute bottom-3/12 flex flex-col w-full">
-			<div class="h-24 w-24 md:h-32 md:w-32 self-center mb-4">
+			<div class="h-32 w-32 <md:hidden self-center mb-4">
 				<SchoolBadge />
 			</div>
 		<form on:submit={handleSubmit} id="triggerForm" class="invisible hidden"></form>
@@ -359,7 +359,7 @@
 					V rámci usnadnění přijímacího řízení jsme připravili online formulář, který Vám pomůže s
 					vyplněním potřebných údajů.
 				</p>
-				<div class="flex w-full items-center justify-center md:flex-col">
+				<div class="flex flex-col">
 					<span class="mt-8 w-full">
 						<NameField
 							error={$typedErrors['candidate']['name']}
@@ -369,7 +369,7 @@
 							placeholder="Jméno a příjmení"
 						/>
 					</span>
-					<span class="mt-8 ml-2 w-full md:ml-0">
+					<span class="mt-8 w-full">
 						<EmailField
 							error={$typedErrors['candidate']['email']}
 							on:change={handleChange}
@@ -377,14 +377,14 @@
 							placeholder="E-mail"
 						/>
 					</span>
-				</div>
-				<div class="mt-8 w-full">
-					<TelephoneField
-						error={$typedErrors['candidate']['telephone']}
-						on:change={handleChange}
-						bind:value={$form.candidate.telephone}
-						placeholder="Telefon"
-					/>
+					<span class="mt-8 w-full">
+						<TelephoneField
+							error={$typedErrors['candidate']['telephone']}
+							on:change={handleChange}
+							bind:value={$form.candidate.telephone}
+							placeholder="Telefon"
+						/>
+					</span>
 				</div>
 			</form>
 		{:else if pageIndex === 2}
@@ -393,7 +393,7 @@
 				Pro registraci je potřeba vyplnit několik údajů o Vás. Tyto údaje budou použity pro
 				přijímací řízení. Všechny údaje jsou důležité a bez nich se registrace nezdaří.
 			</p>
-			<div class="flex w-full flex-row md:flex-col">
+			<div class="flex w-full flex-col">
 				<span class="mt-8 w-full">
 					<TextField
 						error={$typedErrors['candidate']['address']}
@@ -404,7 +404,7 @@
 						helperText="Uveďte ulici, č.p., město, PSČ"
 					/>
 				</span>
-				<span class="mt-8 ml-2 w-full md:ml-0">
+				<span class="mt-8 w-full">
 					<TextField
 						error={$typedErrors['candidate']['birthplace']}
 						on:change={handleChange}
@@ -455,24 +455,22 @@
 						placeholder="Jméno a příjmení zákonného zástupce"
 				/>
 			</span>
-			<div class="mt-8 flex flex-row items-center md:flex-col">
-				<span class="w-full">
-					<EmailField
-							error={$typedErrors['parents'][0]['email']}
-						on:change={handleChange}
-							bind:value={$form.parents[0].email}
-							placeholder="E-mail zákonného zástupce"
-					/>
-				</span>
-				<span class="ml-2 w-full md:ml-0 md:mt-8">
-					<TelephoneField
-							error={$typedErrors['parents'][0]['telephone']}
-						on:change={handleChange}
-							bind:value={$form.parents[0].telephone}
-							placeholder="Telefon zákonného zástupce"
-					/>
-				</span>
-			</div>
+			<span class="mt-8 w-full">
+				<EmailField
+						error={$typedErrors['parents'][0]['email']}
+					on:change={handleChange}
+						bind:value={$form.parents[0].email}
+						placeholder="E-mail zákonného zástupce"
+				/>
+			</span>
+			<span class="w-full mt-8">
+				<TelephoneField
+						error={$typedErrors['parents'][0]['telephone']}
+					on:change={handleChange}
+						bind:value={$form.parents[0].telephone}
+						placeholder="Telefon zákonného zástupce"
+				/>
+			</span>
 		</div>
 		{:else if pageIndex === 4}
 			<h1 class="title mt-8">{pageTexts[4]}</h1>
@@ -489,24 +487,22 @@
 						placeholder="Jméno a příjmení zákonného zástupce (nepovinné)"
 					/>
 				</span>
-				<div class="mt-8 flex flex-row items-center md:flex-col">
-					<span class="w-full">
-						<EmailField
-							error={$typedErrors['parents'][1]['email']}
-							on:change={handleChange}
-							bind:value={$form.parents[1].email}
-							placeholder="E-mail zákonného zástupce (nepovinné)"
-						/>
+				<span class="mt-8 w-full">
+					<EmailField
+						error={$typedErrors['parents'][1]['email']}
+						on:change={handleChange}
+						bind:value={$form.parents[1].email}
+						placeholder="E-mail zákonného zástupce (nepovinné)"
+					/>
+				</span>
+				<span class="mt-8 w-full">
+					<TelephoneField
+						error={$typedErrors['parents'][1]['telephone']}
+						on:change={handleChange}
+						bind:value={$form.parents[1].telephone}
+						placeholder="Telefon zákonného zástupce (nepovinné)"
+					/>
 					</span>
-					<span class="ml-2 w-full md:ml-0 md:mt-8">
-						<TelephoneField
-							error={$typedErrors['parents'][1]['telephone']}
-							on:change={handleChange}
-							bind:value={$form.parents[1].telephone}
-							placeholder="Telefon zákonného zástupce (nepovinné)"
-						/>
-					</span>
-				</div>
 			</div>
 		{:else if pageIndex === 5}
 			<h1 class="title mt-8">{pageTexts[5]}</h1>
diff --git a/frontend/src/routes/(candidate)/auth/login/[code=application]/+page.svelte b/frontend/src/routes/(candidate)/auth/login/[code=application]/+page.svelte
index 9e4e728..c77aa78 100644
--- a/frontend/src/routes/(candidate)/auth/login/[code=application]/+page.svelte
+++ b/frontend/src/routes/(candidate)/auth/login/[code=application]/+page.svelte
@@ -130,7 +130,7 @@
 	input {
 		@apply text-sspsBlue text-center font-semibold;
 		@apply 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;
+		@apply focus:border-sspsBlue hover:border-sspsBlue rounded-xl border border-2 bg-[#f8fafb] p-3 md:caret-transparent shadow-lg outline-none;
 	}
 	.separater {
 		@apply bg-sspsBlue mr-2 hidden h-2 w-8 md:block;