refactor(cotton): change percentage_distribution's coloring and margin

This commit is contained in:
Herculino Trotta
2024-12-24 13:22:44 -03:00
parent 906095dcdd
commit 10fea65088
3 changed files with 10 additions and 6 deletions

View File

@@ -1,7 +1,7 @@
{% load i18n %}
<div class="progress-stacked mt-3">
<div class="progress-stacked">
<div class="progress position-relative" role="progressbar" aria-label="{% trans 'Projected Income' %} ({{ percentage.percentages.income_projected|floatformat:2 }}%)" aria-valuenow="{{ percentage.percentages.expense_projected|floatformat:0 }}" aria-valuemin="0" aria-valuemax="100" style="width: {{ percentage.percentages.income_projected|floatformat:0 }}%">
<div class="progress-bar progress-bar-striped !tw-bg-green-400"
<div class="progress-bar progress-bar-striped !tw-bg-green-300"
data-bs-toggle="tooltip"
data-bs-placement="top"
title="{% trans 'Projected Income' %} ({{ percentage.percentages.income_projected|floatformat:2 }}%)">
@@ -15,7 +15,7 @@
</div>
</div>
<div class="progress position-relative" role="progressbar" aria-label="{% trans 'Projected Expenses' %} ({{ percentage.percentages.expense_projected|floatformat:2 }}%)" aria-valuenow="{{ percentage.percentages.expense_projected|floatformat:0 }}" aria-valuemin="0" aria-valuemax="100" style="width: {{ percentage.percentages.expense_projected|floatformat:0 }}%">
<div class="progress-bar progress-bar-striped !tw-bg-red-400"
<div class="progress-bar progress-bar-striped !tw-bg-red-300"
data-bs-toggle="tooltip"
data-bs-placement="top"
title="{% trans 'Projected Expenses' %} ({{ percentage.percentages.expense_projected|floatformat:2 }}%)">
@@ -28,4 +28,4 @@
title="{% trans 'Current Expenses' %} ({{ percentage.percentages.expense_current|floatformat:2 }}%)">
</div>
</div>
</div>
</div>

View File

@@ -175,7 +175,9 @@
{% endif %}
</div>
{% with p=percentages|get_dict_item:account_id %}
<c-ui.percentage-distribution :percentage="p"></c-ui.percentage-distribution>
<div class="my-3">
<c-ui.percentage-distribution :percentage="p"></c-ui.percentage-distribution>
</div>
{% endwith %}
{% empty %}
<c-msg.empty

View File

@@ -175,7 +175,9 @@
{% endif %}
</div>
{% with p=percentages|get_dict_item:currency_id %}
<c-ui.percentage-distribution :percentage="p"></c-ui.percentage-distribution>
<div class="my-3">
<c-ui.percentage-distribution :percentage="p"></c-ui.percentage-distribution>
</div>
{% endwith %}
{% empty %}
<c-msg.empty