improve flex-table and flex-box

This commit is contained in:
2021-05-26 18:01:58 +02:00
parent 37996651c4
commit 6c8f1f77ff
6 changed files with 368 additions and 284 deletions

View File

@@ -37,47 +37,47 @@
{% if persons|length > 0 %}
<div class="list-with-period flex-table">
<div class="flex-table list-with-period">
{% for person in persons %}
<div class="item-bloc">
<div class="person">
<div class="item-row person">
<div class="box-person">
<div class="item-col box-person">
<div>{{ person|chill_entity_render_box({'addLink': true}) }}</div>
<div>{{ 'Born the %date%'|transchoice(person.genderNumeric, { '%date%': person.birthdate|format_date("medium") }) }}</div>
</div>
<div class="box-where">
<dl>
<dd class="center">{{ person.center }}</dd>
<div class="item-col box-where">
<ul class="list-content fa-ul">
<li><i class="fa fa-li fa-long-arrow-right"></i>
{{ person.center }}
</li>
<dd>
<li>
{% if person.mobilenumber is not empty %}
<i class="fa fa-fw fa-mobile"></i> <a href="tel:{{ person.mobilenumber }}">{{ person.mobilenumber|chill_format_phonenumber }}</a>
<i class="fa fa-li fa-mobile"></i> <a href="{{ 'tel:' ~ person.mobilenumber }}">{{ person.mobilenumber|chill_format_phonenumber }}</a>
{% else %}
<i class="fa fa-fw fa-phone"></i>
<i class="fa fa-li fa-phone"></i>
{% if person.phonenumber is not empty %}
<a href="tel:{{ person.phonenumber }}">{{ person.phonenumber|chill_format_phonenumber }}</a>
<a href="{{ 'tel:' ~ person.phonenumber }}">{{ person.phonenumber|chill_format_phonenumber }}</a>
{% else %}
<span class="chill-no-data-statement">{{ 'No data given'|trans }}</span>
{% endif %}
{% endif %}
</dd>
</li>
<dd>
<dt class="fa fa-fw fa-map-marker"></dt>
<li>
<i class="fa fa-li fa-map-marker"></i>
{% if person.getLastAddress is not null %}
{{ person.getLastAddress|chill_entity_render_box({'with_valid_from': false}) }}
{% else %}
<i>{{ 'No address'|trans }}</i>
<span class="chill-no-data-statement">{{ 'No address'|trans }}</span>
{% endif %}
</dd>
</li>
</dl>
</div>
<ul class="record_actions">
</ul>
<ul class="record_actions">
<li>
<a href="{{ path('chill_person_view', { 'person_id' : person.id }) }}" class="sc-button blue" />
<i class="fa fa-folder-open-o"></i> {{ 'Open person file'|trans }}
@@ -88,6 +88,8 @@
<i class="fa fa-random"></i></a>
</li>
</ul>
</div>
</div>
{#- 'apps' is for AccompanyingPeriodParticipationS #}
@@ -100,30 +102,36 @@
{%- endfor %}
{% if apps|length > 0 %}
<div class="periods">
{% for app in apps %}
<div>
<div class="header">
<a href="{{ path('chill_person_accompanying_course_index', { 'accompanying_period_id': app.accompanyingPeriod.id }) }}">
<span>{{ 'Since %date%'|trans({'%date%': app.startDate|format_date('medium') }) }}</span>
<i class="fa fa-fw fa-random"></i>
{% if app.accompanyingPeriod.user is not null %}
<abbr class="referrer" title="{{ 'Referrer'|trans }}">ref:</abbr>
<span class="user">{{ app.accompanyingPeriod.user|chill_entity_render_box }}</span>
{% endif %}
</a>
</div>
<div class="item-row periods">
<div class="header">
<a href="{{ path('chill_person_accompanying_course_index', { 'accompanying_period_id': app.accompanyingPeriod.id }) }}"
class="sc-button green" title="{{ 'See accompanying period'|trans }}">
<i class="fa fa-fw fa-random"></i>
</a>
<span>{{ 'Since %date%'|trans({'%date%': app.startDate|format_date('medium') }) }}</span>
{% if app.accompanyingPeriod.user is not null %}
<span class="user">
<abbr class="referrer" title="{{ 'Referrer'|trans }}">ref:</abbr>
{{ app.accompanyingPeriod.user|chill_entity_render_box }}
</span>
{% endif %}
</div>
<div class="list-content">
{% for issue in app.accompanyingPeriod.socialIssues|slice(0,2) %}
<span>{{ issue|chill_entity_render_box }}</span>
<span>{{ issue|chill_entity_render_box }}</span>
{% endfor %}
{% if app.accompanyingPeriod.socialIssues|length > 2 %}
<span class="more">{{ 'and %number% other'|transchoice(app.accompanyingPeriod.socialIssues|length-2) }}</span>
<span class="more">{{ 'and %number% other'|transchoice(app.accompanyingPeriod.socialIssues|length-2) }}</span>
{% endif %}
</div>
</div>
{% endfor %}
</div>
{% endif %}
</div>