From 5353df895896b0e7a9a6d4672ecff3d97345674b Mon Sep 17 00:00:00 2001
From: Daniel <danthevip@gmail.com>
Date: Wed, 25 Oct 2023 19:24:17 +0300
Subject: [PATCH] Fixed popup placement, size and scaling

---
 .../dashboard/board/infolists/Content.svelte  | 13 -------
 .../dashboard/board/infolists/Expenses.svelte | 35 +++++++++----------
 .../dashboard/board/infolists/Incomes.svelte  | 35 +++++++++----------
 .../infolists/contents/ContentExpense.svelte  | 33 +++++++++++++++++
 .../infolists/contents/ContentIncome.svelte   | 33 +++++++++++++++++
 .../ExpensePopup.svelte}                      |  0
 .../board/infolists/popups/IncomePopup.svelte |  5 +++
 7 files changed, 104 insertions(+), 50 deletions(-)
 delete mode 100644 src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/infolists/Content.svelte
 create mode 100644 src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/infolists/contents/ContentExpense.svelte
 create mode 100644 src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/infolists/contents/ContentIncome.svelte
 rename src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/infolists/{Popup.svelte => popups/ExpensePopup.svelte} (100%)
 create mode 100644 src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/infolists/popups/IncomePopup.svelte

diff --git a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/infolists/Content.svelte b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/infolists/Content.svelte
deleted file mode 100644
index 67a053f..0000000
--- a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/infolists/Content.svelte
+++ /dev/null
@@ -1,13 +0,0 @@
-<script>
-    import { getContext } from 'svelte';
-    import Popup from './Popup.svelte';
-    const { open } = getContext('simple-modal');
-    const showSurprise = () => open(Popup, { message: "It's aff modal!" });
-</script>
-
-<div id="logout" role="button"
-     tabindex="0"
-     on:click={showSurprise}
-     on:keydown={() => console.log("keydown")}>
-    Log out
-</div>
\ No newline at end of file
diff --git a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/infolists/Expenses.svelte b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/infolists/Expenses.svelte
index 85bf9e5..238b2d7 100644
--- a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/infolists/Expenses.svelte
+++ b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/infolists/Expenses.svelte
@@ -1,13 +1,14 @@
 <script>
+    import Modal from 'svelte-simple-modal';
+    import Content from "./contents/ContentExpense.svelte";
+
     import { onMount, afterUpdate } from 'svelte';
     import axios from 'axios';
     import { getCookie } from "svelte-cookie";
 
-    import Modal from 'svelte-simple-modal';
-    import Content from "./Content.svelte";
-
     let data = [];
     let parentHeight;
+    let listParentHeight;
 
     onMount(async () => {
         const token = getCookie('access_token');
@@ -29,16 +30,16 @@
 
     afterUpdate(() => {
         parentHeight = document.querySelector('#expenseInfo').offsetHeight;
+        listParentHeight = document.querySelector('#expenseList').offsetHeight;
     });
 </script>
 
 <div id="expenseInfo" style="max-height: {parentHeight}px;">
-    <div id="options">
-        <h2>Incomes</h2>
+    <div id="modal">
         <Modal><Content /></Modal>
     </div>
 
-    <div id="expenseList">
+    <div id="expenseList" style="max-height: {listParentHeight}px;">
         <ul>
             {#each data as item}
                 <li>
@@ -51,29 +52,25 @@
     </div>
 </div>
 
-<style>
 
+<style>
     #expenseInfo {
-        flex: 1;
-        border-radius: 10px;
-        margin: 10px;
-        overflow-y: auto;
-        max-height: 100%;
+        display: flex;
+        flex-direction: column;
     }
 
-    #options {
+    #modal {
         position: sticky;
-        top: 0;
-        background-color: #f2f2f2;
-        padding: 0 0 10px;
-        margin: 0;
-        border-radius: 10px 10px 0 0;
-        z-index: 1;
     }
 
     #expenseList {
         margin-top: 10px;
         scrollbar-width: none;
+        flex: 1;
+        border-radius: 10px;
+        margin: 10px;
+        overflow-y: auto;
+        max-height: 100%;
     }
 
     #expenseList::-webkit-scrollbar {
diff --git a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/infolists/Incomes.svelte b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/infolists/Incomes.svelte
index ea78a80..ff8ba77 100644
--- a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/infolists/Incomes.svelte
+++ b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/infolists/Incomes.svelte
@@ -1,5 +1,5 @@
 <script>
-    import Content from './Content.svelte';
+    import Content from './contents/ContentIncome.svelte';
     import Modal from 'svelte-simple-modal';
 
     import { onMount, afterUpdate } from 'svelte';
@@ -8,6 +8,7 @@
 
     let data = [];
     let parentHeight;
+    let listParentHeight;
 
     onMount(async () => {
         const token = getCookie('access_token');
@@ -29,17 +30,16 @@
 
     afterUpdate(() => {
         parentHeight = document.querySelector('#incomeInfo').offsetHeight;
+        listParentHeight = document.querySelector('#expenseList').offsetHeight;
     });
 </script>
 
 <div id="incomeInfo" style="max-height: {parentHeight}px;">
-    <div id="incomeOptions">
-        <h2>Incomes</h2>
+    <div id="modal">
         <Modal><Content /></Modal>
     </div>
 
-
-    <div id="incomeList">
+    <div id="incomeList" style="max-height: {listParentHeight}px;">
         <ul>
             {#each data as item}
                 <li>
@@ -53,18 +53,18 @@
 </div>
 
 <style>
-    #incomeOptions {
-
-        top: 0;
-        background-color: #f2f2f2;
-        padding: 10px;
-        border-radius: 10px 10px 0 0;
-        z-index: 1;
-        padding: 0 0 10px;
-        margin: 0;
+    #modal {
+        position: sticky;
     }
 
     #incomeInfo {
+        display: flex;
+        flex-direction: column;
+    }
+
+    #incomeList {
+        margin-top: 10px;
+        scrollbar-width: none;
         flex: 1;
         border-radius: 10px;
         margin: 10px;
@@ -72,10 +72,6 @@
         max-height: 100%;
     }
 
-    #incomeList {
-        margin-top: 10px;
-    }
-
     ul {
         list-style: none;
         padding: 0;
@@ -94,4 +90,7 @@
         box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
     }
 
+    #incomeList::-webkit-scrollbar {
+        display: none;
+    }
 </style>
diff --git a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/infolists/contents/ContentExpense.svelte b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/infolists/contents/ContentExpense.svelte
new file mode 100644
index 0000000..84c5761
--- /dev/null
+++ b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/infolists/contents/ContentExpense.svelte
@@ -0,0 +1,33 @@
+<script>
+    import { getContext } from 'svelte';
+    import Popup from '../popups/IncomePopup.svelte';
+    const { open } = getContext('simple-modal');
+    const showSurprise = () => open(Popup, { message: "It's EXOENSE!" });
+</script>
+
+<div id="exp">
+    <h2>Expenses</h2>
+    <div id="openModal" role="button"
+         tabindex="0"
+         on:click={showSurprise}
+         on:keydown={() => console.log("keydown")}>
+        Log out
+    </div>
+</div>
+
+<style>
+    #exp {
+        position: sticky;
+    }
+
+    #openModal {
+        top: 0;
+        position: sticky;
+        background-color: #f2f2f2;
+        padding: 10px;
+        border-radius: 10px 10px 0 0;
+        z-index: 1;
+        padding: 0 0 10px;
+        margin: 0;
+    }
+</style>
\ No newline at end of file
diff --git a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/infolists/contents/ContentIncome.svelte b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/infolists/contents/ContentIncome.svelte
new file mode 100644
index 0000000..cb26afc
--- /dev/null
+++ b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/infolists/contents/ContentIncome.svelte
@@ -0,0 +1,33 @@
+<script>
+    import { getContext } from 'svelte';
+    import Popup from '../popups/IncomePopup.svelte';
+    const { open } = getContext('simple-modal');
+    const showSurprise = () => open(Popup, { message: "It's aINCOME!" });
+</script>
+
+<div id="inc">
+    <h2>Incomes</h2>
+    <div id="openModal" role="button"
+         tabindex="0"
+         on:click={showSurprise}
+         on:keydown={() => console.log("keydown")}>
+        Log out
+    </div>
+</div>
+
+<style>
+    #inc {
+        position: sticky;
+    }
+
+    #openModal {
+        top: 0;
+        position: sticky;
+        background-color: #f2f2f2;
+        padding: 10px;
+        border-radius: 10px 10px 0 0;
+        z-index: 1;
+        padding: 0 0 10px;
+        margin: 0;
+    }
+</style>
\ No newline at end of file
diff --git a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/infolists/Popup.svelte b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/infolists/popups/ExpensePopup.svelte
similarity index 100%
rename from src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/infolists/Popup.svelte
rename to src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/infolists/popups/ExpensePopup.svelte
diff --git a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/infolists/popups/IncomePopup.svelte b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/infolists/popups/IncomePopup.svelte
new file mode 100644
index 0000000..e13aeb4
--- /dev/null
+++ b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/infolists/popups/IncomePopup.svelte
@@ -0,0 +1,5 @@
+<script>
+    export let message = 'Hi';
+</script>
+
+<p>🎉 {message} 🍾</p>
\ No newline at end of file