refactor admin CSS: replace utility classes with semantic styles
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>
2026-03-01 17:15:25 +00:00
|
|
|
<div class="admin-layout">
|
2026-02-17 23:05:01 +00:00
|
|
|
<input id="admin-drawer" type="checkbox" class="admin-layout-toggle" />
|
2026-02-12 08:35:22 +00:00
|
|
|
|
|
|
|
|
<%!-- main content area --%>
|
2026-02-17 23:05:01 +00:00
|
|
|
<div class="admin-layout-content">
|
2026-02-12 08:35:22 +00:00
|
|
|
<%!-- mobile header --%>
|
2026-02-17 23:05:01 +00:00
|
|
|
<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>
|
2026-02-18 21:23:15 +00:00
|
|
|
<span class="admin-topbar-title">Berrypod</span>
|
2026-02-17 23:05:01 +00:00
|
|
|
<.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>
|
2026-02-12 08:35:22 +00:00
|
|
|
</header>
|
|
|
|
|
|
2026-02-21 10:24:26 +00:00
|
|
|
<%!-- email warning banner --%>
|
|
|
|
|
<div :if={!@email_configured} class="admin-banner-warning">
|
|
|
|
|
<.icon name="hero-exclamation-triangle" class="size-5 shrink-0" />
|
|
|
|
|
<p>
|
2026-02-21 10:44:46 +00:00
|
|
|
Email delivery isn't set up yet — customers won't receive order confirmations or shipping updates.
|
refactor admin CSS: replace utility classes with semantic styles
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>
2026-03-01 17:15:25 +00:00
|
|
|
<.link navigate={~p"/admin/settings/email"} class="admin-link">
|
2026-02-21 19:29:34 +00:00
|
|
|
Configure email
|
|
|
|
|
</.link>
|
2026-02-21 10:24:26 +00:00
|
|
|
</p>
|
|
|
|
|
</div>
|
|
|
|
|
|
2026-02-12 08:35:22 +00:00
|
|
|
<%!-- page content --%>
|
refactor admin CSS: replace utility classes with semantic styles
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>
2026-03-01 17:15:25 +00:00
|
|
|
<main class="admin-main">
|
|
|
|
|
<div class="admin-container">
|
2026-02-12 08:35:22 +00:00
|
|
|
{@inner_content}
|
|
|
|
|
</div>
|
|
|
|
|
</main>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<%!-- sidebar --%>
|
2026-02-17 23:05:01 +00:00
|
|
|
<div class="admin-sidebar-wrapper">
|
|
|
|
|
<label for="admin-drawer" class="admin-sidebar-overlay" aria-label="Close navigation"></label>
|
|
|
|
|
<aside class="admin-sidebar">
|
2026-02-12 08:35:22 +00:00
|
|
|
<%!-- sidebar header --%>
|
refactor admin CSS: replace utility classes with semantic styles
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>
2026-03-01 17:15:25 +00:00
|
|
|
<div class="admin-sidebar-header">
|
|
|
|
|
<.link navigate={~p"/admin"} class="admin-brand">
|
2026-02-18 21:23:15 +00:00
|
|
|
Berrypod
|
2026-02-12 08:35:22 +00:00
|
|
|
</.link>
|
complete admin CSS refactor: delete utilities.css, add layout primitives
- 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>
2026-03-01 21:40:21 +00:00
|
|
|
<p class="admin-text-secondary truncate">
|
2026-02-12 08:35:22 +00:00
|
|
|
{@current_scope.user.email}
|
|
|
|
|
</p>
|
|
|
|
|
</div>
|
|
|
|
|
|
2026-03-02 08:19:28 +00:00
|
|
|
<%!-- view shop link --%>
|
|
|
|
|
<div class="admin-sidebar-view-shop">
|
|
|
|
|
<.link href={~p"/"} class="admin-btn admin-btn-ghost admin-btn-sm admin-btn-block">
|
|
|
|
|
<.icon name="hero-arrow-top-right-on-square" class="size-4" /> View shop
|
|
|
|
|
</.link>
|
|
|
|
|
</div>
|
|
|
|
|
|
2026-02-12 08:35:22 +00:00
|
|
|
<%!-- nav links --%>
|
refactor admin CSS: replace utility classes with semantic styles
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>
2026-03-01 17:15:25 +00:00
|
|
|
<nav class="admin-sidebar-nav" aria-label="Admin navigation">
|
2026-02-28 20:17:03 +00:00
|
|
|
<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>
|
add activity log with order timeline and global feed
Single activity_log table powering two views: chronological timeline
on each order detail page (replacing the old fulfilment card) and a
global feed at /admin/activity with tabs, category filters, search,
and pagination. Real-time via PubSub — new entries appear instantly,
nav badge updates across all admin pages.
Instrumented across all event points: Stripe webhooks, order notifier,
submission worker, fulfilment status worker, product sync worker, and
Oban exhausted-job telemetry. Contextual action buttons (retry
submission, retry sync, dismiss) with Oban unique constraints to
prevent double-enqueue. 90-day pruning via cron.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-01 15:09:08 +00:00
|
|
|
<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>
|
2026-02-28 20:17:03 +00:00
|
|
|
<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>
|
2026-02-28 23:25:28 +00:00
|
|
|
<li>
|
|
|
|
|
<.link
|
|
|
|
|
navigate={~p"/admin/newsletter"}
|
|
|
|
|
class={admin_nav_active?(@current_path, "/admin/newsletter")}
|
|
|
|
|
>
|
|
|
|
|
<.icon name="hero-megaphone" class="size-5" /> Newsletter
|
|
|
|
|
</.link>
|
|
|
|
|
</li>
|
2026-02-28 20:17:03 +00:00
|
|
|
<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>
|
2026-02-12 08:35:22 +00:00
|
|
|
</nav>
|
|
|
|
|
|
|
|
|
|
<%!-- sidebar footer --%>
|
refactor admin CSS: replace utility classes with semantic styles
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>
2026-03-01 17:15:25 +00:00
|
|
|
<div class="admin-sidebar-footer">
|
2026-02-17 23:05:01 +00:00
|
|
|
<ul class="admin-nav">
|
2026-02-19 08:30:02 +00:00
|
|
|
<li>
|
2026-03-02 08:15:46 +00:00
|
|
|
<details class="admin-dev-tools">
|
|
|
|
|
<summary>
|
|
|
|
|
<.icon name="hero-wrench-screwdriver" class="size-5" /> Developer tools
|
|
|
|
|
<.icon name="hero-chevron-right" class="size-4 admin-dev-tools-chevron" />
|
|
|
|
|
</summary>
|
|
|
|
|
<ul class="admin-nav">
|
|
|
|
|
<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"/admin/oban"}>
|
|
|
|
|
<.icon name="hero-queue-list" class="size-5" /> Jobs
|
|
|
|
|
</.link>
|
|
|
|
|
</li>
|
|
|
|
|
</ul>
|
|
|
|
|
</details>
|
2026-03-02 07:44:06 +00:00
|
|
|
</li>
|
2026-02-12 08:35:22 +00:00
|
|
|
<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} />
|
