From 9638676b8fb2a050f5708f7f9e3da44c7cf445d7 Mon Sep 17 00:00:00 2001
From: Jan Bader <jan@javil.eu>
Date: Tue, 1 Mar 2022 20:31:37 +0000
Subject: [PATCH] Add new transaction button on small screens

---
 web/src/pages/Account.vue | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/web/src/pages/Account.vue b/web/src/pages/Account.vue
index eb3c371..7d27884 100644
--- a/web/src/pages/Account.vue
+++ b/web/src/pages/Account.vue
@@ -7,6 +7,7 @@ import { useAccountStore } from "../stores/budget-account";
 import EditAccount from "../dialogs/EditAccount.vue";
 import Button from "../components/Button.vue";
 import { useTransactionsStore } from "../stores/transactions";
+import Modal from "../components/Modal.vue";
 
 defineProps<{
     budgetid: string
@@ -103,6 +104,14 @@ function createReconcilationTransaction() {
             :index="index"
         />
     </table>
+    <div class="md:hidden">
+        <Modal>
+            <template v-slot:placeholder>
+                <Button class="fixed right-4 bottom-4 font-bold text-lg bg-blue-500 py-2">+</Button>
+            </template>
+            <TransactionInputRow class="grid grid-cols-2" :budgetid="budgetid" :accountid="accountid" />
+        </Modal>
+    </div>
 </template>
 
 <style>