From 4be811d3e7f18354bcc0ea1a2cb0c7bb84d25bdb Mon Sep 17 00:00:00 2001
From: EETagent <vojta.jungmann@gmail.com>
Date: Fri, 23 Dec 2022 21:39:42 +0100
Subject: [PATCH] feat: make more details responsive

---
 .../dashboard/DashboardInfoCard.svelte        | 101 ++++++++----------
 .../dashboard/StatusNotificationBig.svelte    |   2 +-
 .../(authenticated)/dashboard/+page.svelte    |  17 +--
 3 files changed, 55 insertions(+), 65 deletions(-)

diff --git a/frontend/src/lib/components/dashboard/DashboardInfoCard.svelte b/frontend/src/lib/components/dashboard/DashboardInfoCard.svelte
index 09b2455..a95499d 100644
--- a/frontend/src/lib/components/dashboard/DashboardInfoCard.svelte
+++ b/frontend/src/lib/components/dashboard/DashboardInfoCard.svelte
@@ -75,74 +75,61 @@
 			</div>
 		</div>
 	</div>
-	<div class="relative flex flex-col md:flex-row h-full justify-between my-2">
+	<div class="relative flex flex-col my-2 overflow-hidden">
 		<div>
 			<span class="absolute -left-16 -top-36">
 				<Circles />
 			</span>
-			<div class="flex flex-col xl:mt-10">
+			<div class="flex flex-col mt-[5%]">
 				<h3>{title}</h3>
 				<slot />
 			</div>
 		</div>
 		{#if showDetails}
-			<svg
-				class="ml-12 mr-8 hidden h-40 xl:block"
-				viewBox="0 0 2 80"
-				xmlns="http://www.w3.org/2000/svg"
-			>
-				<line
-					x1="0"
-					y="0"
-					x2="0"
-					y2="80"
-					stroke="#406280ff"
-					stroke-width="2"
-					stroke-dasharray="3"
-				/>
-			</svg>
-			<div
-				use:tippy={{
-					content: '<span>Vámi vyplněné osobní údaje</span>',
-					allowHTML: true,
-					placement: 'top',
-					showOnCreate: false,
-					delay: 0
-				}}
-				class="flex flex-col justify-around <2xl:text-xs"
-			>
-				<span>Adresa: <span class="font-bold">{$candidateData.candidate.address}</span></span>
-				<span
-					>Datum narození: <span class="font-bold">{$candidateData.candidate.birthdate}</span></span
+			<div class="overflow-scroll">
+				<div
+					use:tippy={{
+						content: '<span>Vámi vyplněné osobní údaje</span>',
+						allowHTML: true,
+						placement: 'top',
+						showOnCreate: false,
+						delay: 0
+					}}
+					class="flex flex-col justify-between leading-10 mt-4"
 				>
-				<span
-					>Místo narození: <span class="font-bold">{$candidateData.candidate.birthplace}</span
-					></span
+					<span>Adresa: <span class="font-bold">{$candidateData.candidate.address}</span></span>
+					<span
+						>Datum narození: <span class="font-bold">{$candidateData.candidate.birthdate}</span></span
+					>
+					<span
+						>Místo narození: <span class="font-bold">{$candidateData.candidate.birthplace}</span
+						></span
+					>
+					<span
+						>Rodné číslo: <span class="font-bold">{$candidateData.candidate.personalIdNumber}</span
+						></span
+					>
+					<span>Telefon: <span class="font-bold">{$candidateData.candidate.telephone}</span></span>
+				</div>
+				<div
+					use:tippy={{
+						content: '<span>Vámi vyplněné osobní údaje</span>',
+						allowHTML: true,
+						placement: 'top',
+						showOnCreate: false,
+						delay: 0
+					}}
+					class="flex flex-col leading-10 mt-4"
 				>
-				<span
-					>Rodné číslo: <span class="font-bold">{$candidateData.candidate.personalIdNumber}</span
-					></span
-				>
-				<span>Telefon: <span class="font-bold">{$candidateData.candidate.telephone}</span></span>
-			</div>
-			<div
-				use:tippy={{
-					content: '<span>Vámi vyplněné osobní údaje</span>',
-					allowHTML: true,
-					placement: 'top',
-					showOnCreate: false,
-					delay: 0
-				}}
-				class="md:ml-4 flex flex-col <2xl:text-xs"
-			>
-				{#each $candidateData.parents as parent}
-					<div class="flex flex-col">
-						<span class="text-sspsBlue text-xl font-bold">{parent.name + ' ' + parent.surname}</span
-						>
-						<span>Email: <span class="font-bold">{parent.email}</span></span>
-						<span>Telefon: <span class="font-bold">{parent.telephone}</span></span>
-					</div>
-				{/each}
+					{#each $candidateData.parents as parent}
+						<div class="flex flex-col">
+							<span class="text-sspsBlue text-xl font-bold">{parent.name + ' ' + parent.surname}</span
+							>
+							<span>Email: <span class="font-bold">{parent.email}</span></span>
+							<span>Telefon: <span class="font-bold">{parent.telephone}</span></span>
+						</div>
+					{/each}
+				</div>
 			</div>
 		{/if}
 	</div>
diff --git a/frontend/src/lib/components/dashboard/StatusNotificationBig.svelte b/frontend/src/lib/components/dashboard/StatusNotificationBig.svelte
index a0292a2..537d617 100644
--- a/frontend/src/lib/components/dashboard/StatusNotificationBig.svelte
+++ b/frontend/src/lib/components/dashboard/StatusNotificationBig.svelte
@@ -24,7 +24,7 @@
 
 <div on:click on:keydown class="flex flex-col">
 	<div class="info flex flex-col {status}">
-		<span class="text-xl font-bold text-white">{title}</span>
+		<span class="2xl:text-xl font-bold text-white">{title}</span>
 		{#if loading}
 			<div role="status">
 				<svg
diff --git a/frontend/src/routes/(candidate)/(authenticated)/dashboard/+page.svelte b/frontend/src/routes/(candidate)/(authenticated)/dashboard/+page.svelte
index 2886496..69e3081 100644
--- a/frontend/src/routes/(candidate)/(authenticated)/dashboard/+page.svelte
+++ b/frontend/src/routes/(candidate)/(authenticated)/dashboard/+page.svelte
@@ -51,13 +51,13 @@
 				<span class="text-sspsGray mt-3 text-xs">Uchazeč na SSPŠ</span>
 			</DashboardInfoCard>
 		</div>
-		<div class="movable coverletter col-span-5 row-span-4" class:showDetailsUploadCard={showDetails}>
-			<CoverLetterUploadCard compact={showDetails} />
+		<div class="movable coverletter col-span-5 row-span-4">
+			<CoverLetterUploadCard  />
 		</div>
-		<div class="portfolio col-span-4 row-span-4">
+		<div class="portfolio col-span-4 row-span-4" class:showDetailsPortfolio={showDetails}>
 			<PortfolioLetterUploadCard />
 		</div>
-		<div class="moreData col-span-4 row-span-4">
+		<div class="moreData col-span-4 row-span-4" class:showDetailsMoreData={showDetails}>
 			<PortfolioZipUploadCard />
 		</div>
 	</div>
@@ -93,10 +93,13 @@
 
 <style>
 	.showDetailsInfoCard {
-		@apply <2xl:col-span-5 <2xl:row-span-5 col-span-6;
+		@apply md:row-span-8;
 	}
-	.showDetailsUploadCard {
-		@apply <2xl:col-span-3 <2xl:row-span-5 col-span-2;
+	.showDetailsPortfolio {
+		@apply md:hidden;
+	}
+	.showDetailsMoreData {
+		@apply md:col-span-5;
 	}
 	.dashboardDesktop {
 		@apply h-[85vh] w-[85vw];