jacob1123/budgeteer
1
1
Fork 0
Code Issues 12 Pull Requests 1 Packages Releases 1 Wiki Activity

Show negative colors in red

Browse Source
This commit is contained in:
Jan Bader 2022-01-29 23:29:17 +00:00
parent e8dbb54086
commit 24370c9d32
2 changed files with 5 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
web/src/pages/Account.vue
View File

@ -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>

4
web/src/pages/BudgetSidebar.vue
View File

@ -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>