Settings ui wip

prokawsar · Jul 22, 2024 · ace477b · ace477b
1 parent cfb3258
commit ace477b
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 8 deletions.
diff --git a/src/lib/elements/Input.svelte b/src/lib/elements/Input.svelte
@@ -32,6 +32,6 @@
 
 <style lang="postcss">
 	.input-field {
-		@apply border border-gray-400 w-12 p-1 rounded;
+		@apply border border-gray-400 w-12 md:w-full p-1 rounded;
 	}
 </style>
diff --git a/src/routes/(app)/+layout.svelte b/src/routes/(app)/+layout.svelte
@@ -6,13 +6,16 @@
 	import { navigating } from '$app/stores'
 	import Loader from '$lib/elements/Loader.svelte'
 	import mixpanel from 'mixpanel-browser'
+	import { slide } from 'svelte/transition'
 
 	//Import Mixpanel SDK
 	mixpanel.init(PUBLIC_MIX_TOKEN, {
 		debug: false,
 		track_pageview: true,
 		persistence: 'localStorage'
 	})
+
+	let showSettings = false
 </script>
 
 <main class="h-[100svh] flex flex-col">
@@ -23,13 +26,11 @@
 			<Loader />
 		</div>
 	{/if}
-	<nav>
+	<nav class="max-w-6xl mx-auto w-full">
 		<div class="flex justify-center py-2">
 			<p class="text-center text-2xl text-red-600 font-semibold">Molla Printing & Packaging</p>
 		</div>
-		<div
-			class="w-full max-w-6xl mx-auto bg-gradient-to-r from-transparent via-orange-800/40 to-transparent p-[1px]"
-		/>
+		<div class="bg-gradient-to-r from-transparent via-orange-800/40 to-transparent p-[1px]" />
 		<div class="px-4 flex w-full mt-2">
 			<div class="flex w-full flex-row justify-end gap-3 py-1 px-2 rounded border border-teal-400">
 				<a href="/history" class:hidden={$page.url.pathname == '/history'} class="h-full">History</a
@@ -40,10 +41,20 @@
 	</nav>
 	<slot />
 
-	<div class="absolute bottom-0 w-full">
-		<p class="text-center text-gray-400">
+	<div class="absolute bottom-0 w-full flex">
+		<p class="text-right md:text-center text-gray-400 w-3/4">
 			&#x1F4BB;Developed by <a href="https://github.com/prokawsar" target="_blank">ProKawsar</a
 			>&#x1F60E;
 		</p>
+		<!-- <button on:click={() => (showSettings = !showSettings)} class="w-1/4"> Settings </button> -->
+		{#if showSettings}
+			<div
+				transition:slide={{ axis: 'y', duration: 200 }}
+				class="absolute right-2 bottom-7 flex flex-col items-start divide-y divide-orange-400 gap-1 bg-slate-100 p-2 rounded"
+			>
+				<button>Logout</button>
+				<button>Change pin</button>
+			</div>
+		{/if}
 	</div>
 </main>
diff --git a/src/routes/(app)/+page.svelte b/src/routes/(app)/+page.svelte
@@ -15,6 +15,7 @@
 	import Icon from '@iconify/svelte'
 	import mixpanel from 'mixpanel-browser'
 	import { onMount, tick } from 'svelte'
+	import { slide } from 'svelte/transition'
 
 	const paperFields = {
 		id: '',
@@ -180,7 +181,10 @@
 			bind:this={inputGroupRef}
 		>
 			{#each paperCount as paper, i}
-				<div class="flex flex-row items-center justify-between rounded">
+				<div
+					class="flex flex-row items-center justify-between rounded"
+					transition:slide={{ axis: 'y', duration: 100 }}
+				>
 					<div class="flex flex-row gap-[3px] items-center overflow-x-auto">
 						<button
 							disabled={paperCount.length == 1 && i == 0}