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

adding a new 'wraplist' sass element in flex-table collection: applied with AccompanyingPeriod lists

Browse Source
This commit is contained in:
Mathieu Jaumotte 2021-08-20 00:38:40 +02:00
parent d61dbaed91
commit 5b8439e13c
2 changed files with 124 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
src/Bundle/ChillMainBundle/Resources/public/chill/scss/flex_table.scss
View File

@ -1,4 +1,5 @@
/*
* __FLEX-TABLE_________
* FLEX RESPONSIVE TABLE/BLOCK PRESENTATION
*/
@ -40,7 +41,7 @@ div.flex-table {
}
/*
* Bloc appearance
* BLOC appearance
*/
div.flex-bloc {
@ -87,7 +88,7 @@ div.flex-bloc {
}
/*
* Table appearance
* TABLE appearance
*/
div.flex-table {
@ -107,6 +108,10 @@ div.flex-table {
div.item-row {
flex-direction: row;
&:first-child {
align-items: baseline; //
}
&.separator {
margin-top: 0.5em;
border-top: 1px dotted $gray-900;
@ -130,7 +135,7 @@ div.flex-table {
}
}
@media only screen and (max-width: 900px) {
@include media-breakpoint-down(md) {
flex-direction: column;
div.item-col {
&:last-child {
@ -143,3 +148,58 @@ div.flex-table {
}
}
}
/*
* __WRAP-LIST-INLINE_________
* FLEX RESPONSIVE INLINE DEFINITION LIST
*/
div.wraplist {
padding: 0;
width: 100%;
div.wl-row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
div.wl-col.title {
width: auto;
@include media-breakpoint-up(md) {
margin-left: 1.5em;
}
& > * {
padding-right: 1em;
}
}
div.wl-col.list {
width: 75%;
margin: auto 0 0 auto;
p.wl-item {
margin: 0.1em;
padding: 0em;
display: inline-block;
}
}
}
&.debug .wl-row {
border: 1px solid $black;
div.wl-col.title {
background-color: $yellow;
}
div.wl-col.list {
background-color: $green;
p.wl-item {
background-color: $orange;
}
}
}
}

105
src/Bundle/ChillPersonBundle/Resources/views/AccompanyingPeriod/_list.html.twig
View File

@ -9,19 +9,20 @@
<i class="fa fa-fw fa-random"></i>
<b>{{ accompanying_period.id }}</b>
</span>
{% if accompanying_period.emergency %}
<span class="badge bg-danger">{{- 'Emergency'|trans|upper -}}</span>
{% endif %}
{% if accompanying_period.confidential %}
<span class="badge bg-danger">{{- 'Confidential'|trans|upper -}}</span>
{% endif %}
</div>
<div class="item-col">
{% if accompanying_period.step == 'DRAFT' %}
<span class="badge bg-secondary">{{- 'Draft'|trans|upper -}}</span>
{% else %}
<span class="badge bg-success">{{- 'Confirmed'|trans|upper -}}</span>
{% endif %}
{% if accompanying_period.emergency %}
<span class="badge bg-danger">{{- 'Emergency'|trans|upper -}}</span>
{% endif %}
{% if accompanying_period.confidential %}
<span class="badge bg-warning">{{- 'Confidential'|trans|upper -}}</span>
{% endif %}
</div>
<div class="item-col"></div>
</div>
<div class="item-row">
<div class="item-col">
@ -52,49 +53,65 @@
</div>
<div class="item-row separator">
<div class="item-col"><h3>{{ 'Participants'|trans }}</h3></div>
<div class="item-col">
{% if accompanying_period.participations.count > 0 %}
{% for p in accompanying_period.participations %}
<p>
<a href="{{ path('chill_person_accompanying_period_list', { person_id: p.person.id }) }}">
{{ p.person.firstname ~ ' ' ~ p.person.lastname }}
</a>
</p>
{% endfor %}
{% else %}
<span class="chill-no-data-statement">{{ 'No data given'|trans }}</span>
{% endif %}
<div class="wraplist">
<div class="wl-row">
<div class="wl-col title"><h3>{{ 'Participants'|trans }}</h3></div>
<div class="wl-col list">
{% if accompanying_period.participations.count > 0 %}
{% for p in accompanying_period.participations %}
<p class="wl-item">
<a href="{{ path('chill_person_accompanying_period_list', { person_id: p.person.id }) }}">
{{ p.person.firstname ~ ' ' ~ p.person.lastname }}
</a>
</p>
{% endfor %}
{% else %}
<span class="chill-no-data-statement">{{ 'No data given'|trans }}</span>
{% endif %}
</div>
</div>
</div>
</div>
<div class="item-row">
<div class="item-col"><h3>{{ 'Requestor'|trans }}</h3></div>
<div class="item-col">
{% if accompanying_period.requestorPerson is not null or accompanying_period.requestorThirdParty is not null %}
{% if accompanying_period.requestorPerson is not null %}
<p>
{{ accompanying_period.requestorPerson.firstname ~ ' ' ~ accompanying_period.requestorPerson.lastname }}
</p>
{% endif %}
{% if accompanying_period.requestorThirdParty is not null %}
<p>
{{ accompanying_period.requestorThirdParty.name }}
</p>
{% endif %}
{% else %}
<span class="chill-no-data-statement">{{ 'No data given'|trans }}</span>
{% endif %}
<div class="wraplist">
<div class="wl-row">
<div class="wl-col title"><h3>{{ 'Requestor'|trans }}</h3></div>
<div class="wl-col list">
{% if accompanying_period.requestorPerson is not null or accompanying_period.requestorThirdParty is not null %}
{% if accompanying_period.requestorPerson is not null %}
<p class="wl-item">
{{ accompanying_period.requestorPerson.firstname ~ ' ' ~ accompanying_period.requestorPerson.lastname }}
</p>
{% endif %}
{% if accompanying_period.requestorThirdParty is not null %}
<p class="wl-item">
{{ accompanying_period.requestorThirdParty.name }}
</p>
{% endif %}
{% else %}
<span class="chill-no-data-statement">{{ 'No data given'|trans }}</span>
{% endif %}
</div>
</div>
</div>
</div>
<div class="item-row">
<h3>{{ 'Social issues'|trans }}</h3>
{% if accompanying_period.socialIssues.count > 0 %}
{% for si in accompanying_period.socialIssues %}
<p>{{ si.title|localize_translatable_string }}</p>
{% endfor %}
{% else %}
<span class="chill-no-data-statement">{{ 'No data given'|trans }}</span>
{% endif %}
<div class="wraplist">
<div class="wl-row">
<div class="wl-col title"><h3>{{ 'Social issues'|trans }}</h3></div>
<div class="wl-col list">
{% if accompanying_period.socialIssues.count > 0 %}
{% for si in accompanying_period.socialIssues %}
<p class="wl-item">
{{ si.title|localize_translatable_string }}
</p>
{% endfor %}
{% else %}
<span class="chill-no-data-statement">{{ 'No data given'|trans }}</span>
{% endif %}
</div>
</div>
</div>
</div>
<div class="item-row separator">