add admin UX quick wins: nav guard, block descriptions, input labels
All checks were successful
deploy / deploy (push) Successful in 1m16s
All checks were successful
deploy / deploy (push) Successful in 1m16s
- rename "Providers" to "Print providers" in sidebar (#110) - add LiveView navigation guard to EditorKeyboard hook — intercepts link clicks in capture phase when editor has unsaved changes (#103) - add description field to all 26 block types, shown as subtitle in block picker; filter searches descriptions too (#104) - add visible column headers (Label / Path) and proper sr-only labels with for attributes on nav editor inputs (#106) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -416,7 +416,8 @@ defmodule BerrypodWeb.BlockEditorComponents do
|
||||
filtered =
|
||||
assigns.allowed_blocks
|
||||
|> Enum.filter(fn {_type, def} ->
|
||||
filter == "" or String.contains?(String.downcase(def.name), filter)
|
||||
filter == "" or String.contains?(String.downcase(def.name), filter) or
|
||||
String.contains?(String.downcase(Map.get(def, :description, "")), filter)
|
||||
end)
|
||||
|> Enum.sort_by(fn {_type, def} -> def.name end)
|
||||
|
||||
@@ -454,7 +455,10 @@ defmodule BerrypodWeb.BlockEditorComponents do
|
||||
class="block-picker-item"
|
||||
>
|
||||
<.icon name={def.icon} class="size-5" />
|
||||
<span>{def.name}</span>
|
||||
<span class="block-picker-item-name">{def.name}</span>
|
||||
<span :if={def[:description]} class="block-picker-item-desc">
|
||||
{def.description}
|
||||
</span>
|
||||
</button>
|
||||
|
||||
<p :if={@filtered_blocks == []} class="block-picker-empty">
|
||||
|
||||
@@ -91,7 +91,7 @@
|
||||
navigate={~p"/admin/providers"}
|
||||
class={admin_nav_active?(@current_path, "/admin/providers")}
|
||||
>
|
||||
<.icon name="hero-link" class="size-5" /> Providers
|
||||
<.icon name="hero-link" class="size-5" /> Print providers
|
||||
</.link>
|
||||
</li>
|
||||
<li>
|
||||
|
||||
@@ -158,13 +158,19 @@ defmodule BerrypodWeb.Admin.Navigation do
|
||||
</h3>
|
||||
|
||||
<div class="space-y-2">
|
||||
<div :if={@items != []} class="nav-editor-labels" aria-hidden="true">
|
||||
<span>Label</span>
|
||||
<span>Path</span>
|
||||
</div>
|
||||
<div
|
||||
:for={{item, idx} <- Enum.with_index(@items)}
|
||||
class="nav-editor-item"
|
||||
>
|
||||
<div class="nav-editor-fields">
|
||||
<label class="sr-only" for={"nav-#{@section}-#{idx}-label"}>Label</label>
|
||||
<input
|
||||
type="text"
|
||||
id={"nav-#{@section}-#{idx}-label"}
|
||||
value={item["label"]}
|
||||
placeholder="Label"
|
||||
phx-blur="update_item"
|
||||
@@ -173,8 +179,10 @@ defmodule BerrypodWeb.Admin.Navigation do
|
||||
phx-value-field="label"
|
||||
class="admin-input nav-editor-input"
|
||||
/>
|
||||
<label class="sr-only" for={"nav-#{@section}-#{idx}-href"}>Path</label>
|
||||
<input
|
||||
type="text"
|
||||
id={"nav-#{@section}-#{idx}-href"}
|
||||
value={item["href"]}
|
||||
placeholder="/path"
|
||||
phx-blur="update_item"
|
||||
|
||||
Reference in New Issue
Block a user