b7ec41b0cf
Replace Tailwind utility soup across admin templates with semantic CSS classes. Add layout primitives (stack, row, cluster, grid), extract JS transition helpers into transitions.css, and refactor core_components, layouts, settings, newsletter, order_show, providers, and theme editor templates. Utility occurrences reduced from 290+ to 127 across admin files. All 1679 tests pass. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
223 lines
7.3 KiB
Plaintext
223 lines
7.3 KiB
Plaintext
<div class="admin-layout">
|
|
<input id="admin-drawer" type="checkbox" class="admin-layout-toggle" />
|
|
|
|
<%!-- main content area --%>
|
|
<div class="admin-layout-content">
|
|
<%!-- mobile header --%>
|
|
<header class="admin-topbar">
|
|
<label
|
|
for="admin-drawer"
|
|
class="admin-btn admin-btn-ghost admin-btn-icon"
|
|
aria-label="Open navigation"
|
|
>
|
|
<.icon name="hero-bars-3" class="size-5" />
|
|
</label>
|
|
<span class="admin-topbar-title">Berrypod</span>
|
|
<.link href={~p"/"} class="admin-btn admin-btn-ghost admin-btn-sm">
|
|
<.icon name="hero-arrow-top-right-on-square-mini" class="size-4" /> Shop
|
|
</.link>
|
|
</header>
|
|
|
|
<%!-- email warning banner --%>
|
|
<div :if={!@email_configured} class="admin-banner-warning">
|
|
<.icon name="hero-exclamation-triangle" class="size-5 shrink-0" />
|
|
<p>
|
|
Email delivery isn't set up yet — customers won't receive order confirmations or shipping updates.
|
|
<.link navigate={~p"/admin/settings/email"} class="admin-link">
|
|
Configure email
|
|
</.link>
|
|
</p>
|
|
</div>
|
|
|
|
<%!-- page content --%>
|
|
<main class="admin-main">
|
|
<div class="admin-container">
|
|
{@inner_content}
|
|
</div>
|
|
</main>
|
|
</div>
|
|
|
|
<%!-- sidebar --%>
|
|
<div class="admin-sidebar-wrapper">
|
|
<label for="admin-drawer" class="admin-sidebar-overlay" aria-label="Close navigation"></label>
|
|
<aside class="admin-sidebar">
|
|
<%!-- sidebar header --%>
|
|
<div class="admin-sidebar-header">
|
|
<.link navigate={~p"/admin"} class="admin-brand">
|
|
Berrypod
|
|
</.link>
|
|
<p class="admin-text-secondary truncate" style="margin-top: 0.125rem;">
|
|
{@current_scope.user.email}
|
|
</p>
|
|
</div>
|
|
|
|
<%!-- nav links --%>
|
|
<nav class="admin-sidebar-nav" aria-label="Admin navigation">
|
|
<div class="admin-nav-group">
|
|
<span class="admin-nav-heading">Shop</span>
|
|
<ul class="admin-nav">
|
|
<li>
|
|
<.link
|
|
navigate={~p"/admin"}
|
|
class={admin_nav_active?(@current_path, "/admin")}
|
|
>
|
|
<.icon name="hero-home" class="size-5" /> Dashboard
|
|
</.link>
|
|
</li>
|
|
<li>
|
|
<.link
|
|
navigate={~p"/admin/analytics"}
|
|
class={admin_nav_active?(@current_path, "/admin/analytics")}
|
|
>
|
|
<.icon name="hero-chart-bar" class="size-5" /> Analytics
|
|
</.link>
|
|
</li>
|
|
<li>
|
|
<.link
|
|
navigate={~p"/admin/orders"}
|
|
class={admin_nav_active?(@current_path, "/admin/orders")}
|
|
>
|
|
<.icon name="hero-shopping-bag" class="size-5" /> Orders
|
|
</.link>
|
|
</li>
|
|
<li>
|
|
<.link
|
|
navigate={~p"/admin/activity"}
|
|
class={admin_nav_active?(@current_path, "/admin/activity")}
|
|
>
|
|
<.icon name="hero-bell" class="size-5" /> Activity
|
|
<span
|
|
:if={@attention_count > 0}
|
|
class="admin-badge admin-badge-sm admin-badge-warning ml-auto"
|
|
>
|
|
{@attention_count}
|
|
</span>
|
|
</.link>
|
|
</li>
|
|
<li>
|
|
<.link
|
|
navigate={~p"/admin/products"}
|
|
class={admin_nav_active?(@current_path, "/admin/products")}
|
|
>
|
|
<.icon name="hero-cube" class="size-5" /> Products
|
|
</.link>
|
|
</li>
|
|
<li>
|
|
<.link
|
|
navigate={~p"/admin/providers"}
|
|
class={admin_nav_active?(@current_path, "/admin/providers")}
|
|
>
|
|
<.icon name="hero-link" class="size-5" /> Print providers
|
|
</.link>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="admin-nav-group">
|
|
<span class="admin-nav-heading">Content</span>
|
|
<ul class="admin-nav">
|
|
<li>
|
|
<.link
|
|
navigate={~p"/admin/pages"}
|
|
class={admin_nav_active?(@current_path, "/admin/pages")}
|
|
>
|
|
<.icon name="hero-document" class="size-5" /> Pages
|
|
</.link>
|
|
</li>
|
|
<li>
|
|
<.link
|
|
navigate={~p"/admin/navigation"}
|
|
class={admin_nav_active?(@current_path, "/admin/navigation")}
|
|
>
|
|
<.icon name="hero-bars-3" class="size-5" /> Navigation
|
|
</.link>
|
|
</li>
|
|
<li>
|
|
<.link
|
|
navigate={~p"/admin/media"}
|
|
class={admin_nav_active?(@current_path, "/admin/media")}
|
|
>
|
|
<.icon name="hero-photo" class="size-5" /> Media
|
|
</.link>
|
|
</li>
|
|
<li>
|
|
<.link
|
|
navigate={~p"/admin/newsletter"}
|
|
class={admin_nav_active?(@current_path, "/admin/newsletter")}
|
|
>
|
|
<.icon name="hero-megaphone" class="size-5" /> Newsletter
|
|
</.link>
|
|
</li>
|
|
<li>
|
|
<.link
|
|
href={~p"/admin/theme"}
|
|
class={admin_nav_active?(@current_path, "/admin/theme")}
|
|
>
|
|
<.icon name="hero-paint-brush" class="size-5" /> Theme
|
|
</.link>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="admin-nav-group">
|
|
<span class="admin-nav-heading">Settings</span>
|
|
<ul class="admin-nav">
|
|
<li>
|
|
<.link
|
|
navigate={~p"/admin/settings"}
|
|
class={admin_nav_active?(@current_path, "/admin/settings")}
|
|
>
|
|
<.icon name="hero-cog-6-tooth" class="size-5" /> Settings
|
|
</.link>
|
|
</li>
|
|
<li>
|
|
<.link
|
|
navigate={~p"/admin/settings/email"}
|
|
class={admin_nav_active?(@current_path, "/admin/settings/email")}
|
|
>
|
|
<.icon name="hero-envelope" class="size-5" /> Email
|
|
</.link>
|
|
</li>
|
|
<li>
|
|
<.link
|
|
navigate={~p"/admin/redirects"}
|
|
class={admin_nav_active?(@current_path, "/admin/redirects")}
|
|
>
|
|
<.icon name="hero-arrow-uturn-right" class="size-5" /> Redirects
|
|
</.link>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</nav>
|
|
|
|
<%!-- sidebar footer --%>
|
|
<div class="admin-sidebar-footer">
|
|
<ul class="admin-nav">
|
|
<li>
|
|
<.link href={~p"/"}>
|
|
<.icon name="hero-arrow-top-right-on-square" class="size-5" /> View shop
|
|
</.link>
|
|
</li>
|
|
<li>
|
|
<.link href={~p"/admin/dashboard"}>
|
|
<.icon name="hero-chart-bar" class="size-5" /> LiveDashboard
|
|
</.link>
|
|
</li>
|
|
<li>
|
|
<.link href={~p"/admin/errors"}>
|
|
<.icon name="hero-bug-ant" class="size-5" /> Errors
|
|
</.link>
|
|
</li>
|
|
<li>
|
|
<.link href={~p"/users/log-out"} method="delete">
|
|
<.icon name="hero-arrow-right-start-on-rectangle" class="size-5" /> Log out
|
|
</.link>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</aside>
|
|
</div>
|
|
</div>
|
|
|
|
<.flash_group flash={@flash} />
|