feat: improve transaction item density on mobile

This commit is contained in:
Herculino Trotta
2024-11-30 03:43:46 -03:00
parent 08da805642
commit a6d9793c03
+17 -16
View File
@@ -24,10 +24,12 @@
</div> </div>
<div class="col-lg-8 col-12"> <div class="col-lg-8 col-12">
{# Date#} {# Date#}
<div class="mb-1 tw-text-gray-400"> <div class="row mb-2 mb-lg-1 tw-text-gray-400">
<i class="fa-solid fa-calendar fa-fw me-1 fa-xs"></i>{{ transaction.date|date:"SHORT_DATE_FORMAT" }} • {{ transaction.reference_date|date:"b/Y" }}</div> <div class="col-auto pe-1"><i class="fa-solid fa-calendar fa-fw me-1 fa-xs"></i></div>
<div class="col ps-0">{{ transaction.date|date:"SHORT_DATE_FORMAT" }} • {{ transaction.reference_date|date:"b/Y" }}</div>
</div>
{# Description#} {# Description#}
<div class="mb-1 text-white tw-text-base"> <div class="mb-2 mb-lg-1 text-white tw-text-base">
{% spaceless %} {% spaceless %}
<span>{{ transaction.description }}</span> <span>{{ transaction.description }}</span>
{% if transaction.installment_plan and transaction.installment_id %} {% if transaction.installment_plan and transaction.installment_id %}
@@ -41,32 +43,31 @@
<div class="tw-text-gray-400 tw-text-sm"> <div class="tw-text-gray-400 tw-text-sm">
{# Notes#} {# Notes#}
{% if transaction.notes %} {% if transaction.notes %}
<div class="mb-1 tw-text-gray-400"> <div class="row mb-2 mb-lg-1 tw-text-gray-400">
<i class="fa-solid fa-align-left fa-fw me-1 fa-xs"></i>{{ transaction.notes | linebreaksbr }} <div class="col-auto pe-1"><i class="fa-solid fa-align-left fa-fw me-1 fa-xs"></i></div>
<div class="col ps-0">{{ transaction.notes | linebreaksbr }}</div>
</div> </div>
{% endif %} {% endif %}
{# Category#}
{% if transaction.category %} {% if transaction.category %}
<div class="mb-1"> <div class="row mb-2 mb-lg-1 tw-text-gray-400">
{% spaceless %} <div class="col-auto pe-1"><i class="fa-solid fa-icons fa-fw me-1 fa-xs"></i></div>
<i class="fa-solid fa-icons fa-fw me-1 fa-xs"></i> <div class="col ps-0">{{ transaction.category.name }}</div>
<span class="">{{ transaction.category.name }}</span>
{% endspaceless %}
</div> </div>
{% endif %} {% endif %}
{# Tags#} {# Tags#}
{% with transaction.tags.all as tags %} {% with transaction.tags.all as tags %}
{% if tags %} {% if tags %}
<div class="mb-1"> <div class="row mb-2 mb-lg-1 tw-text-gray-400">
{% for tag in tags %} <div class="col-auto pe-1"><i class="fa-solid fa-hashtag fa-fw me-1 fa-xs"></i></div>
<span><i class="fa-solid fa-hashtag fa-fw fa-xs"></i>{{ tag.name }}</span> <div class="col ps-0">{{ tags|join:", " }}</div>
{% endfor %}
</div> </div>
{% endif %} {% endif %}
{% endwith %} {% endwith %}
</div> </div>
</div> </div>
<div class="col-lg-3 col-12 text-lg-end align-self-end"> <div class="col-lg-3 col-12 text-lg-end align-self-end">
<div class="main-amount"> <div class="main-amount mb-2 mb-lg-0">
<c-amount.display <c-amount.display
:amount="transaction.amount" :amount="transaction.amount"
:prefix="transaction.account.currency.prefix" :prefix="transaction.account.currency.prefix"
@@ -77,7 +78,7 @@
{# Exchange Rate#} {# Exchange Rate#}
{% with exchanged=transaction.exchanged_amount %} {% with exchanged=transaction.exchanged_amount %}
{% if exchanged %} {% if exchanged %}
<div class="exchanged-amount"> <div class="exchanged-amount mb-2 mb-lg-0">
<c-amount.display <c-amount.display
:amount="exchanged.amount" :amount="exchanged.amount"
:prefix="exchanged.prefix" :prefix="exchanged.prefix"