Chill-project/chill-bundles
6
0
Fork 0
mirror of https://gitlab.com/Chill-Projet/chill-bundles.git synced 2025-06-12 21:34:25 +00:00
Code Issues Actions Projects Releases Wiki Activity

render_box with 'bloc'

Browse Source 
use bootstrap responsive breakpoints for columns,
mixed with flex-bloc cascade for growing and vertical align blocs.
This commit is contained in:
Mathieu Jaumotte 2021-07-28 14:15:27 +02:00
parent 50e9a06e49
commit 81752befcf
8 changed files with 121 additions and 128 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/Bundle/ChillActivityBundle/Resources/views/Activity/concernedGroups.html.twig
View File

@ -60,7 +60,7 @@
<li> <li>
<a href="{{ _self.href(bloc.path, bloc.key, item.id) }}"> <a href="{{ _self.href(bloc.path, bloc.key, item.id) }}">
<span class="badge bg-primary"> <span class="badge bg-primary">
{{ item|chill_entity_render_box({'only_denomination': true}) }} {{ item|chill_entity_render_box({'render': 'raw'}) }}
</span> </span>
</a> </a>
</li> </li>

35
src/Bundle/ChillMainBundle/Resources/public/chill/chillmain.scss
View File

@ -1,13 +1,9 @@
/* // Need to access bootstrap variables
* 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
*/
@import '~ChillMainAssets/module/bootstrap/bootstrap'; @import '~ChillMainAssets/module/bootstrap/bootstrap';
// Chill mixins
@import './scss/mixins';
/* /*
* Specific rules * Specific rules
*/ */
@ -68,23 +64,13 @@ div.flex-table {
color: var(--bs-chill-blue); color: var(--bs-chill-blue);
} }
div.item-bloc { div.item-bloc {
// We use box-shadow instead of border @include border-collapse;
// 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;
} }
} }
/* /*
* Bloc appearance * Bloc appearance
*/ */
/*
div.flex-bloc { div.flex-bloc {
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
@ -94,7 +80,7 @@ div.flex-bloc {
align-content: stretch; align-content: stretch;
div.item-bloc { div.item-bloc {
flex-grow: 0; flex-shrink: 1; flex-basis: 33%; flex-grow: 0; flex-shrink: 1; flex-basis: auto;
margin: 0; margin: 0;
padding: 1em; padding: 1em;
display: flex; 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;
}
} }
*/
/* /*

14
src/Bundle/ChillMainBundle/Resources/public/chill/scss/mixins.scss Normal file
View File

@ -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;
}

10
src/Bundle/ChillPersonBundle/Resources/public/chill/scss/render_box.scss
View File

@ -1,3 +1,6 @@
@import '~ChillMainAssets/module/bootstrap/bootstrap';
@import '~ChillMainAssets/chill/scss/mixins';
section.chill-entity { section.chill-entity {
// have no effect for render label, row, bloc // have no effect for render label, row, bloc
display: inline; display: inline;
@ -22,4 +25,11 @@ section.chill-entity {
div.entity-row {} div.entity-row {}
div.entity-bloc {} 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;
}
} }

54
src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourse/index.html.twig
View File

@ -219,40 +219,30 @@
</div> </div>
{% endif %} {% endif %}
<h2>{{ 'Resources'|trans }}</h2>
{% if accompanyingCourse.resources|length == 0 %} <div class="resources my-5">
<p class="chill-no-data-statement">{{ 'Any resource for this accompanying course'|trans }}</p> <h2 class="mb-3">{{ 'Resources'|trans }}</h2>
{% else %} {% if accompanyingCourse.resources|length == 0 %}
<div class="flex-bloc"> <p class="chill-no-data-statement">{{ 'Any resource for this accompanying course'|trans }}</p>
{% for r in accompanyingCourse.resources %} {% else %}
<div class="flex-bloc row row-cols-1 row-cols-sm-2 row-cols-xl-3 row-cols-xxl-4 g-0">
{# TEST {% for r in accompanyingCourse.resources %}
{{ r.person|chill_entity_render_box({ <div class="item-bloc col">
'render': 'label', 'addLink': true, 'addInfo': true, 'hLevel': '1' {% if r.person %}
}) }} {{ r.person|chill_entity_render_box({
'render': 'bloc', 'addLink': true, 'addEntity': true, 'addInfo': true
<span class="badge bg-primary"> }) }}
{{ r.person|chill_entity_render_box({'render': 'raw'}) }} {% endif %}
</span> {% if r.thirdParty %}
#} {{ r.thirdParty|chill_entity_render_box({
'render': 'bloc', 'addLink': true, 'addEntity': true, 'addInfo': true
<div class="item-bloc"> }) }}
{% if r.person %} {% endif %}
{{ r.person|chill_entity_render_box({ </div>
'render': 'bloc', 'addLink': true, 'addEntity': true, 'addInfo': true {% endfor %}
}) }}
{% endif %}
{% if r.thirdParty %}
{{ r.thirdParty|chill_entity_render_box({
'render': 'bloc', 'addLink': true, 'addEntity': true, 'addInfo': true
}) }}
{% endif %}
</div> </div>
{% endif %}
{% endfor %} </div>
</div>
{% endif %}
<h2>{{ 'Social actions'|trans }}</h2> <h2>{{ 'Social actions'|trans }}</h2>

67
src/Bundle/ChillPersonBundle/Resources/views/Entity/person.html.twig
View File

@ -8,6 +8,7 @@
* addInfo bool * addInfo bool
* hLevel integer * hLevel integer
#} #}
{% macro raw(person, options) %} {% macro raw(person, options) %}
<span class="firstname">{{ person.firstName }}</span> <span class="firstname">{{ person.firstName }}</span>
<span class="lastname">{{ person.lastName }}</span> <span class="lastname">{{ person.lastName }}</span>
@ -70,42 +71,40 @@
{%- endif -%} {%- endif -%}
{%- if render == 'bloc' -%} {%- if render == 'bloc' -%}
<div class="entity-bloc"> <div class="item-row entity-bloc">
<div class="item-row"> <div class="item-col">
<div class="item-col"> {{ _self.label(person, options) }}
{{ _self.label(person, options) }} </div>
</div> <div class="item-col">
<div class="item-col"> <ul class="list-content fa-ul">
<ul class="list-content fa-ul"> <li>
<li> {% if person.mobilenumber %}
{% if person.mobilenumber %} <i class="fa fa-li fa-mobile"></i><a href="{{ 'tel:' ~ person.mobilenumber }}">{{ person.mobilenumber }}</a>
<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 %} {% else %}
<i class="fa fa-li fa-phone"></i> <span class="chill-no-data-statement">{{ 'No data given'|trans }}</span>
{% if person.phonenumber %}
<a href="{{ 'tel:' ~ person.phonenumber }}">{{ person.phonenumber }}</a>
{% else %}
<span class="chill-no-data-statement">{{ 'No data given'|trans }}</span>
{% endif %}
{% endif %} {% endif %}
</li> {% endif %}
<li> </li>
<i class="fa fa-li fa-map-marker"></i> <li>
{%- if person.lastAddress is not empty -%} <i class="fa fa-li fa-map-marker"></i>
{{ person.getLastAddress|chill_entity_render_box({'with_valid_from': false}) }} {%- if person.lastAddress is not empty -%}
{%- else -%} {{ person.getLastAddress|chill_entity_render_box({'with_valid_from': false}) }}
<span class="chill-no-data-statement">{{ 'No address given'|trans }}</span> {%- else -%}
{%- endif -%} <span class="chill-no-data-statement">{{ 'No address given'|trans }}</span>
</li> {%- endif -%}
</ul> </li>
{%- if is_granted('CHILL_PERSON_SEE', person) -%} </ul>
<ul class="record_actions"> {%- if is_granted('CHILL_PERSON_SEE', person) -%}
<li><a class="btn btn-show" target="_blank" title="{{ 'Show'|trans }}" <ul class="record_actions">
href="{{ path('chill_person_view', { person_id: person.id }) }}"></a> <li><a class="btn btn-show" target="_blank" title="{{ 'Show'|trans }}"
</li> href="{{ path('chill_person_view', { person_id: person.id }) }}"></a>
</ul> </li>
{%- endif -%} </ul>
</div> {%- endif -%}
</div> </div>
</div> </div>
{%- endif -%} {%- endif -%}

2
src/Bundle/ChillThirdPartyBundle/Resources/public/chill/thirdparty.scss
View File

@ -1,3 +1,5 @@
@import '~ChillMainAssets/chill/scss/mixins';
section.chill-entity { section.chill-entity {
&.entity-thirdparty { &.entity-thirdparty {
div.entity-label { div.entity-label {

65
src/Bundle/ChillThirdPartyBundle/Resources/views/Entity/thirdparty.html.twig
View File

@ -9,6 +9,7 @@
* addInfo bool * addInfo bool
* hLevel integer * hLevel integer
#} #}
{% macro raw(thirdparty, options) %} {% macro raw(thirdparty, options) %}
<span class="name">{{ thirdparty.name }}</span> <span class="name">{{ thirdparty.name }}</span>
{% endmacro raw %} {% endmacro raw %}
@ -100,39 +101,37 @@
{%- endif -%} {%- endif -%}
{%- if render == 'bloc' -%} {%- if render == 'bloc' -%}
<div class="entity-bloc"> <div class="item-row entity-bloc">
<div class="item-row"> <div class="item-col">
<div class="item-col"> {{ _self.label(thirdparty, options) }}
{{ _self.label(thirdparty, options) }} </div>
</div> <div class="item-col">
<div class="item-col"> <ul class="list-content fa-ul">
<ul class="list-content fa-ul"> <li><i class="fa fa-li fa-envelope-o"></i>
<li><i class="fa fa-li fa-envelope-o"></i> <a href="{{ 'mailto:' ~ thirdparty.email }}">
<a href="{{ 'mailto:' ~ thirdparty.email }}"> {{ thirdparty.email|chill_print_or_message("thirdparty.No_email") }}
{{ thirdparty.email|chill_print_or_message("thirdparty.No_email") }} </a>
</a> </li>
</li> <li><i class="fa fa-li fa-phone"></i>
<li><i class="fa fa-li fa-phone"></i> {% if thirdparty.telephone %}
{% if thirdparty.telephone %} <a href="{{ 'tel:' ~ thirdparty.telephone }}">{{ thirdparty.telephone|chill_format_phonenumber }}</a>
<a href="{{ 'tel:' ~ thirdparty.telephone }}">{{ thirdparty.telephone|chill_format_phonenumber }}</a> {% else %}
{% else %} <span class="chill-no-data-statement">{{ 'thirdparty.No_phonenumber'|trans }}</span>
<span class="chill-no-data-statement">{{ 'thirdparty.No_phonenumber'|trans }}</span> {% endif %}
{% endif %} </li>
</li> <li><i class="fa fa-li fa-map-marker"></i>
<li><i class="fa fa-li fa-map-marker"></i> {%- if thirdparty.address is not empty -%}
{%- if thirdparty.address is not empty -%} {{ thirdparty.getAddress|chill_entity_render_box({'with_valid_from': false}) }}
{{ thirdparty.getAddress|chill_entity_render_box({'with_valid_from': false}) }} {%- else -%}
{%- else -%} <span class="chill-no-data-statement">{{ 'No address given'|trans }}</span>
<span class="chill-no-data-statement">{{ 'No address given'|trans }}</span> {%- endif -%}
{%- endif -%} </li>
</li> </ul>
</ul> <ul class="record_actions">
<ul class="record_actions"> <li>
<li> <a href="{{ path('chill_3party_3party_show', { thirdparty_id: thirdparty.id }) }}" class="btn btn-show" target="_blank" title="Voir"></a>
<a href="{{ path('chill_3party_3party_show', { thirdparty_id: thirdparty.id }) }}" class="btn btn-show" target="_blank" title="Voir"></a> </li>
</li> </ul>
</ul>
</div>
</div> </div>
</div> </div>
{%- endif -%} {%- endif -%}