Show negative colors in red
This commit is contained in:
parent
e8dbb54086
commit
24370c9d32
@ -8,7 +8,7 @@ export default {
|
|||||||
<v-container>
|
<v-container>
|
||||||
<h1>{{$store.getters.CurrentAccount.Name}}</h1>
|
<h1>{{$store.getters.CurrentAccount.Name}}</h1>
|
||||||
<p>
|
<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>
|
</p>
|
||||||
<table>
|
<table>
|
||||||
<tr v-for="transaction in $store.getters.Transactions" class="{{transaction.Date.After now ? 'future' : ''}}">
|
<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;">
|
<td style="max-width: 200px;">
|
||||||
{{transaction.CategoryGroup ? transaction.CategoryGroup + " : " + transaction.Category : ""}}
|
{{transaction.CategoryGroup ? transaction.CategoryGroup + " : " + transaction.Category : ""}}
|
||||||
</td>
|
</td>
|
||||||
<td class="cutoff">
|
<td>
|
||||||
<a :href="'/budget/'+$store.getters.CurrentBudget.ID+'/transaction/'+transaction.ID">{{transaction.Memo}}</a>
|
<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' : ''">
|
<td style="width: 80px;" :class="transaction.Amount.Int < 0 ? 'negative' : ''">
|
||||||
@ -39,5 +39,5 @@ export default {
|
|||||||
<style>
|
<style>
|
||||||
table {width: 100%; table-layout:fixed}
|
table {width: 100%; table-layout:fixed}
|
||||||
td {overflow: hidden; white-space: nowrap;}
|
td {overflow: hidden; white-space: nowrap;}
|
||||||
td.cutoff {width: 100px;}
|
.negative {color: red;}
|
||||||
</style>
|
</style>
|
@ -18,7 +18,7 @@ export default {
|
|||||||
<ul v-for="account in $store.getters.OnBudgetAccounts" class="two-valued">
|
<ul v-for="account in $store.getters.OnBudgetAccounts" class="two-valued">
|
||||||
<li>
|
<li>
|
||||||
<router-link :to="'/budget/'+budgetid+'/account/'+account.ID">{{account.Name}}</router-link>
|
<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>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</li>
|
</li>
|
||||||
@ -27,7 +27,7 @@ export default {
|
|||||||
<ul v-for="account in $store.getters.OffBudgetAccounts" class="two-valued">
|
<ul v-for="account in $store.getters.OffBudgetAccounts" class="two-valued">
|
||||||
<li>
|
<li>
|
||||||
<router-link :to="'/budget/'+budgetid+'/account/'+account.ID">{{account.Name}}</router-link>
|
<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>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</li>
|
</li>
|
||||||
|
Loading…
x
Reference in New Issue
Block a user