Chill-project/chill-bundles
6
0
Fork 0
mirror of https://gitlab.com/Chill-Projet/chill-bundles.git synced 2025-06-13 13:54:23 +00:00
Code Issues Actions Projects Releases Wiki Activity

improve flex-table and flex-box

Browse Source
This commit is contained in:
Mathieu Jaumotte 2021-05-26 18:01:58 +02:00
parent 37996651c4
commit 6c8f1f77ff
6 changed files with 368 additions and 284 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

189
src/Bundle/ChillMainBundle/Resources/public/scss/chillmain.scss
View File

@ -71,75 +71,102 @@ div#header-accompanying_course-details {
/* /*
* FLEX RESPONSIVE TABLE/BLOCK PRESENTATION * FLEX RESPONSIVE TABLE/BLOCK PRESENTATION
*/ */
div.flex-bloc,
div.flex-table {
h2, h3, h4, dl, p {
margin: 0;
}
h2, h3, h4 {
color: var(--chill-blue);
}
}
/// 1. bloc appearance /*
* Bloc appearance
*/
div.flex-bloc { div.flex-bloc {
box-sizing: border-box;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
flex-wrap: wrap; flex-wrap: wrap;
align-items: stretch; align-items: stretch;
align-content: stretch; align-content: stretch;
&.right {
justify-content: flex-end;
div.item-bloc {
margin-left: 1em;
margin-right: 0;
}
}
div.item-bloc { div.item-bloc {
flex-grow: 0; flex-shrink: 1; flex-basis: 50%;
margin: 0;
border: 1px solid #000; border: 1px solid #000;
margin-bottom: 1em;
margin-right: 1em;
margin-left: 0;
padding: 1em; padding: 1em;
padding-bottom: 0;
flex-grow: 0; border-top: 0;
flex-shrink: 0; &:nth-child(1), &:nth-child(2) {
flex-basis: 30%; border-top: 1px solid #000;
background-color: #e6e6e6; }
border-left: 0;
&:nth-child(odd) {
border-left: 1px solid #000;
}
//background-color: #e6e6e6;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
h5 {
margin-top: 0; div.item-row {
margin-bottom: 0.3em; flex-grow: 1; flex-shrink: 1; flex-basis: auto;
} display: flex;
.content-bloc { flex-direction: column;
margin: 0;
font-size: 80%; div.item-col {
} &:first-child {
dd { flex-grow: 0; flex-shrink: 0; flex-basis: auto;
margin: 0.67em auto; }
} &:last-child {
ul.record_actions { flex-grow: 1; flex-shrink: 1; flex-basis: auto;
margin-top: auto; display: flex;
margin-bottom: 0;
.list-content { // ul, dl, or div
}
ul.record_actions {
margin: 0;
align-self: flex-end;
flex-grow: 1; flex-shrink: 0; flex-basis: auto;
li {
margin-right: 5px;
}
}
}
}
} }
} }
@media only screen and (max-width: 1024px) { @media only screen and (max-width: 945px) { margin: auto -0.2em; }
div.item-bloc { @media only screen and (max-width: 935px) { margin: auto -0.5em; }
flex-grow: 0; @media only screen and (max-width: 920px) { margin: auto -0.9em; }
flex-shrink: 0; @media only screen and (max-width: 900px) {
flex-basis: 45%;
}
}
@media only screen and (max-width: 768px) {
flex-direction: column; flex-direction: column;
margin: auto 0;
div.item-bloc { div.item-bloc {
margin-right: 0; border-left: 1px solid #000;
} &:nth-child(2) {
&.right div.item-bloc { border-top: 0;
margin-left: 0; }
} }
} }
} }
/// 2. table appearance /*
* Table appearance
*/
div.flex-table { div.flex-table {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: stretch; align-items: stretch;
align-content: stretch; align-content: stretch;
div.item-bloc { div.item-bloc {
display: flex;
flex-direction: column;
padding: 1em;
border: 1px solid #000; border: 1px solid #000;
border-top: 0; border-top: 0;
&:first-child { &:first-child {
@ -148,37 +175,51 @@ div.flex-table {
&:nth-child(even) { &:nth-child(even) {
background-color: #e6e6e6; background-color: #e6e6e6;
} }
padding: 1em;
display: flex; div.item-row {
flex-direction: row; display: flex;
& > h4, & > h5 { flex-direction: row;
margin-top: 0; &:not(:first-child) {
margin-bottom: 0.3em; margin-top: 0.5em;
flex-grow: 0; border-top: 1px dotted #0000004f;
flex-shrink: 0; padding-top: 0.5em;
flex-basis: 33%; flex-direction: column;
}
& > .content-bloc {
margin: 0;
font-size: 80%;
flex-grow: 1;
flex-shrink: 0;
flex-basis: 50%;
dd {
margin: 0.67em auto;
} }
}
& > ul.record_actions { div.item-col {
flex-grow: 0; &:first-child {
flex-shrink: 0; flex-grow: 0; flex-shrink: 0; flex-basis: 33%;
flex-basis: 0; }
margin-top: auto; &:last-child {
margin-bottom: 0; flex-grow: 1; flex-shrink: 1; flex-basis: auto;
display: flex;
justify-content: flex-end;
.list-content { // ul, dl, or div
}
ul.record_actions {
margin: 0;
align-self: flex-start;
flex-grow: 1; flex-shrink: 0; flex-basis: auto;
li {
margin-right: 5px;
}
}
}
}
@media only screen and (max-width: 900px) {
flex-direction: column;
div.item-col {
&:last-child {
ul.record_actions {
align-self: flex-end;
}
}
}
}
// neutralize
div.chill_address div.chill_address_address p { text-indent: 0; }
} }
} }
@media only screen and (max-width: 768px) { }
div.item-bloc {
flex-direction: column;
}
}
}

85
src/Bundle/ChillPersonBundle/Resources/public/sass/person_with_period.scss
View File

@ -1,63 +1,46 @@
/// complete and overwrite flex-table in chillmain.scss /// complete and overwrite flex-table in chillmain.scss
div.list-with-period { // .flex-table div.list-with-period {
div.person {
div.item-bloc { ul.record_actions {
margin-bottom: 0; li {
margin-right: 0 !important;
&:nth-last-of-type { }
padding-bottom: 1em;
} }
}
flex-direction: column; // !! div.periods {
& > div { div.header,
display: flex; div.list-content {
flex-direction: row; width: calc(100% - 40px);
margin-left: 40px;
&.person { }
div.box-person { div.header {
flex-grow: 0; position: relative;
flex-shrink: 0; a.sc-button {
flex-basis: 33%; position: absolute;
} width: 30px;
div.box-where { height: 30px;
flex-grow: 1; top: 10px;
flex-shrink: 0; left: -40px;
flex-basis: 40%; padding: 0;
} i {
ul.record_actions { padding: 5px;
flex-grow: 0;
flex-shrink: 0;
flex-basis: 25%;
li {
margin-right: 0;
}
}
@media only screen and (max-width: 768px) {
flex-direction: column;
} }
} }
abbr.referrer {
&.periods { font-size: 70%;
list-style-type: none; }
padding: 0; span.user {
margin: 0; margin-left: 1em;
display: flex; }
flex-direction: column; }
div.header { div.list-content {
abbr.referrer { span.more {
font-size: 70%; font-style: italic;
}
span.user {}
}
span.more {
font-style: italic;
}
} }
} }
} }
} }
.chill-entity__person { .chill-entity__person {
.chill-entity__person__first-name, .chill-entity__person__first-name,
.chill-entity__person__last-name { .chill-entity__person__last-name {

64
src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourse/history.html.twig
View File

@ -8,20 +8,58 @@
<h1>{{ block('title') }}</h1> <h1>{{ block('title') }}</h1>
<pre> {# start test flex-table #}
{{ accompanyingCourse.id }} <div class="flex-table">
{{ accompanyingCourse.openingDate|format_date('short') }} {% for p in accompanyingCourse.participations %}
{{ accompanyingCourse.closingDate|format_date('short') }} <div class="item-bloc">
{{ accompanyingCourse.closingMotive|chill_entity_render_box }} <div class="item-row">
{{ accompanyingCourse.remark|raw }} <div class="item-col">
{{ accompanyingCourse.user }} <h3>
usagers: <a href="{{ path('chill_person_accompanying_period_list', { person_id: p.person.id }) }}">
{% for p in accompanyingCourse.participations %} {{ p.person.firstname ~ ' ' ~ p.person.lastname }}
{{ 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') }} </a>
{% endfor %} </h3>
</pre> <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 #} {# ==> insert accompanyingCourse vue component #}
<div id="accompanying-course"></div> <div id="accompanying-course"></div>

235
src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourse/index.html.twig
View File

@ -23,46 +23,48 @@
{% for p in accompanyingCourse.participations %} {% for p in accompanyingCourse.participations %}
{% if p.enddate is null %} {% if p.enddate is null %}
<div class="item-bloc"> <div class="item-bloc">
<div class="item-row">
<h5>{{ p.person.firstname ~ ' ' ~ p.person.lastname }}</h5> <div class="item-col">
<dl class="content-bloc"> <h3>{{ p.person.firstname ~ ' ' ~ p.person.lastname }}</h3>
<p>
<dd> {% set born = (p.person.gender == 'woman') ? 'née': 'né' %}
{% set born = (p.person.gender == 'woman') ? 'née': 'né' %} {% set gender = (p.person.gender == 'woman') ? 'fa-venus' :
{% set gender = (p.person.gender == 'woman') ? 'fa-venus' : (p.person.gender == 'man') ? 'fa-mars' : 'fa-neuter' %}
(p.person.gender == 'man') ? 'fa-mars' : 'fa-neuter' %} {% set genderTitle = (p.person.gender == 'woman') ? 'femme' :
{% set genderTitle = (p.person.gender == 'woman') ? 'femme' : (p.person.gender == 'homme') ? 'fa-mars' : 'neutre' %}
(p.person.gender == 'homme') ? 'fa-mars' : 'neutre' %} <i class="fa fa-fw {{ gender }}" title="{{ genderTitle }}"></i>{{ born ~ ' le ' ~ p.person.birthdate|format_date('short') }}
<i class="fa fa-fw {{ gender }}" title="{{ genderTitle }}"></i>{{ born ~ ' le ' ~ p.person.birthdate|format_date('short') }} </p>
</dd> </div>
<dd> <div class="item-col">
{% if p.person.mobilenumber %} <ul class="list-content fa-ul">
<i class="fa fa-fw fa-mobile"></i>{{ p.person.mobilenumber }} <li>
{% else %} {% if p.person.mobilenumber %}
<i class="fa fa-fw fa-phone"></i> <i class="fa fa-li fa-mobile"></i><a href="{{ 'tel:' ~ p.person.mobilenumber }}">{{ p.person.mobilenumber }}</a>
{% if p.person.phonenumber %} {% else %}
{{ p.person.phonenumber }} <i class="fa fa-li fa-phone"></i>
{% else %} {% if p.person.phonenumber %}
<span class="chill-no-data-statement">{{ 'No data given'|trans }}</span> <a href="{{ 'tel:' ~ p.person.phonenumber }}">{{ p.person.phonenumber }}</a>
{% endif %} {% else %}
{% endif %} <span class="chill-no-data-statement">{{ 'No data given'|trans }}</span>
</dd> {% endif %}
<dd> {% endif %}
{%- if p.person.lastAddress is not empty -%} </li>
{{ address._render(p.person.lastAddress, {'has_no_address': true, 'with_valid_from': false, 'with_icon': true}) }} <li>
{%- else -%} <i class="fa fa-li fa-map-marker"></i>
<i class="fa fa-fw fa-map-marker"></i> {%- if p.person.lastAddress is not empty -%}
<span class="chill-no-data-statement">{{ 'No address given'|trans }}</span> {{ p.person.getLastAddress|chill_entity_render_box({'with_valid_from': false}) }}
{%- endif -%} {%- else -%}
</dd> <span class="chill-no-data-statement">{{ 'No address given'|trans }}</span>
{%- endif -%}
</dl> </li>
<ul class="record_actions"> </ul>
<li> <ul class="record_actions">
<a href="{{ path('chill_person_view', { person_id: p.person.id }) }}" class="sc-button bt-show" target="_blank" title="Voir"></a> <li>
</li> <a href="{{ path('chill_person_view', { person_id: p.person.id }) }}" class="sc-button bt-show" target="_blank" title="Voir"></a>
</ul> </li>
</ul>
</div>
</div>
</div> </div>
{% endif %} {% endif %}
{% endfor %} {% endfor %}
@ -70,85 +72,96 @@
<h2>{{ 'Resources'|trans }}</h2> <h2>{{ 'Resources'|trans }}</h2>
<div class="flex-bloc right"> <div class="flex-bloc">
{% for r in accompanyingCourse.resources %} {% for r in accompanyingCourse.resources %}
<div class="item-bloc"> <div class="item-bloc">
{% if r.person %} {% if r.person %}
<h5> <div class="item-row">
{{ r.person.firstname ~ ' ' ~ r.person.lastname }} <div class="item-col">
<span class="badge badge-pill badge-light">{{ 'Usager' }}</span> <h3>
</h5> {{ r.person.firstname ~ ' ' ~ r.person.lastname }}
<dl class="content-bloc"> <span class="badge badge-pill badge-secondary">{{ 'Usager' }}</span>
</h3>
<dd> <p>
{% set born = (r.person.gender == 'woman') ? 'née': 'né' %} {% set born = (r.person.gender == 'woman') ? 'née': 'né' %}
{% set gender = (r.person.gender == 'woman') ? 'fa-venus' : {% set gender = (r.person.gender == 'woman') ? 'fa-venus' :
(r.person.gender == 'man') ? 'fa-mars' : 'fa-neuter' %} (r.person.gender == 'man') ? 'fa-mars' : 'fa-neuter' %}
{% set genderTitle = (r.person.gender == 'woman') ? 'femme' : {% set genderTitle = (r.person.gender == 'woman') ? 'femme' :
(r.person.gender == 'mhomme') ? 'fa-mars' : 'neutre' %} (r.person.gender == 'homme') ? 'fa-mars' : 'neutre' %}
<i class="fa fa-fw {{ gender }}" title="{{ genderTitle }}"></i>{{ born ~ ' le ' ~ r.person.birthdate|format_date('short') }} <i class="fa fa-fw {{ gender }}" title="{{ genderTitle }}"></i>{{ born ~ ' le ' ~ r.person.birthdate|format_date('short') }}
</dd> </p>
<dd> </div>
{% if r.person.mobilenumber %} <div class="item-col">
<i class="fa fa-fw fa-mobile"></i>{{ r.person.mobilenumber }} <ul class="list-content fa-ul">
{% else %} <li>
<i class="fa fa-fw fa-phone"></i> {% if r.person.mobilenumber %}
{% if r.person.phonenumber %} <i class="fa fa-li fa-mobile"></i><a href="{{ 'tel:' ~ r.person.mobilenumber }}">{{ r.person.mobilenumber }}</a>
{{ r.person.phonenumber }} {% else %}
{% else %} <i class="fa fa-li fa-phone"></i>
<span class="chill-no-data-statement">{{ 'No data given'|trans }}</span> {% if r.person.phonenumber %}
{% endif %} <a href="{{ 'tel:' ~ r.person.phonenumber }}">{{ r.person.phonenumber }}</a>
{% endif %} {% else %}
</dd> <span class="chill-no-data-statement">{{ 'No data given'|trans }}</span>
<dd> {% endif %}
{%- if r.person.lastAddress is not empty -%} {% endif %}
{{ address._render(r.person.lastAddress, {'has_no_address': true, 'with_valid_from': false, 'with_icon': true}) }} </li>
{%- else -%} <li>
<i class="fa fa-fw fa-map-marker"></i> <i class="fa fa-li fa-map-marker"></i>
<span class="chill-no-data-statement">{{ 'No address given'|trans }}</span> {%- if r.person.lastAddress is not empty -%}
{%- endif -%} {{ r.person.getLastAddress|chill_entity_render_box({'with_valid_from': false}) }}
</dd> {%- else -%}
<span class="chill-no-data-statement">{{ 'No address given'|trans }}</span>
</dl> {%- endif -%}
<ul class="record_actions"> </li>
<li> </ul>
<a href="{{ path('chill_person_view', { person_id: r.person.id }) }}" class="sc-button bt-show" target="_blank" title="Voir"></a> <ul class="record_actions">
</li> <li>
</ul> <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 %} {% endif %}
{% if r.thirdParty %} {% if r.thirdParty %}
<h5> <div class="item-row">
{{ r.thirdParty.name }} <div class="item-col">
<span class="badge badge-pill badge-light">{{ 'Tiers' }}</span> <h3>
</h5> {{ r.thirdParty.name }}
<dl class="content-bloc"> <span class="badge badge-pill badge-secondary">{{ 'Tiers' }}</span>
</h3>
<dd> </div>
<i class="fa fa-fw fa-envelope-o"></i> <div class="item-col">
<a href="{{ 'mailto:' ~ r.thirdParty.email }}"> <ul class="list-content fa-ul">
{{ r.thirdParty.email|chill_print_or_message("thirdparty.No_email") }} <li><i class="fa fa-li fa-envelope-o"></i>
</a> <a href="{{ 'mailto:' ~ r.thirdParty.email }}">
</dd> {{ r.thirdParty.email|chill_print_or_message("thirdparty.No_email") }}
<dd> </a>
<i class="fa fa-fw fa-phone"></i>{{ r.thirdParty.telephone|chill_print_or_message("thirdparty.No_phonenumber") }} </li>
</dd> <li><i class="fa fa-li fa-phone"></i>
<dd> {% if r.thirdParty.telephone %}
{% if r.thirdParty.address == null %} <a href="{{ 'tel:' ~ r.thirdParty.telephone }}">{{ r.thirdParty.telephone }}</a>
<i class="fa fa-fw fa-map-marker"></i><span class="chill-no-data-statement">{{ 'No address given'|trans }}</span> {% else %}
{% else %} <span class="chill-no-data-statement">{{ 'thirdparty.No_phonenumber'|trans }}</span>
{{ address._render(r.thirdParty.address, {'with_valid_from': false, 'with_icon': true }) }} {% endif %}
{% endif %} </li>
</dd> <li><i class="fa fa-li fa-map-marker"></i>
{%- if r.thirdParty.address is not empty -%}
</dl> {{ r.thirdParty.getAddress|chill_entity_render_box({'with_valid_from': false}) }}
<ul class="record_actions"> {%- else -%}
<li> <span class="chill-no-data-statement">{{ 'No address given'|trans }}</span>
<a href="{{ path('chill_3party_3party_show', { thirdparty_id: r.thirdParty.id }) }}" class="sc-button bt-show" target="_blank" title="Voir"></a> {%- endif -%}
</li> </li>
</ul> </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 %} {% endif %}
</div> </div>

78
src/Bundle/ChillPersonBundle/Resources/views/Person/list_with_period.html.twig
View File

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

1
src/Bundle/ChillPersonBundle/translations/messages.fr.yml
View File

@ -173,6 +173,7 @@ Social actions: Actions d'accompagnement
Last events on accompanying course: Dernières actions de suivi Last events on accompanying course: Dernières actions de suivi
Edit & activate accompanying course: Modifier et valider Edit & activate accompanying course: Modifier et valider
See accompanying periods: Voir les périodes d'accompagnement See accompanying periods: Voir les périodes d'accompagnement
See accompanying period: Voir cette période d'accompagnement
Referrer: Référent Referrer: Référent
# pickAPersonType # pickAPersonType