mirror of
https://github.com/we-promise/sure.git
synced 2026-05-31 16:29:03 +00:00
a695fb528c
Tail of the redundancy + clarity pass:
- Goal card on the index drops ".00" cents from every Money.format
call (now `format(precision: 0)`). The card uses the same
visual rhythm as the show page; cents add zero info at this
scale.
- Card's "behind"-status footer now reads "Save $X/mo to catch
up" with X = `catch_up_delta_money` (the delta the user must
add), not the full `monthly_target_amount` (which read as a
total monthly burn). Same fix as the show-page banner.
- Pending-pledge banner title becomes pluralized: drops "0 days
left" / "1 days left" grammatical bugs. New locale tree:
title.zero → "Pending: $X into Y · expires today"
title.one → "Pending: $X into Y · 1 day left"
title.other → "Pending: $X into Y · N days left"
Also drops the "Watching for" phrasing (system-talk) for
"Pending:" (state-talk) and drops cents from the amount.
- `confirm_cancel_body` likewise renders amount without cents.
Cards and banner now read consistently with the show page; one
voice across the surfaces.
64 lines
3.3 KiB
Plaintext
64 lines
3.3 KiB
Plaintext
<div class="group relative bg-container rounded-xl shadow-border-xs hover:bg-surface-hover transition-colors p-6 <%= "opacity-75" if goal.paused? || goal.archived? %>"
|
|
data-goals-filter-target="card"
|
|
data-goal-name="<%= goal.name %>"
|
|
data-goal-status="<%= goal.display_status %>">
|
|
<div class="flex items-start gap-3">
|
|
<%= render Goals::AvatarComponent.new(goal: goal, size: "lg") %>
|
|
<div class="min-w-0 flex-1">
|
|
<div class="flex items-center gap-2 mb-0.5">
|
|
<p class="text-sm font-medium text-primary truncate">
|
|
<a href="<%= goal_path(goal) %>"
|
|
aria-label="<%= aria_label %>"
|
|
class="before:absolute before:inset-0 before:rounded-xl focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-alpha-black-100">
|
|
<%= goal.name %>
|
|
</a>
|
|
</p>
|
|
<%= render Goals::StatusPillComponent.new(goal: goal) %>
|
|
</div>
|
|
<p class="text-[11px] text-subdued truncate"><%= secondary_line %></p>
|
|
</div>
|
|
|
|
<div class="shrink-0 relative" style="width: <%= Goals::CardComponent::RING_SIZE %>px; height: <%= Goals::CardComponent::RING_SIZE %>px;">
|
|
<svg width="<%= Goals::CardComponent::RING_SIZE %>" height="<%= Goals::CardComponent::RING_SIZE %>" viewBox="0 0 <%= Goals::CardComponent::RING_SIZE %> <%= Goals::CardComponent::RING_SIZE %>" aria-hidden="true">
|
|
<circle cx="<%= Goals::CardComponent::RING_SIZE / 2.0 %>"
|
|
cy="<%= Goals::CardComponent::RING_SIZE / 2.0 %>"
|
|
r="<%= ring_radius %>"
|
|
fill="none"
|
|
stroke="var(--budget-unallocated-fill)"
|
|
stroke-width="<%= Goals::CardComponent::RING_STROKE %>" />
|
|
<circle cx="<%= Goals::CardComponent::RING_SIZE / 2.0 %>"
|
|
cy="<%= Goals::CardComponent::RING_SIZE / 2.0 %>"
|
|
r="<%= ring_radius %>"
|
|
fill="none"
|
|
stroke="<%= ring_color %>"
|
|
stroke-width="<%= Goals::CardComponent::RING_STROKE %>"
|
|
stroke-linecap="round"
|
|
stroke-dasharray="<%= ring_circumference %>"
|
|
stroke-dashoffset="<%= ring_offset %>"
|
|
transform="rotate(-90 <%= Goals::CardComponent::RING_SIZE / 2.0 %> <%= Goals::CardComponent::RING_SIZE / 2.0 %>)" />
|
|
</svg>
|
|
<div class="absolute inset-0 flex items-center justify-center text-[11px] font-medium text-primary tabular-nums" aria-hidden="true">
|
|
<%= progress_percent %>%
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-5">
|
|
<div class="flex items-baseline gap-1.5">
|
|
<span class="text-lg font-medium text-primary tabular-nums privacy-sensitive"><%= goal.current_balance_money.format(precision: 0) %></span>
|
|
<span class="text-xs text-subdued tabular-nums">/ <%= goal.target_amount_money.format(precision: 0) %></span>
|
|
</div>
|
|
<% if pace_line %>
|
|
<p class="text-[11px] text-subdued tabular-nums mt-1"><%= pace_line %></p>
|
|
<% end %>
|
|
</div>
|
|
|
|
<div class="mt-4 flex items-center justify-between">
|
|
<div class="flex items-center gap-2">
|
|
<%= render Goals::AccountStackComponent.new(accounts: linked_accounts) %>
|
|
<span class="text-[11px] text-subdued"><%= linked_accounts_count_label %></span>
|
|
</div>
|
|
<span class="text-[11px] text-subdued tabular-nums"><%= footer_line %></span>
|
|
</div>
|
|
</div>
|