First functional run of new layout.

public/js/gcharts.js

@@ -1,4 +1,4 @@
-/* globals currencyCode, language, defaultPieChartOptions, defaultLineChartOptions, defaultColumnChartOptions, defaultBarChartOptions, defaultStackedColumnChartOptions, defaultComboChartOptions */
+/* globals currencyCode,defaultAreaChartOptions , language, defaultPieChartOptions, defaultLineChartOptions, defaultColumnChartOptions, defaultBarChartOptions, defaultStackedColumnChartOptions, defaultComboChartOptions */
 /* exported googleLineChart, googleBarChart, googleColumnChart, googleStackedColumnChart, googleComboChart, googlePieChart */
 var google = google || {};
 google.load('visualization', '1.1', {'packages': ['corechart', 'bar', 'line'],'language': language  });
@@ -33,6 +33,11 @@ function googleChart(chartType, URL, container, options) {
                 chart = new google.visualization.LineChart(document.getElementById(container));
                 options = options || defaultLineChartOptions;
             }
+            if(chartType === 'area') {
+                chart = new google.visualization.AreaChart(document.getElementById(container));
+                options = options || defaultAreaChartOptions;
+            }
+
             if (chartType === 'column') {
                 chart = new google.visualization.ColumnChart(document.getElementById(container));
                 options = options || defaultColumnChartOptions;
@@ -74,6 +79,11 @@ function googleLineChart(URL, container, options) {
     return googleChart('line', URL, container, options);
 }
 
+function googleAreaChart(URL, container, options) {
+    "use strict";
+    return googleChart('area', URL, container, options);
+}
+
 
 function googleBarChart(URL, container, options) {
     "use strict";

public/js/gcharts.options.js

@@ -1,4 +1,4 @@
-/* exported defaultLineChartOptions, defaultBarChartOptions, defaultComboChartOptions, defaultColumnChartOptions, defaultStackedColumnChartOptions, defaultPieChartOptions  */
+/* exported defaultLineChartOptions, defaultAreaChartOptions, defaultBarChartOptions, defaultComboChartOptions, defaultColumnChartOptions, defaultStackedColumnChartOptions, defaultPieChartOptions  */
 
 var defaultLineChartOptions = {
     curveType: 'function',
@@ -35,6 +35,43 @@ var defaultLineChartOptions = {
     }
 
 
+};
+
+var defaultAreaChartOptions = {
+    curveType: 'function',
+    legend: {
+        position: 'none'
+    },
+    interpolateNulls: true,
+    lineWidth: 1,
+    chartArea: {
+        left: 50,
+        top: 10,
+        width: '85%',
+        height: '80%'
+    },
+    height: 400,
+    colors: ["#357ca5", "#008d4c", "#db8b0b", "#ca195a", "#555299", "#4285f4", "#db4437", "#f4b400", "#0f9d58", "#ab47bc", "#00acc1", "#ff7043", "#9e9d24", "#5c6bc0", "#f06292", "#00796b", "#c2185b"],
+    hAxis: {
+        textStyle: {
+            color: '#838383',
+        },
+        baselineColor: '#aaaaaa',
+        gridlines: {
+            color: 'transparent'
+        }
+    },
+    fontName: 'Roboto',
+    fontSize: 11,
+    vAxis: {
+        textStyle: {
+            color: '#838383',
+        },
+        baselineColor: '#aaaaaa',
+        format: '\u20AC #'
+    }
+
+
 };
 
 var defaultBarChartOptions = {
@@ -119,7 +156,7 @@ var defaultColumnChartOptions = {
         baselineColor: '#aaaaaa'
 
     },
-    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"],
     vAxis: {
         textStyle: {
             color: '#838383',
@@ -146,7 +183,7 @@ var defaultStackedColumnChartOptions = {
     fontName: 'Roboto',
     fontSize: 11,
     isStacked: true,
-    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',
@@ -176,6 +213,6 @@ var defaultPieChartOptions = {
     legend: {
         position: 'none'
     },
-    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"],
 };
 

public/js/index.js

@@ -4,7 +4,7 @@ google.setOnLoadCallback(drawChart);
 
 function drawChart() {
     "use strict";
-    googleLineChart('chart/account/frontpage', 'accounts-chart');
+    googleAreaChart('chart/account/frontpage', 'accounts-chart');
     googlePieChart('chart/bill/frontpage', 'bills-chart');
     googleStackedColumnChart('chart/budget/frontpage', 'budgets-chart');
     googleColumnChart('chart/category/frontpage', 'categories-chart');

resources/twig/accounts/index.twig

@@ -17,7 +17,7 @@
     <div class="col-lg-12 col-md-12 col-sm-12">
         <div class="box">
             <div class="box-header with-border">
-                <i class="fa {{ subTitleIcon }}"></i> {{ subTitle}}
+                <h3 class="box-title">{{ subTitle}}</h3>
 
                 <!-- ACTIONS MENU -->
                 <div class="pull-right">
@@ -34,7 +34,9 @@
 
 
             </div>
-            {% include 'list/accounts.twig' %}
+            <div class="box-body table-responsive no-padding">
+                {% include 'list/accounts.twig' %}
+            </div>
         </div>
     </div>
 </div>

resources/twig/index.twig

@@ -72,12 +72,12 @@
                                 {% if account.difference < 0 %}
                                     <!-- green (100-pct), then red (pct) -->
                                     <div class="progress">
-                                        <div class="progress-bar progress-bar-success progress-bar-striped" style="width: {{ 100 - account.percentage }}%">
+                                        <div class="progress-bar progress-bar-success" style="width: {{ 100 - account.percentage }}%">
                                             {% if account.percentage <= 50 %}
                                                 {{account.difference|formatAmountPlain}}
                                             {% endif %}
                                         </div>
-                                        <div class="progress-bar progress-bar-danger progress-bar-striped" style="width: {{ account.percentage }}%">
+                                        <div class="progress-bar progress-bar-danger" style="width: {{ account.percentage }}%">
                                             {% if account.percentage > 50 %}
                                                 {{account.difference|formatAmountPlain}}
                                             {% endif %}
@@ -86,13 +86,13 @@
                                     {% else %}
                                     <!-- green (pct), then blue (100-pct) -->
                                     <div class="progress">
-                                        <div class="progress-bar progress-bar-success progress-bar-striped" style="width: {{account.percentage}}%">
+                                        <div class="progress-bar progress-bar-success" style="width: {{account.percentage}}%">
                                             {% if account.percentage <= 50 %}
                                                 {{account.difference|formatAmountPlain}}
                                                 {{account.difference|formatAmountPlain}}
                                             {% endif %}
                                         </div>
-                                        <div class="progress-bar progress-bar-info progress-bar-striped" style="width: {{100 - account.percentage}}%">
+                                        <div class="progress-bar progress-bar-info" style="width: {{100 - account.percentage}}%">
                                             {% if account.percentage > 50 %}
                                                 {{account.difference|formatAmountPlain}}
                                             {% endif %}
@@ -177,7 +177,7 @@
         {% for data in transactions %}
         <div class="box">
             <div class="box-header with-border">
-                <h3 class="box-title">{{data[1].name}} ({{ (data[1]|balance)|formatAmount }})</h3>
+                <h3 class="box-title">{{data[1].name}}</h3>
 
                 <!-- ACTIONS MENU -->
                 <div class="box-tools pull-right">
@@ -195,7 +195,7 @@
 
 
             </div>
-            <div class="box-body">
+            <div class="box-body no-padding">
                 {% include 'list/journals-tiny.twig' with {'transactions': data[0],'account': data[1]} %}
             </div>
             <div class="box-footer clearfix">

resources/twig/layout/default.twig

@@ -204,29 +204,13 @@
 
 </div><!-- ./wrapper -->
 
-<!-- jQuery 2.1.4 -->
+<script src="js/jquery-2.1.3.min.js" type="text/javascript"></script>
-<script src="plugins/jQuery/jQuery-2.1.4.min.js"></script>
-<!-- Bootstrap 3.3.2 JS -->
 <script src="bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
-<!-- FastClick -->
+<script src="js/daterangepicker.js" type="text/javascript"></script>
-<script src='plugins/fastclick/fastclick.min.js'></script>
-<!-- AdminLTE App -->
 <script src="dist/js/app.min.js" type="text/javascript"></script>
-<!-- Sparkline -->
-<script src="plugins/sparkline/jquery.sparkline.min.js" type="text/javascript"></script>
-<!-- jvectormap -->
-<script src="plugins/jvectormap/jquery-jvectormap-1.2.2.min.js" type="text/javascript"></script>
-<script src="plugins/jvectormap/jquery-jvectormap-world-mill-en.js" type="text/javascript"></script>
-<!-- SlimScroll 1.3.0 -->
-<script src="plugins/slimScroll/jquery.slimscroll.min.js" type="text/javascript"></script>
-<!-- ChartJS 1.0.1 -->
-<script src="plugins/chartjs/Chart.min.js" type="text/javascript"></script>
 
 <script src="js/moment.min.js" type="text/javascript"></script>
 
-<!-- AdminLTE dashboard demo (This is only for demo purposes) -->
-<script src="dist/js/pages/dashboard2.js" type="text/javascript"></script>
-
 <script type="text/javascript">
     var start = "{{Session.get('start').format('d-m-Y')}}";
     var end = "{{Session.get('end').format('d-m-Y')}}";

resources/twig/list/accounts.twig

@@ -1,4 +1,4 @@
-<table class="table table-striped table-bordered sortable">
+<table class="table table-hover sortable">
     <thead>
     <tr>
         <th data-defaultsort="disabled">&nbsp;</th>

resources/twig/tags/index.twig

@@ -87,35 +87,11 @@
 
 </div>
 
+    <p>
+        <a href="{{route('tags.create')}}" title="New tag" class="btn btn-info"><i class="fa fa-fw fa-plus"></i> Create new tag</a>
+    </p>
 
-                <p>
-                    <a href="{{route('tags.create')}}" title="New tag" class="btn btn-info"><i class="fa fa-fw fa-plus"></i> Create new tag</a>
-                </p>
-                <p style="line-height: 200%;">
-                    {% if tags|length == 0 %}
-                        <em>No tags</em>
-                    {% else %}
-                        {% for tag in tags %}
 
-                            <span style="display: inline;"><a style="font-size:100%;font-weight:normal;" class="label label-success" href="{{route('tags.show',tag.id)}}">
-                                {% if tag.tagMode == 'nothing' %}
-                                    <i class="fa fa-fw fa-tag"></i>
-                                {% endif %}
-                                {% if tag.tagMode == 'balancingAct' %}
-                                        <i class="fa fa-fw fa-refresh"></i>
-                                {% endif %}
-                                {% if tag.tagMode == 'advancePayment' %}
-                                    <i class="fa fa-fw fa-sort-numeric-desc"></i>
-                                {% endif %}
-                                {{tag.tag}}</a>
-                            </span>
-                        {% endfor %}
-                    {% endif %}
-                </p>
-            </div>
-        </div>
-    </div>
-</div>
 {% endblock %}
 {% block scripts %}
 <script type="text/javascript" src="js/tags.js"></script>

tests/repositories/TagRepositoryTest.php

@@ -218,9 +218,7 @@ class TagRepositoryTest extends TestCase
 
         $journal1->tags()->save($tag);
 
-        echo "\nMark 1 start.\n";
         $result = $this->object->connect($journal2, $tag);
-        echo "\nMark 2 end.\n";
 
         $this->assertTrue($result);