reorganise flex-table assets, improve search results, and accompanyingPeriods list

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,
+   "misc":          $gray-300,
-   "cancel":        $chill-light-gray,
+   "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-create::before    { content: "\f067"; } // fa-plus
-   &.btn-edit::before, 
+   &.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

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

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

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

src/Bundle/ChillPersonBundle/Resources/public/chill/scss/person_with_period.scss

@@ -1,8 +1,50 @@
 
-///
+/// Search Page  (list_with_period.html.twig)
-div.list-with-period, div.list-household-members {
+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 {}
+}
 
 

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

src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/Entity/PersonRenderBox.vue

@@ -40,7 +40,7 @@
             </div>
         </div>
 
-        <div class="item-col separator">
+        <div class="item-col">
             <ul class="list-content fa-ul">
                 <li v-if="person.current_household_address">
                     <i class="fa fa-li fa-map-marker"></i>

src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourse/_join_household.html.twig

@@ -1,12 +1,12 @@
-<div class="border border-danger">
+<div class="border border-warning">
-    <div class="alert alert-danger alert-with-actions mb-0">
+    <div class="alert alert-warning alert-with-actions mb-0">
         <div class="message">
             {{ 'Some peoples does not belong to any household currently. Add them to an household soon'|trans }}
         </div>
         <ul class="record_actions">
             <li>
-                <button class="btn btn-chill-pink" data-bs-toggle="collapse" href="#withoutHouseholdList">
+                <button class="btn btn-chill-beige" data-bs-toggle="collapse" href="#withoutHouseholdList">
-                    <i class="fa fa-fw fa-caret-down"></i><span class="text-light">{{ 'Add to household now'|trans }}</span>
+                    <i class="fa fa-fw fa-caret-down"></i><span class="">{{ 'Add to household now'|trans }}</span>
                 </button>
             </li>
         </ul>

src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourse/index.html.twig

@@ -8,7 +8,7 @@
     {% if person.isSharingHousehold %}
         <li>
             <a href="{{ chill_path_add_return_path('chill_person_household_summary', { 'household_id': person.getCurrentHousehold.id }) }}"
-               class="btn btn-sm btn-chill-pink" title="{{ 'Show household'|trans ~ ' n° ' ~ person.getCurrentHousehold.id }}">
+               class="btn btn-sm btn-chill-beige" title="{{ 'Show household'|trans ~ ' n° ' ~ person.getCurrentHousehold.id }}">
                 <i class="fa fa-home"></i>
             </a>
         </li>

src/Bundle/ChillPersonBundle/Resources/views/AccompanyingPeriod/_list.html.twig

@@ -4,7 +4,7 @@
             <div class="item-bloc">
                 <div class="item-row">
 
-                    <div class="wrapheader">
+                    <div class="wrap-header">
                         <div class="wh-row">
                             <div class="wh-col">
                                 <span class="h3">
@@ -22,7 +22,7 @@
                                 {% if accompanying_period.step == 'DRAFT' %}
                                     <span class="badge bg-secondary">{{- 'Draft'|trans|upper -}}</span>
                                 {% else %}
-                                    <span class="badge bg-success">{{- 'Confirmed'|trans|upper -}}</span>
+                                    <span class="badge bg-primary">{{- 'Confirmed'|trans|upper -}}</span>
                                 {% endif %}
                             </div>
                         </div>
@@ -46,7 +46,8 @@
                             <div class="wh-col">
                                 {% if chill_accompanying_periods.fields.user == 'visible'  %}
                                     {% if accompanying_period.user %}
-                                        {{ accompanying_period.user.username }}
+                                        <abbr class="referrer" title="{{ 'Referrer'|trans }}">ref:</abbr>
+                                        {{ accompanying_period.user.username|chill_entity_render_box }}
                                     {% else %}
                                         <span class="chill-no-data-statement">{{ 'No accompanying user'|trans }}</span>
                                     {% endif %}
@@ -58,7 +59,7 @@
                 </div>
                 <div class="item-row separator">
 
-                    <div class="wraplist">
+                    <div class="wrap-list">
                         {% if accompanying_period.participations.count > 0 %}
                             <div class="wl-row">
                                 <div class="wl-col title"><h3>{{ 'Participants'|trans }}</h3></div>

src/Bundle/ChillPersonBundle/Resources/views/Entity/person.html.twig

@@ -100,7 +100,7 @@
     <div class="item-col">
         {{ _self.label(person, options) }}
     </div>
-    <div class="item-col separator">
+    <div class="item-col">
         <ul class="list-content fa-ul">
             {% set multiline = (options['address_multiline']) ? true : false %}
             {{ person.getLastAddress|chill_entity_render_box({

src/Bundle/ChillPersonBundle/Resources/views/Entity/social_issue.html.twig

@@ -1,12 +1,12 @@
 {% set reversed_parents = parents|reverse %}
-<span class="chill-entity chill-entity__social-issue">
+<span class="chill-entity entity-social-issue">
-  <span class="badge bg-primary">
+  <span class="badge bg-chill-pink">
     {%- for p in reversed_parents %}
-    <span class="chill-entity__social-issue__parent--{{ loop.revindex0 }}">
+    <span class="parent-{{ loop.revindex0 }}">
       {{ p.title|localize_translatable_string }}{{ options['default.separator'] }}
     </span>
     {%- endfor -%}
-    <span class="chill-entity__social-issue__child">
+    <span class="child">
       {{ socialIssue.title|localize_translatable_string }}
     </span>
   </span>

src/Bundle/ChillPersonBundle/Resources/views/Person/list_with_period.html.twig

@@ -1,7 +1,7 @@
 {%  macro button_person(person) %}
     <li>
         <a href="{{ path('chill_person_accompanying_period_list', { 'person_id' : person.id }) }}"
-           class="btn btn-sm btn-primary" title="{{ 'See accompanying periods'|trans }}"><i class="fa fa-random"></i></a>
+           class="btn btn-sm btn-outline-primary" title="{{ 'See accompanying periods'|trans }}"><i class="fa fa-random"></i></a>
     </li>
 {% endmacro %}
 
@@ -59,44 +59,50 @@
                     }) }}
 
                     {#- 'apps' is for AccompanyingPeriodParticipationS #}
-                    {#- filter using acl -#}
                     {%- set apps = [] %}
                     {%- for app in person.openedParticipations %}
                         {%- if is_granted('CHILL_PERSON_ACCOMPANYING_PERIOD_SEE', app.accompanyingPeriod) %}
                             {%- set apps = apps|merge([app]) %}
                         {%- endif %}
                     {%- endfor %}
-
                     {% if apps|length > 0 %}
-                        <div class="item-row separator periods">
+                        <div class="item-row">
-                        {% for app in apps %}
+                            <div class="wrap-list periods-list">
-
+                                {% for app in apps %}
-                            <div class="header">
+                                    <div class="wl-row separator">
-                                <a href="{{ path('chill_person_accompanying_course_index', { 'accompanying_period_id': app.accompanyingPeriod.id }) }}"
+                                        <div class="wl-col title">
-                                    class="btn btn-chill-green" title="{{ 'See accompanying period'|trans }}">
+                                            <div class="date">
-                                    <i class="fa fa-random"></i>
+                                                {{ 'Since %date%'|trans({'%date%': app.startDate|format_date('medium') }) }}
-                                </a>
+                                            </div>
-                                <span>
+                                            {% if app.accompanyingPeriod.user is not null %}
-                                    {{ 'Since %date%'|trans({'%date%': app.startDate|format_date('medium') }) }}
+                                                <div class="user">
-                                </span>
+                                                    <abbr class="referrer" title="{{ 'Referrer'|trans }}">ref:</abbr>
-                                {% if app.accompanyingPeriod.user is not null %}
+                                                    {{ app.accompanyingPeriod.user|chill_entity_render_box }}
-                                    <span class="user">
+                                                </div>
-                                        <abbr class="referrer" title="{{ 'Referrer'|trans }}">ref:</abbr>
+                                            {% endif %}
-                                        {{ app.accompanyingPeriod.user|chill_entity_render_box }}
+                                        </div>
-                                    </span>
+                                        <div class="wl-col list">
-                                {% endif %}
+                                            {% for issue in app.accompanyingPeriod.socialIssues %}
-                            </div>
+                                                {{ issue|chill_entity_render_box }}
-
+                                            {% endfor %}
-                            <div class="list-content">
+                                            {# ^^ display all socialIssues
-                                {% for issue in app.accompanyingPeriod.socialIssues|slice(0,2) %}
+                                            |slice(0,2)
-                                    <span>{{ issue|chill_entity_render_box }}</span>
+                                            {% if app.accompanyingPeriod.socialIssues|length > 2 %}
+                                                <span class="more">{{ 'and %number% other'|transchoice(app.accompanyingPeriod.socialIssues|length-2) }}</span>
+                                            {% endif %}
+                                            #}
+                                            <ul class="record_actions">
+                                                <li>
+                                                    <a href="{{ path('chill_person_accompanying_course_index', { 'accompanying_period_id': app.accompanyingPeriod.id }) }}"
+                                                       class="btn btn-sm btn-outline-primary" title="{{ 'See accompanying period'|trans }}">
+                                                        <i class="fa fa-random fa-fw"></i>
+                                                    </a>
+                                                </li>
+                                            </ul>
+                                        </div>
+                                    </div>
                                 {% endfor %}
-                                {% if app.accompanyingPeriod.socialIssues|length > 2 %}
-                                    <span class="more">{{ 'and %number% other'|transchoice(app.accompanyingPeriod.socialIssues|length-2) }}</span>
-                                {% endif %}
                             </div>
-
-                        {% endfor %}
                         </div>
                     {% endif %}
 

src/Bundle/ChillPersonBundle/translations/messages.fr.yml

@@ -191,7 +191,7 @@ Social actions: Actions d'accompagnement
 Social issues: Problématiques sociales
 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 periods: Voir toutes les périodes d'accompagnement
 See accompanying period: Voir la période
 Edit accompanying period: Modifier la période
 See this period: Voir cette période

src/Bundle/ChillThirdPartyBundle/Resources/public/vuejs/_components/Entity/ThirdPartyRenderBox.vue

@@ -31,7 +31,7 @@
             </div>
         </div>
 
-        <div class="item-col separator">
+        <div class="item-col">
             <ul class="list-content fa-ul">
                 <li v-if="thirdparty.address">
                     <i class="fa fa-li fa-map-marker"></i>

src/Bundle/ChillThirdPartyBundle/Resources/views/Entity/thirdparty.html.twig

@@ -66,7 +66,7 @@
         <div class="item-col">
             {{ _self.label(thirdparty, options) }}
         </div>
-        <div class="item-col separator">
+        <div class="item-col">
             <ul class="list-content fa-ul">
                 {{ thirdparty.getAddress|chill_entity_render_box({
                     'render': 'list',