From 81752befcf0b6d13490791070545bf1a6e6b23a9 Mon Sep 17 00:00:00 2001 From: Mathieu Jaumotte Date: Wed, 28 Jul 2021 14:15:27 +0200 Subject: [PATCH] render_box with 'bloc' use bootstrap responsive breakpoints for columns, mixed with flex-bloc cascade for growing and vertical align blocs. --- .../views/Activity/concernedGroups.html.twig | 2 +- .../Resources/public/chill/chillmain.scss | 35 ++-------- .../Resources/public/chill/scss/mixins.scss | 14 ++++ .../public/chill/scss/render_box.scss | 10 +++ .../views/AccompanyingCourse/index.html.twig | 54 ++++++--------- .../Resources/views/Entity/person.html.twig | 67 +++++++++---------- .../Resources/public/chill/thirdparty.scss | 2 + .../views/Entity/thirdparty.html.twig | 65 +++++++++--------- 8 files changed, 121 insertions(+), 128 deletions(-) create mode 100644 src/Bundle/ChillMainBundle/Resources/public/chill/scss/mixins.scss diff --git a/src/Bundle/ChillActivityBundle/Resources/views/Activity/concernedGroups.html.twig b/src/Bundle/ChillActivityBundle/Resources/views/Activity/concernedGroups.html.twig index 4985ea1f7..92b1b3ff4 100644 --- a/src/Bundle/ChillActivityBundle/Resources/views/Activity/concernedGroups.html.twig +++ b/src/Bundle/ChillActivityBundle/Resources/views/Activity/concernedGroups.html.twig @@ -60,7 +60,7 @@
  • - {{ item|chill_entity_render_box({'only_denomination': true}) }} + {{ item|chill_entity_render_box({'render': 'raw'}) }}
    • diff --git a/src/Bundle/ChillMainBundle/Resources/public/chill/chillmain.scss b/src/Bundle/ChillMainBundle/Resources/public/chill/chillmain.scss index 3fcdb9da1..a42d1dae0 100644 --- a/src/Bundle/ChillMainBundle/Resources/public/chill/chillmain.scss +++ b/src/Bundle/ChillMainBundle/Resources/public/chill/chillmain.scss @@ -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; - } } - */ + /* diff --git a/src/Bundle/ChillMainBundle/Resources/public/chill/scss/mixins.scss b/src/Bundle/ChillMainBundle/Resources/public/chill/scss/mixins.scss new file mode 100644 index 000000000..22e1d310e --- /dev/null +++ b/src/Bundle/ChillMainBundle/Resources/public/chill/scss/mixins.scss @@ -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; +} + diff --git a/src/Bundle/ChillPersonBundle/Resources/public/chill/scss/render_box.scss b/src/Bundle/ChillPersonBundle/Resources/public/chill/scss/render_box.scss index 078f96253..2ea115517 100644 --- a/src/Bundle/ChillPersonBundle/Resources/public/chill/scss/render_box.scss +++ b/src/Bundle/ChillPersonBundle/Resources/public/chill/scss/render_box.scss @@ -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; + } } + diff --git a/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourse/index.html.twig b/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourse/index.html.twig index ce1dbe56d..ccce0df55 100644 --- a/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourse/index.html.twig +++ b/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourse/index.html.twig @@ -219,40 +219,30 @@ {% endif %} -

    {{ 'Resources'|trans }}

    - {% if accompanyingCourse.resources|length == 0 %} -

    {{ 'Any resource for this accompanying course'|trans }}

    - {% else %} -
    - {% for r in accompanyingCourse.resources %} - - {# TEST - {{ r.person|chill_entity_render_box({ - 'render': 'label', 'addLink': true, 'addInfo': true, 'hLevel': '1' - }) }} - - - {{ r.person|chill_entity_render_box({'render': 'raw'}) }} - - #} - -
    - {% 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 %} +
    +

    {{ 'Resources'|trans }}

    + {% if accompanyingCourse.resources|length == 0 %} +

    {{ 'Any resource for this accompanying course'|trans }}

    + {% else %} +
    + {% for r in accompanyingCourse.resources %} +
    + {% 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 %} +
    + {% endfor %}
    - - {% endfor %} -
    - {% endif %} + {% endif %} +

    {{ 'Social actions'|trans }}

    diff --git a/src/Bundle/ChillPersonBundle/Resources/views/Entity/person.html.twig b/src/Bundle/ChillPersonBundle/Resources/views/Entity/person.html.twig index 3368d91af..9cf37c8ac 100644 --- a/src/Bundle/ChillPersonBundle/Resources/views/Entity/person.html.twig +++ b/src/Bundle/ChillPersonBundle/Resources/views/Entity/person.html.twig @@ -8,6 +8,7 @@ * addInfo bool * hLevel integer #} + {% macro raw(person, options) %} {{ person.firstName }} {{ person.lastName }} @@ -70,42 +71,40 @@ {%- endif -%} {%- if render == 'bloc' -%} -
    -
    -
    - {{ _self.label(person, options) }} -
    -
    -
      -
    • - {% if person.mobilenumber %} - {{ person.mobilenumber }} +
      +
      + {{ _self.label(person, options) }} +
      +
      +
        +
      • + {% if person.mobilenumber %} + {{ person.mobilenumber }} + {% else %} + + {% if person.phonenumber %} + {{ person.phonenumber }} {% else %} - - {% if person.phonenumber %} - {{ person.phonenumber }} - {% else %} - {{ 'No data given'|trans }} - {% endif %} + {{ 'No data given'|trans }} {% endif %} -
        • -
      • - - {%- if person.lastAddress is not empty -%} - {{ person.getLastAddress|chill_entity_render_box({'with_valid_from': false}) }} - {%- else -%} - {{ 'No address given'|trans }} - {%- endif -%} -
        • -
      - {%- if is_granted('CHILL_PERSON_SEE', person) -%} -
        -
      • -
        • -
      - {%- endif -%} -
      + {% endif %} +
      • +
    • + + {%- if person.lastAddress is not empty -%} + {{ person.getLastAddress|chill_entity_render_box({'with_valid_from': false}) }} + {%- else -%} + {{ 'No address given'|trans }} + {%- endif -%} +
      • +
    + {%- if is_granted('CHILL_PERSON_SEE', person) -%} +
      +
    • +
      • +
    + {%- endif -%}
    {%- endif -%} diff --git a/src/Bundle/ChillThirdPartyBundle/Resources/public/chill/thirdparty.scss b/src/Bundle/ChillThirdPartyBundle/Resources/public/chill/thirdparty.scss index 454a5b106..67cb9a995 100644 --- a/src/Bundle/ChillThirdPartyBundle/Resources/public/chill/thirdparty.scss +++ b/src/Bundle/ChillThirdPartyBundle/Resources/public/chill/thirdparty.scss @@ -1,3 +1,5 @@ +@import '~ChillMainAssets/chill/scss/mixins'; + section.chill-entity { &.entity-thirdparty { div.entity-label { diff --git a/src/Bundle/ChillThirdPartyBundle/Resources/views/Entity/thirdparty.html.twig b/src/Bundle/ChillThirdPartyBundle/Resources/views/Entity/thirdparty.html.twig index cdcf53a0b..361ddc96b 100644 --- a/src/Bundle/ChillThirdPartyBundle/Resources/views/Entity/thirdparty.html.twig +++ b/src/Bundle/ChillThirdPartyBundle/Resources/views/Entity/thirdparty.html.twig @@ -9,6 +9,7 @@ * addInfo bool * hLevel integer #} + {% macro raw(thirdparty, options) %} {{ thirdparty.name }} {% endmacro raw %} @@ -100,39 +101,37 @@ {%- endif -%} {%- if render == 'bloc' -%} -
    -
    -
    - {{ _self.label(thirdparty, options) }} -
    -
    - -
      -
    • - -
      • -
    -
    +
    +
    + {{ _self.label(thirdparty, options) }} +
    +
    + +
      +
    • + +
      • +
    {%- endif -%}