mirror of
https://gitlab.com/Chill-Projet/chill-bundles.git
synced 2025-06-07 18:44:08 +00:00
improve flex-table logic, with accompanying period list template
This commit is contained in:
parent
d34a00b2c0
commit
ee819e7767
@ -1,59 +1,80 @@
|
||||
/*
|
||||
* FLEX RESPONSIVE TABLE/BLOCK PRESENTATION
|
||||
*/
|
||||
|
||||
div.flex-bloc,
|
||||
div.flex-table {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
align-content: stretch;
|
||||
box-sizing: border-box;
|
||||
margin: 1.5em 0;
|
||||
|
||||
div.item-bloc {
|
||||
display: flex;
|
||||
@include border-collapse;
|
||||
padding: 1em;
|
||||
|
||||
div.item-row {
|
||||
display: flex;
|
||||
|
||||
div.item-col:last-child {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
h2, h3, h4, dl, p {
|
||||
margin: 0;
|
||||
}
|
||||
h2, h3, h4 {
|
||||
color: $blue;
|
||||
}
|
||||
div.item-bloc {
|
||||
@include border-collapse;
|
||||
|
||||
ul.record_actions {
|
||||
margin: 0;
|
||||
li {
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* Bloc appearance
|
||||
*/
|
||||
|
||||
div.flex-bloc {
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
align-items: stretch;
|
||||
align-content: stretch;
|
||||
|
||||
div.item-bloc {
|
||||
flex-grow: 0; flex-shrink: 1; flex-basis: auto;
|
||||
margin: 0;
|
||||
padding: 1em;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 0;
|
||||
|
||||
div.item-row {
|
||||
flex-grow: 1; flex-shrink: 1; flex-basis: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
div.item-col {
|
||||
&.separator {
|
||||
margin-top: 0.5em;
|
||||
border-top: 1px dotted $gray-900;
|
||||
padding-top: 0.5em;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
flex-grow: 0; flex-shrink: 0; flex-basis: auto;
|
||||
padding-bottom: 0.5em;
|
||||
border-bottom: 1px dotted $gray-900;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
flex-grow: 1; flex-shrink: 1; flex-basis: auto;
|
||||
display: flex;
|
||||
|
||||
ul.record_actions {
|
||||
margin: 0;
|
||||
align-self: flex-end;
|
||||
flex-grow: 1; flex-shrink: 0; flex-basis: auto;
|
||||
margin: 0;
|
||||
|
||||
li {
|
||||
margin-right: 5px;
|
||||
}
|
||||
@ -67,53 +88,47 @@ div.flex-bloc {
|
||||
/*
|
||||
* 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;
|
||||
|
||||
&:nth-child(even) {
|
||||
background-color: $gray-200;
|
||||
|
||||
.chill-user-quote {
|
||||
background-color: shade-color($gray-200, 5%)
|
||||
}
|
||||
}
|
||||
|
||||
div.item-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
&:not(:first-child) {
|
||||
&.separator {
|
||||
margin-top: 0.5em;
|
||||
border-top: 1px dotted $gray-900;
|
||||
padding-top: 0.5em;
|
||||
flex-direction: column;
|
||||
//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;
|
||||
justify-content: flex-end;
|
||||
|
||||
ul.record_actions {
|
||||
flex-grow: 1; flex-shrink: 0; flex-basis: auto;
|
||||
align-self: flex-start;
|
||||
margin: 0;
|
||||
li {
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 900px) {
|
||||
flex-direction: column;
|
||||
div.item-col {
|
||||
@ -124,7 +139,6 @@ div.flex-table {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
|
||||
//
|
||||
//
|
||||
// Titles in forms
|
||||
//
|
||||
|
||||
@mixin title_in_form {
|
||||
|
||||
@ -4,29 +4,24 @@
|
||||
/*
|
||||
* PERSON CONTEXT
|
||||
*/
|
||||
|
||||
div#header-person-name {
|
||||
background: none repeat scroll 0 0 $chill-green-dark;
|
||||
color: $white;
|
||||
padding-top: 1em;
|
||||
padding-bottom: 1em;
|
||||
}
|
||||
|
||||
div#header-person-details {
|
||||
background: none repeat scroll 0 0 $chill-green;
|
||||
color: $white;
|
||||
padding-top: 1em;
|
||||
padding-bottom: 1em;
|
||||
div.contact {
|
||||
& > * {
|
||||
margin-right: 1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
div#person_details_container {
|
||||
padding-top: 20px;
|
||||
padding-bottom: 20px;
|
||||
div.banner {
|
||||
div#header-person-name {
|
||||
background: none repeat scroll 0 0 $chill-green-dark;
|
||||
color: $white;
|
||||
padding-top: 1em;
|
||||
padding-bottom: 1em;
|
||||
}
|
||||
div#header-person-details {
|
||||
background: none repeat scroll 0 0 $chill-green;
|
||||
color: $white;
|
||||
padding-top: 1em;
|
||||
padding-bottom: 1em;
|
||||
div.contact {
|
||||
& > * {
|
||||
margin-right: 1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
div.person-view {
|
||||
@ -83,83 +78,77 @@ div.person-view {
|
||||
* ACCOMPANYING_COURSE CONTEXT
|
||||
* Header custom for Accompanying Course
|
||||
*/
|
||||
$chill-accourse: #718596;
|
||||
$chill-accourse-context: #718596;
|
||||
|
||||
div#header-accompanying_course-name {
|
||||
background: none repeat scroll 0 0 $chill-accourse;
|
||||
color: $white;
|
||||
h1 {
|
||||
margin: 0.4em 0;
|
||||
}
|
||||
span {
|
||||
a {
|
||||
color: $white;
|
||||
div.banner {
|
||||
div#header-accompanying_course-name {
|
||||
background: none repeat scroll 0 0 $chill-accourse-context;
|
||||
color: $white;
|
||||
h1 {
|
||||
margin: 0.4em 0;
|
||||
}
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
span {
|
||||
a {
|
||||
color: $white;
|
||||
}
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
div#header-accompanying_course-details {
|
||||
background: none repeat scroll 0 0 tint-color($chill-accourse, 20%);
|
||||
color: $white;
|
||||
padding-top: 1em;
|
||||
padding-bottom: 1em;
|
||||
}
|
||||
|
||||
// flex-table precision
|
||||
div.accompanyingcourse-resume {
|
||||
div.associated-persons {
|
||||
.flex-table .item-row .item-col:first-child { flex-basis: 33%; }
|
||||
div#header-accompanying_course-details {
|
||||
background: none repeat scroll 0 0 tint-color($chill-accourse-context, 20%);
|
||||
color: $white;
|
||||
padding-top: 1em;
|
||||
padding-bottom: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* HOUSEHOLD CONTEXT
|
||||
* Header custom for Household
|
||||
*/
|
||||
$chill-household: #929d69;
|
||||
$chill-household-context: #929d69;
|
||||
|
||||
div#header-household-name {
|
||||
background: none repeat scroll 0 0 $chill-household;
|
||||
color: $white;
|
||||
h1 {
|
||||
margin: 0.4em 0;
|
||||
}
|
||||
span {
|
||||
a {
|
||||
color: $white;
|
||||
div.banner {
|
||||
div#header-household-name {
|
||||
background: none repeat scroll 0 0 $chill-household-context;
|
||||
color: $white;
|
||||
h1 {
|
||||
margin: 0.4em 0;
|
||||
}
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
span {
|
||||
a {
|
||||
color: $white;
|
||||
}
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
div.household-members {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
span.badge-member {
|
||||
flex-shrink: 0; flex-grow: 0; flex-basis: auto;
|
||||
color: $white;
|
||||
border: 1px solid #ffffff3b;
|
||||
border-radius: 8px;
|
||||
padding: 0.4em 0.8em;
|
||||
margin-bottom: 0.2em;
|
||||
margin-right: 0.3em;
|
||||
&.holder { order: -1; }
|
||||
&.child { order: 2; }
|
||||
}
|
||||
}
|
||||
}
|
||||
div.household-members {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
span.badge-member {
|
||||
flex-shrink: 0; flex-grow: 0; flex-basis: auto;
|
||||
color: $white;
|
||||
border: 1px solid #ffffff3b;
|
||||
border-radius: 8px;
|
||||
padding: 0.4em 0.8em;
|
||||
margin-bottom: 0.2em;
|
||||
margin-right: 0.3em;
|
||||
&.holder { order: -1; }
|
||||
&.child { order: 2; }
|
||||
div#header-household-details {
|
||||
background: none repeat scroll 0 0 tint-color($chill-household-context, 15%);
|
||||
color: $white;
|
||||
padding-top: 1em;
|
||||
padding-bottom: 1em;
|
||||
span.current-members-explain {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
div#header-household-details {
|
||||
background: none repeat scroll 0 0 tint-color($chill-household, 15%);
|
||||
color: $white;
|
||||
padding-top: 1em;
|
||||
padding-bottom: 1em;
|
||||
span.current-members-explain {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -8,6 +8,7 @@ require('./scss/household_banner.scss');
|
||||
require('./scss/accompanying_period_work.scss');
|
||||
require('./scss/person_by_phonenumber.scss');
|
||||
require('./scss/render_box.scss');
|
||||
require('./scss/flex_table.scss');
|
||||
require('./scss/address_history.scss');
|
||||
|
||||
require('./svg/phone-alt-solid.svg');
|
||||
|
||||
@ -0,0 +1,31 @@
|
||||
/*
|
||||
* flex-table overwrite: precision and exceptions
|
||||
*/
|
||||
|
||||
///
|
||||
div.accompanyingcourse-resume {
|
||||
div.associated-persons {
|
||||
.flex-table .item-row .item-col:first-child {
|
||||
flex-basis: 33%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
///
|
||||
div.accompanyingcourse-list, div.household-members {
|
||||
.flex-table .item-bloc .item-row {
|
||||
&:nth-child(2) {
|
||||
flex-direction: row;
|
||||
}
|
||||
&:last-child {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
///
|
||||
div.list-with-period {
|
||||
div.flex-table div.item-row div.item-col:first-child {
|
||||
flex-basis: 33%;
|
||||
}
|
||||
}
|
||||
@ -1,11 +1,6 @@
|
||||
/// overwrite flex-table
|
||||
div.list-with-period {
|
||||
div.flex-table div.item-row div.item-col:first-child { flex-basis: 33%; }
|
||||
}
|
||||
|
||||
///
|
||||
div.list-with-period,
|
||||
div.list-household-members {
|
||||
div.list-with-period, div.list-household-members {
|
||||
|
||||
div.periods {
|
||||
div.header,
|
||||
|
||||
@ -5,33 +5,28 @@
|
||||
<div class="item-row">
|
||||
|
||||
<div class="item-col">
|
||||
<b>#{{ accompanying_period.id }}</b>
|
||||
<span class="h3">
|
||||
<i class="fa fa-fw fa-random"></i>
|
||||
<b>{{ accompanying_period.id }}</b>
|
||||
</span>
|
||||
{% if accompanying_period.step == 'DRAFT' %}
|
||||
<span class="badge bg-primary">{{- 'Draft'|trans|upper -}}</span>
|
||||
{% else %}
|
||||
<span class="badge bg-primary">{{- 'Confirmed'|trans|upper -}}</span>
|
||||
{% endif %}
|
||||
{% if accompanying_period.emergency %}
|
||||
<span class="badge bg-primary">{{- 'Emergency'|trans|upper -}}</span>
|
||||
{% endif %}
|
||||
{% if accompanying_period.confidential %}
|
||||
<span class="badge bg-primary">{{- 'Confidential'|trans|upper -}}</span>
|
||||
{% endif %}
|
||||
{% if accompanying_period.step == 'DRAFT' %}
|
||||
<span class="badge bg-primary">{{- 'Draft'|trans|upper -}}</span>
|
||||
{% else %}
|
||||
<span class="badge bg-primary">{{- 'Confirmed'|trans|upper -}}</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div class="item-col">
|
||||
{% if chill_accompanying_periods.fields.user == 'visible' %}
|
||||
{% if accompanying_period.user %}
|
||||
{{ accompanying_period.user.username }}
|
||||
{% else %}
|
||||
<span class="chill-no-data-statement">{{ 'No accompanying user'|trans }}</span>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="item-col"></div>
|
||||
|
||||
</div>
|
||||
<div class="item-row">
|
||||
|
||||
<div class="item-col">
|
||||
{% if accompanying_period.closingDate == null %}
|
||||
{{ 'accompanying_period.dates_from_%opening_date%'|trans({ '%opening_date%': accompanying_period.openingDate|format_date('long') } ) }}
|
||||
{% else %}
|
||||
@ -46,9 +41,20 @@
|
||||
</dl>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div class="item-col">
|
||||
{% if chill_accompanying_periods.fields.user == 'visible' %}
|
||||
{% if accompanying_period.user %}
|
||||
{{ accompanying_period.user.username }}
|
||||
{% else %}
|
||||
<span class="chill-no-data-statement">{{ 'No accompanying user'|trans }}</span>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="item-row">
|
||||
<div class="item-row separator">
|
||||
|
||||
<div class="item-col"><h3>{{ 'Participants'|trans }}</h3></div>
|
||||
<div class="item-col">
|
||||
@ -99,17 +105,14 @@
|
||||
{% endif %}
|
||||
|
||||
</div>
|
||||
<div class="item-row">
|
||||
<div class="item-row separator">
|
||||
|
||||
<ul class="record_actions">
|
||||
|
||||
{# TODO if enable_accompanying_course_with_multiple_persons is true ... #}
|
||||
<li>
|
||||
<a href="{{ path('chill_person_accompanying_course_index', { 'accompanying_period_id': accompanying_period.id }) }}"
|
||||
class="btn btn-primary" title="{{ 'See accompanying period'|trans }}">
|
||||
<i class="fa fa-fw fa-random"></i>
|
||||
{{ 'See this period'|trans }}
|
||||
</a>
|
||||
class="btn btn-show" title="{{ 'See accompanying period'|trans }}">{{ 'See this period'|trans }}</a>
|
||||
</li>
|
||||
|
||||
{# TODO cause error in household context. only works in person context
|
||||
|
||||
@ -89,7 +89,7 @@
|
||||
<div class="item-col">
|
||||
{{ _self.label(person, options) }}
|
||||
</div>
|
||||
<div class="item-col">
|
||||
<div class="item-col separator">
|
||||
<ul class="list-content fa-ul">
|
||||
{% set multiline = (options['address_multiline']) ? true : false %}
|
||||
{{ person.getLastAddress|chill_entity_render_box({
|
||||
|
||||
@ -68,7 +68,7 @@
|
||||
{%- endfor %}
|
||||
|
||||
{% if apps|length > 0 %}
|
||||
<div class="item-row periods">
|
||||
<div class="item-row separator periods">
|
||||
{% for app in apps %}
|
||||
|
||||
<div class="header">
|
||||
|
||||
@ -66,7 +66,7 @@
|
||||
<div class="item-col">
|
||||
{{ _self.label(thirdparty, options) }}
|
||||
</div>
|
||||
<div class="item-col">
|
||||
<div class="item-col separator">
|
||||
<ul class="list-content fa-ul">
|
||||
{{ thirdparty.getAddress|chill_entity_render_box({
|
||||
'render': 'list',
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user