ae6cf209aa
- Delete utilities.css (701 lines / 24 KB of Tailwind utility clones) - Add layout.css with admin-stack, admin-row, admin-cluster, admin-grid primitives and gap variants (sm, md, lg, xl) - Add transitions.css import and layout.css import to admin.css entry point - Replace all Tailwind utility classes across 26 admin templates with semantic admin-*/theme-*/page-specific CSS classes - Replace all non-dynamic inline styles with semantic classes - Add ~100 new semantic classes to components.css (analytics, dashboard, order detail, settings, theme editor, generic utilities) - Fix stray text-error → admin-text-error in media.ex - Add missing .truncate definition to admin CSS - Only remaining inline styles are dynamic data values (progress bars, chart dimensions) and one JS.toggle target 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">
|
|
{@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} />
|