graham/towerops
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Improve optional field labels on site form

Browse source 
Add greyed out '(optional)' text to Parent Site, Location, and
Description field labels for better UX. The optional indicator uses
a lighter color (text-zinc-500/400) to distinguish it from the
required field label.
This commit is contained in:
Graham McIntire 2026-01-17 12:33:23 -06:00
parent f9a18fa423
commit 9735e6e569
No known key found for this signature in database
1 changed files with 46 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

55
lib/towerops_web/live/site_live/form.html.heex
View file

@ -30,17 +30,54 @@
<.form for={@form} id="site-form" phx-change="validate" phx-submit="save">
<.input field={@form[:name]} type="text" label="Site Name" required />
<.input
field={@form[:parent_site_id]}
type="select"
label="Parent Site (optional)"
prompt="No parent site"
options={Enum.map(@available_parent_sites, &{&1.name, &1.id})}
/>
<div class="mb-4">
<label>
<span class="block text-sm font-medium text-zinc-900 dark:text-zinc-100 mb-2">
Parent Site
<span class="text-zinc-500 dark:text-zinc-400 font-normal">(optional)</span>
</span>
<select
id={@form[:parent_site_id].id}
name={@form[:parent_site_id].name}
class="block w-full rounded-lg border-0 py-2 px-3 text-zinc-900 shadow-sm ring-1 ring-inset ring-zinc-300 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6 dark:bg-zinc-800 dark:text-zinc-100 dark:ring-zinc-700 dark:focus:ring-blue-500"
>
<option value="">No parent site</option>
{Phoenix.HTML.Form.options_for_select(
Enum.map(@available_parent_sites, &{&1.name, &1.id}),
@form[:parent_site_id].value
)}
</select>
</label>
</div>
<.input field={@form[:location]} type="text" label="Location" />
<div class="mb-4">
<label>
<span class="block text-sm font-medium text-zinc-900 dark:text-zinc-100 mb-2">
Location <span class="text-zinc-500 dark:text-zinc-400 font-normal">(optional)</span>
</span>
<input
type="text"
id={@form[:location].id}
name={@form[:location].name}
value={@form[:location].value}
class="block w-full rounded-lg border-0 py-2 px-3 text-zinc-900 shadow-sm ring-1 ring-inset ring-zinc-300 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6 dark:bg-zinc-800 dark:text-zinc-100 dark:ring-zinc-700 dark:focus:ring-blue-500"
/>
</label>
</div>
<.input field={@form[:description]} type="textarea" label="Description" />
<div class="mb-4">
<label>
<span class="block text-sm font-medium text-zinc-900 dark:text-zinc-100 mb-2">
Description
<span class="text-zinc-500 dark:text-zinc-400 font-normal">(optional)</span>
</span>
<textarea
id={@form[:description].id}
name={@form[:description].name}
class="block w-full rounded-lg border-0 py-2 px-3 text-zinc-900 shadow-sm ring-1 ring-inset ring-zinc-300 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6 dark:bg-zinc-800 dark:text-zinc-100 dark:ring-zinc-700 dark:focus:ring-blue-500"
>{Phoenix.HTML.Form.normalize_value("textarea", @form[:description].value)}</textarea>
</label>
</div>
<%= if @available_agents != [] do %>
<div class="mt-6 border-t pt-6">