Colors for budget thresholds

src/main/resources/static/app/transaction-list.html

@@ -2,9 +2,13 @@
 	<div class="row">
 	
 		<div class="budgetArea">
-			Monat: <span class="budgetCalculation"><span ng-bind="transaction.category.spentMtl"></span> / <span ng-bind="transaction.category.budgetMtl"></span> € (<span ng-bind="transaction.category.percentageMtl"></span>%)</span>
+			Monat: <span class="budgetCalculation" ng-class="{'budgetCritical': transaction.category.percentageMtl > 80, 'budgetOverdraft': transaction.category.percentageMtl > 100}"><span ng-bind="transaction.category.spentMtl"></span>&nbsp;/&nbsp;
+			<span ng-bind="transaction.category.budgetMtl"></span>&nbsp;€&nbsp;&nbsp;
+			<span class="budgetPercentage"><span ng-bind="transaction.category.percentageMtl"></span>%</span></span>
 			<br/>
-			Jahr: <span class="budgetCalculation"><span ng-bind="transaction.category.spentYrl"></span> / <span ng-bind="transaction.category.budget"></span> € (<span ng-bind="transaction.category.percentageYrl"></span>%)</span>
+			Jahr: <span class="budgetCalculation" ng-class="{'budgetCritical': transaction.category.percentageYrl > 80, 'budgetOverdraft': transaction.category.percentageYrl > 100}"><span ng-bind="transaction.category.spentYrl"></span>&nbsp;/&nbsp;
+			<span ng-bind="transaction.category.budget"></span>&nbsp;€&nbsp;&nbsp;
+			<span class="budgetPercentage"><span ng-bind="transaction.category.percentageYrl"></span>%</span></span>
 		</div>
 	
 		<div ng-show="accounts.length > 1">

src/main/resources/static/css/app.css

@@ -28,6 +28,18 @@ label {
 	color: white;
 }
 
+.budgetPercentage {
+	font-weight: bold;
+}
+
+.budgetCritical {
+	color: #f57900;
+}
+
+.budgetOverdraft {
+	color: #CC0000;
+}
+
 .modal-body label {
 	color: #aaa;
 }