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

chore: update tailwind to v4

Browse Source 
As is customary in the JS world EVERYTHING must break with each major version
This commit is contained in:
Herculino Trotta
2025-06-21 16:12:44 -03:00
parent 008d34b1d0
commit b4e9446cf6
71 changed files with 3264 additions and 2630 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/templates/cotton/amount/display.html
+2 -2
View File
@@ -3,10 +3,10 @@
{% if not divless %}
<div class="{% if text_end %}text-end{% elif text_start %}text-start{% endif %}">
{% endif %}
<span class="amount{% if color == 'grey' or color == "gray" %} tw-text-gray-500{% elif color == 'green' %} tw-text-green-400{% elif color == 'red' %} tw-text-red-400{% endif %} {{ custom_class }}"
<span class="amount{% if color == 'grey' or color == "gray" %} tw:text-gray-500{% elif color == 'green' %} tw:text-green-400{% elif color == 'red' %} tw:text-red-400{% endif %} {{ custom_class }}"
data-original-value="{% currency_display amount=amount prefix=prefix suffix=suffix decimal_places=decimal_places %}"
data-amount="{{ amount|floatformat:"-40u" }}">
</span><span>{{ slot }}</span>
{% if not divless %}
</div>
{% endif %}
{% endif %}
app/templates/cotton/components/fab.html
+14 -14
View File
@@ -1,33 +1,33 @@
<div class="tw-min-h-16">
<div class="tw:min-h-16">
<div
id="fab-wrapper"
class="tw-fixed tw-bottom-5 tw-right-5 tw-ml-auto tw-w-max tw-flex tw-flex-col tw-items-end mt-5">
class="tw:fixed tw:bottom-5 tw:right-5 tw:ml-auto tw:w-max tw:flex tw:flex-col tw:items-end mt-5">
<div
id="menu"
class="tw-flex tw-flex-col tw-items-end tw-space-y-6 tw-transition-all tw-duration-300 tw-ease-in-out tw-opacity-0 tw-invisible tw-hidden tw-mb-2">
class="tw:flex tw:flex-col tw:items-end tw:space-y-6 tw:transition-all tw:duration-300 tw:ease-in-out tw:opacity-0 tw:invisible tw:hidden tw:mb-2">
{{ slot }}
</div>
<button
class="btn btn-primary rounded-circle p-0 tw-w-12 tw-h-12 tw-flex tw-items-center tw-justify-center tw-shadow-lg hover:tw-shadow-xl focus:tw-shadow-xl tw-transition-all tw-duration-300 tw-ease-in-out"
class="btn btn-primary rounded-circle p-0 tw:w-12 tw:h-12 tw:flex tw:items-center tw:justify-center tw:shadow-lg tw:hover:shadow-xl tw:focus:shadow-xl tw:transition-all tw:duration-300 tw:ease-in-out"
_="
on click or focusout
if #menu matches .tw-invisible and event.type === 'click'
add .tw-rotate-45 to #fab-icon
remove .tw-invisible from #menu
remove .tw-hidden from #menu
remove .tw-opacity-0 from #menu
if #menu.classList.contains('tw:invisible') and event.type === 'click'
add .{'tw:rotate-45'} to #fab-icon
remove .{'tw:invisible'} from #menu
remove .{'tw:hidden'} from #menu
remove .{'tw:opacity-0'} from #menu
else
wait 0.2s
remove .tw-rotate-45 from #fab-icon
add .tw-invisible to #menu
add .tw-hidden to #menu
add .tw-opacity-0 to #menu
remove .{'tw:rotate-45'} from #fab-icon
add .{'tw:invisible'} to #menu
add .{'tw:hidden'} to #menu
add .{'tw:opacity-0'} to #menu
end
"
>
<i id="fab-icon" class="fa-solid fa-plus tw-text-3xl tw-transition-transform tw-duration-300 tw-ease-in-out"></i>
<i id="fab-icon" class="fa-solid fa-plus tw:text-3xl tw:transition-transform tw:duration-300 tw:ease-in-out"></i>
</button>
</div>
</div>
app/templates/cotton/components/fab_menu_button.html
+1 -1
View File
@@ -1,5 +1,5 @@
{% load i18n %}
<div class="tw-relative fab-item">
<div class="tw:relative fab-item">
<button class="btn btn-sm btn-{{ color }}"
hx-get="{{ url }}"
hx-trigger="{{ hx_trigger }}"
app/templates/cotton/msg/empty.html
+2 -2
View File
@@ -1,9 +1,9 @@
<div class="row {% if not remove_padding %}p-5{% endif %}">
<div class="col {% if not remove_padding %}p-5{% endif %}">
<div class="text-center">
<i class="{% if icon %}{{ icon }}{% else %}fa-solid fa-circle-xmark{% endif %} tw-text-6xl"></i>
<i class="{% if icon %}{{ icon }}{% else %}fa-solid fa-circle-xmark{% endif %} tw:text-6xl"></i>
<p class="lead mt-4 mb-0">{{ title }}</p>
<p class="tw-text-gray-500">{{ subtitle }}</p>
<p class="tw:text-gray-500">{{ subtitle }}</p>
</div>
</div>
</div>
app/templates/cotton/transaction/item.html
+18 -18
View File
@@ -8,17 +8,17 @@
id="check-{{ transaction.id }}" aria-label="{% translate 'Select' %}" hx-preserve>
</label>
{% endif %}
<div class="tw-border-s-6 tw-border-e-0 tw-border-t-0 tw-border-b-0 border-bottom
hover:tw-bg-zinc-900 p-2 {% if transaction.account.is_asset %}tw-border-dashed{% else %}tw-border-solid{% endif %}
{% if transaction.type == "EX" %}tw-border-red-500{% else %}tw-border-green-500{% endif %} tw-relative
<div class="tw:border-s-4 tw:border-e-0 tw:border-t-0 tw:border-b-0 border-bottom
tw:hover:bg-zinc-900 p-2 {% if transaction.account.is_asset %}tw:border-dashed{% else %}tw:border-solid{% endif %}
{% if transaction.type == "EX" %}tw:border-red-500{% else %}tw:border-green-500{% endif %} tw:relative
w-100 transaction-item"
_="on mouseover remove .tw-invisible from the first .transaction-actions in me end
on mouseout add .tw-invisible to the first .transaction-actions in me end">
<div class="row font-monospace tw-text-sm align-items-center">
_="on mouseover remove .{'tw:invisible'} from the first .transaction-actions in me end
on mouseout add .{'tw:invisible'} to the first .transaction-actions in me end">
<div class="row font-monospace tw:text-sm align-items-center">
<div
class="col-lg-auto col-12 d-flex align-items-center tw-text-2xl lg:tw-text-xl text-lg-center text-center p-0 ps-1">
class="col-lg-auto col-12 d-flex align-items-center tw:text-2xl tw:lg:text-xl text-lg-center text-center p-0 ps-1">
{% if not transaction.deleted %}
<a class="text-decoration-none p-3 tw-text-gray-500"
<a class="text-decoration-none p-3 tw:text-gray-500!"
title="{% if transaction.is_paid %}{% trans 'Paid' %}{% else %}{% trans 'Projected' %}{% endif %}"
role="button"
hx-get="{% url 'transaction_pay' transaction_id=transaction.id %}"
@@ -28,7 +28,7 @@
class="fa-regular fa-circle"></i>{% endif %}
</a>
{% else %}
<div class="text-decoration-none p-3 tw-text-gray-500"
<div class="text-decoration-none p-3 tw:text-gray-500!"
title="{% if transaction.is_paid %}{% trans 'Paid' %}{% else %}{% trans 'Projected' %}{% endif %}">
{% if transaction.is_paid %}<i class="fa-regular fa-circle-check"></i>{% else %}<i
class="fa-regular fa-circle"></i>{% endif %}
@@ -37,13 +37,13 @@
</div>
<div class="col-lg col-12">
{# Date#}
<div class="row mb-2 mb-lg-1 tw-text-gray-400">
<div class="row mb-2 mb-lg-1 tw:text-gray-400">
<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#}
<div class="mb-2 mb-lg-1 text-white tw-text-base">
<div class="mb-2 mb-lg-1 text-body tw:text-base">
{% spaceless %}
<span class="{% if transaction.description %}me-2{% endif %}">{{ transaction.description }}</span>
{% if transaction.installment_plan and transaction.installment_id %}
@@ -51,18 +51,18 @@
class="badge text-bg-secondary">{{ transaction.installment_id }}/{{ transaction.installment_plan.installment_total_number }}</span>
{% endif %}
{% if transaction.recurring_transaction %}
<span class="text-primary tw-text-xs"><i class="fa-solid fa-arrows-rotate fa-fw"></i></span>
<span class="text-primary tw:text-xs"><i class="fa-solid fa-arrows-rotate fa-fw"></i></span>
{% endif %}
{% if transaction.dca_expense_entries.all or transaction.dca_income_entries.all %}
<span class="badge text-bg-secondary">{% trans 'DCA' %}</span>
{% endif %}
{% endspaceless %}
</div>
<div class="tw-text-gray-400 tw-text-sm">
<div class="tw:text-gray-400 tw:text-sm">
{# Entities #}
{% with transaction.entities.all as entities %}
{% if entities %}
<div class="row mb-2 mb-lg-1 tw-text-gray-400">
<div class="row mb-2 mb-lg-1 tw:text-gray-400">
<div class="col-auto pe-1"><i class="fa-solid fa-user-group fa-fw me-1 fa-xs"></i></div>
<div class="col ps-0">{{ entities|join:", " }}</div>
</div>
@@ -70,14 +70,14 @@
{% endwith %}
{# Notes#}
{% if transaction.notes %}
<div class="row mb-2 mb-lg-1 tw-text-gray-400">
<div class="row mb-2 mb-lg-1 tw:text-gray-400">
<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 | limited_markdown | linebreaksbr }}</div>
</div>
{% endif %}
{# Category#}
{% if transaction.category %}
<div class="row mb-2 mb-lg-1 tw-text-gray-400">
<div class="row mb-2 mb-lg-1 tw:text-gray-400">
<div class="col-auto pe-1"><i class="fa-solid fa-icons fa-fw me-1 fa-xs"></i></div>
<div class="col ps-0">{{ transaction.category.name }}</div>
</div>
@@ -85,7 +85,7 @@
{# Tags#}
{% with transaction.tags.all as tags %}
{% if tags %}
<div class="row mb-2 mb-lg-1 tw-text-gray-400">
<div class="row mb-2 mb-lg-1 tw:text-gray-400">
<div class="col-auto pe-1"><i class="fa-solid fa-hashtag fa-fw me-1 fa-xs"></i></div>
<div class="col ps-0">{{ tags|join:", " }}</div>
</div>
@@ -122,7 +122,7 @@
<div>
{# Item actions#}
<div
class="transaction-actions !tw-absolute tw-left-1/2 tw-top-0 tw--translate-x-1/2 tw--translate-y-1/2 tw-invisible d-flex flex-row card">
class="transaction-actions tw:absolute! tw:left-1/2 tw:top-0 tw:-translate-x-1/2 tw:-translate-y-1/2 tw:invisible d-flex flex-row card">
<div class="card-body p-1 shadow-lg">
{% if not transaction.deleted %}
<a class="btn btn-secondary btn-sm transaction-action"
app/templates/cotton/transaction/small_item.html
+9 -9
View File
@@ -1,9 +1,9 @@
<div class="card mb-2 transaction-item">
<div class="card-body p-2 tw-flex tw-items-center tw-gap-3" data-bs-toggle="collapse" data-bs-target="#{{ transaction.id }}" role="button" aria-expanded="false" aria-controls="{{ transaction.id }}">
<div class="card-body p-2 tw:flex tw:items-center tw:gap-3" data-bs-toggle="collapse" data-bs-target="#{{ transaction.id }}" role="button" aria-expanded="false" aria-controls="{{ transaction.id }}">
<!-- Main visible content -->
<div class="tw-flex flex-lg-row flex-column lg:tw-items-center tw-w-full tw-gap-3">
<div class="tw:flex flex-lg-row flex-column tw:lg:items-center tw:w-full tw:gap-3">
<!-- Type indicator -->
<div class="tw-w-8">
<div class="tw:w-8">
{% if transaction.type == 'IN' %}
<span class="badge bg-success">↑</span>
{% else %}
@@ -12,7 +12,7 @@
</div>
<!-- Payment status -->
<div class="tw-w-8">
<div class="tw:w-8">
{% if transaction.is_paid %}
<span class="badge bg-success">✓</span>
{% else %}
@@ -21,13 +21,13 @@
</div>
<!-- Description -->
<div class="tw-flex-grow">
<span class="tw-font-medium">{{ transaction.description }}</span>
<div class="tw:flex-grow">
<span class="tw:font-medium">{{ transaction.description }}</span>
</div>
<!-- Amount -->
<div class="tw-text-right tw-whitespace-nowrap">
<span class="{% if transaction.type == 'IN' %}tw-text-green-400{% else %}tw-text-red-400{% endif %}">
<div class="tw:text-right tw:whitespace-nowrap">
<span class="{% if transaction.type == 'IN' %}tw:text-green-400{% else %}tw:text-red-400{% endif %}">
{{ transaction.amount }}
</span>
{% if transaction.exchanged_amount %}
@@ -91,4 +91,4 @@
</div>
</div>
</div>
</div>
</div>
app/templates/cotton/ui/account_card.html
+19 -19
View File
@@ -3,7 +3,7 @@
<div class="col card shadow">
<div class="card-body">
{% if account.account.group %}
<div class="tw-text-sm mb-2">
<div class="tw:text-sm mb-2">
<span class="badge text-bg-primary ">{{ account.account.group }}</span>
</div>
{% endif %}
@@ -12,11 +12,11 @@
</h5>
<div class="d-flex justify-content-between align-items-baseline mt-2">
<div class="text-end font-monospace">
<div class="tw-text-gray-400">{% translate 'projected income' %}</div>
<div class="tw:text-gray-400">{% translate 'projected income' %}</div>
</div>
<div class="dotted-line flex-grow-1"></div>
{% if account.income_projected != 0 %}
<div class="text-end font-monospace tw-text-green-400">
<div class="text-end font-monospace tw:text-green-400">
<c-amount.display
:amount="account.income_projected"
:prefix="account.currency.prefix"
@@ -28,7 +28,7 @@
{% endif %}
</div>
{% if account.exchanged and account.exchanged.income_projected %}
<div class="text-end font-monospace tw-text-gray-500">
<div class="text-end font-monospace tw:text-gray-500">
<c-amount.display
:amount="account.exchanged.income_projected"
:prefix="account.exchanged.currency.prefix"
@@ -38,12 +38,12 @@
{% endif %}
<div class="d-flex justify-content-between align-items-baseline mt-2">
<div class="text-end font-monospace">
<div class="tw-text-gray-400">{% translate 'projected expenses' %}</div>
<div class="tw:text-gray-400">{% translate 'projected expenses' %}</div>
</div>
<div class="dotted-line flex-grow-1"></div>
<div>
{% if account.expense_projected != 0 %}
<div class="text-end font-monospace tw-text-red-400">
<div class="text-end font-monospace tw:text-red-400">
<c-amount.display
:amount="account.expense_projected"
:prefix="account.currency.prefix"
@@ -56,7 +56,7 @@
</div>
</div>
{% if account.exchanged and account.exchanged.expense_projected %}
<div class="text-end font-monospace tw-text-gray-500">
<div class="text-end font-monospace tw:text-gray-500">
<c-amount.display
:amount="account.exchanged.expense_projected"
:prefix="account.exchanged.currency.prefix"
@@ -66,7 +66,7 @@
{% endif %}
<div class="d-flex justify-content-between align-items-baseline mt-2">
<div class="text-end font-monospace">
<div class="tw-text-gray-400">{% translate 'projected total' %}</div>
<div class="tw:text-gray-400">{% translate 'projected total' %}</div>
</div>
<div class="dotted-line flex-grow-1"></div>
<div
@@ -80,7 +80,7 @@
</div>
</div>
{% if account.exchanged.total_projected and account.exchanged.total_projected %}
<div class="text-end font-monospace tw-text-gray-500">
<div class="text-end font-monospace tw:text-gray-500">
<c-amount.display
:amount="account.exchanged.total_projected"
:prefix="account.exchanged.currency.prefix"
@@ -91,11 +91,11 @@
<hr class="my-3">
<div class="d-flex justify-content-between align-items-baseline mt-2">
<div class="text-end font-monospace">
<div class="tw-text-gray-400">{% translate 'current income' %}</div>
<div class="tw:text-gray-400">{% translate 'current income' %}</div>
</div>
<div class="dotted-line flex-grow-1"></div>
{% if account.income_current != 0 %}
<div class="text-end font-monospace tw-text-green-400">
<div class="text-end font-monospace tw:text-green-400">
<c-amount.display
:amount="account.income_current"
:prefix="account.currency.prefix"
@@ -107,7 +107,7 @@
{% endif %}
</div>
{% if account.exchanged and account.exchanged.income_current %}
<div class="text-end font-monospace tw-text-gray-500">
<div class="text-end font-monospace tw:text-gray-500">
<c-amount.display
:amount="account.exchanged.income_current"
:prefix="account.exchanged.currency.prefix"
@@ -117,11 +117,11 @@
{% endif %}
<div class="d-flex justify-content-between align-items-baseline mt-2">
<div class="text-end font-monospace">
<div class="tw-text-gray-400">{% translate 'current expenses' %}</div>
<div class="tw:text-gray-400">{% translate 'current expenses' %}</div>
</div>
<div class="dotted-line flex-grow-1"></div>
{% if account.expense_current != 0 %}
<div class="text-end font-monospace tw-text-red-400">
<div class="text-end font-monospace tw:text-red-400">
<c-amount.display
:amount="account.expense_current"
:prefix="account.currency.prefix"
@@ -133,7 +133,7 @@
{% endif %}
</div>
{% if account.exchanged and account.exchanged.expense_current %}
<div class="text-end font-monospace tw-text-gray-500">
<div class="text-end font-monospace tw:text-gray-500">
<c-amount.display
:amount="account.exchanged.expense_current"
:prefix="account.exchanged.currency.prefix"
@@ -143,7 +143,7 @@
{% endif %}
<div class="d-flex justify-content-between align-items-baseline mt-2">
<div class="text-end font-monospace">
<div class="tw-text-gray-400">{% translate 'current total' %}</div>
<div class="tw:text-gray-400">{% translate 'current total' %}</div>
</div>
<div class="dotted-line flex-grow-1"></div>
<div class="text-end font-monospace">
@@ -156,7 +156,7 @@
</div>
</div>
{% if account.exchanged and account.exchanged.total_current %}
<div class="text-end font-monospace tw-text-gray-500">
<div class="text-end font-monospace tw:text-gray-500">
<c-amount.display
:amount="account.exchanged.total_current"
:prefix="account.exchanged.currency.prefix"
@@ -168,7 +168,7 @@
<hr class="my-3">
<div class="d-flex justify-content-between align-items-baseline mt-2">
<div class="text-end font-monospace">
<div class="tw-text-gray-400">{% translate 'final total' %}</div>
<div class="tw:text-gray-400">{% translate 'final total' %}</div>
</div>
<div class="dotted-line flex-grow-1"></div>
<div class="text-end font-monospace">
@@ -181,7 +181,7 @@
</div>
</div>
{% if account.exchanged and account.exchanged.total_final %}
<div class="text-end font-monospace tw-text-gray-500">
<div class="text-end font-monospace tw:text-gray-500">
<c-amount.display
:amount="account.exchanged.total_final"
:prefix="account.exchanged.currency.prefix"
app/templates/cotton/ui/card.html
+2 -2
View File
@@ -1,5 +1,5 @@
<div class="card tw-relative h-100 shadow">
<div class="card tw:relative h-100 shadow">
<div class="card-body">
{{ slot }}
</div>
</div>
</div>
app/templates/cotton/ui/currency_card.html
+18 -18
View File
@@ -7,11 +7,11 @@
</h5>
<div class="d-flex justify-content-between align-items-baseline mt-2">
<div class="text-end font-monospace">
<div class="tw-text-gray-400">{% translate 'projected income' %}</div>
<div class="tw:text-gray-400">{% translate 'projected income' %}</div>
</div>
<div class="dotted-line flex-grow-1"></div>
{% if currency.income_projected != 0 %}
<div class="text-end font-monospace tw-text-green-400">
<div class="text-end font-monospace tw:text-green-400">
<c-amount.display
:amount="currency.income_projected"
:prefix="currency.currency.prefix"
@@ -23,7 +23,7 @@
{% endif %}
</div>
{% if currency.exchanged and currency.exchanged.income_projected %}
<div class="text-end font-monospace tw-text-gray-500">
<div class="text-end font-monospace tw:text-gray-500">
<c-amount.display
:amount="currency.exchanged.income_projected"
:prefix="currency.exchanged.currency.prefix"
@@ -33,12 +33,12 @@
{% endif %}
<div class="d-flex justify-content-between align-items-baseline mt-2">
<div class="text-end font-monospace">
<div class="tw-text-gray-400">{% translate 'projected expenses' %}</div>
<div class="tw:text-gray-400">{% translate 'projected expenses' %}</div>
</div>
<div class="dotted-line flex-grow-1"></div>
<div>
{% if currency.expense_projected != 0 %}
<div class="text-end font-monospace tw-text-red-400">
<div class="text-end font-monospace tw:text-red-400">
<c-amount.display
:amount="currency.expense_projected"
:prefix="currency.currency.prefix"
@@ -51,7 +51,7 @@
</div>
</div>
{% if currency.exchanged and currency.exchanged.expense_projected %}
<div class="text-end font-monospace tw-text-gray-500">
<div class="text-end font-monospace tw:text-gray-500">
<c-amount.display
:amount="currency.exchanged.expense_projected"
:prefix="currency.exchanged.currency.prefix"
@@ -61,7 +61,7 @@
{% endif %}
<div class="d-flex justify-content-between align-items-baseline mt-2">
<div class="text-end font-monospace">
<div class="tw-text-gray-400">{% translate 'projected total' %}</div>
<div class="tw:text-gray-400">{% translate 'projected total' %}</div>
</div>
<div class="dotted-line flex-grow-1"></div>
<div class="text-end font-monospace">
@@ -74,7 +74,7 @@
</div>
</div>
{% if currency.exchanged.total_projected and currency.exchanged.total_projected %}
<div class="text-end font-monospace tw-text-gray-500">
<div class="text-end font-monospace tw:text-gray-500">
<c-amount.display
:amount="currency.exchanged.total_projected"
:prefix="currency.exchanged.currency.prefix"
@@ -85,11 +85,11 @@
<hr class="my-3">
<div class="d-flex justify-content-between align-items-baseline mt-2">
<div class="text-end font-monospace">
<div class="tw-text-gray-400">{% translate 'current income' %}</div>
<div class="tw:text-gray-400">{% translate 'current income' %}</div>
</div>
<div class="dotted-line flex-grow-1"></div>
{% if currency.income_current != 0 %}
<div class="text-end font-monospace tw-text-green-400">
<div class="text-end font-monospace tw:text-green-400">
<c-amount.display
:amount="currency.income_current"
:prefix="currency.currency.prefix"
@@ -101,7 +101,7 @@
{% endif %}
</div>
{% if currency.exchanged and currency.exchanged.income_current %}
<div class="text-end font-monospace tw-text-gray-500">
<div class="text-end font-monospace tw:text-gray-500">
<c-amount.display
:amount="currency.exchanged.income_current"
:prefix="currency.exchanged.currency.prefix"
@@ -111,11 +111,11 @@
{% endif %}
<div class="d-flex justify-content-between align-items-baseline mt-2">
<div class="text-end font-monospace">
<div class="tw-text-gray-400">{% translate 'current expenses' %}</div>
<div class="tw:text-gray-400">{% translate 'current expenses' %}</div>
</div>
<div class="dotted-line flex-grow-1"></div>
{% if currency.expense_current != 0 %}
<div class="text-end font-monospace tw-text-red-400">
<div class="text-end font-monospace tw:text-red-400">
<c-amount.display
:amount="currency.expense_current"
:prefix="currency.currency.prefix"
@@ -127,7 +127,7 @@
{% endif %}
</div>
{% if currency.exchanged and currency.exchanged.expense_current %}
<div class="text-end font-monospace tw-text-gray-500">
<div class="text-end font-monospace tw:text-gray-500">
<c-amount.display
:amount="currency.exchanged.expense_current"
:prefix="currency.exchanged.currency.prefix"
@@ -137,7 +137,7 @@
{% endif %}
<div class="d-flex justify-content-between align-items-baseline mt-2">
<div class="text-end font-monospace">
<div class="tw-text-gray-400">{% translate 'current total' %}</div>
<div class="tw:text-gray-400">{% translate 'current total' %}</div>
</div>
<div class="dotted-line flex-grow-1"></div>
<div class="text-end font-monospace">
@@ -150,7 +150,7 @@
</div>
</div>
{% if currency.exchanged and currency.exchanged.total_current %}
<div class="text-end font-monospace tw-text-gray-500">
<div class="text-end font-monospace tw:text-gray-500">
<c-amount.display
:amount="currency.exchanged.total_current"
:prefix="currency.exchanged.currency.prefix"
@@ -162,7 +162,7 @@
<hr class="my-3">
<div class="d-flex justify-content-between align-items-baseline mt-2">
<div class="text-end font-monospace">
<div class="tw-text-gray-400">{% translate 'final total' %}</div>
<div class="tw:text-gray-400">{% translate 'final total' %}</div>
</div>
<div class="dotted-line flex-grow-1"></div>
<div class="text-end font-monospace">
@@ -175,7 +175,7 @@
</div>
</div>
{% if currency.exchanged and currency.exchanged.total_final %}
<div class="text-end font-monospace tw-text-gray-500">
<div class="text-end font-monospace tw:text-gray-500">
<c-amount.display
:amount="currency.exchanged.total_final"
:prefix="currency.exchanged.currency.prefix"
app/templates/cotton/ui/deleted_transactions_action_bar.html
+21 -21
View File
@@ -1,16 +1,16 @@
{% load i18n %}
<div class="tw-sticky tw-bottom-4 tw-left-0 tw-right-0 tw-z-50 tw-hidden mx-auto tw-w-fit" id="actions-bar"
<div class="tw:sticky tw:bottom-4 tw:left-0 tw:right-0 tw:z-50 tw:hidden mx-auto tw:w-fit" id="actions-bar"
_="on change from #transactions-list or htmx:afterSettle from window
if #actions-bar then
if no <input[type='checkbox']:checked/> in #transactions-list
if #actions-bar
add .slide-in-bottom-reverse then settle
then add .tw-hidden to #actions-bar
then add .tw:hidden to #actions-bar
then remove .slide-in-bottom-reverse
end
else
if #actions-bar
remove .tw-hidden from #actions-bar
remove .tw:hidden from #actions-bar
then trigger selected_transactions_updated
end
end
@@ -26,20 +26,20 @@
</button>
<ul class="dropdown-menu">
<li>
<div class="dropdown-item px-3 tw-cursor-pointer"
<div class="dropdown-item px-3 tw:cursor-pointer"
_="on click set <#transactions-list input[type='checkbox']/>'s checked to true then call me.blur() then trigger change">
<i class="fa-regular fa-square-check tw-text-green-400 me-3"></i>{% translate 'Select All' %}
<i class="fa-regular fa-square-check tw:text-green-400 me-3"></i>{% translate 'Select All' %}
</div>
</li>
<li>
<div class="dropdown-item px-3 tw-cursor-pointer"
<div class="dropdown-item px-3 tw:cursor-pointer"
_="on click set <#transactions-list input[type='checkbox']/>'s checked to false then call me.blur() then trigger change">
<i class="fa-regular fa-square tw-text-red-400 me-3"></i>{% translate 'Unselect All' %}
<i class="fa-regular fa-square tw:text-red-400 me-3"></i>{% translate 'Unselect All' %}
</div>
</li>
</ul>
</div>
<div class="vr tw-align-middle"></div>
<div class="vr tw:align-middle"></div>
<button class="btn btn-secondary btn-sm"
hx-get="{% url 'transactions_bulk_undelete' %}"
hx-include=".transaction"
@@ -60,7 +60,7 @@
_="install prompt_swal">
<i class="fa-solid fa-trash text-danger"></i>
</button>
<div class="vr tw-align-middle"></div>
<div class="vr tw:align-middle"></div>
<div class="btn-group"
_="on selected_transactions_updated from #actions-bar
set realTotal to math.bignumber(0)
@@ -118,10 +118,10 @@
<li>
<div class="dropdown-item-text p-0">
<div>
<div class="text-body-secondary tw-text-xs tw-font-medium px-3">
<div class="text-body-secondary tw:text-xs tw:font-medium px-3">
{% trans "Flat Total" %}
</div>
<div class="dropdown-item px-3 tw-cursor-pointer"
<div class="dropdown-item px-3 tw:cursor-pointer"
id="calc-menu-flat-total"
_="on click
set original_value to my innerText
@@ -138,10 +138,10 @@
<li>
<div class="dropdown-item-text p-0">
<div>
<div class="text-body-secondary tw-text-xs tw-font-medium px-3">
<div class="text-body-secondary tw:text-xs tw:font-medium px-3">
{% trans "Real Total" %}
</div>
<div class="dropdown-item px-3 tw-cursor-pointer"
<div class="dropdown-item px-3 tw:cursor-pointer"
id="calc-menu-real-total"
_="on click
set original_value to my innerText
@@ -158,10 +158,10 @@
<li>
<div class="dropdown-item-text p-0">
<div>
<div class="text-body-secondary tw-text-xs tw-font-medium px-3">
<div class="text-body-secondary tw:text-xs tw:font-medium px-3">
{% trans "Mean" %}
</div>
<div class="dropdown-item px-3 tw-cursor-pointer"
<div class="dropdown-item px-3 tw:cursor-pointer"
id="calc-menu-mean"
_="on click
set original_value to my innerText
@@ -178,10 +178,10 @@
<li>
<div class="dropdown-item-text p-0">
<div>
<div class="text-body-secondary tw-text-xs tw-font-medium px-3">
<div class="text-body-secondary tw:text-xs tw:font-medium px-3">
{% trans "Max" %}
</div>
<div class="dropdown-item px-3 tw-cursor-pointer"
<div class="dropdown-item px-3 tw:cursor-pointer"
id="calc-menu-max"
_="on click
set original_value to my innerText
@@ -198,10 +198,10 @@
<li>
<div class="dropdown-item-text p-0">
<div>
<div class="text-body-secondary tw-text-xs tw-font-medium px-3">
<div class="text-body-secondary tw:text-xs tw:font-medium px-3">
{% trans "Min" %}
</div>
<div class="dropdown-item px-3 tw-cursor-pointer"
<div class="dropdown-item px-3 tw:cursor-pointer"
id="calc-menu-min"
_="on click
set original_value to my innerText
@@ -218,10 +218,10 @@
<li>
<div class="dropdown-item-text p-0">
<div>
<div class="text-body-secondary tw-text-xs tw-font-medium px-3">
<div class="text-body-secondary tw:text-xs tw:font-medium px-3">
{% trans "Count" %}
</div>
<div class="dropdown-item px-3 tw-cursor-pointer"
<div class="dropdown-item px-3 tw:cursor-pointer"
id="calc-menu-count"
_="on click
set original_value to my innerText
app/templates/cotton/ui/help_icon.html
+1 -1
View File
@@ -1,6 +1,6 @@
{% spaceless %}
{% load i18n %}
<span class="tw-text-xs text-white-50 mx-1"
<span class="tw:text-xs text-white-50 mx-1"
data-bs-toggle="tooltip"
data-bs-title="{{ content }}">
<i class="{% if not icon %}fa-solid fa-circle-question{% else %}{{ icon }}{% endif %} fa-fw"></i>
app/templates/cotton/ui/info_card.html
+3 -3
View File
@@ -1,9 +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">
<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">
{% if icon %}<i class="{{ icon }}"></i>{% else %}<span class="fw-bold">{{ title.0 }}</span>{% endif %}
</div>
<div class="card-body">
<h5 class="tw-text-{{ color }}-400 fw-bold tw-mr-[50px]" {{ attrs }}>{{ title }}{% if help_text %}<c-ui.help-icon :content="help_text" icon=""></c-ui.help-icon>{% endif %}</h5>
<h5 class="tw:text-{{ color }}-400 fw-bold tw:mr-[50px]" {{ attrs }}>{{ title }}{% if help_text %}<c-ui.help-icon :content="help_text" icon=""></c-ui.help-icon>{% endif %}</h5>
{{ slot }}
</div>
</div>
app/templates/cotton/ui/percentage_distribution.html
+4 -4
View File
@@ -1,28 +1,28 @@
{% load i18n %}
<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:"2u" }}%">
<div class="progress-bar progress-bar-striped !tw-bg-green-300"
<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 }}%)">
</div>
</div>
<div class="progress position-relative" role="progressbar" aria-label="{% trans 'Current Income' %} ({{ percentage.percentages.income_current|floatformat:2 }}%)" aria-valuenow="{{ percentage.percentages.expense_projected|floatformat:0 }}" aria-valuemin="0" aria-valuemax="100" style="width: {{ percentage.percentages.income_current|floatformat:"2u" }}%">
<div class="progress-bar !tw-bg-green-400"
<div class="progress-bar tw:bg-green-400!"
data-bs-toggle="tooltip"
data-bs-placement="top"
title="{% trans 'Current Income' %} ({{ p.percentages.income_current|floatformat:2 }}%)">
</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:"2u" }}%">
<div class="progress-bar progress-bar-striped !tw-bg-red-300"
<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 }}%)">
</div>
</div>
<div class="progress position-relative" role="progressbar" aria-label="{% trans 'Current Expenses' %} ({{ percentage.percentages.expense_current|floatformat:2 }}%)" aria-valuenow="{{ percentage.percentages.expense_projected|floatformat:0 }}" aria-valuemin="0" aria-valuemax="100" style="width: {{ percentage.percentages.expense_current|floatformat:"2u" }}%">
<div class="progress-bar !tw-bg-red-400"
<div class="progress-bar tw:bg-red-400!"
data-bs-toggle="tooltip"
data-bs-placement="top"
title="{% trans 'Current Expenses' %} ({{ percentage.percentages.expense_current|floatformat:2 }}%)">
app/templates/cotton/ui/transactions_action_bar.html
+25 -25
View File
@@ -1,16 +1,16 @@
{% load i18n %}
<div class="tw-sticky tw-bottom-4 tw-left-0 tw-right-0 tw-z-50 tw-hidden mx-auto tw-w-fit" id="actions-bar"
<div class="tw:sticky tw:bottom-4 tw:left-0 tw:right-0 tw:z-50 tw:hidden mx-auto tw:w-fit" id="actions-bar"
_="on change from #transactions-list or htmx:afterSettle from window
if #actions-bar then
if no <input[type='checkbox']:checked/> in #transactions-list
if #actions-bar
add .slide-in-bottom-reverse then settle
then add .tw-hidden to #actions-bar
then add .tw:hidden to #actions-bar
then remove .slide-in-bottom-reverse
end
else
if #actions-bar
remove .tw-hidden from #actions-bar
remove .tw:hidden from #actions-bar
then trigger selected_transactions_updated
end
end
@@ -26,20 +26,20 @@
</button>
<ul class="dropdown-menu">
<li>
<div class="dropdown-item px-3 tw-cursor-pointer"
<div class="dropdown-item px-3 tw:cursor-pointer"
_="on click set <#transactions-list .transaction:not([style*='display: none']) input[type='checkbox']/>'s checked to true then call me.blur() then trigger change">
<i class="fa-regular fa-square-check tw-text-green-400 me-3"></i>{% translate 'Select All' %}
<i class="fa-regular fa-square-check tw:text-green-400 me-3"></i>{% translate 'Select All' %}
</div>
</li>
<li>
<div class="dropdown-item px-3 tw-cursor-pointer"
<div class="dropdown-item px-3 tw:cursor-pointer"
_="on click set <#transactions-list input[type='checkbox']/>'s checked to false then call me.blur() then trigger change">
<i class="fa-regular fa-square tw-text-red-400 me-3"></i>{% translate 'Unselect All' %}
<i class="fa-regular fa-square tw:text-red-400 me-3"></i>{% translate 'Unselect All' %}
</div>
</li>
</ul>
</div>
<div class="vr tw-align-middle"></div>
<div class="vr tw:align-middle"></div>
<div class="btn-group">
<button class="btn btn-secondary btn-sm"
hx-get="{% url 'transactions_bulk_edit' %}"
@@ -56,17 +56,17 @@
<ul class="dropdown-menu">
<li>
<div class="dropdown-item px-3 tw-cursor-pointer"
<div class="dropdown-item px-3 tw:cursor-pointer"
hx-get="{% url 'transactions_bulk_unpay' %}"
hx-include=".transaction">
<i class="fa-regular fa-circle tw-text-red-400 fa-fw me-3"></i>{% translate 'Mark as unpaid' %}
<i class="fa-regular fa-circle tw:text-red-400 fa-fw me-3"></i>{% translate 'Mark as unpaid' %}
</div>
</li>
<li>
<div class="dropdown-item px-3 tw-cursor-pointer"
<div class="dropdown-item px-3 tw:cursor-pointer"
hx-get="{% url 'transactions_bulk_pay' %}"
hx-include=".transaction">
<i class="fa-regular fa-circle-check tw-text-green-400 fa-fw me-3"></i>{% translate 'Mark as paid' %}
<i class="fa-regular fa-circle-check tw:text-green-400 fa-fw me-3"></i>{% translate 'Mark as paid' %}
</div>
</li>
</ul>
@@ -91,7 +91,7 @@
_="install prompt_swal">
<i class="fa-solid fa-trash text-danger"></i>
</button>
<div class="vr tw-align-middle"></div>
<div class="vr tw:align-middle"></div>
<div class="btn-group"
_="on selected_transactions_updated from #actions-bar
set realTotal to math.bignumber(0)
@@ -149,10 +149,10 @@
<li>
<div class="dropdown-item-text p-0">
<div>
<div class="text-body-secondary tw-text-xs tw-font-medium px-3">
<div class="text-body-secondary tw:text-xs tw:font-medium px-3">
{% trans "Flat Total" %}
</div>
<div class="dropdown-item px-3 tw-cursor-pointer"
<div class="dropdown-item px-3 tw:cursor-pointer"
id="calc-menu-flat-total"
_="on click
set original_value to my innerText
@@ -169,10 +169,10 @@
<li>
<div class="dropdown-item-text p-0">
<div>
<div class="text-body-secondary tw-text-xs tw-font-medium px-3">
<div class="text-body-secondary tw:text-xs tw:font-medium px-3">
{% trans "Real Total" %}
</div>
<div class="dropdown-item px-3 tw-cursor-pointer"
<div class="dropdown-item px-3 tw:cursor-pointer"
id="calc-menu-real-total"
_="on click
set original_value to my innerText
@@ -189,10 +189,10 @@
<li>
<div class="dropdown-item-text p-0">
<div>
<div class="text-body-secondary tw-text-xs tw-font-medium px-3">
<div class="text-body-secondary tw:text-xs tw:font-medium px-3">
{% trans "Mean" %}
</div>
<div class="dropdown-item px-3 tw-cursor-pointer"
<div class="dropdown-item px-3 tw:cursor-pointer"
id="calc-menu-mean"
_="on click
set original_value to my innerText
@@ -209,10 +209,10 @@
<li>
<div class="dropdown-item-text p-0">
<div>
<div class="text-body-secondary tw-text-xs tw-font-medium px-3">
<div class="text-body-secondary tw:text-xs tw:font-medium px-3">
{% trans "Max" %}
</div>
<div class="dropdown-item px-3 tw-cursor-pointer"
<div class="dropdown-item px-3 tw:cursor-pointer"
id="calc-menu-max"
_="on click
set original_value to my innerText
@@ -229,10 +229,10 @@
<li>
<div class="dropdown-item-text p-0">
<div>
<div class="text-body-secondary tw-text-xs tw-font-medium px-3">
<div class="text-body-secondary tw:text-xs tw:font-medium px-3">
{% trans "Min" %}
</div>
<div class="dropdown-item px-3 tw-cursor-pointer"
<div class="dropdown-item px-3 tw:cursor-pointer"
id="calc-menu-min"
_="on click
set original_value to my innerText
@@ -249,10 +249,10 @@
<li>
<div class="dropdown-item-text p-0">
<div>
<div class="text-body-secondary tw-text-xs tw-font-medium px-3">
<div class="text-body-secondary tw:text-xs tw:font-medium px-3">
{% trans "Count" %}
</div>
<div class="dropdown-item px-3 tw-cursor-pointer"
<div class="dropdown-item px-3 tw:cursor-pointer"
id="calc-menu-count"
_="on click
set original_value to my innerText