From 796be319b7910b34ceff169cdf2fe1be20c07c68 Mon Sep 17 00:00:00 2001
From: James Cole <thegrumpydictator@gmail.com>
Date: Tue, 3 Jan 2017 08:27:48 +0100
Subject: [PATCH] Piggy banks for #511 [skip ci]

---
 resources/views/list/piggy-banks.twig  | 22 +++++++++++++++++-----
 resources/views/piggy-banks/index.twig | 22 +++++++++++-----------
 2 files changed, 28 insertions(+), 16 deletions(-)

diff --git a/resources/views/list/piggy-banks.twig b/resources/views/list/piggy-banks.twig
index 6fe3af9bff..7fa3188f14 100644
--- a/resources/views/list/piggy-banks.twig
+++ b/resources/views/list/piggy-banks.twig
@@ -1,4 +1,14 @@
 <table class="table table-hover table-condensed" id="sortable-piggy">
+    <thead>
+    <tr>
+        <th colspan="2">&nbsp;</th>
+        <th>{{ 'piggy_bank'|_ }}</th>
+        <th style="text-align: right;">{{ 'saved_so_far'|_ }}</th>
+        <th colspan="3">&nbsp;</th>
+        <th style="text-align: right;">{{ 'target_amount'|_ }}</th>
+        <th style="text-align: right;">{{ 'left_to_save'|_ }}</th>
+    </tr>
+    </thead>
     <tbody>
     {% for piggyBank in piggyBanks %}
         <tr data-id="{{ piggyBank.id }}">
@@ -21,8 +31,8 @@
             <td>
                 <a href="{{ route('piggy-banks.show', piggyBank.id) }}" title="{{ piggyBank.order }}">{{ piggyBank.name }}</a>
             </td>
-            <td>
-                <span title="Saved so far">{{ piggyBank.savedSoFar|formatAmountPlain }}</span>
+            <td style="text-align: right;">
+                <span title="Saved so far" style="text-align:right;">{{ piggyBank.savedSoFar|formatAmount }}</span>
             </td>
             <td class="hidden-sm hidden-xs" style="text-align:right;width:40px;">
                 {% if piggyBank.savedSoFar > 0 %}
@@ -55,10 +65,12 @@
                         <i data-id="{{ piggyBank.id }}" class="fa fa-plus"></i></a>
                 {% endif %}
             </td>
-            <td class="hidden-sm hidden-xs" style="width:200px;">
-                <span title="Target amount">{{ piggyBank.targetamount|formatAmount }}</span>
+            <td class="hidden-sm hidden-xs" style="width:200px;text-align:right;">
+                <span title="{{ 'target_amount'|_ }}">{{ piggyBank.targetamount|formatAmount }}</span>
+            </td>
+            <td class="hidden-sm hidden-xs" style="width:200px;text-align:right;">
                 {% if piggyBank.leftToSave > 0 %}
-                    <span title="Left to save">({{ piggyBank.leftToSave|formatAmount }})</span>
+                    <span title="{{ 'left_to_save'|_ }}">{{ piggyBank.leftToSave|formatAmount }}</span>
                 {% endif %}
             </td>
         </tr>
diff --git a/resources/views/piggy-banks/index.twig b/resources/views/piggy-banks/index.twig
index 364ec37f0e..821b731c9a 100644
--- a/resources/views/piggy-banks/index.twig
+++ b/resources/views/piggy-banks/index.twig
@@ -11,7 +11,7 @@
                 <div class="box-header with-border">
                     <h3 class="box-title">{{ 'piggyBanks'|_ }}</h3>
                 </div>
-                <div class="box-body">
+                <div class="box-body no-padding">
                     {% include 'list/piggy-banks' %}
                 </div>
             </div>
@@ -29,22 +29,22 @@
                         <thead>
                         <tr>
                             <th>{{ 'account'|_ }}</th>
-                            <th class="hidden-sm hidden-xs">{{ 'balance'|_ }}</th>
-                            <th>{{ 'left_for_piggy_banks'|_ }}</th>
-                            <th class="hidden-sm hidden-xs">{{ 'sum_of_piggy_banks'|_ }}</th>
-                            <th class="hidden-sm hidden-xs">{{ 'saved_so_far'|_ }}</th>
-                            <th class="hidden-sm hidden-xs">{{ 'left_to_save'|_ }}</th>
+                            <th style="text-align:right;" class="hidden-sm hidden-xs">{{ 'balance'|_ }}</th>
+                            <th style="text-align:right;">{{ 'left_for_piggy_banks'|_ }}</th>
+                            <th style="text-align:right;" class="hidden-sm hidden-xs">{{ 'sum_of_piggy_banks'|_ }}</th>
+                            <th style="text-align:right;" class="hidden-sm hidden-xs">{{ 'saved_so_far'|_ }}</th>
+                            <th style="text-align:right;" class="hidden-sm hidden-xs">{{ 'left_to_save'|_ }}</th>
                         </tr>
                         </thead>
                         <tbody>
                         {% for id,info in accounts %}
                             <tr>
                                 <td><a href="{{ route('accounts.show',id) }}" title="{{ info.name }}">{{ info.name }}</a></td>
-                                <td class="hidden-sm hidden-xs">{{ info.balance|formatAmount }}</td>
-                                <td>{{ info.leftForPiggyBanks|formatAmount }}</td>
-                                <td class="hidden-sm hidden-xs">{{ info.sumOfTargets|formatAmount }}</td>
-                                <td class="hidden-sm hidden-xs">{{ info.sumOfSaved|formatAmount }}</td>
-                                <td class="hidden-sm hidden-xs">{{ info.leftToSave|formatAmount }}</td>
+                                <td style="text-align:right;" class="hidden-sm hidden-xs">{{ info.balance|formatAmount }}</td>
+                                <td style="text-align:right;">{{ info.leftForPiggyBanks|formatAmount }}</td>
+                                <td style="text-align:right;" class="hidden-sm hidden-xs">{{ info.sumOfTargets|formatAmount }}</td>
+                                <td style="text-align:right;" class="hidden-sm hidden-xs">{{ info.sumOfSaved|formatAmount }}</td>
+                                <td style="text-align:right;" class="hidden-sm hidden-xs">{{ info.leftToSave|formatAmount }}</td>
                             </tr>
                         {% endfor %}
                         </tbody>