Fix balance sheet dashboard section on iPhone (#1318)

* Update _balance_sheet.html.erb

Update Balance Sheet to work on iPhone Pro Max without scrolling

Signed-off-by: Derek Brown <browndw4@gmail.com>

* Update _group_weight.html.erb

Make the % icon smaller (5 bars not 10) to fit better on smaller format devices

Signed-off-by: Derek Brown <browndw4@gmail.com>

* Update _group_weight.html.erb

Resolve Codex comment

Signed-off-by: Derek Brown <browndw4@gmail.com>

* Update _balance_sheet.html.erb

Increasing width of the weight column

Signed-off-by: Derek Brown <browndw4@gmail.com>

---------

Signed-off-by: Derek Brown <browndw4@gmail.com>
This commit is contained in:
Derek Brown
2026-04-07 14:53:04 -04:00
committed by GitHub
parent 2658c36b05
commit 133582ef4d
2 changed files with 18 additions and 18 deletions

View File

@@ -37,12 +37,12 @@
<div class="bg-container-inset rounded-xl p-1 space-y-1 overflow-x-auto">
<div class="px-4 py-2 flex items-center uppercase text-xs font-medium text-secondary">
<div class="w-40">Name</div>
<div class="ml-auto text-right flex items-center gap-6">
<div class="w-24">
<div class="w-40 shrink-0">Name</div>
<div class="ml-auto text-right flex items-center gap-2">
<div class="w-20 shrink-0">
<p>Weight</p>
</div>
<div class="w-40">
<div class="w-24 shrink-0">
<p>Value</p>
</div>
</div>
@@ -55,34 +55,34 @@
<%= idx == classification_group.account_groups.size - 1 ? "rounded-b-lg" : "" %>
">
<summary class="cursor-pointer p-4 group-open:bg-container rounded-lg flex items-center justify-between">
<div class="w-40 shrink-0 flex items-center gap-4">
<div class="w-40 shrink-0 flex items-center gap-1">
<%= icon("chevron-right", class: "group-open:rotate-90") %>
<p><%= account_group.name %></p>
</div>
<div class="flex items-center justify-between text-right gap-6">
<div class="w-28 shrink-0 flex items-center justify-end gap-2">
<div class="flex items-center justify-between text-right gap-2">
<div class="w-20 shrink-0 flex items-center justify-end gap-2">
<%= render "pages/dashboard/group_weight", weight: account_group.weight, color: account_group.color %>
</div>
<div class="w-40 shrink-0">
<p class="privacy-sensitive"><%= format_money(account_group.total_money) %></p>
<div class="w-24 shrink-0">
<p class="privacy-sensitive"><%= format_money(account_group.total_money, precision: 0) %></p>
</div>
</div>
</summary>
<div>
<% account_group.accounts.each_with_index do |account, idx| %>
<div class="pl-12 pr-4 py-3 flex items-center justify-between text-sm font-medium">
<div class="flex items-center gap-3">
<div class="pl-7 pr-4 py-3 flex items-center justify-between text-sm font-medium">
<div class="flex items-center gap-2">
<%= render "accounts/logo", account: account, size: "sm", color: account_group.color %>
<%= link_to account.name, account_path(account) %>
</div>
<div class="ml-auto flex items-center text-right gap-6">
<div class="w-28 shrink-0 flex items-center justify-end gap-2">
<div class="ml-auto flex items-center text-right gap-2">
<div class="w-14 shrink-0 flex items-center justify-end gap-2">
<%
# Calculate weight as percentage of classification total
classification_total = classification_group.total_money.amount
@@ -91,8 +91,8 @@
<%= render "pages/dashboard/group_weight", weight: account_weight, color: account_group.color %>
</div>
<div class="w-40 shrink-0">
<p class="privacy-sensitive"><%= format_money(account.balance_money) %></p>
<div class="w-24 shrink-0">
<p class="privacy-sensitive"><%= format_money(account.balance_money, precision: 0) %></p>
</div>
</div>
</div>

View File

@@ -4,9 +4,9 @@
<div class="w-full flex items-center justify-between gap-2">
<div class="flex gap-[3px]">
<% 10.times do |i| %>
<div class="w-0.5 h-2.5 rounded-lg <%= i < (effective_weight / 10.0).ceil ? "" : "opacity-20" %>" style="background-color: <%= color %>;"></div>
<% 5.times do |i| %>
<div class="w-0.5 h-2.5 rounded-lg <%= i < (effective_weight / 20.0).ceil ? "" : "opacity-20" %>" style="background-color: <%= color %>;"></div>
<% end %>
</div>
<p class="text-sm privacy-sensitive"><%= number_to_percentage(effective_weight, precision: 2) %></p>
<p class="text-sm privacy-sensitive"><%= number_to_percentage(effective_weight, precision: 0) %></p>
</div>