household members: fold/unfold accordion

src/Bundle/ChillMainBundle/Resources/public/chill/scss/flex_table.scss

@@ -263,25 +263,23 @@ div.wrap-header {
 */
 
 div.floatbutton {
-
     width: 100%;
+
     div.box {
         width: 100%;
+
         div.action {
-            float: right; /*
+            float: right;
-            width: 50%; */
         }
     }
     &.top {
         div.action {
-            //margin: 0 0 1em 1em;
             padding: 0 0 1em 1em;
         }
     }
     &.bottom {
         display: flex;
         overflow: hidden;
-        //margin-bottom: 100px;
         div.action {
             height: calc(100% - 0em);
             shape-outside: inset(calc(100% - 2em) 0 0);
@@ -301,4 +299,9 @@ div.floatbutton {
             background-color: #00ffffa3;
         }
     }
+
+    // avoid a position relative that make links unclickable
+    .fa-ul > li {
+        position: initial;
+    }
 }

src/Bundle/ChillPersonBundle/Resources/views/Household/summary.html.twig

@@ -53,9 +53,9 @@
 
   {% if household.waitingForBirth %}
     {% if household.waitingForBirthDate is not null %}
-    {{ 'household.Expecting for birth on date'|trans({ 'date': household.waitingForBirthDate|format_date('long') }) }}
+        {{ 'household.Expecting for birth on date'|trans({ 'date': household.waitingForBirthDate|format_date('long') }) }}
     {% else %}
-    {{ 'household.Expecting for birth'|trans }}
+        {{ 'household.Expecting for birth'|trans }}
     {% endif %}
   {% else %}
     <p class="chill-no-data-statement">
@@ -76,6 +76,7 @@
 
 
 {% for p in positions %}
+<div class="mb-5">
   <h3>{{ p.label|localize_translatable_string }}
       {% if false == p.shareHousehold %}
           <i class="chill-help-tooltip" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-html="true"
@@ -113,22 +114,42 @@
 
   {% set members = household.nonCurrentMembersByPosition(p) %}
   {% if members|length > 0 %}
-    <p><!-- force a space after table --></p>
-    <button class="btn btn-green" type="button" data-bs-toggle="collapse" data-bs-target="#nonCurrent_{{ p.id }}" aria-expanded="false" aria-controls="collapse non current members">
-      {{ 'household.Show future or past memberships'|trans({'length': members|length}) }}
-    </button>
 
-    <div id="nonCurrent_{{ p.id }}" class="collapse">
+    <style>
-      <div class="flex-table list-household-members">
+        button[aria-expanded="true"] > span.folded,
-        {% for m in members %}
+        button[aria-expanded="false"] > span.unfolded { display: none; }
-            {% include '@ChillPerson/Household/_render_member.html.twig' with {
+        button[aria-expanded="false"] > span.folded,
-                'member': m
+        button[aria-expanded="true"] > span.unfolded { display: inline; }
-            } %}
+    </style>
-        {% endfor %}
+    <div class="accordion" id="nonCurrent">
-      </div>
+        <div class="accordion-item">
+            <h2 class="accordion-header" id="heading_{{ p.id }}">
+                <button
+                    class="accordion-button collapsed"
+                    type="button"
+                    data-bs-toggle="collapse"
+                    data-bs-target="#collapse_{{ p.id }}"
+                    aria-expanded="false"
+                    aria-controls="collapse_{{ p.id }}">
+                    <span class="folded">{{ 'household.Show future or past memberships'|trans({'length': members|length}) }}</span>
+                    <span class="unfolded text-secondary">{{ 'household.Hide memberships'|trans }}</span>
+                </button>
+            </h2>
+            <div id="collapse_{{ p.id }}"
+                class="accordion-collapse collapse"
+                aria-labelledby="heading_{{ p.id }}"
+                data-bs-parent="#nonCurrent">
+                <div class="flex-table my-0 list-household-members">
+                    {% for m in members %}
+                        {% include '@ChillPerson/Household/_render_member.html.twig' with { 'member': m } %}
+                    {% endfor %}
+                </div>
+            </div>
+        </div>
     </div>
-
   {% endif %}
+
+</div>
 {% endfor %}
 
 <ul class="record_actions">

src/Bundle/ChillPersonBundle/translations/messages+intl-icu.fr.yaml

@@ -19,6 +19,7 @@ household:
             many {Montrer # anciennes ou futures appartenances}
             other {Montrer # anciennes ou futures appartenances}
         }
+    Hide memberships: Masquer
     Those members does not share address: Ces usagers ne partagent pas l'adresse du ménage.
     Any persons into this position: Aucune personne n'appartient au ménage à cette position.
     Leave household: Quitter le ménage