From 24370c9d327461b3e146e84119c4f7b2463cc13e Mon Sep 17 00:00:00 2001
From: Jan Bader <jan@javil.eu>
Date: Sat, 29 Jan 2022 23:29:17 +0000
Subject: [PATCH] Show negative colors in red

---
 web/src/pages/Account.vue       | 6 +++---
 web/src/pages/BudgetSidebar.vue | 4 ++--
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/web/src/pages/Account.vue b/web/src/pages/Account.vue
index 88890cb..93ee6e0 100644
--- a/web/src/pages/Account.vue
+++ b/web/src/pages/Account.vue
@@ -8,7 +8,7 @@ export default {
     <v-container>
         <h1>{{$store.getters.CurrentAccount.Name}}</h1>
         <p>
-            Current Balance: {{$store.getters.CurrentAccount.Balance.Int / 100}}
+            Current Balance: <span :class="$store.getters.CurrentAccount.Balance.Int < 0 ? 'negative' : ''">{{$store.getters.CurrentAccount.Balance.Int / 100}}</span>
         </p>
         <table>
             <tr v-for="transaction in $store.getters.Transactions" class="{{transaction.Date.After now ? 'future' : ''}}">
@@ -19,7 +19,7 @@ export default {
                 <td style="max-width: 200px;">
                     {{transaction.CategoryGroup ? transaction.CategoryGroup + " : " + transaction.Category : ""}}
                 </td>
-                <td class="cutoff">
+                <td>
                     <a :href="'/budget/'+$store.getters.CurrentBudget.ID+'/transaction/'+transaction.ID">{{transaction.Memo}}</a>
                 </td>
                 <td style="width: 80px;" :class="transaction.Amount.Int < 0 ? 'negative' : ''">
@@ -39,5 +39,5 @@ export default {
 <style>
 table {width: 100%; table-layout:fixed}
 td {overflow: hidden; white-space: nowrap;}
-td.cutoff {width: 100px;}
+.negative {color: red;}
 </style>
\ No newline at end of file
diff --git a/web/src/pages/BudgetSidebar.vue b/web/src/pages/BudgetSidebar.vue
index 2b934c7..003830e 100644
--- a/web/src/pages/BudgetSidebar.vue
+++ b/web/src/pages/BudgetSidebar.vue
@@ -18,7 +18,7 @@ export default {
       <ul v-for="account in $store.getters.OnBudgetAccounts" class="two-valued">
           <li>
             <router-link :to="'/budget/'+budgetid+'/account/'+account.ID">{{account.Name}}</router-link>
-            <span>{{account.Balance.Int / 100}}</span>
+            <span :class="account.Balance.Int < 0 ? 'negative' : ''">{{account.Balance.Int / 100}}</span>
           </li>
       </ul>
     </li>
@@ -27,7 +27,7 @@ export default {
       <ul v-for="account in $store.getters.OffBudgetAccounts" class="two-valued">
           <li>
             <router-link :to="'/budget/'+budgetid+'/account/'+account.ID">{{account.Name}}</router-link>
-            <span>{{account.Balance.Int / 100}}</span>
+            <span :class="account.Balance.Int < 0 ? 'negative' : ''">{{account.Balance.Int / 100}}</span>
           </li>
       </ul>
     </li>