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>

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>