From fc2a2da75fe5fa4e59077861a2f67f120de50730 Mon Sep 17 00:00:00 2001
From: Mathieu Jaumotte <mathieu.jaumotte@champs-libres.coop>
Date: Tue, 25 May 2021 15:36:07 +0200
Subject: [PATCH] page blocs design

---
 .../Resources/public/scss/chillmain.scss      |  13 ++-
 .../views/AccompanyingCourse/index.html.twig  | 101 +++++++++++-------
 2 files changed, 75 insertions(+), 39 deletions(-)

diff --git a/src/Bundle/ChillMainBundle/Resources/public/scss/chillmain.scss b/src/Bundle/ChillMainBundle/Resources/public/scss/chillmain.scss
index 145487a89..d24708fdb 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/scss/chillmain.scss
+++ b/src/Bundle/ChillMainBundle/Resources/public/scss/chillmain.scss
@@ -82,6 +82,7 @@ div.flex-bloc {
       border: 1px solid #000;
       margin: 0 1em 1em 0;
       padding: 1em;
+      padding-bottom: 0;
       flex-grow: 0;
       flex-shrink: 0;
       flex-basis: 30%;
@@ -94,15 +95,23 @@ div.flex-bloc {
       }
       .content-bloc {
          margin: 0;
-         font-size: 90%;
+         font-size: 80%;
       }
-      dl {
+      dd {
+         margin: 0.67em auto;
       }
       ul.record_actions {
          margin-top: auto;
          margin-bottom: 0;
       }
    }
+   @media only screen and (max-width: 1024px) {
+      div.item-bloc {
+         flex-grow: 0;
+         flex-shrink: 0;
+         flex-basis: 45%;
+      }
+   }
    @media only screen and (max-width: 768px) {
       flex-direction: column;
    }
diff --git a/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourse/index.html.twig b/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourse/index.html.twig
index 563f57b25..937fb2e0a 100644
--- a/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourse/index.html.twig
+++ b/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourse/index.html.twig
@@ -28,16 +28,18 @@
                 <dl class="content-bloc">
                         
                     <dd>
-                        {{ p.person.gender == 'woman' ? 'F' : 'M' }}
-                    </dd>
-                    <dd>
-                        {{ 'né le ' ~ p.person.birthdate|format_date('short') }}
+                        {% set born = (p.person.gender == 'woman') ? 'née': 'né' %}
+                        {% set gender = (p.person.gender == 'woman') ? 'fa-venus' : 
+                            (p.person.gender == 'man') ? 'fa-mars' : 'fa-neuter' %}
+                        {% set genderTitle = (p.person.gender == 'woman') ? 'femme' : 
+                            (p.person.gender == 'homme') ? 'fa-mars' : 'neutre' %}
+                        <i class="fa fa-fw {{ gender }}" title="{{ genderTitle }}"></i>{{ born ~ ' le ' ~ p.person.birthdate|format_date('short') }}
                     </dd>
                     <dd>
                         {% if p.person.mobilenumber %}
-                            <dt class="fa fa-fw fa-mobile"></dt>{{ p.person.mobilenumber }}
+                            <i class="fa fa-fw fa-mobile"></i>{{ p.person.mobilenumber }}
                         {% else %}
-                            <dt class="fa fa-fw fa-phone"></dt>
+                            <i class="fa fa-fw fa-phone"></i>
                             {% if p.person.phonenumber %}
                                 {{ p.person.phonenumber }}
                             {% else %}
@@ -68,62 +70,87 @@
 
 
     <h2>{{ 'Resources'|trans }}</h2>
-
+    <div class="flex-bloc right">
     {% for r in accompanyingCourse.resources %}
+        <div class="item-bloc">
         {% if r.person %}
+            
             <h5>
                 {{ r.person.firstname ~ ' ' ~ r.person.lastname }}
                 <span class="badge badge-pill badge-secondary">{{ 'Usager' }}</span>
             </h5>
-            {{ r.person.gender == 'woman' ? 'F' : 'M' }}<br>
-            {{ 'né le ' ~ r.person.birthdate|format_date('short') }}<br>
-
-            {% if r.person.mobilenumber %}
-                <i class="fa fa-fw fa-mobile"></i>{{ r.person.mobilenumber }}
-            {% else %}
-                <i class="fa fa-fw fa-phone"></i>
-                {% if r.person.phonenumber %}
-                    {{ r.person.phonenumber }}
-                {% else %}
-                    <span class="chill-no-data-statement">{{ 'No data given'|trans }}</span>
-                {% endif %}
-            {% endif %}<br>
-
-            {%- if r.person.lastAddress is not empty -%}
-                {{ address._render(r.person.lastAddress, {'has_no_address': true, 'with_valid_from': false, 'with_icon': true}) }}
-            {%- else -%}
-                <i class="fa fa-fw fa-map-marker"></i>
-                <span class="chill-no-data-statement">{{ 'No address given'|trans }}</span>
-            {%- endif -%}
+            <dl class="content-bloc">
+                    
+                <dd>
+                    {% set born = (r.person.gender == 'woman') ? 'née': 'né' %}
+                    {% set gender = (r.person.gender == 'woman') ? 'fa-venus' : 
+                        (r.person.gender == 'man') ? 'fa-mars' : 'fa-neuter' %}
+                    {% set genderTitle = (r.person.gender == 'woman') ? 'femme' : 
+                        (r.person.gender == 'mhomme') ? 'fa-mars' : 'neutre' %}
+                    <i class="fa fa-fw {{ gender }}" title="{{ genderTitle }}"></i>{{ born ~ ' le ' ~ r.person.birthdate|format_date('short') }}
+                </dd>
+                <dd>
+                    {% if r.person.mobilenumber %}
+                        <i class="fa fa-fw fa-mobile"></i>{{ r.person.mobilenumber }}
+                    {% else %}
+                        <i class="fa fa-fw fa-phone"></i>
+                        {% if r.person.phonenumber %}
+                            {{ r.person.phonenumber }}
+                        {% else %}
+                            <span class="chill-no-data-statement">{{ 'No data given'|trans }}</span>
+                        {% endif %}
+                    {% endif %}
+                </dd>
+                <dd>
+                    {%- if r.person.lastAddress is not empty -%}
+                        {{ address._render(r.person.lastAddress, {'has_no_address': true, 'with_valid_from': false, 'with_icon': true}) }}
+                    {%- else -%}
+                        <i class="fa fa-fw fa-map-marker"></i>
+                        <span class="chill-no-data-statement">{{ 'No address given'|trans }}</span>
+                    {%- endif -%}
+                </dd>
             
+            </dl>
             <ul class="record_actions">
                 <li>
                     <a href="{{ path('chill_person_view', { person_id: r.person.id }) }}" class="sc-button bt-show" target="_blank" title="Voir"></a>
                 </li>
             </ul>
+            
         {% endif %}
-        
         {% if r.thirdParty %}
+        
             <h5>
                 {{ r.thirdParty.name }}
                 <span class="badge badge-pill badge-secondary">{{ 'Tiers' }}</span>
             </h5>
-            <i class="fa fa-fw fa-phone"></i>{{ r.thirdParty.telephone|chill_print_or_message("thirdparty.No_phonenumber") }}<br>
-            <i class="fa fa-fw fa-envelope-o"></i>{{ r.thirdParty.email|chill_print_or_message("thirdparty.No_email") }}<br>
-            
-            {% if r.thirdParty.address == null %}
-                <i class="fa fa-fw fa-map-marker"></i><span class="chill-no-data-statement">{{ 'No address given'|trans }}</span>
-            {%  else %}
-                {{ address._render(r.thirdParty.address, {'with_valid_from': false, 'with_icon': true }) }}
-            {% endif %}
-            
+            <dl class="content-bloc">
+
+                <dd>
+                    <i class="fa fa-fw fa-phone"></i>{{ r.thirdParty.telephone|chill_print_or_message("thirdparty.No_phonenumber") }}
+                </dd>
+                <dd>
+                    <i class="fa fa-fw fa-envelope-o"></i>{{ r.thirdParty.email|chill_print_or_message("thirdparty.No_email") }}
+                </dd>
+                <dd>
+                    {% if r.thirdParty.address == null %}
+                        <i class="fa fa-fw fa-map-marker"></i><span class="chill-no-data-statement">{{ 'No address given'|trans }}</span>
+                    {%  else %}
+                        {{ address._render(r.thirdParty.address, {'with_valid_from': false, 'with_icon': true }) }}
+                    {% endif %}
+                </dd>
+                
+            </dl>
             <ul class="record_actions">
                 <li>
                     <a href="{{ path('chill_3party_3party_show', { thirdparty_id: r.thirdParty.id }) }}" class="sc-button bt-show" target="_blank" title="Voir"></a>
                 </li>
             </ul>
+            
         {% endif %}
+        </div>
     {% endfor %}
+    </div>
 
     <h2>{{ 'Social actions'|trans }}</h2>