QT/sure
1
0
Fork 0
mirror of https://github.com/we-promise/sure.git synced 2026-04-19 03:54:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

Outlfows UI adjustments (#443)

Browse Source 
* feat: combine icon + color in outflows section to optimize space on mobile

* fix: adjust spacing in outflows table

* fix: adjust padding and icon sizing
This commit is contained in:
Alessio Cappa
2025-12-12 10:43:10 +01:00
committed by GitHub
parent 17baece5b5
commit eb6bbb754d
1 changed files with 22 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
app/views/pages/dashboard/_outflows_donut.html.erb
View File

@@ -13,11 +13,10 @@
<div class="px-4">
<div class="flex flex-col lg:flex-row gap-8 items-center">
<!-- Donut Chart -->
<div class="w-full lg:w-1/3 max-w-[300px]">
<div class="w-full lg:w-1/3 max-w-[300px] p-4">
<div class="h-[300px] relative"
data-controller="donut-chart"
data-donut-chart-segments-value="<%= outflows_data[:categories].to_json %>"
data-donut-chart-segment-height-value="5"
data-donut-chart-segment-opacity-value="0.9"
data-donut-chart-extended-hover-value="true"
data-donut-chart-hover-extension-value="3"
@@ -69,23 +68,38 @@
</div>
</div>
</div>
<div class="py-3 shadow-border-xs rounded-lg bg-container font-medium text-sm min-w-fit max-w-full">
<div class="py-3 shadow-border-xs rounded-lg bg-container font-medium text-sm max-w-full">
<% outflows_data[:categories].each_with_index do |category, idx| %>
<%= link_to transactions_path(q: { categories: [category[:name]], start_date: period.date_range.first, end_date: period.date_range.last }),
class: "flex items-center justify-between mx-3 p-3 rounded-lg cursor-pointer group",
class: "flex items-center justify-between mx-3 p-3 rounded-lg cursor-pointer group gap-3",
data: {
turbo_frame: "_top",
category_id: category[:id],
action: "mouseenter->donut-chart#highlightSegment mouseleave->donut-chart#unhighlightSegment"
} do %>
<div class="flex items-center gap-3 flex-1 min-w-0">
<div class="w-3 h-3 rounded-full flex-shrink-0" style="background-color: <%= category[:color] %>"></div>
<%= icon(category[:icon], class: "w-4 h-4 text-primary flex-shrink-0") %>
<div class="h-6 w-6 flex-shrink-0 group-hover:scale-105 transition-all duration-300 rounded-full flex justify-center items-center"
style="
background-color: color-mix(in oklab, <%= category[:color] %> 10%, transparent);
border-color: color-mix(in oklab, <%= category[:color] %> 10%, transparent);
color: <%= category[:color] %>;">
<% if category[:icon] %>
<%= icon(category[:icon], color: "current", size: "sm") %>
<% else %>
<%= render DS::FilledIcon.new(
variant: :text,
hex_color: category[:color],
text: category[:name],
size: "sm",
rounded: true
) %>
<% end %>
</div>
<span class="text-sm font-medium text-primary truncate"><%= category[:name] %></span>
</div>
<div class="flex items-center gap-4 flex-shrink-0">
<div class="flex items-center gap-4 flex-shrink-0 text-right">
<span class="text-sm font-medium text-primary whitespace-nowrap"><%= format_money Money.new(category[:amount], category[:currency]) %></span>
<span class="text-sm text-secondary whitespace-nowrap"><%= category[:percentage] %>%</span>
<span class="text-sm text-secondary whitespace-nowrap w-10 lg:w-15"><%= category[:percentage] %>%</span>
</div>
<% end %>
<% if idx < outflows_data[:categories].size - 1 %>