From ee819e7767d62e634a0dce47233fcb63f564d081 Mon Sep 17 00:00:00 2001 From: Mathieu Jaumotte Date: Sun, 1 Aug 2021 18:38:31 +0200 Subject: [PATCH] improve flex-table logic, with accompanying period list template --- .../public/chill/scss/flex_table.scss | 74 ++++---- .../Resources/public/chill/scss/mixins.scss | 2 +- .../Resources/public/chill/chillperson.scss | 159 ++++++++---------- .../Resources/public/chill/index.js | 1 + .../public/chill/scss/flex_table.scss | 31 ++++ .../public/chill/scss/person_with_period.scss | 7 +- .../views/AccompanyingPeriod/_list.html.twig | 47 +++--- .../Resources/views/Entity/person.html.twig | 2 +- .../views/Person/list_with_period.html.twig | 2 +- .../views/Entity/thirdparty.html.twig | 2 +- 10 files changed, 180 insertions(+), 147 deletions(-) create mode 100644 src/Bundle/ChillPersonBundle/Resources/public/chill/scss/flex_table.scss diff --git a/src/Bundle/ChillMainBundle/Resources/public/chill/scss/flex_table.scss b/src/Bundle/ChillMainBundle/Resources/public/chill/scss/flex_table.scss index ec2bfae95..c942bb709 100644 --- a/src/Bundle/ChillMainBundle/Resources/public/chill/scss/flex_table.scss +++ b/src/Bundle/ChillMainBundle/Resources/public/chill/scss/flex_table.scss @@ -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 { } } } - } } } diff --git a/src/Bundle/ChillMainBundle/Resources/public/chill/scss/mixins.scss b/src/Bundle/ChillMainBundle/Resources/public/chill/scss/mixins.scss index ad7244af7..cccb01502 100644 --- a/src/Bundle/ChillMainBundle/Resources/public/chill/scss/mixins.scss +++ b/src/Bundle/ChillMainBundle/Resources/public/chill/scss/mixins.scss @@ -1,6 +1,6 @@ // -// +// Titles in forms // @mixin title_in_form { diff --git a/src/Bundle/ChillPersonBundle/Resources/public/chill/chillperson.scss b/src/Bundle/ChillPersonBundle/Resources/public/chill/chillperson.scss index c33792412..e0a63e982 100644 --- a/src/Bundle/ChillPersonBundle/Resources/public/chill/chillperson.scss +++ b/src/Bundle/ChillPersonBundle/Resources/public/chill/chillperson.scss @@ -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; - } -} - diff --git a/src/Bundle/ChillPersonBundle/Resources/public/chill/index.js b/src/Bundle/ChillPersonBundle/Resources/public/chill/index.js index 0e38c7d18..b2329a7f3 100644 --- a/src/Bundle/ChillPersonBundle/Resources/public/chill/index.js +++ b/src/Bundle/ChillPersonBundle/Resources/public/chill/index.js @@ -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'); diff --git a/src/Bundle/ChillPersonBundle/Resources/public/chill/scss/flex_table.scss b/src/Bundle/ChillPersonBundle/Resources/public/chill/scss/flex_table.scss new file mode 100644 index 000000000..b2a6a345b --- /dev/null +++ b/src/Bundle/ChillPersonBundle/Resources/public/chill/scss/flex_table.scss @@ -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%; + } +} diff --git a/src/Bundle/ChillPersonBundle/Resources/public/chill/scss/person_with_period.scss b/src/Bundle/ChillPersonBundle/Resources/public/chill/scss/person_with_period.scss index ada9bce9d..b2ab06c2c 100644 --- a/src/Bundle/ChillPersonBundle/Resources/public/chill/scss/person_with_period.scss +++ b/src/Bundle/ChillPersonBundle/Resources/public/chill/scss/person_with_period.scss @@ -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, diff --git a/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingPeriod/_list.html.twig b/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingPeriod/_list.html.twig index dcb808e50..997494a8d 100644 --- a/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingPeriod/_list.html.twig +++ b/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingPeriod/_list.html.twig @@ -5,33 +5,28 @@
- #{{ accompanying_period.id }} + + + {{ accompanying_period.id }} + + {% if accompanying_period.step == 'DRAFT' %} + {{- 'Draft'|trans|upper -}} + {% else %} + {{- 'Confirmed'|trans|upper -}} + {% endif %} {% if accompanying_period.emergency %} {{- 'Emergency'|trans|upper -}} {% endif %} {% if accompanying_period.confidential %} {{- 'Confidential'|trans|upper -}} {% endif %} - {% if accompanying_period.step == 'DRAFT' %} - {{- 'Draft'|trans|upper -}} - {% else %} - {{- 'Confirmed'|trans|upper -}} - {% endif %} -
- -
- {% if chill_accompanying_periods.fields.user == 'visible' %} - {% if accompanying_period.user %} - {{ accompanying_period.user.username }} - {% else %} - {{ 'No accompanying user'|trans }} - {% endif %} - {% endif %}
+
+
{% 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 @@ {% endif %} {% endif %} +
+ +
+ {% if chill_accompanying_periods.fields.user == 'visible' %} + {% if accompanying_period.user %} + {{ accompanying_period.user.username }} + {% else %} + {{ 'No accompanying user'|trans }} + {% endif %} + {% endif %} +
-
+

{{ 'Participants'|trans }}

@@ -99,17 +105,14 @@ {% endif %}
-
+
    {# TODO if enable_accompanying_course_with_multiple_persons is true ... #}
  • - - {{ 'See this period'|trans }} - + class="btn btn-show" title="{{ 'See accompanying period'|trans }}">{{ 'See this period'|trans }}
    • {# TODO cause error in household context. only works in person context diff --git a/src/Bundle/ChillPersonBundle/Resources/views/Entity/person.html.twig b/src/Bundle/ChillPersonBundle/Resources/views/Entity/person.html.twig index 2a56f0315..67c5fc59f 100644 --- a/src/Bundle/ChillPersonBundle/Resources/views/Entity/person.html.twig +++ b/src/Bundle/ChillPersonBundle/Resources/views/Entity/person.html.twig @@ -89,7 +89,7 @@
    {{ _self.label(person, options) }}
    -
    +
      {% set multiline = (options['address_multiline']) ? true : false %} {{ person.getLastAddress|chill_entity_render_box({ diff --git a/src/Bundle/ChillPersonBundle/Resources/views/Person/list_with_period.html.twig b/src/Bundle/ChillPersonBundle/Resources/views/Person/list_with_period.html.twig index 8c3d21b50..dc2f5e054 100644 --- a/src/Bundle/ChillPersonBundle/Resources/views/Person/list_with_period.html.twig +++ b/src/Bundle/ChillPersonBundle/Resources/views/Person/list_with_period.html.twig @@ -68,7 +68,7 @@ {%- endfor %} {% if apps|length > 0 %} -
      +
      {% for app in apps %}
      diff --git a/src/Bundle/ChillThirdPartyBundle/Resources/views/Entity/thirdparty.html.twig b/src/Bundle/ChillThirdPartyBundle/Resources/views/Entity/thirdparty.html.twig index 1f65abbd6..44a6beabe 100644 --- a/src/Bundle/ChillThirdPartyBundle/Resources/views/Entity/thirdparty.html.twig +++ b/src/Bundle/ChillThirdPartyBundle/Resources/views/Entity/thirdparty.html.twig @@ -66,7 +66,7 @@
      {{ _self.label(thirdparty, options) }}
      -
      +
        {{ thirdparty.getAddress|chill_entity_render_box({ 'render': 'list',