UX: Better use of flex-table and tables in budget twig templates

src/Bundle/ChillBudgetBundle/Resources/views/Budget/_budget.html.twig

@@ -32,28 +32,21 @@
     {% endif %}
 {% endfor %}
 
-
 <h3 class="subtitle">{{ 'Actual budget'|trans }}</h3>
-
 {% if actualCharges|length > 0 or actualResources|length > 0 %}
-    {% include 'ChillBudgetBundle:Budget:_current_budget.html.twig' with {
+    {% include '@ChillBudget/Budget/_current_budget.html.twig' with {
         'actualResources': actualResources,
         'actualCharges': actualCharges,
         'results': results,
         'entity': entity
     } %}
 {% else %}
-    <div class="flex-table">
+    <p><span class="chill-no-data-statement">{{ "There isn't any element recorded"|trans }}</span></p>
-        <div class="item-bloc">
-            <p><span class="chill-no-data-statement">{{ "There isn't any element recorded"|trans }}</span></p>
-        </div>
-    </div>
 {% endif %}
 
 {% if pastCharges|length > 0 or pastResources|length > 0 %}
-    <h2 class="subtitle">{{ 'Past budget'|trans }}</h2>
+    <h3 class="subtitle">{{ 'Past budget'|trans }}</h3>a
-
+    {% include '@ChillBudget/Budget/_past_budget.html.twig' with {
-    {% include 'ChillBudgetBundle:Budget:_past_budget.html.twig' with {
         'pastCharges': pastCharges,
         'pastResources': pastResources,
         'entity': entity
@@ -61,9 +54,8 @@
 {% endif %}
 
 {% if futureCharges|length > 0 or futureResources|length > 0 %}
-    <h2 class="subtitle">{{ 'Future budget'|trans }}</h2>
+    <h3 class="subtitle">{{ 'Future budget'|trans }}</h3>
-
+    {% include '@ChillBudget/Budget/_future_budget.html.twig' with {
-    {% include 'ChillBudgetBundle:Budget:_future_budget.html.twig' with {
         'futureResources': futureResources,
         'futureCharges': futureCharges,
         'entity': entity

src/Bundle/ChillBudgetBundle/Resources/views/Budget/_current_budget.html.twig

@@ -1,30 +1,21 @@
-{% from 'ChillBudgetBundle:Budget:_macros.html.twig' import table_elements, table_results %}
+{% from '@ChillBudget/Budget/_macros.html.twig' import table_elements, table_results %}
 
 {# <h2 class="subtitle">{{ 'Actual budget'|trans }}</h2> #}
 
-<div class="flex-table">
+<div class="mb-2">
     <h4 class="family-title">{{ 'Actual resources'|trans }}</h4>
-
     {% if actualResources|length > 0 %}
-    <div class="item-bloc">
         {{ table_elements(actualResources, 'resource') }}
-    </div>
     {% else %}
-    <div class="item-bloc">
         <span class="chill-no-data-statement">{{ 'No resources registered'|trans }}</span>
-    </div>
     {% endif %}
 </div>
 
-<div class="flex-table">
+<div class="mb-2">
     <h4 class="family-title">{{ 'Actual charges'|trans }}</h4>
     {% if actualCharges|length > 0 %}
-    <div class="item-bloc">
         {{ table_elements(actualCharges, 'charge') }}
-    </div>
     {% else %}
-    <div class="item-bloc">
         <span class="chill-no-data-statement">{{ 'No charges registered'|trans }}</span>
-    </div>
     {% endif %}
 </div>

src/Bundle/ChillBudgetBundle/Resources/views/Budget/_macros.html.twig

@@ -1,5 +1,5 @@
 {% macro table_elements(elements, family) %}
-<table class="budget-table">
+<table class="table table-bordered border-dark budget-table">
     <thead>
         <tr>
             <th class="{{ family }} el-type">{{ 'Budget element type'|trans }}</th>
@@ -28,7 +28,7 @@
                 {% if f.endDate is not null %}
                     {{ f.startDate|format_date('short') ~ ' - ' ~ f.endDate|format_date('short') }}
                 {% else %}
-                    {{ f.startDate|format_date('short') ~ ' - ...' }}
+                    {{ 'depuis le  ' ~ f.startDate|format_date('short') }}
                 {% endif %}
             </td>
             <td class="column-small">
@@ -80,10 +80,9 @@
 
 {% set result = (totalResources - totalCharges) %}
 
-<table>
+<table class="table table-bordered border-dark">
     <thead>
         <tr>
-            <th>&nbsp;</th>
             <th>&nbsp;</th>
             <th>{{ 'Budget calculator result'|trans }}</th>
         </tr>
@@ -91,7 +90,6 @@
     <tbody>
         <tr>
             <td>{{ 'The balance'|trans }}</td>
-            <td>&nbsp;</td>
             <td>
                 {{ result|format_currency('EUR') }}
             </td>

src/Bundle/ChillBudgetBundle/Resources/views/Person/index.html.twig

@@ -17,17 +17,15 @@
 {% block content %}
 <h1>{{ title }}</h1>
 
-{% include 'ChillBudgetBundle:Budget:_budget.html.twig' with {
+{% include '@ChillBudget/Budget/_budget.html.twig' with {
     'resources': resources,
     'charges': charges,
     'person': person
 } %}
 
-<div class="flex-table">
+<div class="mt-5">
-    <h3 class="family-title">{{ 'Budget calculator'|trans }}</h2>
+    <h3 class="subtitle">{{ 'Budget calculator'|trans }}</h3>
-    <div class="item-bloc">
+    {{ table_results(charges, resources) }}
-        {{ table_results(charges, resources) }}
-    </div>
 </div>
 
 {% if is_granted('CHILL_BUDGET_ELEMENT_CREATE', person) %}