From e8e4dbef1f95a39f586def839526d5faa584b35a Mon Sep 17 00:00:00 2001
From: Mathieu Jaumotte <mathieu.jaumotte@champs-libres.coop>
Date: Fri, 30 Jul 2021 15:39:22 +0200
Subject: [PATCH] banner household, new responsive design

---
 .../Resources/public/chill/chillmain.scss     | 18 +---
 .../Resources/public/chill/chillperson.scss   | 23 +++++
 .../Resources/views/Entity/person.html.twig   | 22 +++--
 .../views/Household/banner.html.twig          | 91 ++++++++++---------
 .../views/Person/banner_custom.html.twig      |  2 +-
 5 files changed, 86 insertions(+), 70 deletions(-)

diff --git a/src/Bundle/ChillMainBundle/Resources/public/chill/chillmain.scss b/src/Bundle/ChillMainBundle/Resources/public/chill/chillmain.scss
index 5c125f4c0..97c5e3cc9 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/chill/chillmain.scss
+++ b/src/Bundle/ChillMainBundle/Resources/public/chill/chillmain.scss
@@ -40,21 +40,5 @@ div.banner {
       &: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/public/chill/chillperson.scss b/src/Bundle/ChillPersonBundle/Resources/public/chill/chillperson.scss
index 7c14ffc0c..5b747da62 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/chill/chillperson.scss
+++ b/src/Bundle/ChillPersonBundle/Resources/public/chill/chillperson.scss
@@ -114,6 +114,7 @@ div#header-accompanying_course-details {
 div#header-household-name {
    background: none repeat scroll 0 0 #929d69; //#b97a7a;
    color: #FFF;
+
    h1 {
      margin: 0.4em 0;
    }
@@ -136,6 +137,28 @@ div#header-household-details {
    }
 }
 
+div.household-members {
+   display: flex;
+   flex-direction: row;
+   flex-wrap: wrap;
+   //justify-content: flex-end;
+   span.badge-member {
+      flex-shrink: 0; flex-grow: 0; flex-basis: auto;
+      border: 1px solid #ffffff3b;
+      color: #ffffff;
+      padding: 0.4em 0.8em;
+      margin-bottom: 0.2em;
+      margin-right: 0.3em;
+      border-radius: 8px;
+      &.holder {
+         order: -1;
+      }
+      &.child {
+         order: 2;
+      }
+   }
+}
+
 /*
 *  ADDRESS HISTORY
 *  context person / household
diff --git a/src/Bundle/ChillPersonBundle/Resources/views/Entity/person.html.twig b/src/Bundle/ChillPersonBundle/Resources/views/Entity/person.html.twig
index dfe703c01..cc79d1a82 100644
--- a/src/Bundle/ChillPersonBundle/Resources/views/Entity/person.html.twig
+++ b/src/Bundle/ChillPersonBundle/Resources/views/Entity/person.html.twig
@@ -88,26 +88,28 @@
     </div>
     <div class="item-col">
         <ul class="list-content fa-ul">
+            {{ person.getLastAddress|chill_entity_render_box({
+                'render': 'list',
+                'with_picto': true,
+                'multiline': false,
+                'with_valid_from': false
+            }) }}
             <li>
                 {% if person.mobilenumber %}
-                    <i class="fa fa-li fa-mobile"></i><a href="{{ 'tel:' ~ person.mobilenumber }}">{{ person.mobilenumber }}</a>
+                    <i class="fa fa-li fa-mobile"></i><a href="{{ 'tel:' ~ person.mobilenumber }}">
+                        {{ person.mobilenumber|chill_format_phonenumber }}
+                    </a>
                 {% else %}
                     <i class="fa fa-li fa-phone"></i>
                     {% if person.phonenumber %}
-                        <a href="{{ 'tel:' ~ person.phonenumber }}">{{ person.phonenumber }}</a>
+                        <a href="{{ 'tel:' ~ person.phonenumber }}">
+                            {{ person.phonenumber|chill_format_phonenumber }}
+                        </a>
                     {% else %}
                         <span class="chill-no-data-statement">{{ 'No data given'|trans }}</span>
                     {% endif %}
                 {% endif %}
             </li>
-            <li>
-                <i class="fa fa-li fa-map-marker"></i>
-                {%- if person.lastAddress is not empty -%}
-                    {{ person.getLastAddress|chill_entity_render_box({'with_valid_from': false}) }}
-                {%- else -%}
-                    <span class="chill-no-data-statement">{{ 'No address given'|trans }}</span>
-                {%- endif -%}
-            </li>
         </ul>
         <ul class="record_actions">
             {% if options['customButtons']['before'] is defined %}
diff --git a/src/Bundle/ChillPersonBundle/Resources/views/Household/banner.html.twig b/src/Bundle/ChillPersonBundle/Resources/views/Household/banner.html.twig
index c0ca3318e..18bc6f663 100644
--- a/src/Bundle/ChillPersonBundle/Resources/views/Household/banner.html.twig
+++ b/src/Bundle/ChillPersonBundle/Resources/views/Household/banner.html.twig
@@ -2,8 +2,8 @@
     <div id="header-household-name" class="header-name">
         <div class="container-xxl">
             <div class="row">
-            
-                <div class="col-sm-5">
+
+                <div class="col-md-4 col-lg-3 ps-md-5 ps-xxl-0">
                     <h1>
                         <i class="fa fa-home"></i>
                         {{ 'household.Household'|trans }}
@@ -11,56 +11,63 @@
                     </h1>
                 </div>
 
-                <div class="col-sm">
-                    <ul class="list-content fa-ul">
-                        <li>
-                            {% set address = household.currentAddress %}
-                            <i class="fa fa-li fa-map-marker"></i>
-                            {% if address is empty %}
-                            <p class="chill-no-data-statement">{{ 'household.Household does not have any address currently'|trans }}</p>
-                            {% else %}
-                                {{ address|chill_entity_render_box({'multiline': false, 'with_valid_from': false}) }}
+                <div class="col-md-8 col-lg-9">
+                    <div class="household-members my-3 pe-md-5 pe-xxl-0 justify-content-md-end">
+                        {%- set members = household.getCurrentMembersOrdered() -%}
+                        {%- if members|length > 0 -%}
+                            <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) -%}
+                                <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 bg-chill-light-gray text-chill-gray">
+                                        {{ 'household.holder'|trans }}
+                                    </span>
+                                    {% 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}) }}
+                                </span>
                             {% endif %}
-                        </li>
-                    </ul>
+                        {%- endif -%}
+                    </div>
                 </div>
-    
+
+
+
+
             </div>
         </div>
     </div>
     <div id="header-household-details" class="header-details">
         <div class="container-xxl">
             <div class="row justify-content-md-right">
-                
-                <div class="col-sm-10 members" id="banner-misc">
-                    {%- set members = household.getCurrentMembersOrdered() -%}
-                    {%- if members|length > 0 -%}
-                        <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>
+
+                <div class="contact col-md-12 ps-md-5 ps-xxl-0">
+                    {% set address = household.currentAddress %}
+                    {% if address is empty %}
+                        <span class="chill-no-data-statement">
+                            {{ 'household.Household does not have any address currently'|trans }}
                         </span>
-                        
-                        {%- for m in members|slice(0, 5) -%}
-                            <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 bg-chill-light-gray text-chill-gray">
-                                    {{ 'household.holder'|trans }}
-                                </span>
-                                {% 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}) }}
-                            </span>
-                        {% endif %} 
-                    {%- endif -%}
+                    {% else %}
+                        <span class=" d-block d-sm-inline-block">
+                            {{ address|chill_entity_render_box({
+                                'render': 'inline', 'multiline': false, 'with_picto': true, 'with_delimiter': true
+                            }) }}
+                        </span>
+                    {% endif %}
+
                 </div>
-                
+
             </div>
         </div>
     </div>
diff --git a/src/Bundle/ChillPersonBundle/Resources/views/Person/banner_custom.html.twig b/src/Bundle/ChillPersonBundle/Resources/views/Person/banner_custom.html.twig
index d61762a16..d01a53c22 100644
--- a/src/Bundle/ChillPersonBundle/Resources/views/Person/banner_custom.html.twig
+++ b/src/Bundle/ChillPersonBundle/Resources/views/Person/banner_custom.html.twig
@@ -1,7 +1,7 @@
 {#
     Overwrite this file to display client specific datas in custom area
 #}
-<div id="banner-person-custom" class="my-3 pe-md-5 pe-xxl-0">
+<div id="banner-person-custom" class="my-3 pe-md-5 pe-xxl-0 justify-content-end">
     <div class="text-md-end mb-1">
         {%- if chill_person.fields.nationality == 'visible' -%}
             <span class="open_sansbold">