jamey/berrypod
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects 1 Releases Wiki Activity

format refactored admin templates

Browse Source 
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
jamey 2026-03-01 19:39:56 +00:00
parent 867a69109e
commit 22d3e36ed5
4 changed files with 160 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
lib/berrypod_web/live/admin/newsletter.ex
View File

@ -205,7 +205,10 @@ defmodule BerrypodWeb.Admin.Newsletter do
</div>
<button
phx-click="toggle_enabled"
class={["admin-switch", if(@newsletter_enabled, do: "admin-switch-on", else: "admin-switch-off")]}
class={[
"admin-switch",
if(@newsletter_enabled, do: "admin-switch-on", else: "admin-switch-off")
]}
role="switch"
aria-checked={to_string(@newsletter_enabled)}
aria-label="Toggle newsletter signups"
@ -231,10 +234,18 @@ defmodule BerrypodWeb.Admin.Newsletter do
</div>
<div class="admin-row" style="--admin-row-gap: 0.75rem;">
<.link navigate={~p"/admin/newsletter?tab=subscribers"} class="admin-link" style="font-weight: 500;">
<.link
navigate={~p"/admin/newsletter?tab=subscribers"}
class="admin-link"
style="font-weight: 500;"
>
View subscribers
</.link>
<.link navigate={~p"/admin/newsletter?tab=campaigns"} class="admin-link" style="font-weight: 500;">
<.link
navigate={~p"/admin/newsletter?tab=campaigns"}
class="admin-link"
style="font-weight: 500;"
>
View campaigns
</.link>
</div>
@ -328,7 +339,9 @@ defmodule BerrypodWeb.Admin.Newsletter do
<div :if={@subscriber_count == 0} class="admin-empty-state">
<.icon name="hero-envelope" class="admin-empty-state-icon" />
<p class="admin-empty-state-title">No subscribers yet</p>
<p class="admin-empty-state-text">Subscribers will appear here when people sign up via your shop.</p>
<p class="admin-empty-state-text">
Subscribers will appear here when people sign up via your shop.
</p>
</div>
</div>
"""

5
lib/berrypod_web/live/admin/order_show.ex
View File

@ -48,7 +48,10 @@ defmodule BerrypodWeb.Admin.OrderShow do
</div>
</.header>
<div class="admin-grid" style="--admin-grid-min: 20rem; --admin-grid-gap: 1.5rem; margin-top: 1.5rem;">
<div
class="admin-grid"
style="--admin-grid-min: 20rem; --admin-grid-gap: 1.5rem; margin-top: 1.5rem;"
>
<%!-- order info --%>
<div class="admin-card">
<div class="admin-card-body">

17
lib/berrypod_web/live/admin/settings.ex
View File

@ -593,7 +593,12 @@ defmodule BerrypodWeb.Admin.Settings do
<p class="admin-section-desc" style="margin-top: 0;">
To accept payments, connect your Stripe account by entering your secret key.
You can find it in your
<a href="https://dashboard.stripe.com/apikeys" target="_blank" rel="noopener" class="admin-link">
<a
href="https://dashboard.stripe.com/apikeys"
target="_blank"
rel="noopener"
class="admin-link"
>
Stripe dashboard
</a>
under Developers &rarr; API keys.
@ -631,7 +636,9 @@ defmodule BerrypodWeb.Admin.Settings do
</div>
<div class="admin-dl-row">
<dt class="admin-dl-term">Webhook URL</dt>
<dd class="admin-dl-value"><code style="font-size: 0.75rem; word-break: break-all;">{@stripe_webhook_url}</code></dd>
<dd class="admin-dl-value">
<code style="font-size: 0.75rem; word-break: break-all;">{@stripe_webhook_url}</code>
</dd>
</div>
<div class="admin-dl-row">
<dt class="admin-dl-term">Webhook secret</dt>
@ -670,7 +677,11 @@ defmodule BerrypodWeb.Admin.Settings do
</.form>
<% else %>
<div style="border-top: 1px solid var(--t-surface-sunken); padding-top: 0.75rem;">
<button phx-click="toggle_stripe_advanced" class="admin-link-subtle admin-row" style="--admin-row-gap: 0.25rem;">
<button
phx-click="toggle_stripe_advanced"
class="admin-link-subtle admin-row"
style="--admin-row-gap: 0.25rem;"
>
<.icon
name={if @advanced_open, do: "hero-chevron-down-mini", else: "hero-chevron-right-mini"}
class="size-4"

117
lib/berrypod_web/live/admin/theme/index.html.heex
View File

@ -218,7 +218,11 @@
<!-- Logo Size Slider -->
<%= if @logo_image do %>
<form phx-change="update_setting" phx-value-field="logo_size" style="margin-top: 0.75rem;">
<form
phx-change="update_setting"
phx-value-field="logo_size"
style="margin-top: 0.75rem;"
>
<div class="theme-slider-header">
<span class="theme-slider-label">Logo size</span>
<span class="theme-slider-value">{@theme_settings.logo_size}px</span>
@ -668,7 +672,13 @@
<!-- Typography Group -->
<div class="theme-group">
<div class="theme-group-header">
<svg class="theme-group-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<svg
class="theme-group-icon"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
>
<polyline points="4 7 4 4 20 4 20 7"></polyline>
<line x1="9" y1="20" x2="15" y2="20"></line>
<line x1="12" y1="4" x2="12" y2="20"></line>
@ -685,7 +695,10 @@
phx-click="update_setting"
phx-value-field="typography"
phx-value-setting_value={typo}
class={["theme-chip", @theme_settings.typography == typo && "theme-chip-active"]}
class={[
"theme-chip",
@theme_settings.typography == typo && "theme-chip-active"
]}
>
{typo}
</button>
@ -702,7 +715,10 @@
phx-click="update_setting"
phx-value-field="font_size"
phx-value-setting_value={value}
class={["theme-chip", @theme_settings.font_size == value && "theme-chip-active"]}
class={[
"theme-chip",
@theme_settings.font_size == value && "theme-chip-active"
]}
>
{label}
</button>
@ -719,7 +735,10 @@
phx-click="update_setting"
phx-value-field="heading_weight"
phx-value-setting_value={value}
class={["theme-chip", @theme_settings.heading_weight == value && "theme-chip-active"]}
class={[
"theme-chip",
@theme_settings.heading_weight == value && "theme-chip-active"
]}
>
{label}
</button>
@ -731,7 +750,13 @@
<!-- Colours Group -->
<div class="theme-group">
<div class="theme-group-header">
<svg class="theme-group-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<svg
class="theme-group-icon"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
>
<circle cx="12" cy="12" r="10"></circle>
<circle cx="12" cy="12" r="3"></circle>
</svg>
@ -759,7 +784,13 @@
<!-- Layout Group -->
<div class="theme-group">
<div class="theme-group-header">
<svg class="theme-group-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<svg
class="theme-group-icon"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
>
<rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
<line x1="3" y1="9" x2="21" y2="9"></line>
<line x1="9" y1="21" x2="9" y2="9"></line>
@ -776,7 +807,10 @@
phx-click="update_setting"
phx-value-field="grid_columns"
phx-value-setting_value={cols}
class={["theme-chip", @theme_settings.grid_columns == cols && "theme-chip-active"]}
class={[
"theme-chip",
@theme_settings.grid_columns == cols && "theme-chip-active"
]}
>
{cols} columns
</button>
@ -793,7 +827,10 @@
phx-click="update_setting"
phx-value-field="density"
phx-value-setting_value={density}
class={["theme-chip", @theme_settings.density == density && "theme-chip-active"]}
class={[
"theme-chip",
@theme_settings.density == density && "theme-chip-active"
]}
>
{density}
</button>
@ -810,7 +847,10 @@
phx-click="update_setting"
phx-value-field="header_layout"
phx-value-setting_value={layout}
class={["theme-chip", @theme_settings.header_layout == layout && "theme-chip-active"]}
class={[
"theme-chip",
@theme_settings.header_layout == layout && "theme-chip-active"
]}
>
{layout}
</button>
@ -848,7 +888,13 @@
<!-- Shape Group -->
<div style="margin-bottom: 1rem;">
<div class="theme-group-header">
<svg class="theme-group-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<svg
class="theme-group-icon"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
>
<rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
</svg>
<span class="theme-group-title">Shape</span>
@ -880,7 +926,10 @@
phx-click="update_setting"
phx-value-field="card_shadow"
phx-value-setting_value={value}
class={["theme-chip", @theme_settings.card_shadow == value && "theme-chip-active"]}
class={[
"theme-chip",
@theme_settings.card_shadow == value && "theme-chip-active"
]}
>
{label}
</button>
@ -897,7 +946,10 @@
phx-click="update_setting"
phx-value-field="button_style"
phx-value-setting_value={value}
class={["theme-chip", @theme_settings.button_style == value && "theme-chip-active"]}
class={[
"theme-chip",
@theme_settings.button_style == value && "theme-chip-active"
]}
>
{label}
</button>
@ -909,7 +961,13 @@
<!-- Products Group -->
<div class="theme-group">
<div class="theme-group-header">
<svg class="theme-group-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<svg
class="theme-group-icon"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
>
<rect x="3" y="3" width="7" height="7"></rect>
<rect x="14" y="3" width="7" height="7"></rect>
<rect x="14" y="14" width="7" height="7"></rect>
@ -927,7 +985,10 @@
phx-click="update_setting"
phx-value-field="layout_width"
phx-value-setting_value={width}
class={["theme-chip", @theme_settings.layout_width == width && "theme-chip-active"]}
class={[
"theme-chip",
@theme_settings.layout_width == width && "theme-chip-active"
]}
>
{width}
</button>
@ -944,7 +1005,10 @@
phx-click="update_setting"
phx-value-field="image_aspect_ratio"
phx-value-setting_value={value}
class={["theme-chip", @theme_settings.image_aspect_ratio == value && "theme-chip-active"]}
class={[
"theme-chip",
@theme_settings.image_aspect_ratio == value && "theme-chip-active"
]}
>
{label}
</button>
@ -961,7 +1025,10 @@
phx-click="update_setting"
phx-value-field="product_text_align"
phx-value-setting_value={value}
class={["theme-chip", @theme_settings.product_text_align == value && "theme-chip-active"]}
class={[
"theme-chip",
@theme_settings.product_text_align == value && "theme-chip-active"
]}
>
{label}
</button>
@ -999,7 +1066,13 @@
<!-- Product Page Group -->
<div style="margin-bottom: 1rem;">
<div class="theme-group-header">
<svg class="theme-group-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<svg
class="theme-group-icon"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
>
<rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
<line x1="3" y1="9" x2="21" y2="9"></line>
</svg>
@ -1106,7 +1179,13 @@
<div class="theme-browser-dot theme-browser-dot-max"></div>
</div>
<div class="theme-browser-url">
<svg class="theme-browser-url-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<svg
class="theme-browser-url-icon"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
>
<rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect>
<path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
</svg>