household members: fold/unfold accordion

This commit is contained in:
Mathieu Jaumotte 2021-09-03 18:31:19 +02:00
parent 8b945dc38b
commit 81f97980fc
3 changed files with 45 additions and 20 deletions

View File

@ -263,25 +263,23 @@ div.wrap-header {
*/
div.floatbutton {
width: 100%;
div.box {
width: 100%;
div.action {
float: right; /*
width: 50%; */
float: right;
}
}
&.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;
}
}

View File

@ -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">
<div class="flex-table list-household-members">
{% for m in members %}
{% include '@ChillPerson/Household/_render_member.html.twig' with {
'member': m
} %}
{% endfor %}
</div>
<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>
<div class="accordion" id="nonCurrent">
<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">

View File

@ -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