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>
93 lines
3.1 KiB
Plaintext
93 lines
3.1 KiB
Plaintext
<.header>
|
|
Providers
|
|
<:actions>
|
|
<div class="admin-dropdown">
|
|
<div tabindex="0" role="button" class="admin-btn admin-btn-primary">
|
|
<.icon name="hero-plus" class="size-4" /> Connect provider
|
|
</div>
|
|
<ul tabindex="0" class="admin-dropdown-content">
|
|
<li :for={provider <- @available_providers}>
|
|
<.link navigate={~p"/admin/providers/new?type=#{provider.type}"}>{provider.name}</.link>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</:actions>
|
|
</.header>
|
|
|
|
<div id="connections" phx-update="stream" class="admin-stack admin-card-spaced">
|
|
<div id="connections-empty" class="hidden only:block">
|
|
<div class="admin-empty-state">
|
|
<.icon name="hero-cube" class="admin-empty-state-icon" />
|
|
<h2 class="admin-empty-state-title">Connect a print-on-demand provider</h2>
|
|
<p class="admin-empty-state-text">
|
|
Connect your account to import products and start selling.
|
|
</p>
|
|
<div class="admin-empty-state-actions">
|
|
<.button
|
|
:for={provider <- @available_providers}
|
|
navigate={~p"/admin/providers/new?type=#{provider.type}"}
|
|
>
|
|
Connect {provider.name}
|
|
</.button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
:for={{dom_id, connection} <- @streams.connections}
|
|
id={dom_id}
|
|
class="admin-card"
|
|
>
|
|
<div class="admin-card-body">
|
|
<div class="admin-card-row">
|
|
<div class="admin-card-content">
|
|
<div class="admin-row">
|
|
<.status_indicator status={connection.sync_status} enabled={connection.enabled} />
|
|
<h3 class="admin-card-title admin-section-heading admin-section-desc-flush">
|
|
{provider_name(connection.provider_type)}
|
|
</h3>
|
|
</div>
|
|
<p class="admin-card-subtitle">{connection.name}</p>
|
|
<div class="admin-card-meta">
|
|
<.connection_info connection={connection} />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="admin-card-toolbar">
|
|
<.link
|
|
navigate={~p"/admin/providers/#{connection.id}/edit"}
|
|
class="admin-btn admin-btn-ghost admin-btn-sm"
|
|
>
|
|
Settings
|
|
</.link>
|
|
<button
|
|
phx-click="delete"
|
|
phx-value-id={connection.id}
|
|
data-confirm={"Disconnect from #{provider_name(connection.provider_type)}? Your synced products will remain in your shop."}
|
|
class="admin-btn admin-btn-ghost admin-btn-sm admin-text-error"
|
|
>
|
|
Disconnect
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="admin-card-actions">
|
|
<button
|
|
phx-click="sync"
|
|
phx-value-id={connection.id}
|
|
disabled={connection.sync_status == "syncing"}
|
|
class="admin-btn admin-btn-outline admin-btn-sm"
|
|
>
|
|
<.icon
|
|
name="hero-arrow-path"
|
|
class={
|
|
if connection.sync_status == "syncing", do: "size-4 animate-spin", else: "size-4"
|
|
}
|
|
/>
|
|
{if connection.sync_status == "syncing", do: "Syncing...", else: "Sync products"}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|