From 6c8f1f77ff8a7186596833912d426a65573bdc98 Mon Sep 17 00:00:00 2001 From: Mathieu Jaumotte Date: Wed, 26 May 2021 18:01:58 +0200 Subject: [PATCH] improve flex-table and flex-box --- .../Resources/public/scss/chillmain.scss | 189 ++++++++------ .../public/sass/person_with_period.scss | 85 +++---- .../AccompanyingCourse/history.html.twig | 64 ++++- .../views/AccompanyingCourse/index.html.twig | 235 +++++++++--------- .../views/Person/list_with_period.html.twig | 78 +++--- .../translations/messages.fr.yml | 1 + 6 files changed, 368 insertions(+), 284 deletions(-) diff --git a/src/Bundle/ChillMainBundle/Resources/public/scss/chillmain.scss b/src/Bundle/ChillMainBundle/Resources/public/scss/chillmain.scss index f931db1e7..b91aadb42 100644 --- a/src/Bundle/ChillMainBundle/Resources/public/scss/chillmain.scss +++ b/src/Bundle/ChillMainBundle/Resources/public/scss/chillmain.scss @@ -71,75 +71,102 @@ div#header-accompanying_course-details { /* * FLEX RESPONSIVE TABLE/BLOCK PRESENTATION */ +div.flex-bloc, +div.flex-table { + h2, h3, h4, dl, p { + margin: 0; + } + h2, h3, h4 { + color: var(--chill-blue); + } +} -/// 1. bloc appearance +/* +* Bloc appearance +*/ div.flex-bloc { + box-sizing: border-box; display: flex; flex-direction: row; flex-wrap: wrap; align-items: stretch; align-content: stretch; - &.right { - justify-content: flex-end; - div.item-bloc { - margin-left: 1em; - margin-right: 0; - } - } + div.item-bloc { + flex-grow: 0; flex-shrink: 1; flex-basis: 50%; + + margin: 0; border: 1px solid #000; - margin-bottom: 1em; - margin-right: 1em; - margin-left: 0; padding: 1em; - padding-bottom: 0; - flex-grow: 0; - flex-shrink: 0; - flex-basis: 30%; - background-color: #e6e6e6; + + border-top: 0; + &:nth-child(1), &:nth-child(2) { + border-top: 1px solid #000; + } + border-left: 0; + &:nth-child(odd) { + border-left: 1px solid #000; + } + + //background-color: #e6e6e6; display: flex; flex-direction: column; - h5 { - margin-top: 0; - margin-bottom: 0.3em; - } - .content-bloc { - margin: 0; - font-size: 80%; - } - dd { - margin: 0.67em auto; - } - ul.record_actions { - margin-top: auto; - margin-bottom: 0; + + div.item-row { + flex-grow: 1; flex-shrink: 1; flex-basis: auto; + display: flex; + 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; + + .list-content { // ul, dl, or div + } + ul.record_actions { + margin: 0; + align-self: flex-end; + flex-grow: 1; flex-shrink: 0; flex-basis: auto; + li { + margin-right: 5px; + } + } + } + } } } - @media only screen and (max-width: 1024px) { - div.item-bloc { - flex-grow: 0; - flex-shrink: 0; - flex-basis: 45%; - } - } - @media only screen and (max-width: 768px) { + @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; div.item-bloc { - margin-right: 0; - } - &.right div.item-bloc { - margin-left: 0; + border-left: 1px solid #000; + &:nth-child(2) { + border-top: 0; + } } } } -/// 2. table appearance +/* +* 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; border: 1px solid #000; border-top: 0; &:first-child { @@ -148,37 +175,51 @@ div.flex-table { &:nth-child(even) { background-color: #e6e6e6; } - padding: 1em; - display: flex; - flex-direction: row; - & > h4, & > h5 { - margin-top: 0; - margin-bottom: 0.3em; - flex-grow: 0; - flex-shrink: 0; - flex-basis: 33%; - } - & > .content-bloc { - margin: 0; - font-size: 80%; - flex-grow: 1; - flex-shrink: 0; - flex-basis: 50%; - dd { - margin: 0.67em auto; + + div.item-row { + display: flex; + flex-direction: row; + &:not(:first-child) { + margin-top: 0.5em; + border-top: 1px dotted #0000004f; + padding-top: 0.5em; + flex-direction: column; } - } - & > ul.record_actions { - flex-grow: 0; - flex-shrink: 0; - flex-basis: 0; - margin-top: auto; - margin-bottom: 0; + + div.item-col { + &:first-child { + flex-grow: 0; flex-shrink: 0; flex-basis: 33%; + } + &:last-child { + flex-grow: 1; flex-shrink: 1; flex-basis: auto; + display: flex; + justify-content: flex-end; + + .list-content { // ul, dl, or div + } + ul.record_actions { + margin: 0; + align-self: flex-start; + flex-grow: 1; flex-shrink: 0; flex-basis: auto; + li { + margin-right: 5px; + } + } + } + } + @media only screen and (max-width: 900px) { + flex-direction: column; + div.item-col { + &:last-child { + ul.record_actions { + align-self: flex-end; + } + } + } + } + + // neutralize + div.chill_address div.chill_address_address p { text-indent: 0; } } } - @media only screen and (max-width: 768px) { - div.item-bloc { - flex-direction: column; - } - } -} +} diff --git a/src/Bundle/ChillPersonBundle/Resources/public/sass/person_with_period.scss b/src/Bundle/ChillPersonBundle/Resources/public/sass/person_with_period.scss index 2f0e5de55..6f52d2cae 100644 --- a/src/Bundle/ChillPersonBundle/Resources/public/sass/person_with_period.scss +++ b/src/Bundle/ChillPersonBundle/Resources/public/sass/person_with_period.scss @@ -1,63 +1,46 @@ /// complete and overwrite flex-table in chillmain.scss -div.list-with-period { // .flex-table - - div.item-bloc { - margin-bottom: 0; - - &:nth-last-of-type { - padding-bottom: 1em; +div.list-with-period { + div.person { + ul.record_actions { + li { + margin-right: 0 !important; + } } - - flex-direction: column; // !! - & > div { - display: flex; - flex-direction: row; - - &.person { - div.box-person { - flex-grow: 0; - flex-shrink: 0; - flex-basis: 33%; - } - div.box-where { - flex-grow: 1; - flex-shrink: 0; - flex-basis: 40%; - } - ul.record_actions { - flex-grow: 0; - flex-shrink: 0; - flex-basis: 25%; - li { - margin-right: 0; - } - } - @media only screen and (max-width: 768px) { - flex-direction: column; + } + div.periods { + div.header, + div.list-content { + width: calc(100% - 40px); + margin-left: 40px; + } + div.header { + position: relative; + a.sc-button { + position: absolute; + width: 30px; + height: 30px; + top: 10px; + left: -40px; + padding: 0; + i { + padding: 5px; } } - - &.periods { - list-style-type: none; - padding: 0; - margin: 0; - display: flex; - flex-direction: column; - div.header { - abbr.referrer { - font-size: 70%; - } - span.user {} - } - span.more { - font-style: italic; - } + abbr.referrer { + font-size: 70%; + } + span.user { + margin-left: 1em; + } + } + div.list-content { + span.more { + font-style: italic; } } } } - .chill-entity__person { .chill-entity__person__first-name, .chill-entity__person__last-name { diff --git a/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourse/history.html.twig b/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourse/history.html.twig index 9ef00e360..f5f1fc067 100644 --- a/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourse/history.html.twig +++ b/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourse/history.html.twig @@ -8,20 +8,58 @@

{{ block('title') }}

- 
-    {{ accompanyingCourse.id }}
-    {{ accompanyingCourse.openingDate|format_date('short') }}
-    {{ accompanyingCourse.closingDate|format_date('short') }}
-    {{ accompanyingCourse.closingMotive|chill_entity_render_box }}
-    {{ accompanyingCourse.remark|raw }}
-    {{ accompanyingCourse.user }}
-    usagers:
-    {% for p in accompanyingCourse.participations %}
-        {{ p.person.id }} | {{ p.person.fullnamecanonical }} | {{ p.startdate|format_date('short') }} | {{ p.enddate|format_date('short') }}
-    {% endfor %}
-
+ {# start test flex-table #} +
+ {% for p in accompanyingCourse.participations %} +
+
+
+

+ + {{ p.person.firstname ~ ' ' ~ p.person.lastname }} + +

+

+ + {{ 'Née le ' ~ p.person.birthdate|format_date('short') }} +

+
+
+
    +
  • + {{ p.startdate|format_date('short') }} → {{ p.enddate|format_date('short') }} +
    • +
  • + +32 488 660 685 +
    • +
  • + robert@brisefeuille.fake.co +
    • +
  • + 59, avenue Fernandez 79, boulevard Laurence Levy 1210 Saint-josse-ten-noode Belgique +
    • +
+
    +
    • +
    • +
+
+ +
+
+ Lorem ipsum dolor sit amet, incididunt ut labore et dolore magna aliqua. +
+
+ Rhoncus est pellentesque elit eu ultrices vitae auctor. +
+
+ Facilisis gravida neque convallis a cras semper auctor neque. +
+
+ {% endfor %} +
+ {# end test flex-table #} - {{ dump() }} {# ==> insert accompanyingCourse vue component #}
diff --git a/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourse/index.html.twig b/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourse/index.html.twig index 1bfb60037..98f26987f 100644 --- a/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourse/index.html.twig +++ b/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourse/index.html.twig @@ -23,46 +23,48 @@ {% for p in accompanyingCourse.participations %} {% if p.enddate is null %}
- -
{{ p.person.firstname ~ ' ' ~ p.person.lastname }}
-
- -
- {% set born = (p.person.gender == 'woman') ? 'née': 'né' %} - {% set gender = (p.person.gender == 'woman') ? 'fa-venus' : - (p.person.gender == 'man') ? 'fa-mars' : 'fa-neuter' %} - {% set genderTitle = (p.person.gender == 'woman') ? 'femme' : - (p.person.gender == 'homme') ? 'fa-mars' : 'neutre' %} - {{ born ~ ' le ' ~ p.person.birthdate|format_date('short') }} -
-
- {% if p.person.mobilenumber %} - {{ p.person.mobilenumber }} - {% else %} - - {% if p.person.phonenumber %} - {{ p.person.phonenumber }} - {% else %} - {{ 'No data given'|trans }} - {% endif %} - {% endif %} -
-
- {%- if p.person.lastAddress is not empty -%} - {{ address._render(p.person.lastAddress, {'has_no_address': true, 'with_valid_from': false, 'with_icon': true}) }} - {%- else -%} - - {{ 'No address given'|trans }} - {%- endif -%} -
- -
- - +
+
+

{{ p.person.firstname ~ ' ' ~ p.person.lastname }}

+

+ {% set born = (p.person.gender == 'woman') ? 'née': 'né' %} + {% set gender = (p.person.gender == 'woman') ? 'fa-venus' : + (p.person.gender == 'man') ? 'fa-mars' : 'fa-neuter' %} + {% set genderTitle = (p.person.gender == 'woman') ? 'femme' : + (p.person.gender == 'homme') ? 'fa-mars' : 'neutre' %} + {{ born ~ ' le ' ~ p.person.birthdate|format_date('short') }} +

+
+
+
    +
  • + {% if p.person.mobilenumber %} + {{ p.person.mobilenumber }} + {% else %} + + {% if p.person.phonenumber %} + {{ p.person.phonenumber }} + {% else %} + {{ 'No data given'|trans }} + {% endif %} + {% endif %} +
    • +
  • + + {%- if p.person.lastAddress is not empty -%} + {{ p.person.getLastAddress|chill_entity_render_box({'with_valid_from': false}) }} + {%- else -%} + {{ 'No address given'|trans }} + {%- endif -%} +
    • +
+
    +
  • + +
    • +
+
+
{% endif %} {% endfor %} @@ -70,85 +72,96 @@

{{ 'Resources'|trans }}

-
+
{% for r in accompanyingCourse.resources %}
{% if r.person %} -
- {{ r.person.firstname ~ ' ' ~ r.person.lastname }} - {{ 'Usager' }} -
-
- -
- {% set born = (r.person.gender == 'woman') ? 'née': 'né' %} - {% set gender = (r.person.gender == 'woman') ? 'fa-venus' : - (r.person.gender == 'man') ? 'fa-mars' : 'fa-neuter' %} - {% set genderTitle = (r.person.gender == 'woman') ? 'femme' : - (r.person.gender == 'mhomme') ? 'fa-mars' : 'neutre' %} - {{ born ~ ' le ' ~ r.person.birthdate|format_date('short') }} -
-
- {% if r.person.mobilenumber %} - {{ r.person.mobilenumber }} - {% else %} - - {% if r.person.phonenumber %} - {{ r.person.phonenumber }} - {% else %} - {{ 'No data given'|trans }} - {% endif %} - {% endif %} -
-
- {%- if r.person.lastAddress is not empty -%} - {{ address._render(r.person.lastAddress, {'has_no_address': true, 'with_valid_from': false, 'with_icon': true}) }} - {%- else -%} - - {{ 'No address given'|trans }} - {%- endif -%} -
- -
-
    -
  • - -
    • -
+
+
+

+ {{ r.person.firstname ~ ' ' ~ r.person.lastname }} + {{ 'Usager' }} +

+

+ {% set born = (r.person.gender == 'woman') ? 'née': 'né' %} + {% set gender = (r.person.gender == 'woman') ? 'fa-venus' : + (r.person.gender == 'man') ? 'fa-mars' : 'fa-neuter' %} + {% set genderTitle = (r.person.gender == 'woman') ? 'femme' : + (r.person.gender == 'homme') ? 'fa-mars' : 'neutre' %} + {{ born ~ ' le ' ~ r.person.birthdate|format_date('short') }} +

+
+
+
    +
  • + {% if r.person.mobilenumber %} + {{ r.person.mobilenumber }} + {% else %} + + {% if r.person.phonenumber %} + {{ r.person.phonenumber }} + {% else %} + {{ 'No data given'|trans }} + {% endif %} + {% endif %} +
    • +
  • + + {%- if r.person.lastAddress is not empty -%} + {{ r.person.getLastAddress|chill_entity_render_box({'with_valid_from': false}) }} + {%- else -%} + {{ 'No address given'|trans }} + {%- endif -%} +
    • +
+
    +
  • + +
    • +
+
+
{% endif %} {% if r.thirdParty %} -
- {{ r.thirdParty.name }} - {{ 'Tiers' }} -
-
- -
- - - {{ r.thirdParty.email|chill_print_or_message("thirdparty.No_email") }} - -
-
- {{ r.thirdParty.telephone|chill_print_or_message("thirdparty.No_phonenumber") }} -
-
- {% if r.thirdParty.address == null %} - {{ 'No address given'|trans }} - {% else %} - {{ address._render(r.thirdParty.address, {'with_valid_from': false, 'with_icon': true }) }} - {% endif %} -
- -
-
    -
  • - -
    • -
+
+
+

+ {{ r.thirdParty.name }} + {{ 'Tiers' }} +

+
+
+ +
    +
  • + +
    • +
+
+
{% endif %}
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 c935a73f9..10c0e0bc7 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 @@ -37,47 +37,47 @@ {% if persons|length > 0 %} -
+
{% for person in persons %}
-
+
-
+
{{ person|chill_entity_render_box({'addLink': true}) }}
{{ 'Born the %date%'|transchoice(person.genderNumeric, { '%date%': person.birthdate|format_date("medium") }) }}
-
-
-
{{ person.center }}
+
+
-
- -
    +
+ +
+
{#- 'apps' is for AccompanyingPeriodParticipationS #} @@ -100,30 +102,36 @@ {%- endfor %} {% if apps|length > 0 %} -
{% for app in apps %} -
-
- - {{ 'Since %date%'|trans({'%date%': app.startDate|format_date('medium') }) }} - - {% if app.accompanyingPeriod.user is not null %} - ref: - {{ app.accompanyingPeriod.user|chill_entity_render_box }} - {% endif %} - -
- +
+ +
+ + + + {{ 'Since %date%'|trans({'%date%': app.startDate|format_date('medium') }) }} + {% if app.accompanyingPeriod.user is not null %} + + ref: + {{ app.accompanyingPeriod.user|chill_entity_render_box }} + + {% endif %} +
+ +
{% for issue in app.accompanyingPeriod.socialIssues|slice(0,2) %} - {{ issue|chill_entity_render_box }} + {{ issue|chill_entity_render_box }} {% endfor %} {% if app.accompanyingPeriod.socialIssues|length > 2 %} - {{ 'and %number% other'|transchoice(app.accompanyingPeriod.socialIssues|length-2) }} + {{ 'and %number% other'|transchoice(app.accompanyingPeriod.socialIssues|length-2) }} {% endif %}
+ +
{% endfor %} -
+ {% endif %}
diff --git a/src/Bundle/ChillPersonBundle/translations/messages.fr.yml b/src/Bundle/ChillPersonBundle/translations/messages.fr.yml index c2f56d7f8..12ba14b05 100644 --- a/src/Bundle/ChillPersonBundle/translations/messages.fr.yml +++ b/src/Bundle/ChillPersonBundle/translations/messages.fr.yml @@ -173,6 +173,7 @@ Social actions: Actions d'accompagnement 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 period: Voir cette période d'accompagnement Referrer: Référent # pickAPersonType