starred/WYGIWYH
1
0
Fork 0
mirror of https://github.com/eitchtee/WYGIWYH.git synced 2026-04-25 10:08:36 +02:00
Code Issues 14 Packages Projects Releases 10 Wiki Activity

feat(cotton): add info_card component

Browse Source
This commit is contained in:
Herculino Trotta
2024-12-24 13:21:57 -03:00
parent 28e4ef9659
commit 906095dcdd
4 changed files with 62 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
app/templates/monthly_overview/fragments/monthly_summary.html
View File

@@ -1,17 +1,10 @@
{% load i18n %}
{% load currency_display %}
<div class="row row-cols-1 g-4 mb-3">
{# Daily Spending#}
<div class="col">
<div class="card tw-relative h-100 shadow">
<div class="tw-absolute tw-h-8 tw-w-8 tw-right-2 tw-top-2 tw-bg-yellow-300 tw-text-yellow-800 text-center
align-items-center d-flex justify-content-center rounded-2">
<i class="fa-solid fa-calendar-day"></i>
</div>
<div class="card-body">
<h5 class="tw-text-yellow-400 fw-bold">{% translate 'Daily Spending Allowance' %}{% include 'includes/help_icon.html' with content=_('This is the final total divided by the remaining days in the month') %}</h5>
<div class="d-flex justify-content-between mt-3">
<c-ui.info-card color="yellow" icon="fa-solid fa-calendar-day" title="{% trans 'Daily Spending Allowance' %}" help_text={% trans "This is the final total divided by the remaining days in the month" %}>
<div class="d-flex justify-content-between mt-3">
<div class="text-end font-monospace">
<div class="tw-text-gray-400">{% translate 'today' %}</div>
</div>
@@ -39,18 +32,11 @@
{% endfor %}
</div>
</div>
</div>
</div>
</c-ui.info-card>
</div>
{# Income#}
<div class="col">
<div class="card tw-relative h-100 shadow">
<div class="tw-absolute tw-h-8 tw-w-8 tw-right-2 tw-top-2 tw-bg-green-300 tw-text-green-800 text-center
align-items-center d-flex justify-content-center rounded-2">
<i class="fa-solid fa-arrow-right-to-bracket"></i>
</div>
<div class="card-body">
<h5 class="tw-text-green-400 fw-bold">{% translate 'Income' %}</h5>
<c-ui.info-card color="green" icon="fa-solid fa-arrow-right-to-bracket" title="{% trans 'Income' %}">
<div class="d-flex justify-content-between mt-3">
<div class="text-end font-monospace">
<div class="tw-text-gray-400">{% translate 'current' %}</div>
@@ -110,18 +96,11 @@
{% endfor %}
</div>
</div>
</div>
</div>
</c-ui.info-card>
</div>
{# Expenses#}
<div class="col">
<div class="card tw-relative h-100 shadow">
<div class="tw-absolute tw-h-8 tw-w-8 tw-right-2 tw-top-2 tw-bg-red-300 tw-text-red-800 text-center
align-items-center d-flex justify-content-center rounded-2">
<i class="fa-solid fa-arrow-right-from-bracket"></i>
</div>
<div class="card-body">
<h5 class="tw-text-red-400 fw-bold">{% translate 'Expenses' %}</h5>
<c-ui.info-card color="red" icon="fa-solid fa-arrow-right-from-bracket" title="{% trans 'Expenses' %}">
<div class="d-flex justify-content-between mt-3">
<div class="text-end font-monospace">
<div class="tw-text-gray-400">{% translate 'current' %}</div>
@@ -181,18 +160,11 @@
{% endfor %}
</div>
</div>
</div>
</div>
</c-ui.info-card>
</div>
{# Total#}
<div class="col">
<div class="card tw-relative h-100 shadow">
<div class="tw-absolute tw-h-8 tw-w-8 tw-right-2 tw-top-2 tw-bg-blue-300 tw-text-blue-800 text-center
align-items-center d-flex justify-content-center rounded-2">
<i class="fa-solid fa-scale-balanced"></i>
</div>
<div class="card-body">
<h5 class="tw-text-blue-400 fw-bold">{% translate 'Total' %}</h5>
<c-ui.info-card color="blue" icon="fa-solid fa-scale-balanced" title="{% trans 'Total' %}">
<div class="d-flex justify-content-between mt-3">
<div class="text-end font-monospace">
<div class="tw-text-gray-400">{% translate 'current' %}</div>
@@ -278,10 +250,14 @@
{% endfor %}
</div>
</div>
</div>
</div>
</c-ui.info-card>
</div>
<div class="col">
<c-ui.info-card color="yellow" icon="fa-solid fa-percent" title="{% trans 'Distribution' %}">
{% for p in percentages.values %}
<p class="tw-text-gray-400 mb-2 {% if not forloop.first %}mt-3{% endif %}">{{ p.currency.name }} ({{ p.currency.code }})</p>
<c-ui.percentage-distribution :percentage="p"></c-ui.percentage-distribution>
{% endfor %}
</c-ui.info-card>
</div>
</div>
{% for p in percentages.values %}
<c-ui.percentage-distribution :percentage="p"></c-ui.percentage-distribution>
{% endfor %}