mirror of
https://gitlab.com/Chill-Projet/chill-bundles.git
synced 2025-06-12 21:34:25 +00:00
reorganise flex-table assets, improve search results, and accompanyingPeriods list
This commit is contained in:
parent
38dcca7397
commit
d2b0b9d7da
@ -17,8 +17,8 @@ $chill-theme-buttons: (
|
||||
"update": $chill-orange,
|
||||
"show": $chill-blue,
|
||||
"view": $chill-blue,
|
||||
"misc": $chill-light-gray,
|
||||
"cancel": $chill-light-gray,
|
||||
"misc": $gray-300,
|
||||
"cancel": $gray-300,
|
||||
);
|
||||
|
||||
@each $button, $color in $chill-theme-buttons {
|
||||
@ -74,17 +74,17 @@ $chill-theme-buttons: (
|
||||
}
|
||||
&[class*='btn-']:empty {
|
||||
&::before {
|
||||
margin-right: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
&.btn-new::before,
|
||||
&.btn-create::before { content: "\f067"; } // fa-plus
|
||||
&.btn-edit::before,
|
||||
&.btn-create::before { content: "\f067"; } // fa-plus
|
||||
&.btn-edit::before,
|
||||
&.btn-update::before { content: "\f040"; } // fa-pencil
|
||||
&.btn-show::before,
|
||||
&.btn-show::before,
|
||||
&.btn-view::before { content: "\f06e"; } // fa-eye
|
||||
&.btn-save::before { content: "\f0c7"; } // fa-floppy-o
|
||||
&.btn-duplicate::before { content: "\f24d"; } // fa-clone // f0c5 fa-files-o
|
||||
|
||||
@ -59,11 +59,6 @@ div.flex-bloc {
|
||||
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;
|
||||
@ -71,15 +66,10 @@ div.flex-bloc {
|
||||
|
||||
&:last-child {
|
||||
flex-grow: 1; flex-shrink: 1; flex-basis: auto;
|
||||
@include separator;
|
||||
|
||||
ul.record_actions {
|
||||
align-self: flex-end;
|
||||
flex-grow: 1; flex-shrink: 0; flex-basis: auto;
|
||||
margin: 0;
|
||||
|
||||
li {
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -108,17 +98,6 @@ 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;
|
||||
padding-top: 0.5em;
|
||||
//flex-direction: column;
|
||||
}
|
||||
|
||||
div.item-col {
|
||||
&:first-child {
|
||||
flex-grow: 0; flex-shrink: 0; flex-basis: auto;
|
||||
@ -128,8 +107,11 @@ div.flex-table {
|
||||
flex-grow: 1; flex-shrink: 1; flex-basis: auto;
|
||||
justify-content: flex-end;
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
@include separator;
|
||||
}
|
||||
|
||||
ul.record_actions {
|
||||
flex-grow: 1; flex-shrink: 0; flex-basis: auto;
|
||||
align-self: flex-start;
|
||||
}
|
||||
}
|
||||
@ -150,11 +132,11 @@ div.flex-table {
|
||||
}
|
||||
|
||||
/*
|
||||
* __WRAP-LIST-INLINE_________
|
||||
* __WRAP_LIST_INLINE_________
|
||||
* FLEX RESPONSIVE INLINE DEFINITION LIST
|
||||
*/
|
||||
|
||||
div.wraplist {
|
||||
div.wrap-list {
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
|
||||
@ -166,6 +148,7 @@ div.wraplist {
|
||||
|
||||
div.wl-col.title {
|
||||
width: auto;
|
||||
flex-shrink: 0;
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
margin-left: 1.5em;
|
||||
@ -205,12 +188,13 @@ div.wraplist {
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*
|
||||
* __WRAP_HEADER_BLOC________
|
||||
* HEADER ROW FOR FLEX-TABLE ELEMENTS
|
||||
*/
|
||||
|
||||
div.wrapheader {
|
||||
div.wrap-header {
|
||||
width: 100%;
|
||||
|
||||
div.wh-row {
|
||||
@ -233,6 +217,44 @@ div.wrapheader {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.debug {
|
||||
border: 1px solid $black;
|
||||
div.wh-row {
|
||||
&:first-child div.wh-col {
|
||||
&:first-child { background-color: $yellow; }
|
||||
&:last-child { background-color: $beige; }
|
||||
}
|
||||
&:last-child div.wh-col {
|
||||
&:first-child { background-color: $orange; }
|
||||
&:last-child { background-color: $pink; }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* COMMON
|
||||
*/
|
||||
|
||||
div.flex-bloc,
|
||||
div.flex-table,
|
||||
div.wrap-list,
|
||||
div.wrap-header {
|
||||
|
||||
div.separator {
|
||||
@include separator;
|
||||
}
|
||||
|
||||
ul.record_actions {
|
||||
flex-grow: 1;
|
||||
flex-shrink: 0;
|
||||
flex-basis: auto;
|
||||
margin: 0;
|
||||
|
||||
li {
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -26,3 +26,10 @@
|
||||
0 1px 0 0 var(--bs-dark) inset;
|
||||
}
|
||||
|
||||
// Dotted line to separate rows
|
||||
|
||||
@mixin separator {
|
||||
margin-top: 0.5em;
|
||||
border-top: 1px dotted $gray-900;
|
||||
padding-top: 0.5em;
|
||||
}
|
||||
|
||||
@ -115,6 +115,12 @@ div.banner {
|
||||
}
|
||||
}
|
||||
|
||||
abbr.referrer {
|
||||
font-size: 70%;
|
||||
padding-right: 0.4em;
|
||||
align-self: center; // in flex context
|
||||
}
|
||||
|
||||
/*
|
||||
* HOUSEHOLD CONTEXT
|
||||
* Header custom for Household
|
||||
|
||||
@ -1,8 +1,50 @@
|
||||
|
||||
///
|
||||
div.list-with-period, div.list-household-members {
|
||||
/// Search Page (list_with_period.html.twig)
|
||||
div.list-with-period {
|
||||
|
||||
div.periods {
|
||||
// override wrap-list
|
||||
div.wrap-list.periods-list {
|
||||
div.wl-row {
|
||||
flex-wrap: nowrap;
|
||||
div.wl-col {
|
||||
&.title {
|
||||
width: 36%;
|
||||
@include media-breakpoint-up(md) {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
&.list {
|
||||
display: flex;
|
||||
flex-wrap: wrap; //
|
||||
margin: unset;
|
||||
}
|
||||
}
|
||||
@include media-breakpoint-down(sm) {
|
||||
flex-wrap: wrap;
|
||||
div.wl-col {
|
||||
&.title, &.list {
|
||||
width: 100%;
|
||||
}
|
||||
&.title {
|
||||
text-align: left;
|
||||
div {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
div.periods-list {
|
||||
div.title {
|
||||
text-align: right;
|
||||
div.date {}
|
||||
div.user {}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
div.header,
|
||||
div.list-content {
|
||||
width: calc(100% - 40px);
|
||||
@ -21,9 +63,6 @@ div.list-with-period, div.list-household-members {
|
||||
padding: 5px;
|
||||
}
|
||||
}
|
||||
abbr.referrer {
|
||||
font-size: 70%;
|
||||
}
|
||||
span.user {
|
||||
margin-left: 1em;
|
||||
}
|
||||
@ -33,8 +72,24 @@ div.list-with-period, div.list-household-members {
|
||||
font-style: italic;
|
||||
}
|
||||
}
|
||||
*/
|
||||
}
|
||||
|
||||
/// TODO
|
||||
|
||||
/// dans householdmembereditor/Concerned.vue
|
||||
div.positions {
|
||||
div.list-household-members {
|
||||
div.participation-details {}
|
||||
}
|
||||
}
|
||||
|
||||
/// dans householdmembereditor/Concerned.vue et dans household/summary
|
||||
div.list-household-members {
|
||||
div.move_to {
|
||||
p.move_hint {}
|
||||
}
|
||||
div.comment {}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -1,8 +1,18 @@
|
||||
section.chill-entity {
|
||||
/// CHILL ENTITY RENDER BOX
|
||||
.chill-entity {
|
||||
|
||||
/// PERSON
|
||||
&.entity-person {
|
||||
span.firstname,
|
||||
span.lastname,
|
||||
span.altname {}
|
||||
}
|
||||
|
||||
/// SOCIAL-ISSUE
|
||||
&.entity-social-issue {
|
||||
margin-right: 0.3em;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
@ -40,7 +40,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="item-col separator">
|
||||
<div class="item-col">
|
||||
<ul class="list-content fa-ul">
|
||||
<li v-if="person.current_household_address">
|
||||
<i class="fa fa-li fa-map-marker"></i>
|
||||
|
||||
@ -1,12 +1,12 @@
|
||||
<div class="border border-danger">
|
||||
<div class="alert alert-danger alert-with-actions mb-0">
|
||||
<div class="border border-warning">
|
||||
<div class="alert alert-warning alert-with-actions mb-0">
|
||||
<div class="message">
|
||||
{{ 'Some peoples does not belong to any household currently. Add them to an household soon'|trans }}
|
||||
</div>
|
||||
<ul class="record_actions">
|
||||
<li>
|
||||
<button class="btn btn-chill-pink" data-bs-toggle="collapse" href="#withoutHouseholdList">
|
||||
<i class="fa fa-fw fa-caret-down"></i><span class="text-light">{{ 'Add to household now'|trans }}</span>
|
||||
<button class="btn btn-chill-beige" data-bs-toggle="collapse" href="#withoutHouseholdList">
|
||||
<i class="fa fa-fw fa-caret-down"></i><span class="">{{ 'Add to household now'|trans }}</span>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
{% if person.isSharingHousehold %}
|
||||
<li>
|
||||
<a href="{{ chill_path_add_return_path('chill_person_household_summary', { 'household_id': person.getCurrentHousehold.id }) }}"
|
||||
class="btn btn-sm btn-chill-pink" title="{{ 'Show household'|trans ~ ' n° ' ~ person.getCurrentHousehold.id }}">
|
||||
class="btn btn-sm btn-chill-beige" title="{{ 'Show household'|trans ~ ' n° ' ~ person.getCurrentHousehold.id }}">
|
||||
<i class="fa fa-home"></i>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
<div class="item-bloc">
|
||||
<div class="item-row">
|
||||
|
||||
<div class="wrapheader">
|
||||
<div class="wrap-header">
|
||||
<div class="wh-row">
|
||||
<div class="wh-col">
|
||||
<span class="h3">
|
||||
@ -22,7 +22,7 @@
|
||||
{% if accompanying_period.step == 'DRAFT' %}
|
||||
<span class="badge bg-secondary">{{- 'Draft'|trans|upper -}}</span>
|
||||
{% else %}
|
||||
<span class="badge bg-success">{{- 'Confirmed'|trans|upper -}}</span>
|
||||
<span class="badge bg-primary">{{- 'Confirmed'|trans|upper -}}</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
@ -46,7 +46,8 @@
|
||||
<div class="wh-col">
|
||||
{% if chill_accompanying_periods.fields.user == 'visible' %}
|
||||
{% if accompanying_period.user %}
|
||||
{{ accompanying_period.user.username }}
|
||||
<abbr class="referrer" title="{{ 'Referrer'|trans }}">ref:</abbr>
|
||||
{{ accompanying_period.user.username|chill_entity_render_box }}
|
||||
{% else %}
|
||||
<span class="chill-no-data-statement">{{ 'No accompanying user'|trans }}</span>
|
||||
{% endif %}
|
||||
@ -58,7 +59,7 @@
|
||||
</div>
|
||||
<div class="item-row separator">
|
||||
|
||||
<div class="wraplist">
|
||||
<div class="wrap-list">
|
||||
{% if accompanying_period.participations.count > 0 %}
|
||||
<div class="wl-row">
|
||||
<div class="wl-col title"><h3>{{ 'Participants'|trans }}</h3></div>
|
||||
|
||||
@ -100,7 +100,7 @@
|
||||
<div class="item-col">
|
||||
{{ _self.label(person, options) }}
|
||||
</div>
|
||||
<div class="item-col separator">
|
||||
<div class="item-col">
|
||||
<ul class="list-content fa-ul">
|
||||
{% set multiline = (options['address_multiline']) ? true : false %}
|
||||
{{ person.getLastAddress|chill_entity_render_box({
|
||||
|
||||
@ -1,12 +1,12 @@
|
||||
{% set reversed_parents = parents|reverse %}
|
||||
<span class="chill-entity chill-entity__social-issue">
|
||||
<span class="badge bg-primary">
|
||||
<span class="chill-entity entity-social-issue">
|
||||
<span class="badge bg-chill-pink">
|
||||
{%- for p in reversed_parents %}
|
||||
<span class="chill-entity__social-issue__parent--{{ loop.revindex0 }}">
|
||||
<span class="parent-{{ loop.revindex0 }}">
|
||||
{{ p.title|localize_translatable_string }}{{ options['default.separator'] }}
|
||||
</span>
|
||||
{%- endfor -%}
|
||||
<span class="chill-entity__social-issue__child">
|
||||
<span class="child">
|
||||
{{ socialIssue.title|localize_translatable_string }}
|
||||
</span>
|
||||
</span>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
{% macro button_person(person) %}
|
||||
<li>
|
||||
<a href="{{ path('chill_person_accompanying_period_list', { 'person_id' : person.id }) }}"
|
||||
class="btn btn-sm btn-primary" title="{{ 'See accompanying periods'|trans }}"><i class="fa fa-random"></i></a>
|
||||
class="btn btn-sm btn-outline-primary" title="{{ 'See accompanying periods'|trans }}"><i class="fa fa-random"></i></a>
|
||||
</li>
|
||||
{% endmacro %}
|
||||
|
||||
@ -59,44 +59,50 @@
|
||||
}) }}
|
||||
|
||||
{#- 'apps' is for AccompanyingPeriodParticipationS #}
|
||||
{#- filter using acl -#}
|
||||
{%- set apps = [] %}
|
||||
{%- for app in person.openedParticipations %}
|
||||
{%- if is_granted('CHILL_PERSON_ACCOMPANYING_PERIOD_SEE', app.accompanyingPeriod) %}
|
||||
{%- set apps = apps|merge([app]) %}
|
||||
{%- endif %}
|
||||
{%- endfor %}
|
||||
|
||||
{% if apps|length > 0 %}
|
||||
<div class="item-row separator periods">
|
||||
{% for app in apps %}
|
||||
|
||||
<div class="header">
|
||||
<a href="{{ path('chill_person_accompanying_course_index', { 'accompanying_period_id': app.accompanyingPeriod.id }) }}"
|
||||
class="btn btn-chill-green" title="{{ 'See accompanying period'|trans }}">
|
||||
<i class="fa 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>
|
||||
<div class="item-row">
|
||||
<div class="wrap-list periods-list">
|
||||
{% for app in apps %}
|
||||
<div class="wl-row separator">
|
||||
<div class="wl-col title">
|
||||
<div class="date">
|
||||
{{ 'Since %date%'|trans({'%date%': app.startDate|format_date('medium') }) }}
|
||||
</div>
|
||||
{% if app.accompanyingPeriod.user is not null %}
|
||||
<div class="user">
|
||||
<abbr class="referrer" title="{{ 'Referrer'|trans }}">ref:</abbr>
|
||||
{{ app.accompanyingPeriod.user|chill_entity_render_box }}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="wl-col list">
|
||||
{% for issue in app.accompanyingPeriod.socialIssues %}
|
||||
{{ issue|chill_entity_render_box }}
|
||||
{% endfor %}
|
||||
{# ^^ display all socialIssues
|
||||
|slice(0,2)
|
||||
{% if app.accompanyingPeriod.socialIssues|length > 2 %}
|
||||
<span class="more">{{ 'and %number% other'|transchoice(app.accompanyingPeriod.socialIssues|length-2) }}</span>
|
||||
{% endif %}
|
||||
#}
|
||||
<ul class="record_actions">
|
||||
<li>
|
||||
<a href="{{ path('chill_person_accompanying_course_index', { 'accompanying_period_id': app.accompanyingPeriod.id }) }}"
|
||||
class="btn btn-sm btn-outline-primary" title="{{ 'See accompanying period'|trans }}">
|
||||
<i class="fa fa-random fa-fw"></i>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
{% if app.accompanyingPeriod.socialIssues|length > 2 %}
|
||||
<span class="more">{{ 'and %number% other'|transchoice(app.accompanyingPeriod.socialIssues|length-2) }}</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
|
||||
@ -191,7 +191,7 @@ Social actions: Actions d'accompagnement
|
||||
Social issues: Problématiques sociales
|
||||
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 periods: Voir toutes les périodes d'accompagnement
|
||||
See accompanying period: Voir la période
|
||||
Edit accompanying period: Modifier la période
|
||||
See this period: Voir cette période
|
||||
|
||||
@ -31,7 +31,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="item-col separator">
|
||||
<div class="item-col">
|
||||
<ul class="list-content fa-ul">
|
||||
<li v-if="thirdparty.address">
|
||||
<i class="fa fa-li fa-map-marker"></i>
|
||||
|
||||
@ -66,7 +66,7 @@
|
||||
<div class="item-col">
|
||||
{{ _self.label(thirdparty, options) }}
|
||||
</div>
|
||||
<div class="item-col separator">
|
||||
<div class="item-col">
|
||||
<ul class="list-content fa-ul">
|
||||
{{ thirdparty.getAddress|chill_entity_render_box({
|
||||
'render': 'list',
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user