From dc0c1b73bc788968dde9c7e8776732f25b47c5b1 Mon Sep 17 00:00:00 2001
From: James Cole <thegrumpydictator@gmail.com>
Date: Wed, 26 Oct 2016 19:32:19 +0200
Subject: [PATCH] Better view for expenses.

---
 resources/views/reports/default/month.twig    |  9 +-
 .../views/reports/default/multi-year.twig     |  9 +-
 resources/views/reports/default/year.twig     |  9 +-
 .../views/reports/partials/expenses.twig      | 83 +++++++++----------
 4 files changed, 62 insertions(+), 48 deletions(-)

diff --git a/resources/views/reports/default/month.twig b/resources/views/reports/default/month.twig
index ccc14c3877..d5cff5eedb 100644
--- a/resources/views/reports/default/month.twig
+++ b/resources/views/reports/default/month.twig
@@ -31,7 +31,14 @@
                 </div>
             </div>
         </div>
-        <div class="col-lg-3 col-md-3 col-sm-3 loading" id="expenseReport">
+        <div class="col-lg-3 col-md-3 col-sm-3">
+            <div class="box">
+                <div class="box-header with-border">
+                    <h3 class="box-title">{{ 'expenses'|_ }}</h3>
+                </div>
+                <div class="box-body table-responsive no-padding loading" id="expenseReport">
+                </div>
+            </div>
         </div>
     </div>
     <div class="row">
diff --git a/resources/views/reports/default/multi-year.twig b/resources/views/reports/default/multi-year.twig
index 5ce435fbf8..3841050be2 100644
--- a/resources/views/reports/default/multi-year.twig
+++ b/resources/views/reports/default/multi-year.twig
@@ -42,7 +42,14 @@
                 </div>
             </div>
         </div>
-        <div class="col-lg-3 col-md-3 col-sm-3 loading" id="expenseReport">
+        <div class="col-lg-3 col-md-3 col-sm-3">
+            <div class="box">
+                <div class="box-header with-border">
+                    <h3 class="box-title">{{ 'expenses'|_ }}</h3>
+                </div>
+                <div class="box-body table-responsive no-padding loading" id="expenseReport">
+                </div>
+            </div>
         </div>
     </div>
     <div class="row">
diff --git a/resources/views/reports/default/year.twig b/resources/views/reports/default/year.twig
index bbd280301b..7d897601bf 100644
--- a/resources/views/reports/default/year.twig
+++ b/resources/views/reports/default/year.twig
@@ -45,7 +45,14 @@
                 </div>
             </div>
         </div>
-        <div class="col-lg-3 col-md-3 col-sm-3 loading" id="expenseReport">
+        <div class="col-lg-3 col-md-3 col-sm-3">
+            <div class="box">
+                <div class="box-header with-border">
+                    <h3 class="box-title">{{ 'expenses'|_ }}</h3>
+                </div>
+                <div class="box-body table-responsive no-padding loading" id="expenseReport">
+                </div>
+            </div>
         </div>
     </div>
     <div class="row">
diff --git a/resources/views/reports/partials/expenses.twig b/resources/views/reports/partials/expenses.twig
index a2465c390b..3491b33564 100644
--- a/resources/views/reports/partials/expenses.twig
+++ b/resources/views/reports/partials/expenses.twig
@@ -1,46 +1,39 @@
-<div class="box">
-    <div class="box-header with-border">
-        <h3 class="box-title">{{ 'expenses'|_ }}</h3>
-    </div>
-    <div class="box-body table-responsive no-padding">
-        <table class="table table-hover">
-            <tbody>
-            {% for expense in expenses.getExpenses %}
-                {% if loop.index > listLength %}
-                    <tr class="overListLength">
-                {% else %}
-                    <tr>
-                {% endif %}
-                <td>
-                    <a href="{{ route('accounts.show',expense.id) }}">{{ expense.name }}</a>
-                    {% if expense.count > 1 %}
-                        <br/>
-                        <small>
-                            {{ expense.count }} {{ 'transactions'|_|lower }}
-                            <i class="fa fa-fw text-muted fa-info-circle firefly-info-button" data-location="expense-entry"
-                               data-account-id="{{ expense.id }}"></i>
-                        </small>
-                    {% endif %}
-                </td>
-                <td>
-                    {{ (expense.amount)|formatAmount }}
-                </td>
-                </tr>
-            {% endfor %}
-            </tbody>
-            <tfoot>
-            {% if expenses.getExpenses|length > expenseTopLength %}
-                <tr>
-                    <td colspan="2" class="active">
-                        <a href="#" class="listLengthTrigger">{{ trans('firefly.show_full_list',{number:incomeTopLength}) }}</a>
-                    </td>
-                </tr>
-            {% endif %}
+<table class="table table-hover">
+    <tbody>
+    {% for expense in expenses.getExpenses %}
+        {% if loop.index > listLength %}
+            <tr class="overListLength">
+        {% else %}
             <tr>
-                <td><em>{{ 'sum'|_ }}</em></td>
-                <td>{{ (expenses.getTotal)|formatAmount }}</td>
-            </tr>
-            </tfoot>
-        </table>
-    </div>
-</div>
+        {% endif %}
+        <td>
+            <a href="{{ route('accounts.show',expense.id) }}">{{ expense.name }}</a>
+            {% if expense.count > 1 %}
+                <br/>
+                <small>
+                    {{ expense.count }} {{ 'transactions'|_|lower }}
+                    <i class="fa fa-fw text-muted fa-info-circle firefly-info-button" data-location="expense-entry"
+                       data-account-id="{{ expense.id }}"></i>
+                </small>
+            {% endif %}
+        </td>
+        <td>
+            {{ (expense.amount)|formatAmount }}
+        </td>
+        </tr>
+    {% endfor %}
+    </tbody>
+    <tfoot>
+    {% if expenses.getExpenses|length > expenseTopLength %}
+        <tr>
+            <td colspan="2" class="active">
+                <a href="#" class="listLengthTrigger">{{ trans('firefly.show_full_list',{number:incomeTopLength}) }}</a>
+            </td>
+        </tr>
+    {% endif %}
+    <tr>
+        <td><em>{{ 'sum'|_ }}</em></td>
+        <td>{{ (expenses.getTotal)|formatAmount }}</td>
+    </tr>
+    </tfoot>
+</table>