From ab0863a275b3ed148726ba6dbacb17ad8c52d5ae Mon Sep 17 00:00:00 2001
From: Mathieu Jaumotte <mathieu.jaumotte@champs-libres.coop>
Date: Thu, 15 Jul 2021 15:21:33 +0200
Subject: [PATCH] new setting margins and breakpoints for person banner

---
 .../Resources/views/Person/banner.html.twig   | 69 +++++++++++--------
 1 file changed, 39 insertions(+), 30 deletions(-)

diff --git a/src/Bundle/ChillPersonBundle/Resources/views/Person/banner.html.twig b/src/Bundle/ChillPersonBundle/Resources/views/Person/banner.html.twig
index 7b9afa3a1..dd136014e 100644
--- a/src/Bundle/ChillPersonBundle/Resources/views/Person/banner.html.twig
+++ b/src/Bundle/ChillPersonBundle/Resources/views/Person/banner.html.twig
@@ -3,7 +3,7 @@
         <div class="container-xxl">
             <div class="row">
                 
-                <div class="col-sm">
+                <div class="col-md-6">
                     <h1>
                         {% set gender = 
                             (person.gender == "woman") ? 'female' : 
@@ -19,36 +19,45 @@
                     </h1>
                 </div>
                 
-                <div class="col-sm">
+                <div class="col-md-auto ps-4 ps-md-2">
+                    <ul class="list-content fa-ul my-2">
+                        {% if person.email %}     
+                        <li>
+                            <i class="fa fa-li fa-envelope-o"></i>
+                            <a href="{{ 'mailto:' ~ person.email }}" class="email" title="{{ 'Email'|trans }}">
+                                {{ person.email }}
+                            </a>
+                        </li>
+                        {% endif %}
+                        {% if person.mobilenumber %}
+                        <li>
+                            <i class="fa fa-li fa-mobile"></i>
+                            <a href="{{ 'tel:' ~ person.mobilenumber }}" class="phone mr-3" title="{{ 'Mobilenumber'|trans }}">
+                                {{ person.mobilenumber|chill_format_phonenumber }}</a>
+                        </li>
+                        {% elseif person.phonenumber %}
+                        <li>
+                            <i class="fa fa-li fa-phone"></i>
+                            <a href="{{ 'tel:' ~ person.phonenumber }}" class="phone mr-3" title="{{ 'Phonenumber'|trans }}">
+                                {{ person.phonenumber|chill_format_phonenumber }}</a>
+                        </li>
+                        {% endif %}
+                    </ul>
+                </div>
+                
+                <div class="col-md ps-4 ps-md-2">
                     <ul class="list-content fa-ul">
+                        {%- if person.currentHouseholdAddress is not empty -%}
                         <li>
-                            {%- if person.currentHouseholdAddress is not empty -%}
-                                <i class="fa fa-li fa-map-marker"></i>
-                                {{ person.currentHouseholdAddress|chill_entity_render_box({'multiline': false, 'with_valid_from': false}) }}
-                            {%- elseif person.lastAddress is not empty -%}
-                                <i class="fa fa-li fa-map-marker"></i>
-                                {{ person.lastAddress|chill_entity_render_box({'multiline': false, 'with_valid_from': false}) }}
-                            {%- endif -%}
+                            <i class="fa fa-li fa-map-marker"></i>
+                            {{ person.currentHouseholdAddress|chill_entity_render_box({'multiline': false, 'with_valid_from': false}) }}
                         </li>
+                        {%- elseif person.lastAddress is not empty -%}
                         <li>
-                            {% if person.mobilenumber %}
-                                <i class="fa fa-li fa-mobile"></i>
-                                <a href="{{ 'tel:' ~ person.mobilenumber }}" class="phone mr-3" title="{{ 'Mobilenumber'|trans }}">
-                                    {{ person.mobilenumber|chill_format_phonenumber }}</a>
-                            {% elseif person.phonenumber %}
-                                <i class="fa fa-li fa-phone"></i>
-                                <a href="{{ 'tel:' ~ person.phonenumber }}" class="phone mr-3" title="{{ 'Phonenumber'|trans }}">
-                                    {{ person.phonenumber|chill_format_phonenumber }}</a>
-                            {% endif %}
-                        </li>
-                        <li>
-                            {% if person.email %}     
-                                <i class="fa fa-li fa-envelope-o"></i>
-                                <a href="{{ 'mailto:' ~ person.email }}" class="email" title="{{ 'Email'|trans }}">
-                                    {{ person.email }}
-                                </a>
-                            {% endif %}
+                            <i class="fa fa-li fa-map-marker"></i>
+                            {{ person.lastAddress|chill_entity_render_box({'multiline': false, 'with_valid_from': false}) }}
                         </li>
+                        {%- endif -%}
                     </ul>
                 </div>
                 
@@ -57,9 +66,9 @@
     </div>
     <div id="header-person-details" class="header-details">
         <div class="container-xxl">
-            <div class="row justify-content-md-right">
+            <div class="row justify-content-between">
                 
-                <div class="col-sm-5" style="@media (min-width: 576px) { padding-left: 2em; }">
+                <div class="col-md-6 ps-4">
                     <span class="open_sansbold">
                         {{ 'Birthdate'|trans|upper  }} &nbsp; :
                     </span>
@@ -74,7 +83,7 @@
                 </div>
                 
                 {%- if chill_person.fields.nationality == 'visible' -%}
-                <div class="col-sm-auto">
+                <div class="col-md-auto ps-4 ps-md-2">
                     <span class="open_sansbold">
                         {{ 'Nationality'|trans|upper}} &nbsp; :
                     </span>
@@ -87,7 +96,7 @@
                 {%- endif -%}
                 
                 {%- if chill_person.fields.spoken_languages == 'visible' -%}
-                <div class="col-sm-3">
+                <div class="col-md ps-4 ps-md-2 text-md-end text-start pe-4">
                     <span class="open_sansbold">
                         {{ 'Center'|trans|upper}} &nbsp; :
                     </span>