separate editor FAB and panel for cleaner animation
All checks were successful
deploy / deploy (push) Successful in 1m32s

Split the editor sheet into two distinct elements:
- .editor-fab: floating action button, always a pill in the corner
- .editor-panel: sliding panel that animates in/out independently

This enables proper CSS keyframe animations (slide-up/down on mobile,
slide-in/out on desktop) with a closing class for exit transitions.
Simplified the JS hook to only handle close behaviour.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
jamey
2026-03-07 19:01:32 +00:00
parent 3f96769840
commit bd07c9c7d9
6 changed files with 230 additions and 249 deletions

View File

@@ -125,13 +125,13 @@ defmodule BerrypodWeb.Shop.CustomPageTest do
{:ok, view, _html} = live(conn, "/editable")
# Editor sheet should be visible for admins
assert has_element?(view, ".editor-sheet")
assert has_element?(view, ".editor-panel")
# Click the edit button in the sheet to enter edit mode
view |> element(".editor-sheet-edit-btn") |> render_click()
view |> element(".editor-fab") |> render_click()
# Now the editor sheet content should be visible (sheet state changes to open)
assert has_element?(view, ".editor-sheet-content")
assert has_element?(view, ".editor-panel-content")
end
end
end