more template adjustments

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

@@ -44,6 +44,17 @@
         margin-top: 1rem;
         border-top: 1px dashed black;
     }
+
+    .accordion-item {
+        margin-bottom: 1rem;
+    }
+
+
+    button[aria-expanded="true"] > span.folded,
+    button[aria-expanded="false"] > span.unfolded { display: none; }
+    button[aria-expanded="false"] > span.folded,
+    button[aria-expanded="true"] > span.unfolded { display: inline; }
+
     </style>
 {% endblock %}
 
@@ -214,22 +225,31 @@
         {% endif %}
     </div>
 
-    {# {% if is_granted('CHILL_BUDGET_ELEMENT_CREATE', household) %}
-    <ul class="record_actions sticky-form-buttons">
-        <li>
-            <a class="btn btn-create" href="{{ path('chill_budget_resource_household_new', { 'id': household.id} ) }}">{{ 'Create new resource'|trans }}</a>
-        </li>
-        <li>
-            <a class="btn btn-create" href="{{ path('chill_budget_charge_household_new', { 'id': household.id} ) }}">{{ 'Create new charge'|trans }}</a>
-        </li>
-    </ul>
-    {% endif %} #}
-
 {% endif %}
 
 {% if pastCharges|length > 0 or pastResources|length > 0 %}
     <h2 class="subtitle">{{ 'Past budget'|trans }}</h2>
 
+    <div class="accordion" id="past_{{ household.id }}">
+        <div class="accordion-item">
+            <h2 class="accordion-header" id="heading_past_{{ household.id }}">
+                <button
+                    class="accordion-button collapsed"
+                    type="button"
+                    data-bs-toggle="collapse"
+                    data-bs-target="#collapse_past_{{ household.id }}"
+                    aria-expanded="false"
+                    aria-controls="collapse_past_{{ household.id }}">
+                    <span class="folded">{{ 'Show past budget'|trans }}</span>
+                    <span class="unfolded text-secondary">{{ 'Hide budget'|trans }}</span>
+                </button>
+            </h2>
+
+            <div id="collapse_past_{{ household.id }}"
+                class="accordion-collapse collapse"
+                aria-labelledby="heading_past_{{ household.id }}"
+                data-bs-parent="#past_{{ household.id }}">
+
                 <div class="flex-table">
                     <h3 class="family-title">{{ 'Past resources'|trans }}</h3>
 
@@ -257,11 +277,34 @@
                         </div>
                     {% endif %}
                 </div>
+            </div>
+        </div>
+    </div>
 {% endif %}
 
 {% if futureCharges|length > 0 or futureResources|length > 0 %}
     <h2 class="subtitle">{{ 'Future budget'|trans }}</h2>
 
+    <div class="accordion" id="future_{{ household.id }}">
+        <div class="accordion-item">
+            <h2 class="accordion-header" id="heading_future_{{ household.id }}">
+                <button
+                    class="accordion-button collapsed"
+                    type="button"
+                    data-bs-toggle="collapse"
+                    data-bs-target="#collapse_{{ household.id }}"
+                    aria-expanded="false"
+                    aria-controls="collapse_{{ household.id }}">
+                    <span class="folded">{{ 'Show future budget'|trans }}</span>
+                    <span class="unfolded text-secondary">{{ 'Hide budget'|trans }}</span>
+                </button>
+            </h2>
+
+            <div id="collapse_{{ household.id }}"
+                class="accordion-collapse collapse"
+                aria-labelledby="heading_{{ household.id }}"
+                data-bs-parent="#future_{{ household.id }}">
+
                 <div class="flex-table">
                     <h3 class="family-title">{{ 'Future resources'|trans }}</h3>
 
@@ -288,21 +331,18 @@
                         </div>
                     {% endif %}
                 </div>
+            </div>
+        </div>
+    </div>
 {% endif %}
 
 {% if household.getCurrentMembers|length > 0 %}
-    <style>
-        button[aria-expanded="true"] > span.folded,
-        button[aria-expanded="false"] > span.unfolded { display: none; }
-        button[aria-expanded="false"] > span.folded,
-        button[aria-expanded="true"] > span.unfolded { display: inline; }
-    </style>
     <h2 class="subtitle">{{ 'Budget household members'|trans }}</h2>
 
     {% for hm in household.getCurrentMembers %}
-        <div class="accordion" id="nonCurrent">
-            <div class="accordion-item">
         {% set member = hm.person %}
+        <div class="accordion" id="member_{{ member.id }}">
+            <div class="accordion-item">
                 <h2 class="accordion-header" id="heading_{{ member.id }}">
                     <button
                         class="accordion-button collapsed"
@@ -323,7 +363,6 @@
 
                     <div class="flex-table">
                         <h3 class="family-title">{{ 'Actual resources for %name%'|trans({ '%name%' : member.firstName ~ " " ~ member.lastName }) }}</h3>
-
                         {% if member.getBudgetResources|length > 0 %}
                             {% set memberResources = member.getBudgetResources %}
                             <div class="item-bloc">
@@ -350,7 +389,6 @@
                             </div>
                         {% endif %}
                     </div>
-
                 </div>
             </div>
         </div>

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

@@ -44,6 +44,16 @@
         margin-top: 1rem;
         border-top: 1px dashed black;
     }
+
+    .accordion-item {
+        margin-bottom: 1rem;
+    }
+
+    button[aria-expanded="true"] > span.folded,
+    button[aria-expanded="false"] > span.unfolded { display: none; }
+    button[aria-expanded="false"] > span.folded,
+    button[aria-expanded="true"] > span.unfolded { display: inline; }
+
     </style>
 {% endblock %}
 
@@ -229,6 +239,27 @@
 
 {% if pastCharges|length > 0 or pastResources|length > 0 %}
     <h2 class="subtitle">{{ 'Past budget'|trans }}</h2>
+
+    <div class="accordion" id="past_{{ person.id }}">
+        <div class="accordion-item">
+            <h2 class="accordion-header" id="heading_past_{{ person.id }}">
+                <button
+                    class="accordion-button collapsed"
+                    type="button"
+                    data-bs-toggle="collapse"
+                    data-bs-target="#collapse_past_{{ person.id }}"
+                    aria-expanded="false"
+                    aria-controls="collapse_past_{{ person.id }}">
+                    <span class="folded">{{ 'Show past budget'|trans }}</span>
+                    <span class="unfolded text-secondary">{{ 'Hide budget'|trans }}</span>
+                </button>
+            </h2>
+
+            <div id="collapse_past_{{ person.id }}"
+                class="accordion-collapse collapse"
+                aria-labelledby="heading_past_{{ person.id }}"
+                data-bs-parent="#past_{{ person.id }}">
+
                 <div class="flex-table">
                     <h3 class="family-title">{{ 'Past resources'|trans }}</h3>
 
@@ -242,6 +273,7 @@
                         <div class="item-bloc">
                     {% endif %}
                 </div>
+
                 <div class="flex-table">
                     <h3 class="family-title">{{ 'Past charges'|trans }}</h3>
 
@@ -255,10 +287,34 @@
                         </div>
                     {% endif %}
                 </div>
+            </div>
+        </div>
+    </div>
 {% endif %}
 
 {% if futureCharges|length > 0 or futureResources|length > 0 %}
     <h2 class="subtitle">{{ 'Future budget'|trans }}</h2>
+
+    <div class="accordion" id="future_{{ person.id }}">
+        <div class="accordion-item">
+            <h2 class="accordion-header" id="heading_future_{{ person.id }}">
+                <button
+                    class="accordion-button collapsed"
+                    type="button"
+                    data-bs-toggle="collapse"
+                    data-bs-target="#collapse_{{ person.id }}"
+                    aria-expanded="false"
+                    aria-controls="collapse_{{ person.id }}">
+                    <span class="folded">{{ 'Show future budget'|trans }}</span>
+                    <span class="unfolded text-secondary">{{ 'Hide budget'|trans }}</span>
+                </button>
+            </h2>
+
+            <div id="collapse_{{ person.id }}"
+                class="accordion-collapse collapse"
+                aria-labelledby="heading_{{ person.id }}"
+                data-bs-parent="#future_{{ person.id }}">
+
                 <div class="flex-table">
                     <h3 class="family-title">{{ 'Future resources'|trans }}</h3>
 
@@ -285,6 +341,9 @@
                         </div>
                     {% endif %}
                 </div>
+            </div>
+        </div>
+    </div>
 {% endif %}
 
 {% if (resources|length + charges|length) == 0 or futureCharges|length > 0 or futureResources|length > 0 or pastCharges|length > 0 or pastResources|length > 0 %}

src/Bundle/ChillBudgetBundle/translations/messages.fr.yml

@@ -11,6 +11,8 @@ Actual resources for %name%: Ressources actuelles de %name%
 Actual charges for %name%: Charges actuelles de %name%
 Actual charges: Charges actuelles
 Past budget: Éléments du budget passé
+Show past budget: Montrer budget passé
+Show future budget: Montrer budget future
 Past resources: Ressources passées
 Past charges: Chargées passées
 Future budget: Futurs éléments du budget