QT/sure
1
0
Fork 0
mirror of https://github.com/we-promise/sure.git synced 2026-05-30 07:49:01 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(savings_goals): equalize ONGOING/COMPLETED header spacing across cards and empty state

Browse Source 
Move section gap from per-child mt-3 to a single mb-4 on the header, and
toggle the grid wrapper hidden when no cards are visible. The previous
markup gave inconsistent ONGOING-tag-to-content distance because the
empty card sat below a 0-height grid, stacking margins differently than
the cards layout.
This commit is contained in:
Guillem Arias
2026-05-11 12:48:52 +02:00
parent ffd72c0234
commit 638749c1d5
2 changed files with 9 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
app/javascript/controllers/savings_goals_filter_controller.js
View File

@@ -5,7 +5,7 @@ import { Controller } from "@hotwired/stimulus";
// and data-goal-status; the controller toggles `.hidden` on cards
// based on the active query/chip.
export default class extends Controller {
static targets = ["input", "chip", "card", "empty"];
static targets = ["input", "chip", "card", "empty", "grid"];
static values = { status: { type: String, default: "all" } };
connect() {
@@ -32,6 +32,9 @@ export default class extends Controller {
if (this.hasEmptyTarget) {
this.emptyTarget.classList.toggle("hidden", visible > 0);
}
if (this.hasGridTarget) {
this.gridTarget.classList.toggle("hidden", visible === 0);
}
}
selectChip(event) {

10
app/views/savings_goals/index.html.erb
View File

@@ -106,17 +106,17 @@
<% end %>
<% if @active_goals.any? %>
<div class="flex items-center gap-1.5 mb-2.5 text-[11px] font-medium uppercase tracking-wide text-secondary">
<div class="flex items-center gap-1.5 mb-4 text-[11px] font-medium uppercase tracking-wide text-secondary">
<span><%= t(".ongoing_section.heading") %></span>
<span class="text-subdued">·</span>
<span class="tabular-nums"><%= @active_goals.size %></span>
</div>
<div class="mt-3 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3.5">
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3.5" data-savings-goals-filter-target="grid">
<% @active_goals.each do |goal| %>
<%= render Savings::GoalCardComponent.new(goal: goal) %>
<% end %>
</div>
<div class="hidden bg-container rounded-xl shadow-border-xs py-10 text-center mt-3" data-savings-goals-filter-target="empty">
<div class="hidden bg-container rounded-xl shadow-border-xs py-10 text-center" data-savings-goals-filter-target="empty">
<p class="text-sm text-secondary"><%= t(".search.empty") %></p>
</div>
<% else %>
@@ -128,12 +128,12 @@
<% if @completed_goals.any? %>
<section>
<div class="flex items-center gap-1.5 mb-2.5 text-[11px] font-medium uppercase tracking-wide text-secondary">
<div class="flex items-center gap-1.5 mb-4 text-[11px] font-medium uppercase tracking-wide text-secondary">
<span><%= t(".completed_section.heading") %></span>
<span class="text-subdued">·</span>
<span class="tabular-nums"><%= @completed_goals.size %></span>
</div>
<div class="mt-3 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3.5">
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3.5">
<% @completed_goals.each do |goal| %>
<%= render Savings::GoalCardComponent.new(goal: goal) %>
<% end %>