Styling view page

This commit is contained in:
2022-02-23 17:16:26 +01:00
parent 576f46f845
commit 185d1dbf49
5 changed files with 124 additions and 65 deletions

View File

@@ -7,35 +7,44 @@
{% block title title %}
{% block personcontent %}
<h1>{{ title }}</h1>
<div class="budget-show">
<h1>{{ title }}</h1>
<dl class="chill_view_data">
<dt>{{ 'Type'|trans }}</dt>
<dd>{{ element.type|budget_element_type_display('charge') }}</dd>
<dt>{{ 'Amount'|trans }}</dt>
<dd>{{ element.amount|format_currency('EUR') }}</dd>
<dt>{{ 'Validity period'|trans }}</dt>
<dd>
{% if element.endDate is not null %}
{{ 'Valid since %startDate% until %endDate%'|trans( { '%startDate%': element.startDate|format_date('long'), '%endDate%': familyMember.endDate|format_date('long') } ) }}
{% else %}
{{ 'Valid since %startDate%'|trans( { '%startDate%': element.startDate|format_date('long') } ) }}
{% endif %}
</dd>
<dt>{{ 'Comment'|trans }}</dt>
<dd>
{%- if element.comment is not empty -%}
<blockquote class="chill-user-quote">
{{ element.comment }}
</blockquote>
{%- else -%}
<span class="chill-no-data-statement">{{ 'Not given'|trans }}</span>
{%- endif -%}
</dd>
</dl>
<div class="flex-table">
<div class="item-bloc">
<div class="item-row">
<h2 class="badge-title">
<span class="title_label title_label_charge"></span>
<span class="title_action title_action_charge">{{ element.type|budget_element_type_display('charge') }}</span>
</h2>
</div>
<div class="item-row separator">
<dl class="chill_view_data">
<dt>{{ 'Amount'|trans }}</dt>
<dd>{{ element.amount|format_currency('EUR') }}</dd>
<dt>{{ 'Validity period'|trans }}</dt>
<dd>
{% if element.endDate is not null %}
{{ 'Valid since %startDate% until %endDate%'|trans( { '%startDate%': element.startDate|format_date('long'), '%endDate%': familyMember.endDate|format_date('long') } ) }}
{% else %}
{{ 'Valid since %startDate%'|trans( { '%startDate%': element.startDate|format_date('long') } ) }}
{% endif %}
</dd>
<dt>{{ 'Comment'|trans }}</dt>
<dd>
{%- if element.comment is not empty -%}
<blockquote class="chill-user-quote">
{{ element.comment }}
</blockquote>
{%- else -%}
<span class="chill-no-data-statement">{{ 'Not given'|trans }}</span>
{%- endif -%}
</dd>
</dl>
</div>
</div>
</div>
</div>
<ul class="record_actions sticky-form-buttons">
<li class="cancel">

View File

@@ -9,8 +9,6 @@
.subtitle {
margin-top: 1rem;
margin-bottom: 1rem;
background-color: #334d5c;
color: white;
padding: 1rem;
}
.family-title {
@@ -20,10 +18,10 @@
color: white;
}
.budget-table th.charge {
background-color: #df4949;
background-color: #e03851;
}
.budget-table th.resource {
background-color: #43b29d;
background-color: #5ba1c1;
}
.budget-table th, td {
padding: 10px;
@@ -103,9 +101,9 @@
<td class="column-small">{{ f.amount|format_currency('EUR') }}</td>
<td class="column-small">
{% if f.endDate is not null %}
{{ 'Valid since %startDate% until %endDate%'|trans( { '%startDate%': f.startDate|format_date('long'), '%endDate%': f.endDate|format_date('long') } ) }}
{{ 'Valid since %startDate% until %endDate%'|trans( { '%startDate%': f.startDate|format_date('short'), '%endDate%': f.endDate|format_date('short') } ) }}
{% else %}
{{ 'Valid since %startDate%'|trans( { '%startDate%': f.startDate|format_date('long') } ) }}
{{ 'Valid since %startDate%'|trans( { '%startDate%': f.startDate|format_date('short') } ) }}
{% endif %}
</td>
<td class="column-small">

View File

@@ -7,46 +7,55 @@
{% block title title %}
{% block personcontent %}
<h1>{{ title }}</h1>
<div class="budget-show">
<h1>{{ title }}</h1>
<dl class="chill_view_data">
<dt>{{ 'Type'|trans }}</dt>
<dd>{{ element.type|budget_element_type_display('resource') }}</dd>
<dt>{{ 'Amount'|trans }}</dt>
<dd>{{ element.amount|format_currency('EUR') }}</dd>
<dt>{{ 'Validity period'|trans }}</dt>
<dd>
{% if element.endDate is not null %}
{{ 'Valid since %startDate% until %endDate%'|trans( { '%startDate%': element.startDate|format_date('long'), '%endDate%': familyMember.endDate|format_date('long') } ) }}
{% else %}
{{ 'Valid since %startDate%'|trans( { '%startDate%': element.startDate|format_date('long') } ) }}
{% endif %}
</dd>
<dt>{{ 'Comment'|trans }}</dt>
<dd>
{%- if element.comment is not empty -%}
<blockquote class="chill-user-quote">
{{ element.comment }}
</blockquote>
{%- else -%}
<span class="chill-no-data-statement">{{ 'Not given'|trans }}</span>
{%- endif -%}
</dd>
</dl>
<div class="flex-table">
<div class="item-bloc">
<div class="item-row">
<h2 class="badge-title">
<span class="title_label title_label_resource"></span>
<span class="title_action title_action_resource">{{ element.type|budget_element_type_display('resource') }}</span>
</h2>
</div>
<div class="item-row separator">
<dl class="chill_view_data">
<dt class="inline">{{ 'Amount'|trans }}</dt>
<dd>{{ element.amount|format_currency('EUR') }}</dd>
<dt class="inline">{{ 'Validity period'|trans }}</dt>
<dd>
{% if element.endDate is not null %}
{{ 'Valid since %startDate% until %endDate%'|trans( { '%startDate%': element.startDate|format_date('long'), '%endDate%': familyMember.endDate|format_date('long') } ) }}
{% else %}
{{ 'Valid since %startDate%'|trans( { '%startDate%': element.startDate|format_date('long') } ) }}
{% endif %}
</dd>
<dt class="inline">{{ 'Comment'|trans }}</dt>
<dd>
{%- if element.comment is not empty -%}
<blockquote class="chill-user-quote">
{{ element.comment }}
</blockquote>
{%- else -%}
<span class="chill-no-data-statement">{{ 'Not given'|trans }}</span>
{%- endif -%}
</dd>
</dl>
</div>
</div>
</div>
</div>
<ul class="record_actions sticky-form-buttons">
<li class="cancel">
<a href="{{ path("chill_budget_elements_index", { 'id': person.id } ) }}" class="btn btn-cancel">
{{ 'Back to the list'|trans }}
{{ 'Back to the list'|trans }}
</a>
</li>
{% if is_granted(constant('Chill\\BudgetBundle\\Security\\Authorization\\BudgetElementVoter::UPDATE'), element) %}
{# {% if is_granted(constant('Chill\\BudgetBundle\\Security\\Authorization\\BudgetElementVoter::UPDATE'), element) %} #}
<li>
<a href="{{ path('chill_budget_resource_edit', { 'id': element.id } ) }}" class="btn btn-edit">{{ 'Edit'|trans }}</a>
</li>
{% endif %}
{# {% endif %} #}
</ul>
{% endblock %}