UX (#106)

* main content

* toggle sidebar

* assets.build

* adjust site selector space

assets/js/beacon_live_admin.js

@@ -5,8 +5,20 @@ let Hooks = {}
 Hooks.CodeEditorHook = CodeEditorHook
 
 topbar.config({barColors: {0: "#29d"}, shadowColor: "rgba(0, 0, 0, .3)"})
-window.addEventListener("phx:page-loading-start", _info => topbar.show(300))
-window.addEventListener("phx:page-loading-stop", _info => topbar.hide())
+
+window.addEventListener("phx:page-loading-start", (_event) => {
+  topbar.show(300)
+})
+
+window.addEventListener("phx:page-loading-stop", (_event) => {
+  topbar.hide()
+
+  const sidebarVisivility = localStorage.getItem("beacon:admin:sidebar-visibility")
+  let sidebar = document.getElementById("sidebar")
+  let sidebarShow = document.getElementById("sidebar-show")
+  if (sidebarVisivility === "hidden" && sidebar) { sidebar.style.display = "none" }
+  if (sidebarVisivility === "hidden" && sidebarShow) { sidebarShow.style.display = "block" }
+})
 
 window.addEventListener("beacon_admin:clipcopy", (event) => {
   const result_id = `${event.target.id}-copy-to-clipboard-result`
@@ -45,6 +57,18 @@ window.addEventListener("beacon_admin:clipcopy", (event) => {
   }
 });
 
+window.addEventListener("beacon:admin:sidebar-visible", (_event) => {
+  localStorage.setItem("beacon:admin:sidebar-visibility", "visible")
+  let sidebarShow = document.getElementById("sidebar-show")
+  if (sidebarShow) { sidebarShow.style.display = "none" }
+})
+
+window.addEventListener("beacon:admin:sidebar-hidden", (_event) => {
+  localStorage.setItem("beacon:admin:sidebar-visibility", "hidden")
+  let sidebarShow = document.getElementById("sidebar-show")
+  if (sidebarShow) { sidebarShow.style.display = "block" }
+})
+
 let socketPath = document.querySelector("html").getAttribute("phx-socket") || "/live"
 let csrfToken = document .querySelector("meta[name='csrf-token']") .getAttribute("content")
 let liveSocket = new LiveView.LiveSocket(socketPath, Phoenix.Socket, {

lib/beacon/live_admin/components/admin_components.ex

@@ -526,7 +526,7 @@ defmodule Beacon.LiveAdmin.AdminComponents do
 
     ~H"""
     <div class="px-4 overflow-y-auto sm:overflow-visible sm:px-0">
-      <table class="w-[40rem] mt-11 sm:w-full">
+      <table class="w-[40rem] mt-6 sm:w-full">
         <thead class="text-sm leading-6 text-left text-zinc-500">
           <tr>
             <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>
@@ -617,7 +617,7 @@ defmodule Beacon.LiveAdmin.AdminComponents do
 
   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]"}>
+    <div class={"#{@class} px-4 py-2 mt-6 bg-white col-span-full rounded-[1.1rem]"}>
       <%= render_slot(@inner_block) %>
     </div>
     """
@@ -646,7 +646,10 @@ defmodule Beacon.LiveAdmin.AdminComponents do
   def table_sort(assigns) do
     ~H"""
     <.simple_form :let={f} for={%{}} as={:sort} phx-change="beacon:table-sort">
-      <.input type="select" field={f[:sort_by]} value={@table.sort_by} options={@options} />
+      <div class="flex items-center gap-2 justify-end">
+        <label for="sort_sort_by" class="text-sm font-medium text-gray-900">Sort by</label>
+        <.input type="select" field={f[:sort_by]} value={@table.sort_by} options={@options} />
+      </div>
     </.simple_form>
     """
   end
@@ -666,7 +669,7 @@ defmodule Beacon.LiveAdmin.AdminComponents do
       <.link
         :if={@table.current_page > 1}
         patch={Table.prev_path(@socket, @page)}
-        class="border-b-4 border-transparent hover:text-blue-700 hover:border-blue-700 active:text-blue-800 focus:outline-none focus:duration-0 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-300 focus-visible:rounded focus-visible:duration-300 transition-link duration-300 only-large"
+        class="border-b-4 border-transparent hover:text-blue-600 hover:border-blue-600 active:text-blue-700 focus:outline-none focus:duration-0 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-300 focus-visible:rounded focus-visible:duration-300 transition-link duration-300 only-large"
       >
         <.icon name="hero-arrow-long-left-solid" class="mr-2" /> prev
       </.link>
@@ -681,9 +684,9 @@ defmodule Beacon.LiveAdmin.AdminComponents do
             class={
               if @table.current_page == page,
                 do:
-                  "px-3 pb-0.5 pt-1.5 border-b-4 border-transparent hover:text-blue-700 hover:border-blue-700 active:text-blue-800 focus:outline-none focus:duration-0 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-300 focus-visible:rounded focus-visible:duration-300 transition-link duration-300 only-large text-blue-600 border-blue-600",
+                  "px-3 pb-0.5 pt-1.5 border-b-4 border-transparent hover:text-blue-600 hover:border-blue-600 active:text-blue-700 focus:outline-none focus:duration-0 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-300 focus-visible:rounded focus-visible:duration-300 transition-link duration-300 only-large text-blue-700 border-blue-700",
                 else:
-                  "px-3 pb-0.5 pt-1.5 border-b-4 border-transparent hover:text-blue-700 hover:border-blue-700 active:text-blue-800 focus:outline-none focus:duration-0 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-300 focus-visible:rounded focus-visible:duration-300 transition-link duration-300 only-large"
+                  "px-3 pb-0.5 pt-1.5 border-b-4 border-transparent hover:text-blue-600 hover:border-blue-600 active:text-blue-700 focus:outline-none focus:duration-0 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-300 focus-visible:rounded focus-visible:duration-300 transition-link duration-300 only-large"
             }
           >
             <%= page %>
@@ -697,7 +700,7 @@ defmodule Beacon.LiveAdmin.AdminComponents do
       <.link
         :if={@table.current_page < @table.page_count}
         patch={Table.next_path(@socket, @page)}
-        class="border-b-4 border-transparent hover:text-blue-700 hover:border-blue-700 active:text-blue-800 focus:outline-none focus:duration-0 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-300 focus-visible:rounded focus-visible:duration-300 transition-link duration-300 only-large"
+        class="border-b-4 border-transparent hover:text-blue-600 hover:border-blue-600 active:text-blue-800 focus:outline-none focus:duration-0 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-300 focus-visible:rounded focus-visible:duration-300 transition-link duration-300 only-large"
       >
         next <.icon name="hero-arrow-long-right-solid" class="mr-2" />
       </.link>
@@ -720,8 +723,8 @@ defmodule Beacon.LiveAdmin.AdminComponents do
 
   def site_selector(assigns) do
     ~H"""
-    <div class="flex justify-end">
-      <.form id="site-selector-form" for={%{}} phx-change="change-site" class="-mt-16 w-1/12">
+    <div class="pr-2">
+      <.form id="site-selector-form" for={%{}} phx-change="change-site">
         <.input type="select" name="site" options={@options} value={@selected_site} />
       </.form>
     </div>

lib/beacon/live_admin/live/component_editor_live/index.ex

@@ -53,7 +53,7 @@ defmodule Beacon.LiveAdmin.ComponentEditorLive.Index do
       <.input field={f[:query]} type="search" autofocus={true} placeholder="Search by name (showing up to 20 results)" />
     </.simple_form>
 
-    <.main_content class="h-[calc(100vh_-_210px)]">
+    <.main_content>
       <.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>
         <:col :let={component} label="Category"><%= component.category %></:col>

lib/beacon/live_admin/live/error_page_editor_live/index.ex

@@ -207,7 +207,7 @@ defmodule Beacon.LiveAdmin.ErrorPageEditorLive.Index do
         </:actions>
       </.header>
 
-      <.main_content class="h-[calc(100vh_-_223px)]">
+      <.main_content>
         <.modal :if={@show_nav_modal} id="confirm-nav" on_cancel={JS.push("stay_here")} show>
           <p>You've made unsaved changes to this error page!</p>
           <p>Navigating to another error page without saving will cause these changes to be lost.</p>

lib/beacon/live_admin/live/layout_editor_live/index.ex

@@ -53,7 +53,7 @@ defmodule Beacon.LiveAdmin.LayoutEditorLive.Index do
       <.input field={f[:query]} type="search" autofocus={true} placeholder="Search by title (showing up to 20 results)" />
     </.simple_form>
 
-    <.main_content class="h-[calc(100vh_-_210px)]">
+    <.main_content>
       <.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>
         <:col :let={layout} label="Status"><%= display_status(layout.status) %></:col>

lib/beacon/live_admin/live/layout_editor_live/resource_links.ex

@@ -112,7 +112,7 @@ defmodule Beacon.LiveAdmin.LayoutEditorLive.ResourceLinks do
         </:actions>
       </.header>
 
-      <.main_content class="h-[calc(100vh_-_223px)]">
+      <.main_content>
         <div class="flex gap-4">
           <.button type="button" phx-click="add">New Resource Link</.button>
           <.button type="button" phx-click="show-new-attribute-modal">New Attribute</.button>

lib/beacon/live_admin/live/meta_tags_component.ex

@@ -107,7 +107,7 @@ defmodule Beacon.LiveAdmin.MetaTagsComponent do
           <.button phx-disable-with="Saving..." form="meta-tags-form" class="uppercase">Save Changes</.button>
         </:actions>
       </.header>
-      <.main_content class="h-[calc(100vh_-_223px)]">
+      <.main_content>
         <div class="flex gap-4">
           <.button type="button" phx-click="add" phx-target={@myself}>New Meta Tag</.button>
           <.button type="button" phx-click="show-new-attribute-modal" phx-target={@myself}>New Meta Attribute</.button>

lib/beacon/live_admin/live/page_editor_live/event_handlers.ex

@@ -149,7 +149,7 @@ defmodule Beacon.LiveAdmin.PageEditorLive.EventHandlers do
           <.button type="button" phx-click="create_new">New Event Handler</.button>
         </:actions>
       </.header>
-      <.main_content class="h-[calc(100vh_-_223px)]">
+      <.main_content>
         <.modal :if={@show_nav_modal} id="confirm-nav" on_cancel={JS.push("stay_here")} show>
           <p>You've made unsaved changes to this event handler!</p>
           <p>Navigating to another event handler without saving will cause these changes to be lost.</p>

lib/beacon/live_admin/live/page_editor_live/index.ex

@@ -49,15 +49,15 @@ defmodule Beacon.LiveAdmin.PageEditorLive.Index do
     </.header>
 
     <div class="flex justify-between">
-      <div class="basis-10/12">
+      <div class="basis-4/12">
         <.table_search table={@beacon_page.table} placeholder="Search by path or title (showing up to 15 results)" />
       </div>
-      <div class="basis-1/12">
+      <div class="basis-2/12">
         <.table_sort table={@beacon_page.table} options={[{"Title", "title"}, {"Path", "path"}]} />
       </div>
     </div>
 
-    <.main_content class="h-[calc(100vh_-_210px)]">
+    <.main_content>
       <.table id="pages" rows={@streams.pages} row_click={fn {_dom_id, page} -> JS.navigate(beacon_live_admin_path(@socket, @beacon_page.site, "/pages/#{page.id}")) end}>
         <:col :let={{_, page}} label="Title"><%= page.title %></:col>
         <:col :let={{_, page}} label="Path"><%= page.path %></:col>

lib/beacon/live_admin/live/page_editor_live/variants.ex

@@ -145,7 +145,7 @@ defmodule Beacon.LiveAdmin.PageEditorLive.Variants do
           <.button type="button" phx-click="create_new">New Variant</.button>
         </:actions>
       </.header>
-      <.main_content class="h-[calc(100vh_-_223px)]">
+      <.main_content>
         <.modal :if={@show_nav_modal} id="confirm-nav" on_cancel={JS.push("stay_here")} show>
           <p>You've made unsaved changes to this variant!</p>
           <p>Navigating to another variant without saving will cause these changes to be lost.</p>

lib/beacon/live_admin/page_live.ex

@@ -250,10 +250,10 @@ defmodule Beacon.LiveAdmin.PageLive do
     ~H"""
     <.link
       href={@path}
-      class="w-full transition-colors outline-none active:text-blue-700 focus-visible:[&:not(:active)]:ring-2 @[350px]:focus-visible:[&:not(:active)]:ring-4 focus-visible:ring-purple-500 hover:bg-slate-100 flex rounded items-center justify-center @[180px]:justify-start gap-0 @[180px]:gap-1.5 @[240px]:gap-2  @[300px]:gap-2.5 px-[22px] py-3.5 @[180px]:p-3 @[240px]:py-3.5 @[240px]:px-3 @[350px]:py-4 antialiased font-semibold text-base @[240px]:text-lg  @[300px]:text-xl @[350px]:text-2xl text-slate-800"
+      class="w-full transition-colors outline-none active:text-blue-700 focus-visible:[&:not(:active)]:ring-2 @[350px]:focus-visible:[&:not(:active)]:ring-4 focus-visible:ring-purple-500 hover:bg-slate-100 flex rounded items-center justify-center @[180px]:justify-start gap-0 @[180px]:gap-2 @[240px]:gap-3  @[300px]:gap-4 px-[18px] py-3.5 @[180px]:p-2 @[240px]:py-3.5 @[240px]:px-2 @[350px]:py-4 antialiased font-semibold text-base @[240px]:text-lg  @[300px]:text-xl @[350px]:text-2xl text-slate-800"
     >
       <span :if={@icon} aria-hidden="true" class={@icon <> " aspect-square h-7 @[180px]:h-4.5 w-7 @[180px]:w-4.5 @[350px]:h-7 @[350px]:w-7"}></span>
-      <div class="hidden font-semibold @[180px]:block line-clamp-1"><%= @text %></div>
+      <div class="hidden font-semibold @[180px]:block line-clamp-1 text-blue-700"><%= @text %></div>
     </.link>
     """
   end
@@ -266,7 +266,7 @@ defmodule Beacon.LiveAdmin.PageLive do
     ~H"""
     <.link
       href={@path}
-      class="w-full transition-colors outline-none active:text-blue-700 focus-visible:[&:not(:active)]:ring-2 @[350px]:focus-visible:[&:not(:active)]:ring-4 focus-visible:ring-purple-500 hover:bg-slate-100 flex rounded items-center justify-center @[180px]:justify-start gap-0 @[180px]:gap-1.5 @[240px]:gap-2  @[300px]:gap-2.5 px-[22px] py-3.5 @[180px]:p-3 @[240px]:py-3.5 @[240px]:px-3 @[350px]:py-4 antialiased font-semibold text-base @[240px]:text-lg  @[300px]:text-xl @[350px]:text-2xl text-slate-800"
+      class="w-full transition-colors outline-none active:text-blue-700 focus-visible:[&:not(:active)]:ring-2 @[350px]:focus-visible:[&:not(:active)]:ring-4 focus-visible:ring-purple-500 hover:bg-slate-100 flex rounded items-center justify-center @[180px]:justify-start gap-0 @[180px]:gap-2 @[240px]:gap-3  @[300px]:gap-4 px-[18px] py-3.5 @[180px]:p-2 @[240px]:py-3.5 @[240px]:px-2 @[350px]:py-4 antialiased font-semibold text-base @[240px]:text-lg  @[300px]:text-xl @[350px]:text-2xl text-slate-800"
     >
       <span :if={@icon} aria-hidden="true" class={@icon <> " aspect-square h-7 @[180px]:h-4.5 w-7 @[180px]:w-4.5 @[350px]:h-7 @[350px]:w-7"}></span>
       <div class="hidden font-semibold @[180px]:block line-clamp-1"><%= @text %></div>
@@ -282,4 +282,16 @@ defmodule Beacon.LiveAdmin.PageLive do
     <span class=""><%= @text %></span>
     """
   end
+
+  defp show_sidebar do
+    %JS{}
+    |> JS.show(to: "#sidebar", time: 300)
+    |> JS.dispatch("beacon:admin:sidebar-visible")
+  end
+
+  defp hide_sidebar do
+    %JS{}
+    |> JS.hide(to: "#sidebar", time: 300)
+    |> JS.dispatch("beacon:admin:sidebar-hidden")
+  end
 end

lib/beacon/live_admin/page_live.html.heex

@@ -1,7 +1,10 @@
-<aside class="@container w-full max-w-[76px] sm:max-w-[180px]">
-  <div class="flex flex-col h-full min-h-screen px-1 py-2 bg-white shadow-xl @[180px]:py-3 @[180px]:pr-0 @[180px]:pl-2 @[240px]:pl-3 @[350px]:pl-6">
+<aside id="sidebar" class="@container w-full max-w-[76px] sm:max-w-[180px]">
+  <div class="flex flex-col h-full min-h-screen px-1 py-2 bg-white shadow-xl @[180px]:pr-0 @[180px]:pl-2 @[240px]:pl-3 @[350px]:pl-6">
     <header class="p-2 @[240px]:py-2.5 @[300px]:py-3.5 @[350px]:py-4.5">
       <div class="flex items-center justify-center @[180px]:justify-start gap-0 @[180px]:gap-1.5 @[240px]:gap-2.5 @[300px]:gap-3.5 @[350px]:gap-4">
+        <button id="sidebar-hide" phx-click={hide_sidebar()}>
+          <.icon name="hero-arrow-long-left" />
+        </button>
         <!--
         <% # @Hanna, ask about image paths %>
         <img
@@ -16,19 +19,22 @@
         -->
       </div>
     </header>
-    <nav aria-label="Primary navigation" class="flex flex-col flex-1">
-      <ul role="list" class="flex flex-1 flex-col gap-0.5">
+    <nav aria-label="Primary navigation" class="flex flex-col flex-1 px-2">
+      <ul role="list" class="flex flex-1 flex-col gap-0.5 mt-2">
         <%= for link <- @__beacon_menu__.links, link != :skip do %>
           <li>
             <%= maybe_link(@socket, @beacon_page, link) %>
           </li>
         <% end %>
       </ul>
     </nav>
+    <.site_selector selected_site={@beacon_page.site} options={@__beacon_sites__} />
   </div>
 </aside>
-<main class="w-full px-4 pt-16 sm:px-6 lg:px-8">
-  <.site_selector selected_site={@beacon_page.site} options={@__beacon_sites__} />
 
+<main class="w-full px-4 pt-4 sm:px-6 lg:px-6">
+  <button id="sidebar-show" phx-click={show_sidebar()} class="hidden">
+    <.icon name="hero-bars-3" />
+  </button>
   <%= render_page(@beacon_page.module, assigns) %>
 </main>