banner person: new responsive design, with custom area

This commit is contained in:
Mathieu Jaumotte 2021-07-30 14:58:26 +02:00
parent 31c5c8b52a
commit 7e4afc826b
3 changed files with 68 additions and 70 deletions

View File

@ -17,6 +17,11 @@ div#header-person-details {
color: #FFF;
padding-top: 1em;
padding-bottom: 1em;
div.contact {
& > * {
margin-right: 1em;
}
}
}
div#person_details_container {

View File

@ -3,52 +3,13 @@
<div class="container-xxl">
<div class="row">
<div class="col-md-6">
<div class="col-md-6 ps-md-5 ps-xxl-0">
{{ person|chill_entity_render_box({
'render': 'label', 'addInfo': true, 'addAge': true, 'addId': true, 'hLevel': 1
}) }}
</div>
<div class="col-md-auto ps-4 ps-md-2">
<ul class="list-content fa-ul my-2">
{% if person.email %}
<li>
<i class="fa fa-li fa-envelope-o"></i>
<a href="{{ 'mailto:' ~ person.email }}" class="email" title="{{ 'Email'|trans }}">
{{ person.email }}
</a>
</li>
{% endif %}
{% if person.mobilenumber %}
<li>
<i class="fa fa-li fa-mobile"></i>
<a href="{{ 'tel:' ~ person.mobilenumber }}" class="phone mr-3" title="{{ 'Mobilenumber'|trans }}">
{{ person.mobilenumber|chill_format_phonenumber }}</a>
</li>
{% elseif person.phonenumber %}
<li>
<i class="fa fa-li fa-phone"></i>
<a href="{{ 'tel:' ~ person.phonenumber }}" class="phone mr-3" title="{{ 'Phonenumber'|trans }}">
{{ person.phonenumber|chill_format_phonenumber }}</a>
</li>
{% endif %}
</ul>
</div>
<div class="col-md ps-4 ps-md-2">
<ul class="list-content fa-ul">
{%- if person.currentHouseholdAddress is not empty -%}
<li>
<i class="fa fa-li fa-map-marker"></i>
{{ person.currentHouseholdAddress|chill_entity_render_box({'multiline': false, 'with_valid_from': false}) }}
</li>
{%- elseif person.lastAddress is not empty -%}
<li>
<i class="fa fa-li fa-map-marker"></i>
{{ person.lastAddress|chill_entity_render_box({'multiline': false, 'with_valid_from': false}) }}
</li>
{%- endif -%}
</ul>
<div class="col-md-6">
{{ include('@ChillPerson/Person/banner_custom.html.twig') }}
</div>
</div>
@ -58,38 +19,43 @@
<div class="container-xxl">
<div class="row justify-content-between">
<div class="col-md-6 ps-4">
<span class="open_sansbold">
{{ 'Birthdate'|trans|upper }} &nbsp; :
<div class="contact col-md-12 ps-md-5 ps-xxl-0">
{% if person.phonenumber %}
<span class="phonenumber d-block d-sm-inline-block">
<i class="fa fa-fw fa-phone"></i>
<a href="{{ 'tel:' ~ person.phonenumber }}" class="phone mr-3" title="{{ 'Phonenumber'|trans }}">
{{ person.phonenumber|chill_format_phonenumber }}</a>
</span>
{% if person.birthdate == null %}
{{ 'Unknown date of birth'|trans }}
{% else %}
{{ person.birthdate|format_date('short') }}
{% endif %}
</div>
{%- if chill_person.fields.nationality == 'visible' -%}
<div class="col-md-auto ps-4 ps-md-2">
<span class="open_sansbold">
{{ 'Nationality'|trans|upper}} &nbsp; :
{% if person.mobilenumber %}
<span class="mobilenumber d-block d-sm-inline-block">
<i class="fa fa-fw fa-mobile"></i>
<a href="{{ 'tel:' ~ person.mobilenumber }}" class="phone mr-3" title="{{ 'Mobilenumber'|trans }}">
{{ person.mobilenumber|chill_format_phonenumber }}</a>
</span>
{% if person.nationality is not null %}
{{ person.nationality.name|localize_translatable_string }}
{% else %}
{% trans %}Without nationality{% endtrans %}
{% endif %}
</div>
{%- endif -%}
{%- if chill_person.fields.spoken_languages == 'visible' -%}
<div class="col-md ps-4 ps-md-2 text-md-end text-start pe-4">
<span class="open_sansbold">
{{ 'Center'|trans|upper}} &nbsp; :
{% if person.email %}
<span class="email d-block d-sm-inline-block">
<i class="fa fa-fw fa-envelope-o"></i>
<a href="{{ 'mailto:' ~ person.email }}" class="email" title="{{ 'Email'|trans }}">
{{ person.email }}
</a>
</span>
{{ person.center.name|upper }}
</div>
{% endif %}
{%- if person.currentHouseholdAddress is not empty -%}
{% set address = person.currentHouseholdAddress %}
{%- elseif person.lastAddress is not empty -%}
{% set address = person.lastAddress %}
{%- endif -%}
{%- if address -%}
<span class=" d-block d-sm-inline-block">
{{ address|chill_entity_render_box({
'render': 'inline', 'multiline': false, 'with_picto': true, 'with_delimiter': true
}) }}
</span>
{%- endif -%}
</div>
</div>
</div>

View File

@ -0,0 +1,27 @@
{#
Overwrite this file to display client specific datas in custom area
#}
<div id="banner-person-custom" class="my-3 pe-md-5 pe-xxl-0">
<div class="text-md-end mb-1">
{%- if chill_person.fields.nationality == 'visible' -%}
<span class="open_sansbold">
{{ 'Nationality'|trans|upper}} :
</span>
{% if person.nationality is not null %}
{{ person.nationality.name|localize_translatable_string }}
{% else %}
<span class="chill-no-data-statement">
{% trans %}Without nationality{% endtrans %}
</span>
{% endif %}
{%- endif -%}
</div>
<div class="text-md-end">
{%- if chill_person.fields.spoken_languages == 'visible' -%}
<span class="open_sansbold">
{{ 'Center'|trans|upper}} :
</span>
{{ person.center.name|upper }}
{%- endif -%}
</div>
</div>