mirror of
https://gitlab.com/Chill-Projet/chill-bundles.git
synced 2025-08-21 23:23:51 +00:00
improve flex-table and flex-box
This commit is contained in:
@@ -8,20 +8,58 @@
|
||||
|
||||
<h1>{{ block('title') }}</h1>
|
||||
|
||||
<pre>
|
||||
{{ accompanyingCourse.id }}
|
||||
{{ accompanyingCourse.openingDate|format_date('short') }}
|
||||
{{ accompanyingCourse.closingDate|format_date('short') }}
|
||||
{{ accompanyingCourse.closingMotive|chill_entity_render_box }}
|
||||
{{ accompanyingCourse.remark|raw }}
|
||||
{{ accompanyingCourse.user }}
|
||||
usagers:
|
||||
{% for p in accompanyingCourse.participations %}
|
||||
{{ p.person.id }} | <a href="{{ path('chill_person_accompanying_period_list', { person_id: p.person.id }) }}">{{ p.person.fullnamecanonical }}</a> | {{ p.startdate|format_date('short') }} | {{ p.enddate|format_date('short') }}
|
||||
{% endfor %}
|
||||
</pre>
|
||||
{# start test flex-table #}
|
||||
<div class="flex-table">
|
||||
{% for p in accompanyingCourse.participations %}
|
||||
<div class="item-bloc">
|
||||
<div class="item-row">
|
||||
<div class="item-col">
|
||||
<h3>
|
||||
<a href="{{ path('chill_person_accompanying_period_list', { person_id: p.person.id }) }}">
|
||||
{{ p.person.firstname ~ ' ' ~ p.person.lastname }}
|
||||
</a>
|
||||
</h3>
|
||||
<p>
|
||||
<i class="fa fa-fw fa-venus" title="Femme"></i>
|
||||
{{ 'Née le ' ~ p.person.birthdate|format_date('short') }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="item-col">
|
||||
<ul class="list-content fa-ul">
|
||||
<li><i class="fa fa-li fa-calendar"></i>
|
||||
{{ p.startdate|format_date('short') }} → {{ p.enddate|format_date('short') }}
|
||||
</li>
|
||||
<li><i class="fa fa-li fa-mobile"></i>
|
||||
+32 488 660 685
|
||||
</li>
|
||||
<li><i class="fa fa-li fa-envelope-o"></i>
|
||||
robert@brisefeuille.fake.co
|
||||
</li>
|
||||
<li><i class="fa fa-li fa-map-marker"></i>
|
||||
59, avenue Fernandez 79, boulevard Laurence Levy 1210 Saint-josse-ten-noode Belgique
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="record_actions">
|
||||
<li><button type="button" class="sc-button bt-show"></button></li>
|
||||
<li><button type="button" class="sc-button bt-edit"></button></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="item-row">
|
||||
Lorem ipsum dolor sit amet, incididunt ut labore et dolore magna aliqua.
|
||||
</div>
|
||||
<div class="item-row">
|
||||
Rhoncus est pellentesque elit eu ultrices vitae auctor.
|
||||
</div>
|
||||
<div class="item-row">
|
||||
Facilisis gravida neque convallis a cras semper auctor neque.
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{# end test flex-table #}
|
||||
|
||||
{{ dump() }}
|
||||
|
||||
{# ==> insert accompanyingCourse vue component #}
|
||||
<div id="accompanying-course"></div>
|
||||
|
||||
@@ -23,46 +23,48 @@
|
||||
{% for p in accompanyingCourse.participations %}
|
||||
{% if p.enddate is null %}
|
||||
<div class="item-bloc">
|
||||
|
||||
<h5>{{ p.person.firstname ~ ' ' ~ p.person.lastname }}</h5>
|
||||
<dl class="content-bloc">
|
||||
|
||||
<dd>
|
||||
{% set born = (p.person.gender == 'woman') ? 'née': 'né' %}
|
||||
{% set gender = (p.person.gender == 'woman') ? 'fa-venus' :
|
||||
(p.person.gender == 'man') ? 'fa-mars' : 'fa-neuter' %}
|
||||
{% set genderTitle = (p.person.gender == 'woman') ? 'femme' :
|
||||
(p.person.gender == 'homme') ? 'fa-mars' : 'neutre' %}
|
||||
<i class="fa fa-fw {{ gender }}" title="{{ genderTitle }}"></i>{{ born ~ ' le ' ~ p.person.birthdate|format_date('short') }}
|
||||
</dd>
|
||||
<dd>
|
||||
{% if p.person.mobilenumber %}
|
||||
<i class="fa fa-fw fa-mobile"></i>{{ p.person.mobilenumber }}
|
||||
{% else %}
|
||||
<i class="fa fa-fw fa-phone"></i>
|
||||
{% if p.person.phonenumber %}
|
||||
{{ p.person.phonenumber }}
|
||||
{% else %}
|
||||
<span class="chill-no-data-statement">{{ 'No data given'|trans }}</span>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
</dd>
|
||||
<dd>
|
||||
{%- if p.person.lastAddress is not empty -%}
|
||||
{{ address._render(p.person.lastAddress, {'has_no_address': true, 'with_valid_from': false, 'with_icon': true}) }}
|
||||
{%- else -%}
|
||||
<i class="fa fa-fw fa-map-marker"></i>
|
||||
<span class="chill-no-data-statement">{{ 'No address given'|trans }}</span>
|
||||
{%- endif -%}
|
||||
</dd>
|
||||
|
||||
</dl>
|
||||
<ul class="record_actions">
|
||||
<li>
|
||||
<a href="{{ path('chill_person_view', { person_id: p.person.id }) }}" class="sc-button bt-show" target="_blank" title="Voir"></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="item-row">
|
||||
<div class="item-col">
|
||||
<h3>{{ p.person.firstname ~ ' ' ~ p.person.lastname }}</h3>
|
||||
<p>
|
||||
{% set born = (p.person.gender == 'woman') ? 'née': 'né' %}
|
||||
{% set gender = (p.person.gender == 'woman') ? 'fa-venus' :
|
||||
(p.person.gender == 'man') ? 'fa-mars' : 'fa-neuter' %}
|
||||
{% set genderTitle = (p.person.gender == 'woman') ? 'femme' :
|
||||
(p.person.gender == 'homme') ? 'fa-mars' : 'neutre' %}
|
||||
<i class="fa fa-fw {{ gender }}" title="{{ genderTitle }}"></i>{{ born ~ ' le ' ~ p.person.birthdate|format_date('short') }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="item-col">
|
||||
<ul class="list-content fa-ul">
|
||||
<li>
|
||||
{% if p.person.mobilenumber %}
|
||||
<i class="fa fa-li fa-mobile"></i><a href="{{ 'tel:' ~ p.person.mobilenumber }}">{{ p.person.mobilenumber }}</a>
|
||||
{% else %}
|
||||
<i class="fa fa-li fa-phone"></i>
|
||||
{% if p.person.phonenumber %}
|
||||
<a href="{{ 'tel:' ~ p.person.phonenumber }}">{{ p.person.phonenumber }}</a>
|
||||
{% else %}
|
||||
<span class="chill-no-data-statement">{{ 'No data given'|trans }}</span>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
</li>
|
||||
<li>
|
||||
<i class="fa fa-li fa-map-marker"></i>
|
||||
{%- if p.person.lastAddress is not empty -%}
|
||||
{{ p.person.getLastAddress|chill_entity_render_box({'with_valid_from': false}) }}
|
||||
{%- else -%}
|
||||
<span class="chill-no-data-statement">{{ 'No address given'|trans }}</span>
|
||||
{%- endif -%}
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="record_actions">
|
||||
<li>
|
||||
<a href="{{ path('chill_person_view', { person_id: p.person.id }) }}" class="sc-button bt-show" target="_blank" title="Voir"></a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
@@ -70,85 +72,96 @@
|
||||
|
||||
|
||||
<h2>{{ 'Resources'|trans }}</h2>
|
||||
<div class="flex-bloc right">
|
||||
<div class="flex-bloc">
|
||||
{% for r in accompanyingCourse.resources %}
|
||||
<div class="item-bloc">
|
||||
{% if r.person %}
|
||||
|
||||
<h5>
|
||||
{{ r.person.firstname ~ ' ' ~ r.person.lastname }}
|
||||
<span class="badge badge-pill badge-light">{{ 'Usager' }}</span>
|
||||
</h5>
|
||||
<dl class="content-bloc">
|
||||
|
||||
<dd>
|
||||
{% set born = (r.person.gender == 'woman') ? 'née': 'né' %}
|
||||
{% set gender = (r.person.gender == 'woman') ? 'fa-venus' :
|
||||
(r.person.gender == 'man') ? 'fa-mars' : 'fa-neuter' %}
|
||||
{% set genderTitle = (r.person.gender == 'woman') ? 'femme' :
|
||||
(r.person.gender == 'mhomme') ? 'fa-mars' : 'neutre' %}
|
||||
<i class="fa fa-fw {{ gender }}" title="{{ genderTitle }}"></i>{{ born ~ ' le ' ~ r.person.birthdate|format_date('short') }}
|
||||
</dd>
|
||||
<dd>
|
||||
{% if r.person.mobilenumber %}
|
||||
<i class="fa fa-fw fa-mobile"></i>{{ r.person.mobilenumber }}
|
||||
{% else %}
|
||||
<i class="fa fa-fw fa-phone"></i>
|
||||
{% if r.person.phonenumber %}
|
||||
{{ r.person.phonenumber }}
|
||||
{% else %}
|
||||
<span class="chill-no-data-statement">{{ 'No data given'|trans }}</span>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
</dd>
|
||||
<dd>
|
||||
{%- if r.person.lastAddress is not empty -%}
|
||||
{{ address._render(r.person.lastAddress, {'has_no_address': true, 'with_valid_from': false, 'with_icon': true}) }}
|
||||
{%- else -%}
|
||||
<i class="fa fa-fw fa-map-marker"></i>
|
||||
<span class="chill-no-data-statement">{{ 'No address given'|trans }}</span>
|
||||
{%- endif -%}
|
||||
</dd>
|
||||
|
||||
</dl>
|
||||
<ul class="record_actions">
|
||||
<li>
|
||||
<a href="{{ path('chill_person_view', { person_id: r.person.id }) }}" class="sc-button bt-show" target="_blank" title="Voir"></a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="item-row">
|
||||
<div class="item-col">
|
||||
<h3>
|
||||
{{ r.person.firstname ~ ' ' ~ r.person.lastname }}
|
||||
<span class="badge badge-pill badge-secondary">{{ 'Usager' }}</span>
|
||||
</h3>
|
||||
<p>
|
||||
{% set born = (r.person.gender == 'woman') ? 'née': 'né' %}
|
||||
{% set gender = (r.person.gender == 'woman') ? 'fa-venus' :
|
||||
(r.person.gender == 'man') ? 'fa-mars' : 'fa-neuter' %}
|
||||
{% set genderTitle = (r.person.gender == 'woman') ? 'femme' :
|
||||
(r.person.gender == 'homme') ? 'fa-mars' : 'neutre' %}
|
||||
<i class="fa fa-fw {{ gender }}" title="{{ genderTitle }}"></i>{{ born ~ ' le ' ~ r.person.birthdate|format_date('short') }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="item-col">
|
||||
<ul class="list-content fa-ul">
|
||||
<li>
|
||||
{% if r.person.mobilenumber %}
|
||||
<i class="fa fa-li fa-mobile"></i><a href="{{ 'tel:' ~ r.person.mobilenumber }}">{{ r.person.mobilenumber }}</a>
|
||||
{% else %}
|
||||
<i class="fa fa-li fa-phone"></i>
|
||||
{% if r.person.phonenumber %}
|
||||
<a href="{{ 'tel:' ~ r.person.phonenumber }}">{{ r.person.phonenumber }}</a>
|
||||
{% else %}
|
||||
<span class="chill-no-data-statement">{{ 'No data given'|trans }}</span>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
</li>
|
||||
<li>
|
||||
<i class="fa fa-li fa-map-marker"></i>
|
||||
{%- if r.person.lastAddress is not empty -%}
|
||||
{{ r.person.getLastAddress|chill_entity_render_box({'with_valid_from': false}) }}
|
||||
{%- else -%}
|
||||
<span class="chill-no-data-statement">{{ 'No address given'|trans }}</span>
|
||||
{%- endif -%}
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="record_actions">
|
||||
<li>
|
||||
<a href="{{ path('chill_person_view', { person_id: r.person.id }) }}" class="sc-button bt-show" target="_blank" title="Voir"></a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% endif %}
|
||||
{% if r.thirdParty %}
|
||||
|
||||
<h5>
|
||||
{{ r.thirdParty.name }}
|
||||
<span class="badge badge-pill badge-light">{{ 'Tiers' }}</span>
|
||||
</h5>
|
||||
<dl class="content-bloc">
|
||||
|
||||
<dd>
|
||||
<i class="fa fa-fw fa-envelope-o"></i>
|
||||
<a href="{{ 'mailto:' ~ r.thirdParty.email }}">
|
||||
{{ r.thirdParty.email|chill_print_or_message("thirdparty.No_email") }}
|
||||
</a>
|
||||
</dd>
|
||||
<dd>
|
||||
<i class="fa fa-fw fa-phone"></i>{{ r.thirdParty.telephone|chill_print_or_message("thirdparty.No_phonenumber") }}
|
||||
</dd>
|
||||
<dd>
|
||||
{% if r.thirdParty.address == null %}
|
||||
<i class="fa fa-fw fa-map-marker"></i><span class="chill-no-data-statement">{{ 'No address given'|trans }}</span>
|
||||
{% else %}
|
||||
{{ address._render(r.thirdParty.address, {'with_valid_from': false, 'with_icon': true }) }}
|
||||
{% endif %}
|
||||
</dd>
|
||||
|
||||
</dl>
|
||||
<ul class="record_actions">
|
||||
<li>
|
||||
<a href="{{ path('chill_3party_3party_show', { thirdparty_id: r.thirdParty.id }) }}" class="sc-button bt-show" target="_blank" title="Voir"></a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="item-row">
|
||||
<div class="item-col">
|
||||
<h3>
|
||||
{{ r.thirdParty.name }}
|
||||
<span class="badge badge-pill badge-secondary">{{ 'Tiers' }}</span>
|
||||
</h3>
|
||||
</div>
|
||||
<div class="item-col">
|
||||
<ul class="list-content fa-ul">
|
||||
<li><i class="fa fa-li fa-envelope-o"></i>
|
||||
<a href="{{ 'mailto:' ~ r.thirdParty.email }}">
|
||||
{{ r.thirdParty.email|chill_print_or_message("thirdparty.No_email") }}
|
||||
</a>
|
||||
</li>
|
||||
<li><i class="fa fa-li fa-phone"></i>
|
||||
{% if r.thirdParty.telephone %}
|
||||
<a href="{{ 'tel:' ~ r.thirdParty.telephone }}">{{ r.thirdParty.telephone }}</a>
|
||||
{% else %}
|
||||
<span class="chill-no-data-statement">{{ 'thirdparty.No_phonenumber'|trans }}</span>
|
||||
{% endif %}
|
||||
</li>
|
||||
<li><i class="fa fa-li fa-map-marker"></i>
|
||||
{%- if r.thirdParty.address is not empty -%}
|
||||
{{ r.thirdParty.getAddress|chill_entity_render_box({'with_valid_from': false}) }}
|
||||
{%- else -%}
|
||||
<span class="chill-no-data-statement">{{ 'No address given'|trans }}</span>
|
||||
{%- endif -%}
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="record_actions">
|
||||
<li>
|
||||
<a href="{{ path('chill_3party_3party_show', { thirdparty_id: r.thirdParty.id }) }}" class="sc-button bt-show" target="_blank" title="Voir"></a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user