bigger text for previsionnel

app/Resources/views/logged/previsionnel.html.twig

@@ -33,16 +33,25 @@
                             <div class="row">
                                     <div class="col-xs-12 col-sm-6">
                                         <p >
+<label for="dispo">
 
                                 Euros disponibles au départ:
+</label>
                                 <input
+                                id="dispo"
+                                class="big-number"
                                 type="number"
                                 ng-model="config.disponibility"
                                 ng-change="save()"
                                 ng-model-options="{ debounce: config.debounceTime }">
                                 <br>
+                                <label for="gains">
                                  Gains moyen par mois:
+</label>
+
                                 <input type="number"
+                                class="big-number"
+                                id="gains"
                                  ng-model="config.averageMonthlyEarnings"
                                  ng-change="save()"
                                  ng-model-options="{ debounce: config.debounceTime }">
@@ -57,12 +66,16 @@
                             <div class="col-xs-12 col-sm-6">
                             <p>
                                 <strong>
-                                    Dépenses mensuelles: {{ sumMonthlyExpenses() }} €
+                                    Dépenses mensuelles:
+                                    <span class="big-number">
+
+                                    {{ sumMonthlyExpenses() }} €
+                                    </span>
                                 </strong>
                             </p>
                             <p>
                                 <strong>
-                                    Bénef mensuel: {{ config.averageMonthlyEarnings - sumMonthlyExpenses() }} €
+                                    Bénef mensuel: <span class="big-number">{{ config.averageMonthlyEarnings - sumMonthlyExpenses() }} €</span>
                                 </strong>
                             </p>
                             <p>
@@ -81,7 +94,7 @@
                                 Indiquez les catégories de dépenses mensuelles que vous faites pour faire évoluer la
                                 simulation de budget restant dans plusieurs mois.
                             </p>
-                            <table class="exepnse-table">
+                            <table class="exepanse-table">
                                 <thead>
                                 <tr>
                                     <td class="padded" >
@@ -181,8 +194,12 @@
                         <div class="" id="simulationPrevision"  style="display: inline-block; height: 300px; width: 90%;">(graphique)</div>
 
                         <!--block to insert the graph-->
-                        <div class="well" ng-if="config.monthsBeforeNoMoney < config.lines">
+                        <div class="well big-number" ng-if="config.monthsBeforeNoMoney && config.monthsBeforeNoMoney <= config.lines">
+                        <i class="fa fa-warning"></i>
                         Ce sera la dèche dans {{config.monthsBeforeNoMoney}} mois
+</div>
+<div ng-if=" ! config.monthsBeforeNoMoney" class="bg-success padded">
+  cool ! votre plan est supportable dans le temps
 </div>
                         <table>
                             <thead>

assets/css/pages/global.scss

@@ -118,4 +118,26 @@ label {
 .bgsuccess {
   background: greenyellow;
   color: #000000;
+}
+
+.previsionnel {
+  .config {
+    font-size: 1.5rem;
+  }
+  thead {
+    font-size: 1.5rem;
+  }
+  label {
+    min-width: 220px;
+  }
+  .exepanse-table {
+    font-size: 1.5rem;
+  }
+  .examples-depenses {
+    font-size: 1.5rem;
+  }
+  .big-number {
+    font-size: 2.5rem;
+    color: #2B2d42;
+  }
 }

assets/js/parts/main.js

@@ -273,6 +273,7 @@ angular
             let available = $scope.config.disponibility;
             let previsionTable = [];
             let changedNoMoneyConfig = false;
+            $scope.config.monthsBeforeNoMoney = null;
             for (let i = 0; i <= turns; i++) {
                 // TODO take in account delays in expenses
                 available = available - monthly + $scope.config.averageMonthlyEarnings;
@@ -280,6 +281,7 @@ angular
                     expense: monthly,
                     available: available,
                 };
+
                 if (available <= 0 && !changedNoMoneyConfig) {
                     $scope.config.monthsBeforeNoMoney = i;
                     changedNoMoneyConfig = true;