From 9787ababb020f6c7264744a52ef0b77b9f481bbb Mon Sep 17 00:00:00 2001
From: JovannMC <jovannmc@femboyfurry.net>
Date: Fri, 3 Jan 2025 16:35:22 +0300
Subject: [PATCH] start mobile upload page

---
 src/lib/components/functional/ConversionPanel.svelte | 11 ++++++-----
 src/routes/+layout.svelte                            |  3 ++-
 src/routes/+page.svelte                              |  2 +-
 src/routes/convert/+page.svelte                      |  3 +--
 4 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/src/lib/components/functional/ConversionPanel.svelte b/src/lib/components/functional/ConversionPanel.svelte
index 408227c..308d89d 100644
--- a/src/lib/components/functional/ConversionPanel.svelte
+++ b/src/lib/components/functional/ConversionPanel.svelte
@@ -5,18 +5,18 @@
 	import Dropdown from "./Dropdown.svelte";
 </script>
 
-<Panel class="w-full h-20 flex items-center justify-between">
-	<div class="flex items-center gap-2.5">
+<Panel class="w-full h-auto flex items-center justify-between flex-col md:flex-row gap-4">
+	<div class="flex items-center flex-col md:flex-row gap-2.5 max-md:w-full">
 		<button
 			onclick={() => files.convertAll()}
-			class="btn highlight flex gap-3"
+			class="btn highlight flex gap-3 max-md:w-full"
 			disabled={!files.ready}
 		>
 			<RefreshCw size="24" />
 			<p>Convert all</p>
 		</button>
 		<button
-			class="btn flex gap-3"
+			class="btn flex gap-3 max-md:w-full"
 			disabled={!files.ready || !files.results}
 			onclick={() => files.downloadAll()}
 		>
@@ -24,9 +24,10 @@
 			<p>Download all as .zip</p>
 		</button>
 	</div>
+	<div class="w-full bg-separator h-0.5 flex md:hidden"></div>
 	<div class="flex items-center gap-2">
 		{#if files.requiredConverters.length === 1}
-			<p class="whitespace-nowrap">Set all to</p>
+			<p class="whitespace-nowrap text-xl md:text-base">Set all to</p>
 			<Dropdown
 				onselect={(r) => files.files.forEach((f) => {
 					f.to = r;
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 4bc71f4..868cd5c 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -131,7 +131,7 @@
 
 	<!-- Desktop navbar -->
 	<div class="hidden md:flex p-8 w-screen justify-center z-50">
-		<div class="flex flex-col justify-center items-center gap-4">
+		<div class="flex flex-col gap-4">
 			<Navbar {items} />
 			{#if items
 				.find((i) => i.url === "/convert")
@@ -263,6 +263,7 @@
 							end: 1.05,
 						},
 					}}
+					class="w-full"
 				>
 					<ConversionPanel />
 				</div>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index f8d13bc..3b12392 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -40,7 +40,7 @@
 					</p>
 				</div>
 				<div
-					class="flex-grow w-11/12 md:w-full h-72 md:h-full blur-in"
+					class="flex-grow w-11/12 md:w-full h-72 blur-in"
 					style:--delay="60ms"
 				>
 					<Uploader class="w-full h-full" />
diff --git a/src/routes/convert/+page.svelte b/src/routes/convert/+page.svelte
index 20b0b50..08270a0 100644
--- a/src/routes/convert/+page.svelte
+++ b/src/routes/convert/+page.svelte
@@ -94,8 +94,7 @@
 
 <div class="w-full h-full flex justify-center">
 	<div
-		class="w-[794px] grid"
-		style="grid-template-columns: repeat(2, 1fr); grid-auto-rows: 240px; gap: 16px"
+		class="w-[794px] grid grid-cols-1 md:grid-cols-2 px-4 md:p-0 auto-rows-[240px] gap-4"
 	>
 		{#each files.files as file, i (file.id)}
 			{#if files.files.length >= 2 && i === 1}