Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Hm/updates to admin pages and sidenav #67

Merged
merged 14 commits into from
Sep 15, 2023
Merged

Hm/updates to admin pages and sidenav #67

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
9be1a41
WIP. Working on adding headers to additional pages, icons to the side…
hanna-del-rae Aug 31, 2023
5b3d7f8
Prevent empty labels from rendering to prevent odd spacing. Clean up …
hanna-del-rae Aug 31, 2023
31fb6dc
Fixup styles and layout for the variants sub page.
hanna-del-rae Sep 1, 2023
ebb4ed2
Cleans up the revisions, schema, event subpages.
hanna-del-rae Sep 1, 2023
cfb3bcb
Clean up UI on all layout subpages except for Meta Tags, cannot build…
hanna-del-rae Sep 1, 2023
6f4a11a
WIP. Cleaning up media Library page.
hanna-del-rae Sep 1, 2023
3a24ccc
Cleans up the UI on components page.
hanna-del-rae Sep 1, 2023
66a38a3
Improves q&d visual improvements on main admin pages.
hanna-del-rae Sep 1, 2023
a62025f
Improve the appearance of media library search component.
hanna-del-rae Sep 1, 2023
aa69de4
Fix error in layout_editor_live/meta_tags.ex
hanna-del-rae Sep 1, 2023
4056d06
Format, fix UI bug on revisions screens.
hanna-del-rae Sep 1, 2023
9140224
Merge branch 'main' into hm/updates-to-admin-pages-and-sidenav
leandrocp Sep 15, 2023
1315b0c
remove test that relies on js
leandrocp Sep 15, 2023
02d1b15
build assets
leandrocp Sep 15, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
77 changes: 53 additions & 24 deletions lib/beacon/live_admin/components/admin_components.ex
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ defmodule Beacon.LiveAdmin.AdminComponents do
)

~H"""
<div class="text-sm font-medium text-center text-gray-500 border-b border-gray-200 mb-10">
<div class="mb-10 text-sm font-medium text-center text-gray-500 border-b border-gray-200">
<ul class="flex flex-wrap -mb-px">
<%= layout_menu_items(assigns) %>
</ul>
Expand Down Expand Up @@ -85,7 +85,7 @@ defmodule Beacon.LiveAdmin.AdminComponents do
)

~H"""
<div class="text-sm font-medium text-center text-gray-500 border-b border-gray-200 mb-10">
<div class="mb-10 text-sm font-medium text-center text-gray-500 border-b border-gray-200">
<ul class="flex flex-wrap -mb-px">
<%= page_menu_items(assigns) %>
</ul>
Expand Down Expand Up @@ -299,8 +299,8 @@ defmodule Beacon.LiveAdmin.AdminComponents do
<button
type={@type}
class={[
"phx-submit-loading:opacity-75 rounded-xl bg-blue-600 hover:bg-blue-700 focus:outline-none focus-visible:ring-4 focus-visible:ring-blue-200 active:bg-blue-800 py-3.5 px-6",
"text-sm/5 font-semibold tracking-wide text-white active:text-white/80",
"phx-submit-loading:opacity-75 rounded-xl whitespace-nowrap bg-blue-600 hover:bg-blue-700 focus:outline-none focus-visible:ring-4 focus-visible:ring-blue-200 active:bg-blue-800 py-3.5 px-6",
"text-sm/5 font-semibold tracking-[1.68px] text-white active:text-white/80 flex items-center gap-2",
@class
]}
{@rest}
Expand Down Expand Up @@ -375,8 +375,16 @@ defmodule Beacon.LiveAdmin.AdminComponents do
def input(%{type: "select"} = assigns) do
~H"""
<div phx-feedback-for={@name}>
<.label for={@id}><%= @label %></.label>
<select id={@id} name={@name} class="mt-1 block w-full rounded-md border border-gray-300 bg-white shadow-sm focus:border-zinc-400 focus:ring-0 sm:text-sm" multiple={@multiple} {@rest}>
<%= if @label do %>
<.label for={@id}><%= @label %></.label>
<% end %>
<select
id={@id}
name={@name}
class="block w-full mt-1 bg-white border border-gray-300 rounded-md shadow-sm focus:border-blue-600 focus:ring-2 focus:ring-blue-200 sm:text-sm"
multiple={@multiple}
{@rest}
>
<option :if={@prompt} value=""><%= @prompt %></option>
<%= Phoenix.HTML.Form.options_for_select(@options, @value) %>
</select>
Expand All @@ -388,14 +396,16 @@ defmodule Beacon.LiveAdmin.AdminComponents do
def input(%{type: "textarea"} = assigns) do
~H"""
<div phx-feedback-for={@name}>
<.label for={@id}><%= @label %></.label>
<%= if @label do %>
<.label for={@id}><%= @label %></.label>
<% end %>
<textarea
id={@id}
name={@name}
class={[
"mt-2 block w-full rounded-lg text-zinc-900 focus:ring-0 sm:text-sm sm:leading-6",
"phx-no-feedback:border-zinc-300 phx-no-feedback:focus:border-zinc-400",
"min-h-[6rem] border-zinc-300 focus:border-zinc-400",
"block w-full rounded-lg text-zinc-900 focus:ring-2 focus:ring-blue-200 sm:text-sm sm:leading-6",
"phx-no-feedback:border-zinc-300 phx-no-feedback:focus:border-blue-600",
"min-h-[6rem] border-zinc-300 focus:border-blue-600",
@errors != [] && "border-rose-400 focus:border-rose-400"
]}
{@rest}
Expand All @@ -409,16 +419,18 @@ defmodule Beacon.LiveAdmin.AdminComponents do
def input(assigns) do
~H"""
<div phx-feedback-for={@name}>
<.label for={@id}><%= @label %></.label>
<%= if @label do %>
<.label for={@id}><%= @label %></.label>
<% end %>
<input
type={@type}
name={@name}
id={@id}
value={Phoenix.HTML.Form.normalize_value(@type, @value)}
class={[
"mt-2 block w-full rounded-lg text-zinc-900 focus:ring-0 sm:text-sm sm:leading-6",
"phx-no-feedback:border-zinc-300 phx-no-feedback:focus:border-zinc-400",
"border-zinc-300 focus:border-zinc-400",
"block w-full rounded-lg text-zinc-900 focus:ring-2 focus:ring-blue-200 sm:text-sm sm:leading-6",
"phx-no-feedback:border-zinc-300 phx-no-feedback:focus:border-blue-600",
"border-zinc-300 focus:border-blue-600",
@errors != [] && "border-rose-400 focus:border-rose-400"
]}
{@rest}
Expand All @@ -436,7 +448,7 @@ defmodule Beacon.LiveAdmin.AdminComponents do

def label(assigns) do
~H"""
<label for={@for} class="block font-semibold lg:text-md/5 lg:text-base/5 text-[#2D394B]">
<label for={@for} class="mb-2 block font-medium capitalize text-sm/5 text-[#304254]">
<%= render_slot(@inner_block) %>
</label>
"""
Expand Down Expand Up @@ -492,26 +504,28 @@ defmodule Beacon.LiveAdmin.AdminComponents do
<table class="w-[40rem] mt-11 sm:w-full">
<thead class="text-sm leading-6 text-left text-zinc-500">
<tr>
<th :for={col <- @col} class="p-0 pb-4 pr-6 font-normal"><%= col[:label] %></th>
<th :for={col <- @col} class="pt-0 pb-4 pl-0 pr-6 font-sans font-semibold uppercase text-sm tracking-[1.68px]"><%= col[:label] %></th>
<th class="relative p-0 pb-4"><span class="sr-only"><%= gettext("Actions") %></span></th>
</tr>
</thead>
<tbody id={@id} phx-update={match?(%Phoenix.LiveView.LiveStream{}, @rows) && "stream"} class="relative text-sm leading-6 border-t divide-y divide-zinc-100 border-zinc-200 text-zinc-700">
<tr :for={row <- @rows} id={@row_id && @row_id.(row)} class="group hover:bg-zinc-50">
<tbody id={@id} phx-update={match?(%Phoenix.LiveView.LiveStream{}, @rows) && "stream"} class="relative text-sm leading-6 divide-y border-grey-100 divide-grey-100 text-[#111625] font-medium">
<tr :for={row <- @rows} id={@row_id && @row_id.(row)} class="group hover:bg-[#F0F5F9]">
<td :for={{col, i} <- Enum.with_index(@col)} phx-click={@row_click && @row_click.(row)} class={["relative p-0", @row_click && "hover:cursor-pointer"]}>
<div class="block py-4 pr-6">
<span class="absolute right-0 -inset-y-px -left-4 group-hover:bg-zinc-50 sm:rounded-l-xl" />
<span class="absolute right-0 -inset-y-px -left-3 group-hover:bg-[#F0F5F9] sm:rounded-l-xl" />
<span class={["relative", i == 0 && "font-semibold text-zinc-900"]}>
<%= render_slot(col, @row_item.(row)) %>
</span>
</div>
</td>
<td :if={@action != []} class="relative p-0 w-14">
<div class="relative py-4 text-sm font-medium text-right whitespace-nowrap">
<span class="absolute left-0 -inset-y-px -right-4 group-hover:bg-zinc-50 sm:rounded-r-xl" />
<span :for={action <- @action} class="relative ml-4 font-semibold leading-6 text-zinc-900 hover:text-zinc-700">
<%= render_slot(action, @row_item.(row)) %>
</span>
<div class="block py-4 pl-6">
<div class="flex justify-end">
<span class="absolute left-0 -inset-y-px -right-3 group-hover:bg-[#F0F5F9] sm:rounded-r-xl" />
<span :for={action <- @action} class="relative text-sm font-medium font-semibold text-right text-zinc-900 hover:text-zinc-700 whitespace-nowrap">
<%= render_slot(action, @row_item.(row)) %>
</span>
</div>
</div>
</td>
</tr>
Expand Down Expand Up @@ -568,4 +582,19 @@ defmodule Beacon.LiveAdmin.AdminComponents do
</div>
"""
end

@doc """
Renders a rounded white panel that is pinned to the bottom of the screen and scrolls.

"""
slot :inner_block, required: true
attr :class, :string, default: ""

def main_content(assigns) do
~H"""
<div class={"#{@class} px-4 pt-4 mt-4 bg-white overflow-y-auto col-span-full rounded-t-[1.25rem]"}>
<%= render_slot(@inner_block) %>
</div>
"""
end
end
52 changes: 26 additions & 26 deletions lib/beacon/live_admin/components/core_components.ex
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,20 +48,20 @@ defmodule Beacon.LiveAdmin.CoreComponents do
def modal(assigns) do
~H"""
<div id={@id} phx-mounted={@show && show_modal(@id)} phx-remove={hide_modal(@id)} data-cancel={JS.exec(@on_cancel, "phx-remove")} class="relative z-50 hidden">
<div id={"#{@id}-bg"} class="bg-zinc-50/90 fixed inset-0 transition-opacity" aria-hidden="true" />
<div id={"#{@id}-bg"} class="fixed inset-0 transition-opacity bg-zinc-50/90" aria-hidden="true" />
<div class="fixed inset-0 overflow-y-auto" aria-labelledby={"#{@id}-title"} aria-describedby={"#{@id}-description"} role="dialog" aria-modal="true" tabindex="0">
<div class="flex min-h-full items-center justify-center">
<div class="flex items-center justify-center min-h-full">
<div class="w-full max-w-3xl p-4 sm:p-6 lg:py-8">
<.focus_wrap
id={"#{@id}-container"}
phx-window-keydown={JS.exec("data-cancel", to: "##{@id}")}
phx-key="escape"
phx-click-away={JS.exec("data-cancel", to: "##{@id}")}
class="shadow-zinc-700/10 ring-zinc-700/10 relative hidden rounded-2xl bg-white p-14 shadow-lg ring-1 transition"
class="relative hidden transition bg-white shadow-lg shadow-zinc-700/10 ring-zinc-700/10 rounded-2xl p-14 ring-1"
>
<div class="absolute top-6 right-5">
<button phx-click={JS.exec("data-cancel", to: "##{@id}")} type="button" class="-m-3 flex-none p-3 opacity-20 hover:opacity-40" aria-label={gettext("close")}>
<.icon name="hero-x-mark-solid" class="h-5 w-5" />
<button phx-click={JS.exec("data-cancel", to: "##{@id}")} type="button" class="flex-none p-3 -m-3 opacity-20 hover:opacity-40" aria-label={gettext("close")}>
<.icon name="hero-x-mark-solid" class="w-5 h-5" />
</button>
</div>
<div id={"#{@id}-content"}>
Expand Down Expand Up @@ -106,13 +106,13 @@ defmodule Beacon.LiveAdmin.CoreComponents do
{@rest}
>
<p :if={@title} class="flex items-center gap-1.5 text-sm font-semibold leading-6">
<.icon :if={@kind == :info} name="hero-information-circle-mini" class="h-4 w-4" />
<.icon :if={@kind == :error} name="hero-exclamation-circle-mini" class="h-4 w-4" />
<.icon :if={@kind == :info} name="hero-information-circle-mini" class="w-4 h-4" />
<.icon :if={@kind == :error} name="hero-exclamation-circle-mini" class="w-4 h-4" />
<%= @title %>
</p>
<p class="mt-2 text-sm leading-5"><%= msg %></p>
<button type="button" class="group absolute top-1 right-1 p-2" aria-label={gettext("close")}>
<.icon name="hero-x-mark-solid" class="h-5 w-5 opacity-40 group-hover:opacity-70" />
<button type="button" class="absolute p-2 group top-1 right-1" aria-label={gettext("close")}>
<.icon name="hero-x-mark-solid" class="w-5 h-5 opacity-40 group-hover:opacity-70" />
</button>
</div>
"""
Expand All @@ -132,7 +132,7 @@ defmodule Beacon.LiveAdmin.CoreComponents do
<.flash kind={:info} title="Success!" flash={@flash} />
<.flash kind={:error} title="Error!" flash={@flash} />
<.flash id="disconnected" kind={:error} title="We can't find the internet" phx-disconnected={show("#disconnected")} phx-connected={hide("#disconnected")} hidden>
Attempting to reconnect <.icon name="hero-arrow-path" class="ml-1 h-3 w-3 animate-spin" />
Attempting to reconnect <.icon name="hero-arrow-path" class="w-3 h-3 ml-1 animate-spin" />
</.flash>
"""
end
Expand Down Expand Up @@ -165,7 +165,7 @@ defmodule Beacon.LiveAdmin.CoreComponents do
<.form :let={f} for={@for} as={@as} {@rest}>
<div class="mt-10 space-y-8 bg-white">
<%= render_slot(@inner_block, f) %>
<div :for={action <- @actions} class="mt-2 flex items-center justify-between gap-6">
<div :for={action <- @actions} class="flex items-center justify-between gap-6 mt-2">
<%= render_slot(action, f) %>
</div>
</div>
Expand Down Expand Up @@ -269,7 +269,7 @@ defmodule Beacon.LiveAdmin.CoreComponents do
~H"""
<div phx-feedback-for={@name}>
<.label for={@id}><%= @label %></.label>
<select id={@id} name={@name} class="mt-1 block w-full rounded-md border border-gray-300 bg-white shadow-sm focus:border-zinc-400 focus:ring-0 sm:text-sm" multiple={@multiple} {@rest}>
<select id={@id} name={@name} class="block w-full mt-1 bg-white border border-gray-300 rounded-md shadow-sm focus:border-zinc-400 focus:ring-0 sm:text-sm" multiple={@multiple} {@rest}>
<option :if={@prompt} value=""><%= @prompt %></option>
<%= Phoenix.HTML.Form.options_for_select(@options, @value) %>
</select>
Expand Down Expand Up @@ -342,7 +342,7 @@ defmodule Beacon.LiveAdmin.CoreComponents do

def error(assigns) do
~H"""
<p class="mt-3 flex gap-3 text-sm leading-6 text-rose-600 phx-no-feedback:hidden">
<p class="flex gap-3 mt-3 text-sm leading-6 text-rose-600 phx-no-feedback:hidden">
<.icon name="hero-exclamation-circle-mini" class="mt-0.5 h-5 w-5 flex-none" />
<%= render_slot(@inner_block) %>
</p>
Expand All @@ -362,14 +362,14 @@ defmodule Beacon.LiveAdmin.CoreComponents do
~H"""
<header class={[@actions != [] && "flex items-center justify-between gap-6", @class]}>
<div>
<h1 class="text-lg font-semibold leading-8 text-zinc-800">
<h1 class="font-medium text-[#030913] text-lg/6 md:text-2xl/8">
<%= render_slot(@inner_block) %>
</h1>
<p :if={@subtitle != []} class="mt-2 text-sm leading-6 text-zinc-600">
<%= render_slot(@subtitle) %>
</p>
</div>
<div class="flex-none"><%= render_slot(@actions) %></div>
<div class="flex gap-4"><%= render_slot(@actions) %></div>
</header>
"""
end
Expand Down Expand Up @@ -406,27 +406,27 @@ defmodule Beacon.LiveAdmin.CoreComponents do
end

~H"""
<div class="overflow-y-auto px-4 sm:overflow-visible sm:px-0">
<div class="px-4 overflow-y-auto sm:overflow-visible sm:px-0">
<table class="w-[40rem] mt-11 sm:w-full">
<thead class="text-sm text-left leading-6 text-zinc-500">
<thead class="text-sm leading-6 text-left text-zinc-500">
<tr>
<th :for={col <- @col} class="p-0 pr-6 pb-4 font-normal"><%= col[:label] %></th>
<th :for={col <- @col} class="p-0 pb-4 pr-6 font-normal"><%= col[:label] %></th>
<th class="relative p-0 pb-4"><span class="sr-only"><%= gettext("Actions") %></span></th>
</tr>
</thead>
<tbody id={@id} phx-update={match?(%Phoenix.LiveView.LiveStream{}, @rows) && "stream"} class="relative divide-y divide-zinc-100 border-t border-zinc-200 text-sm leading-6 text-zinc-700">
<tbody id={@id} phx-update={match?(%Phoenix.LiveView.LiveStream{}, @rows) && "stream"} class="relative text-sm leading-6 border-t divide-y divide-zinc-100 border-zinc-200 text-zinc-700">
<tr :for={row <- @rows} id={@row_id && @row_id.(row)} class="group hover:bg-zinc-50">
<td :for={{col, i} <- Enum.with_index(@col)} phx-click={@row_click && @row_click.(row)} class={["relative p-0", @row_click && "hover:cursor-pointer"]}>
<div class="block py-4 pr-6">
<span class="absolute -inset-y-px right-0 -left-4 group-hover:bg-zinc-50 sm:rounded-l-xl" />
<span class="absolute right-0 -inset-y-px -left-4 group-hover:bg-zinc-50 sm:rounded-l-xl" />
<span class={["relative", i == 0 && "font-semibold text-zinc-900"]}>
<%= render_slot(col, @row_item.(row)) %>
</span>
</div>
</td>
<td :if={@action != []} class="relative w-14 p-0">
<div class="relative whitespace-nowrap py-4 text-right text-sm font-medium">
<span class="absolute -inset-y-px -right-4 left-0 group-hover:bg-zinc-50 sm:rounded-r-xl" />
<td :if={@action != []} class="relative p-0 w-14">
<div class="relative py-4 text-sm font-medium text-right whitespace-nowrap">
<span class="absolute left-0 -inset-y-px -right-4 group-hover:bg-zinc-50 sm:rounded-r-xl" />
<span :for={action <- @action} class="relative ml-4 font-semibold leading-6 text-zinc-900 hover:text-zinc-700">
<%= render_slot(action, @row_item.(row)) %>
</span>
Expand Down Expand Up @@ -458,7 +458,7 @@ defmodule Beacon.LiveAdmin.CoreComponents do
<div class="mt-14">
<dl class="-my-4 divide-y divide-zinc-100">
<div :for={item <- @item} class="flex gap-4 py-4 text-sm leading-6 sm:gap-8">
<dt class="w-1/4 flex-none text-zinc-500"><%= item.title %></dt>
<dt class="flex-none w-1/4 text-zinc-500"><%= item.title %></dt>
<dd class="text-zinc-700"><%= render_slot(item) %></dd>
</div>
</dl>
Expand All @@ -480,7 +480,7 @@ defmodule Beacon.LiveAdmin.CoreComponents do
~H"""
<div class="mt-16">
<.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) %>
</.link>
</div>
Expand All @@ -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
Expand Down
2 changes: 1 addition & 1 deletion lib/beacon/live_admin/live/component_editor_live/form_component.ex
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,7 @@ defmodule Beacon.LiveAdmin.ComponentEditorLive.FormComponent do
</:actions>
</.header>

<div class="grid items-start lg:h-[calc(100vh_-_144px)] grid-cols-1 mx-auto mt-10 gap-x-8 gap-y-8 lg:mx-0 lg:max-w-none lg:grid-cols-3">
<div class="grid items-start lg:h-[calc(100vh_-_144px)] grid-cols-1 mx-auto mt-4 gap-x-8 gap-y-8 lg:mx-0 lg:max-w-none lg:grid-cols-3">
<div class="p-4 bg-white col-span-full lg:col-span-1 rounded-[1.25rem] lg:rounded-t-[1.25rem] lg:rounded-b-none lg:h-full">
<.form :let={f} for={@form} id="component-form" class="space-y-8" phx-target={@myself} phx-submit="save">
<legend class="text-sm font-bold tracking-widest text-[#445668] uppercase">Component settings</legend>
Expand Down
Loading