Cleaned up lots of views.

app/Http/Controllers/ReportController.php

@@ -70,14 +70,14 @@ class ReportController extends Controller
     public function month($year = '2014', $month = '1', $shared = false)
     {
         $start            = new Carbon($year . '-' . $month . '-01');
-        $subTitle         = trans('firefly.reportForMonth', ['date' => $start->formatLocalized($this->monthFormat)]);
+        $subTitle         = trans('firefly.reportForMonth', ['month' => $start->formatLocalized($this->monthFormat)]);
         $subTitleIcon     = 'fa-calendar';
         $end              = clone $start;
         $incomeTopLength  = 8;
         $expenseTopLength = 8;
         if ($shared == 'shared') {
             $shared   = true;
-            $subTitle = trans('firefly.reportForMonthShared', ['date' => $start->formatLocalized($this->monthFormat)]);
+            $subTitle = trans('firefly.reportForMonthShared', ['month' => $start->formatLocalized($this->monthFormat)]);
         }
 
         $end->endOfMonth();

app/Http/breadcrumbs.php

@@ -321,11 +321,13 @@ Breadcrumbs::register(
 Breadcrumbs::register(
     'reports.month', function (Generator $breadcrumbs, Carbon $date, $shared) {
     $breadcrumbs->parent('reports.year', $date, $shared);
+    $language = Preferences::get('language', 'en')->data;
+    $format   = Config::get('firefly.month.' . $language);
 
     if ($shared) {
-        $title = trans('breadcrumbs.monthly_report_shared', ['date' => $date->year]);
+        $title = trans('breadcrumbs.monthly_report_shared', ['date' => $date->formatLocalized($format)]);
     } else {
-        $title = trans('breadcrumbs.monthly_report', ['date' => $date->year]);
+        $title = trans('breadcrumbs.monthly_report', ['date' => $date->formatLocalized($format)]);
     }
 
     $breadcrumbs->push($title, route('reports.month', [$date->year, $date->month]));

app/Http/routes.php

@@ -350,8 +350,8 @@ Route::group(
      * Profile Controller
      */
     Route::get('/profile', ['uses' => 'ProfileController@index', 'as' => 'profile']);
-    Route::get('/profile/change-password', ['uses' => 'ProfileController@changePassword', 'as' => 'change-password']);
+    Route::get('/profile/change-password', ['uses' => 'ProfileController@changePassword', 'as' => 'profile.change-password']);
-    Route::get('/profile/delete-account', ['uses' => 'ProfileController@deleteAccount', 'as' => 'delete-account']);
+    Route::get('/profile/delete-account', ['uses' => 'ProfileController@deleteAccount', 'as' => 'profile.delete-account']);
     Route::post('/profile/delete-account', ['uses' => 'ProfileController@postDeleteAccount', 'as' => 'delete-account-post']);
     Route::post('/profile/change-password', ['uses' => 'ProfileController@postChangePassword', 'as' => 'change-password-post']);
 

public/js/gcharts.options.js

@@ -10,11 +10,11 @@ var defaultLineChartOptions = {
     chartArea: {
         left: 50,
         top: 10,
-        width: '85%',
+        width: '95%',
-        height: '80%'
+        height: '90%'
     },
     height: 400,
-    colors: ["#4285f4", "#db4437", "#f4b400", "#0f9d58", "#ab47bc", "#00acc1", "#ff7043", "#9e9d24", "#5c6bc0", "#f06292", "#00796b", "#c2185b"],
+    colors: ["#357ca5", "#008d4c", "#db8b0b", "#ca195a", "#555299", "#4285f4", "#db4437", "#f4b400", "#0f9d58", "#ab47bc", "#00acc1", "#ff7043", "#9e9d24", "#5c6bc0", "#f06292", "#00796b", "#c2185b"],
     hAxis: {
         textStyle: {
             color: '#838383',

resources/lang/en/firefly.php

@@ -196,8 +196,8 @@ return [
     // reports:
     'reportForYear'                 => 'Yearly report for :year',
     'reportForYearShared'           => 'Yearly report for :year (including shared accounts)',
-    'reportForMonth'                => 'Montly report for :year',
+    'reportForMonth'                => 'Montly report for :month',
-    'reportForMonthShared'          => 'Montly report for :year (including shared accounts)',
+    'reportForMonthShared'          => 'Montly report for :month (including shared accounts)',
     'incomeVsExpenses'              => 'Income vs. expenses',
     'accountBalances'               => 'Account balances',
     'balanceStartOfYear'            => 'Balance at start of year',

resources/lang/en/form.php

@@ -62,7 +62,7 @@ return [
     'delete_budget'               => 'Delete budget ":name"',
     'delete_category'             => 'Delete category ":name"',
     'delete_currency'             => 'Delete currency ":name"',
-    'delete_piggyBank'            => 'Delete piggy banl ":name"',
+    'delete_piggyBank'            => 'Delete piggy bank ":name"',
     'delete_journal'              => 'Delete transaction with description ":description"',
 
     'account_areYouSure'          => 'Are you sure you want to delete the account named ":name"?',

resources/twig/accounts/show.twig

@@ -40,7 +40,7 @@
             <div class="box-header with-border">
                 <h3 class="box-title">{{ 'transactions'|_ }}</h3>
             </div>
-            <div class="box-body">
+            <div class="box-body table-responsive no-padding">
                 {% include 'list/journals.twig' with {sorting:true} %}
             </div>
     </div>

resources/twig/layout/default.twig

@@ -128,6 +128,12 @@
 
 </div><!-- ./wrapper -->
 
+
+<!-- Modal -->
+<div class="modal fade" id="defaultModal" tabindex="-1" role="dialog" aria-labelledby="defaultModalLabel">
+</div>
+
+
 <script src="js/jquery-2.1.3.min.js" type="text/javascript"></script>
 <script src="bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
 <script src="js/moment.min.js" type="text/javascript"></script>

resources/twig/list/piggy-bank-events.twig

@@ -1,4 +1,4 @@
-<table class="table table-bordered table-striped">
+<table class="table table-hover">
     <tr>
         {% if showPiggyBank %}
             <th>Piggy bank</th>

resources/twig/list/piggy-banks.twig

@@ -1,4 +1,4 @@
-<table class="table table-striped" id="sortable">
+<table class="table table-hover" id="sortable">
     <tbody>
     {% for piggyBank in piggyBanks %}
         <tr data-id="{{ piggyBank.id }}">
@@ -20,19 +20,21 @@
             </td>
             <td style="text-align:right;width:40px;">
                 {% if piggyBank.savedSoFar > 0 %}
-                <a href="{{route('piggy-banks.removeMoney', piggyBank.id)}}" class="btn btn-default btn-xs removeMoney" data-id="{{ piggyBank.id }}"><span data-id="{{ piggyBank.id }}" class="glyphicon glyphicon-minus"></span></a>
+                    <a href="{{ route('piggy-banks.removeMoney', piggyBank.id) }}" class="btn btn-default btn-xs removeMoney" data-id="{{ piggyBank.id }}"><span
+                                data-id="{{ piggyBank.id }}" class="glyphicon glyphicon-minus"></span></a>
                 {% endif %}
             </td>
 
             <td>
-            <div class="progress progress-striped" style="margin-bottom:0;">
+                <div class="progress progress" style="margin-bottom:0;">
                     <div
                             {% if piggyBank.percentage == 100 %}
                                 class="progress-bar progress-bar-success"
                             {% else %}
                                 class="progress-bar progress-bar-info"
                             {% endif %}
-                    role="progressbar" aria-valuenow="{{ piggyBank.percentage }}" aria-valuemin="0" aria-valuemax="100" style="min-width: 40px;width: {{ piggyBank.percentage }}%;">
+                            role="progressbar" aria-valuenow="{{ piggyBank.percentage }}" aria-valuemin="0" aria-valuemax="100"
+                            style="min-width: 40px;width: {{ piggyBank.percentage }}%;">
                         {{ piggyBank.percentage }}%
                     </div>
                 </div>
@@ -41,7 +43,8 @@
 
             <td style="width:40px;">
                 {% if piggyBank.leftToSave > 0 %}
-                <a href="{{ route('piggy-banks.addMoney', piggyBank.id) }}" class="btn btn-default btn-xs addMoney" data-id="{{ piggyBank.id }}"><span data-id="{{ piggyBank.id }}" class="glyphicon glyphicon-plus"></span></a>
+                    <a href="{{ route('piggy-banks.addMoney', piggyBank.id) }}" class="btn btn-default btn-xs addMoney" data-id="{{ piggyBank.id }}"><span
+                                data-id="{{ piggyBank.id }}" class="glyphicon glyphicon-plus"></span></a>
                 {% endif %}
             </td>
             <td style="width:200px;">

resources/twig/partials/control-bar.twig

@@ -32,7 +32,7 @@
                     </a>
                 </li>
                 <li>
-                    <a href="javascript::;">
+                    <a href="{{ route('accounts.create', 'asset') }}">
                         <i class="menu-icon fa fa-money bg-maroon"></i>
                         <div class="menu-info">
                             <h4 class="control-sidebar-subheading">New asset account</h4>
@@ -40,7 +40,7 @@
                     </a>
                 </li>
                 <li>
-                    <a href="javascript::;">
+                    <a href="{{ route('accounts.create', 'expense') }}">
                         <i class="menu-icon fa fa-shopping-cart bg-maroon"></i>
                         <div class="menu-info">
                             <h4 class="control-sidebar-subheading">New expense account</h4>
@@ -48,7 +48,7 @@
                     </a>
                 </li>
                 <li>
-                    <a href="javascript::;">
+                    <a href="{{ route('accounts.create', 'revenue') }}">
                         <i class="menu-icon fa fa-download bg-maroon"></i>
                         <div class="menu-info">
                             <h4 class="control-sidebar-subheading">New revenue</h4>
@@ -56,7 +56,7 @@
                     </a>
                 </li>
                 <li>
-                    <a href="javascript::;">
+                    <a href="{{ route('piggy-banks.create') }}">
                         <i class="menu-icon fa fa-sort-amount-asc bg-teal"></i>
                         <div class="menu-info">
                             <h4 class="control-sidebar-subheading">New piggy bank</h4>
@@ -64,7 +64,7 @@
                     </a>
                 </li>
                 <li>
-                    <a href="javascript::;">
+                    <a href="{{ route('bills.create') }}">
                         <i class="menu-icon fa fa-download bg-purple"></i>
                         <div class="menu-info">
                             <h4 class="control-sidebar-subheading">New bill</h4>

resources/twig/partials/reports/accounts.twig

@@ -1,30 +1,37 @@
 <div class="box">
     <div class="box-header with-border">
-        <i class="fa fa-credit-card fa-fw"></i>
+        <h3 class="box-title">{{ 'accountBalances'|_ }}</h3>
-        {{ 'accountBalances'|_ }}
     </div>
-    <table class="table table-bordered table-striped">
+    <div class="box-body table-responsive no-padding">
+        <table class="table table-hover sortable">
+            <thead>
             <tr>
                 <th>{{ 'name'|_ }}</th>
                 <th>{{ 'balanceStart'|_ }}</th>
                 <th>{{ 'balanceStart'|_ }}</th>
                 <th>{{ 'difference'|_ }}</th>
             </tr>
+            </thead>
+            <tbody>
             {% for account in accounts.getAccounts %}
                 <tr>
                     <td>
                         <a href="{{ route('accounts.show',account.id) }}" title="{{ account.name }}">{{ account.name }}</a>
                     </td>
-                <td>{{ account.startBalance|formatAmount }}</td>
+                    <td data-value="{{ account.startBalance }}">{{ account.startBalance|formatAmount }}</td>
-                <td>{{ account.endBalance|formatAmount }}</td>
+                    <td data-value="{{ account.endBalance }}">{{ account.endBalance|formatAmount }}</td>
-                <td>{{ (account.endBalance - account.startBalance)|formatAmount }}</td>
+                    <td data-value="{{ (account.endBalance - account.startBalance) }}">{{ (account.endBalance - account.startBalance)|formatAmount }}</td>
                 </tr>
             {% endfor %}
+            </tbody>
+            <tfoot>
             <tr>
                 <td><em>{{ 'sumOfSums'|_ }}</em></td>
                 <td>{{ accounts.getStart|formatAmount }}</td>
                 <td>{{ accounts.getEnd|formatAmount }}</td>
                 <td>{{ accounts.getDifference|formatAmount }}</td>
             </tr>
+            </tfoot>
         </table>
     </div>
+</div>

resources/twig/partials/reports/balance.twig

@@ -1,10 +1,11 @@
 <div class="box">
     <div class="box-header with-border">
-        <i class="fa fa-sort-amount-asc fa-fw"></i>
+        <h3 class="box-title">{{ 'budgets'|_ }} ({{ 'splitByAccount'|_|lower }})</h3>
-        {{ 'budgets'|_ }} ({{ 'splitByAccount'|_|lower }})
     </div>
-    <table class="table table-bordered table-striped">
+    <div class="box-body table-responsive no-padding">
+        <table class="table table-hover">
             <!-- build balance report header -->
+            <thead>
             <tr>
                 <th colspan="2">{{ 'budgets'|_ }}</th>
                 {% for account in balance.getBalanceHeader.getAccounts %}
@@ -15,6 +16,8 @@
                 </th>
                 <th>{{ 'sum'|_ }}</th>
             </tr>
+            </thead>
+            <tbody>
 
             <!-- make rows -->
             {% for balanceLine in balance.getBalanceLines %}
@@ -51,7 +54,8 @@
                     </td>
                 </tr>
             {% endfor %}
-
+            </tbody>
         </table>
+    </div>
 
 </div>

resources/twig/partials/reports/bills.twig

@@ -1,9 +1,9 @@
 <div class="box">
     <div class="box-header with-border">
-        <i class="fa fa-calendar-o fa-fw"></i>
+        <h3 class="box-title">{{ 'bills'|_ }}</h3>
-        {{ 'bills'|_ }}
     </div>
-    <table class="table table-bordered table-striped sortable">
+    <div class="box-body table-responsive no-padding">
+        <table class="table table-hover sortable">
             <thead>
             <tr>
                 <th>{{ trans('form.name') }}</th>
@@ -49,3 +49,4 @@
             </tbody>
         </table>
     </div>
+</div>

resources/twig/partials/reports/budgets.twig

@@ -1,10 +1,11 @@
 <div class="box">
 
     <div class="box-header with-border">
-        <i class="fa fa-tasks fa-fw"></i>
+        <h3 class="box-title">{{ 'budgets'|_ }}</h3>
-        {{ 'budgets'|_ }}
     </div>
-    <table class="table table-bordered">
+    <div class="box-body table-responsive no-padding">
+        <table class="table table-hover">
+            <thead>
             <tr>
                 <th>{{ 'budget'|_ }}</th>
                 <th>{{ 'date'|_ }}</th>
@@ -13,6 +14,8 @@
                 <th>{{ 'left'|_ }}</th>
                 <th>{{ 'overspent'|_ }}</th>
             </tr>
+            </thead>
+            <tbody>
             {% for budgetLine in budgets.getBudgetLines %}
                 <tr>
                     <td>
@@ -51,6 +54,8 @@
                     </td>
                 </tr>
             {% endfor %}
+            </tbody>
+            <tfoot>
             <tr>
                 <td colspan="2"><em>{{ 'sum'|_ }}</em></td>
                 <td>{{ budgets.getBudgeted|formatAmount }}</td>
@@ -58,5 +63,7 @@
                 <td>{{ budgets.getLeft|formatAmount }}</td>
                 <td><span class="text-danger">{{ budgets.getOverspent|formatAmountPlain }}</span></td>
             </tr>
+            </tfoot>
         </table>
     </div>
+</div>

resources/twig/partials/reports/categories.twig

@@ -1,13 +1,16 @@
 <div class="box">
     <div class="box-header with-border">
-        <i class="fa fa-bar-chart fa-fw"></i>
+        <h3 class="box-title">{{ 'categories'|_ }}</h3>
-        {{ 'categories'|_ }}
     </div>
-    <table class="table table-bordered">
+    <div class="box-body table-responsive no-padding">
+        <table class="table table-hover">
+            <thead>
             <tr>
                 <th>{{ 'categories'|_ }}</th>
                 <th>{{ 'spent'|_ }}</th>
             </tr>
+            </thead>
+            <tbody>
             {% for cat in categories.getCategories %}
                 <tr>
                     <td>
@@ -16,9 +19,13 @@
                     <td><span class="text-danger">{{ (cat.spent)|formatAmountPlain }}</span></td>
                 </tr>
             {% endfor %}
+            </tbody>
+            <tfoot>
             <tr>
                 <td><em>{{ 'sum'|_ }}</em></td>
                 <td class="text-danger">{{ categories.getTotal|formatAmountPlain }}</td>
             </tr>
+            </tfoot>
         </table>
     </div>
+</div>

resources/twig/partials/reports/expenses.twig

@@ -1,9 +1,10 @@
 <div class="box">
     <div class="box-header with-border">
-        <i class="fa fa-long-arrow-left fa-fw"></i>
+        <h3 class="box-title">{{ 'expenses'|_ }}</h3>
-        {{ 'expenses'|_ }} ({{ trans('firefly.topX',{number: expenseTopLength}) }})
     </div>
-    <table class="table">
+    <div class="box-body table-responsive no-padding">
+        <table class="table table-hover">
+            <tbody>
             {% for expense in expenses.getExpenses %}
                 {% if loop.index > expenseTopLength %}
                     <tr class="collapse out expenseCollapsed">
@@ -13,12 +14,15 @@
                 <td>
                     <a href="{{ route('accounts.show',expense.id) }}">{{ expense.name }}</a>
                     {% if expense.count > 1 %}
-                    <br /><small>{{ expense.count }} {{ 'transactions'|_|lower }}</small>
+                        <br/>
+                        <small>{{ expense.count }} {{ 'transactions'|_|lower }}</small>
                     {% endif %}
                 </td>
                 <td><span class="text-danger">{{ (expense.amount)|formatAmountPlain }}</span></td>
                 </tr>
             {% endfor %}
+            </tbody>
+            <tfoot>
             {% if expenses.getExpenses|length > expenseTopLength %}
                 <tr>
                     <td colspan="2" class="active">
@@ -30,5 +34,7 @@
                 <td><em>{{ 'sum'|_ }}</em></td>
                 <td><span class="text-danger">{{ (expenses.getTotal)|formatAmountPlain }}</span></td>
             </tr>
+            </tfoot>
         </table>
     </div>
+</div>

resources/twig/partials/reports/income-vs-expenses.twig

@@ -1,9 +1,9 @@
 <div class="box">
     <div class="box-header with-border">
-        <i class="fa fa-fw fa-exchange"></i>
+        <h3 class="box-title">{{ 'incomeVsExpenses'|_ }}</h3>
-        {{ 'incomeVsExpenses'|_ }}
     </div>
-    <table class="table table-bordered table-striped">
+    <div class="box-body table-responsive no-padding">
+        <table class="table table-hover">
             <tr>
                 <td>{{ 'in'|_ }}</td>
                 <td>{{ incomes.getTotal|formatAmount }}</td>
@@ -18,3 +18,4 @@
             </tr>
         </table>
     </div>
+</div>

resources/twig/partials/reports/income.twig

@@ -1,9 +1,10 @@
 <div class="box">
     <div class="box-header with-border">
-        <i class="fa fa-long-arrow-right fa-fw"></i>
+        <h3 class="box-title">{{ 'income'|_ }}</h3>
-        {{ 'income'|_ }} ({{ trans('firefly.topX',{number: incomeTopLength}) }})
     </div>
-    <table class="table">
+    <div class="box-body table-responsive no-padding">
+        <table class="table table-hover">
+            <tbody>
             {% for income in incomes.getIncomes %}
                 {% if loop.index > incomeTopLength %}
                     <tr class="collapse out incomesCollapsed">
@@ -13,12 +14,15 @@
                 <td>
                     <a href="{{ route('accounts.show',income.id) }}" title="{{ income.name }}">{{ income.name }}</a>
                     {% if income.count > 1 %}
-                    <br /><small>{{ income.count }} {{ 'transactions'|_|lower }}</small>
+                        <br/>
+                        <small>{{ income.count }} {{ 'transactions'|_|lower }}</small>
                     {% endif %}
                 </td>
                 <td>{{ income.amount|formatAmount }}</td>
                 </tr>
             {% endfor %}
+            </tbody>
+            <tfoot>
             {% if incomes.getIncomes|length > incomeTopLength %}
                 <tr>
                     <td colspan="2" class="active">
@@ -30,5 +34,7 @@
                 <td><em>{{ 'sum'|_ }}</em></td>
                 <td>{{ incomes.getTotal|formatAmount }}</td>
             </tr>
+            </tfoot>
         </table>
     </div>
+</div>

resources/twig/piggy-banks/create.twig

@@ -12,7 +12,7 @@
         <div class="col-lg-6 col-md-12 col-sm-6">
             <div class="box box-primary">
                 <div class="box-header with-border">
-                <i class="fa fa-fw fa-exclamation"></i> {{ 'mandatoryFields'|_ }}
+                    <h3 class="box-title">{{ 'mandatoryFields'|_ }}</h3>
                 </div>
                 <div class="box-body">
 
@@ -26,35 +26,29 @@
         <div class="col-lg-6 col-md-12 col-sm-12">
             <div class="box">
                 <div class="box-header with-border">
-                <i class="fa fa-smile-o"></i> {{ 'optionalFields'|_ }}
+                    <h3 class="box-title">{{ 'optionalFields'|_ }}</h3>
                 </div>
                 <div class="box-body">
                     {{ ExpandedForm.date('targetdate') }}
-                {{ ExpandedForm.checkbox('remind_me','1',false) }}
-                {{ ExpandedForm.select('reminder',periods,'month') }}
                 </div>
             </div>
 
             <!-- panel for options -->
             <div class="box">
                 <div class="box-header with-border">
-                <i class="fa fa-bolt"></i> {{ 'options'|_ }}
+                    <h3 class="box-title">{{ 'options'|_ }}</h3>
                 </div>
                 <div class="box-body">
                     {{ ExpandedForm.optionsList('create','piggy bank') }}
                 </div>
+                <div class="box-footer">
+                    <button type="submit" class="btn btn-success pull-right">
+                        Store new piggy bank
+                    </button>
+                </div>
             </div>
 
         </div>
     </div>
-<div class="row">
+    {{ Form.close|raw }}
-    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
-        <p>
-            <button type="submit" class="btn btn-lg btn-success">
-                <i class="fa fa-plus-circle"></i> Store new piggy bank
-            </button>
-        </p>
-    </div>
-</div>
-</form>
 {% endblock %}

resources/twig/piggy-banks/delete.twig

@@ -10,25 +10,24 @@
         <div class="col-lg-6 col-lg-offset-3 col-md-12 col-sm-12">
             <div class="box box-danger">
                 <div class="box-header with-border">
-                <i class="fa fa-exclamation-circle"></i>
+                    <h3 class="box-title">{{ trans('form.delete_piggyBank', {'name': piggyBank.name}) }}</h3>
-                {{ trans('form.delete_piggyBank', {'name': piggyBank.name}) }}
                 </div>
                 <div class="box-body">
                     <p class="text-danger">
                         {{ trans('form.permDeleteWarning') }}
                     </p>
+
                     <p>
                         {{ trans('form.piggyBank_areYouSure', {'name': piggyBank.name}) }}
                     </p>
-
+                </div>
-                <p>
+                <div class="box-footer">
-                    <input type="submit" name="submit" value="{{ trans('form.deletePermanently') }}" class="btn btn-danger" />
+                    <input type="submit" name="submit" value="{{ trans('form.deletePermanently') }}" class="btn btn-danger pull-right"/>
                     <a href="{{ URL.previous() }}" class="btn-default btn">{{ trans('form.cancel') }}</a>
-                </p>
                 </div>
             </div>
         </div>
     </div>
 
-</form>
+    {{ Form.close|raw }}
 {% endblock %}

resources/twig/piggy-banks/edit.twig

@@ -14,7 +14,7 @@
         <div class="col-lg-6 col-md-12 col-sm-6">
             <div class="box box-primary">
                 <div class="box-header with-border">
-                <i class="fa fa-fw fa-exclamation"></i> {{ 'mandatoryFields'|_ }}
+                    <h3 class="box-title">{{ 'mandatoryFields'|_ }}</h3>
                 </div>
                 <div class="box-body">
 
@@ -29,36 +29,29 @@
         <div class="col-lg-6 col-md-12 col-sm-12">
             <div class="box">
                 <div class="box-header with-border">
-                <i class="fa fa-smile-o"></i> {{ 'optionalFields'|_ }}
+                    <h3 class="box-title">{{ 'optionalFields'|_ }}</h3>
                 </div>
                 <div class="box-body">
                     {{ ExpandedForm.date('targetdate') }}
-                {{ ExpandedForm.checkbox('remind_me','1',preFilled.remind_me) }}
-                {{ ExpandedForm.select('reminder',periods,preFilled.reminder) }}
                 </div>
             </div>
 
             <!-- panel for options -->
             <div class="box">
                 <div class="box-header with-border">
-                <i class="fa fa-bolt"></i> {{ 'options'|_ }}
+                    <h3 class="box-title">{{ 'options'|_ }}</h3>
                 </div>
                 <div class="box-body">
                     {{ ExpandedForm.optionsList('update','piggy bank') }}
                 </div>
-        </div>
+                <div class="box-footer">
-
+                    <button type="submit" class="btn btn-success pull-right">
-    </div>
+                        {{ 'update_piggy_button'|_ }}
-</div>
-<div class="row">
-    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
-        <p>
-            <button type="submit" class="btn btn-lg btn-success">
-                <i class="fa fa-pencil"></i> {{ 'update_piggy_button'|_ }}
                     </button>
-        </p>
                 </div>
             </div>
 
-</form>
+        </div>
+    </div>
+    {{ Form.close|raw }}
 {% endblock %}

resources/twig/piggy-banks/index.twig

@@ -5,20 +5,18 @@
 {% endblock %}
 
 {% block content %}
-    <div class="row">
-        <div class="col-lg-12 col-md-12 col-sm-12">
-            <p>
-                <a href="{{ route('piggy-banks.create') }}" class="btn btn-success"><i class="fa fa-sort-amount-asc fa-fw"></i> {{ 'new_piggy_bank'|_ }}</a>
-            </p>
-        </div>
-    </div>
-
     <div class="row">
         <div class="col-lg-12 col-md-12 col-sm-12">
             <div class="box">
-                <div class="box-header with-border">{{ 'piggyBanks'|_ }}</div>
+                <div class="box-header with-border">
+                    <h3 class="box-title">{{ 'piggyBanks'|_ }}</h3></div>
+                <div class="box-body table-responsive no-padding">
                     {% include 'list/piggy-banks.twig' %}
                 </div>
+                <div class="box-footer">
+                    <a href="{{ route('piggy-banks.create') }}" class="btn btn-success pull-right">{{ 'new_piggy_bank'|_ }}</a>
+                </div>
+            </div>
         </div>
     </div>
 
@@ -26,9 +24,11 @@
         <div class="col-lg-12 col-md-12 col-sm-12">
             <div class="box">
                 <div class="box-header with-border">
-                    <i class="fa fa-fw fa-money"></i> {{ 'account_status'|_ }}
+                    <h3 class="box-title">{{ 'account_status'|_ }}</h3>
                 </div>
-                <table class="table table-striped">
+                <div class="box-body table-responsive no-padding">
+                    <table class="table table-hover">
+                        <thead>
                         <tr>
                             <th>{{ 'account'|_ }}</th>
                             <th>{{ 'balance'|_ }}</th>
@@ -37,6 +37,8 @@
                             <th>{{ 'saved_so_far'|_ }}</th>
                             <th>{{ 'left_to_save'|_ }}</th>
                         </tr>
+                        </thead>
+                        <tbody>
                         {% for id,info in accounts %}
                             <tr>
                                 <td><a href="{{ route('accounts.show',id) }}">{{ info.name }}</a></td>
@@ -47,10 +49,12 @@
                                 <td>{{ info.leftToSave|formatAmount }}</td>
                             </tr>
                         {% endfor %}
+                        </tbody>
                     </table>
                 </div>
             </div>
         </div>
+    </div>
 {% endblock %}
 {% block scripts %}
     <script src="js/jquery-ui.min.js" type="text/javascript"></script>

resources/twig/piggy-banks/show.twig

@@ -9,7 +9,7 @@
         <div class="col-lg-8 col-md-8 col-sm-6">
             <div class="box">
                 <div class="box-header with-border">
-                <i class="fa fa-fw fa-clock-o"></i> {{ 'events'|_ }}
+                    <h3 class="box-title">{{ 'events'|_ }}</h3>
                 </div>
                 <div class="box-body">
                     <div id="piggy-bank-history"></div>
@@ -19,24 +19,22 @@
         <div class="col-lg-4 col-md-4 col-sm-6">
             <div class="box">
                 <div class="box-header with-border">
-                    <i class="fa fa-fw fa-info-circle"></i> {{ 'details'|_ }}
+                    <h3 class="box-title">{{ 'details'|_ }}</h3>
 
                     <!-- ACTIONS MENU -->
-                    <div class="pull-right">
+                    <div class="box-tools pull-right">
+                        <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
                         <div class="btn-group">
-                            <button type="button" class="btn btn-default btn-xs dropdown-toggle" data-toggle="dropdown">
+                            <button class="btn btn-box-tool dropdown-toggle" data-toggle="dropdown"><i class="fa fa-ellipsis-v"></i></button>
-                                {{ 'actions'|_ }}
+                            <ul class="dropdown-menu" role="menu">
-                                <span class="caret"></span>
-                            </button>
-                            <ul class="dropdown-menu pull-right" role="menu">
                                 <li><a href="{{ route('piggy-banks.edit', piggyBank.id) }}"><i class="fa fa-pencil fa-fw"></i> {{ 'edit'|_ }}</a></li>
                                 <li><a href="{{ route('piggy-banks.delete', piggyBank.id) }}"><i class="fa fa-trash fa-fw"></i> {{ 'delete'|_ }}</a></li>
                             </ul>
                         </div>
                     </div>
-
                 </div>
-                    <table class="table table-bordered table-striped">
+                <div class="box-body table-responsive no-padding">
+                    <table class="table table-hover">
                         <tr>
                             <td>{{ 'account'|_ }}</td>
                             <td><a href="{{ route('accounts.show', piggyBank.account_id) }}">{{ piggyBank.account.name }}</a></td>
@@ -90,23 +88,18 @@
                                 </td>
                             </tr>
                         {% endif %}
-                            <tr>
-                                <td>{{ 'reminders_left'|_ }}</td>
-                                <td>{{ 'todo'|_ }}</td>
-                            </tr>
-                            <tr>
-                                <td>{{ 'expected_amount_per_reminder'|_ }}</td>
-                                <td>{{ 'todo'|_ }}</td>
-                            </tr>
                     </table>
                 </div>
+            </div>
             <div class="box">
                 <div class="box-header with-border">
-                    <i class="fa fa-fw fa-clock-o"></i> {{ 'table'|_ }}
+                    <h3 class="box-title">{{ 'table'|_ }}</h3>
                 </div>
+                <div class="box-body table-responsive no-padding">
                     {% include 'list/piggy-bank-events' %}
                 </div>
             </div>
+        </div>
 
     </div>
 {% endblock %}

resources/twig/preferences/index.twig

@@ -11,7 +11,7 @@
     <div class="col-lg-6 col-md-6 col-sm-6">
         <div class="box">
           <div class="box-header with-border">
-                <i class="fa fa-credit-card fa-fw"></i> Home screen accounts
+                <h3 class="box-title">Home screen accounts</h3>
             </div>
             <div class="box-body">
                 <p class="text-info">Which accounts should be displayed on the home page?</p>
@@ -34,7 +34,7 @@
         </div>
         <div class="box">
             <div class="box-header with-border">
-                <i class="fa fa-credit-card fa-fw"></i> Budget settings
+                <h3 class="box-title">Budget settings</h3>
             </div>
             <div class="box-body">
                 <p class="text-info">
@@ -48,7 +48,7 @@
     <div class="col-lg-6 col-md-6 col-sm-6">
         <div class="box">
           <div class="box-header with-border">
-                <i class="fa fa-clock-o fa-fw"></i> View range
+                <h3 class="box-title">View range</h3>
             </div>
             <div class="box-body">
                 <p class="text-info">Some charts are automatically grouped in periods. What period would you prefer?</p>
@@ -92,9 +92,10 @@
     <div class="col-lg-6 col-md-6 col-sm-6">
         <div class="box">
             <div class="box-header with-border">
-                <i class="fa fa-flag fa-fw"></i> Languages
+                <h3 class="box-title">Languages</h3>
             </div>
             <div class="box-body">
+                <p class="text-info">Firefly III supports several languages. Which one do you prefer?</p>
                 {% for key, lang in Config.get('firefly.lang') %}
                     <div class="radio">
                         <label>

resources/twig/profile/change-password.twig

@@ -5,11 +5,13 @@
 {% endblock %}
 
 {% block content %}
+    {{ Form.open({'class' : 'form-horizontal','id' : 'change-password'}) }}
+
     <div class="row">
         <div class="col-lg-6 col-md-12 col-sm-12">
             <div class="box box-primary">
                 <div class="box-header with-border">
-                Change your password
+                    <h3 class="box-title">Change your password</h3>
                 </div>
                 <div class="box-body">
 
@@ -25,9 +27,9 @@
                     {% endif %}
 
 
-                {{ Form.open({'class' : 'form-horizontal','id' : 'change-password'}) }}
                     <div class="form-group">
                         <label for="inputOldPassword" class="col-sm-4 control-label">Old password</label>
+
                         <div class="col-sm-8">
                             <input type="password" class="form-control" id="inputOldPassword" placeholder="Old password" name="current_password">
                         </div>
@@ -35,6 +37,7 @@
 
                     <div class="form-group">
                         <label for="inputNewPassword1" class="col-sm-4 control-label">New password</label>
+
                         <div class="col-sm-8">
                             <input type="password" class="form-control" id="inputNewPassword1" placeholder="New password" name="new_password">
                         </div>
@@ -42,18 +45,20 @@
 
                     <div class="form-group">
                         <label for="inputNewPassword2" class="col-sm-4 control-label">New password (again)</label>
+
                         <div class="col-sm-8">
-                            <input type="password" class="form-control" id="inputNewPassword2" placeholder="New password (again)" name="new_password_confirmation">
+                            <input type="password" class="form-control" id="inputNewPassword2" placeholder="New password (again)"
+                                   name="new_password_confirmation">
                         </div>
                     </div>
-                    <div class="form-group">
+
-                        <div class="col-sm-offset-4 col-sm-10">
+
-                            <button type="submit" class="btn btn-success">Change your password</button>
                 </div>
-                    </div>
+                <div class="box-footer">
-                </form>
+                    <button type="submit" class="btn btn-success pull-right">Change your password</button>
                 </div>
             </div>
         </div>
     </div>
+    {{ Form.close|raw }}
 {% endblock %}

resources/twig/profile/delete-account.twig

@@ -5,11 +5,13 @@
 {% endblock %}
 
 {% block content %}
+    {{ Form.open({'class' : 'form-horizontal','id' : 'change-password'}) }}
+
     <div class="row">
         <div class="col-lg-6 col-md-12 col-sm-12">
             <div class="box box-danger">
                 <div class="box-header with-border">
-                Delete your account
+                    <h3 class="box-title">Delete your account</h3>
                 </div>
                 <div class="box-body">
 
@@ -17,6 +19,7 @@
                         Deleting your account will also delete any accounts, transactions, <em>anything</em>
                         you might have saved into Firefly III. It'll be GONE.
                     </p>
+
                     <p class="text-danger">
                         Enter your password to continue.
                     </p>
@@ -32,22 +35,21 @@
 
                     {% endif %}
 
-                {{ Form.open({'class' : 'form-horizontal','id' : 'change-password'}) }}
                     <div class="form-group">
                         <label for="password" class="col-sm-4 control-label">Password</label>
+
                         <div class="col-sm-8">
                             <input type="password" class="form-control" id="password" placeholder="Password" name="password">
                         </div>
                     </div>
+                </div>
+                <div class="box-footer">
+                    <button type="submit" onclick="confirm('Are you sure? You cannot undo this.')" class="btn btn-danger pull-right">DELETE your account
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+    {{ Form.close|raw }}
 
-                    <div class="form-group">
-                        <div class="col-sm-offset-4 col-sm-10">
-                            <button type="submit" onclick="confirm('Are you sure? You cannot undo this.')" class="btn btn-danger">DELETE your account</button>
-                        </div>
-                    </div>
-                </form>
-            </div>
-        </div>
-    </div>
-</div>
 {% endblock %}

resources/twig/profile/index.twig

@@ -6,15 +6,15 @@
 
 {% block content %}
 <div class="row">
-    <div class="col-lg-6 col-md-12 col-sm-12">
+    <div class="col-lg-6 col-lg-offset-3 col-md-6 col-sm-12">
         <div class="box box-primary">
             <div class="box-header with-border">
-                Options
+                <h3 class="box-title">Options</h3>
             </div>
             <div class="box-body">
                 <ul>
-                    <li><a href="{{route('change-password')}}">Change your password</a></li>
+                    <li><a href="{{route('profile.change-password')}}">Change your password</a></li>
-                    <li><a class="text-danger" href="{{route('delete-account')}}">Delete account</a></li>
+                    <li><a class="text-danger" href="{{route('profile.delete-account')}}">Delete account</a></li>
                 </ul>
             </div>
         </div>

resources/twig/reminders/index.twig

@@ -1,41 +1,7 @@
 {% extends "./layout/default.twig" %}
 
-{% block breadcrumbs %}
+<p>
-    {{ Breadcrumbs.renderIfExists(Route.getCurrentRoute.getName) }}
+    No longer used.
-{% endblock %}
+</p>
-
-{% block content %}
-
-<div class="row">
-    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
-        <h3>Active reminders</h3>
-    </div>
-</div>
-
-    {% include 'list/reminders.twig' with {'reminders': active} %}
-
-<div class="row">
-    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
-        <h3>Dismissed reminders</h3>
-    </div>
-</div>
-
-    {% include 'list/reminders.twig' with {'reminders': dismissed} %}
-
-<div class="row">
-    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
-        <h3>Expired reminders</h3>
-    </div>
-</div>
-
-    {% include 'list/reminders.twig' with {'reminders': expired} %}
-
-<div class="row">
-    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
-        <h3>Inactive reminders</h3>
-    </div>
-</div>
-
-    {% include 'list/reminders.twig' with {'reminders': inactive} %}
 
 {% endblock %}

resources/twig/reminders/show.twig

@@ -1,44 +1,5 @@
 {% extends "./layout/default.twig" %}
-
-{% block breadcrumbs %}
-    {{ Breadcrumbs.renderIfExists(Route.getCurrentRoute.getName, reminder) }}
-{% endblock %}
-
-{% block content %}
-<div class="row">
-    <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
-        <div class="box">
-            <div class="box-header with-border">
-                <a href="{{route('reminders.show',reminder.id)}}">
-                {% if reminder.notnow %}
-                    Dismissed reminder
-                {% else %}
-                    Reminder
-                {% endif %}
-                for piggy bank "{{reminder.remindersable.name}}"
-                </a>
-            </div>
-            <div class="box-body">
 <p>
-                    Active between {{reminder.startdate.format('jS F Y')}}
+    No longer used.
-                    and {{reminder.enddate.format('jS F Y')}}.
 </p>
-
-                {% if reminder.description %}
-                    <p>{!! reminder.description !!}</p>
-                {% endif %}
-            </div>
-            <div class="panel-footer">
-                    <div class="btn-group">
-                        {% if not reminder.notnow %}
-                            <a class="btn btn-warning" href="{{route('reminders.dismiss',reminder.id)}}">Dismiss</a>
-                        {% endif %}
-                        {% if reminder.active %}
-                            <a class="btn btn-success" href="{{route('reminders.act',reminder.id)}}">Act</a>
-                        {% endif %}
-                    </div>
-            </div>
-        </div>
-    </div>
-</div>
 {% endblock %}

resources/twig/reports/index.twig

@@ -9,8 +9,7 @@
         <div class="col-lg-12 col-md-12 col-sm-12">
             <div class="box">
                 <div class="box-header with-border">
-                    <i class="fa fa-calendar fa-fw"></i>
+                    <h3 class="box-title">{{ 'reportsOwnAccounts'|_ }}</h3>
-                    {{ 'reportsOwnAccounts'|_ }}
                 </div>
                 <div class="box-body">
 
@@ -31,8 +30,7 @@
         <div class="col-lg-12 col-md-12 col-sm-12">
             <div class="box">
                 <div class="box-header with-border">
-                    <i class="fa fa-calendar fa-fw"></i>
+                    <h3 class="box-title">{{ 'reportsOwnAccountsAndShared'|_ }}</h3>
-                    {{ 'reportsOwnAccountsAndShared'|_ }}
                 </div>
                 <div class="box-body">
 

resources/twig/reports/month.twig

@@ -10,8 +10,7 @@
         <div class="col-lg-12 col-md-12 col-sm-12">
             <div class="box">
                 <div class="box-header with-border">
-                    <i class="fa fa-line-chart"></i>
+                    <h3 class="box-title">{{ 'accountBalances'|_ }}</h3>
-                    {{ 'accountBalances'|_ }}
                 </div>
                 <div class="box-body">
                     <div id="account-balances-chart"></div>
@@ -60,20 +59,14 @@
 
     </div>
 </div>
-<div class="row">
+{% endblock %}
-    <div class="col-lg-12 col-md-12 col-sm-12">
+{% block styles %}
-        <div class="box">
+    <link rel="stylesheet" href="css/bootstrap-sortable.css" type="text/css" media="all" />
-            <div class="box-header with-border">
-                <i class="fa fa-fw fa-folder-o"></i>
-                {{ 'outsideOfBudgets'|_ }}
-            </div>
-            <div class="box-body">Body</div>
-        </div>
-    </div>
-</div>
 {% endblock %}
 {% block scripts %}
 
+    <script type="text/javascript" src="js/bootstrap-sortable.js"></script>
+
     <!-- load the libraries and scripts necessary for Google Charts: -->
     <script type="text/javascript" src="https://www.google.com/jsapi"></script>
     <script type="text/javascript" src="js/gcharts.options.js"></script>

resources/twig/reports/year.twig

@@ -10,8 +10,7 @@
         <div class="col-lg-10 col-md-8 col-sm-12">
             <div class="box">
                 <div class="box-header with-border">
-                    <i class="fa fa-line-chart"></i>
+                    <h3 class="box-title">{{ 'incomeVsExpenses'|_ }}</h3>
-                    {{ 'incomeVsExpenses'|_ }}
                 </div>
                 <div class="box-body">
                     <div id="income-expenses-chart"></div>
@@ -21,8 +20,7 @@
         <div class="col-lg-2 col-md-4 col-sm-12">
             <div class="box">
                 <div class="box-header with-border">
-                    <i class="fa fa-calendar"></i>
+                    <h3 class="box-title">{{ 'incomeVsExpenses'|_ }}</h3>
-                    {{ 'incomeVsExpenses'|_ }}
                 </div>
                 <div class="box-body">
                     <div id="income-expenses-sum-chart"></div>
@@ -48,8 +46,7 @@
         <div class="col-lg-12 col-md-12 col-sm-12">
             <div class="box">
                 <div class="box-header with-border">
-                    <i class="fa fa-tasks fa-fw"></i>
+                    <h3 class="box-title">{{ 'categories'|_ }}</h3>
-                    {{ 'categories'|_ }}
                 </div>
                 <div class="box-body">
                     <div id="categories"></div>
@@ -61,8 +58,7 @@
         <div class="col-lg-12 col-md-12 col-sm-12">
             <div class="box">
                 <div class="box-header with-border">
-                    <i class="fa fa-tasks fa-fw"></i>
+                    <h3 class="box-title">{{ 'budgets'|_ }}</h3>
-                    {{ 'budgets'|_ }}
                 </div>
                 <div class="box-body">
                     <div id="budgets"></div>

resources/twig/tags/show.twig

@@ -86,10 +86,12 @@
                     </div>
                 </div>
             </div>
+            <div class="box-body table-responsive no-padding">
                 {% include 'list/journals.twig' with {'journals': tag.transactionjournals} %}
             </div>
         </div>
     </div>
+</div>
 
 {% endblock %}
 {% block scripts %}