redesign timeline with css gridlayout

This commit is contained in:
2021-06-23 19:21:49 +02:00
parent 2cc1274ee0
commit 1ceabec400
3 changed files with 204 additions and 188 deletions

View File

@@ -4,67 +4,64 @@
{% block content %}
<h1>{{ block('title') }}</h1>
<div class="household">
<div class="household__address">
<div class="household address">
<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 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>
{% 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>
{% 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>
</div>
{% 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="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>
{% 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>
{% endblock %}