mirror of
https://github.com/we-promise/sure.git
synced 2026-04-07 14:31:25 +00:00
Fix holdings table on mobile (#1114)
* fix: extend width for holdings table in reports * fix: use right cols for header * fix: reduce padding on sections * fix: update holdings table display on dashboard * feat: set max width for holding name * fix: remove fixed width on last column * Update app/views/pages/dashboard/_investment_summary.html.erb Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> Signed-off-by: Alessio Cappa <104093777+alessiocappa@users.noreply.github.com> * fix: add check on holding.ticker to ensure it's present --------- Signed-off-by: Alessio Cappa <104093777+alessiocappa@users.noreply.github.com> Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
This commit is contained in:
Alessio Cappa
@@ -27,50 +27,52 @@
|
||||
|
||||
<% holdings = investment_statement.top_holdings(limit: 5) %>
|
||||
<% if holdings.any? %>
|
||||
<div class="bg-container-inset rounded-xl p-1 mx-4">
|
||||
<div class="px-4 py-2 flex items-center uppercase text-xs font-medium text-secondary">
|
||||
<div class="flex-1"><%= t(".holding") %></div>
|
||||
<div class="w-20 text-right"><%= t(".weight") %></div>
|
||||
<div class="w-28 text-right"><%= t(".value") %></div>
|
||||
<div class="w-24 text-right"><%= t(".return") %></div>
|
||||
</div>
|
||||
<div class="bg-container-inset rounded-xl p-1 mx-4 overflow-x-auto">
|
||||
<div class="w-max sm:w-full">
|
||||
<div class="px-4 py-2 grid grid-cols-4 items-center uppercase text-xs font-medium text-secondary">
|
||||
<div class="flex-1"><%= t(".holding") %></div>
|
||||
<div class="text-right"><%= t(".weight") %></div>
|
||||
<div class="text-right"><%= t(".value") %></div>
|
||||
<div class="text-right"><%= t(".return") %></div>
|
||||
</div>
|
||||
|
||||
<div class="shadow-border-xs rounded-lg bg-container font-medium text-sm">
|
||||
<% holdings.each_with_index do |holding, idx| %>
|
||||
<div class="p-4 flex items-center <%= idx < holdings.size - 1 ? "border-b border-primary" : "" %>">
|
||||
<div class="flex-1 flex items-center gap-3">
|
||||
<% if holding.security.logo_url.present? %>
|
||||
<img src="<%= holding.security.logo_url %>" alt="<%= holding.ticker %>" class="w-8 h-8 rounded-full">
|
||||
<% else %>
|
||||
<div class="w-8 h-8 rounded-full bg-container-inset flex items-center justify-center text-xs font-medium text-secondary">
|
||||
<%= holding.ticker[0..1] %>
|
||||
<div class="shadow-border-xs rounded-lg bg-container font-medium text-sm">
|
||||
<% holdings.each_with_index do |holding, idx| %>
|
||||
<div class="p-4 grid grid-cols-4 items-center <%= idx < holdings.size - 1 ? "border-b border-primary" : "" %>">
|
||||
<div class="flex-1 flex items-center gap-3">
|
||||
<% if holding.security.logo_url.present? %>
|
||||
<img src="<%= holding.security.logo_url %>" alt="<%= holding.ticker %>" class="w-8 h-8 rounded-full">
|
||||
<% else %>
|
||||
<div class="w-8 h-8 rounded-full bg-container-inset flex items-center justify-center text-xs font-medium text-secondary">
|
||||
<%= holding.ticker.to_s.first(2).presence || "—" %>
|
||||
</div>
|
||||
<% end %>
|
||||
<div class="max-w-32">
|
||||
<p class="font-medium truncate"><%= holding.ticker %></p>
|
||||
<p class="text-xs text-secondary"><%= truncate(holding.name, length: 20) %></p>
|
||||
</div>
|
||||
<% end %>
|
||||
<div>
|
||||
<p class="font-medium"><%= holding.ticker %></p>
|
||||
<p class="text-xs text-secondary"><%= truncate(holding.name, length: 20) %></p>
|
||||
</div>
|
||||
|
||||
<div class="text-right text-secondary">
|
||||
<%= number_to_percentage(holding.weight || 0, precision: 1) %>
|
||||
</div>
|
||||
|
||||
<div class="text-right">
|
||||
<%= format_money(holding.amount_money) %>
|
||||
</div>
|
||||
|
||||
<div class="text-right">
|
||||
<% if holding.trend %>
|
||||
<span style="color: <%= holding.trend.color %>">
|
||||
<%= holding.trend.percent_formatted %>
|
||||
</span>
|
||||
<% else %>
|
||||
<span class="text-secondary">-</span>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="w-20 text-right text-secondary">
|
||||
<%= number_to_percentage(holding.weight || 0, precision: 1) %>
|
||||
</div>
|
||||
|
||||
<div class="w-28 text-right">
|
||||
<%= format_money(holding.amount_money) %>
|
||||
</div>
|
||||
|
||||
<div class="w-24 text-right">
|
||||
<% if holding.trend %>
|
||||
<span style="color: <%= holding.trend.color %>">
|
||||
<%= holding.trend.percent_formatted %>
|
||||
</span>
|
||||
<% else %>
|
||||
<span class="text-secondary">-</span>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
<% end %>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
@@ -58,48 +58,49 @@
|
||||
<% if investment_metrics[:top_holdings].any? %>
|
||||
<div class="space-y-3">
|
||||
<h4 class="text-lg font-medium"><%= t("reports.investment_performance.top_holdings") %></h4>
|
||||
|
||||
<div class="bg-container-inset rounded-xl p-1 overflow-x-auto">
|
||||
<div class="grid grid-cols-4 items-center uppercase text-xs font-medium text-secondary px-4 py-2">
|
||||
<div class="font-medium text-secondary"><%= t("reports.investment_performance.holding") %></div>
|
||||
<div class="text-right font-medium text-secondary"><%= t("reports.investment_performance.weight") %></div>
|
||||
<div class="text-right font-medium text-secondary"><%= t("reports.investment_performance.value") %></div>
|
||||
<div class="text-right font-medium text-secondary"><%= t("reports.investment_performance.return") %></div>
|
||||
</div>
|
||||
<div class="bg-container rounded-lg shadow-border-xs">
|
||||
<% investment_metrics[:top_holdings].each_with_index do |holding, idx| %>
|
||||
<div class="grid grid-cols-4 items-center text-secondary text-sm py-3 px-4 lg:px-6">
|
||||
<div class="flex items-center gap-3">
|
||||
<% if holding.security.brandfetch_icon_url.present? %>
|
||||
<img src="<%= holding.security.brandfetch_icon_url %>" alt="<%= holding.ticker %>" class="w-6 h-6 rounded-full">
|
||||
<% elsif holding.security.logo_url.present? %>
|
||||
<img src="<%= Setting.transform_brand_fetch_url(holding.security.logo_url) %>" alt="<%= holding.ticker %>" class="w-6 h-6 rounded-full">
|
||||
<% else %>
|
||||
<div class="w-8 h-8 rounded-full bg-container-inset flex items-center justify-center text-xs font-medium text-secondary">
|
||||
<%= holding.ticker[0..1] %>
|
||||
<div class="w-max sm:w-full">
|
||||
<div role="columnheader" class="grid grid-cols-4 items-center uppercase text-xs font-medium text-secondary px-4 py-2">
|
||||
<div class="font-medium text-secondary"><%= t("reports.investment_performance.holding") %></div>
|
||||
<div class="text-right font-medium text-secondary"><%= t("reports.investment_performance.weight") %></div>
|
||||
<div class="text-right font-medium text-secondary"><%= t("reports.investment_performance.value") %></div>
|
||||
<div class="text-right font-medium text-secondary"><%= t("reports.investment_performance.return") %></div>
|
||||
</div>
|
||||
<div class="bg-container rounded-lg shadow-border-xs">
|
||||
<% investment_metrics[:top_holdings].each_with_index do |holding, idx| %>
|
||||
<div class="grid grid-cols-4 items-center text-secondary text-sm py-3 px-4 lg:px-6">
|
||||
<div class="flex items-center gap-3">
|
||||
<% if holding.security.brandfetch_icon_url.present? %>
|
||||
<img src="<%= holding.security.brandfetch_icon_url %>" alt="<%= holding.ticker %>" class="w-6 h-6 rounded-full">
|
||||
<% elsif holding.security.logo_url.present? %>
|
||||
<img src="<%= Setting.transform_brand_fetch_url(holding.security.logo_url) %>" alt="<%= holding.ticker %>" class="w-6 h-6 rounded-full">
|
||||
<% else %>
|
||||
<div class="w-8 h-8 rounded-full bg-container-inset flex items-center justify-center text-xs font-medium text-secondary">
|
||||
<%= holding.ticker[0..1] %>
|
||||
</div>
|
||||
<% end %>
|
||||
<div>
|
||||
<p class="font-medium text-primary"><%= holding.ticker %></p>
|
||||
<p class="text-xs text-secondary"><%= truncate(holding.name, length: 25) %></p>
|
||||
</div>
|
||||
<% end %>
|
||||
<div>
|
||||
<p class="font-medium text-primary"><%= holding.ticker %></p>
|
||||
<p class="text-xs text-secondary"><%= truncate(holding.name, length: 25) %></p>
|
||||
</div>
|
||||
<div class="text-right text-secondary"><%= number_to_percentage(holding.weight || 0, precision: 1) %></div>
|
||||
<div class="text-right font-medium text-primary"><%= format_money(holding.amount_money) %></div>
|
||||
<div class="text-right">
|
||||
<% if holding.trend %>
|
||||
<span style="color: <%= holding.trend.color %>">
|
||||
<%= holding.trend.percent_formatted %>
|
||||
</span>
|
||||
<% else %>
|
||||
<span class="text-secondary"><%= t("reports.investment_performance.no_data") %></span>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-right text-secondary"><%= number_to_percentage(holding.weight || 0, precision: 1) %></div>
|
||||
<div class="text-right font-medium text-primary"><%= format_money(holding.amount_money) %></div>
|
||||
<div class="text-right">
|
||||
<% if holding.trend %>
|
||||
<span style="color: <%= holding.trend.color %>">
|
||||
<%= holding.trend.percent_formatted %>
|
||||
</span>
|
||||
<% else %>
|
||||
<span class="text-secondary"><%= t("reports.investment_performance.no_data") %></span>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
<% if idx < investment_metrics[:top_holdings].size - 1 %>
|
||||
<%= render "shared/ruler", classes: "mx-3 lg:mx-4" %>
|
||||
<% if idx < investment_metrics[:top_holdings].size - 1 %>
|
||||
<%= render "shared/ruler", classes: "mx-3 lg:mx-4" %>
|
||||
<% end %>
|
||||
<% end %>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -153,7 +153,7 @@
|
||||
<%= icon("grip-vertical", size: "sm") %>
|
||||
</button>
|
||||
</div>
|
||||
<div class="py-4 px-6" data-reports-section-target="content">
|
||||
<div class="p-4" data-reports-section-target="content">
|
||||
<%= render partial: section[:partial], locals: section[:locals] %>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
Reference in New Issue
Block a user