QT/sure
1
0
Fork 0
mirror of https://github.com/we-promise/sure.git synced 2026-06-01 00:39:01 +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

6
app/views/goals/_form_edit.html.erb
View File

@@ -8,6 +8,10 @@
url: goal_path(goal), url: goal_path(goal),
method: :patch, method: :patch,
class: "space-y-3" do |f| %> class: "space-y-3" do |f| %>
<div class="flex justify-center">
<%= render "color_picker", form: f, colors: Goal::COLORS, icons: Goal::ICONS %>
</div>
<%= f.text_field :name, <%= f.text_field :name,
label: t("goals.form_stepper.step1.fields.name"), label: t("goals.form_stepper.step1.fields.name"),
required: true, required: true,
@@ -50,8 +54,6 @@
</div> </div>
</div> </div>
<%= render "color_picker", form: f, colors: Goal::COLORS, icons: Goal::ICONS %>
<%= f.text_area :notes, <%= f.text_area :notes,
label: t("goals.form_stepper.step1.fields.notes"), label: t("goals.form_stepper.step1.fields.notes"),
rows: 2 %> rows: 2 %>

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