mirror of
https://gitlab.com/Chill-Projet/chill-bundles.git
synced 2025-06-13 05:44:24 +00:00
adding a new 'wraplist' sass element in flex-table collection: applied with AccompanyingPeriod lists
This commit is contained in:
parent
d61dbaed91
commit
5b8439e13c
@ -1,4 +1,5 @@
|
|||||||
/*
|
/*
|
||||||
|
* __FLEX-TABLE_________
|
||||||
* FLEX RESPONSIVE TABLE/BLOCK PRESENTATION
|
* FLEX RESPONSIVE TABLE/BLOCK PRESENTATION
|
||||||
*/
|
*/
|
||||||
|
|
||||||
@ -40,7 +41,7 @@ div.flex-table {
|
|||||||
}
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
* Bloc appearance
|
* BLOC appearance
|
||||||
*/
|
*/
|
||||||
|
|
||||||
div.flex-bloc {
|
div.flex-bloc {
|
||||||
@ -87,7 +88,7 @@ div.flex-bloc {
|
|||||||
}
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
* Table appearance
|
* TABLE appearance
|
||||||
*/
|
*/
|
||||||
|
|
||||||
div.flex-table {
|
div.flex-table {
|
||||||
@ -107,6 +108,10 @@ div.flex-table {
|
|||||||
div.item-row {
|
div.item-row {
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
|
|
||||||
|
&:first-child {
|
||||||
|
align-items: baseline; //
|
||||||
|
}
|
||||||
|
|
||||||
&.separator {
|
&.separator {
|
||||||
margin-top: 0.5em;
|
margin-top: 0.5em;
|
||||||
border-top: 1px dotted $gray-900;
|
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;
|
flex-direction: column;
|
||||||
div.item-col {
|
div.item-col {
|
||||||
&:last-child {
|
&: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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
@ -9,19 +9,20 @@
|
|||||||
<i class="fa fa-fw fa-random"></i>
|
<i class="fa fa-fw fa-random"></i>
|
||||||
<b>{{ accompanying_period.id }}</b>
|
<b>{{ accompanying_period.id }}</b>
|
||||||
</span>
|
</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' %}
|
{% if accompanying_period.step == 'DRAFT' %}
|
||||||
<span class="badge bg-secondary">{{- 'Draft'|trans|upper -}}</span>
|
<span class="badge bg-secondary">{{- 'Draft'|trans|upper -}}</span>
|
||||||
{% else %}
|
{% else %}
|
||||||
<span class="badge bg-success">{{- 'Confirmed'|trans|upper -}}</span>
|
<span class="badge bg-success">{{- 'Confirmed'|trans|upper -}}</span>
|
||||||
{% endif %}
|
{% 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>
|
||||||
<div class="item-col"></div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="item-row">
|
<div class="item-row">
|
||||||
<div class="item-col">
|
<div class="item-col">
|
||||||
@ -52,49 +53,65 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="item-row separator">
|
<div class="item-row separator">
|
||||||
<div class="item-col"><h3>{{ 'Participants'|trans }}</h3></div>
|
<div class="wraplist">
|
||||||
<div class="item-col">
|
<div class="wl-row">
|
||||||
{% if accompanying_period.participations.count > 0 %}
|
<div class="wl-col title"><h3>{{ 'Participants'|trans }}</h3></div>
|
||||||
{% for p in accompanying_period.participations %}
|
<div class="wl-col list">
|
||||||
<p>
|
{% if accompanying_period.participations.count > 0 %}
|
||||||
<a href="{{ path('chill_person_accompanying_period_list', { person_id: p.person.id }) }}">
|
{% for p in accompanying_period.participations %}
|
||||||
{{ p.person.firstname ~ ' ' ~ p.person.lastname }}
|
<p class="wl-item">
|
||||||
</a>
|
<a href="{{ path('chill_person_accompanying_period_list', { person_id: p.person.id }) }}">
|
||||||
</p>
|
{{ p.person.firstname ~ ' ' ~ p.person.lastname }}
|
||||||
{% endfor %}
|
</a>
|
||||||
{% else %}
|
</p>
|
||||||
<span class="chill-no-data-statement">{{ 'No data given'|trans }}</span>
|
{% endfor %}
|
||||||
{% endif %}
|
{% else %}
|
||||||
|
<span class="chill-no-data-statement">{{ 'No data given'|trans }}</span>
|
||||||
|
{% endif %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="item-row">
|
<div class="item-row">
|
||||||
<div class="item-col"><h3>{{ 'Requestor'|trans }}</h3></div>
|
<div class="wraplist">
|
||||||
<div class="item-col">
|
<div class="wl-row">
|
||||||
{% if accompanying_period.requestorPerson is not null or accompanying_period.requestorThirdParty is not null %}
|
<div class="wl-col title"><h3>{{ 'Requestor'|trans }}</h3></div>
|
||||||
{% if accompanying_period.requestorPerson is not null %}
|
<div class="wl-col list">
|
||||||
<p>
|
{% if accompanying_period.requestorPerson is not null or accompanying_period.requestorThirdParty is not null %}
|
||||||
{{ accompanying_period.requestorPerson.firstname ~ ' ' ~ accompanying_period.requestorPerson.lastname }}
|
{% if accompanying_period.requestorPerson is not null %}
|
||||||
</p>
|
<p class="wl-item">
|
||||||
{% endif %}
|
{{ accompanying_period.requestorPerson.firstname ~ ' ' ~ accompanying_period.requestorPerson.lastname }}
|
||||||
{% if accompanying_period.requestorThirdParty is not null %}
|
</p>
|
||||||
<p>
|
{% endif %}
|
||||||
{{ accompanying_period.requestorThirdParty.name }}
|
{% if accompanying_period.requestorThirdParty is not null %}
|
||||||
</p>
|
<p class="wl-item">
|
||||||
{% endif %}
|
{{ accompanying_period.requestorThirdParty.name }}
|
||||||
{% else %}
|
</p>
|
||||||
<span class="chill-no-data-statement">{{ 'No data given'|trans }}</span>
|
{% endif %}
|
||||||
{% endif %}
|
{% else %}
|
||||||
|
<span class="chill-no-data-statement">{{ 'No data given'|trans }}</span>
|
||||||
|
{% endif %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="item-row">
|
<div class="item-row">
|
||||||
<h3>{{ 'Social issues'|trans }}</h3>
|
<div class="wraplist">
|
||||||
{% if accompanying_period.socialIssues.count > 0 %}
|
<div class="wl-row">
|
||||||
{% for si in accompanying_period.socialIssues %}
|
<div class="wl-col title"><h3>{{ 'Social issues'|trans }}</h3></div>
|
||||||
<p>{{ si.title|localize_translatable_string }}</p>
|
<div class="wl-col list">
|
||||||
{% endfor %}
|
{% if accompanying_period.socialIssues.count > 0 %}
|
||||||
{% else %}
|
{% for si in accompanying_period.socialIssues %}
|
||||||
<span class="chill-no-data-statement">{{ 'No data given'|trans }}</span>
|
<p class="wl-item">
|
||||||
{% endif %}
|
{{ 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>
|
||||||
|
|
||||||
<div class="item-row separator">
|
<div class="item-row separator">
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user