- 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-bottom: 1rem;
padding: 1rem;
@ -8,22 +8,34 @@
content: "\f061";
}
}
.family-title {
$col_charge: #e03851d7;
$col_resource: #6d9e63d8;
h4.family-title {
margin-top: 1.5rem;
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 {
th {
color: white;
}
}
.budget-table {
th.charge {
background-color: #e03851d7;
background-color: $col_charge;
}
}
.budget-table {
th.resource {
background-color: #6d9e63d8;
background-color: $col_resource;
}
}
.budget-table {

View File

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

View File

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

View File

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

View File

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

View File

@ -24,16 +24,14 @@
} %}
{#
<div class="flex-table">
<h3 class="family-title">{{ 'Budget calculator'|trans }}</h3>
<div class="item-bloc">
{{ table_results(wholeCharges, wholeResources) }}
</div>
<div class="my-4">
<h4 class="family-title">{{ 'Budget calculator'|trans }}</h4>
{{ table_results(wholeCharges, wholeResources) }}
</div>
#}
{% 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 %}
{% set member = hm.person %}
@ -57,6 +55,8 @@
aria-labelledby="heading_{{ member.id }}"
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 {
'resources': member.getBudgetResources,
'charges': member.getBudgetCharges,

View File

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

View File

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