chore: update tailwind to v4

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
@@ -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"
@@ -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>
@@ -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>