From c86d76285eba655502af06a308bd597cabc0e5ab Mon Sep 17 00:00:00 2001
From: Daniel <danthevip@gmail.com>
Date: Wed, 25 Oct 2023 02:13:22 +0300
Subject: [PATCH] Attempt to hide scrollbar

---
 .../routes/dashboard/board/Expenses.svelte    | 47 ++++++++++++++-----
 .../src/routes/dashboard/board/Incomes.svelte | 43 ++++++++++++-----
 2 files changed, 68 insertions(+), 22 deletions(-)

diff --git a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/Expenses.svelte b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/Expenses.svelte
index 3a2390f..ca5dcc3 100644
--- a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/Expenses.svelte
+++ b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/Expenses.svelte
@@ -30,19 +30,26 @@
 </script>
 
 <div id="expenseInfo" style="max-height: {parentHeight}px;">
-    <h2>Expenses</h2>
-    <ul>
-        {#each data as item}
-            <li>
-                {item.incomeCategory ? `${item.incomeCategory.name}: ` : `${item.expenseCategory.name}: `}
-                {item.incomeCategory ? `+${item.amount}$` : `-${item.amount}$`}
-                {`${item.date}`}
-            </li>
-        {/each}
-    </ul>
+    <h2 id="text">Expenses</h2>
+    <div id="expenseList">
+        <ul>
+            {#each data as item}
+                <li>
+                    {item.incomeCategory ? `${item.incomeCategory.name}: ` : `${item.expenseCategory.name}: `}
+                    {item.incomeCategory ? `+${item.amount}$` : `-${item.amount}$`}
+                    {`${item.date}`}
+                </li>
+            {/each}
+        </ul>
+    </div>
 </div>
 
 <style>
+    #text {
+        padding: 0 0 10px;
+        margin: 0;
+    }
+
     #expenseInfo {
         flex: 1;
         border-radius: 10px;
@@ -51,6 +58,24 @@
         max-height: 100%;
     }
 
+    h2 {
+        position: sticky;
+        top: 0;
+        background-color: #f2f2f2;
+        padding: 10px;
+        border-radius: 10px 10px 0 0;
+        z-index: 1;
+    }
+
+    #expenseList {
+        margin-top: 10px;
+        scrollbar-width: none;
+    }
+
+    #expenseList::-webkit-scrollbar {
+        display: none;
+    }
+
     ul {
         list-style: none;
         padding: 0;
@@ -68,4 +93,4 @@
     li:hover {
         box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
     }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/Incomes.svelte b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/Incomes.svelte
index 018a098..9f1d7f6 100644
--- a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/Incomes.svelte
+++ b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/Incomes.svelte
@@ -30,19 +30,26 @@
 </script>
 
 <div id="incomeInfo" style="max-height: {parentHeight}px;">
-    <h2>Incomes</h2>
-    <ul>
-        {#each data as item}
-            <li>
-                {item.incomeCategory ? `${item.incomeCategory.name}: ` : `${item.expenseCategory.name}: `}
-                {item.incomeCategory ? `+${item.amount}$` : `-${item.amount}$`}
-                {`${item.date}`}
-            </li>
-        {/each}
-    </ul>
+    <h2 id="text">Incomes</h2>
+    <div id="incomeList">
+        <ul>
+            {#each data as item}
+                <li>
+                    {item.incomeCategory ? `${item.incomeCategory.name}: ` : `${item.expenseCategory.name}: `}
+                    {item.incomeCategory ? `+${item.amount}$` : `-${item.amount}$`}
+                    {`${item.date}`}
+                </li>
+            {/each}
+        </ul>
+    </div>
 </div>
 
 <style>
+    #text {
+        padding: 0 0 10px;
+        margin: 0;
+    }
+
     #incomeInfo {
         flex: 1;
         border-radius: 10px;
@@ -51,6 +58,19 @@
         max-height: 100%;
     }
 
+    h2 {
+        position: sticky;
+        top: 0;
+        background-color: #f2f2f2;
+        padding: 10px;
+        border-radius: 10px 10px 0 0;
+        z-index: 1;
+    }
+
+    #incomeList {
+        margin-top: 10px;
+    }
+
     ul {
         list-style: none;
         padding: 0;
@@ -68,4 +88,5 @@
     li:hover {
         box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
     }
-</style>
\ No newline at end of file
+
+</style>