QT/sure
1
0
Fork 0
mirror of https://github.com/we-promise/sure.git synced 2026-05-31 16:29:03 +00:00
Code Issues Packages Projects Releases Wiki Activity

ux(goals): picker stacked above name field (stepper + edit)

Browse Source 
Previously sat next to the name input via `flex items-start gap-3` so
the picker avatar competed with the input for horizontal space. Move
to its own row, centered (`flex justify-center`), positioned just
before the name field. Mirrors the categories form layout where the
avatar is the focal element above the name input.

Same change applied to the edit form: picker comes first, then name.
Stepper step 1 order is now: heading · picker · name · amount/date ·
funding accounts · notes.
This commit is contained in:
Guillem Arias
2026-05-11 21:30:56 +02:00
parent 34276f3302
commit 41ffe10a7d
2 changed files with 13 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
app/views/goals/_form_stepper.html.erb
View File

@@ -32,18 +32,16 @@
<p class="text-sm text-secondary"><%= t("goals.form_stepper.step1.subheading") %></p>
</div>
<div class="flex justify-center">
<%= render "color_picker", form: f, colors: Goal::COLORS, icons: Goal::ICONS %>
</div>
<div>
<div class="flex items-start gap-3">
<div class="shrink-0 pt-6">
<%= render "color_picker", form: f, colors: Goal::COLORS, icons: Goal::ICONS %>
</div>
<%= f.text_field :name,
placeholder: t("goals.form_stepper.step1.fields.name_placeholder"),
autofocus: true,
label: t("goals.form_stepper.step1.fields.name"),
container_class: "flex-1",
data: { goal_stepper_target: "nameInput", action: "input->goal-stepper#nameChanged" } %>
</div>
<%= f.text_field :name,
placeholder: t("goals.form_stepper.step1.fields.name_placeholder"),
autofocus: true,
label: t("goals.form_stepper.step1.fields.name"),
data: { goal_stepper_target: "nameInput", action: "input->goal-stepper#nameChanged" } %>
<p class="hidden mt-1.5 text-xs text-destructive" data-goal-stepper-target="nameError"><%= t("goals.form_stepper.errors.name_required") %></p>
</div>