From 133c0ac1ac05410a6de93d8866d21ba1096fae23 Mon Sep 17 00:00:00 2001 From: Mathieu Jaumotte Date: Wed, 23 Jun 2021 11:25:54 +0200 Subject: [PATCH 1/6] TOFIX temporary disable js alert that return an error: ## in JS console: Uncaught ReferenceError: chill is not defined http://localhost:8001/fr/activity/1808/edit?person_id=1453:317 --- .../Resources/views/Activity/editAccompanyingCourse.html.twig | 4 ++-- .../Resources/views/Activity/editPerson.html.twig | 4 ++-- .../Resources/views/Activity/newAccompanyingCourse.html.twig | 4 ++-- .../Resources/views/Activity/newPerson.html.twig | 4 ++-- 4 files changed, 8 insertions(+), 8 deletions(-) diff --git a/src/Bundle/ChillActivityBundle/Resources/views/Activity/editAccompanyingCourse.html.twig b/src/Bundle/ChillActivityBundle/Resources/views/Activity/editAccompanyingCourse.html.twig index aa64bc388..617e5fa78 100644 --- a/src/Bundle/ChillActivityBundle/Resources/views/Activity/editAccompanyingCourse.html.twig +++ b/src/Bundle/ChillActivityBundle/Resources/views/Activity/editAccompanyingCourse.html.twig @@ -12,8 +12,8 @@ {% block js %} {{ encore_entry_link_tags('async_upload') }} {{ encore_entry_script_tags('vue_activity') }} diff --git a/src/Bundle/ChillActivityBundle/Resources/views/Activity/editPerson.html.twig b/src/Bundle/ChillActivityBundle/Resources/views/Activity/editPerson.html.twig index d8d3df0bd..48f7e2252 100644 --- a/src/Bundle/ChillActivityBundle/Resources/views/Activity/editPerson.html.twig +++ b/src/Bundle/ChillActivityBundle/Resources/views/Activity/editPerson.html.twig @@ -28,8 +28,8 @@ {% block js %} {{ encore_entry_link_tags('async_upload') }} {{ encore_entry_script_tags('vue_activity') }} diff --git a/src/Bundle/ChillActivityBundle/Resources/views/Activity/newAccompanyingCourse.html.twig b/src/Bundle/ChillActivityBundle/Resources/views/Activity/newAccompanyingCourse.html.twig index f5e3a8629..75e3fcc81 100644 --- a/src/Bundle/ChillActivityBundle/Resources/views/Activity/newAccompanyingCourse.html.twig +++ b/src/Bundle/ChillActivityBundle/Resources/views/Activity/newAccompanyingCourse.html.twig @@ -12,8 +12,8 @@ {% block js %} {{ encore_entry_script_tags('async_upload') }} {{ encore_entry_script_tags('vue_activity') }} diff --git a/src/Bundle/ChillActivityBundle/Resources/views/Activity/newPerson.html.twig b/src/Bundle/ChillActivityBundle/Resources/views/Activity/newPerson.html.twig index 67eebdea0..bd738a4de 100644 --- a/src/Bundle/ChillActivityBundle/Resources/views/Activity/newPerson.html.twig +++ b/src/Bundle/ChillActivityBundle/Resources/views/Activity/newPerson.html.twig @@ -12,8 +12,8 @@ {% block js %} {{ encore_entry_link_tags('async_upload') }} {{ encore_entry_script_tags('vue_activity') }} From 80c2bd285f66ebe1e0378571aba4e09cb395c8ce Mon Sep 17 00:00:00 2001 From: Mathieu Jaumotte Date: Wed, 23 Jun 2021 11:50:09 +0200 Subject: [PATCH 2/6] vue component html anchor place --- .../Resources/views/Activity/editPerson.html.twig | 2 +- .../Resources/views/Activity/newPerson.html.twig | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/Bundle/ChillActivityBundle/Resources/views/Activity/editPerson.html.twig b/src/Bundle/ChillActivityBundle/Resources/views/Activity/editPerson.html.twig index 48f7e2252..5f39db090 100644 --- a/src/Bundle/ChillActivityBundle/Resources/views/Activity/editPerson.html.twig +++ b/src/Bundle/ChillActivityBundle/Resources/views/Activity/editPerson.html.twig @@ -21,8 +21,8 @@ {% block title 'Update activity'|trans %} {% block personcontent %} - {% include 'ChillActivityBundle:Activity:edit.html.twig' %}
{# <=== vue component #} + {% include 'ChillActivityBundle:Activity:edit.html.twig' %} {% endblock %} {% block js %} diff --git a/src/Bundle/ChillActivityBundle/Resources/views/Activity/newPerson.html.twig b/src/Bundle/ChillActivityBundle/Resources/views/Activity/newPerson.html.twig index bd738a4de..4205bdbe8 100644 --- a/src/Bundle/ChillActivityBundle/Resources/views/Activity/newPerson.html.twig +++ b/src/Bundle/ChillActivityBundle/Resources/views/Activity/newPerson.html.twig @@ -5,8 +5,8 @@ {% block title 'Activity creation' |trans %} {% block personcontent %} - {% include 'ChillActivityBundle:Activity:new.html.twig' with {'context': 'person'} %}
{# <=== vue component #} + {% include 'ChillActivityBundle:Activity:new.html.twig' with {'context': 'person'} %} {% endblock %} {% block js %} From 193e7b4c7eb7bcd51584783d77bc7a70e04f3d91 Mon Sep 17 00:00:00 2001 From: Mathieu Jaumotte Date: Wed, 23 Jun 2021 13:20:50 +0200 Subject: [PATCH 3/6] cleaning --- .../public/vuejs/AccompanyingCourse/App.vue | 20 +------------------ 1 file changed, 1 insertion(+), 19 deletions(-) diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/App.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/App.vue index 8dd66d0f2..617c0e4dd 100644 --- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/App.vue +++ b/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; } From 2cc1274ee014406ebb521202773ed2c71fadc8e4 Mon Sep 17 00:00:00 2001 From: Mathieu Jaumotte Date: Wed, 23 Jun 2021 18:04:06 +0200 Subject: [PATCH 4/6] fix js alert with dom event listener --- .../views/Activity/editAccompanyingCourse.html.twig | 6 ++++-- .../Resources/views/Activity/editPerson.html.twig | 6 ++++-- .../views/Activity/newAccompanyingCourse.html.twig | 6 ++++-- .../Resources/views/Activity/newPerson.html.twig | 6 ++++-- 4 files changed, 16 insertions(+), 8 deletions(-) diff --git a/src/Bundle/ChillActivityBundle/Resources/views/Activity/editAccompanyingCourse.html.twig b/src/Bundle/ChillActivityBundle/Resources/views/Activity/editAccompanyingCourse.html.twig index 617e5fa78..a40b1d721 100644 --- a/src/Bundle/ChillActivityBundle/Resources/views/Activity/editAccompanyingCourse.html.twig +++ b/src/Bundle/ChillActivityBundle/Resources/views/Activity/editAccompanyingCourse.html.twig @@ -12,8 +12,10 @@ {% block js %} {{ encore_entry_link_tags('async_upload') }} {{ encore_entry_script_tags('vue_activity') }} diff --git a/src/Bundle/ChillActivityBundle/Resources/views/Activity/editPerson.html.twig b/src/Bundle/ChillActivityBundle/Resources/views/Activity/editPerson.html.twig index 5f39db090..1022bdd5b 100644 --- a/src/Bundle/ChillActivityBundle/Resources/views/Activity/editPerson.html.twig +++ b/src/Bundle/ChillActivityBundle/Resources/views/Activity/editPerson.html.twig @@ -28,8 +28,10 @@ {% block js %} {{ encore_entry_link_tags('async_upload') }} {{ encore_entry_script_tags('vue_activity') }} diff --git a/src/Bundle/ChillActivityBundle/Resources/views/Activity/newAccompanyingCourse.html.twig b/src/Bundle/ChillActivityBundle/Resources/views/Activity/newAccompanyingCourse.html.twig index 75e3fcc81..bcf386ffd 100644 --- a/src/Bundle/ChillActivityBundle/Resources/views/Activity/newAccompanyingCourse.html.twig +++ b/src/Bundle/ChillActivityBundle/Resources/views/Activity/newAccompanyingCourse.html.twig @@ -12,8 +12,10 @@ {% block js %} {{ encore_entry_script_tags('async_upload') }} {{ encore_entry_script_tags('vue_activity') }} diff --git a/src/Bundle/ChillActivityBundle/Resources/views/Activity/newPerson.html.twig b/src/Bundle/ChillActivityBundle/Resources/views/Activity/newPerson.html.twig index 4205bdbe8..6b1613a90 100644 --- a/src/Bundle/ChillActivityBundle/Resources/views/Activity/newPerson.html.twig +++ b/src/Bundle/ChillActivityBundle/Resources/views/Activity/newPerson.html.twig @@ -12,8 +12,10 @@ {% block js %} {{ encore_entry_link_tags('async_upload') }} {{ encore_entry_script_tags('vue_activity') }} From 1ceabec400f7fd68f2063c274cc387de6b15ba31 Mon Sep 17 00:00:00 2001 From: Mathieu Jaumotte Date: Wed, 23 Jun 2021 19:21:49 +0200 Subject: [PATCH 5/6] redesign timeline with css gridlayout --- .../Resources/public/sass/chillperson.scss | 152 +++++++++--------- .../Resources/views/Address/list.html.twig | 131 ++++++++------- .../views/Household/addresses.html.twig | 109 ++++++------- 3 files changed, 204 insertions(+), 188 deletions(-) diff --git a/src/Bundle/ChillPersonBundle/Resources/public/sass/chillperson.scss b/src/Bundle/ChillPersonBundle/Resources/public/sass/chillperson.scss index 4876f248e..862ddef91 100644 --- a/src/Bundle/ChillPersonBundle/Resources/public/sass/chillperson.scss +++ b/src/Bundle/ChillPersonBundle/Resources/public/sass/chillperson.scss @@ -130,89 +130,87 @@ div#header-household-details { } } -div.household__address, -div.person__address { - div.row { - height: 100px; - width: 100%; +/* +* ADDRESS HISTORY +* context person / household +*/ +div.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 { + 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; + + 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; - } -} diff --git a/src/Bundle/ChillPersonBundle/Resources/views/Address/list.html.twig b/src/Bundle/ChillPersonBundle/Resources/views/Address/list.html.twig index 698f1e9d0..18fd85e86 100644 --- a/src/Bundle/ChillPersonBundle/Resources/views/Address/list.html.twig +++ b/src/Bundle/ChillPersonBundle/Resources/views/Address/list.html.twig @@ -25,68 +25,84 @@ {% block personcontent %}

{{ 'Addresses\'history for %name%'|trans({ '%name%': person.firstName ~ ' ' ~ person.lastName } ) }}

- -
- -
-
-
-
-
- {% if person.addresses|length == 0 %} - {{ 'No address given'|trans }} - {% endif %} - - {{ 'Add an address'|trans }} - -
-
-
-
- + +
+ + {% if person.addresses|length == 0 %} + {{ 'No address given'|trans }} + {% else %} +
+ {% endif %} + {% for address in person.addresses %} -
-
-
-
- {% if address.validFrom is not empty %} - {{ address.validFrom|format_date('long') }} - {% endif %} -
-
-
-
-
- -
- {% if address.isNoAddress == true %} + + {# if person address #} +
+
+ {% if address.isNoAddress == true %}
{{ 'address.consider homeless'|trans }}
- {% else %} -
- {% if address.street is not empty %} -
- - {{ address.street }} - {% if address.streetNumber is not empty %} - , {{ address.streetNumber }} - {% endif %} -
- {% endif %} - {% if address.postCode is not empty %} -
- {{ address.postCode.code }} {{ address.postCode.name }} - ({{ address.postCode.country.name|localize_translatable_string }}) -
+ {% else %} + + {% if address.street is not empty %} +
+ {{ address.street }} + {% if address.streetNumber is not empty %} + , {{ address.streetNumber }} {% endif %}
{% endif %} - -
+ + {% if address.postCode is not empty %} +
+ {{ address.postCode.code }} {{ address.postCode.name }} + ({{ address.postCode.country.name|localize_translatable_string }}) +
+ {% endif %} + + {% endif %} + +
    +
  • + +
  • +
-
+ {# endif #} + +
+ + {# if household address #}{# +
+
+
+ #}{# endif #} + +
+ {% if address.validFrom is not empty %} + {{ address.validFrom|format_date('long') }} + {% endif %} +
+ {% endfor %} + + {# TEST HOUSEHOLD POSITION + #} +
+
+
+
+ 549, chemin De Sousa + , 45, boulevard Aurore Roux +
+
+ 10850 Nanterre (France) +
+
+
+
+
01 janvier 1970
+
- {% endblock personcontent %} diff --git a/src/Bundle/ChillPersonBundle/Resources/views/Household/addresses.html.twig b/src/Bundle/ChillPersonBundle/Resources/views/Household/addresses.html.twig index fcc21765b..ee05b70f0 100644 --- a/src/Bundle/ChillPersonBundle/Resources/views/Household/addresses.html.twig +++ b/src/Bundle/ChillPersonBundle/Resources/views/Household/addresses.html.twig @@ -4,67 +4,64 @@ {% block content %}

{{ block('title') }}

-
-
+
-
-
-
- +
+
+ - - {% for address in household.addresses %} -
-
-
-
- {% if address.validFrom is not empty %} - {{ address.validFrom|format_date('long') }} - {% endif %} -
-
-
-
-
- -
- {% if address.isNoAddress == true %} -
{{ 'address.consider homeless'|trans }}
- {% else %} -
- {% if address.street is not empty %} -
- - {{ address.street }} - {% if address.streetNumber is not empty %} - , {{ address.streetNumber }} - {% endif %} -
- {% endif %} - {% if address.postCode is not empty %} -
- {{ address.postCode.code }} {{ address.postCode.name }} - ({{ address.postCode.country.name|localize_translatable_string }}) -
- {% endif %} - -
- {% endif %} - -
-
-
-
- {% endfor %}
-
+ {% for address in household.addresses %} +
+
+
+
+ {% if address.validFrom is not empty %} + {{ address.validFrom|format_date('long') }} + {% endif %} +
+
+
+
+
+ +
+ {% if address.isNoAddress == true %} +
{{ 'address.consider homeless'|trans }}
+ {% else %} +
+ {% if address.street is not empty %} +
+ + {{ address.street }} + {% if address.streetNumber is not empty %} + , {{ address.streetNumber }} + {% endif %} +
+ {% endif %} + {% if address.postCode is not empty %} +
+ {{ address.postCode.code }} {{ address.postCode.name }} + ({{ address.postCode.country.name|localize_translatable_string }}) +
+ {% endif %} +
+ {% endif %} + +
+
+
+
+ + {% endfor %} +
{% endblock %} From 2cda6ceebf7013fb6300c994512336d719def277 Mon Sep 17 00:00:00 2001 From: Mathieu Jaumotte Date: Thu, 24 Jun 2021 15:43:02 +0200 Subject: [PATCH 6/6] 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 @@

{{ 'Addresses\'history for %name%'|trans({ '%name%': person.firstName ~ ' ' ~ person.lastName } ) }}

-
+
{% if person.addresses|length == 0 %} {{ 'No address given'|trans }} @@ -74,7 +74,7 @@ {# if household address #}{#
-
+
...
#}{# 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 %}

{{ block('title') }}

-
- - +
+ {% if household.addresses|length == 0 %} + {{ 'No address given'|trans }} + {% else %} +
+ {% endif %} + {% for address in household.addresses %} -
-
-
-
- {% if address.validFrom is not empty %} - {{ address.validFrom|format_date('long') }} - {% endif %} -
-
-
-
-
- -
- {% if address.isNoAddress == true %} + +
+ +
+
+ {% if address.isNoAddress == true %}
{{ 'address.consider homeless'|trans }}
- {% else %} -
- {% if address.street is not empty %} -
- - {{ address.street }} - {% if address.streetNumber is not empty %} - , {{ address.streetNumber }} - {% endif %} -
+ {% else %} + {% if address.street is not empty %} +
+ {{ address.street }} + {% if address.streetNumber is not empty %} + , {{ address.streetNumber }} {% endif %} - {% if address.postCode is not empty %} +
+ {% endif %} + {% if address.postCode is not empty %}
{{ address.postCode.code }} {{ address.postCode.name }} ({{ address.postCode.country.name|localize_translatable_string }})
- {% endif %} - -
{% endif %} - -
+ + {% endif %}
+ +
    +
  • + +
  • +
-
- + +
+ {% if address.validFrom is not empty %} + {{ address.validFrom|format_date('long') }} + {% endif %} +
+ {% endfor %} +
+ + + {% endblock %}