Merge remote-tracking branch 'origin/fix-prototypage-details' into deploy/quick-fixes

src/Bundle/ChillActivityBundle/Resources/views/Activity/editAccompanyingCourse.html.twig

@@ -12,8 +12,10 @@
 {% block js %}
     {{ encore_entry_link_tags('async_upload') }}
     <script type="text/javascript">
-        chill.displayAlertWhenLeavingModifiedForm('form[name="{{ edit_form.vars.form.vars.name }}"]', 
+        window.addEventListener('DOMContentLoaded', function (e) {
+            chill.displayAlertWhenLeavingModifiedForm('form[name="{{ edit_form.vars.form.vars.name }}"]', 
             '{{ "You are going to leave a page with unsubmitted data. Are you sure you want to leave ?"|trans }}');
+        });
         window.activity = {{ activity_json|json_encode|raw }}; 
     </script>
     {{ encore_entry_script_tags('vue_activity') }}

src/Bundle/ChillActivityBundle/Resources/views/Activity/editPerson.html.twig

@@ -21,15 +21,17 @@
 {% block title  'Update activity'|trans %}
 
 {% block personcontent %}
-    {% include 'ChillActivityBundle:Activity:edit.html.twig' %}
     <div id="activity"></div> {# <=== vue component #}
+    {% include 'ChillActivityBundle:Activity:edit.html.twig' %}
 {% endblock %}
 
 {% block js %}
     {{ encore_entry_link_tags('async_upload') }}
     <script type="text/javascript">
-        chill.displayAlertWhenLeavingModifiedForm('form[name="{{ edit_form.vars.form.vars.name }}"]', 
+        window.addEventListener('DOMContentLoaded', function (e) {
+            chill.displayAlertWhenLeavingModifiedForm('form[name="{{ edit_form.vars.form.vars.name }}"]', 
             '{{ "You are going to leave a page with unsubmitted data. Are you sure you want to leave ?"|trans }}');
+        });
         window.activity = {{ activity_json|json_encode|raw }};
     </script>
     {{ encore_entry_script_tags('vue_activity') }}

src/Bundle/ChillActivityBundle/Resources/views/Activity/newAccompanyingCourse.html.twig

@@ -12,8 +12,10 @@
 {% block js %}
     {{ encore_entry_script_tags('async_upload') }}
     <script type="text/javascript">
-        chill.displayAlertWhenLeavingUnsubmittedForm('form[name="{{ form.vars.form.vars.name }}"]', 
+        window.addEventListener('DOMContentLoaded', function (e) {
+            chill.displayAlertWhenLeavingUnsubmittedForm('form[name="{{ form.vars.form.vars.name }}"]', 
             '{{ "You are going to leave a page with unsubmitted data. Are you sure you want to leave ?"|trans }}');
+        });
         window.activity = {{ activity_json|json_encode|raw }}; 
     </script>
     {{ encore_entry_script_tags('vue_activity') }}

src/Bundle/ChillActivityBundle/Resources/views/Activity/newPerson.html.twig

@@ -5,15 +5,17 @@
 {% block title 'Activity creation' |trans %}
 
 {% block personcontent %}
-    {% include 'ChillActivityBundle:Activity:new.html.twig' with {'context': 'person'} %}
     <div id="activity"></div> {# <=== vue component #}
+    {% include 'ChillActivityBundle:Activity:new.html.twig' with {'context': 'person'} %}
 {% endblock %}
 
 {% block js %}
     {{ encore_entry_link_tags('async_upload') }}
     <script type="text/javascript">
-        chill.displayAlertWhenLeavingUnsubmittedForm('form[name="{{ form.vars.form.vars.name }}"]', 
+        window.addEventListener('DOMContentLoaded', function (e) {
+            chill.displayAlertWhenLeavingUnsubmittedForm('form[name="{{ form.vars.form.vars.name }}"]', 
             '{{ "You are going to leave a page with unsubmitted data. Are you sure you want to leave ?"|trans }}');
+        });
         window.activity = {{ activity_json|json_encode|raw }};
     </script>
     {{ encore_entry_script_tags('vue_activity') }}

src/Bundle/ChillPersonBundle/Resources/public/sass/chillperson.scss

@@ -130,89 +130,85 @@ div#header-household-details {
    }
 }
 
-div.household__address,
-div.person__address {
-   div.row {
-      height: 100px;
-      width: 100%;
+/*
+*  ADDRESS HISTORY
+*  context person / household
+*/
+div.address-timeline.grid {
+   display: grid;
+   grid-template-rows: auto auto auto;
+   grid-template-columns: auto 120px auto;
+   
+   @media only screen and (max-width: 750px) {
+      grid-template-columns: auto 1em auto;
+   }
+   
+   div.top {
+      grid-column: 2;
+      text-align: center;
+      color: lightgrey;
+      margin-bottom: -20px;
+   }
+   div.col-a {
+      grid-column: 1;
+      text-align: right;
+   }
+   div.col-b, 
+   div.date {
+      grid-column: 2;
       position: relative;
-
-      & > div {
+      &:after {
          position: absolute;
-         display: table;
+         content: '';
+         top: 0; bottom: 0;
+         left: 50%;
+         margin: auto -5px;
+         width: 10px;
          height: 100%;
-         border: 1px dotted #c3c3c3;
+         background-color: lightgrey;
+         z-index: -5;
       }
+   }
+   div.col-c {
+      grid-column: 3;
+   }
 
-      div.household__address--date,
-      div.person__address--date {
-         width: 30%;
-         background-color: #c3c3c3;
-         height: 100%;
-
-         div.cell {
-            box-sizing: border-box;
-            position: relative;
-            height: 100%;
-            width: 100%;
-            margin-left: 50%;
-
-            div.pill {
-               position: absolute;
-               box-sizing: border-box;
-               width: 120px;
-               height: 40px;
-               bottom: -20px;
-               background-color: white;
-               padding: 10px;
-               border-radius: 30px;
-               left: -60px;
-               text-align: center;
-               z-index: 10;
-            }
-         }
+   div.col-b,
+   div.action,
+   div.content {
+      min-height: 30px;
+      padding: 1em;
+   }
+   div.content {
+      margin: 0.3em;
+      border: 1px dashed #00000045;
+      &.row1 { // current address
+         border: 1px solid #000;
+      }   
+      div.address {
+         font-variant: small-caps;
       }
-
-      div.household__address--content,
-      div.person__address--content {
-         width: 70%;
-         left: 30%;
-         text-align: left;
-         background-color: #ececec;
-         border: 1px solid #888;
-
-         div.cell {
-            display: table-cell;
-            padding: 5px 30px;
-            vertical-align: middle;
-
-            & > div {
-               display: flex;
-               justify-content: space-between;
-            }
-
-            i.dot::after,
-            i.dot::before {
-               position: absolute;
-               width: 20px;
-               height: 20px;
-               content: '';
-               border: 0;
-               background-color: white;
-               border-radius: 50%;
-               border: 5px solid #c3c3c3;
-               z-index: 10;
-               left: -15px;
-               bottom: -15px;
-            }
-         }
+   }   
+   div.date {
+      text-align: center;
+      background-color: lightgrey;
+      padding: 0.5em;
+      border-radius: 0.3em;
+   }
+   
+   div.span2 { grid-row: span 3; }
+   div.span3 { grid-row: span 5; }
+   div.span4 { grid-row: span 7; }
+   div.span5 { grid-row: span 9; }
+   
+   ul.record_actions {
+      margin: 0;
+   }
+   .fake {
+      &:after {
+         content: 'fake, just to test.. ';
+         color: lightgrey;
+         font-style: italic;
       }
    }
 }
-
-div.household__address-move {
-   div.household__address-move__create {
-      display: flex;
-      flex-direction: column;
-   }
-}

src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/App.vue

@@ -57,12 +57,6 @@ export default {
             position: relative;
             &:before {
                position: absolute;
-               /*
-               content: "\f192";  //circle-dot
-               content: "\f1dd";  //paragraph
-               content: "\f292";  //hashtag
-               content: "\f069";  //asterisk
-               */
                content: "\f142";  //ellipsis-v
                font-family: "ForkAwesome";
                color: #718596ab;
@@ -71,7 +65,7 @@ export default {
             }
             a[name^="section"] {
                position: absolute;
-               top: -3.5em;  // ref. stickNav
+               top: -3.5em;  // reference for stickNav
             }
          }
          padding: 0.8em 0em;
@@ -80,18 +74,6 @@ export default {
          border-radius: 5px;
          border-left: 1px dotted #718596ab;
          border-right: 1px dotted #718596ab;
-         /* debug components
-         position: relative; 
-         &:before { 
-            content: "vuejs component";
-            position: absolute;
-            left: 1.5em;
-            top: -0.9em;
-            background-color: white;
-            color: grey;
-            padding: 0 0.3em;
-         }
-         */
          dd { 
             margin-left: 1em; 
          }

src/Bundle/ChillPersonBundle/Resources/views/Address/list.html.twig

@@ -25,68 +25,84 @@
 {% block personcontent %}
 
     <h1>{{ 'Addresses\'history for %name%'|trans({ '%name%': person.firstName ~ ' ' ~ person.lastName } ) }}</h1>
-
-    <div class="person__address">
-
-        <div class="row">
-            <div class="person__address--date"></div>
-            <div class="person__address--content">
-                <div class="cell">
-                    <div>
-                        {% if person.addresses|length == 0 %}
-                        <span class="chill-no-data-statement">{{ 'No address given'|trans }}</span>
-                        {% endif %}
-                        <a class="sc-button bt-create"
-                        href="{{ path('chill_person_address_new', { 'person_id' : person.id } ) }}">
-                        {{ 'Add an address'|trans }}
-                        </a>
-                    </div>
-                </div>
-            </div>
-        </div>
-
+    
+    <div class="address-timeline grid">
+        
+        {% if person.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 person.addresses %}
-        <div class="row">
-            <div class="person__address--date">
-                <div class="cell">
-                    <div class="pill">
-                    {% if address.validFrom is not empty %}
-                    {{ address.validFrom|format_date('long') }}
-                    {% endif %}
-                    </div>
-                </div>
-            </div>
-            <div class="person__address--content">
-                <div class="cell">
-                    <i class="dot"></i>
-                    <div>
-                        {% if address.isNoAddress == true %}
+            
+            {# if person address #}
+            <div class="col-a 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>
-                            {% 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>
+                    {% 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 %}
                         </div>
                         {% endif %}
-                        <a href="{{ path('chill_person_address_edit', { 'person_id': person.id, 'address_id' : address.id } ) }}" class="sc-button bt-edit"></a>
-                    </div>
+                        
+                        {% 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 %}
+                        
+                    {% endif %}
+                        
+                    <ul class="record_actions">
+                        <li>
+                            <a href="{{ path('chill_person_address_edit', { 'person_id': person.id, 'address_id' : address.id } ) }}" class="sc-button bt-edit"></a>
+                        </li>
+                    </ul>
                 </div>
             </div>
-        </div>
+            {# endif #}
+            
+            <div class="col-b"></div>
+            
+            {# if household address #}{# 
+                <div class="col-c content rowXX">
+                    <div class="address">...</div>
+                </div>
+            #}{# endif #}
+            
+            <div class="date">
+                {% if address.validFrom is not empty %}
+                    {{ address.validFrom|format_date('long') }}
+                {% endif %}
+            </div>
+                
         {% endfor %}
+        
+        {# TEST HOUSEHOLD POSITION 
+        #}
+        <div class="col-b"></div>
+        <div class="col-c content fake">
+            <div class="address">
+                <div class="street">
+                    <span class="streetNumber">549, chemin De Sousa</span>
+                    <span class="streetNumber">, 45, boulevard Aurore Roux</span>
+                </div>
+                <div class="postCode">
+                    <span>10850</span> <span>Nanterre</span> <span class="country">(France)</span>
+                </div>
+                <ul class="record_actions"><li><a href="" class="sc-button bt-edit"></a></li></ul>
+            </div>
+        </div>
+        <div class="date">01 janvier 1970</div>
+        
     </div>
 
     <ul class="record_actions">
@@ -95,7 +111,12 @@
                     {{ 'Back to the person details'|trans }}
                 </a>
         </li>
+        <li>
+            <a class="sc-button bt-create"
+                href="{{ path('chill_person_address_new', { 'person_id' : person.id } ) }}">
+                {{ 'Add an address'|trans }}
+            </a>
+        </li>
     </ul>
 
-
 {% endblock personcontent %}

src/Bundle/ChillPersonBundle/Resources/views/Household/addresses.html.twig

@@ -4,67 +4,66 @@
 
 {% block content %}
 <h1>{{ block('title') }}</h1>
-<div class="household">
 
-    <div class="household__address">
+<div class="address-timeline grid">
 
-        <div class="row">
-            <div class="household__address--date"></div>
-            <div class="household__address--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>
+    {% 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 %}
 
-        {% for address in household.addresses %}
-        <div class="row">
-            <div class="household__address--date">
-                <div class="cell">
-                    <div class="pill">
-                    {% if address.validFrom is not empty %}
-                    {{ address.validFrom|format_date('long') }}
-                    {% endif %}
-                    </div>
-                </div>
-            </div>
-            <div class="household__address--content">
-                <div class="cell">
-                    <i class="dot"></i>
-                    <div>
-                        {% 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>
-                            {% 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>
+        <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 %}
+                    {% 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 %}
-                        <a href="{{ path('chill_person_household_address_edit', { 'household_id': household.id, 'address_id' : address.id } ) }}" class="sc-button bt-edit"></a>
                     </div>
-                </div>
-            </div>
-        </div>
-        {% endfor %}
-    </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 %}
 
+                {% 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 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 %}