mirror of
https://gitlab.com/Chill-Projet/chill-bundles.git
synced 2025-06-12 21:34:25 +00:00
improve flex-table and flex-box
This commit is contained in:
parent
37996651c4
commit
6c8f1f77ff
@ -71,75 +71,102 @@ div#header-accompanying_course-details {
|
||||
/*
|
||||
* 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 {
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
align-items: stretch;
|
||||
align-content: stretch;
|
||||
&.right {
|
||||
justify-content: flex-end;
|
||||
div.item-bloc {
|
||||
margin-left: 1em;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
div.item-bloc {
|
||||
flex-grow: 0; flex-shrink: 1; flex-basis: 50%;
|
||||
|
||||
margin: 0;
|
||||
border: 1px solid #000;
|
||||
margin-bottom: 1em;
|
||||
margin-right: 1em;
|
||||
margin-left: 0;
|
||||
padding: 1em;
|
||||
padding-bottom: 0;
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
flex-basis: 30%;
|
||||
background-color: #e6e6e6;
|
||||
|
||||
border-top: 0;
|
||||
&:nth-child(1), &:nth-child(2) {
|
||||
border-top: 1px solid #000;
|
||||
}
|
||||
border-left: 0;
|
||||
&:nth-child(odd) {
|
||||
border-left: 1px solid #000;
|
||||
}
|
||||
|
||||
//background-color: #e6e6e6;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
h5 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0.3em;
|
||||
}
|
||||
.content-bloc {
|
||||
margin: 0;
|
||||
font-size: 80%;
|
||||
}
|
||||
dd {
|
||||
margin: 0.67em auto;
|
||||
}
|
||||
ul.record_actions {
|
||||
margin-top: auto;
|
||||
margin-bottom: 0;
|
||||
|
||||
div.item-row {
|
||||
flex-grow: 1; flex-shrink: 1; flex-basis: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
div.item-col {
|
||||
&:first-child {
|
||||
flex-grow: 0; flex-shrink: 0; flex-basis: auto;
|
||||
}
|
||||
&:last-child {
|
||||
flex-grow: 1; flex-shrink: 1; flex-basis: auto;
|
||||
display: flex;
|
||||
|
||||
.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) {
|
||||
div.item-bloc {
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
flex-basis: 45%;
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 768px) {
|
||||
@media only screen and (max-width: 945px) { margin: auto -0.2em; }
|
||||
@media only screen and (max-width: 935px) { margin: auto -0.5em; }
|
||||
@media only screen and (max-width: 920px) { margin: auto -0.9em; }
|
||||
@media only screen and (max-width: 900px) {
|
||||
flex-direction: column;
|
||||
margin: auto 0;
|
||||
div.item-bloc {
|
||||
margin-right: 0;
|
||||
}
|
||||
&.right div.item-bloc {
|
||||
margin-left: 0;
|
||||
border-left: 1px solid #000;
|
||||
&:nth-child(2) {
|
||||
border-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/// 2. table appearance
|
||||
/*
|
||||
* Table appearance
|
||||
*/
|
||||
div.flex-table {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
align-content: stretch;
|
||||
|
||||
div.item-bloc {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 1em;
|
||||
border: 1px solid #000;
|
||||
border-top: 0;
|
||||
&:first-child {
|
||||
@ -148,37 +175,51 @@ div.flex-table {
|
||||
&:nth-child(even) {
|
||||
background-color: #e6e6e6;
|
||||
}
|
||||
padding: 1em;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
& > h4, & > h5 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0.3em;
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
flex-basis: 33%;
|
||||
}
|
||||
& > .content-bloc {
|
||||
margin: 0;
|
||||
font-size: 80%;
|
||||
flex-grow: 1;
|
||||
flex-shrink: 0;
|
||||
flex-basis: 50%;
|
||||
dd {
|
||||
margin: 0.67em auto;
|
||||
|
||||
div.item-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
&:not(:first-child) {
|
||||
margin-top: 0.5em;
|
||||
border-top: 1px dotted #0000004f;
|
||||
padding-top: 0.5em;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
& > ul.record_actions {
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
flex-basis: 0;
|
||||
margin-top: auto;
|
||||
margin-bottom: 0;
|
||||
|
||||
div.item-col {
|
||||
&:first-child {
|
||||
flex-grow: 0; flex-shrink: 0; flex-basis: 33%;
|
||||
}
|
||||
&:last-child {
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,63 +1,46 @@
|
||||
/// complete and overwrite flex-table in chillmain.scss
|
||||
div.list-with-period { // .flex-table
|
||||
|
||||
div.item-bloc {
|
||||
margin-bottom: 0;
|
||||
|
||||
&:nth-last-of-type {
|
||||
padding-bottom: 1em;
|
||||
div.list-with-period {
|
||||
div.person {
|
||||
ul.record_actions {
|
||||
li {
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
flex-direction: column; // !!
|
||||
& > div {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
&.person {
|
||||
div.box-person {
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
flex-basis: 33%;
|
||||
}
|
||||
div.box-where {
|
||||
flex-grow: 1;
|
||||
flex-shrink: 0;
|
||||
flex-basis: 40%;
|
||||
}
|
||||
ul.record_actions {
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
flex-basis: 25%;
|
||||
li {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 768px) {
|
||||
flex-direction: column;
|
||||
}
|
||||
div.periods {
|
||||
div.header,
|
||||
div.list-content {
|
||||
width: calc(100% - 40px);
|
||||
margin-left: 40px;
|
||||
}
|
||||
div.header {
|
||||
position: relative;
|
||||
a.sc-button {
|
||||
position: absolute;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
top: 10px;
|
||||
left: -40px;
|
||||
padding: 0;
|
||||
i {
|
||||
padding: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
&.periods {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
div.header {
|
||||
abbr.referrer {
|
||||
font-size: 70%;
|
||||
}
|
||||
span.user {}
|
||||
}
|
||||
span.more {
|
||||
font-style: italic;
|
||||
}
|
||||
abbr.referrer {
|
||||
font-size: 70%;
|
||||
}
|
||||
span.user {
|
||||
margin-left: 1em;
|
||||
}
|
||||
}
|
||||
div.list-content {
|
||||
span.more {
|
||||
font-style: italic;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.chill-entity__person {
|
||||
.chill-entity__person__first-name,
|
||||
.chill-entity__person__last-name {
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -173,6 +173,7 @@ Social actions: Actions d'accompagnement
|
||||
Last events on accompanying course: Dernières actions de suivi
|
||||
Edit & activate accompanying course: Modifier et valider
|
||||
See accompanying periods: Voir les périodes d'accompagnement
|
||||
See accompanying period: Voir cette période d'accompagnement
|
||||
Referrer: Référent
|
||||
|
||||
# pickAPersonType
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user