From d2b0b9d7dad302c7fc17b2b7d153f73143ce941a Mon Sep 17 00:00:00 2001 From: Mathieu Jaumotte Date: Fri, 20 Aug 2021 16:19:15 +0200 Subject: [PATCH] reorganise flex-table assets, improve search results, and accompanyingPeriods list --- .../Resources/public/chill/scss/buttons.scss | 12 +-- .../public/chill/scss/flex_table.scss | 74 ++++++++++++------- .../Resources/public/chill/scss/mixins.scss | 7 ++ .../Resources/public/chill/chillperson.scss | 6 ++ .../public/chill/scss/person_with_period.scss | 67 +++++++++++++++-- .../public/chill/scss/render_box.scss | 12 ++- .../_components/Entity/PersonRenderBox.vue | 2 +- .../_join_household.html.twig | 8 +- .../views/AccompanyingCourse/index.html.twig | 2 +- .../views/AccompanyingPeriod/_list.html.twig | 9 ++- .../Resources/views/Entity/person.html.twig | 2 +- .../views/Entity/social_issue.html.twig | 8 +- .../views/Person/list_with_period.html.twig | 66 +++++++++-------- .../translations/messages.fr.yml | 2 +- .../Entity/ThirdPartyRenderBox.vue | 2 +- .../views/Entity/thirdparty.html.twig | 2 +- 16 files changed, 194 insertions(+), 87 deletions(-) diff --git a/src/Bundle/ChillMainBundle/Resources/public/chill/scss/buttons.scss b/src/Bundle/ChillMainBundle/Resources/public/chill/scss/buttons.scss index fde222a23..ebcb04f11 100644 --- a/src/Bundle/ChillMainBundle/Resources/public/chill/scss/buttons.scss +++ b/src/Bundle/ChillMainBundle/Resources/public/chill/scss/buttons.scss @@ -17,8 +17,8 @@ $chill-theme-buttons: ( "update": $chill-orange, "show": $chill-blue, "view": $chill-blue, - "misc": $chill-light-gray, - "cancel": $chill-light-gray, + "misc": $gray-300, + "cancel": $gray-300, ); @each $button, $color in $chill-theme-buttons { @@ -74,17 +74,17 @@ $chill-theme-buttons: ( } &[class*='btn-']:empty { &::before { - margin-right: 0; + margin-right: 0; } } } .btn { &.btn-new::before, - &.btn-create::before { content: "\f067"; } // fa-plus - &.btn-edit::before, + &.btn-create::before { content: "\f067"; } // fa-plus + &.btn-edit::before, &.btn-update::before { content: "\f040"; } // fa-pencil - &.btn-show::before, + &.btn-show::before, &.btn-view::before { content: "\f06e"; } // fa-eye &.btn-save::before { content: "\f0c7"; } // fa-floppy-o &.btn-duplicate::before { content: "\f24d"; } // fa-clone // f0c5 fa-files-o 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 f0ed84771..cc9dc363d 100644 --- a/src/Bundle/ChillMainBundle/Resources/public/chill/scss/flex_table.scss +++ b/src/Bundle/ChillMainBundle/Resources/public/chill/scss/flex_table.scss @@ -59,11 +59,6 @@ div.flex-bloc { 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; @@ -71,15 +66,10 @@ div.flex-bloc { &:last-child { flex-grow: 1; flex-shrink: 1; flex-basis: auto; + @include separator; ul.record_actions { align-self: flex-end; - flex-grow: 1; flex-shrink: 0; flex-basis: auto; - margin: 0; - - li { - margin-right: 5px; - } } } } @@ -108,17 +98,6 @@ div.flex-table { div.item-row { flex-direction: row; - &:first-child { - align-items: baseline; // - } - - &.separator { - margin-top: 0.5em; - border-top: 1px dotted $gray-900; - padding-top: 0.5em; - //flex-direction: column; - } - div.item-col { &:first-child { flex-grow: 0; flex-shrink: 0; flex-basis: auto; @@ -128,8 +107,11 @@ div.flex-table { flex-grow: 1; flex-shrink: 1; flex-basis: auto; justify-content: flex-end; + @include media-breakpoint-down(md) { + @include separator; + } + ul.record_actions { - flex-grow: 1; flex-shrink: 0; flex-basis: auto; align-self: flex-start; } } @@ -150,11 +132,11 @@ div.flex-table { } /* -* __WRAP-LIST-INLINE_________ +* __WRAP_LIST_INLINE_________ * FLEX RESPONSIVE INLINE DEFINITION LIST */ -div.wraplist { +div.wrap-list { padding: 0; width: 100%; @@ -166,6 +148,7 @@ div.wraplist { div.wl-col.title { width: auto; + flex-shrink: 0; @include media-breakpoint-up(md) { margin-left: 1.5em; @@ -205,12 +188,13 @@ div.wraplist { } + /* * __WRAP_HEADER_BLOC________ * HEADER ROW FOR FLEX-TABLE ELEMENTS */ -div.wrapheader { +div.wrap-header { width: 100%; div.wh-row { @@ -233,6 +217,44 @@ div.wrapheader { justify-content: flex-end; } } + } + &.debug { + border: 1px solid $black; + div.wh-row { + &:first-child div.wh-col { + &:first-child { background-color: $yellow; } + &:last-child { background-color: $beige; } + } + &:last-child div.wh-col { + &:first-child { background-color: $orange; } + &:last-child { background-color: $pink; } + } + } + } +} + +/* +* COMMON +*/ + +div.flex-bloc, +div.flex-table, +div.wrap-list, +div.wrap-header { + + div.separator { + @include separator; + } + + ul.record_actions { + flex-grow: 1; + flex-shrink: 0; + flex-basis: auto; + margin: 0; + + li { + margin-right: 5px; + } } } diff --git a/src/Bundle/ChillMainBundle/Resources/public/chill/scss/mixins.scss b/src/Bundle/ChillMainBundle/Resources/public/chill/scss/mixins.scss index cccb01502..9b4650087 100644 --- a/src/Bundle/ChillMainBundle/Resources/public/chill/scss/mixins.scss +++ b/src/Bundle/ChillMainBundle/Resources/public/chill/scss/mixins.scss @@ -26,3 +26,10 @@ 0 1px 0 0 var(--bs-dark) inset; } +// Dotted line to separate rows + +@mixin separator { + margin-top: 0.5em; + border-top: 1px dotted $gray-900; + padding-top: 0.5em; +} diff --git a/src/Bundle/ChillPersonBundle/Resources/public/chill/chillperson.scss b/src/Bundle/ChillPersonBundle/Resources/public/chill/chillperson.scss index 29e653b5d..9d9f6dfbc 100644 --- a/src/Bundle/ChillPersonBundle/Resources/public/chill/chillperson.scss +++ b/src/Bundle/ChillPersonBundle/Resources/public/chill/chillperson.scss @@ -115,6 +115,12 @@ div.banner { } } +abbr.referrer { + font-size: 70%; + padding-right: 0.4em; + align-self: center; // in flex context +} + /* * HOUSEHOLD CONTEXT * Header custom for Household 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 b2ab06c2c..55aacca88 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,8 +1,50 @@ -/// -div.list-with-period, div.list-household-members { +/// Search Page (list_with_period.html.twig) +div.list-with-period { - div.periods { + // override wrap-list + div.wrap-list.periods-list { + div.wl-row { + flex-wrap: nowrap; + div.wl-col { + &.title { + width: 36%; + @include media-breakpoint-up(md) { + margin-left: 0; + } + } + &.list { + display: flex; + flex-wrap: wrap; // + margin: unset; + } + } + @include media-breakpoint-down(sm) { + flex-wrap: wrap; + div.wl-col { + &.title, &.list { + width: 100%; + } + &.title { + text-align: left; + div { + display: inline-block; + } + } + } + } + } + } + div.periods-list { + div.title { + text-align: right; + div.date {} + div.user {} + } + } + + + /* div.header, div.list-content { width: calc(100% - 40px); @@ -21,9 +63,6 @@ div.list-with-period, div.list-household-members { padding: 5px; } } - abbr.referrer { - font-size: 70%; - } span.user { margin-left: 1em; } @@ -33,8 +72,24 @@ div.list-with-period, div.list-household-members { font-style: italic; } } + */ +} + +/// TODO + +/// dans householdmembereditor/Concerned.vue +div.positions { + div.list-household-members { + div.participation-details {} } } +/// dans householdmembereditor/Concerned.vue et dans household/summary +div.list-household-members { + div.move_to { + p.move_hint {} + } + div.comment {} +} 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 657129644..146fc735b 100644 --- a/src/Bundle/ChillPersonBundle/Resources/public/chill/scss/render_box.scss +++ b/src/Bundle/ChillPersonBundle/Resources/public/chill/scss/render_box.scss @@ -1,8 +1,18 @@ -section.chill-entity { +/// CHILL ENTITY RENDER BOX +.chill-entity { + + /// PERSON &.entity-person { span.firstname, span.lastname, span.altname {} } + + /// SOCIAL-ISSUE + &.entity-social-issue { + margin-right: 0.3em; + } } + + diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/Entity/PersonRenderBox.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/Entity/PersonRenderBox.vue index bde9be461..e7254c8c6 100644 --- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/Entity/PersonRenderBox.vue +++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/Entity/PersonRenderBox.vue @@ -40,7 +40,7 @@ -
+
  • diff --git a/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourse/_join_household.html.twig b/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourse/_join_household.html.twig index 600430b31..939fde00d 100644 --- a/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourse/_join_household.html.twig +++ b/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourse/_join_household.html.twig @@ -1,12 +1,12 @@ -
    -
    +
    +
    {{ 'Some peoples does not belong to any household currently. Add them to an household soon'|trans }}
    • -
    diff --git a/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourse/index.html.twig b/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourse/index.html.twig index 4310e46ed..71ecd75db 100644 --- a/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourse/index.html.twig +++ b/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourse/index.html.twig @@ -8,7 +8,7 @@ {% if person.isSharingHousehold %}
  • + class="btn btn-sm btn-chill-beige" title="{{ 'Show household'|trans ~ ' n° ' ~ person.getCurrentHousehold.id }}">
    • diff --git a/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingPeriod/_list.html.twig b/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingPeriod/_list.html.twig index 31440d706..19f8d9e3b 100644 --- a/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingPeriod/_list.html.twig +++ b/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingPeriod/_list.html.twig @@ -4,7 +4,7 @@
    -
    +
    @@ -22,7 +22,7 @@ {% if accompanying_period.step == 'DRAFT' %} {{- 'Draft'|trans|upper -}} {% else %} - {{- 'Confirmed'|trans|upper -}} + {{- 'Confirmed'|trans|upper -}} {% endif %}
    @@ -46,7 +46,8 @@
    {% if chill_accompanying_periods.fields.user == 'visible' %} {% if accompanying_period.user %} - {{ accompanying_period.user.username }} + ref: + {{ accompanying_period.user.username|chill_entity_render_box }} {% else %} {{ 'No accompanying user'|trans }} {% endif %} @@ -58,7 +59,7 @@
    -
    +
    {% if accompanying_period.participations.count > 0 %}

    {{ 'Participants'|trans }}

    diff --git a/src/Bundle/ChillPersonBundle/Resources/views/Entity/person.html.twig b/src/Bundle/ChillPersonBundle/Resources/views/Entity/person.html.twig index 20a9ff221..391fd164b 100644 --- a/src/Bundle/ChillPersonBundle/Resources/views/Entity/person.html.twig +++ b/src/Bundle/ChillPersonBundle/Resources/views/Entity/person.html.twig @@ -100,7 +100,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/Entity/social_issue.html.twig b/src/Bundle/ChillPersonBundle/Resources/views/Entity/social_issue.html.twig index 997fd4eda..500b2c775 100644 --- a/src/Bundle/ChillPersonBundle/Resources/views/Entity/social_issue.html.twig +++ b/src/Bundle/ChillPersonBundle/Resources/views/Entity/social_issue.html.twig @@ -1,12 +1,12 @@ {% set reversed_parents = parents|reverse %} -