Merge pull request 'Small layout fixes' (#52) from layout-fixes into master

Reviewed-on: #52

web/src/App.vue

@@ -1,28 +1,5 @@
-<script lang="ts">
+<script lang="ts" setup>
-import { mapState } from "pinia";
+import MainMenu from "./components/MainMenu.vue";
-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>
 
 <template>
@@ -30,42 +7,7 @@ export default defineComponent({
     <router-view name="sidebar" />
 
     <div class="flex-1 overflow-auto">
-      <div
+      <MainMenu />
-        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>
 
       <div class="p-3 pl-6">
         <router-view />

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

web/src/components/MainMenu.vue

@@ -0,0 +1,46 @@
+<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();
+}
+
+router.afterEach(function(to, from) {
+    useSettingsStore().Menu.Show = false;
+})
+</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>

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

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"

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"
       />

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
+  <div :class="[ExpandMenu ? 'md:w-72' : 'md:w-36', ShowMenu ? '' : 'hidden']"
-    :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">
-    class="md:block flex-shrink-0 w-full bg-gray-500 border-r-4 border-black"
+    <div class="flex flex-col">
-  >
+      <div class="m-2 md:px-3 p-1">
-    <div class="flex flex-col mt-14 md:mt-0">
+        <span class="font-bold-my-3 md:hidden font-bold text-5xl pr-3" @click="toggleMenu">≡</span>
-      <span
+        <span class="h-10 overflow-hidden" :class="[ExpandMenu ? 'text-2xl' : 'text-md']">
-        class="m-2 p-1 px-3 h-10 overflow-hidden"
+          <router-link to="/dashboard" class="text-5xl">⌂</router-link>
-        :class="[ExpandMenu ? 'text-2xl' : 'text-md']"
-      >
-        <router-link
-          to="/dashboard"
-          style="font-size: 150%"
-        >⌂</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
+          <Currency :class="ExpandMenu ? 'md:inline' : 'md:hidden'" class="whitespace-nowrap" :value="OnBudgetAccountsBalance" />
-            :class="ExpandMenu ? 'md:inline' : 'md:hidden'"
-            :value="OnBudgetAccountsBalance"
-          />
         </div>
-        <div
+        <div v-for="account in OnBudgetAccounts" :key="account.ID" class="flex flex-row justify-between">
-          v-for="account in OnBudgetAccounts"
+          <AccountWithReconciled class="whitespace-nowrap overflow-hidden mr-4" :account="account" />
-          :key="account.ID"
+          <Currency :class="ExpandMenu ? 'md:inline' : 'md:hidden'" class="whitespace-nowrap" :value="account.ClearedBalance" />
-          class="flex flex-row justify-between"
-        >
-          <AccountWithReconciled :account="account" />
-          <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
+          <Currency :class="ExpandMenu ? 'md:inline' : 'md:hidden'" class="whitespace-nowrap" :value="OffBudgetAccountsBalance" />
-            :class="ExpandMenu ? 'md:inline' : 'md:hidden'"
-            :value="OffBudgetAccountsBalance"
-          />
         </div>
-        <div
+        <div v-for="account in OffBudgetAccounts" :key="account.ID" class="flex flex-row justify-between">
-          v-for="account in OffBudgetAccounts"
+          <AccountWithReconciled class="whitespace-nowrap overflow-hidden mr-4" :account="account" />
-          :key="account.ID"
+          <Currency :class="ExpandMenu ? 'md:inline' : 'md:hidden'" class="whitespace-nowrap" :value="account.ClearedBalance" />
-          class="flex flex-row justify-between"
-        >
-          <AccountWithReconciled :account="account" />
-          <Currency
-            :class="ExpandMenu ? 'md:inline' : 'md:hidden'"
-            :value="account.ClearedBalance"
-          />
         </div>
       </li>
       <!--