WIP
This commit is contained in:
@@ -25,7 +25,7 @@
|
||||
|
||||
<div class="bg-surface rounded-xl p-1 space-y-1">
|
||||
<div class="px-4 py-2 flex items-center uppercase text-xs font-medium text-secondary">
|
||||
<div class="hidden md:block">Name</div>
|
||||
<div class="hidden sm:block">Name</div>
|
||||
<div class="ml-auto text-right flex items-center gap-6">
|
||||
<div class="w-24">
|
||||
<p>Weight</p>
|
||||
@@ -47,21 +47,22 @@
|
||||
</div>
|
||||
|
||||
<div class="ml-auto flex items-center text-right gap-6">
|
||||
<div class="w-24 hidden md:flex items-center justify-end gap-2">
|
||||
<%= render partial: "shared/progress_circle", locals: { progress: account_group.weight, color: account_group.color } %>
|
||||
<p><%= number_to_percentage(account_group.weight, precision: 0) %></p>
|
||||
</div>
|
||||
|
||||
<div class="md:hidden flex items-center gap-2">
|
||||
<div class="flex gap-[3px]">
|
||||
<% 10.times do |i| %>
|
||||
<div class="w-[2px] h-[10px] rounded-lg <%= i < (account_group.weight / 10.0).ceil ? '' : 'opacity-20' %>" style="background-color: <%= account_group.color %>;"></div>
|
||||
<% end %>
|
||||
<div class="w-24 flex items-center justify-end gap-2">
|
||||
<div class="hidden sm:flex sm:items-center sm:justify-end sm:gap-2">
|
||||
<%= render partial: "shared/progress_circle", locals: { progress: account_group.weight, color: account_group.color } %>
|
||||
<p><%= number_to_percentage(account_group.weight, precision: 0) %></p>
|
||||
</div>
|
||||
<div class="flex sm:hidden items-center gap-2">
|
||||
<div class="flex gap-[3px]">
|
||||
<% 10.times do |i| %>
|
||||
<div class="w-[2px] h-[10px] rounded-lg <%= i < (account_group.weight / 10.0).ceil ? '' : 'opacity-20' %>" style="background-color: <%= account_group.color %>;"></div>
|
||||
<% end %>
|
||||
</div>
|
||||
<p class="text-sm"><%= number_to_percentage(account_group.weight, precision: 2) %></p>
|
||||
</div>
|
||||
<p class="text-sm"><%= number_to_percentage(account_group.weight, precision: 2) %></p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="w-40">
|
||||
<p><%= format_money(account_group.total_money) %></p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -69,29 +70,33 @@
|
||||
|
||||
<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-4 sm:pl-12 pr-4 py-3 flex items-center justify-between text-sm font-medium">
|
||||
<div class="hidden sm:flex sm:items-center sm:gap-3">
|
||||
<%= 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-24 hidden md:flex items-center justify-end gap-2">
|
||||
<%= render partial: "shared/progress_circle", locals: { progress: account.weight, color: account_group.color } %>
|
||||
<p><%= number_to_percentage(account.weight, precision: 0) %></p>
|
||||
</div>
|
||||
|
||||
<div class="md:hidden flex items-center gap-2">
|
||||
<div class="flex">
|
||||
<% 10.times do |i| %>
|
||||
<div class="h-4 w-1 mx-0.5 rounded-sm <%= i < (account.weight / 10.0).ceil ? '' : 'opacity-20' %>" style="background-color: <%= account_group.color %>;"></div>
|
||||
<% end %>
|
||||
<div class="w-24 flex items-center justify-end gap-2">
|
||||
<div class="hidden sm:flex sm:items-center sm:justify-end sm:gap-2">
|
||||
<%= render partial: "shared/progress_circle", locals: { progress: account.weight, color: account_group.color } %>
|
||||
<p><%= number_to_percentage(account.weight, precision: 0) %></p>
|
||||
</div>
|
||||
<div class="flex sm:hidden items-center gap-2">
|
||||
<div class="flex gap-[3px]">
|
||||
<% 10.times do |i| %>
|
||||
<div class="w-[2px] h-[10px] rounded-lg <%= i < (account.weight / 10.0).ceil ? '' : 'opacity-20' %>" style="background-color: <%= account_group.color %>;"></div>
|
||||
<% end %>
|
||||
</div>
|
||||
<p class="text-sm"><%= number_to_percentage(account.weight, precision: 2) %></p>
|
||||
</div>
|
||||
<p class="text-sm"><%= number_to_percentage(account.weight, precision: 2) %></p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="w-40">
|
||||
<p><%= format_money(account.balance_money) %></p>
|
||||
<div class="sm:hidden text-xs text-secondary truncate max-w-28">
|
||||
<%= account.name %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user