From 6a98da715824f14cc4927acc8ab960cbd7d9c9b8 Mon Sep 17 00:00:00 2001
From: EETagent <vojta.jungmann@gmail.com>
Date: Tue, 22 Nov 2022 20:01:35 +0100
Subject: [PATCH] feat: mobile design for dashboard

---
 frontend/src/routes/dashboard/+page.svelte | 64 ++++++++++++++++++++--
 1 file changed, 59 insertions(+), 5 deletions(-)

diff --git a/frontend/src/routes/dashboard/+page.svelte b/frontend/src/routes/dashboard/+page.svelte
index 53622b2..744209f 100644
--- a/frontend/src/routes/dashboard/+page.svelte
+++ b/frontend/src/routes/dashboard/+page.svelte
@@ -1,11 +1,14 @@
 <script lang="ts">
 	import FullLayout from '$lib/components/layout/FullLayout.svelte';
+
+	import { Swiper, SwiperSlide } from 'swiper/svelte';
+	import 'swiper/css';
 </script>
 
 <FullLayout>
-	<div class="dashboard">
+	<div class="dashboard dashboardDesktop">
 		<div class="card name col-span-2 relative">
-			<div class="circles relative -left-10 -top-1/3">
+			<div class="circles relative -left-16 -top-20">
 				<span
 					class="shadow-md left-20 top-10 absolute p-1 w-20 h-20 rounded-full bg-black bg-[#f8fbfc] opacity-100"
 				/>
@@ -18,7 +21,7 @@
 			</div>
 			<div class="mt-[50%] flex flex-col">
 				<h3>Damián</h3>
-				<span class="mt-3 text-sspsBlue text-xs">damina.vysin@example.com</span>
+				<span class="mt-3 text-sspsBlue truncate">damina.vysin@example.com</span>
 				<span class="mt-3 text-sspsGray text-xs">Uchazeč na SSPŠ</span>
 			</div>
 		</div>
@@ -65,12 +68,63 @@
 			</div>
 		</div>
 	</div>
+	<div class="dashboard dashboardMobile">
+		<div class="mt-10 card name relative mb-10">
+			<div class="circles relative -left-10 -top-13">
+				<span
+					class="shadow-md left-20 top-10 absolute p-1 w-20 h-20 rounded-full bg-black bg-[#f8fbfc] opacity-100"
+				/>
+				<span
+					class="shadow-md left-14 -top-6 absolute p-1 w-24 h-24 rounded-full bg-black bg-[#558cbd] opacity-50"
+				/>
+				<span
+					class="shadow-md absolute p-1 w-28 h-28 rounded-full bg-black bg-[#55b1bd] opacity-60"
+				/>
+			</div>
+			<div class="mt-24 flex flex-col">
+				<h3 class="!text-3xl">Damián</h3>
+				<span class="mt-3 text-sspsBlue truncate">damina.vysin@example.com</span>
+				<span class="mt-3 text-sspsGray text-xs">Uchazeč na SSPŠ</span>
+			</div>
+		</div>
+		<Swiper slidesPerView={1} spaceBetween={20} class="h-full">
+			{#each [0, 0, 0] as _}
+				<SwiperSlide>
+					<div class="card min-h-64 coverletter h-full col-span-5 flex flex-col justify-between">
+						<div class="flex flex-col sm:flex-row justify-between items-start sm:items-center">
+							<h3>Motivační dopis</h3>
+							<div
+								class="mt-3 sm:mt-0 py-1 px-4 flex bg-white rounded-xl items-center justify-between shadow-md"
+							>
+								<span class="text-sspsBlue italic text-sm">PDF</span>
+								<span class="mx-2 text-sspsGray">/</span>
+								<span class="text-sspsBlue italic text-sm">Max 10 MB</span>
+							</div>
+						</div>
+						<div class="flex-grow drag mt-6 h-full flex flex-col items-center justify-center">
+							<span class="text-[#406280] opacity-60 text-sm">Sem přetáhněte,</span>
+							<span class="text-sspsGray opacity-60 text-sm"
+								>nebo nahrajte svůj motivační dopis</span
+							>
+						</div>
+					</div>
+				</SwiperSlide>
+			{/each}
+		</Swiper>
+	</div>
 </FullLayout>
 
 <style>
-	.dashboard {
+	.dashboardDesktop {
 		@apply w-[70vw] h-[70vh];
-		@apply grid grid-cols-7 grid-rows-2 gap-10;
+		@apply hidden md:grid grid-cols-7 grid-rows-2 gap-10;
+	}
+	.dashboardMobile {
+		@apply w-[100vw] h-[90vh];
+		@apply md:hidden;
+	}
+	.dashboardMobile .card {
+		@apply w-[90%] mx-auto;
 	}
 	.dashboard .card {
 		@apply bg-[#f8fbfc] p-1;