From bbb12a788d7b46da57aea512a26c53f5c104517b Mon Sep 17 00:00:00 2001
From: Jan Bader <jan@javil.eu>
Date: Mon, 28 Feb 2022 07:56:46 +0000
Subject: [PATCH] Improve layout of Account header

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

diff --git a/web/src/pages/Account.vue b/web/src/pages/Account.vue
index 9f65aa8..94fcfe2 100644
--- a/web/src/pages/Account.vue
+++ b/web/src/pages/Account.vue
@@ -31,51 +31,57 @@ function submitReconcilation() {
 }
 
 function createReconcilationTransaction() {
-    const diff = TargetReconcilingBalance.value - accounts.ReconcilingBalance ;
+    const diff = TargetReconcilingBalance.value - accounts.ReconcilingBalance;
     accounts.SubmitReconcilation(diff);
     accounts.Reconciling = false;
 }
 </script>
 
 <template>
-    <h1 class="inline">{{ accounts.CurrentAccount?.Name }}</h1>
-    <EditAccount />
-    <br />
+    <div class="grid grid-cols-2">
+        <h1 class="inline">
+            {{ accounts.CurrentAccount?.Name }}
+            <EditAccount />
+        </h1>
 
-    <span>
-        Current Balance:
-        <Currency :value="accounts.CurrentAccount?.WorkingBalance" />
-    </span>
+        <div class="text-right">
+            <span class="border-2 rounded-lg p-1">
+                Working:
+                <Currency :value="accounts.CurrentAccount?.WorkingBalance" />
+            </span>
 
-    <span>
-        Cleared Balance:
-        <Currency :value="accounts.CurrentAccount?.ClearedBalance" />
-    </span>
+            <span class="border-2 rounded-lg p-1 ml-2">
+                Cleared:
+                <Currency :value="accounts.CurrentAccount?.ClearedBalance" />
+            </span>
 
-    <span v-if="accounts.Reconciling" class="border-2 block bg-gray-200 rounded-lg p-2">
-        Is <Currency :value="accounts.ReconcilingBalance" /> your current balance? 
-        <Button
-            class="bg-blue-500 mx-3"
-            @click="submitReconcilation">Yes!</Button>
-            <br />
+            <span
+                class="border-2 border-blue-500 rounded-lg bg-blue-500 ml-2 p-1"
+                v-if="!accounts.Reconciling"
+                @click="accounts.Reconciling = true"
+            >
+                Reconciled:
+                <Currency :value="accounts.CurrentAccount?.ReconciledBalance" />
+            </span>
+        </div>
+
+        <span v-if="accounts.Reconciling" class="border-2 block bg-gray-200 rounded-lg p-2">
+            Is
+            <Currency :value="accounts.ReconcilingBalance" />your current balance?
+            <Button class="bg-blue-500 mx-3" @click="submitReconcilation">Yes!</Button>
+            <br />No, it's:
+            <input class="text-right" type="number" v-model="TargetReconcilingBalance" />
+            Difference:
+            <Currency :value="accounts.ReconcilingBalance - TargetReconcilingBalance" />
+            <Button
+                class="bg-orange-500 mx-3"
+                v-if="Math.abs(accounts.ReconcilingBalance - TargetReconcilingBalance) > 0.01"
+                @click="createReconcilationTransaction"
+            >Create reconciling Transaction</Button>
+            <Button class="bg-red-500 mx-3" @click="cancelReconcilation">Cancel</Button>
+        </span>
+    </div>
 
-        No, it's: <input class="text-right" type="number" v-model="TargetReconcilingBalance" />
-        Difference: <Currency :value="accounts.ReconcilingBalance - TargetReconcilingBalance" />
-        <Button
-            class="bg-orange-500 mx-3"
-            v-if="Math.abs(accounts.ReconcilingBalance - TargetReconcilingBalance) > 0.01"
-            @click="createReconcilationTransaction"
-        >Create reconciling Transaction</Button>
-        <Button
-            class="bg-red-500 mx-3"
-            @click="cancelReconcilation"
-        >Cancel</Button>
-    </span>
-    <span v-if="!accounts.Reconciling">
-        Reconciled Balance:
-        <Currency :value="accounts.CurrentAccount?.ReconciledBalance" />
-        <Button class="bg-blue-500" @click="accounts.Reconciling = true" v-if="!accounts.Reconciling">Reconcile</Button>
-    </span>
     <table>
         <tr class="font-bold">
             <td style="width: 90px;">Date</td>
@@ -91,7 +97,8 @@ function createReconcilationTransaction() {
         </tr>
         <TransactionInputRow :budgetid="budgetid" :accountid="accountid" />
         <TransactionRow
-            v-for="(transaction, index) in accounts.TransactionsList" :key="transaction.ID"
+            v-for="(transaction, index) in accounts.TransactionsList"
+            :key="transaction.ID"
             :transaction="transaction"
             :index="index"
         />