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

Styling view page

Browse Source
This commit is contained in:
Julie Lenaerts 2022-02-23 17:16:26 +01:00
parent 576f46f845
commit 185d1dbf49
5 changed files with 124 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
src/Bundle/ChillBudgetBundle/Resources/views/Charge/view.html.twig
View File

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

10
src/Bundle/ChillBudgetBundle/Resources/views/Element/index.html.twig
View File

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

71
src/Bundle/ChillBudgetBundle/Resources/views/Resource/view.html.twig
View File

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

2
src/Bundle/ChillMainBundle/Resources/public/chill/scss/chill_variables.scss
View File

@ -11,3 +11,5 @@ $chill-household-context: #929d69;
$social-issue-color: #4bafe8; $social-issue-color: #4bafe8;
$social-action-color: $orange; $social-action-color: $orange;
$activity-color: yellowgreen; $activity-color: yellowgreen;
$budget-resource-color: #5ba1c1;
$budget-charge-color: #e03851;

41
src/Bundle/ChillPersonBundle/Resources/public/chill/scss/badge.scss
View File

@ -176,6 +176,47 @@ div[class*='activity-'] {
} }
} }
div[class*='budget-'] {
div.dashboard,
h4.badge-title,
h3.badge-title,
h2.badge-title {
span.title_label {
// Calculate same color then border:groove
&_resource {
background-color: shade-color($budget-resource-color, 34%);
}
&_charge {
background-color: shade-color($budget-charge-color, 34%);
}
h3 {
color: $white;
}
}
span.title_action {
&_resource {
@include dashboard_like_badge($budget-resource-color);
}
&_charge {
@include dashboard_like_badge($budget-charge-color);
}
}
span.title_label {
div.duration {
font-size: 70%;
font-weight: 500;
p {
margin-bottom: 0;
text-align: right;
abbr {
text-decoration: none;
}
}
}
}
}
}
/* /*
* Pill badge by entity * Pill badge by entity
*/ */