From 2cda6ceebf7013fb6300c994512336d719def277 Mon Sep 17 00:00:00 2001
From: Mathieu Jaumotte <mathieu.jaumotte@champs-libres.coop>
Date: Thu, 24 Jun 2021 15:43:02 +0200
Subject: [PATCH] improve history details

---
 .../Resources/public/sass/chillperson.scss    | 14 ++-
 .../Resources/views/Address/list.html.twig    |  4 +-
 .../views/Household/addresses.html.twig       | 94 ++++++++++---------
 3 files changed, 56 insertions(+), 56 deletions(-)

diff --git a/src/Bundle/ChillPersonBundle/Resources/public/sass/chillperson.scss b/src/Bundle/ChillPersonBundle/Resources/public/sass/chillperson.scss
index 862ddef91..55546c56e 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/sass/chillperson.scss
+++ b/src/Bundle/ChillPersonBundle/Resources/public/sass/chillperson.scss
@@ -134,7 +134,7 @@ div#header-household-details {
 *  ADDRESS HISTORY
 *  context person / household
 */
-div.timeline.grid {
+div.address-timeline.grid {
    display: grid;
    grid-template-rows: auto auto auto;
    grid-template-columns: auto 120px auto;
@@ -180,13 +180,11 @@ div.timeline.grid {
       padding: 1em;
    }
    div.content {
-      box-shadow: 
-         1px 0 0 0 #000, 
-         0 1px 0 0 #000, 
-         1px 1px 0 0 #000,
-         1px 0 0 0 #000 inset, 
-         0 1px 0 0 #000 inset;
-         
+      margin: 0.3em;
+      border: 1px dashed #00000045;
+      &.row1 { // current address
+         border: 1px solid #000;
+      }   
       div.address {
          font-variant: small-caps;
       }
diff --git a/src/Bundle/ChillPersonBundle/Resources/views/Address/list.html.twig b/src/Bundle/ChillPersonBundle/Resources/views/Address/list.html.twig
index 18fd85e86..638d38b36 100644
--- a/src/Bundle/ChillPersonBundle/Resources/views/Address/list.html.twig
+++ b/src/Bundle/ChillPersonBundle/Resources/views/Address/list.html.twig
@@ -26,7 +26,7 @@
 
     <h1>{{ 'Addresses\'history for %name%'|trans({ '%name%': person.firstName ~ ' ' ~ person.lastName } ) }}</h1>
     
-    <div class="person timeline grid">
+    <div class="address-timeline grid">
         
         {% if person.addresses|length == 0 %}
             <span class="chill-no-data-statement">{{ 'No address given'|trans }}</span>
@@ -74,7 +74,7 @@
             
             {# if household address #}{# 
                 <div class="col-c content rowXX">
-                    <div class="address"></div>
+                    <div class="address">...</div>
                 </div>
             #}{# endif #}
             
diff --git a/src/Bundle/ChillPersonBundle/Resources/views/Household/addresses.html.twig b/src/Bundle/ChillPersonBundle/Resources/views/Household/addresses.html.twig
index ee05b70f0..1e029c9a2 100644
--- a/src/Bundle/ChillPersonBundle/Resources/views/Household/addresses.html.twig
+++ b/src/Bundle/ChillPersonBundle/Resources/views/Household/addresses.html.twig
@@ -5,63 +5,65 @@
 {% block content %}
 <h1>{{ block('title') }}</h1>
 
-<div class="household address">
-
-    <div class="row">
-        <div class="date"></div>
-        <div class="content">
-            <div class="cell">
-                <a class="sc-button bt-create"
-                href="{{ chill_path_add_return_path('chill_person_household_address_move', { 'household_id': household.id }) }}">
-                {{ 'Move household'|trans }}
-                </a>
-            </div>
-        </div>
-    </div>
+<div class="address-timeline grid">
 
+    {% if household.addresses|length == 0 %}
+        <span class="chill-no-data-statement">{{ 'No address given'|trans }}</span>
+    {% else %}
+        <div class="top"><i class="fa fa-caret-up fa-3x"></i></div>
+    {% endif %}
+    
     {% for address in household.addresses %}
-    <div class="row">
-        <div class="date">
-            <div class="cell">
-                <div class="pill">
-                {% if address.validFrom is not empty %}
-                {{ address.validFrom|format_date('long') }}
-                {% endif %}
-                </div>
-            </div>
-        </div>
-        <div class="content">
-            <div class="cell">
-                <i class="dot"></i>
-                <div>
-                    {% if address.isNoAddress == true %}
+
+        <div class="col-b"></div>
+    
+        <div class="col-c content{{ ' row' ~ loop.index }}">
+            <div class="address">
+                {% if address.isNoAddress == true %}
                     <div class="chill_address_is_noaddress">{{ 'address.consider homeless'|trans }}</div>
-                    {% else %}
-                    <div>
-                        {% if address.street is not empty %}
-                        <div class="street">
-                            <i class="fa fa-fw fa-map-marker"></i>
-                            <span class="streetNumber">{{ address.street }}</span>
-                            {% if address.streetNumber is not empty %}
-                                <span class="streetNumber">, {{ address.streetNumber }}</span>
-                            {% endif %}
-                        </div>
+                {% else %}
+                    {% if address.street is not empty %}
+                    <div class="street">
+                        <span class="streetNumber">{{ address.street }}</span>
+                        {% if address.streetNumber is not empty %}
+                            <span class="streetNumber">, {{ address.streetNumber }}</span>
                         {% endif %}
-                        {% if address.postCode is not empty %}
+                    </div>
+                    {% endif %}
+                    {% if address.postCode is not empty %}
                         <div class="postCode">
                             <span>{{ address.postCode.code }}</span> <span>{{ address.postCode.name }}</span>
                             <span class="country">({{ address.postCode.country.name|localize_translatable_string }})</span>
                         </div>
-                        {% endif %}
-
-                    </div>
                     {% endif %}
-                    <a href="{{ path('chill_person_household_address_edit', { 'household_id': household.id, 'address_id' : address.id } ) }}" class="sc-button bt-edit"></a>
-                </div>
+
+                {% endif %}
             </div>
+            
+            <ul class="record_actions">
+                <li>
+                    <a href="{{ path('chill_person_household_address_edit', { 'household_id': household.id, 'address_id' : address.id } ) }}" class="sc-button bt-edit"></a>
+                </li>
+            </ul>
         </div>
-    </div>
-    
+        
+        <div class="date">
+            {% if address.validFrom is not empty %}
+                {{ address.validFrom|format_date('long') }}
+            {% endif %}
+        </div>
+        
     {% endfor %}
+    
 </div>
+
+<ul class="record_actions">
+    <li>
+        <a class="sc-button bt-create"
+        href="{{ chill_path_add_return_path('chill_person_household_address_move', { 'household_id': household.id }) }}">
+        {{ 'Move household'|trans }}
+        </a>
+    </li>
+</ul>
+
 {% endblock %}