- improve title hierarchy and ergonomie

This commit is contained in:
Mathieu Jaumotte 2023-04-24 13:01:58 +02:00
parent 241e605ea6
commit be965e8698
8 changed files with 49 additions and 62 deletions

View File

@ -1,4 +1,4 @@
.subtitle { h3.subtitle {
margin-top: 1rem; margin-top: 1rem;
margin-bottom: 1rem; margin-bottom: 1rem;
padding: 1rem; padding: 1rem;
@ -8,22 +8,34 @@
content: "\f061"; content: "\f061";
} }
} }
.family-title {
$col_charge: #e03851d7;
$col_resource: #6d9e63d8;
h4.family-title {
margin-top: 1.5rem;
margin-bottom: 1rem !important; margin-bottom: 1rem !important;
padding-left: 0.7em;
i {
margin-right: 0.4em;
}
&.charge i { color: $col_charge; }
&.resource i { color: $col_resource; }
} }
.budget-table th { .budget-table th {
th { th {
color: white; color: white;
} }
} }
.budget-table { .budget-table {
th.charge { th.charge {
background-color: #e03851d7; background-color: $col_charge;
} }
} }
.budget-table { .budget-table {
th.resource { th.resource {
background-color: #6d9e63d8; background-color: $col_resource;
} }
} }
.budget-table { .budget-table {

View File

@ -32,7 +32,7 @@
{% endif %} {% endif %}
{% endfor %} {% endfor %}
<h2 class="subtitle">{{ 'Actual budget'|trans }}</h2> <h3 class="subtitle">{{ 'Actual budget'|trans }}</h3>
{% if actualCharges|length > 0 or actualResources|length > 0 %} {% if actualCharges|length > 0 or actualResources|length > 0 %}
{% include '@ChillBudget/Budget/_current_budget.html.twig' with { {% include '@ChillBudget/Budget/_current_budget.html.twig' with {
'actualResources': actualResources, 'actualResources': actualResources,
@ -45,7 +45,7 @@
{% endif %} {% endif %}
{% if pastCharges|length > 0 or pastResources|length > 0 %} {% if pastCharges|length > 0 or pastResources|length > 0 %}
<h2 class="subtitle">{{ 'Past budget'|trans }}</h2> <h3 class="subtitle">{{ 'Past budget'|trans }}</h3>
{% include '@ChillBudget/Budget/_past_budget.html.twig' with { {% include '@ChillBudget/Budget/_past_budget.html.twig' with {
'pastCharges': pastCharges, 'pastCharges': pastCharges,
'pastResources': pastResources, 'pastResources': pastResources,
@ -54,7 +54,7 @@
{% endif %} {% endif %}
{% if futureCharges|length > 0 or futureResources|length > 0 %} {% if futureCharges|length > 0 or futureResources|length > 0 %}
<h2 class="subtitle">{{ 'Future budget'|trans }}</h2> <h3 class="subtitle">{{ 'Future budget'|trans }}</h3>
{% include '@ChillBudget/Budget/_future_budget.html.twig' with { {% include '@ChillBudget/Budget/_future_budget.html.twig' with {
'futureResources': futureResources, 'futureResources': futureResources,
'futureCharges': futureCharges, 'futureCharges': futureCharges,

View File

@ -1,20 +1,14 @@
{% from '@ChillBudget/Budget/_macros.html.twig' import table_elements, table_results %} {% from '@ChillBudget/Budget/_macros.html.twig' import table_elements, table_results %}
{# <div class="my-4">
<h2 class="subtitle">{{ 'Actual budget'|trans }}</h2> <h4 class="family-title resource"><i class="fa fa-fw fa-plus-square"></i>{{ 'Actual resources'|trans }}</h4>
#}
<div class="mb-2">
<h4 class="family-title">{{ 'Actual resources'|trans }}</h4>
{% if actualResources|length > 0 %} {% if actualResources|length > 0 %}
{{ table_elements(actualResources, 'resource') }} {{ table_elements(actualResources, 'resource') }}
{% else %} {% else %}
<span class="chill-no-data-statement">{{ 'No resources registered'|trans }}</span> <span class="chill-no-data-statement">{{ 'No resources registered'|trans }}</span>
{% endif %} {% endif %}
</div>
<div class="mb-2"> <h4 class="family-title charge"><i class="fa fa-fw fa-minus-square"></i>{{ 'Actual charges'|trans }}</h4>
<h4 class="family-title">{{ 'Actual charges'|trans }}</h4>
{% if actualCharges|length > 0 %} {% if actualCharges|length > 0 %}
{{ table_elements(actualCharges, 'charge') }} {{ table_elements(actualCharges, 'charge') }}
{% else %} {% else %}

View File

@ -20,32 +20,23 @@
aria-labelledby="heading_future_{{ entity.id }}" aria-labelledby="heading_future_{{ entity.id }}"
data-bs-parent="#future_{{ entity.id }}"> data-bs-parent="#future_{{ entity.id }}">
<div class="flex-table"> <div class="my-4">
<h3 class="family-title">{{ 'Future resources'|trans }}</h3> <h4 class="family-title resource"><i class="fa fa-fw fa-plus-square"></i>{{ 'Future resources'|trans }}</h4>
{% if futureResources|length > 0 %} {% if futureResources|length > 0 %}
<div class="item-bloc"> {{ table_elements(futureResources, 'resource') }}
{{ table_elements(futureResources, 'resource') }}
</div>
{% else %} {% else %}
<div class="item-bloc"> <span class="chill-no-data-statement">{{ 'No future resources registered'|trans }}</span>
<span class="chill-no-data-statement">{{ 'No future resources registered'|trans }}</span>
</div>
{% endif %} {% endif %}
</div>
<div class="flex-table"> <h4 class="family-title charge"><i class="fa fa-fw fa-minus-square"></i>{{ 'Future charges'|trans }}</h4>
<h3 class="family-title">{{ 'Future charges'|trans }}</h3>
{% if futureCharges|length > 0 %} {% if futureCharges|length > 0 %}
<div class="item-bloc"> {{ table_elements(futureCharges, 'charge') }}
{{ table_elements(futureCharges, 'charge') }}
</div>
{% else %} {% else %}
<div class="item-bloc"> <span class="chill-no-data-statement">{{ 'No future charges registered'|trans }}</span>
<span class="chill-no-data-statement">{{ 'No future charges registered'|trans }}</span>
</div>
{% endif %} {% endif %}
</div> </div>
</div> </div>
</div> </div>
</div> </div>

View File

@ -20,34 +20,24 @@
aria-labelledby="heading_past_{{ entity.id }}" aria-labelledby="heading_past_{{ entity.id }}"
data-bs-parent="#past_{{ entity.id }}"> data-bs-parent="#past_{{ entity.id }}">
<div class="flex-table"> <div class="my-4">
<h3 class="family-title">{{ 'Past resources'|trans }}</h3> <h4 class="family-title resource"><i class="fa fa-fw fa-plus-square"></i>{{ 'Past resources'|trans }}</h4>
{% if pastResources|length > 0 %} {% if pastResources|length > 0 %}
<div class="item-bloc"> {{ table_elements(pastResources, 'resource') }}
{{ table_elements(pastResources, 'resource') }}
</div>
{% else %} {% else %}
<div class="item-bloc"> <span class="chill-no-data-statement">{{ 'No past resources registered'|trans }}</span>
<span class="chill-no-data-statement">{{ 'No past resources registered'|trans }}</span>
</div>
{% endif %} {% endif %}
</div>
<div class="flex-table"> <h4 class="family-title charge"><i class="fa fa-fw fa-minus-square"></i>{{ 'Past charges'|trans }}</h4>
<h3 class="family-title">{{ 'Past charges'|trans }}</h3>
{% if pastCharges|length > 0 %} {% if pastCharges|length > 0 %}
<div class="item-bloc"> {{ table_elements(pastCharges, 'charge') }}
{{ table_elements(pastCharges, 'charge') }}
</div>
{% else %} {% else %}
<div class="item-bloc"> <span class="chill-no-data-statement">{{ 'No past charges registered'|trans }}</span>
<span class="chill-no-data-statement">{{ 'No past charges registered'|trans }}</span>
</div>
{% endif %} {% endif %}
</div> </div>
</div> </div>
</div> </div>
</div> </div>

View File

@ -24,16 +24,14 @@
} %} } %}
{# {#
<div class="flex-table"> <div class="my-4">
<h3 class="family-title">{{ 'Budget calculator'|trans }}</h3> <h4 class="family-title">{{ 'Budget calculator'|trans }}</h4>
<div class="item-bloc"> {{ table_results(wholeCharges, wholeResources) }}
{{ table_results(wholeCharges, wholeResources) }}
</div>
</div> </div>
#} #}
{% if household.getCurrentMembers|length > 0 %} {% if household.getCurrentMembers|length > 0 %}
<h1 class="mt-5 mb-4">{{ 'Budget household members'|trans }}</h1> <h1 class="my-5">{{ 'Budget household members'|trans }}</h1>
{% for hm in household.getCurrentMembers %} {% for hm in household.getCurrentMembers %}
{% set member = hm.person %} {% set member = hm.person %}
@ -57,6 +55,8 @@
aria-labelledby="heading_{{ member.id }}" aria-labelledby="heading_{{ member.id }}"
data-bs-parent="#nonCurrent"> data-bs-parent="#nonCurrent">
<h2 class="mt-4">{{ 'Budget for %name%'|trans({'%name%': member.firstName ~ " " ~ member.lastName }) }}</h2>
{% include 'ChillBudgetBundle:Budget:_budget.html.twig' with { {% include 'ChillBudgetBundle:Budget:_budget.html.twig' with {
'resources': member.getBudgetResources, 'resources': member.getBudgetResources,
'charges': member.getBudgetCharges, 'charges': member.getBudgetCharges,

View File

@ -24,7 +24,7 @@
} %} } %}
<div class="mt-5"> <div class="mt-5">
<h2 class="subtitle">{{ 'Budget calculator'|trans }}</h2> <h3 class="subtitle">{{ 'Budget calculator'|trans }}</h3>
{{ table_results(charges, resources) }} {{ table_results(charges, resources) }}
</div> </div>

View File

@ -9,17 +9,17 @@ See complete budget: Voir budget complet
Hide budget: Masquer Hide budget: Masquer
Hide budget of %name%: Masquer budget de %name% Hide budget of %name%: Masquer budget de %name%
Resource element type: Nature de la ressource Resource element type: Nature de la ressource
Actual budget: Éléments actuels du budget Actual budget: Éléments actuels
Actual resources: Ressources actuelles Actual resources: Ressources actuelles
Actual resources for %name%: Ressources actuelles de %name% Actual resources for %name%: Ressources actuelles de %name%
Actual charges for %name%: Charges actuelles de %name% Actual charges for %name%: Charges actuelles de %name%
Actual charges: Charges actuelles Actual charges: Charges actuelles
Past budget: Éléments du budget passé Past budget: Éléments passés
Show past budget: Montrer budget passé Show past budget: Montrer budget passé
Show future budget: Montrer budget future Show future budget: Montrer budget future
Past resources: Ressources passées Past resources: Ressources passées
Past charges: Charges passées Past charges: Charges passées
Future budget: Futurs éléments du budget Future budget: Éléments futurs
Future resources: Ressources futures Future resources: Ressources futures
Future charges: Charges futures Future charges: Charges futures
Budget element type: Nature Budget element type: Nature