mirror of
https://gitlab.com/Chill-Projet/chill-bundles.git
synced 2025-06-07 18:44:08 +00:00
render_box with 'bloc'
use bootstrap responsive breakpoints for columns, mixed with flex-bloc cascade for growing and vertical align blocs.
This commit is contained in:
parent
50e9a06e49
commit
81752befcf
@ -60,7 +60,7 @@
|
||||
<li>
|
||||
<a href="{{ _self.href(bloc.path, bloc.key, item.id) }}">
|
||||
<span class="badge bg-primary">
|
||||
{{ item|chill_entity_render_box({'only_denomination': true}) }}
|
||||
{{ item|chill_entity_render_box({'render': 'raw'}) }}
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
@ -1,13 +1,9 @@
|
||||
/*
|
||||
* NOTE 2021.04
|
||||
* scss/chillmain.scss is the main sass file for the new chill.2
|
||||
* scratch will be replaced by bootstrap, please avoid to edit in modules/scratch/_custom.scss
|
||||
*
|
||||
* when possible, try to use bootstrap html class
|
||||
*/
|
||||
|
||||
// Need to access bootstrap variables
|
||||
@import '~ChillMainAssets/module/bootstrap/bootstrap';
|
||||
|
||||
// Chill mixins
|
||||
@import './scss/mixins';
|
||||
|
||||
/*
|
||||
* Specific rules
|
||||
*/
|
||||
@ -68,23 +64,13 @@ div.flex-table {
|
||||
color: var(--bs-chill-blue);
|
||||
}
|
||||
div.item-bloc {
|
||||
// We use box-shadow instead of border
|
||||
// to avoid to manage border double-width
|
||||
// when blocs are resized for small screen !
|
||||
// Then we can simulate border-collapse: collapse (table)
|
||||
box-shadow:
|
||||
1px 0 0 0 var(--bs-dark),
|
||||
0 1px 0 0 var(--bs-dark),
|
||||
1px 1px 0 0 var(--bs-dark), /* fix the corner */
|
||||
1px 0 0 0 var(--bs-dark) inset,
|
||||
0 1px 0 0 var(--bs-dark) inset;
|
||||
@include border-collapse;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* Bloc appearance
|
||||
*/
|
||||
/*
|
||||
div.flex-bloc {
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
@ -94,7 +80,7 @@ div.flex-bloc {
|
||||
align-content: stretch;
|
||||
|
||||
div.item-bloc {
|
||||
flex-grow: 0; flex-shrink: 1; flex-basis: 33%;
|
||||
flex-grow: 0; flex-shrink: 1; flex-basis: auto;
|
||||
margin: 0;
|
||||
padding: 1em;
|
||||
display: flex;
|
||||
@ -127,15 +113,8 @@ div.flex-bloc {
|
||||
}
|
||||
}
|
||||
}
|
||||
@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;
|
||||
}
|
||||
}
|
||||
*/
|
||||
|
||||
|
||||
|
||||
/*
|
||||
|
||||
@ -0,0 +1,14 @@
|
||||
|
||||
// We use box-shadow instead of border
|
||||
// to avoid to manage border double-width
|
||||
// Then we can simulate border-collapse: collapse (table)
|
||||
|
||||
@mixin border-collapse {
|
||||
box-shadow:
|
||||
1px 0 0 0 var(--bs-dark),
|
||||
0 1px 0 0 var(--bs-dark),
|
||||
1px 1px 0 0 var(--bs-dark), /* fix the corner */
|
||||
1px 0 0 0 var(--bs-dark) inset,
|
||||
0 1px 0 0 var(--bs-dark) inset;
|
||||
}
|
||||
|
||||
@ -1,3 +1,6 @@
|
||||
@import '~ChillMainAssets/module/bootstrap/bootstrap';
|
||||
@import '~ChillMainAssets/chill/scss/mixins';
|
||||
|
||||
section.chill-entity {
|
||||
// have no effect for render label, row, bloc
|
||||
display: inline;
|
||||
@ -22,4 +25,11 @@ section.chill-entity {
|
||||
div.entity-row {}
|
||||
div.entity-bloc {}
|
||||
}
|
||||
|
||||
// don't break flex cascade with section tag
|
||||
div.flex-bloc & {
|
||||
display: flex;
|
||||
flex-grow: 1; flex-shrink: 1; flex-basis: auto;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -219,40 +219,30 @@
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<h2>{{ 'Resources'|trans }}</h2>
|
||||
|
||||
{% if accompanyingCourse.resources|length == 0 %}
|
||||
<p class="chill-no-data-statement">{{ 'Any resource for this accompanying course'|trans }}</p>
|
||||
{% else %}
|
||||
<div class="flex-bloc">
|
||||
{% for r in accompanyingCourse.resources %}
|
||||
|
||||
{# TEST
|
||||
{{ r.person|chill_entity_render_box({
|
||||
'render': 'label', 'addLink': true, 'addInfo': true, 'hLevel': '1'
|
||||
}) }}
|
||||
|
||||
<span class="badge bg-primary">
|
||||
{{ r.person|chill_entity_render_box({'render': 'raw'}) }}
|
||||
</span>
|
||||
#}
|
||||
|
||||
<div class="item-bloc">
|
||||
{% if r.person %}
|
||||
{{ r.person|chill_entity_render_box({
|
||||
'render': 'bloc', 'addLink': true, 'addEntity': true, 'addInfo': true
|
||||
}) }}
|
||||
{% endif %}
|
||||
{% if r.thirdParty %}
|
||||
{{ r.thirdParty|chill_entity_render_box({
|
||||
'render': 'bloc', 'addLink': true, 'addEntity': true, 'addInfo': true
|
||||
}) }}
|
||||
{% endif %}
|
||||
<div class="resources my-5">
|
||||
<h2 class="mb-3">{{ 'Resources'|trans }}</h2>
|
||||
{% if accompanyingCourse.resources|length == 0 %}
|
||||
<p class="chill-no-data-statement">{{ 'Any resource for this accompanying course'|trans }}</p>
|
||||
{% else %}
|
||||
<div class="flex-bloc row row-cols-1 row-cols-sm-2 row-cols-xl-3 row-cols-xxl-4 g-0">
|
||||
{% for r in accompanyingCourse.resources %}
|
||||
<div class="item-bloc col">
|
||||
{% if r.person %}
|
||||
{{ r.person|chill_entity_render_box({
|
||||
'render': 'bloc', 'addLink': true, 'addEntity': true, 'addInfo': true
|
||||
}) }}
|
||||
{% endif %}
|
||||
{% if r.thirdParty %}
|
||||
{{ r.thirdParty|chill_entity_render_box({
|
||||
'render': 'bloc', 'addLink': true, 'addEntity': true, 'addInfo': true
|
||||
}) }}
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<h2>{{ 'Social actions'|trans }}</h2>
|
||||
|
||||
|
||||
@ -8,6 +8,7 @@
|
||||
* addInfo bool
|
||||
* hLevel integer
|
||||
#}
|
||||
|
||||
{% macro raw(person, options) %}
|
||||
<span class="firstname">{{ person.firstName }}</span>
|
||||
<span class="lastname">{{ person.lastName }}</span>
|
||||
@ -70,42 +71,40 @@
|
||||
{%- endif -%}
|
||||
|
||||
{%- if render == 'bloc' -%}
|
||||
<div class="entity-bloc">
|
||||
<div class="item-row">
|
||||
<div class="item-col">
|
||||
{{ _self.label(person, options) }}
|
||||
</div>
|
||||
<div class="item-col">
|
||||
<ul class="list-content fa-ul">
|
||||
<li>
|
||||
{% if person.mobilenumber %}
|
||||
<i class="fa fa-li fa-mobile"></i><a href="{{ 'tel:' ~ person.mobilenumber }}">{{ person.mobilenumber }}</a>
|
||||
<div class="item-row entity-bloc">
|
||||
<div class="item-col">
|
||||
{{ _self.label(person, options) }}
|
||||
</div>
|
||||
<div class="item-col">
|
||||
<ul class="list-content fa-ul">
|
||||
<li>
|
||||
{% if person.mobilenumber %}
|
||||
<i class="fa fa-li fa-mobile"></i><a href="{{ 'tel:' ~ person.mobilenumber }}">{{ person.mobilenumber }}</a>
|
||||
{% else %}
|
||||
<i class="fa fa-li fa-phone"></i>
|
||||
{% if person.phonenumber %}
|
||||
<a href="{{ 'tel:' ~ person.phonenumber }}">{{ person.phonenumber }}</a>
|
||||
{% else %}
|
||||
<i class="fa fa-li fa-phone"></i>
|
||||
{% if person.phonenumber %}
|
||||
<a href="{{ 'tel:' ~ person.phonenumber }}">{{ person.phonenumber }}</a>
|
||||
{% else %}
|
||||
<span class="chill-no-data-statement">{{ 'No data given'|trans }}</span>
|
||||
{% endif %}
|
||||
<span class="chill-no-data-statement">{{ 'No data given'|trans }}</span>
|
||||
{% endif %}
|
||||
</li>
|
||||
<li>
|
||||
<i class="fa fa-li fa-map-marker"></i>
|
||||
{%- if person.lastAddress is not empty -%}
|
||||
{{ 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>
|
||||
{%- if is_granted('CHILL_PERSON_SEE', person) -%}
|
||||
<ul class="record_actions">
|
||||
<li><a class="btn btn-show" target="_blank" title="{{ 'Show'|trans }}"
|
||||
href="{{ path('chill_person_view', { person_id: person.id }) }}"></a>
|
||||
</li>
|
||||
</ul>
|
||||
{%- endif -%}
|
||||
</div>
|
||||
{% endif %}
|
||||
</li>
|
||||
<li>
|
||||
<i class="fa fa-li fa-map-marker"></i>
|
||||
{%- if person.lastAddress is not empty -%}
|
||||
{{ 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>
|
||||
{%- if is_granted('CHILL_PERSON_SEE', person) -%}
|
||||
<ul class="record_actions">
|
||||
<li><a class="btn btn-show" target="_blank" title="{{ 'Show'|trans }}"
|
||||
href="{{ path('chill_person_view', { person_id: person.id }) }}"></a>
|
||||
</li>
|
||||
</ul>
|
||||
{%- endif -%}
|
||||
</div>
|
||||
</div>
|
||||
{%- endif -%}
|
||||
|
||||
@ -1,3 +1,5 @@
|
||||
@import '~ChillMainAssets/chill/scss/mixins';
|
||||
|
||||
section.chill-entity {
|
||||
&.entity-thirdparty {
|
||||
div.entity-label {
|
||||
|
||||
@ -9,6 +9,7 @@
|
||||
* addInfo bool
|
||||
* hLevel integer
|
||||
#}
|
||||
|
||||
{% macro raw(thirdparty, options) %}
|
||||
<span class="name">{{ thirdparty.name }}</span>
|
||||
{% endmacro raw %}
|
||||
@ -100,39 +101,37 @@
|
||||
{%- endif -%}
|
||||
|
||||
{%- if render == 'bloc' -%}
|
||||
<div class="entity-bloc">
|
||||
<div class="item-row">
|
||||
<div class="item-col">
|
||||
{{ _self.label(thirdparty, options) }}
|
||||
</div>
|
||||
<div class="item-col">
|
||||
<ul class="list-content fa-ul">
|
||||
<li><i class="fa fa-li fa-envelope-o"></i>
|
||||
<a href="{{ 'mailto:' ~ thirdparty.email }}">
|
||||
{{ thirdparty.email|chill_print_or_message("thirdparty.No_email") }}
|
||||
</a>
|
||||
</li>
|
||||
<li><i class="fa fa-li fa-phone"></i>
|
||||
{% if thirdparty.telephone %}
|
||||
<a href="{{ 'tel:' ~ thirdparty.telephone }}">{{ thirdparty.telephone|chill_format_phonenumber }}</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 thirdparty.address is not empty -%}
|
||||
{{ 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: thirdparty.id }) }}" class="btn btn-show" target="_blank" title="Voir"></a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="item-row entity-bloc">
|
||||
<div class="item-col">
|
||||
{{ _self.label(thirdparty, options) }}
|
||||
</div>
|
||||
<div class="item-col">
|
||||
<ul class="list-content fa-ul">
|
||||
<li><i class="fa fa-li fa-envelope-o"></i>
|
||||
<a href="{{ 'mailto:' ~ thirdparty.email }}">
|
||||
{{ thirdparty.email|chill_print_or_message("thirdparty.No_email") }}
|
||||
</a>
|
||||
</li>
|
||||
<li><i class="fa fa-li fa-phone"></i>
|
||||
{% if thirdparty.telephone %}
|
||||
<a href="{{ 'tel:' ~ thirdparty.telephone }}">{{ thirdparty.telephone|chill_format_phonenumber }}</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 thirdparty.address is not empty -%}
|
||||
{{ 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: thirdparty.id }) }}" class="btn btn-show" target="_blank" title="Voir"></a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
{%- endif -%}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user