banner household, new responsive design

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

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

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 %}

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">
+                <div class="col-md-8 col-lg-9">
-                    <ul class="list-content fa-ul">
+                    <div class="household-members my-3 pe-md-5 pe-xxl-0 justify-content-md-end">
-                        <li>
+                        {%- set members = household.getCurrentMembersOrdered() -%}
-                            {% set address = household.currentAddress %}
+                        {%- if members|length > 0 -%}
-                            <i class="fa fa-li fa-map-marker"></i>
+                            <span class="current-members-explain" style="display: none;">
-                            {% if address is empty %}
+                                {{- 'household.Current household members'|trans }}
-                            <p class="chill-no-data-statement">{{ 'household.Household does not have any address currently'|trans }}</p>
+                                <i class="fa fa-fw fa-users" title="{{- 'household.Current household members'|trans }}"></i>
-                            {% else %}
+                            </span>
-                                {{ address|chill_entity_render_box({'multiline': false, 'with_valid_from': false}) }}
+
+                            {%- 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>
+                        {%- endif -%}
-                    </ul>
+                    </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">
+                <div class="contact col-md-12 ps-md-5 ps-xxl-0">
-                    {%- set members = household.getCurrentMembersOrdered() -%}
+                    {% set address = household.currentAddress %}
-                    {%- if members|length > 0 -%}
+                    {% if address is empty %}
-                        <span class="current-members-explain" style="display: none;">
+                        <span class="chill-no-data-statement">
-                            {{- 'household.Current household members'|trans }}
+                            {{ 'household.Household does not have any address currently'|trans }}
-                            <i class="fa fa-fw fa-users" title="{{- 'household.Current household members'|trans }}"></i>
                         </span>
-                        
+                    {% else %}
-                        {%- for m in members|slice(0, 5) -%}
+                        <span class=" d-block d-sm-inline-block">
-                            <span 
+                            {{ address|chill_entity_render_box({
-                                class="badge-member{%- if m.holder %} holder{% endif -%}{%- if m.position.ordering >= 2 %} child{% endif -%}"
+                                'render': 'inline', 'multiline': false, 'with_picto': true, 'with_delimiter': true
-                                title="{{ m.position.label.fr }}">
+                            }) }}
-                                {%- if m.holder %} 
+                        </span>
-                                <span class="badge bg-chill-light-gray text-chill-gray">
+                    {% endif %}
-                                    {{ '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 -%}
                 </div>
-                
+
             </div>
         </div>
     </div>

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">