From f0232228a33b5b86dd66d403d85052abd63fa264 Mon Sep 17 00:00:00 2001
From: Mathieu Jaumotte <mathieu.jaumotte@champs-libres.coop>
Date: Thu, 1 Jul 2021 17:42:52 +0200
Subject: [PATCH] improve details row for household banner

---
 .../Resources/public/scss/chillmain.scss      | 19 +++++++++++++++-
 .../views/Household/banner.html.twig          | 22 ++++++++++++-------
 2 files changed, 32 insertions(+), 9 deletions(-)

diff --git a/src/Bundle/ChillMainBundle/Resources/public/scss/chillmain.scss b/src/Bundle/ChillMainBundle/Resources/public/scss/chillmain.scss
index 44b0190d0..41a15522f 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/scss/chillmain.scss
+++ b/src/Bundle/ChillMainBundle/Resources/public/scss/chillmain.scss
@@ -58,13 +58,30 @@ div.banner {
       color: white;
    }
    ul.list-content {
-      margin: 0 auto;
+      //margin: 0 auto;
    }
    span.age {
       margin-left: 0.5em;
       &:before { content: '('; }
       &:after { content: ')'; }
    }
+   div.members {
+      display: flex;
+      flex-direction: row;
+      span.badge-member {
+         border: 1px solid #ffffff3b;
+         color: #ffffff;
+         padding: 0.4em 0.8em;
+         margin-right: 0.3em;
+         border-radius: 8px;
+         &.holder {
+            order: -1;
+         }
+         &.child {
+            order: 2;
+         }
+      }
+   }
 }
 
 /*
diff --git a/src/Bundle/ChillPersonBundle/Resources/views/Household/banner.html.twig b/src/Bundle/ChillPersonBundle/Resources/views/Household/banner.html.twig
index 6e880ccd6..ba06b47a5 100644
--- a/src/Bundle/ChillPersonBundle/Resources/views/Household/banner.html.twig
+++ b/src/Bundle/ChillPersonBundle/Resources/views/Household/banner.html.twig
@@ -29,21 +29,27 @@
     <div class="grid-12 parent" id="header-household-details" >
         <div class="grid-10 push-1 grid-mobile-12 grid-tablet-12 push-mobile-0 push-tablet-0 parent">
             
-            <div id="banner-misc">
+            <div id="banner-misc" class="members">
                 {%- set members = household.getCurrentMembersOrdered() -%}
                 {%- if members|length > 0 -%}
-                    <span class="current-members-explain">
-                        {{- 'household.Current household members'|trans }}:
+                    <span class="current-members-explain" style="display: none;">
+                        {{- 'household.Current household members'|trans }}
+                        <i class="fa fa-fw fa-users" title="{{- 'household.Current household members'|trans }}"></i>
                     </span>
+                    
                     {%- for m in members|slice(0, 5) -%}
-                        {{- m.person|chill_entity_render_box({'addLink': false}) -}}
-                        {%- if m.holder %} 
-                            <span class="badge badge-primary">
+                        <span 
+                            class="badge-member{%- if m.holder %} holder{% endif -%}{%- if m.position.ordering >= 2 %} child{% endif -%}"
+                            title="{{ m.position.label.fr }}">
+                            {%- if m.holder %} 
+                            <span class="badge badge-secondary">
                                 {{ 'household.holder'|trans }}
                             </span>
-                        {% endif -%}
-                        {%- if false == loop.last -%}, {% endif -%}
+                            {% endif -%}
+                            {{- m.person|chill_entity_render_box({'addLink': false}) -}}
+                        </span>
                     {%- endfor -%}
+                    
                     {% if members|length > 5 %}
                         <span class="current-members-more">
                             {{ 'household.and x other persons'|trans({'x': members|length-5}) }}