improve details row for household banner

This commit is contained in:
Mathieu Jaumotte 2021-07-01 17:42:52 +02:00
parent fc63955205
commit f0232228a3
2 changed files with 32 additions and 9 deletions

View File

@ -58,13 +58,30 @@ div.banner {
color: white;
}
ul.list-content {
margin: 0 auto;
//margin: 0 auto;
}
span.age {
margin-left: 0.5em;
&:before { content: '('; }
&:after { content: ')'; }
}
div.members {
display: flex;
flex-direction: row;
span.badge-member {
border: 1px solid #ffffff3b;
color: #ffffff;
padding: 0.4em 0.8em;
margin-right: 0.3em;
border-radius: 8px;
&.holder {
order: -1;
}
&.child {
order: 2;
}
}
}
}
/*

View File

@ -29,21 +29,27 @@
<div class="grid-12 parent" id="header-household-details" >
<div class="grid-10 push-1 grid-mobile-12 grid-tablet-12 push-mobile-0 push-tablet-0 parent">
<div id="banner-misc">
<div id="banner-misc" class="members">
{%- set members = household.getCurrentMembersOrdered() -%}
{%- if members|length > 0 -%}
<span class="current-members-explain">
{{- 'household.Current household members'|trans }}:
<span class="current-members-explain" style="display: none;">
{{- 'household.Current household members'|trans }}
<i class="fa fa-fw fa-users" title="{{- 'household.Current household members'|trans }}"></i>
</span>
{%- for m in members|slice(0, 5) -%}
{{- m.person|chill_entity_render_box({'addLink': false}) -}}
{%- if m.holder %}
<span class="badge badge-primary">
<span
class="badge-member{%- if m.holder %} holder{% endif -%}{%- if m.position.ordering >= 2 %} child{% endif -%}"
title="{{ m.position.label.fr }}">
{%- if m.holder %}
<span class="badge badge-secondary">
{{ 'household.holder'|trans }}
</span>
{% endif -%}
{%- if false == loop.last -%}, {% endif -%}
{% endif -%}
{{- m.person|chill_entity_render_box({'addLink': false}) -}}
</span>
{%- endfor -%}
{% if members|length > 5 %}
<span class="current-members-more">
{{ 'household.and x other persons'|trans({'x': members|length-5}) }}