From e85cf0ea552b6ec6f3c86453a0b185f4cd49619a Mon Sep 17 00:00:00 2001
From: Jan Bader <jan@javil.eu>
Date: Sat, 29 Jan 2022 22:38:23 +0000
Subject: [PATCH] Improve layout of Account view

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

diff --git a/web/src/pages/Account.vue b/web/src/pages/Account.vue
index ed6ddde..b166ca6 100644
--- a/web/src/pages/Account.vue
+++ b/web/src/pages/Account.vue
@@ -14,30 +14,34 @@ export default {
 
 <template>
     <v-container>
-        <table class="container col-lg-12" id="content">
+        <h1>{{$store.getters.CurrentAccount.Name}}</h1>
+        <p>
+            Current Balance: {{$store.getters.CurrentAccount.Balance.Int / 100}}
+        </p>
+        <table>
             <tr v-for="transaction in $store.getters.Transactions" class="{{transaction.Date.After now ? 'future' : ''}}">
-                <td>{{transaction.Date.substring(0, 10)}}</td>
+                <td style="width: 90px;">{{transaction.Date.substring(0, 10)}}</td>
                 <!--<td>
                     {{transaction.Account}}
                 </td>-->
-                <td>
+                <td style="max-width: 150px;">
                     {{transaction.Payee}}
                 </td>
-                <td>
+                <td style="max-width: 200px;">
                     {{transaction.CategoryGroup ? transaction.CategoryGroup + " : " + transaction.Category : ""}}
                 </td>
-                <td>
-                    {{transaction.GroupID ? "☀" : ""}}
-                </td>
                 <td class="cutoff">
                     <a :href="'/budget/'+$store.getters.CurrentBudget.ID+'/transaction/'+transaction.ID">{{transaction.Memo}}</a>
                 </td>
-                <td>
+                <td style="width: 80px;" :class="transaction.Amount.Int < 0 ? 'negative' : ''">
                     {{transaction.Amount.Int / 100}}
                 </td>
-                <td>
+                <td style="width: 20px;">
                     {{transaction.Status == "Reconciled" ? "✔" : (transaction.Status == "Uncleared" ? "" : "*")}}
                 </td>
+                <td style="width: 20px;">
+                    {{transaction.GroupID ? "☀" : ""}}
+                </td>
             </tr>
         </table>
     </v-container>