rearranged page

This commit is contained in:
Gwenhael Le Moine 2014-11-09 08:55:42 +01:00
parent 2100c2c893
commit f7b99f228e

View file

@ -21,81 +21,85 @@
</md-toolbar>
</div>
<div layout="vertical">
<table class="table" style="width: 100%">
<thead>
<tr>
<th style="width: 11%">Account</th>
<th style="width: 3%">Spent</th>
<th style="width: 3%">Budgeted</th>
<th style="width: 3%">Percentage</th>
<th>Progress</th>
</tr>
</thead>
<tbody>
<tr data-ng-repeat="account in budget"
data-ng-class="{'even': $even, 'odd': $odd}">
<td>
{{account.account}}
</td>
<td style="text-align: right;">
{{account.amount | number:2}}{{account.currency}}
</td>
<td style="text-align: right;">
<span data-ng-if="account.percentage >= 0">{{account.budget | number:2}}{{account.currency}}</span>
<span data-ng-if="account.percentage < 0">
{{balance.buckets[1].raw_total - total_budget | number:2}}{{account.currency}}
</span>
</td>
<td style="text-align: right;">
<span data-ng-if="account.percentage >= 0">{{account.percentage | number:2}}%</span>
<span data-ng-if="account.percentage < 0">
{{( account.amount / ( balance.buckets[1].raw_total - total_budget ) ) * 100 | number:2}}%
</span>
</td>
<td>
<md-progress-linear md-theme="red" mode="determinate" value="{{account.percentage}}"
data-ng-if="account.percentage > 100"></md-progress-linear>
<md-progress-linear md-theme="brown" mode="determinate"
value="{{( account.amount / ( balance.buckets[1].raw_total - total_budget ) ) * 100}}"
data-ng-if="account.percentage < 0"></md-progress-linear>
<md-progress-linear mode="determinate" value="{{account.percentage}}"
data-ng-if="account.percentage <= 100"></md-progress-linear>
</td>
</tr>
</tbody>
</table>
<table class="table" style="width: 100%">
<thead>
<tr>
<th style="width: 11%">Account</th>
<th style="width: 3%">Can be saved</th>
<th style="width: 3%">Total income</th>
<th style="width: 3%">Percentage</th>
<th>Progress</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Potential savings
</td>
<td style="text-align: right;">
{{balance.buckets[1].raw_total - total_budget - total_unbudgeted | number:2}}{{budget[0].currency}}
</td>
<td style="text-align: right;">
{{balance.buckets[1].raw_total | number:2}}{{budget[0].currency}}
</td>
<td style="text-align: right;">
{{( ( balance.buckets[1].raw_total - total_budget - total_unbudgeted ) / balance.buckets[1].raw_total ) * 100 | number:2}}%
</td>
<td>
<md-progress-linear md-theme="green" mode="determinate"
value="{{( ( balance.buckets[1].raw_total - total_budget - total_unbudgeted ) / balance.buckets[1].raw_total ) * 100}}"></md-progress-linear>
</td>
</tr>
</tbody>
</table>
<div layout="vertical" layout-md="horizontal" layout-padding>
<div flex="50">
<table class="table" style="width: 100%">
<thead>
<tr>
<th style="width: 11%">Account</th>
<th style="width: 3%">Spent</th>
<th style="width: 3%">Budgeted</th>
<th style="width: 3%">Percentage</th>
<th>Progress</th>
</tr>
</thead>
<tbody>
<tr data-ng-repeat="account in budget"
data-ng-class="{'even': $even, 'odd': $odd}">
<td>
{{account.account}}
</td>
<td style="text-align: right;">
{{account.amount | number:2}}{{account.currency}}
</td>
<td style="text-align: right;">
<span data-ng-if="account.percentage >= 0">{{account.budget | number:2}}{{account.currency}}</span>
<span data-ng-if="account.percentage < 0">
{{balance.buckets[1].raw_total - total_budget | number:2}}{{account.currency}}
</span>
</td>
<td style="text-align: right;">
<span data-ng-if="account.percentage >= 0">{{account.percentage | number:2}}%</span>
<span data-ng-if="account.percentage < 0">
{{( account.amount / ( balance.buckets[1].raw_total - total_budget ) ) * 100 | number:2}}%
</span>
</td>
<td>
<md-progress-linear md-theme="red" mode="determinate" value="{{account.percentage}}"
data-ng-if="account.percentage > 100"></md-progress-linear>
<md-progress-linear md-theme="brown" mode="determinate"
value="{{( account.amount / ( balance.buckets[1].raw_total - total_budget ) ) * 100}}"
data-ng-if="account.percentage < 0"></md-progress-linear>
<md-progress-linear mode="determinate" value="{{account.percentage}}"
data-ng-if="account.percentage <= 100"></md-progress-linear>
</td>
</tr>
</tbody>
</table>
</div>
<div flex="50">
<table class="table" style="width: 100%">
<thead>
<tr>
<th style="width: 11%">Account</th>
<th style="width: 3%">Savable</th>
<th style="width: 3%">Income</th>
<th style="width: 3%">Percentage</th>
<th>Progress</th>
</tr>
</thead>
<tbody>
<tr class="odd">
<td>
Potential savings
</td>
<td style="text-align: right;">
{{balance.buckets[1].raw_total - total_budget - total_unbudgeted | number:2}}{{budget[0].currency}}
</td>
<td style="text-align: right;">
{{balance.buckets[1].raw_total | number:2}}{{budget[0].currency}}
</td>
<td style="text-align: right;">
{{( ( balance.buckets[1].raw_total - total_budget - total_unbudgeted ) / balance.buckets[1].raw_total ) * 100 | number:2}}%
</td>
<td>
<md-progress-linear md-theme="green" mode="determinate"
value="{{( ( balance.buckets[1].raw_total - total_budget - total_unbudgeted ) / balance.buckets[1].raw_total ) * 100}}"></md-progress-linear>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div layout="vertical" layout-md="horizontal" layout-padding>