Chill-project/chill-bundles
6
0
Fork 0
mirror of https://gitlab.com/Chill-Projet/chill-bundles.git synced 2025-06-12 13:24:25 +00:00
Code Issues Actions Projects Releases Wiki Activity

redesign timeline with css gridlayout

Browse Source
This commit is contained in:
Mathieu Jaumotte 2021-06-23 19:21:49 +02:00
parent 2cc1274ee0
commit 1ceabec400
3 changed files with 204 additions and 188 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

152
src/Bundle/ChillPersonBundle/Resources/public/sass/chillperson.scss
View File

@ -130,89 +130,87 @@ div#header-household-details {
} }
} }
div.household__address, /*
div.person__address { * ADDRESS HISTORY
div.row { * context person / household
height: 100px; */
width: 100%; 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; position: relative;
&:after {
& > div {
position: absolute; position: absolute;
display: table; content: '';
top: 0; bottom: 0;
left: 50%;
margin: auto -5px;
width: 10px;
height: 100%; height: 100%;
border: 1px dotted #c3c3c3; background-color: lightgrey;
z-index: -5;
} }
}
div.col-c {
grid-column: 3;
}
div.household__address--date, div.col-b,
div.person__address--date { div.action,
width: 30%; div.content {
background-color: #c3c3c3; min-height: 30px;
height: 100%; padding: 1em;
}
div.cell { div.content {
box-sizing: border-box; box-shadow:
position: relative; 1px 0 0 0 #000,
height: 100%; 0 1px 0 0 #000,
width: 100%; 1px 1px 0 0 #000,
margin-left: 50%; 1px 0 0 0 #000 inset,
0 1px 0 0 #000 inset;
div.pill {
position: absolute; div.address {
box-sizing: border-box; font-variant: small-caps;
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, div.date {
div.person__address--content { text-align: center;
width: 70%; background-color: lightgrey;
left: 30%; padding: 0.5em;
text-align: left; border-radius: 0.3em;
background-color: #ececec; }
border: 1px solid #888;
div.span2 { grid-row: span 3; }
div.cell { div.span3 { grid-row: span 5; }
display: table-cell; div.span4 { grid-row: span 7; }
padding: 5px 30px; div.span5 { grid-row: span 9; }
vertical-align: middle;
ul.record_actions {
& > div { margin: 0;
display: flex; }
justify-content: space-between; .fake {
} &:after {
content: 'fake, just to test.. ';
i.dot::after, color: lightgrey;
i.dot::before { font-style: italic;
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.household__address-move {
div.household__address-move__create {
display: flex;
flex-direction: column;
}
}

131
src/Bundle/ChillPersonBundle/Resources/views/Address/list.html.twig
View File

@ -25,68 +25,84 @@
{% block personcontent %} {% block personcontent %}
<h1>{{ 'Addresses\'history for %name%'|trans({ '%name%': person.firstName ~ ' ' ~ person.lastName } ) }}</h1> <h1>{{ 'Addresses\'history for %name%'|trans({ '%name%': person.firstName ~ ' ' ~ person.lastName } ) }}</h1>
<div class="person__address"> <div class="person timeline grid">
<div class="row"> {% if person.addresses|length == 0 %}
<div class="person__address--date"></div> <span class="chill-no-data-statement">{{ 'No address given'|trans }}</span>
<div class="person__address--content"> {% else %}
<div class="cell"> <div class="top"><i class="fa fa-caret-up fa-3x"></i></div>
<div> {% endif %}
{% 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>
{% for address in person.addresses %} {% for address in person.addresses %}
<div class="row">
<div class="person__address--date"> {# if person address #}
<div class="cell"> <div class="col-a content{{ ' row' ~ loop.index }}">
<div class="pill"> <div class="address">
{% if address.validFrom is not empty %} {% if address.isNoAddress == true %}
{{ 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 %}
<div class="chill_address_is_noaddress">{{ 'address.consider homeless'|trans }}</div> <div class="chill_address_is_noaddress">{{ 'address.consider homeless'|trans }}</div>
{% else %} {% else %}
<div>
{% if address.street is not empty %} {% if address.street is not empty %}
<div class="street"> <div class="street">
<i class="fa fa-fw fa-map-marker"></i> <span class="streetNumber">{{ address.street }}</span>
<span class="streetNumber">{{ address.street }}</span> {% if address.streetNumber is not empty %}
{% if address.streetNumber is not empty %} <span class="streetNumber">, {{ address.streetNumber }}</span>
<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>
{% endif %} {% 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> </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 %} {% 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> </div>
<ul class="record_actions"> <ul class="record_actions">
@ -95,7 +111,12 @@
{{ 'Back to the person details'|trans }} {{ 'Back to the person details'|trans }}
</a> </a>
</li> </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> </ul>
{% endblock personcontent %} {% endblock personcontent %}

109
src/Bundle/ChillPersonBundle/Resources/views/Household/addresses.html.twig
View File

@ -4,67 +4,64 @@
{% block content %} {% block content %}
<h1>{{ block('title') }}</h1> <h1>{{ block('title') }}</h1>
<div class="household">
<div class="household__address"> <div class="household address">
<div class="row"> <div class="row">
<div class="household__address--date"></div> <div class="date"></div>
<div class="household__address--content"> <div class="content">
<div class="cell"> <div class="cell">
<a class="sc-button bt-create" <a class="sc-button bt-create"
href="{{ chill_path_add_return_path('chill_person_household_address_move', { 'household_id': household.id }) }}"> href="{{ chill_path_add_return_path('chill_person_household_address_move', { 'household_id': household.id }) }}">
{{ 'Move household'|trans }} {{ 'Move household'|trans }}
</a> </a>
</div>
</div> </div>
</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>
</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 %} {% endblock %}