-
+
+
+
<%= render_slot(action, @row_item.(row)) %>
@@ -458,7 +458,7 @@ defmodule Beacon.LiveAdmin.CoreComponents do
- - <%= item.title %>
+ - <%= item.title %>
- <%= render_slot(item) %>
@@ -480,7 +480,7 @@ defmodule Beacon.LiveAdmin.CoreComponents do
~H"""
<.link navigate={@navigate} class="text-sm font-semibold leading-6 text-zinc-900 hover:text-zinc-700">
- <.icon name="hero-arrow-left-solid" class="h-3 w-3" />
+ <.icon name="hero-arrow-left-solid" class="w-3 h-3" />
<%= render_slot(@inner_block) %>
@@ -503,7 +503,7 @@ defmodule Beacon.LiveAdmin.CoreComponents do
## Examples
<.icon name="hero-x-mark-solid" />
- <.icon name="hero-arrow-path" class="ml-1 w-3 h-3 animate-spin" />
+ <.icon name="hero-arrow-path" class="w-3 h-3 ml-1 animate-spin" />
"""
attr :name, :string, required: true
attr :class, :string, default: nil
diff --git a/lib/beacon/live_admin/live/component_editor_live/form_component.ex b/lib/beacon/live_admin/live/component_editor_live/form_component.ex
index f5a5c36c..1aa80256 100644
--- a/lib/beacon/live_admin/live/component_editor_live/form_component.ex
+++ b/lib/beacon/live_admin/live/component_editor_live/form_component.ex
@@ -72,7 +72,7 @@ defmodule Beacon.LiveAdmin.ComponentEditorLive.FormComponent do
-
+
<.form :let={f} for={@form} id="component-form" class="space-y-8" phx-target={@myself} phx-submit="save">
diff --git a/lib/beacon/live_admin/live/component_editor_live/index.ex b/lib/beacon/live_admin/live/component_editor_live/index.ex
index eb60f0df..f12b13c4 100644
--- a/lib/beacon/live_admin/live/component_editor_live/index.ex
+++ b/lib/beacon/live_admin/live/component_editor_live/index.ex
@@ -41,7 +41,7 @@ defmodule Beacon.LiveAdmin.ComponentEditorLive.Index do
def render(assigns) do
~H"""
<.header>
- Listing Components
+ Components
<:actions>
<.link patch={beacon_live_admin_path(@socket, @beacon_page.site, "/components/new")} phx-click={JS.push_focus()}>
<.button class="uppercase">Create New Component
@@ -49,29 +49,30 @@ defmodule Beacon.LiveAdmin.ComponentEditorLive.Index do
-
- <.simple_form :let={f} for={%{}} as={:search} phx-change="search">
-
-
- <.input field={f[:query]} type="search" autofocus={true} placeholder="Search by name (showing up to 20 results)" />
-
-
-
-
+ <.simple_form :let={f} for={%{}} as={:search} phx-change="search">
+ <.input field={f[:query]} type="search" autofocus={true} placeholder="Search by name (showing up to 20 results)" />
+
- <.table id="components" rows={@components} row_click={fn component -> JS.navigate(beacon_live_admin_path(@socket, @beacon_page.site, "/components/#{component.id}")) end}>
- <:col :let={component} label="Name"><%= component.name %>
- <:col :let={component} label="Category"><%= component.category %>
- <:col :let={component} label="Body"><%= body_excerpt(component.body) %>
- <:action :let={component}>
-
- <.link navigate={beacon_live_admin_path(@socket, @beacon_page.site, "/components/#{component.id}")}>Show
-
- <.link patch={beacon_live_admin_path(@socket, @beacon_page.site, "/components/#{component.id}")}>
- <.icon name="hero-pencil-square" />
-
-
-
+ <.main_content class="h-[calc(100vh_-_210px)]">
+ <.table id="components" rows={@components} row_click={fn component -> JS.navigate(beacon_live_admin_path(@socket, @beacon_page.site, "/components/#{component.id}")) end}>
+ <:col :let={component} label="Name"><%= component.name %>
+ <:col :let={component} label="Category"><%= component.category %>
+ <:col :let={component} label="Body"><%= body_excerpt(component.body) %>
+ <:action :let={component}>
+
+ <.link navigate={beacon_live_admin_path(@socket, @beacon_page.site, "/components/#{component.id}")}>Show
+
+ <.link
+ patch={beacon_live_admin_path(@socket, @beacon_page.site, "/components/#{component.id}")}
+ title="Edit component"
+ aria-label="Edit component"
+ class="flex items-center justify-center w-10 h-10"
+ >
+ <.icon name="hero-pencil-square text-[#61758A] hover:text-[#304254]" />
+
+
+
+
"""
end
diff --git a/lib/beacon/live_admin/live/layout_editor_live/form_component.ex b/lib/beacon/live_admin/live/layout_editor_live/form_component.ex
index fb3955f0..fae2a48a 100644
--- a/lib/beacon/live_admin/live/layout_editor_live/form_component.ex
+++ b/lib/beacon/live_admin/live/layout_editor_live/form_component.ex
@@ -145,7 +145,7 @@ defmodule Beacon.LiveAdmin.LayoutEditorLive.FormComponent do
-
+
<.form :let={f} for={@form} id="layout-form" class="space-y-8" phx-target={@myself} phx-change="validate" phx-submit="save">
diff --git a/lib/beacon/live_admin/live/layout_editor_live/index.ex b/lib/beacon/live_admin/live/layout_editor_live/index.ex
index 1f21b8eb..f272dd08 100644
--- a/lib/beacon/live_admin/live/layout_editor_live/index.ex
+++ b/lib/beacon/live_admin/live/layout_editor_live/index.ex
@@ -41,7 +41,7 @@ defmodule Beacon.LiveAdmin.LayoutEditorLive.Index do
def render(assigns) do
~H"""
<.header>
- Listing Layouts
+ Layouts
<:actions>
<.link patch={beacon_live_admin_path(@socket, @beacon_page.site, "/layouts/new")} phx-click={JS.push_focus()}>
<.button class="uppercase">Create New Layout
@@ -49,28 +49,24 @@ defmodule Beacon.LiveAdmin.LayoutEditorLive.Index do
-
- <.simple_form :let={f} for={%{}} as={:search} phx-change="search">
-
-
- <.input field={f[:query]} type="search" autofocus={true} placeholder="Search by title (showing up to 20 results)" />
-
-
-
-
+ <.simple_form :let={f} for={%{}} as={:search} phx-change="search">
+ <.input field={f[:query]} type="search" autofocus={true} placeholder="Search by title (showing up to 20 results)" />
+
- <.table id="layouts" rows={@beacon_layouts} row_click={fn layout -> JS.navigate(beacon_live_admin_path(@socket, @beacon_page.site, "/layouts/#{layout.id}")) end}>
- <:col :let={layout} label="Title"><%= layout.title %>
- <:col :let={layout} label="Status"><%= display_status(layout.status) %>
- <:action :let={layout}>
-
- <.link navigate={beacon_live_admin_path(@socket, @beacon_page.site, "/layouts/#{layout.id}")}>Edit
-
- <.link patch={beacon_live_admin_path(@socket, @beacon_page.site, "/layouts/#{layout.id}")}>
- <.icon name="hero-pencil-square" />
-
-
-
+ <.main_content class="h-[calc(100vh_-_210px)]">
+ <.table id="layouts" rows={@beacon_layouts} row_click={fn layout -> JS.navigate(beacon_live_admin_path(@socket, @beacon_page.site, "/layouts/#{layout.id}")) end}>
+ <:col :let={layout} label="Title"><%= layout.title %>
+ <:col :let={layout} label="Status"><%= display_status(layout.status) %>
+ <:action :let={layout}>
+
+ <.link navigate={beacon_live_admin_path(@socket, @beacon_page.site, "/layouts/#{layout.id}")}>Edit
+
+ <.link patch={beacon_live_admin_path(@socket, @beacon_page.site, "/layouts/#{layout.id}")} title="Edit layout" aria-label="Edit layout" class="flex items-center justify-center w-10 h-10 group">
+ <.icon name="hero-pencil-square text-[#61758A] hover:text-[#304254]" />
+
+
+
+
"""
end
diff --git a/lib/beacon/live_admin/live/layout_editor_live/meta_tags.ex b/lib/beacon/live_admin/live/layout_editor_live/meta_tags.ex
index 0ddfe812..b96ca237 100644
--- a/lib/beacon/live_admin/live/layout_editor_live/meta_tags.ex
+++ b/lib/beacon/live_admin/live/layout_editor_live/meta_tags.ex
@@ -18,6 +18,7 @@ defmodule Beacon.LiveAdmin.LayoutEditorLive.MetaTags do
{:noreply,
socket
|> assign(:beacon_layout, layout)
+ |> assign(page_title: "Meta Tags")
|> assign_field(changeset)}
end
@@ -56,7 +57,7 @@ defmodule Beacon.LiveAdmin.LayoutEditorLive.MetaTags do
~H"""
- <.live_component module={MetaTagsComponent} id="layout-meta-tags" site={@beacon_layout.site} live_action={@live_action} field={@field} meta_tags={@beacon_layout.meta_tags} />
+ <.live_component module={MetaTagsComponent} id="layout-meta-tags" site={@beacon_layout.site} page_title={@page_title} live_action={@live_action} field={@field} meta_tags={@beacon_layout.meta_tags} />
"""
end
diff --git a/lib/beacon/live_admin/live/layout_editor_live/resource_links.ex b/lib/beacon/live_admin/live/layout_editor_live/resource_links.ex
index c5fc2368..e91ef614 100644
--- a/lib/beacon/live_admin/live/layout_editor_live/resource_links.ex
+++ b/lib/beacon/live_admin/live/layout_editor_live/resource_links.ex
@@ -21,6 +21,7 @@ defmodule Beacon.LiveAdmin.LayoutEditorLive.ResourceLinks do
|> assign(extra_attributes: [])
|> assign(beacon_layout: beacon_layout)
|> assign(show_modal: false)
+ |> assign(page_title: "Resource Links")
|> assign_field(changeset)
|> assign_attributes()
@@ -103,22 +104,22 @@ defmodule Beacon.LiveAdmin.LayoutEditorLive.ResourceLinks do
-
- <.header>
- <:actions>
- <.button phx-disable-with="Saving..." form="resource-links-form" class="uppercase">Save Changes
-
-
-
-
+ <.header>
+ <%= @page_title %>
+ <:actions>
+ <.button phx-disable-with="Saving..." form="resource-links-form" class="uppercase">Save Changes
+
+
+ <.main_content class="h-[calc(100vh_-_223px)]">
+
<.button type="button" phx-click="add">New Resource Link
<.button type="button" phx-click="show-new-attribute-modal">New Attribute
-
- <.form for={%{}} as={:resource_links} id="resource-links-form" class="space-y-2" phx-submit="save">
+
+ <.form for={%{}} as={:resource_links} id="resource-links-form" class="divide-y divide-gray-100" phx-submit="save">
<%= for {resource_link, i} <- Enum.with_index(@resource_links) do %>
-
+
<%= for attribute <- @attributes do %>
<.input
@@ -132,8 +133,11 @@ defmodule Beacon.LiveAdmin.LayoutEditorLive.ResourceLinks do
/>
<% end %>
-
- <.button type="button" phx-click="delete" phx-value-index={i} data-confirm="Are you sure?">Delete
+
+
+
<% end %>
@@ -155,7 +159,7 @@ defmodule Beacon.LiveAdmin.LayoutEditorLive.ResourceLinks do
-
+
"""
end
diff --git a/lib/beacon/live_admin/live/layout_editor_live/revisions.ex b/lib/beacon/live_admin/live/layout_editor_live/revisions.ex
index bc85e7ea..daa5a0b8 100644
--- a/lib/beacon/live_admin/live/layout_editor_live/revisions.ex
+++ b/lib/beacon/live_admin/live/layout_editor_live/revisions.ex
@@ -16,6 +16,11 @@ defmodule Beacon.LiveAdmin.LayoutEditorLive.Revisions do
@impl true
def handle_params(%{"id" => id}, _url, socket) do
events = Content.list_layout_events(socket.assigns.beacon_page.site, id)
+
+ socket =
+ socket
+ |> assign(page_title: "Revisions")
+
{:noreply, assign(socket, events: events, layout_id: id)}
end
@@ -24,12 +29,16 @@ defmodule Beacon.LiveAdmin.LayoutEditorLive.Revisions do
~H"""
-
-
- <%= for event <- @events do %>
- <.revision event={event} />
- <% end %>
-
+ <.header>
+ <%= @page_title %>
+
+ <.main_content class="h-[calc(100vh_-_206px)]">
+
+ <%= for event <- @events do %>
+ <.revision event={event} />
+ <% end %>
+
+
"""
end
@@ -40,17 +49,20 @@ defmodule Beacon.LiveAdmin.LayoutEditorLive.Revisions do
def revision(assigns) do
~H"""
-
-
- <.icon :if={@event.event == :published} name="hero-eye-solid" class="w-4 h-4 text-blue-800" />
- <.icon :if={@event.event == :created} name="hero-document-plus-solid" class="w-4 h-4 text-blue-800" />
-
-
+
+
+
+ <.icon :if={@event.event == :published} name="hero-eye-solid" class="w-4 h-4 text-blue-800" />
+ <.icon :if={@event.event == :created} name="hero-document-plus-solid" class="w-4 h-4 text-blue-800" />
+
+
+
+
<%= Phoenix.Naming.humanize(@event.event) %> <%= format_datetime(@event.inserted_at) %>
Latest
-
+
-
Title
<%= @event.snapshot.layout.title %>
@@ -58,7 +70,7 @@ defmodule Beacon.LiveAdmin.LayoutEditorLive.Revisions do
-
Template
-
+
<.link :if={Authorization.authorized?(@beacon_page.site, @agent, :upload, @authn_context)} patch={beacon_live_admin_path(@socket, @beacon_page.site, "/media_library/upload")}>
- <.button>Upload
+ <.button class="uppercase">Upload new media
-
- <.table id="assets" rows={@assets} row_id={fn asset -> asset.id end}>
- <:col :let={asset} label="">
- <:col :let={asset} label="Name"><%= asset.file_name %>
- <:col :let={asset} label="Type"><%= asset.media_type %>
- <:action :let={asset}>
- <.link :if={Authorization.authorized?(@beacon_page.site, @agent, :upload, @authn_context)} patch={beacon_live_admin_path(@socket, @beacon_page.site, "/media_library/#{asset.id}")}>
- View
-
-
- <:action :let={asset}>
- <.link
- :if={Authorization.authorized?(@beacon_page.site, @agent, :delete, Map.put(@authn_context, :resource, asset))}
- phx-click={JS.push("delete", value: %{id: asset.id})}
- data-confirm="The asset will be marked as deleted but it will not be actually removed from the storage. Are you sure?"
- >
- Delete
-
-
-
-
- <.modal :if={@live_action in [:upload]} id="asset-modal" show on_cancel={JS.navigate(beacon_live_admin_path(@socket, @beacon_page.site, "/media_library"))}>
- <.live_component
- module={Beacon.LiveAdmin.MediaLibraryLive.UploadFormComponent}
- site={@beacon_page.site}
- id={@asset.id || :upload}
- title={@page_title}
- live_action={@live_action}
- asset={@asset}
- navigate={beacon_live_admin_path(@socket, @beacon_page.site, "/media_library")}
- agent={@agent}
- />
-
-
- <.modal :if={@live_action in [:show]} id="asset-modal" show on_cancel={JS.navigate(beacon_live_admin_path(@socket, @beacon_page.site, "/media_library"))}>
- <.live_component
- module={Beacon.LiveAdmin.MediaLibraryLive.ShowComponent}
- id={@asset.id}
- title={@page_title}
- live_action={@live_action}
- asset={@asset}
- navigate={beacon_live_admin_path(@socket, @beacon_page.site, "/media_library")}
- agent={@agent}
- />
-
+ <.main_content class="h-[calc(100vh_-_170px)]">
+ <.table id="assets" rows={@assets} row_id={fn asset -> asset.id end}>
+ <:col :let={asset} label="">
+ <:col :let={asset} label="Name"><%= asset.file_name %>
+ <:col :let={asset} label="Type"><%= asset.media_type %>
+ <:action :let={asset}>
+ <.link
+ :if={Authorization.authorized?(@beacon_page.site, @agent, :upload, @authn_context)}
+ aria-label="View asset"
+ title="View asset"
+ class="flex items-center justify-center w-10 h-10"
+ patch={beacon_live_admin_path(@socket, @beacon_page.site, "/media_library/#{asset.id}")}
+ >
+ <.icon name="hero-eye text-[#61758A] hover:text-[#304254]" />
+
+
+ <:action :let={asset}>
+ <.link
+ :if={Authorization.authorized?(@beacon_page.site, @agent, :delete, Map.put(@authn_context, :resource, asset))}
+ phx-click={JS.push("delete", value: %{id: asset.id})}
+ aria-label="Delete asset"
+ title="Delete asset"
+ class="flex items-center justify-center w-10 h-10"
+ data-confirm="The asset will be marked as deleted but it will not be actually removed from the storage. Are you sure?"
+ >
+ <.icon name="hero-trash text-[#F23630] hover:text-[#AE182D]" />
+
+
+
+
+ <.modal :if={@live_action in [:upload]} id="asset-modal" show on_cancel={JS.navigate(beacon_live_admin_path(@socket, @beacon_page.site, "/media_library"))}>
+ <.live_component
+ module={Beacon.LiveAdmin.MediaLibraryLive.UploadFormComponent}
+ site={@beacon_page.site}
+ id={@asset.id || :upload}
+ title={@page_title}
+ live_action={@live_action}
+ asset={@asset}
+ navigate={beacon_live_admin_path(@socket, @beacon_page.site, "/media_library")}
+ agent={@agent}
+ />
+
+
+ <.modal :if={@live_action in [:show]} id="asset-modal" show on_cancel={JS.navigate(beacon_live_admin_path(@socket, @beacon_page.site, "/media_library"))}>
+ <.live_component
+ module={Beacon.LiveAdmin.MediaLibraryLive.ShowComponent}
+ id={@asset.id}
+ title={@page_title}
+ live_action={@live_action}
+ asset={@asset}
+ navigate={beacon_live_admin_path(@socket, @beacon_page.site, "/media_library")}
+ agent={@agent}
+ />
+
+
"""
end
end
diff --git a/lib/beacon/live_admin/live/meta_tags_component.ex b/lib/beacon/live_admin/live/meta_tags_component.ex
index 24833faf..9646036f 100644
--- a/lib/beacon/live_admin/live/meta_tags_component.ex
+++ b/lib/beacon/live_admin/live/meta_tags_component.ex
@@ -102,56 +102,70 @@ defmodule Beacon.LiveAdmin.MetaTagsComponent do
~H"""
<.header>
+ <%= @page_title %>
<:actions>
<.button phx-disable-with="Saving..." form="meta-tags-form" class="uppercase">Save Changes
-
-
- <.button type="button" phx-click="add" phx-target={@myself}>New Meta Tag
- <.button type="button" phx-click="show-new-attribute-modal" phx-target={@myself}>New Meta Attribute
-
-
-
- <.form for={%{}} as={:meta_tags} id="meta-tags-form" class="space-y-2" phx-target={@myself} phx-submit="save">
- <%= for {meta_tag, i} <- Enum.with_index(@meta_tags) do %>
-
- <%= for attribute <- @attributes do %>
-
- <.input
- type="text"
- label={if(i == 0, do: attribute, else: nil)}
- name={input_name(@field, i, attribute)}
- id={input_id(@field, i, attribute)}
- value={meta_tag[attribute]}
- errors={[]}
- phx-debounce="500"
- />
+ <.main_content class="h-[calc(100vh_-_223px)]">
+
+ <.button type="button" phx-click="add" phx-target={@myself}>New Meta Tag
+ <.button type="button" phx-click="show-new-attribute-modal" phx-target={@myself}>New Meta Attribute
+
+
+
+ <.form for={%{}} as={:meta_tags} id="meta-tags-form" class="divide-y divide-gray-100" phx-target={@myself} phx-submit="save">
+ <%= for {meta_tag, i} <- Enum.with_index(@meta_tags) do %>
+
+ <%= for attribute <- @attributes do %>
+
+ <.input
+ type="text"
+ label={if(i == 0, do: attribute, else: nil)}
+ name={input_name(@field, i, attribute)}
+ id={input_id(@field, i, attribute)}
+ value={meta_tag[attribute]}
+ errors={[]}
+ phx-debounce="500"
+ />
+
+ <% end %>
+
+
- <% end %>
+
+ <% end %>
+
+
- <.button type="button" phx-target={@myself} phx-click="delete" phx-value-index={i} data-confirm="Are you sure?">Delete
-
- <% end %>
-
-
+ <.modal :if={@new_attribute_modal_visible?} id="new-attribute-modal" show={true} on_cancel={JS.push("hide-new-attribute-modal")}>
+ <.header>New meta tag attribute
- <.modal :if={@new_attribute_modal_visible?} id="new-attribute-modal" show={true} on_cancel={JS.push("hide-new-attribute-modal")}>
- <.header>New meta tag attribute
+ <.simple_form :let={f} for={%{}} as={:attribute} phx-target={@myself} phx-submit="save-new-attribute">
+
+ <%= for preset <- ~w(http-equiv charset itemprop) do %>
+ <.button phx-click={JS.set_attribute({"value", preset}, to: "#attribute_name")}><%= preset %>
+ <% end %>
+
- <.simple_form :let={f} for={%{}} as={:attribute} phx-target={@myself} phx-submit="save-new-attribute">
-
- <%= for preset <- ~w(http-equiv charset itemprop) do %>
- <.button phx-click={JS.set_attribute({"value", preset}, to: "#attribute_name")}><%= preset %>
- <% end %>
-
-
-
- <.input type="text" field={f[:name]} placeholder="Custom" label="Custom attribute" />
- <.button class="mt-2">Add custom attribute
-
-
-
+
+ <.input type="text" field={f[:name]} placeholder="Custom" label="Custom attribute" />
+ <.button class="mt-2">Add custom attribute
+
+
+
+
"""
end
diff --git a/lib/beacon/live_admin/live/page_editor_live/event_handlers.ex b/lib/beacon/live_admin/live/page_editor_live/event_handlers.ex
index f9a66aeb..2c471976 100644
--- a/lib/beacon/live_admin/live/page_editor_live/event_handlers.ex
+++ b/lib/beacon/live_admin/live/page_editor_live/event_handlers.ex
@@ -150,59 +150,52 @@ defmodule Beacon.LiveAdmin.PageEditorLive.EventHandlers do
<.header>
<%= @page_title %>
+ <:actions>
+ <.button type="button" phx-click="create_new">New Event Handler
+
-
- <.modal :if={@show_nav_modal} id="confirm-nav" on_cancel={JS.push("stay_here")} show>
- You've made unsaved changes to this event handler!
- Navigating to another event handler without saving will cause these changes to be lost.
- <.button type="button" phx-click="stay_here">
- Stay here
-
- <.button type="button" phx-click="discard_changes">
- Discard changes
-
-
-
- <.modal :if={@show_delete_modal} id="confirm-delete" on_cancel={JS.push("delete_cancel")} show>
- Are you sure you want to delete this event handler?
- Note: deleted event handlers will still be active until the page is re-published!
- <.button type="button" phx-click="delete_confirm">
- Delete
-
- <.button type="button" phx-click="delete_cancel">
- Cancel
-
-
-
-
-
- <.button type="button" phx-click="create_new">
- New Event Handler
+ <.main_content class="h-[calc(100vh_-_223px)]">
+ <.modal :if={@show_nav_modal} id="confirm-nav" on_cancel={JS.push("stay_here")} show>
+ You've made unsaved changes to this event handler!
+ Navigating to another event handler without saving will cause these changes to be lost.
+ <.button type="button" phx-click="stay_here">
+ Stay here
- <.table :if={@selected} id="event-handlers" rows={@page.event_handlers} row_click={fn row -> "select-#{row.id}" end}>
- <:col :let={event_handler} label="name">
- <%= Map.fetch!(event_handler, :name) %>
-
-
-
+ <.button type="button" phx-click="discard_changes">
+ Discard changes
+
+
-
- <.form :let={f} for={@form} class="flex items-center" phx-change="validate" phx-submit="save_changes">
-
- Name
-
-
- <.input field={f[:name]} type="text" />
-
-
+ <.modal :if={@show_delete_modal} id="confirm-delete" on_cancel={JS.push("delete_cancel")} show>
+ Are you sure you want to delete this event handler?
+ Note: deleted event handlers will still be active until the page is re-published!
+ <.button type="button" phx-click="delete_confirm">
+ Delete
+
+ <.button type="button" phx-click="delete_cancel">
+ Cancel
+
+
+
+
+
+ <.table :if={@selected} id="event-handlers" rows={@page.event_handlers} row_click={fn row -> "select-#{row.id}" end}>
+ <:col :let={event_handler} label="name">
+ <%= Map.fetch!(event_handler, :name) %>
+
+
+
- <.button phx-disable-with="Saving..." class="w-1/6 mx-4 uppercase">Save Changes
- <.button type="button" phx-click="delete" class="w-1/12 uppercase">Delete
-
+
+ <.form :let={f} for={@form} class="flex items-end gap-4" phx-change="validate" phx-submit="save_changes">
+ <.input field={f[:name]} label="name" type="text" />
+
+ <.button phx-disable-with="Saving..." class="ml-auto">Save Changes
+ <.button type="button" phx-click="delete">Delete
+
-
-
"""
end
diff --git a/lib/beacon/live_admin/live/page_editor_live/form_component.ex b/lib/beacon/live_admin/live/page_editor_live/form_component.ex
index 98db5c73..b41629e1 100644
--- a/lib/beacon/live_admin/live/page_editor_live/form_component.ex
+++ b/lib/beacon/live_admin/live/page_editor_live/form_component.ex
@@ -166,7 +166,7 @@ defmodule Beacon.LiveAdmin.PageEditorLive.FormComponent do
-
+
<.form :let={f} for={@form} id="page-form" class="space-y-8" phx-target={@myself} phx-change="validate" phx-submit="save">
diff --git a/lib/beacon/live_admin/live/page_editor_live/index.ex b/lib/beacon/live_admin/live/page_editor_live/index.ex
index 6850b590..16d9bea7 100644
--- a/lib/beacon/live_admin/live/page_editor_live/index.ex
+++ b/lib/beacon/live_admin/live/page_editor_live/index.ex
@@ -41,7 +41,7 @@ defmodule Beacon.LiveAdmin.PageEditorLive.Index do
def render(assigns) do
~H"""
<.header>
- Listing Pages
+ Pages
<:actions>
<.link patch={beacon_live_admin_path(@socket, @beacon_page.site, "/pages/new")} phx-click={JS.push_focus()}>
<.button class="uppercase">Create New Page
@@ -49,29 +49,25 @@ defmodule Beacon.LiveAdmin.PageEditorLive.Index do
-
- <.simple_form :let={f} for={%{}} as={:search} phx-change="search">
-
-
- <.input field={f[:query]} type="search" autofocus={true} placeholder="Search by path or title (showing up to 20 results)" />
-
-
-
-
+ <.simple_form :let={f} for={%{}} as={:search} phx-change="search">
+ <.input field={f[:query]} type="search" autofocus={true} placeholder="Search by path or title (showing up to 20 results)" />
+
- <.table id="pages" rows={@pages} row_click={fn page -> JS.navigate(beacon_live_admin_path(@socket, @beacon_page.site, "/pages/#{page.id}")) end}>
- <:col :let={page} label="Title"><%= page.title %>
- <:col :let={page} label="Path"><%= page.path %>
- <:col :let={page} label="Status"><%= display_status(page.status) %>
- <:action :let={page}>
-
- <.link navigate={beacon_live_admin_path(@socket, @beacon_page.site, "/pages/#{page.id}")}>Show
-
- <.link patch={beacon_live_admin_path(@socket, @beacon_page.site, "/pages/#{page.id}")}>
- <.icon name="hero-pencil-square" />
-
-
-
+ <.main_content class="h-[calc(100vh_-_210px)]">
+ <.table id="pages" rows={@pages} row_click={fn page -> JS.navigate(beacon_live_admin_path(@socket, @beacon_page.site, "/pages/#{page.id}")) end}>
+ <:col :let={page} label="Title"><%= page.title %>
+ <:col :let={page} label="Path"><%= page.path %>
+ <:col :let={page} label="Status"><%= display_status(page.status) %>
+ <:action :let={page}>
+
+ <.link navigate={beacon_live_admin_path(@socket, @beacon_page.site, "/pages/#{page.id}")}>Show
+
+ <.link patch={beacon_live_admin_path(@socket, @beacon_page.site, "/pages/#{page.id}")} title="Edit page" aria-label="Edit page" class="flex items-center justify-center w-10 h-10 group">
+ <.icon name="hero-pencil-square text-[#61758A] hover:text-[#304254]" />
+
+
+
+
"""
end
diff --git a/lib/beacon/live_admin/live/page_editor_live/meta_tags.ex b/lib/beacon/live_admin/live/page_editor_live/meta_tags.ex
index 73fe16cf..e7ccb252 100644
--- a/lib/beacon/live_admin/live/page_editor_live/meta_tags.ex
+++ b/lib/beacon/live_admin/live/page_editor_live/meta_tags.ex
@@ -18,6 +18,7 @@ defmodule Beacon.LiveAdmin.PageEditorLive.MetaTags do
{:noreply,
socket
|> assign(:page, page)
+ |> assign(page_title: "Meta Tags")
|> assign_field(changeset)}
end
@@ -56,7 +57,7 @@ defmodule Beacon.LiveAdmin.PageEditorLive.MetaTags do
~H"""
- <.live_component module={MetaTagsComponent} id="page-meta-tags" site={@page.site} live_action={@live_action} field={@field} meta_tags={@page.meta_tags} />
+ <.live_component module={MetaTagsComponent} id="page-meta-tags" page_title={@page_title} site={@page.site} live_action={@live_action} field={@field} meta_tags={@page.meta_tags} />
"""
end
diff --git a/lib/beacon/live_admin/live/page_editor_live/revisions.ex b/lib/beacon/live_admin/live/page_editor_live/revisions.ex
index cbb43ff5..3dfd1b4e 100644
--- a/lib/beacon/live_admin/live/page_editor_live/revisions.ex
+++ b/lib/beacon/live_admin/live/page_editor_live/revisions.ex
@@ -18,6 +18,7 @@ defmodule Beacon.LiveAdmin.PageEditorLive.Revisions do
modal_content: nil,
modal_language: nil
)
+ |> assign(page_title: "Revisions")
{:noreply, socket}
end
@@ -51,27 +52,32 @@ defmodule Beacon.LiveAdmin.PageEditorLive.Revisions do
@impl true
def render(assigns) do
~H"""
-
+
-
-
- <%= for event <- @events do %>
- <.revision event={event} />
- <% end %>
-
-
- <.modal :if={@show_modal} id="modal" on_cancel={JS.push("hide_modal")} show>
-
-
- @modal_language, "readOnly" => "true"})}
- />
+ <.header>
+ <%= @page_title %>
+
+
+ <.main_content class="h-[calc(100vh_-_206px)]">
+
+ <%= for event <- @events do %>
+ <.revision event={event} />
+ <% end %>
+
+
+ <.modal :if={@show_modal} id="modal" on_cancel={JS.push("hide_modal")} show>
+
+
+ @modal_language, "readOnly" => "true"})}
+ />
+
-
-
+
+
"""
end
@@ -82,17 +88,19 @@ defmodule Beacon.LiveAdmin.PageEditorLive.Revisions do
def revision(assigns) do
~H"""
- -
-
- <.icon :if={@event.event == :published} name="hero-eye-solid" class="w-4 h-4 text-blue-800" />
- <.icon :if={@event.event == :created} name="hero-document-plus-solid" class="w-4 h-4 text-blue-800" />
-
-
+ -
+
+
+ <.icon :if={@event.event == :published} name="hero-eye-solid" class="w-4 h-4 text-blue-800" />
+ <.icon :if={@event.event == :created} name="hero-document-plus-solid" class="w-4 h-4 text-blue-800" />
+
+
+
<%= Phoenix.Naming.humanize(@event.event) %> <%= format_datetime(@event.inserted_at) %>
Latest
-
+
-
Path
<%= @event.snapshot.page.path %>
@@ -112,7 +120,7 @@ defmodule Beacon.LiveAdmin.PageEditorLive.Revisions do
-
Template
-
+
@event.snapshot.id}
class="h-full col-span-full lg:col-span-2"
@@ -125,7 +133,7 @@ defmodule Beacon.LiveAdmin.PageEditorLive.Revisions do
-
Schema
-
+
@event.snapshot.id}
class="h-full col-span-full lg:col-span-2"
diff --git a/lib/beacon/live_admin/live/page_editor_live/schema.ex b/lib/beacon/live_admin/live/page_editor_live/schema.ex
index 6c3bd0a9..c771a658 100644
--- a/lib/beacon/live_admin/live/page_editor_live/schema.ex
+++ b/lib/beacon/live_admin/live/page_editor_live/schema.ex
@@ -18,6 +18,7 @@ defmodule Beacon.LiveAdmin.PageEditorLive.Schema do
socket
|> assign(:page, page)
|> assign_form(changeset)
+ |> assign(page_title: "Schema")
|> assign(:raw_schema, Jason.encode!(page.raw_schema, pretty: true))}
end
@@ -52,16 +53,15 @@ defmodule Beacon.LiveAdmin.PageEditorLive.Schema do
<.header>
+ <%= @page_title %>
<:actions>
<.button phx-disable-with="Saving..." phx-click="save" class="uppercase">Save Changes
-
-
-
- "json"})} />
-
+
+
+ "json"})} />
<.error :for={msg <- Enum.map(@form[:raw_schema].errors, &translate_error/1)}><%= msg %>
diff --git a/lib/beacon/live_admin/live/page_editor_live/variants.ex b/lib/beacon/live_admin/live/page_editor_live/variants.ex
index e7cab217..12c69cbd 100644
--- a/lib/beacon/live_admin/live/page_editor_live/variants.ex
+++ b/lib/beacon/live_admin/live/page_editor_live/variants.ex
@@ -148,66 +148,57 @@ defmodule Beacon.LiveAdmin.PageEditorLive.Variants do
<.header>
<%= @page_title %>
+ <:actions>
+ <.button type="button" phx-click="create_new">New Variant
+
-
- <.modal :if={@show_nav_modal} id="confirm-nav" on_cancel={JS.push("stay_here")} show>
- You've made unsaved changes to this variant!
- Navigating to another variant without saving will cause these changes to be lost.
- <.button type="button" phx-click="stay_here">
- Stay here
-
- <.button type="button" phx-click="discard_changes">
- Discard changes
-
-
-
- <.modal :if={@show_delete_modal} id="confirm-delete" on_cancel={JS.push("delete_cancel")} show>
- Are you sure you want to delete this variant?
- Note: deleted variants will still be active until the page is re-published!
- <.button type="button" phx-click="delete_confirm">
- Delete
-
- <.button type="button" phx-click="delete_cancel">
- Cancel
-
-
-
-
-
- <.button type="button" phx-click="create_new">
- New Variant
+ <.main_content class="h-[calc(100vh_-_223px)]">
+ <.modal :if={@show_nav_modal} id="confirm-nav" on_cancel={JS.push("stay_here")} show>
+ You've made unsaved changes to this variant!
+ Navigating to another variant without saving will cause these changes to be lost.
+ <.button type="button" phx-click="stay_here">
+ Stay here
- <.table :if={@selected} id="variants" rows={@page.variants} row_click={fn row -> "select-#{row.id}" end}>
- <:col :let={variant} :for={{attr, suffix} <- [{:name, ""}, {:weight, " (%)"}]} label={"#{attr}#{suffix}"}>
- <%= Map.fetch!(variant, attr) %>
-
-
-
+ <.button type="button" phx-click="discard_changes">
+ Discard changes
+
+
+
+ <.modal :if={@show_delete_modal} id="confirm-delete" on_cancel={JS.push("delete_cancel")} show>
+ Are you sure you want to delete this variant?
+ Note: deleted variants will still be active until the page is re-published!
+
+ <.button type="button" phx-click="delete_confirm">
+ Delete
+
+ <.button type="button" phx-click="delete_cancel">
+ Cancel
+
+
+
+
+
+
+ <.table :if={@selected} id="variants" rows={@page.variants} row_click={fn row -> "select-#{row.id}" end}>
+ <:col :let={variant} :for={{attr, suffix} <- [{:name, ""}, {:weight, " (%)"}]} label={"#{attr}#{suffix}"}>
+ <%= Map.fetch!(variant, attr) %>
+
+
+
-
- <.form :let={f} for={@form} class="flex items-center" phx-change="validate" phx-submit="save_changes">
-
- Name
-
-
- <.input field={f[:name]} type="text" />
-
-
- Weight
-
-
- <.input field={f[:weight]} type="number" min="0" max="100" />
-
-
+
+ <.form :let={f} for={@form} class="flex items-end gap-4" phx-change="validate" phx-submit="save_changes">
+ <.input label="Name" field={f[:name]} type="text" />
+ <.input label="weight" field={f[:weight]} type="number" min="0" max="100" />
- <.button phx-disable-with="Saving..." class="w-1/6 mx-4 uppercase">Save Changes
- <.button type="button" phx-click="delete" class="w-1/12 uppercase">Delete
-
- <%= template_error(@form[:template]) %>
+
-
-
-
+ <.button phx-disable-with="Saving..." class="ml-auto">Save Changes
+ <.button type="button" phx-click="delete" class="">Delete
+
+ <%= template_error(@form[:template]) %>
+
-
+
"""
end
diff --git a/lib/beacon/live_admin/page_live.html.heex b/lib/beacon/live_admin/page_live.html.heex
index 20d80b41..72d078dc 100644
--- a/lib/beacon/live_admin/page_live.html.heex
+++ b/lib/beacon/live_admin/page_live.html.heex
@@ -1,4 +1,4 @@
- |