starred/WYGIWYH
1
0
Fork 0
mirror of https://github.com/eitchtee/WYGIWYH.git synced 2026-03-18 15:34:01 +01: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

5
app/templates/cotton/ui/card.html Normal file
View File

@@ -0,0 +1,5 @@
<div class="card tw-relative h-100 shadow">
<div class="card-body">
{{ slot }}
</div>
</div>

9
app/templates/cotton/ui/info_card.html Normal file
View File

@@ -0,0 +1,9 @@
<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-{{ color }}-300 tw-text-{{ color }}-800 text-center align-items-center d-flex justify-content-center rounded-2">
<i class="{{ icon }}"></i>
</div>
<div class="card-body">
<h5 class="tw-text-{{ color }}-400 fw-bold" {{ attrs }}>{{ title }}{% if help_text %}{% include 'includes/help_icon.html' with content=help_text %}{% endif %}</h5>
{{ slot }}
</div>
</div>

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 %}

82
app/templates/net_worth/net_worth.html
View File

@@ -14,61 +14,42 @@
<div class="col-12 col-xl-5">
<div class="row row-cols-1 g-4 mb-3">
<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-coins"></i>
</div>
<div class="card-body">
<h5 class="tw-text-yellow-400 fw-bold mb-3"
_="on click showAllDatasetsCurrency()">
{% translate 'By currency' %}
</h5>
{% for currency in currency_net_worth.values %}
<div class="d-flex justify-content-between mt-2">
<div class="d-flex align-items-baseline w-100">
<div class="currency-name text-start font-monospace tw-text-gray-300"
_="on click showOnlyCurrencyDataset('{{ currency.currency.name }}')">
{{ currency.currency.name }}
</div>
<div class="dotted-line flex-grow-1"></div>
<div>
<c-amount.display
:amount="currency.total_final"
:prefix="currency.currency.prefix"
:suffix="currency.currency.suffix"
:decimal_places="currency.currency.decimal_places"
color="{% if currency.total_final > 0 %}green{% elif currency.total_final < 0 %}red{% endif %}"
text-end></c-amount.display>
</div>
<c-ui.info-card color="yellow" icon="fa-solid fa-coins" title="{% trans 'By currency' %}" _="on click showAllDatasetsCurrency()">
{% for currency in currency_net_worth.values %}
<div class="d-flex justify-content-between mt-2">
<div class="d-flex align-items-baseline w-100">
<div class="currency-name text-start font-monospace tw-text-gray-300"
_="on click showOnlyCurrencyDataset('{{ currency.currency.name }}')">
{{ currency.currency.name }}
</div>
</div>
{% if currency.exchanged and currency.exchanged.total_final %}
<div class="dotted-line flex-grow-1"></div>
<div>
<c-amount.display
:amount="currency.exchanged.total_final"
:prefix="currency.exchanged.currency.prefix"
:suffix="currency.exchanged.currency.suffix"
:decimal_places="currency.exchanged.currency.decimal_places"
text-end
color="grey"></c-amount.display>
:amount="currency.total_final"
:prefix="currency.currency.prefix"
:suffix="currency.currency.suffix"
:decimal_places="currency.currency.decimal_places"
color="{% if currency.total_final > 0 %}green{% elif currency.total_final < 0 %}red{% endif %}"
text-end></c-amount.display>
</div>
{% endif %}
{% endfor %}
</div>
</div>
</div>
</div>
{% if currency.exchanged and currency.exchanged.total_final %}
<div>
<c-amount.display
:amount="currency.exchanged.total_final"
:prefix="currency.exchanged.currency.prefix"
:suffix="currency.exchanged.currency.suffix"
:decimal_places="currency.exchanged.currency.decimal_places"
text-end
color="grey"></c-amount.display>
</div>
{% endif %}
{% endfor %}
</c-ui.info-card>
</div>
<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-wallet"></i>
</div>
<div class="card-body">
<h5 class="tw-text-blue-400 fw-bold mb-3"
_="on click showAllDatasetsAccount()">
{% translate 'By account' %}
</h5>
<c-ui.info-card color="blue" icon="fa-solid fa-wallet" title="{% trans 'By account' %}" _="on click showAllDatasetsAccount()">
{% regroup account_net_worth.values by account.group as account_data %}
{% for data in account_data %}
{% if data.grouper %}
@@ -136,8 +117,7 @@
{% endfor %}
{% endif %}
{% endfor %}
</div>
</div>
</c-ui.info-card>
</div>
</div>
</div>