household address: address history (twig + css)

This commit is contained in:
nobohan 2021-06-08 11:35:33 +02:00
parent 66b54bad31
commit 7d13bc7cfe
2 changed files with 116 additions and 12 deletions

View File

@ -261,3 +261,72 @@ div.address_form {
/*
* HOUSEHOLD
*/
div.household {
div.household__address {
div.row {
height: 100px;
width: 100%;
position: relative;
& > div {
position: absolute;
display: table;
height: 100%;
border: 1px dotted #c3c3c3;
}
div.household__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.household__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;
i.dot::before, i.dot::after {
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;
}
}
}
}
}
}

View File

@ -4,22 +4,57 @@
{% block content %} {% block content %}
<h1>{{ block('title') }}</h1> <h1>{{ block('title') }}</h1>
<div class="household">
<p>Household with id {{ household.id }}</p> <p>Household with id {{ household.id }}</p>
<div> <div class="household__address">
{{ household.addresses|length }}
{% for address in household.addresses %} {% for address in household.addresses %}
<div> <div class="row">
{{ address.id }} <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>
{% 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">
{{ address.id }}
<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 %}
{% endif %}
</div>
</div>
</div>
{% endfor %}
</div> </div>
{% endfor %}
<a class="sc-button bt-update"
href="{{ chill_path_add_return_path('chill_person_household_address_move', { 'household_id': household.id }) }}">
{{ 'Move household'|trans }}
</a>
</div> </div>
<a class="sc-button bt-update"
href="{{ chill_path_add_return_path('chill_person_household_address_move', { 'household_id': household.id }) }}">
{{ 'Move household'|trans }}
</a>
{% endblock %} {% endblock %}