From 42dc51fe9a2a473782a7c1f672ed9962bb18c4a8 Mon Sep 17 00:00:00 2001
From: Jan Bader <jan@javil.eu>
Date: Wed, 2 Mar 2022 20:33:01 +0000
Subject: [PATCH] Improve layout of Reconcilation

---
 web/src/pages/Account.vue | 57 ++++++++++++++++++++++++---------------
 1 file changed, 36 insertions(+), 21 deletions(-)

diff --git a/web/src/pages/Account.vue b/web/src/pages/Account.vue
index 0762885..d75da82 100644
--- a/web/src/pages/Account.vue
+++ b/web/src/pages/Account.vue
@@ -49,41 +49,48 @@ function createReconcilationTransaction() {
         </h1>
 
         <div class="text-right flex flex-wrap flex-col md:flex-row justify-end gap-2 max-w-sm">
-            <span class="border-2 rounded-lg p-1 whitespace-nowrap flex-1">
+            <span class="rounded-lg p-1 whitespace-nowrap flex-1">
                 Working:
                 <Currency :value="accounts.CurrentAccount?.WorkingBalance" />
             </span>
 
-            <span class="border-2 rounded-lg p-1 whitespace-nowrap flex-1">
+            <span class="rounded-lg p-1 whitespace-nowrap flex-1">
                 Cleared:
                 <Currency :value="accounts.CurrentAccount?.ClearedBalance" />
             </span>
 
             <span
-                class="border-2 border-blue-500 rounded-lg bg-blue-500 p-1 whitespace-nowrap flex-1"
+                class="rounded-lg bg-blue-500 p-1 whitespace-nowrap flex-1"
                 v-if="!transactions.Reconciling"
                 @click="transactions.Reconciling = true"
             >
                 Reconciled:
                 <Currency :value="accounts.CurrentAccount?.ReconciledBalance" />
             </span>
-        </div>
 
-        <span v-if="transactions.Reconciling" class="border-2 block bg-gray-200 dark:bg-gray-800 rounded-lg p-2">
-            Is
-            <Currency :value="transactions.ReconcilingBalance" />your current balance?
-            <Button class="bg-blue-500 mx-3 py-2" @click="submitReconcilation">Yes!</Button>
-            <br />No, it's:
-            <Input class="text-right" type="number" v-model="TargetReconcilingBalance" />
-            Difference:
-            <Currency :value="transactions.ReconcilingBalance - TargetReconcilingBalance" />
-            <Button
-                class="bg-orange-500 mx-3 py-2"
-                v-if="Math.abs(transactions.ReconcilingBalance - TargetReconcilingBalance) > 0.01"
-                @click="createReconcilationTransaction"
-            >Create reconciling Transaction</Button>
-            <Button class="bg-red-500 mx-3 py-2" @click="cancelReconcilation">Cancel</Button>
-        </span>
+            <span v-if="transactions.Reconciling" class="contents">
+                <Button @click="submitReconcilation"
+                    class="bg-blue-500 p-1 whitespace-nowrap flex-1">
+                    My current balance is&nbsp;
+                    <Currency :value="transactions.ReconcilingBalance" />
+                </Button>
+
+                <Button @click="createReconcilationTransaction"
+                    class="bg-orange-500 p-1 whitespace-nowrap flex-1">
+                    No, it's:
+                    <Input
+                        class="text-right w-20 bg-transparent dark:bg-transparent border-b-2"
+                        type="number"
+                        v-model="TargetReconcilingBalance"
+                    />
+                    (Difference
+                    <Currency
+                        :value="transactions.ReconcilingBalance - TargetReconcilingBalance"
+                    />)
+                </Button>
+                <Button class="bg-red-500 p-1 flex-1" @click="cancelReconcilation">Cancel</Button>
+            </span>
+        </div>
     </div>
 
     <table>
@@ -97,7 +104,11 @@ function createReconcilationTransaction() {
                 <Input v-if="transactions.Reconciling" type="checkbox" @input="setReconciled" />
             </td>
         </tr>
-        <TransactionInputRow class="hidden md:table-row" :budgetid="budgetid" :accountid="accountid" />
+        <TransactionInputRow
+            class="hidden md:table-row"
+            :budgetid="budgetid"
+            :accountid="accountid"
+        />
         <TransactionRow
             v-for="(transaction, index) in transactions.TransactionsList"
             :key="transaction.ID"
@@ -110,7 +121,11 @@ function createReconcilationTransaction() {
             <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" />
+            <TransactionInputRow
+                class="grid grid-cols-2"
+                :budgetid="budgetid"
+                :accountid="accountid"
+            />
         </Modal>
     </div>
 </template>