QT/sure
1
0
Fork 0
mirror of https://github.com/we-promise/sure.git synced 2026-04-07 14:31:25 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: Investments page mobile (#654)

Browse Source 
* fix: Mobile layout UI adjustment for trade page

* fix: Adjust table in holdings tab on mobile

* fix: properly manage width on desktop
This commit is contained in:
Alessio Cappa
2026-01-15 10:32:52 +01:00
committed by GitHub
parent 3f62e84531
commit a50c48d3cf
2 changed files with 42 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
app/views/holdings/index.html.erb
View File

@@ -1,5 +1,5 @@
<%= turbo_frame_tag dom_id(@account, "holdings") do %>
<div class="bg-container space-y-4 p-5 rounded-xl shadow-border-xs">
<div class="bg-container space-y-4 px-3 py-4 lg:p-4 rounded-xl shadow-border-xs">
<div class="flex items-center justify-between">
<%= tag.h2 t(".holdings"), class: "font-medium text-lg" %>
<%= link_to new_trade_path(account_id: @account.id),
@@ -13,22 +13,26 @@
<% end %>
</div>
<div class="bg-container-inset rounded-xl p-1">
<div class="grid grid-cols-12 items-center uppercase text-xs font-medium text-secondary px-4 py-2">
<%= tag.p t(".name"), class: "col-span-4" %>
<%= tag.p t(".weight"), class: "col-span-2 justify-self-end" %>
<%= tag.p t(".average_cost"), class: "col-span-2 justify-self-end" %>
<%= tag.p t(".holdings"), class: "col-span-2 justify-self-end" %>
<%= tag.p t(".return"), class: "col-span-2 justify-self-end" %>
</div>
<div class="bg-container-inset rounded-xl p-1 overflow-x-auto">
<div class="w-max lg:w-full">
<div class="grid grid-cols-12 items-center uppercase text-xs font-medium text-secondary px-4 py-2">
<%= tag.p t(".name"), class: "col-span-4" %>
<%= tag.p t(".weight"), class: "col-span-2 justify-self-end" %>
<%= tag.p t(".average_cost"), class: "col-span-2 justify-self-end" %>
<%= tag.p t(".holdings"), class: "col-span-2 justify-self-end" %>
<%= tag.p t(".return"), class: "col-span-2 justify-self-end" %>
</div>
<div class="bg-container rounded-lg shadow-border-xs">
<%= render "holdings/cash", account: @account %>
<%= render "shared/ruler" %>
<div class="bg-container rounded-lg shadow-border-xs">
<%= render "holdings/cash", account: @account %>
<%= render "shared/ruler" %>
<% if @account.current_holdings.any? %>
<%= render partial: "holdings/holding", collection: @account.current_holdings, spacer_template: "shared/ruler" %>
<% end %>
<% if @account.current_holdings.any? %>
<%= render partial: "holdings/holding",
collection: @account.current_holdings,
spacer_template: "shared/ruler" %>
<% end %>
</div>
</div>
</div>
</div>

35
app/views/trades/_trade.html.erb
View File

@@ -7,19 +7,30 @@
<div class="grid grid-cols-12 items-center <%= entry.excluded ? "text-gray-400 bg-gray-25" : "text-primary" %> text-sm font-medium p-4">
<div class="col-span-8 flex items-center gap-4">
<%= check_box_tag dom_id(entry, "selection"),
class: "checkbox checkbox--light",
data: { id: entry.id, "bulk-select-target": "row", action: "bulk-select#toggleRowSelection" } %>
class: "checkbox checkbox--light hidden lg:block",
data: {
id: entry.id,
"bulk-select-target": "row",
action: "bulk-select#toggleRowSelection",
checkbox_toggle_target: "selectionEntry"
} %>
<div class="max-w-full">
<%= tag.div class: ["flex items-center gap-2"] do %>
<%= render DS::FilledIcon.new(
variant: :text,
text: entry.name,
size: "sm",
rounded: true
) %>
<%= tag.div class: ["flex items-center gap-2 min-w-0"] do %>
<div class="hidden lg:flex">
<%= render DS::FilledIcon.new(
variant: :text,
text: entry.name,
size: "sm",
rounded: true
) %>
</div>
<div class="truncate">
<div class="flex lg:hidden">
<%= render "categories/badge_mobile", category: trade.category || trade_category %>
</div>
<div class="truncate flex-shrink">
<%= link_to entry.name,
entry_path(entry),
data: { turbo_frame: "drawer", turbo_prefetch: false },
@@ -29,11 +40,11 @@
</div>
</div>
<div class="col-span-2 flex items-center">
<div class="hidden lg:flex">
<%= render "categories/badge", category: trade.category || trade_category %>
</div>
<div class="col-span-2 justify-self-end font-medium text-sm">
<div class="shrink-0 col-span-4 lg:col-span-2 ml-auto text-right">
<%= content_tag :p,
format_money(-entry.amount_money),
class: ["text-green-600": entry.amount.negative?] %>