Merge pull request #124 from Kerosene-Labs/build-expenses

fixing layout bug on mobile, switching layout of cards.
Kerosene-Labs · Dec 26, 2024 · 5da0e27 · 5da0e27
2 parents cfb03fb + 039c8d4
commit 5da0e27
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 25 deletions.
diff --git a/src/main/svelte/src/app.css b/src/main/svelte/src/app.css
@@ -3,11 +3,11 @@
 @import 'tailwindcss/utilities';
 
 h1 {
-    @apply text-neutral-100 font-black text-4xl;
+    @apply text-neutral-100 font-black text-3xl xl:text-4xl;
 }
 
 h2 {
-    @apply text-neutral-100 font-black text-3xl;
+    @apply text-neutral-100 font-black text-2xl xl:text-3xl;
 }
 
 p.subtitle {

diff --git a/src/main/svelte/src/lib/components/BaseLayout.svelte b/src/main/svelte/src/lib/components/BaseLayout.svelte
@@ -2,8 +2,8 @@
     export let justifyCenter: boolean = true;
 </script>
 
-<div class="flex flex-col items-center min-h-full" class:justify-center={justifyCenter}>
-    <div class="flex flex-col  p-8 min-h-full gap-6 xl:w-[50rem] xl:max-w-[50rem]">
+<div class="flex flex-col items-center min-h-full max-w-screen" class:justify-center={justifyCenter}>
+    <div class="flex flex-col  p-8 min-h-full gap-6 w-screen max-w-screen xl:w-[50rem] xl:max-w-[50rem]">
         <slot></slot>
     </div>
 </div>
diff --git a/src/main/svelte/src/lib/components/BaseNavLayout.svelte b/src/main/svelte/src/lib/components/BaseNavLayout.svelte
@@ -3,8 +3,8 @@
 </script>
 
 <Nav>
-    <div class="flex flex-col items-center min-h-full">
-        <div class="flex flex-col p-8 min-h-full min-w-[50rem] gap-6">
+    <div class="flex flex-col items-center min-h-full max-w-screen">
+        <div class="flex flex-col p-8 min-h-full w-screen max-w-screen xl:min-w-[50rem] xl:w-[50rem] gap-6 overflow-x-clip">
             <slot></slot>
         </div>
     </div>

diff --git a/src/main/svelte/src/lib/components/expenses/ExpenseEventTable.svelte b/src/main/svelte/src/lib/components/expenses/ExpenseEventTable.svelte
@@ -21,35 +21,39 @@
     })
 </script>
 
-<div class="rounded-2xl bg-neutral-800 flex flex-col text-center overflow-clip max-h-[20rem]">
+<div class="rounded-2xl bg-neutral-800 flex flex-col text-center overflow-clip max-h-[20rem] overflow-y-auto">
     {#if expenses === undefined}
         <!--Loading Spinner-->
         <div class="flex w-full justify-center p-6">
             <Spinner></Spinner>
         </div>
-    {:else if expenses !== undefined && expenses.length == 0}
+    {:else if expenses !== undefined && expenses.length === 0}
         <div class="flex p-8 items-center justify-center flex-col gap-2">
             <p class="font-mono font-black text-2xl text-neutral-300">🦗...crickets</p>
             <p class="text-neutral-100 font-semibold">There's no expenses here.</p>
         </div>
     {:else}
         <!-- Header -->
-        <div class="grid grid-cols-4 font-mono font-bold text-sm rounded-t-2xl bg-neutral-900/80 p-4 text-neutral-400">
-            <span>Amount</span>
-            <span>Occurred On</span>
-            <span>Description</span>
-            <span>Type</span>
-        </div>
-        <!--Content-->
-        <div class="flex flex-col font-semibold text-white overflow-y-auto">
-            {#each expenses as expense}
-                <div class="grid grid-cols-4 items-center hover:bg-neutral-700/10 active:bg-neutral-700/20 p-4 transition-colors border-b border-b-neutral-700/50">
-                    <span>${expense.amount}</span>
-                    <span>{expense.date.toDateString()}</span>
-                    <span>{expense.description}</span>
-                    <span class="bg-neutral-900/50 p-2 rounded-xl font-mono text-neutral-300 text-sm">One-off</span>
+        <div class="overflow-y-scroll">
+            <div class="min-w-[30rem]">
+                <div class="grid grid-cols-4 font-mono font-bold text-sm rounded-t-2xl bg-neutral-900/80 p-4 text-neutral-400 text-nowrap">
+                    <span>Amount</span>
+                    <span>Occurred On</span>
+                    <span>Description</span>
+                    <span>Type</span>
+                </div>
+                <!--Content-->
+                <div class="flex flex-col font-semibold text-white overflow-y-auto">
+                    {#each expenses as expense}
+                        <div class="grid grid-cols-4 items-center hover:bg-neutral-700/10 active:bg-neutral-700/20 p-4 transition-colors border-b border-b-neutral-700/50">
+                            <span>${expense.amount}</span>
+                            <span>{expense.date.toDateString()}</span>
+                            <span>{expense.description}</span>
+                            <span class="bg-neutral-900/50 p-2 rounded-xl font-mono text-neutral-300 text-sm">One-off</span>
+                        </div>
+                    {/each}
                 </div>
-            {/each}
+            </div>
         </div>
     {/if}
 </div>
diff --git a/src/main/svelte/src/routes/app/expenses/+page.svelte b/src/main/svelte/src/routes/app/expenses/+page.svelte
@@ -5,11 +5,14 @@
     import ExpenseEventTable from "$lib/components/expenses/ExpenseEventTable.svelte";
 </script>
 
-<Card title="Expenses" subtitle="Things that consume your money.">
+<Card title="Expenses"
+      subtitle="For example, an expense could be your mortage payment, a power bill, or dinner with a friend.">
     <div class="flex flex-col gap-4">
         <div class="flex ml-auto text-nowrap">
             <Button on:click={() => {goto("/app/expenses/add")}}>Add Expense</Button>
         </div>
-        <ExpenseEventTable></ExpenseEventTable>
     </div>
+</Card>
+<Card title="Your Expenses">
+    <ExpenseEventTable></ExpenseEventTable>
 </Card>