starred/WYGIWYH
1
0
Fork 0
mirror of https://github.com/eitchtee/WYGIWYH.git synced 2026-03-29 05:31:59 +02:00
Code Issues 14 Packages Projects Releases 10 Wiki Activity

refactor: improve transaction menu displaying

Browse Source 
Use hover instead of hyperscript and events
This commit is contained in:
Herculino Trotta
2025-07-19 14:42:50 -03:00
parent 61b782104d
commit 805d3f419e
1 changed files with 5 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
app/templates/cotton/transaction/item.html
View File

@@ -1,6 +1,6 @@
{% load markdown %}
{% load i18n %}
<div class="transaction {% if transaction.type == "EX" %}expense{% else %}income{% endif %}">
<div class="transaction {% if transaction.type == "EX" %}expense{% else %}income{% endif %} tw:group/transaction tw:relative tw:hover:z-10">
<div class="d-flex my-1">
{% if not disable_selection %}
<label class="px-3 d-flex align-items-center justify-content-center">
@@ -9,11 +9,9 @@
</label>
{% endif %}
<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">
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">
<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 tw:lg:text-xl text-lg-center text-center p-0 ps-1">
@@ -122,7 +120,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 tw:group-hover/transaction:visible 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"