From 65424a25875bfe9e3b21ca03db15eec4546b89e0 Mon Sep 17 00:00:00 2001
From: Jan Bader <jan@javil.eu>
Date: Tue, 19 Apr 2022 20:46:58 +0000
Subject: [PATCH 1/5] Extract MainMenu component

---
 web/src/App.vue                 | 64 ++-------------------------------
 web/src/components/MainMenu.vue | 42 ++++++++++++++++++++++
 web/src/pages/BudgetSidebar.vue |  2 +-
 3 files changed, 46 insertions(+), 62 deletions(-)
 create mode 100644 web/src/components/MainMenu.vue

diff --git a/web/src/App.vue b/web/src/App.vue
index f3916f2..086b65e 100644
--- a/web/src/App.vue
+++ b/web/src/App.vue
@@ -1,28 +1,5 @@
-<script lang="ts">
-import { mapState } from "pinia";
-import { defineComponent } from "vue";
-import { useBudgetsStore } from "./stores/budget";
-import { useSessionStore } from "./stores/session";
-import { useSettingsStore } from "./stores/settings";
-
-export default defineComponent({
-    computed: {
-        ...mapState(useBudgetsStore, ["CurrentBudgetName"]),
-        ...mapState(useSessionStore, ["LoggedIn"]),
-    },
-    methods: {
-        logout() {
-            useSessionStore().logout();
-            this.$router.push("/login");
-        },
-        toggleMenu() {
-            useSettingsStore().toggleMenu();
-        },
-        toggleMenuSize() {
-            useSettingsStore().toggleMenuSize();
-        }
-    },
-})
+<script lang="ts" setup>
+import MainMenu from "./components/MainMenu.vue";
 </script>
 
 <template>
@@ -30,42 +7,7 @@ export default defineComponent({
     <router-view name="sidebar" />
 
     <div class="flex-1 overflow-auto">
-      <div
-        class="flex bg-gray-400 dark:bg-gray-600 p-4 fixed md:static top-0 left-0 w-full h-14"
-      >
-        <span
-          class="flex-1 font-bold text-5xl -my-3 hidden md:inline"
-          @click="toggleMenuSize"
-        >≡</span>
-        <span
-          class="flex-1 font-bold text-5xl -my-3 md:hidden"
-          @click="toggleMenu"
-        >≡</span>
-
-        <span class="flex-1">{{ CurrentBudgetName }}</span>
-
-        <div class="flex flex-1 flex-row justify-end -mx-4">
-          <router-link
-            v-if="LoggedIn"
-            class="mx-4"
-            to="/dashboard"
-          >
-            Dashboard
-          </router-link>
-          <router-link
-            v-if="!LoggedIn"
-            class="mx-4"
-            to="/login"
-          >
-            Login
-          </router-link>
-          <a
-            v-if="LoggedIn"
-            class="mx-4"
-            @click="logout"
-          >Logout</a>
-        </div>
-      </div>
+      <MainMenu />
 
       <div class="p-3 pl-6">
         <router-view />
diff --git a/web/src/components/MainMenu.vue b/web/src/components/MainMenu.vue
new file mode 100644
index 0000000..343b3ee
--- /dev/null
+++ b/web/src/components/MainMenu.vue
@@ -0,0 +1,42 @@
+<script lang="ts" setup>
+import { computed } from "vue";
+import { useRouter } from "vue-router";
+import { useBudgetsStore } from "../stores/budget";
+import { useSessionStore } from "../stores/session";
+import { useSettingsStore } from "../stores/settings";
+
+const router = useRouter();
+
+const CurrentBudgetName = computed(() => useBudgetsStore().CurrentBudgetName);
+const LoggedIn = computed(() => useSessionStore().LoggedIn);
+function logout() {
+    useSessionStore().logout();
+    router.push("/login");
+}
+
+function toggleMenu() {
+    useSettingsStore().toggleMenu();
+}
+function toggleMenuSize() {
+    useSettingsStore().toggleMenuSize();
+}
+</script>
+
+<template>
+    <div class="flex bg-gray-400 dark:bg-gray-600 p-4 static top-0 left-0 w-full h-14">
+        <span class="flex-1 font-bold text-5xl -my-3 hidden md:inline" @click="toggleMenuSize">≡</span>
+        <span class="flex-1 font-bold text-5xl -my-3 md:hidden" @click="toggleMenu">≡</span>
+
+        <span class="flex-1">{{ CurrentBudgetName }}</span>
+
+        <div class="flex flex-1 flex-row justify-end -mx-4">
+            <router-link v-if="LoggedIn" class="mx-4" to="/dashboard">
+                Dashboard
+            </router-link>
+            <router-link v-if="!LoggedIn" class="mx-4" to="/login">
+                Login
+            </router-link>
+            <a v-if="LoggedIn" class="mx-4" @click="logout">Logout</a>
+        </div>
+    </div>
+</template>
diff --git a/web/src/pages/BudgetSidebar.vue b/web/src/pages/BudgetSidebar.vue
index 37d85c3..571b582 100644
--- a/web/src/pages/BudgetSidebar.vue
+++ b/web/src/pages/BudgetSidebar.vue
@@ -26,7 +26,7 @@ const OffBudgetAccountsBalance = computed(() => accountStore.OffBudgetAccountsBa
     :class="[ExpandMenu ? 'md:w-72' : 'md:w-36', ShowMenu ? '' : 'hidden']"
     class="md:block flex-shrink-0 w-full bg-gray-500 border-r-4 border-black"
   >
-    <div class="flex flex-col mt-14 md:mt-0">
+    <div class="flex flex-col">
       <span
         class="m-2 p-1 px-3 h-10 overflow-hidden"
         :class="[ExpandMenu ? 'text-2xl' : 'text-md']"

From 5c5429ab05c17569e255470b31f6ef37b4ad93a8 Mon Sep 17 00:00:00 2001
From: Jan Bader <jan@javil.eu>
Date: Tue, 19 Apr 2022 20:59:18 +0000
Subject: [PATCH 2/5] Fix Header overlapping content mobile

---
 web/src/pages/BudgetSidebar.vue | 59 +++++++++++----------------------
 1 file changed, 19 insertions(+), 40 deletions(-)

diff --git a/web/src/pages/BudgetSidebar.vue b/web/src/pages/BudgetSidebar.vue
index 571b582..2301bf6 100644
--- a/web/src/pages/BudgetSidebar.vue
+++ b/web/src/pages/BudgetSidebar.vue
@@ -19,24 +19,23 @@ const OnBudgetAccounts = computed(() => accountStore.OnBudgetAccounts);
 const OffBudgetAccounts = computed(() => accountStore.OffBudgetAccounts);
 const OnBudgetAccountsBalance = computed(() => accountStore.OnBudgetAccountsBalance);
 const OffBudgetAccountsBalance = computed(() => accountStore.OffBudgetAccountsBalance);
+
+function toggleMenu() {
+  useSettingsStore().toggleMenu();
+}
 </script>
 
 <template>
-  <div
-    :class="[ExpandMenu ? 'md:w-72' : 'md:w-36', ShowMenu ? '' : 'hidden']"
-    class="md:block flex-shrink-0 w-full bg-gray-500 border-r-4 border-black"
-  >
+  <div :class="[ExpandMenu ? 'md:w-72' : 'md:w-36', ShowMenu ? '' : 'hidden']"
+    class="md:block flex-shrink-0 w-full bg-gray-500 border-r-4 border-black">
     <div class="flex flex-col">
-      <span
-        class="m-2 p-1 px-3 h-10 overflow-hidden"
-        :class="[ExpandMenu ? 'text-2xl' : 'text-md']"
-      >
-        <router-link
-          to="/dashboard"
-          style="font-size: 150%"
-        >⌂</router-link>
-        {{ CurrentBudgetName }}
-      </span>
+      <div class="m-2 md:px-3 p-1">
+        <span class="font-bold-my-3 md:hidden font-bold text-5xl pr-3" @click="toggleMenu">≡</span>
+        <span class="h-10 overflow-hidden" :class="[ExpandMenu ? 'text-2xl' : 'text-md']">
+          <router-link to="/dashboard" class="text-5xl">⌂</router-link>
+          {{ CurrentBudgetName }}
+        </span>
+      </div>
       <span class="bg-gray-100 dark:bg-gray-700 p-2 px-3 flex flex-col">
         <router-link :to="'/budget/' + CurrentBudgetID + '/budgeting'">Budget</router-link>
         <br>
@@ -46,41 +45,21 @@ const OffBudgetAccountsBalance = computed(() => accountStore.OffBudgetAccountsBa
       <li class="bg-slate-200 dark:bg-slate-700 my-2 p-2 px-3">
         <div class="flex flex-row justify-between font-bold">
           <span>On-Budget Accounts</span>
-          <Currency
-            :class="ExpandMenu ? 'md:inline' : 'md:hidden'"
-            :value="OnBudgetAccountsBalance"
-          />
+          <Currency :class="ExpandMenu ? 'md:inline' : 'md:hidden'" :value="OnBudgetAccountsBalance" />
         </div>
-        <div
-          v-for="account in OnBudgetAccounts"
-          :key="account.ID"
-          class="flex flex-row justify-between"
-        >
+        <div v-for="account in OnBudgetAccounts" :key="account.ID" class="flex flex-row justify-between">
           <AccountWithReconciled :account="account" />
-          <Currency
-            :class="ExpandMenu ? 'md:inline' : 'md:hidden'"
-            :value="account.ClearedBalance"
-          />
+          <Currency :class="ExpandMenu ? 'md:inline' : 'md:hidden'" :value="account.ClearedBalance" />
         </div>
       </li>
       <li class="bg-slate-200 dark:bg-slate-700 my-2 p-2 px-3">
         <div class="flex flex-row justify-between font-bold">
           <span>Off-Budget Accounts</span>
-          <Currency
-            :class="ExpandMenu ? 'md:inline' : 'md:hidden'"
-            :value="OffBudgetAccountsBalance"
-          />
+          <Currency :class="ExpandMenu ? 'md:inline' : 'md:hidden'" :value="OffBudgetAccountsBalance" />
         </div>
-        <div
-          v-for="account in OffBudgetAccounts"
-          :key="account.ID"
-          class="flex flex-row justify-between"
-        >
+        <div v-for="account in OffBudgetAccounts" :key="account.ID" class="flex flex-row justify-between">
           <AccountWithReconciled :account="account" />
-          <Currency
-            :class="ExpandMenu ? 'md:inline' : 'md:hidden'"
-            :value="account.ClearedBalance"
-          />
+          <Currency :class="ExpandMenu ? 'md:inline' : 'md:hidden'" :value="account.ClearedBalance" />
         </div>
       </li>
       <!--

From ff06693f60ead3e456f64977e59d7590258994b8 Mon Sep 17 00:00:00 2001
From: Jan Bader <jan@javil.eu>
Date: Tue, 19 Apr 2022 21:02:05 +0000
Subject: [PATCH 3/5] Hide menu on navigation on mobile

---
 web/src/components/MainMenu.vue | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/web/src/components/MainMenu.vue b/web/src/components/MainMenu.vue
index 343b3ee..49dc2ee 100644
--- a/web/src/components/MainMenu.vue
+++ b/web/src/components/MainMenu.vue
@@ -20,6 +20,10 @@ function toggleMenu() {
 function toggleMenuSize() {
     useSettingsStore().toggleMenuSize();
 }
+
+router.afterEach(function(to, from) {
+    useSettingsStore().Menu.Show = false;
+})
 </script>
 
 <template>

From e4df2f0de51f33b1728e545122f28da89f625342 Mon Sep 17 00:00:00 2001
From: Jan Bader <jan@javil.eu>
Date: Tue, 19 Apr 2022 21:13:52 +0000
Subject: [PATCH 4/5] Improve layout of new transaction on mobile

---
 web/src/components/Autocomplete.vue        | 2 +-
 web/src/components/Modal.vue               | 2 +-
 web/src/components/TransactionInputRow.vue | 3 ++-
 web/src/pages/Account.vue                  | 2 +-
 4 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/web/src/components/Autocomplete.vue b/web/src/components/Autocomplete.vue
index 0c68a6c..de06c09 100644
--- a/web/src/components/Autocomplete.vue
+++ b/web/src/components/Autocomplete.vue
@@ -86,7 +86,7 @@ function clear() {
       v-if="id == undefined"
       v-model="SearchQuery"
       type="text"
-      class="border-b-2 border-black"
+      class="border-b-2 border-black block w-full border-b-2 border-black"
       @keypress="keypress"
     />
     <span
diff --git a/web/src/components/Modal.vue b/web/src/components/Modal.vue
index 63652af..ab01010 100644
--- a/web/src/components/Modal.vue
+++ b/web/src/components/Modal.vue
@@ -48,7 +48,7 @@ function submitDialog() {
     class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full"
   >
     <div
-      class="relative top-20 mx-auto p-5 w-96 shadow-lg rounded-md bg-white dark:bg-black"
+      class="relative md:top-20 md:mx-auto p-5 md:w-96 shadow-lg md:h-auto h-full rounded-md bg-white dark:bg-black"
     >
       <div class="mt-3 text-center">
         <h3
diff --git a/web/src/components/TransactionInputRow.vue b/web/src/components/TransactionInputRow.vue
index 4704fff..6bcfaf4 100644
--- a/web/src/components/TransactionInputRow.vue
+++ b/web/src/components/TransactionInputRow.vue
@@ -63,7 +63,7 @@ defineExpose({Save});
     <td class="text-sm">
       <DateInput
         v-model="TX.Date"
-        class="border-b-2 border-black"
+        class="block w-full border-b-2 border-black"
       />
     </td>
     <label class="md:hidden">Payee</label>
@@ -83,6 +83,7 @@ defineExpose({Save});
         model="categories"
       />
     </td>
+    <label class="md:hidden">Memo</label>
     <td class="col-span-2">
       <Input
         v-model="TX.Memo"
diff --git a/web/src/pages/Account.vue b/web/src/pages/Account.vue
index d5ea4fe..db4fad3 100644
--- a/web/src/pages/Account.vue
+++ b/web/src/pages/Account.vue
@@ -162,7 +162,7 @@ function createReconcilationTransaction() {
       </template>
       <TransactionInputRow
         ref="modalInputRow"
-        class="grid grid-cols-2"
+        class="flex flex-col w-full h-full top-0"
         :budgetid="budgetid"
         :accountid="accountid"
       />

From 6702a775fbdd7cbf2ac3cec6947808aa9cad2820 Mon Sep 17 00:00:00 2001
From: Jan Bader <jan@javil.eu>
Date: Tue, 19 Apr 2022 21:17:53 +0000
Subject: [PATCH 5/5] Prevent wrapping in accounts names

---
 web/src/pages/BudgetSidebar.vue | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/web/src/pages/BudgetSidebar.vue b/web/src/pages/BudgetSidebar.vue
index 2301bf6..d4da1c8 100644
--- a/web/src/pages/BudgetSidebar.vue
+++ b/web/src/pages/BudgetSidebar.vue
@@ -45,21 +45,21 @@ function toggleMenu() {
       <li class="bg-slate-200 dark:bg-slate-700 my-2 p-2 px-3">
         <div class="flex flex-row justify-between font-bold">
           <span>On-Budget Accounts</span>
-          <Currency :class="ExpandMenu ? 'md:inline' : 'md:hidden'" :value="OnBudgetAccountsBalance" />
+          <Currency :class="ExpandMenu ? 'md:inline' : 'md:hidden'" class="whitespace-nowrap" :value="OnBudgetAccountsBalance" />
         </div>
         <div v-for="account in OnBudgetAccounts" :key="account.ID" class="flex flex-row justify-between">
-          <AccountWithReconciled :account="account" />
-          <Currency :class="ExpandMenu ? 'md:inline' : 'md:hidden'" :value="account.ClearedBalance" />
+          <AccountWithReconciled class="whitespace-nowrap overflow-hidden mr-4" :account="account" />
+          <Currency :class="ExpandMenu ? 'md:inline' : 'md:hidden'" class="whitespace-nowrap" :value="account.ClearedBalance" />
         </div>
       </li>
       <li class="bg-slate-200 dark:bg-slate-700 my-2 p-2 px-3">
         <div class="flex flex-row justify-between font-bold">
           <span>Off-Budget Accounts</span>
-          <Currency :class="ExpandMenu ? 'md:inline' : 'md:hidden'" :value="OffBudgetAccountsBalance" />
+          <Currency :class="ExpandMenu ? 'md:inline' : 'md:hidden'" class="whitespace-nowrap" :value="OffBudgetAccountsBalance" />
         </div>
         <div v-for="account in OffBudgetAccounts" :key="account.ID" class="flex flex-row justify-between">
-          <AccountWithReconciled :account="account" />
-          <Currency :class="ExpandMenu ? 'md:inline' : 'md:hidden'" :value="account.ClearedBalance" />
+          <AccountWithReconciled class="whitespace-nowrap overflow-hidden mr-4" :account="account" />
+          <Currency :class="ExpandMenu ? 'md:inline' : 'md:hidden'" class="whitespace-nowrap" :value="account.ClearedBalance" />
         </div>
       </li>
       <!--