starred/WYGIWYH
1
0
Fork 0
mirror of https://github.com/eitchtee/WYGIWYH.git synced 2026-03-30 14:12:29 +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

4
app/templates/account_groups/fragments/list.html
View File

@@ -1,9 +1,9 @@
{% load i18n %}
<div class="container px-md-3 py-3 column-gap-5">
<div class="tw-text-3xl fw-bold font-monospace tw-w-full mb-3">
<div class="tw:text-3xl fw-bold font-monospace tw:w-full mb-3">
{% spaceless %}
<div>{% translate 'Account Groups' %}<span>
<a class="text-decoration-none tw-text-2xl p-1 category-action"
<a class="text-decoration-none tw:text-2xl p-1 category-action"
role="button"
data-bs-toggle="tooltip"
data-bs-title="{% translate "Add" %}"

4
app/templates/accounts/fragments/list.html
View File

@@ -1,9 +1,9 @@
{% load i18n %}
<div class="container px-md-3 py-3 column-gap-5">
<div class="tw-text-3xl fw-bold font-monospace tw-w-full mb-3">
<div class="tw:text-3xl fw-bold font-monospace tw:w-full mb-3">
{% spaceless %}
<div>{% translate 'Accounts' %}<span>
<a class="text-decoration-none tw-text-2xl p-1 category-action"
<a class="text-decoration-none tw:text-2xl p-1 category-action"
role="button"
data-bs-toggle="tooltip"
data-bs-title="{% translate "Add" %}"

28
app/templates/calendar_view/fragments/list.html
View File

@@ -2,7 +2,7 @@
{% load i18n %}
<div>
<div class="tw-hidden lg:tw-grid lg:tw-grid-cols-7 tw-gap-4 lg:tw-gap-0">
<div class="tw:hidden tw:lg:grid tw:lg:grid-cols-7 tw:gap-4 tw:lg:gap-0">
<div class="border-start border-top border-bottom p-2 text-center">
{% translate 'MON' %}
</div>
@@ -25,44 +25,44 @@
{% translate 'SUN' %}
</div>
</div>
<div class="tw-grid tw-grid-cols-1 tw-grid-rows-1 lg:tw-grid-cols-7 lg:tw-grid-rows-6 tw-gap-4 lg:tw-gap-0">
<div class="tw:grid tw:grid-cols-1 tw:grid-rows-1 tw:lg:grid-cols-7 tw:lg:grid-rows-6 tw:gap-4 tw:lg:gap-0">
{% for date in dates %}
{% if date %}
<div class="card h-100 hover:tw-bg-zinc-900 rounded-0{% if not date.transactions %} !tw-hidden lg:!tw-flex{% endif %}{% if today == date.date %} tw-border-yellow-300 border-primary{% endif %} " role="button"
<div class="card h-100 tw:hover:bg-zinc-900! rounded-0{% if not date.transactions %} tw:hidden! tw:lg:flex!{% endif %}{% if today == date.date %} tw:border-yellow-300 border-primary{% endif %} " role="button"
hx-get="{% url 'calendar_transactions_list' day=date.date.day month=date.date.month year=date.date.year %}"
hx-target="#persistent-generic-offcanvas-left">
<div class="card-header border-0 bg-transparent text-end tw-flex justify-content-between p-2 w-100">
<div class="lg:tw-hidden text-start w-100">{{ date.date|date:"l"|lower }}</div>
<div class="card-header border-0 bg-transparent text-end tw:flex justify-content-between p-2 w-100">
<div class="tw:lg:hidden text-start w-100">{{ date.date|date:"l"|lower }}</div>
<div class="text-end w-100">{{ date.day }}</div>
</div>
<div class="card-body p-2">
{% for transaction in date.transactions %}
{% if transaction.is_paid %}
{% if transaction.type == "IN" and not transaction.account.is_asset %}
<i class="fa-solid fa-circle-check tw-text-green-400" data-bs-toggle="tooltip" data-bs-title="{% if transaction.description %}{{ transaction.description }}{% else %}{% trans 'Income' %}{% endif %}"></i>
<i class="fa-solid fa-circle-check tw:text-green-400" data-bs-toggle="tooltip" data-bs-title="{% if transaction.description %}{{ transaction.description }}{% else %}{% trans 'Income' %}{% endif %}"></i>
{% elif transaction.type == "IN" and transaction.account.is_asset %}
<i class="fa-solid fa-circle-check tw-text-green-300" data-bs-toggle="tooltip" data-bs-title="{% if transaction.description %}{{ transaction.description }}{% else %}{% trans 'Income' %}{% endif %}"></i>
<i class="fa-solid fa-circle-check tw:text-green-300" data-bs-toggle="tooltip" data-bs-title="{% if transaction.description %}{{ transaction.description }}{% else %}{% trans 'Income' %}{% endif %}"></i>
{% elif transaction.type == "EX" and not transaction.account.is_asset %}
<i class="fa-solid fa-circle-check tw-text-red-400" data-bs-toggle="tooltip" data-bs-title="{% if transaction.description %}{{ transaction.description }}{% else %}{% trans 'Expense' %}{% endif %}"></i>
<i class="fa-solid fa-circle-check tw:text-red-400" data-bs-toggle="tooltip" data-bs-title="{% if transaction.description %}{{ transaction.description }}{% else %}{% trans 'Expense' %}{% endif %}"></i>
{% elif transaction.type == "EX" and transaction.account.is_asset %}
<i class="fa-solid fa-circle-check tw-text-red-300" data-bs-toggle="tooltip" data-bs-title="{% if transaction.description %}{{ transaction.description }}{% else %}{% trans 'Expense' %}{% endif %}"></i>
<i class="fa-solid fa-circle-check tw:text-red-300" data-bs-toggle="tooltip" data-bs-title="{% if transaction.description %}{{ transaction.description }}{% else %}{% trans 'Expense' %}{% endif %}"></i>
{% endif %}
{% else %}
{% if transaction.type == "IN" and not transaction.account.is_asset %}
<i class="fa-regular fa-circle tw-text-green-400" data-bs-toggle="tooltip" data-bs-title="{% if transaction.description %}{{ transaction.description }}{% else %}{% trans 'Income' %}{% endif %}"></i>
<i class="fa-regular fa-circle tw:text-green-400" data-bs-toggle="tooltip" data-bs-title="{% if transaction.description %}{{ transaction.description }}{% else %}{% trans 'Income' %}{% endif %}"></i>
{% elif transaction.type == "IN" and transaction.account.is_asset %}
<i class="fa-regular fa-circle tw-text-green-300" data-bs-toggle="tooltip" data-bs-title="{% if transaction.description %}{{ transaction.description }}{% else %}{% trans 'Income' %}{% endif %}"></i>
<i class="fa-regular fa-circle tw:text-green-300" data-bs-toggle="tooltip" data-bs-title="{% if transaction.description %}{{ transaction.description }}{% else %}{% trans 'Income' %}{% endif %}"></i>
{% elif transaction.type == "EX" and not transaction.account.is_asset %}
<i class="fa-regular fa-circle tw-text-red-400" data-bs-toggle="tooltip" data-bs-title="{% if transaction.description %}{{ transaction.description }}{% else %}{% trans 'Expense' %}{% endif %}"></i>
<i class="fa-regular fa-circle tw:text-red-400" data-bs-toggle="tooltip" data-bs-title="{% if transaction.description %}{{ transaction.description }}{% else %}{% trans 'Expense' %}{% endif %}"></i>
{% elif transaction.type == "EX" and transaction.account.is_asset %}
<i class="fa-regular fa-circle tw-text-red-300" data-bs-toggle="tooltip" data-bs-title="{% if transaction.description %}{{ transaction.description }}{% else %}{% trans 'Expense' %}{% endif %}"></i>
<i class="fa-regular fa-circle tw:text-red-300" data-bs-toggle="tooltip" data-bs-title="{% if transaction.description %}{{ transaction.description }}{% else %}{% trans 'Expense' %}{% endif %}"></i>
{% endif %}
{% endif %}
{% endfor %}
</div>
</div>
{% else %}
<div class="!tw-hidden lg:!tw-block card h-100 rounded-0"></div>
<div class="tw:hidden! tw:lg:block! card h-100 rounded-0"></div>
{% endif %}
{% endfor %}
</div>

6
app/templates/calendar_view/pages/calendar.html
View File

@@ -17,7 +17,7 @@
<div class="row mb-3 gx-xl-4 gy-3 mb-4">
{# Date picker#}
<div class="col-12 col-xl-4 flex-row align-items-center d-flex">
<div class="tw-text-base h-100 align-items-center d-flex">
<div class="tw:text-base h-100 align-items-center d-flex">
<a role="button"
class="pe-4 py-2"
hx-boost="true"
@@ -25,14 +25,14 @@
href="{% url 'calendar' month=previous_month year=previous_year %}"><i
class="fa-solid fa-chevron-left"></i></a>
</div>
<div class="tw-text-3xl fw-bold font-monospace tw-w-full text-center"
<div class="tw:text-3xl fw-bold font-monospace tw:w-full text-center"
hx-get="{% url 'month_year_picker' %}"
hx-target="#generic-offcanvas-left"
hx-trigger="click, date_picker from:window"
hx-vals='{"month": {{ month }}, "year": {{ year }}, "for": "calendar", "field": "date"}' role="button">
{{ month|month_name }} {{ year }}
</div>
<div class="tw-text-base mx-2 h-100 align-items-center d-flex">
<div class="tw:text-base mx-2 h-100 align-items-center d-flex">
<a role="button"
class="ps-3 py-2"
hx-boost="true"

4
app/templates/categories/fragments/list.html
View File

@@ -1,9 +1,9 @@
{% load i18n %}
<div class="container px-md-3 py-3 column-gap-5">
<div class="tw-text-3xl fw-bold font-monospace tw-w-full mb-3">
<div class="tw:text-3xl fw-bold font-monospace tw:w-full mb-3">
{% spaceless %}
<div>{% translate 'Categories' %}<span>
<a class="text-decoration-none tw-text-2xl p-1 category-action"
<a class="text-decoration-none tw:text-2xl p-1 category-action"
role="button"
data-bs-toggle="tooltip"
data-bs-title="{% translate "Add" %}"

2
app/templates/common/fragments/month_year_picker.html
View File

@@ -32,7 +32,7 @@
tabindex="0">
<ul class="list-group list-group-flush" id="month-year-list">
{% for month_data in x.list %}
<li class="list-group-item hover:tw-bg-zinc-900
<li class="list-group-item tw:hover:bg-zinc-900
{% if month_data.month == current_month and month_data.year == current_year %} disabled bg-primary{% endif %}"
{% if month_data.month == current_month and month_data.year == current_year %}aria-disabled="true"{% endif %}>
<div class="d-flex justify-content-between">

4
app/templates/cotton/amount/display.html
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 %}

28
app/templates/cotton/components/fab.html
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>

2
app/templates/cotton/components/fab_menu_button.html
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 }}"

4
app/templates/cotton/msg/empty.html
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>

36
app/templates/cotton/transaction/item.html
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"

18
app/templates/cotton/transaction/small_item.html
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>

38
app/templates/cotton/ui/account_card.html
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"

4
app/templates/cotton/ui/card.html
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>

36
app/templates/cotton/ui/currency_card.html
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"

42
app/templates/cotton/ui/deleted_transactions_action_bar.html
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

2
app/templates/cotton/ui/help_icon.html
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>

6
app/templates/cotton/ui/info_card.html
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>

8
app/templates/cotton/ui/percentage_distribution.html
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 }}%)">

50
app/templates/cotton/ui/transactions_action_bar.html
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

4
app/templates/currencies/fragments/list.html
View File

@@ -1,9 +1,9 @@
{% load i18n %}
<div class="container px-md-3 py-3 column-gap-5">
<div class="tw-text-3xl fw-bold font-monospace tw-w-full mb-3">
<div class="tw:text-3xl fw-bold font-monospace tw:w-full mb-3">
{% spaceless %}
<div>{% translate 'Currencies' %}<span>
<a class="text-decoration-none tw-text-2xl p-1 category-action"
<a class="text-decoration-none tw:text-2xl p-1 category-action"
role="button"
data-bs-toggle="tooltip"
data-bs-title="{% translate "Add" %}"

14
app/templates/dca/fragments/strategy/details.html
View File

@@ -2,10 +2,10 @@
{% load i18n %}
<div class="container-fluid px-md-3 py-3 column-gap-5">
<div class="d-lg-flex justify-content-between mb-3 w-100">
<div class="tw-text-3xl fw-bold font-monospace d-flex align-items-center">
<div class="tw:text-3xl fw-bold font-monospace d-flex align-items-center">
{{ strategy.name }}
</div>
<div class="tw-text-sm text-lg-end mt-2 mt-lg-0">
<div class="tw:text-sm text-lg-end mt-2 mt-lg-0">
<div class="mb-2">
<span class="badge rounded-pill text-bg-secondary">{{ strategy.payment_currency.name }}</span> x <span class="badge rounded-pill text-bg-secondary">{{ strategy.target_currency.name }}</span>
</div>
@@ -19,7 +19,7 @@
• {{ strategy.current_price.1|date:"SHORT_DATETIME_FORMAT" }}
</c-amount.display>
{% else %}
<div class="tw-text-red-400">{% trans "No exchange rate available" %}</div>
<div class="tw:text-red-400">{% trans "No exchange rate available" %}</div>
{% endif %}
</div>
</div>
@@ -30,7 +30,7 @@
<div class="card">
<div class="card-body">
{% spaceless %}
<div class="card-title tw-text-xl">{% trans "Entries" %}<span>
<div class="card-title tw:text-xl">{% trans "Entries" %}<span>
<a class="text-decoration-none p-1 category-action"
role="button"
data-bs-toggle="tooltip"
@@ -190,7 +190,7 @@
<div class="card-body">
<h5 class="card-title">{% trans "Total P/L" %}</h5>
<div
class="card-text {% if strategy.total_profit_loss >= 0 %}tw-text-green-400{% else %}tw-text-red-400{% endif %}">
class="card-text {% if strategy.total_profit_loss >= 0 %}tw:text-green-400{% else %}tw:text-red-400{% endif %}">
<c-amount.display
:amount="strategy.total_profit_loss"
:prefix="strategy.payment_currency.prefix"
@@ -206,7 +206,7 @@
<div class="card-body">
<h5 class="card-title">{% trans "Total % P/L" %}</h5>
<div
class="card-text {% if strategy.total_profit_loss >= 0 %}tw-text-green-400{% else %}tw-text-red-400{% endif %}">
class="card-text {% if strategy.total_profit_loss >= 0 %}tw:text-green-400{% else %}tw:text-red-400{% endif %}">
{{ strategy.total_profit_loss_percentage|floatformat:2 }}%
</div>
</div>
@@ -451,7 +451,7 @@
<div class="card">
<div class="card-body">
<h5 class="card-title">{% trans "Investment Frequency" %}</h5>
<p class="card-text tw-text-gray-400">
<p class="card-text tw:text-gray-400">
{% trans "The straighter the blue line, the more consistent your DCA strategy is." %}
</p>
<canvas id="frequencyChart"></canvas>

10
app/templates/dca/fragments/strategy/list.html
View File

@@ -1,9 +1,9 @@
{% load i18n %}
<div class="container px-md-3 py-3 column-gap-5">
<div class="tw-text-3xl fw-bold font-monospace tw-w-full mb-3">
<div class="tw:text-3xl fw-bold font-monospace tw:w-full mb-3">
{% spaceless %}
<div>{% translate 'Dollar Cost Average Strategies' %}<span>
<a class="text-decoration-none tw-text-2xl p-1 category-action"
<a class="text-decoration-none tw:text-2xl p-1 category-action"
role="button"
data-bs-toggle="tooltip"
data-bs-title="{% translate "Add" %}"
@@ -25,12 +25,12 @@
<a href="{% url 'dca_strategy_detail_index' strategy_id=strategy.id %}" hx-boost="true"
class="text-decoration-none card-body">
<div class="">
<div class="card-title tw-text-xl">{{ strategy.name }}</div>
<div class="card-text tw-text-gray-400">{{ strategy.notes }}</div>
<div class="card-title tw:text-xl">{{ strategy.name }}</div>
<div class="card-text tw:text-gray-400">{{ strategy.notes }}</div>
</div>
</a>
<div class="card-footer text-end">
<a class="text-decoration-none tw-text-gray-400 p-1"
<a class="text-decoration-none tw:text-gray-400 p-1"
role="button"
data-bs-toggle="tooltip"
data-bs-title="{% translate "Edit" %}"

4
app/templates/entities/fragments/list.html
View File

@@ -1,9 +1,9 @@
{% load i18n %}
<div class="container px-md-3 py-3 column-gap-5">
<div class="tw-text-3xl fw-bold font-monospace tw-w-full mb-3">
<div class="tw:text-3xl fw-bold font-monospace tw:w-full mb-3">
{% spaceless %}
<div>{% translate 'Entities' %}<span>
<a class="text-decoration-none tw-text-2xl p-1 category-action"
<a class="text-decoration-none tw:text-2xl p-1 category-action"
role="button"
data-bs-toggle="tooltip"
data-bs-title="{% translate "Add" %}"

4
app/templates/exchange_rates/fragments/list.html
View File

@@ -1,10 +1,10 @@
{% load currency_display %}
{% load i18n %}
<div class="container px-md-3 py-3 column-gap-5">
<div class="tw-text-3xl fw-bold font-monospace tw-w-full mb-3">
<div class="tw:text-3xl fw-bold font-monospace tw:w-full mb-3">
{% spaceless %}
<div>{% translate 'Exchange Rates' %}<span>
<a class="text-decoration-none tw-text-2xl p-1 category-action"
<a class="text-decoration-none tw:text-2xl p-1 category-action"
role="button"
data-bs-toggle="tooltip"
data-bs-title="{% translate "Add" %}"

10
app/templates/exchange_rates/fragments/table.html
View File

@@ -58,7 +58,7 @@
<nav aria-label="{% translate 'Page navigation' %}">
<ul class="pagination justify-content-center mt-5">
<li class="page-item">
<a class="page-link tw-cursor-pointer {% if not page_obj.has_previous %}disabled{% endif %}"
<a class="page-link tw:cursor-pointer {% if not page_obj.has_previous %}disabled{% endif %}"
hx-get="{% if page_obj.has_previous %}{% url 'exchange_rates_list_pair' %}{% endif %}"
hx-vals='{"page": 1, "from": "{{ from_currency|default_if_none:"" }}", "to": "{{ to_currency|default_if_none:"" }}"}'
hx-include="#filter, #order"
@@ -79,13 +79,13 @@
{% if page_number <= page_obj.number|add:3 and page_number >= page_obj.number|add:-3 %}
{% if page_obj.number == page_number %}
<li class="page-item active">
<a class="page-link tw-cursor-pointer">
<a class="page-link tw:cursor-pointer">
{{ page_number }}
</a>
</li>
{% else %}
<li class="page-item">
<a class="page-link tw-cursor-pointer"
<a class="page-link tw:cursor-pointer"
hx-get="{% url 'exchange_rates_list_pair' %}"
hx-vals='{"page": {{ page_number }}, "from": "{{ from_currency|default_if_none:"" }}", "to": "{{ to_currency|default_if_none:"" }}"}'
hx-target="#exchange-rates-table"
@@ -104,7 +104,7 @@
</a>
</li>
<li class="page-item">
<a class="page-link tw-cursor-pointer"
<a class="page-link tw:cursor-pointer"
hx-get="{% url 'exchange_rates_list_pair' %}" hx-target="#exchange-rates-table"
hx-vals='{"page": {{ page_obj.paginator.num_pages }}, "from": "{{ from_currency|default_if_none:"" }}", "to": "{{ to_currency|default_if_none:"" }}"}'
hx-include="#filter, #order"
@@ -115,7 +115,7 @@
</li>
{% endif %}
<li class="page-item">
<a class="page-link {% if not page_obj.has_next %}disabled{% endif %} tw-cursor-pointer"
<a class="page-link {% if not page_obj.has_next %}disabled{% endif %} tw:cursor-pointer"
hx-get="{% if page_obj.has_next %}{% url 'exchange_rates_list_pair' %}{% endif %}"
hx-vals='{"page": {{ page_obj.paginator.num_pages }}, "from": "{{ from_currency|default_if_none:"" }}", "to": "{{ to_currency|default_if_none:"" }}"}'
hx-include="#filter, #order"

4
app/templates/exchange_rates_services/fragments/list.html
View File

@@ -1,10 +1,10 @@
{% load currency_display %}
{% load i18n %}
<div class="container px-md-3 py-3 column-gap-5">
<div class="tw-text-3xl fw-bold font-monospace tw-w-full mb-3">
<div class="tw:text-3xl fw-bold font-monospace tw:w-full mb-3">
{% spaceless %}
<div>{% translate 'Automatic Exchange Rates' %}<span>
<a class="text-decoration-none tw-text-2xl p-1 category-action"
<a class="text-decoration-none tw:text-2xl p-1 category-action"
role="button"
data-bs-toggle="tooltip"
data-bs-title="{% translate "Add" %}"

10
app/templates/exchange_rates_services/fragments/table.html
View File

@@ -58,7 +58,7 @@
<nav aria-label="{% translate 'Page navigation' %}">
<ul class="pagination justify-content-center mt-5">
<li class="page-item">
<a class="page-link tw-cursor-pointer {% if not page_obj.has_previous %}disabled{% endif %}"
<a class="page-link tw:cursor-pointer {% if not page_obj.has_previous %}disabled{% endif %}"
hx-get="{% if page_obj.has_previous %}{% url 'exchange_rates_list_pair' %}{% endif %}"
hx-vals='{"page": 1, "from": "{{ from_currency|default_if_none:"" }}", "to": "{{ to_currency|default_if_none:"" }}"}'
hx-include="#filter, #order"
@@ -79,13 +79,13 @@
{% if page_number <= page_obj.number|add:3 and page_number >= page_obj.number|add:-3 %}
{% if page_obj.number == page_number %}
<li class="page-item active">
<a class="page-link tw-cursor-pointer">
<a class="page-link tw:cursor-pointer">
{{ page_number }}
</a>
</li>
{% else %}
<li class="page-item">
<a class="page-link tw-cursor-pointer"
<a class="page-link tw:cursor-pointer"
hx-get="{% url 'exchange_rates_list_pair' %}"
hx-vals='{"page": {{ page_number }}, "from": "{{ from_currency|default_if_none:"" }}", "to": "{{ to_currency|default_if_none:"" }}"}'
hx-target="#exchange-rates-table"
@@ -104,7 +104,7 @@
</a>
</li>
<li class="page-item">
<a class="page-link tw-cursor-pointer"
<a class="page-link tw:cursor-pointer"
hx-get="{% url 'exchange_rates_list_pair' %}" hx-target="#exchange-rates-table"
hx-vals='{"page": {{ page_obj.paginator.num_pages }}, "from": "{{ from_currency|default_if_none:"" }}", "to": "{{ to_currency|default_if_none:"" }}"}'
hx-include="#filter, #order"
@@ -115,7 +115,7 @@
</li>
{% endif %}
<li class="page-item">
<a class="page-link {% if not page_obj.has_next %}disabled{% endif %} tw-cursor-pointer"
<a class="page-link {% if not page_obj.has_next %}disabled{% endif %} tw:cursor-pointer"
hx-get="{% if page_obj.has_next %}{% url 'exchange_rates_list_pair' %}{% endif %}"
hx-vals='{"page": {{ page_obj.paginator.num_pages }}, "from": "{{ from_currency|default_if_none:"" }}", "to": "{{ to_currency|default_if_none:"" }}"}'
hx-include="#filter, #order"

2
app/templates/import_app/fragments/profiles/add.html
View File

@@ -8,7 +8,7 @@
{% block body %}
{% if message %}
<div class="alert alert-info" role="alert" id="msg" hx-preserve="true">
<h6 class="alert-heading tw-italic tw-font-bold">{% trans 'A message from the author' %}</h6>
<h6 class="alert-heading tw:italic tw:font-bold">{% trans 'A message from the author' %}</h6>
<hr>
<p class="mb-0">{{ message|linebreaksbr }}</p>
</div>

4
app/templates/import_app/fragments/profiles/list.html
View File

@@ -1,11 +1,11 @@
{% load i18n %}
<div class="container px-md-3 py-3 column-gap-5">
<div class="tw-text-3xl fw-bold font-monospace tw-w-full mb-3">
<div class="tw:text-3xl fw-bold font-monospace tw:w-full mb-3">
{% spaceless %}
<div>{% translate 'Import Profiles' %}<span>
<span class="dropdown" data-bs-toggle="tooltip"
data-bs-title="{% translate "Add" %}">
<a class="text-decoration-none tw-text-2xl p-1" role="button"
<a class="text-decoration-none tw:text-2xl p-1" role="button"
data-bs-toggle="dropdown"
data-bs-title="{% translate "Add" %}" aria-expanded="false">
<i class="fa-solid fa-circle-plus fa-fw"></i>

24
app/templates/import_app/fragments/runs/list.html
View File

@@ -15,20 +15,20 @@
{% for run in runs %}
<div class="col">
<div class="card">
<div class="card-header tw-text-sm {% if run.status == run.Status.QUEUED %}tw-text-white{% elif run.status == run.Status.PROCESSING %}text-warning{% elif run.status == run.Status.FINISHED %}text-success{% else %}text-danger{% endif %}">
<div class="card-header tw:text-sm {% if run.status == run.Status.QUEUED %}text-body{% elif run.status == run.Status.PROCESSING %}text-warning{% elif run.status == run.Status.FINISHED %}text-success{% else %}text-danger{% endif %}">
<span><i class="fa-solid {% if run.status == run.Status.QUEUED %}fa-hourglass-half{% elif run.status == run.Status.PROCESSING %}fa-spinner{% elif run.status == run.Status.FINISHED %}fa-check{% else %}fa-xmark{% endif %} fa-fw me-2"></i>{{ run.get_status_display }}</span>
</div>
<div class="card-body">
<h5 class="card-title"><i class="fa-solid fa-hashtag me-1 tw-text-xs tw-text-gray-400"></i>{{ run.id }}<span class="tw-text-xs tw-text-gray-400 ms-1">({{ run.file_name }})</span></h5>
<h5 class="card-title"><i class="fa-solid fa-hashtag me-1 tw:text-xs tw:text-gray-400"></i>{{ run.id }}<span class="tw:text-xs tw:text-gray-400 ms-1">({{ run.file_name }})</span></h5>
<hr>
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 w-100 g-4">
<div class="col">
<div class="d-flex flex-row">
<div class="d-flex flex-column">
<div class="text-body-secondary tw-text-xs tw-font-medium">
<div class="text-body-secondary tw:text-xs tw:font-medium">
{% trans 'Total Items' %}
</div>
<div class="tw-text-sm">
<div class="tw:text-sm">
{{ run.total_rows }}
</div>
</div>
@@ -38,10 +38,10 @@
<div class="col">
<div class="d-flex flex-row">
<div class="d-flex flex-column">
<div class="text-body-secondary tw-text-xs tw-font-medium">
<div class="text-body-secondary tw:text-xs tw:font-medium">
{% trans 'Processed Items' %}
</div>
<div class="tw-text-sm">
<div class="tw:text-sm">
{{ run.processed_rows }}
</div>
</div>
@@ -51,10 +51,10 @@
<div class="col">
<div class="d-flex flex-row">
<div class="d-flex flex-column">
<div class="text-body-secondary tw-text-xs tw-font-medium">
<div class="text-body-secondary tw:text-xs tw:font-medium">
{% trans 'Skipped Items' %}
</div>
<div class="tw-text-sm">
<div class="tw:text-sm">
{{ run.skipped_rows }}
</div>
</div>
@@ -64,10 +64,10 @@
<div class="col">
<div class="d-flex flex-row">
<div class="d-flex flex-column">
<div class="text-body-secondary tw-text-xs tw-font-medium">
<div class="text-body-secondary tw:text-xs tw:font-medium">
{% trans 'Failed Items' %}
</div>
<div class="tw-text-sm">
<div class="tw:text-sm">
{{ run.failed_rows }}
</div>
</div>
@@ -77,10 +77,10 @@
<div class="col">
<div class="d-flex flex-row">
<div class="d-flex flex-column">
<div class="text-body-secondary tw-text-xs tw-font-medium">
<div class="text-body-secondary tw:text-xs tw:font-medium">
{% trans 'Successful Items' %}
</div>
<div class="tw-text-sm">
<div class="tw:text-sm">
{{ run.successful_rows }}
</div>
</div>

2
app/templates/import_app/fragments/runs/log.html
View File

@@ -5,7 +5,7 @@
{% block title %}{% translate 'Logs for' %} #{{ run.id }}{% endblock %}
{% block body %}
<div class="card tw-max-h-full tw-overflow-auto">
<div class="card tw:max-h-full tw:overflow-auto">
<div class="card-body">
{{ run.logs|linebreaks }}
</div>

2
app/templates/includes/navbar.html
View File

@@ -163,7 +163,7 @@
</ul>
<ul class="navbar-nav mt-3 mb-2 mb-lg-0 mt-lg-0">
<li class="nav-item text-center w-100">
<a class="nav-item tw-text-2xl tw-cursor-pointer me-lg-4"
<a class="nav-item tw:text-2xl tw:cursor-pointer me-lg-4"
data-bs-toggle="tooltip" data-bs-placement="left" data-bs-title="{% trans "Calculator" %}"
_="on click trigger show on #calculator">
<i class="fa-solid fa-calculator"></i>

2
app/templates/includes/navbar/user_menu.html
View File

@@ -1,7 +1,7 @@
{% load settings %}
{% load i18n %}
<div class="dropdown">
<a class="tw-text-2xl" type="button" data-bs-toggle="dropdown" aria-expanded="false">
<a class="tw:text-2xl" type="button" data-bs-toggle="dropdown" aria-expanded="false">
<i class="fa-solid fa-user"></i>
</a>
<ul class="dropdown-menu dropdown-menu-start dropdown-menu-lg-end">

24
app/templates/includes/placeholders.html
View File

@@ -1,14 +1,14 @@
{# We use this to preload dynamically generated tailwind classes so the compiler can build them ahead of time #}
<div class="tw-text-blue-800"></div>
<div class="tw-text-yellow-800"></div>
<div class="tw-text-red-800"></div>
<div class="tw-text-green-800"></div>
<div class="tw-text-blue-400"></div>
<div class="tw-text-yellow-400"></div>
<div class="tw-text-red-400"></div>
<div class="tw-text-green-400"></div>
<div class="tw-bg-blue-300"></div>
<div class="tw-bg-yellow-300"></div>
<div class="tw-bg-red-300"></div>
<div class="tw-bg-green-300"></div>
<div class="tw:text-blue-800"></div>
<div class="tw:text-yellow-800"></div>
<div class="tw:text-red-800"></div>
<div class="tw:text-green-800"></div>
<div class="tw:text-blue-400"></div>
<div class="tw:text-yellow-400"></div>
<div class="tw:text-red-400"></div>
<div class="tw:text-green-400"></div>
<div class="tw:bg-blue-300"></div>
<div class="tw:bg-yellow-300"></div>
<div class="tw:bg-red-300"></div>
<div class="tw:bg-green-300"></div>

1
app/templates/includes/styles.html
View File

@@ -1,4 +1,3 @@
{% load webpack_loader %}
{% stylesheet_pack 'style' %}
{#{% stylesheet_pack 'select' %}#}

24
app/templates/includes/tools/calculator.html
View File

@@ -1,5 +1,5 @@
{% load formats %}
<div class="tw-hidden tw-w-[60vw] lg:tw-w-[30vw] xl:tw-w-[20vw] position-fixed shadow rounded-3 bg-body tw-border-gray-700 tw-border tw-border-solid tw-text-center tw-align-middle tw-z-[2000] tw-touch-none user-select-none"
<div class="tw:hidden tw:w-[60vw] tw:lg:w-[30vw] tw:xl:w-[20vw] position-fixed shadow rounded-3 bg-body tw:border-gray-700 tw:border tw:border-solid tw:text-center tw:align-middle tw:z-[2000] tw:touch-none user-select-none"
id="calculator"
hx-preserve
_="
@@ -13,8 +13,8 @@
on focusin halt the event end -- this prevents bootstrap's static offcanvas from hijacking the focus from the input when open end
on show or keyup[code is 'KeyC' and altKey is true] from body
if my.classList.contains('tw-hidden')
remove .tw-hidden from me
if my.classList.contains('tw:hidden')
remove .{'tw:hidden'} from me
measure my width, height
set xoff to (window.innerWidth/2) - (width/2)
set yoff to (window.innerHeight/2) - (height)
@@ -23,7 +23,7 @@
then call #calculator-input.focus()
else
add .scale-out-center to me then wait for animationend then remove .scale-out-center from me
add .tw-hidden to me
add .{'tw:hidden'} to me
end
end
@@ -48,7 +48,7 @@
end">
<div id="calculator-handle"
class="position-absolute bg-secondary rounded-top-2 tw-cursor-move d-flex align-items-center justify-content-center tw-top-[-20px] tw-left-[3px] tw-w-[2em] tw-h-[20px]">
class="position-absolute bg-secondary rounded-top-2 tw:cursor-move d-flex align-items-center justify-content-center tw:top-[-20px] tw:left-[3px] tw:w-[2em] tw:h-[20px]">
<i class="fa-solid fa-grip"></i>
</div>
@@ -73,31 +73,31 @@
end
then set localizedResult to it
set #calculator-result.innerText to localizedResult
then remove .tw-hidden from #calculator-result-container
then remove .{'tw:hidden'} from #calculator-result-container
then add .swing-in-top-fwd to #calculator-result-container
then settle
then remove .swing-in-top-fwd from #calculator-result-container
else
add .swing-out-top-bck to #calculator-result-container
then settle
then add .tw-hidden to #calculator-result-container
then add .{'tw:hidden'} to #calculator-result-container
then remove .swing-out-top-bck from #calculator-result-container
end
catch e
add .swing-out-top-bck to #calculator-result-container
then settle
then add .tw-hidden to #calculator-result-container
then add .{'tw:hidden'} to #calculator-result-container
then remove .swing-out-top-bck from #calculator-result-container
end"
placeholder="2 + 2">
<div class="tw-hidden" id="calculator-result-container">
<div class="tw:hidden" id="calculator-result-container">
<div class="d-flex flex-row p-2 justify-content-between">
<div class="tw-text-gray-400">=</div>
<div class="tw:text-gray-400">=</div>
<div id="calculator-result" class="user-select-all"></div>
</div>
</div>
<div class="position-absolute tw-cursor-pointer top-0 start-100 translate-middle tw-p-0 text-bg-primary border border-light rounded-circle tw-flex tw-items-center tw-justify-center tw-w-5 tw-h-5"
<div class="position-absolute tw:cursor-pointer top-0 start-100 translate-middle tw:p-0 text-bg-primary border border-light rounded-circle tw:flex tw:items-center tw:justify-center tw:w-5 tw:h-5"
_="on click trigger show on #calculator">
<i class="fa-solid fa-xmark tw-flex tw-items-center tw-justify-center tw-w-full tw-h-full"></i>
<i class="fa-solid fa-xmark tw:flex tw:items-center tw:justify-center tw:w-full tw:h-full"></i>
</div>
</div>

16
app/templates/insights/fragments/emergency_fund.html
View File

@@ -12,17 +12,17 @@
data-bs-target="#flush-collapse-{{ id }}" aria-expanded="false"
aria-controls="flush-collapse-{{ id }}">
<span>
<span class="tw-text-gray-300">{% trans "You've spent an average of" %}</span>
<span class="tw:text-gray-300">{% trans "You've spent an average of" %}</span>
<c-amount.display
:amount="data.average"
:prefix="data.currency.prefix"
:suffix="data.currency.suffix"
:decimal_places="data.currency.decimal_places"
custom_class="tw-text-3xl"
custom_class="tw:text-3xl"
divless></c-amount.display>
<span class="tw-text-gray-300">{% trans 'on the last 12 months, at this rate you could go by' %}</span>
<span class="tw-text-3xl">{{ data.months }}</span>
<span class="tw-text-gray-300">{% trans 'months without any income.' %}</span>
<span class="tw:text-gray-300">{% trans 'on the last 12 months, at this rate you could go by' %}</span>
<span class="tw:text-3xl">{{ data.months }}</span>
<span class="tw:text-gray-300">{% trans 'months without any income.' %}</span>
</span>
</button>
</h2>
@@ -31,7 +31,7 @@
<div class="accordion-body">
<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 'average expenses' %}</div>
<div class="tw:text-gray-400">{% translate 'average expenses' %}</div>
</div>
<div class="dotted-line flex-grow-1"></div>
<div class="text-end font-monospace">
@@ -45,7 +45,7 @@
</div>
<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 'liquid total' %}</div>
<div class="tw:text-gray-400">{% translate 'liquid total' %}</div>
</div>
<div class="dotted-line flex-grow-1"></div>
<div class="text-end font-monospace">
@@ -59,7 +59,7 @@
</div>
<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 'months left' %}</div>
<div class="tw:text-gray-400">{% translate 'months left' %}</div>
</div>
<div class="dotted-line flex-grow-1"></div>
<div class="text-end font-monospace">

2
app/templates/insights/fragments/sankey.html
View File

@@ -7,7 +7,7 @@
<div class="show-loading" hx-get="{% url 'insights_sankey_by_currency' %}" hx-trigger="updated from:window"
hx-swap="outerHTML" hx-include="#picker-form, #picker-type">
{% endif %}
<div class="chart-container position-relative tw-min-h-[85vh] tw-max-h-[85vh] tw-h-full tw-w-full"
<div class="chart-container position-relative tw:min-h-[85vh] tw:max-h-[85vh] tw:h-full tw:w-full"
id="sankeyContainer"
_="init call setupSankeyChart() end">
<canvas id="sankeyChart"></canvas>

22
app/templates/insights/pages/index.html
View File

@@ -8,27 +8,27 @@
<div class="container-fluid">
<div class="row my-3 h-100">
<div class="col-lg-2 col-md-3 mb-3 mb-md-0">
<div class="position-sticky tw-top-3">
<div class="position-sticky tw:top-3">
<div class="">
<div class="mb-2 w-100 d-lg-inline-flex d-grid gap-2 flex-wrap justify-content-lg-center" role="group"
_="on change
set type to event.target.value
add .tw-hidden to <#picker-form > div:not(.tw-hidden)/>
add .tw:hidden to <#picker-form > div:not(.tw:hidden)/>
if type == 'month'
remove .tw-hidden from #month-form
remove .tw:hidden from #month-form
end
if type == 'year'
remove .tw-hidden from #year-form
remove .tw:hidden from #year-form
end
if type == 'month-range'
remove .tw-hidden from #month-range-form
remove .tw:hidden from #month-range-form
end
if type == 'year-range'
remove .tw-hidden from #year-range-form
remove .tw:hidden from #year-range-form
end
if type == 'date-range'
remove .tw-hidden from #date-range-form
remove .tw:hidden from #date-range-form
end
then trigger updated"
id="picker-type">
@@ -60,16 +60,16 @@
<div id="month-form" class="">
{% crispy month_form %}
</div>
<div id="year-form" class="tw-hidden">
<div id="year-form" class="tw:hidden">
{% crispy year_form %}
</div>
<div id="month-range-form" class="tw-hidden">
<div id="month-range-form" class="tw:hidden">
{% crispy month_range_form %}
</div>
<div id="year-range-form" class="tw-hidden">
<div id="year-range-form" class="tw:hidden">
{% crispy year_range_form %}
</div>
<div id="date-range-form" class="tw-hidden">
<div id="date-range-form" class="tw:hidden">
{% crispy date_range_form %}
</div>
</form>

4
app/templates/installment_plans/fragments/list.html
View File

@@ -1,9 +1,9 @@
{% load i18n %}
<div class="container px-md-3 py-3 column-gap-5">
<div class="tw-text-3xl fw-bold font-monospace tw-w-full mb-3">
<div class="tw:text-3xl fw-bold font-monospace tw:w-full mb-3">
{% spaceless %}
<div>{% translate 'Installment Plans' %}<span>
<a class="text-decoration-none tw-text-2xl p-1 category-action"
<a class="text-decoration-none tw:text-2xl p-1 category-action"
role="button"
data-bs-toggle="tooltip"
data-bs-title="{% translate "Add" %}"

4
app/templates/installment_plans/fragments/table.html
View File

@@ -64,10 +64,10 @@
</div>
</td>
<td class="col">
<div class="{% if installment_plan.type == 'EX' %}tw-text-red-400{% else %}tw-text-green-400{% endif %}">
<div class="{% if installment_plan.type == 'EX' %}tw:text-red-400{% else %}tw:text-green-400{% endif %}">
{{ installment_plan.description }}
</div>
<div class="tw-text-sm tw-text-gray-400">{{ installment_plan.notes|linebreaksbr }}</div>
<div class="tw:text-sm tw:text-gray-400">{{ installment_plan.notes|linebreaksbr }}</div>
</td>
</tr>
{% endfor %}

10
app/templates/mini_tools/currency_converter/currency_converter.html
View File

@@ -11,7 +11,7 @@
<div class="container px-md-3 py-3 column-gap-5"
_="install init_tom_select
install init_datepicker">
<div class="tw-text-3xl fw-bold font-monospace tw-w-full mb-3">
<div class="tw:text-3xl fw-bold font-monospace tw:w-full mb-3">
<div>{% translate 'Currency Converter' %}</div>
</div>
<div class="row">
@@ -27,7 +27,7 @@
</div>
<div>{{ form.from_currency|as_crispy_field }}</div>
</div>
<div class="col text-primary tw-flex tw-items-center tw-justify-center my-3 my-lg-0">
<div class="col text-primary tw:flex tw:items-center tw:justify-center my-3 my-lg-0">
<i class="fa-solid fa-equals"></i>
</div>
<div class="col-12 col-lg-5">
@@ -45,7 +45,7 @@
</div>
</div>
<div class="row">
<div class="tw-cursor-pointer text-primary text-end"
<div class="tw:cursor-pointer text-primary text-end"
_="on click
set from_value to #id_from_currency's value
set to_value to #id_to_currency's value
@@ -66,7 +66,7 @@
{% for rate in data.rates.values %}
<div class="d-flex justify-content-between align-items-baseline mt-2">
<div class="text-end font-monospace">
<div class="tw-text-gray-400">
<div class="tw:text-gray-400">
{# <c-amount.display#}
{# :amount="1"#}
{# :prefix="data.prefix"#}
@@ -76,7 +76,7 @@
</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="rate.rate"
:prefix="rate.prefix"

8
app/templates/mini_tools/unit_price_calculator.html
View File

@@ -6,7 +6,7 @@
{% block content %}
<div class="container px-md-3 py-3 column-gap-5">
<div class="tw-text-3xl fw-bold font-monospace tw-w-full mb-3">
<div class="tw:text-3xl fw-bold font-monospace tw:w-full mb-3">
<div>{% translate 'Unit Price Calculator' %}</div>
</div>
<div class="card mb-3 d-none" id="card-placeholder">
@@ -36,7 +36,7 @@
</div>
<div class="col-lg">
<label class="form-label">{% trans 'Unit price' %}</label>
<div class="unit-price tw-text-xl" data-amount="0">0</div>
<div class="unit-price tw:text-xl" data-amount="0">0</div>
</div>
</div>
</div>
@@ -109,7 +109,7 @@
</div>
<div class="col-lg">
<label class="form-label">{% trans 'Unit price' %}</label>
<div class="unit-price tw-text-xl" data-amount="0">0</div>
<div class="unit-price tw:text-xl" data-amount="0">0</div>
</div>
</div>
</div>
@@ -134,7 +134,7 @@
</div>
<div class="col-lg">
<label class="form-label">{% trans 'Unit price' %}</label>
<div class="unit-price tw-text-xl" data-amount="0">0</div>
<div class="unit-price tw:text-xl" data-amount="0">0</div>
</div>
</div>
</div>

2
app/templates/monthly_overview/fragments/list.html
View File

@@ -6,7 +6,7 @@
{% for x in transactions_by_date %}
<div id="{{ x.grouper|slugify }}" class="transactions-divider"
_="on htmx:afterSwap from #transactions if sessionStorage.getItem(my id) is null then sessionStorage.setItem(my id, 'true')">
<div class="mt-3 mb-1 w-100 tw-text-base border-bottom bg-body transactions-divider-title">
<div class="mt-3 mb-1 w-100 tw:text-base border-bottom bg-body transactions-divider-title">
<a class="text-decoration-none d-inline-block w-100"
role="button"
data-bs-toggle="collapse"

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

@@ -6,7 +6,7 @@
<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 class="tw:text-gray-400">{% translate 'today' %}</div>
</div>
<div class="text-end font-monospace">
{% for currency in daily_spending_allowance.values %}
@@ -39,7 +39,7 @@
<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>
<div class="tw:text-gray-400">{% translate 'current' %}</div>
</div>
<div class="text-end font-monospace">
{% for currency in income_current.values %}
@@ -69,7 +69,7 @@
<hr class="my-1">
<div class="d-flex justify-content-between">
<div class="text-end font-monospace">
<div class="tw-text-gray-400">{% translate 'projected' %}</div>
<div class="tw:text-gray-400">{% translate 'projected' %}</div>
</div>
<div class="text-end font-monospace">
{% for currency in income_projected.values %}
@@ -103,7 +103,7 @@
<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>
<div class="tw:text-gray-400">{% translate 'current' %}</div>
</div>
<div class="text-end font-monospace">
{% for currency in expense_current.values %}
@@ -133,7 +133,7 @@
<hr class="my-1">
<div class="d-flex justify-content-between">
<div class="text-end font-monospace">
<div class="tw-text-gray-400">{% translate 'projected' %}</div>
<div class="tw:text-gray-400">{% translate 'projected' %}</div>
</div>
<div class="text-end font-monospace">
{% for currency in expense_projected.values %}
@@ -167,7 +167,7 @@
<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>
<div class="tw:text-gray-400">{% translate 'current' %}</div>
</div>
<div class="text-end font-monospace">
{% for currency in total_current.values %}
@@ -196,7 +196,7 @@
</div>
<div class="d-flex justify-content-between mt-3">
<div class="text-end font-monospace">
<div class="tw-text-gray-400">{% translate 'projected' %}</div>
<div class="tw:text-gray-400">{% translate 'projected' %}</div>
</div>
<div class="text-end font-monospace">
{% for currency in total_projected.values %}
@@ -256,7 +256,7 @@
<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>
<p class="tw:text-gray-400 mb-2 {% if not forloop.first %}mt-3{% endif %}">{{ p.currency.name }}</p>
<c-ui.percentage-distribution :percentage="p"></c-ui.percentage-distribution>
{% endfor %}
</c-ui.info-card>

10
app/templates/monthly_overview/pages/overview.html
View File

@@ -17,7 +17,7 @@
<div class="row mb-3 gx-xl-4 gy-3 mb-4">
{# Date picker#}
<div class="col-12 col-xl-4 flex-row align-items-center d-flex">
<div class="tw-text-base h-100 align-items-center d-flex">
<div class="tw:text-base h-100 align-items-center d-flex">
<a role="button"
class="pe-4 py-2"
hx-boost="true"
@@ -25,7 +25,7 @@
href="{% url 'monthly_overview' month=previous_month year=previous_year %}"><i
class="fa-solid fa-chevron-left"></i></a>
</div>
<div class="tw-text-3xl fw-bold font-monospace tw-w-full text-center"
<div class="tw:text-3xl fw-bold font-monospace tw:w-full text-center"
hx-get="{% url 'month_year_picker' %}"
hx-target="#generic-offcanvas-left"
hx-trigger="click, date_picker from:window"
@@ -33,7 +33,7 @@
role="button">
{{ month|month_name }} {{ year }}
</div>
<div class="tw-text-base mx-2 h-100 align-items-center d-flex">
<div class="tw:text-base mx-2 h-100 align-items-center d-flex">
<a role="button"
class="ps-3 py-2"
hx-boost="true"
@@ -143,11 +143,11 @@
</button>
</div>
{# Ordering button#}
<div class="col-sm-6 col-12 tw-content-center my-3 my-sm-0">
<div class="col-sm-6 col-12 tw:content-center my-3 my-sm-0">
<div class="text-sm-end" _="on change trigger updated on window">
<label for="order">{% translate "Order by" %}</label>
<select
class="tw-border-0 focus-visible:tw-outline-0 w-full pe-2 tw-leading-normal text-bg-tertiary tw-font-medium rounded"
class="tw:border-0 tw:focus-visible:outline-0 w-full pe-2 tw:leading-normal text-bg-tertiary tw:font-medium rounded bg-body text-body"
name="order" id="order">
<option value="default"
{% if order == 'default' %}selected{% endif %}>{% translate 'Default' %}</option>

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

@@ -19,7 +19,7 @@
{% 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"
<div class="currency-name text-start font-monospace tw:text-gray-300"
_="on click showOnlyCurrencyDataset('{{ currency.currency.name }}')">
{{ currency.currency.name }}
</div>
@@ -48,7 +48,7 @@
{% endif %}
{% if currency.consolidated and currency.consolidated.total_final != currency.total_final %}
<div class="d-flex align-items-baseline w-100">
<div class="account-name text-start font-monospace tw-text-gray-300">
<div class="account-name text-start font-monospace tw:text-gray-300">
<span class="hierarchy-line-icon"></span>{% trans 'Consolidated' %}</div>
<div class="dotted-line flex-grow-1"></div>
<div class="">
@@ -68,7 +68,7 @@
</div>
</div>
<div class="col-12 col-xl-7">
<div class="chart-container position-relative tw-min-h-[40vh] tw-h-full">
<div class="chart-container position-relative tw:min-h-[40vh] tw:h-full">
<canvas id="currencyBalanceChart"></canvas>
</div>
</div>
@@ -85,14 +85,14 @@
{% if data.grouper %}
<div class="d-flex justify-content-between mt-2">
<div class="d-flex align-items-baseline w-100">
<div class="text-start font-monospace tw-text-gray-300"><span class="badge text-bg-primary">
<div class="text-start font-monospace tw:text-gray-300"><span class="badge text-bg-primary">
{{ data.grouper }}</span></div>
</div>
</div>
{% for account in data.list %}
<div class="d-flex justify-content-between mt-2">
<div class="d-flex align-items-baseline w-100">
<div class="account-name text-start font-monospace tw-text-gray-300"
<div class="account-name text-start font-monospace tw:text-gray-300"
_="on click showOnlyAccountDataset('{{ account.account.name }}')">
<span class="hierarchy-line-icon"></span>{{ account.account.name }}</div>
<div class="dotted-line flex-grow-1"></div>
@@ -120,7 +120,7 @@
{% for account in data.list %}
<div class="d-flex justify-content-between mt-2">
<div class="d-flex align-items-baseline w-100">
<div class="account-name text-start font-monospace tw-text-gray-300"
<div class="account-name text-start font-monospace tw:text-gray-300"
_="on click showOnlyAccountDataset('{{ account.account.name }}')">
{{ account.account.name }}
</div>
@@ -152,7 +152,7 @@
</div>
</div>
<div class="col-12 col-xl-7">
<div class="chart-container position-relative tw-min-h-[40vh] tw-h-full">
<div class="chart-container position-relative tw:min-h-[40vh] tw:h-full">
<canvas id="accountBalanceChart"></canvas>
</div>
</div>

2
app/templates/quick_transactions/fragments/create_menu.html
View File

@@ -8,7 +8,7 @@
<div class="list-group list-group-flush">
{% for qt in quick_transactions %}
<a hx-get="{% url 'quick_transaction_add_as_transaction' quick_transaction_id=qt.id %}"
class="list-group-item list-group-item-action tw-cursor-pointer {% if qt.type == 'EX' %}!tw-text-red-400{% else %}!tw-text-green-400{% endif %}">{{ qt.name }}</a>
class="list-group-item list-group-item-action tw:cursor-pointer {% if qt.type == 'EX' %}tw:text-red-400!{% else %}tw:text-green-400!{% endif %}">{{ qt.name }}</a>
{% empty %}
<c-msg.empty title="{% translate "Nothing to see here..." %}" remove-padding></c-msg.empty>
{% endfor %}

2
app/templates/quick_transactions/fragments/list.html
View File

@@ -42,7 +42,7 @@
</td>
<td class="col">
<div
class="{% if qt.type == 'EX' %}tw-text-red-400{% else %}tw-text-green-400{% endif %}">
class="{% if qt.type == 'EX' %}tw:text-red-400{% else %}tw:text-green-400{% endif %}">
{{ qt.name }}
</div>
</td>

4
app/templates/quick_transactions/pages/index.html
View File

@@ -6,10 +6,10 @@
{% block content %}
<div class="container px-md-3 py-3 column-gap-5">
<div class="tw-text-3xl fw-bold font-monospace tw-w-full mb-3">
<div class="tw:text-3xl fw-bold font-monospace tw:w-full mb-3">
{% spaceless %}
<div>{% translate 'Quick Transactions' %}<span>
<a class="text-decoration-none tw-text-2xl p-1 category-action"
<a class="text-decoration-none tw:text-2xl p-1 category-action"
role="button"
data-bs-toggle="tooltip"
data-bs-title="{% translate "Add" %}"

4
app/templates/recurring_transactions/fragments/list.html
View File

@@ -1,9 +1,9 @@
{% load i18n %}
<div class="container px-md-3 py-3 column-gap-5">
<div class="tw-text-3xl fw-bold font-monospace tw-w-full mb-3">
<div class="tw:text-3xl fw-bold font-monospace tw:w-full mb-3">
{% spaceless %}
<div>{% translate 'Recurring Transactions' %}<span>
<a class="text-decoration-none tw-text-2xl p-1 category-action"
<a class="text-decoration-none tw:text-2xl p-1 category-action"
role="button"
data-bs-toggle="tooltip"
data-bs-title="{% translate "Add" %}"

4
app/templates/recurring_transactions/fragments/table.html
View File

@@ -100,10 +100,10 @@
</div>
</td>
<td class="col">
<div class="{% if recurring_transaction.type == 'EX' %}tw-text-red-400{% else %}tw-text-green-400{% endif %}">
<div class="{% if recurring_transaction.type == 'EX' %}tw:text-red-400{% else %}tw:text-green-400{% endif %}">
{{ recurring_transaction.description }}
</div>
<div class="tw-text-sm tw-text-gray-400">{{ recurring_transaction.notes|linebreaksbr }}</div>
<div class="tw:text-sm tw:text-gray-400">{{ recurring_transaction.notes|linebreaksbr }}</div>
</td>
</tr>
{% endfor %}

10
app/templates/rules/fragments/list.html
View File

@@ -1,9 +1,9 @@
{% load i18n %}
<div class="container px-md-3 py-3 column-gap-5">
<div class="tw-text-3xl fw-bold font-monospace tw-w-full mb-3">
<div class="tw:text-3xl fw-bold font-monospace tw:w-full mb-3">
{% spaceless %}
<div>{% translate 'Rules' %}<span>
<a class="text-decoration-none tw-text-2xl p-1 category-action"
<a class="text-decoration-none tw:text-2xl p-1 category-action"
role="button"
data-bs-toggle="tooltip"
data-bs-title="{% translate "Add" %}"
@@ -76,13 +76,13 @@
data-bs-title="
{% if rule.active %}{% translate "Deactivate" %}{% else %}{% translate "Activate" %}{% endif %}"
hx-get="{% url 'transaction_rule_toggle_activity' transaction_rule_id=rule.id %}">
{% if rule.active %}<i class="fa-solid fa-toggle-on tw-text-green-400"></i>{% else %}
<i class="fa-solid fa-toggle-off tw-text-red-400"></i>{% endif %}
{% if rule.active %}<i class="fa-solid fa-toggle-on tw:text-green-400"></i>{% else %}
<i class="fa-solid fa-toggle-off tw:text-red-400"></i>{% endif %}
</a>
</td>
<td class="col">
<div>{{ rule.name }}</div>
<div class="tw-text-gray-400">{{ rule.description }}</div>
<div class="tw:text-gray-400">{{ rule.description }}</div>
</td>
</tr>
{% endfor %}

14
app/templates/rules/fragments/transaction_rule/view.html
View File

@@ -7,17 +7,17 @@
{% block body %}
<div hx-get="{% url 'transaction_rule_view' transaction_rule_id=transaction_rule.id %}"
hx-trigger="updated from:window" hx-target="closest .offcanvas" class="show-loading">
<div class="tw-text-2xl">{{ transaction_rule.name }}</div>
<div class="tw-text-base tw-text-gray-400">{{ transaction_rule.description }}</div>
<div class="tw:text-2xl">{{ transaction_rule.name }}</div>
<div class="tw:text-base tw:text-gray-400">{{ transaction_rule.description }}</div>
<hr>
<div class="my-3">
<div class="tw-text-xl mb-2">{% translate 'If transaction...' %}</div>
<div class="tw:text-xl mb-2">{% translate 'If transaction...' %}</div>
<div class="card">
<div class="card-body">
{{ transaction_rule.trigger }}
</div>
<div class="card-footer text-end">
<a class="text-decoration-none tw-text-gray-400 p-1"
<a class="text-decoration-none tw:text-gray-400 p-1"
role="button"
data-bs-toggle="tooltip"
data-bs-title="{% translate "Edit" %}"
@@ -29,7 +29,7 @@
</div>
<div class="my-3">
<div class="tw-text-xl mb-2">{% translate 'Then...' %}</div>
<div class="tw:text-xl mb-2">{% translate 'Then...' %}</div>
{% for action in transaction_rule.transaction_actions.all %}
<div class="card mb-3">
<div class="card-header">
@@ -41,7 +41,7 @@
<div class="text-bg-secondary rounded-3 mt-3 p-2">{{ action.value }}</div>
</div>
<div class="card-footer text-end">
<a class="text-decoration-none tw-text-gray-400 p-1"
<a class="text-decoration-none tw:text-gray-400 p-1"
role="button"
data-bs-toggle="tooltip"
data-bs-title="{% translate "Edit" %}"
@@ -74,7 +74,7 @@
<div>{% trans 'Edit to view' %}</div>
</div>
<div class="card-footer text-end">
<a class="text-decoration-none tw-text-gray-400 p-1"
<a class="text-decoration-none tw:text-gray-400 p-1"
role="button"
data-bs-toggle="tooltip"
data-bs-title="{% translate "Edit" %}"

4
app/templates/tags/fragments/list.html
View File

@@ -1,9 +1,9 @@
{% load i18n %}
<div class="container px-md-3 py-3 column-gap-5">
<div class="tw-text-3xl fw-bold font-monospace tw-w-full mb-3">
<div class="tw:text-3xl fw-bold font-monospace tw:w-full mb-3">
{% spaceless %}
<div>{% translate 'Tags' %}<span>
<a class="text-decoration-none tw-text-2xl p-1 category-action"
<a class="text-decoration-none tw:text-2xl p-1 category-action"
role="button"
data-bs-toggle="tooltip"
data-bs-title="{% translate "Add" %}"

12
app/templates/transactions/fragments/list_all.html
View File

@@ -7,7 +7,7 @@
{% for x in transactions_by_date %}
<div id="{{ x.grouper|slugify }}"
_="on htmx:afterSettle from #transactions if sessionStorage.getItem(my id) is null then sessionStorage.setItem(my id, 'true')">
<div class="mt-3 mb-1 w-100 tw-text-base border-bottom bg-body">
<div class="mt-3 mb-1 w-100 tw:text-base border-bottom bg-body">
<a class="text-decoration-none d-inline-block w-100"
role="button"
data-bs-toggle="collapse"
@@ -47,7 +47,7 @@
<nav aria-label="{% translate 'Page navigation' %}">
<ul class="pagination justify-content-center mt-5">
<li class="page-item">
<a class="page-link tw-cursor-pointer {% if not page_obj.has_previous %}disabled{% endif %}"
<a class="page-link tw:cursor-pointer {% if not page_obj.has_previous %}disabled{% endif %}"
hx-get="{% if page_obj.has_previous %}{% url 'transactions_all_list' %}{% endif %}"
hx-vals='{"page": 1}'
hx-include="#filter, #order"
@@ -68,13 +68,13 @@
{% if page_number <= page_obj.number|add:3 and page_number >= page_obj.number|add:-3 %}
{% if page_obj.number == page_number %}
<li class="page-item active">
<a class="page-link tw-cursor-pointer">
<a class="page-link tw:cursor-pointer">
{{ page_number }}
</a>
</li>
{% else %}
<li class="page-item">
<a class="page-link tw-cursor-pointer"
<a class="page-link tw:cursor-pointer"
hx-get="{% url 'transactions_all_list' %}"
hx-vals='{"page": {{ page_number }}}'
hx-include="#filter, #order"
@@ -94,7 +94,7 @@
</a>
</li>
<li class="page-item">
<a class="page-link tw-cursor-pointer"
<a class="page-link tw:cursor-pointer"
hx-get="{% url 'transactions_all_list' %}" hx-target="#transactions-list"
hx-vals='{"page": {{ page_obj.paginator.num_pages }}}'
hx-include="#filter, #order"
@@ -105,7 +105,7 @@
</li>
{% endif %}
<li class="page-item">
<a class="page-link {% if not page_obj.has_next %}disabled{% endif %} tw-cursor-pointer"
<a class="page-link {% if not page_obj.has_next %}disabled{% endif %} tw:cursor-pointer"
hx-get="{% if page_obj.has_next %}{% url 'transactions_all_list' %}{% endif %}"
hx-vals='{"page": {{ page_obj.paginator.num_pages }}}'
hx-include="#filter, #order"

6
app/templates/transactions/pages/transactions.html
View File

@@ -28,10 +28,10 @@
</div>
</div>
<div class="col-12 col-xl-6 order-2 order-xl-1">
<div class="text-end tw-justify-end tw-flex tw-text-sm mb-3">
<div class="tw-content-center" _="on change trigger updated on window">
<div class="text-end tw:justify-end tw:flex tw:text-sm mb-3">
<div class="tw:content-center" _="on change trigger updated on window">
<label for="order">{% translate "Order by" %}</label>
<select class="tw-border-0 focus-visible:tw-outline-0 w-full pe-2 tw-leading-normal text-bg-tertiary tw-font-medium rounded" name="order" id="order">
<select class="tw:border-0 tw:focus-visible:outline-0 w-full pe-2 tw:leading-normal text-bg-tertiary tw:font-medium rounded bg-body text-body" name="order" id="order">
<option value="default" {% if order == 'default' %}selected{% endif %}>{% translate 'Default' %}</option>
<option value="older" {% if order == 'older' %}selected{% endif %}>{% translate 'Oldest first' %}</option>
<option value="newer" {% if order == 'newer' %}selected{% endif %}>{% translate 'Newest first' %}</option>

2
app/templates/transactions/pages/trash.html
View File

@@ -5,7 +5,7 @@
{% block content %}
<div class="container px-md-3 py-3 column-gap-5">
<div class="tw-text-3xl fw-bold font-monospace tw-w-full mb-3">
<div class="tw:text-3xl fw-bold font-monospace tw:w-full mb-3">
<div>{% translate 'Deleted transactions' %}</div>
</div>

4
app/templates/users/fragments/list.html
View File

@@ -1,10 +1,10 @@
{% load hijack %}
{% load i18n %}
<div class="container px-md-3 py-3 column-gap-5">
<div class="tw-text-3xl fw-bold font-monospace tw-w-full mb-3">
<div class="tw:text-3xl fw-bold font-monospace tw:w-full mb-3">
{% spaceless %}
<div>{% translate 'Users' %}<span>
<a class="text-decoration-none tw-text-2xl p-1 category-action"
<a class="text-decoration-none tw:text-2xl p-1 category-action"
role="button"
data-bs-toggle="tooltip"
data-bs-title="{% translate "Add" %}"

2
app/templates/users/generic/play_sounds.html
View File

@@ -1,3 +1,3 @@
{% load i18n %}
<i class="fa-solid fa-volume-low me-2 fa-fw"></i>{% translate 'Play sounds' %}
<span id="settings-mute-sound" class="d-inline tw-invisible"></span>
<span id="settings-mute-sound" class="d-inline tw:invisible"></span>

2
app/templates/users/generic/show_amounts.html
View File

@@ -1,3 +1,3 @@
{% load i18n %}
<i class="fa-solid fa-eye me-2 fa-fw"></i>{% translate 'Show amounts' %}
<span id="settings-hide-amounts" class="d-inline tw-invisible"></span>
<span id="settings-hide-amounts" class="d-inline tw:invisible"></span>

6
app/templates/yearly_overview/pages/overview_by_account.html
View File

@@ -16,7 +16,7 @@
<div class="row mb-3 gx-xl-4 gy-3 mb-4">
{# Date picker#}
<div class="col-12 col-xl-2 flex-row align-items-center d-flex">
<div class="tw-text-base h-100 align-items-center d-flex">
<div class="tw:text-base h-100 align-items-center d-flex">
<a role="button"
class="pe-4 py-2"
hx-boost="true"
@@ -24,10 +24,10 @@
href="{% url 'yearly_overview_account' year=previous_year %}">
<i class="fa-solid fa-chevron-left"></i></a>
</div>
<div class="tw-text-3xl fw-bold font-monospace tw-w-full text-center">
<div class="tw:text-3xl fw-bold font-monospace tw:w-full text-center">
{{ year }}
</div>
<div class="tw-text-base mx-2 h-100 align-items-center d-flex">
<div class="tw:text-base mx-2 h-100 align-items-center d-flex">
<a role="button"
class="ps-3 py-2"
hx-boost="true"

6
app/templates/yearly_overview/pages/overview_by_currency.html
View File

@@ -18,7 +18,7 @@
<div class="row mb-3 gx-xl-4 gy-3 mb-4">
{# Date picker#}
<div class="col-12 col-xl-2 flex-row align-items-center d-flex">
<div class="tw-text-base h-100 align-items-center d-flex">
<div class="tw:text-base h-100 align-items-center d-flex">
<a role="button"
class="pe-4 py-2"
hx-boost="true"
@@ -26,10 +26,10 @@
href="{% url 'yearly_overview_currency' year=previous_year %}">
<i class="fa-solid fa-chevron-left"></i></a>
</div>
<div class="tw-text-3xl fw-bold font-monospace tw-w-full text-center">
<div class="tw:text-3xl fw-bold font-monospace tw:w-full text-center">
{{ year }}
</div>
<div class="tw-text-base mx-2 h-100 align-items-center d-flex">
<div class="tw:text-base mx-2 h-100 align-items-center d-flex">
<a role="button"
class="ps-3 py-2"
hx-boost="true"

5182
frontend/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

7
frontend/package.json
View File

@@ -30,6 +30,7 @@
"@babel/preset-env": "^7.16.8",
"@fortawesome/fontawesome-free": "^6.7.2",
"@popperjs/core": "^2.11.8",
"@tailwindcss/postcss": "^4.1.10",
"air-datepicker": "^3.6.0",
"alpinejs": "^3.14.9",
"autoprefixer": "^10.4.14",
@@ -43,7 +44,6 @@
"core-js": "^3.20.3",
"cross-env": "^7.0.3",
"css-loader": "^6.8.1",
"daisyui": "^4.12.13",
"eslint": "^8.57.1",
"eslint-webpack-plugin": "^3.1.1",
"htmx.org": "^2.0.5",
@@ -51,7 +51,8 @@
"jquery": "^3.7.1",
"mathjs": "^14.5.2",
"mini-css-extract-plugin": "^2.5.1",
"postcss-loader": "^6.2.1",
"postcss": "^8.5.6",
"postcss-loader": "^8.1.1",
"postcss-preset-env": "^7.2.3",
"sass": "~1.49.9",
"sass-loader": "^13.3.2",
@@ -61,7 +62,7 @@
"stylelint-config-standard-scss": "^6.1.0",
"stylelint-webpack-plugin": "^3.1.1",
"sweetalert2": "^11.14.1",
"tailwindcss": "^3.4.1",
"tailwindcss": "^4.1.10",
"terser-webpack-plugin": "^5.3.10",
"tom-select": "^2.4.3",
"typer-dot-js": "^0.1.0",

11
frontend/postcss.config.js
View File

@@ -1,12 +1,3 @@
const postcssPresetEnv = require("postcss-preset-env");
const tailwindcss = require('tailwindcss');
module.exports = {
plugins: [postcssPresetEnv({
/* use stage 2 features + disable logical properties and values rule */
stage: 2,
features: {
'logical-properties-and-values': false
}
}), tailwindcss],
plugins: {"@tailwindcss/postcss": {}},
};

3
frontend/src/styles/_tailwind.scss
View File

@@ -1,3 +0,0 @@
@tailwind base;
@tailwind components;
@tailwind utilities;

2
frontend/src/styles/style.scss
View File

@@ -1,11 +1,11 @@
@import "variables";
@import "font-awesome.scss";
@import "tailwind.scss";
@import "bootstrap.scss";
@import "datepicker.scss";
@import "tom-select.scss";
@import "animations.scss";
@import "scrollbar.scss";
@import "./tailwind.css";
.sticky-sidebar {
position: sticky;

2
frontend/src/styles/tailwind.css Normal file
View File

@@ -0,0 +1,2 @@
@import "tailwindcss" prefix(tw) source("../../../app/templates/");
@custom-variant dark (&:where([data-bs-theme=dark], [data-bs-theme=dark] *));

24
frontend/tailwind.config.js
View File

@@ -1,24 +0,0 @@
module.exports = {
content: ['../app/templates/**/*.html'],
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
prefix: 'tw-',
corePlugins: {
preflight: false,
},
daisyui: {
themes: false, // false: only light + dark | true: all themes | array: specific themes like this ["light", "dark", "cupcake"]
darkTheme: "dark", // name of one of the included themes for dark mode
base: false, // applies background color and foreground color for root element by default
styled: true, // include daisyUI colors and design decisions for all components
utils: true, // adds responsive and modifier utility classes
prefix: "ds-", // prefix for daisyUI classnames (components, modifiers and responsive class names. Not colors)
logs: true, // Shows info about daisyUI version and used config in the console when building your CSS
themeRoot: ":root", // The element that receives theme color CSS variables
},
};