PWA: Transaction UI Fixes (#283)

* PWA: Fix header display on screens smaller than tailwind md

Also makes the header not render if there aren't any transactions.
Mobile already did this, desktop didn't. Now it's consistent.

Fix #181

* PWA: Display category on `md`

* ERB: Align transaction amount column

---------

Co-authored-by: Juan José Mata <juanjo.mata@gmail.com>
This commit is contained in:
Dylan Corrales
2025-11-08 13:23:54 -05:00
committed by GitHub
parent a8f5afc351
commit b28450841e
2 changed files with 12 additions and 19 deletions

View File

@@ -89,11 +89,11 @@
</div>
</div>
<div class="hidden lg:flex items-center gap-1 col-span-2">
<div class="hidden md:flex items-center gap-1 col-span-2">
<%= render "transactions/transaction_category", transaction: transaction %>
</div>
<div class="col-span-2 ml-auto text-right">
<div class="col-span-2 col-start-11 md:col-start-auto ml-auto text-right">
<%= content_tag :p,
transaction.transfer? && view_ctx == "global" ? "+/- #{format_money(entry.amount_money.abs)}" : format_money(-entry.amount_money),
class: ["text-green-600": entry.amount.negative?] %>

View File

@@ -58,7 +58,8 @@
<% if @pagy.count > 0 || (@projected_recurring.any? && @q.blank?) %>
<div class="grow overflow-y-auto">
<div class="grid-cols-12 bg-container-inset rounded-xl px-5 py-3 text-xs uppercase font-medium text-secondary items-center mb-4 hidden md:grid">
<% if @transactions.any? %>
<div class="grid-cols-12 bg-container-inset rounded-xl px-5 py-3 text-xs uppercase font-medium text-secondary items-center mb-4 grid">
<div class="pl-0.5 col-span-8 flex items-center gap-4">
<%= check_box_tag "selection_entry",
class: "checkbox checkbox--light",
@@ -66,16 +67,8 @@
<p>transaction</p>
</div>
<p class="col-span-2">category</p>
<p class="col-span-2 justify-self-end">amount</p>
</div>
<% if @transactions.any? %>
<div class="md:hidden text-xs uppercase font-medium text-secondary mb-2 px-2">
<%= check_box_tag "selection_entry",
class: "checkbox checkbox--light mr-2 ml-1",
data: { action: "bulk-select#togglePageSelection" } %>
<span>TRANSACTION</span>
<p class="col-span-2 md:block hidden">category</p>
<p class="col-span-2 col-start-11 md:col-start-auto justify-self-end md:block">amount</p>
</div>
<% end %>