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

extract layout.ex and cart.ex inline styles to CSS classes (Phase 3)

Browse Source 
Move ~104 inline style= attributes from layout.ex (55) and cart.ex (49)
into named CSS classes in components.css. Remove conflicting unlayered
nav link rule from theme-semantic.css that was previously masked by
inline styles. Only dynamic values (background-image URLs, logo height)
remain as inline styles.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
jamey
2026-02-17 01:10:49 +00:00
parent 2af2d782d5
commit f337f51799
4 changed files with 652 additions and 214 deletions
Download Patch File Download Diff File Expand all files Collapse all files

141
lib/simpleshop_theme_web/components/shop_components/cart.ex
View File

@@ -60,7 +60,6 @@ defmodule SimpleshopThemeWeb.ShopComponents.Cart do
id="cart-drawer-overlay"
class={["cart-drawer-overlay", @open && "open"]}
aria-hidden={to_string(!@open)}
style="position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 999; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease;"
phx-click={close_cart_drawer_js()}
>
</div>
@@ -75,25 +74,20 @@ defmodule SimpleshopThemeWeb.ShopComponents.Cart do
aria-hidden={to_string(!@open)}
phx-hook="CartDrawer"
class={["cart-drawer", @open && "open"]}
style="position: fixed; top: 0; right: -400px; width: 400px; max-width: 90vw; height: 100vh; height: 100dvh; background: var(--t-surface-raised); z-index: 1001; display: flex; flex-direction: column; transition: right 0.3s ease; box-shadow: -4px 0 20px rgba(0,0,0,0.15);"
>
<p id="cart-drawer-description" class="sr-only">
Shopping basket with {@cart_count} {if @cart_count == 1, do: "item", else: "items"}. Press Escape to close.
</p>
<div
class="cart-drawer-header"
style="display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.5rem; border-bottom: 1px solid var(--t-border-default);"
>
<div class="cart-drawer-header">
<h2
id="cart-drawer-title"
style="font-family: var(--t-font-heading); font-weight: var(--t-heading-weight); font-size: var(--t-text-large); color: var(--t-text-primary); margin: 0;"
class="cart-drawer-title"
>
Your basket
</h2>
<button
type="button"
class="cart-drawer-close"
style="background: none; border: none; padding: 0.5rem; cursor: pointer; color: var(--t-text-secondary);"
phx-click={close_cart_drawer_js()}
aria-label="Close cart"
>
@@ -112,13 +106,13 @@ defmodule SimpleshopThemeWeb.ShopComponents.Cart do
</button>
</div>
<div class="cart-drawer-items" style="flex: 1; overflow-y: auto; padding: 1rem;">
<div class="cart-drawer-items">
<%= if @cart_items == [] do %>
<.cart_empty_state mode={@mode} />
<% else %>
<ul role="list" aria-label="Cart items" style="list-style: none; margin: 0; padding: 0;">
<ul role="list" aria-label="Cart items">
<%= for item <- @cart_items do %>
<li style="border-bottom: 1px solid var(--t-border-default);">
<li>
<.cart_item_row item={item} size={:compact} show_quantity_controls mode={@mode} />
</li>
<% end %>
@@ -126,20 +120,14 @@ defmodule SimpleshopThemeWeb.ShopComponents.Cart do
<% end %>
</div>
<div
class="cart-drawer-footer"
style="padding: 1rem 1.5rem; border-top: 1px solid var(--t-border-default); background: var(--t-surface-sunken);"
>
<div class="cart-drawer-footer">
<.delivery_line
shipping_estimate={@shipping_estimate}
country_code={@country_code}
available_countries={@available_countries}
mode={@mode}
/>
<div
class="cart-drawer-total"
style="display: flex; justify-content: space-between; font-family: var(--t-font-body); font-size: var(--t-text-base); font-weight: 600; color: var(--t-text-primary); margin-bottom: 1rem;"
>
<div class="cart-drawer-total">
<span>{if @shipping_estimate, do: "Estimated total", else: "Subtotal"}</span>
<span>{@display_total}</span>
</div>
@@ -147,7 +135,6 @@ defmodule SimpleshopThemeWeb.ShopComponents.Cart do
<button
type="button"
class="cart-drawer-checkout w-full mb-2"
style="width: 100%; padding: 0.75rem 1.5rem; font-weight: 600; transition: all 0.2s ease; background: var(--t-accent-button, hsl(var(--t-accent-h) var(--t-accent-s) 42%)); color: var(--t-text-inverse); border-radius: var(--t-radius-button); border: none; cursor: pointer; font-family: var(--t-font-body);"
>
Checkout
</button>
@@ -157,7 +144,6 @@ defmodule SimpleshopThemeWeb.ShopComponents.Cart do
<button
type="submit"
class="cart-drawer-checkout w-full mb-2"
style="width: 100%; padding: 0.75rem 1.5rem; font-weight: 600; transition: all 0.2s ease; background: var(--t-accent-button, hsl(var(--t-accent-h) var(--t-accent-s) 42%)); color: var(--t-text-inverse); border-radius: var(--t-radius-button); border: none; cursor: pointer; font-family: var(--t-font-body);"
>
Checkout
</button>
@@ -187,79 +173,71 @@ defmodule SimpleshopThemeWeb.ShopComponents.Cart do
~H"""
<div
class="cart-item-row"
style={"display: flex; gap: #{if @size == :compact, do: "0.75rem", else: "1rem"}; padding: 0.75rem 0;"}
data-size={if @size == :compact, do: "compact"}
>
<%= if @mode != :preview do %>
<.link
navigate={"/products/#{@item.product_id}"}
class="cart-item-image"
style={"display: block; width: #{if @size == :compact, do: "60px", else: "80px"}; height: #{if @size == :compact, do: "60px", else: "80px"}; border-radius: var(--t-radius-card); background-size: cover; background-position: center; flex-shrink: 0; #{if @item.image, do: "background-image: url('#{@item.image}');", else: "background-color: var(--t-surface-sunken);"}"}
class={["cart-item-image", !@item.image && "cart-item-image--empty"]}
data-size={if @size == :compact, do: "compact"}
style={if @item.image, do: "background-image: url('#{@item.image}');"}
aria-label={"View #{@item.name}"}
>
</.link>
<% else %>
<div
class="cart-item-image"
style={"width: #{if @size == :compact, do: "60px", else: "80px"}; height: #{if @size == :compact, do: "60px", else: "80px"}; border-radius: var(--t-radius-card); background-size: cover; background-position: center; flex-shrink: 0; #{if @item.image, do: "background-image: url('#{@item.image}');", else: "background-color: var(--t-surface-sunken);"}"}
class={["cart-item-image", !@item.image && "cart-item-image--empty"]}
data-size={if @size == :compact, do: "compact"}
style={if @item.image, do: "background-image: url('#{@item.image}');"}
>
</div>
<% end %>
<div class="cart-item-details" style="flex: 1; min-width: 0;">
<h3 style={"font-family: var(--t-font-body); font-size: #{if @size == :compact, do: "var(--t-text-small)", else: "var(--t-text-base)"}; font-weight: 500; margin: 0 0 2px;"}>
<div class="cart-item-details">
<h3 class="cart-item-name" data-size={if @size == :compact, do: "compact"}>
<%= if @mode != :preview do %>
<.link
navigate={"/products/#{@item.product_id}"}
style="color: var(--t-text-primary); text-decoration: none;"
onmouseover="this.style.textDecoration='underline'"
onmouseout="this.style.textDecoration='none'"
class="cart-item-name-link"
>
{@item.name}
</.link>
<% else %>
<span style="color: var(--t-text-primary);">{@item.name}</span>
<span>{@item.name}</span>
<% end %>
</h3>
<%= if @item.variant do %>
<p style="font-family: var(--t-font-body); font-size: var(--t-text-caption); color: var(--t-text-tertiary); margin: 0;">
<p class="cart-item-variant-text">
{@item.variant}
</p>
<% end %>
<div style="display: flex; justify-content: space-between; align-items: center; margin-top: 4px; flex-wrap: wrap; gap: 0.5rem;">
<div class="cart-item-actions">
<%= if @show_quantity_controls do %>
<div
class="flex items-center"
style="border: 1px solid var(--t-border-default); border-radius: var(--t-radius-input);"
>
<div class="cart-qty-group flex items-center">
<button
type="button"
phx-click="decrement"
phx-value-id={@item.variant_id}
class="px-3 py-1"
style="background: none; border: none; cursor: pointer; color: var(--t-text-primary);"
class="cart-qty-btn px-3 py-1"
aria-label={"Decrease quantity of #{@item.name}"}
>
−
</button>
<span
class="px-3 py-1 border-x"
style="border-color: var(--t-border-default); color: var(--t-text-primary); min-width: 2rem; text-align: center;"
>
<span class="cart-qty-display px-3 py-1 border-x">
{@item.quantity}
</span>
<button
type="button"
phx-click="increment"
phx-value-id={@item.variant_id}
class="px-3 py-1"
style="background: none; border: none; cursor: pointer; color: var(--t-text-primary);"
class="cart-qty-btn px-3 py-1"
aria-label={"Increase quantity of #{@item.name}"}
>
+
</button>
</div>
<% else %>
<span style="font-size: var(--t-text-caption); color: var(--t-text-tertiary);">
<span class="cart-qty-text">
Qty: {@item.quantity}
</span>
<% end %>
@@ -268,8 +246,8 @@ defmodule SimpleshopThemeWeb.ShopComponents.Cart do
</div>
</div>
<div class="text-right" style="flex-shrink: 0;">
<p style={"font-weight: 500; font-size: #{if @size == :compact, do: "var(--t-text-small)", else: "var(--t-text-base)"}; color: var(--t-text-primary); margin: 0;"}>
<div class="cart-item-price-col text-right">
<p class="cart-item-price" data-size={if @size == :compact, do: "compact"}>
{SimpleshopTheme.Cart.format_price(@item.price * @item.quantity)}
</p>
</div>
@@ -284,12 +262,11 @@ defmodule SimpleshopThemeWeb.ShopComponents.Cart do
def cart_empty_state(assigns) do
~H"""
<div class="text-center py-8" style="color: var(--t-text-secondary);">
<div class="cart-empty text-center py-8">
<svg
class="w-16 h-16 mx-auto mb-4"
class="cart-empty-icon w-16 h-16 mx-auto mb-4"
width="64"
height="64"
style="color: var(--t-text-tertiary);"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
@@ -305,14 +282,14 @@ defmodule SimpleshopThemeWeb.ShopComponents.Cart do
type="button"
phx-click="change_preview_page"
phx-value-page="collection"
style="color: var(--t-text-accent); text-decoration: underline; background: none; border: none; cursor: pointer;"
class="cart-continue-link"
>
Continue shopping
</button>
<% else %>
<.link
navigate="/collections/all"
style="color: var(--t-text-accent); text-decoration: underline;"
class="cart-continue-link"
>
Continue shopping
</.link>
@@ -333,7 +310,7 @@ defmodule SimpleshopThemeWeb.ShopComponents.Cart do
type="button"
phx-click="remove_item"
phx-value-id={@variant_id}
style="background: none; border: none; padding: 0; cursor: pointer; font-family: var(--t-font-body); font-size: var(--t-text-caption); color: var(--t-text-tertiary); text-decoration: underline;"
class="cart-remove-btn"
aria-label={"Remove #{@item_name} from cart"}
>
Remove
@@ -358,10 +335,7 @@ defmodule SimpleshopThemeWeb.ShopComponents.Cart do
def cart_item(assigns) do
~H"""
<.shop_card class="flex gap-4 p-4">
<div
class="w-24 h-24 flex-shrink-0 bg-gray-200 overflow-hidden"
style="border-radius: var(--t-radius-image);"
>
<div class="cart-page-image w-24 h-24 flex-shrink-0 bg-gray-200 overflow-hidden">
<img
src={cart_item_image(@item.product)}
alt={@item.product.title}
@@ -373,39 +347,30 @@ defmodule SimpleshopThemeWeb.ShopComponents.Cart do
</div>
<div class="flex-1">
<h3
class="font-semibold mb-1"
style="font-family: var(--t-font-heading); color: var(--t-text-primary);"
>
<h3 class="cart-page-item-name font-semibold mb-1">
{@item.product.title}
</h3>
<p class="text-sm mb-2" style="color: var(--t-text-secondary);">
<p class="cart-page-item-variant text-sm mb-2">
{@item.variant}
</p>
<div class="flex items-center gap-4">
<div
class="flex items-center"
style="border: 1px solid var(--t-border-default); border-radius: var(--t-radius-input);"
>
<button class="px-3 py-1" style="color: var(--t-text-primary);">−</button>
<span
class="px-3 py-1 border-x"
style="border-color: var(--t-border-default); color: var(--t-text-primary);"
>
<div class="cart-qty-group flex items-center">
<button class="cart-qty-btn px-3 py-1">−</button>
<span class="cart-qty-display px-3 py-1 border-x">
{@item.quantity}
</span>
<button class="px-3 py-1" style="color: var(--t-text-primary);">+</button>
<button class="cart-qty-btn px-3 py-1">+</button>
</div>
<button class="text-sm" style="color: var(--t-text-tertiary);">
<button class="cart-page-item-remove text-sm">
Remove
</button>
</div>
</div>
<div class="text-right">
<p class="font-bold text-lg" style="color: var(--t-text-primary);">
<p class="cart-page-item-price font-bold text-lg">
{SimpleshopTheme.Cart.format_price(@item.product.cheapest_price * @item.quantity)}
</p>
</div>
@@ -426,18 +391,15 @@ defmodule SimpleshopThemeWeb.ShopComponents.Cart do
defp delivery_line(assigns) do
~H"""
<div
class="flex justify-between items-center"
style="font-family: var(--t-font-body); font-size: var(--t-text-small); color: var(--t-text-secondary);"
>
<div class="delivery-line flex justify-between items-center">
<span class="flex items-center gap-1">
Delivery to
<%= if @available_countries != [] and @mode != :preview do %>
<form phx-change="change_country" style="display: inline;">
<form phx-change="change_country">
<select
name="country"
class="delivery-select"
aria-label="Delivery country"
style="appearance: auto; background: transparent; border: none; color: inherit; font: inherit; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 2px;"
>
<%= for {code, name} <- @available_countries do %>
<option value={code} selected={code == @country_code}>{name}</option>
@@ -484,17 +446,14 @@ defmodule SimpleshopThemeWeb.ShopComponents.Cart do
~H"""
<.shop_card class="p-6 sticky top-4">
<h2
class="text-xl font-bold mb-6"
style="font-family: var(--t-font-heading); color: var(--t-text-primary);"
>
<h2 class="order-summary-heading text-xl font-bold mb-6">
Order summary
</h2>
<div class="flex flex-col gap-3 mb-6">
<div class="flex justify-between">
<span style="color: var(--t-text-secondary);">Subtotal</span>
<span style="color: var(--t-text-primary);">
<span class="order-summary-label">Subtotal</span>
<span class="order-summary-value">
{SimpleshopTheme.Cart.format_price(@subtotal)}
</span>
</div>
@@ -504,12 +463,12 @@ defmodule SimpleshopThemeWeb.ShopComponents.Cart do
available_countries={@available_countries}
mode={@mode}
/>
<div class="border-t pt-3" style="border-color: var(--t-border-default);">
<div class="order-summary-divider border-t pt-3">
<div class="flex justify-between text-lg">
<span class="font-semibold" style="color: var(--t-text-primary);">
<span class="order-summary-value font-semibold">
{if @shipping_estimate, do: "Estimated total", else: "Subtotal"}
</span>
<span class="font-bold" style="color: var(--t-text-primary);">
<span class="order-summary-value font-bold">
{SimpleshopTheme.Cart.format_price(@estimated_total)}
</span>
</div>

175
lib/simpleshop_theme_web/components/shop_components/layout.ex
View File

@@ -26,11 +26,8 @@ defmodule SimpleshopThemeWeb.ShopComponents.Layout do
def announcement_bar(assigns) do
~H"""
<div
class="announcement-bar"
style="background-color: var(--t-accent-button, hsl(var(--t-accent-h) var(--t-accent-s) 42%)); color: var(--t-text-inverse); text-align: center; padding: 0.5rem 1rem; font-size: var(--t-text-small);"
>
<p style="margin: 0;">{@message}</p>
<div class="announcement-bar">
<p>{@message}</p>
</div>
"""
end
@@ -104,7 +101,6 @@ defmodule SimpleshopThemeWeb.ShopComponents.Layout do
id={unless @error_page, do: "shop-container"}
phx-hook={unless @error_page, do: "CartPersist"}
class={["shop-container min-h-screen", !@error_page && "pb-20 md:pb-0"]}
style="background-color: var(--t-surface-base); font-family: var(--t-font-body); color: var(--t-text-primary);"
>
<.skip_link />
@@ -182,13 +178,9 @@ defmodule SimpleshopThemeWeb.ShopComponents.Layout do
~H"""
<nav
class="mobile-bottom-nav md:hidden"
style="position: fixed; bottom: 0; left: 0; right: 0; z-index: 100; background-color: var(--t-surface-raised); border-top: 1px solid var(--t-border-default); box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1); padding-bottom: env(safe-area-inset-bottom, 0px);"
aria-label="Main navigation"
>
<ul
class="flex justify-around items-center h-16"
style="margin: 0; padding: 0; list-style: none;"
>
<ul class="flex justify-around items-center h-16">
<.mobile_nav_item
icon={:home}
label="Home"
@@ -247,8 +239,7 @@ defmodule SimpleshopThemeWeb.ShopComponents.Layout do
href="#"
phx-click="change_preview_page"
phx-value-page={@page}
class="flex flex-col items-center justify-center gap-1 py-2 mx-1 rounded-lg min-h-[56px]"
style={"color: #{if @is_current, do: "hsl(var(--t-accent-h) var(--t-accent-s) calc(var(--t-accent-l) - 15%))", else: "var(--t-text-secondary)"}; text-decoration: none; font-weight: #{if @is_current, do: "600", else: "500"}; background-color: #{if @is_current, do: "hsl(var(--t-accent-h) var(--t-accent-s) var(--t-accent-l) / 0.1)", else: "transparent"};"}
class="mobile-nav-link flex flex-col items-center justify-center gap-1 py-2 mx-1 rounded-lg min-h-[56px]"
aria-current={if @is_current, do: "page", else: nil}
>
<.nav_icon icon={@icon} size={if @is_current, do: "w-6 h-6", else: "w-5 h-5"} />
@@ -257,8 +248,7 @@ defmodule SimpleshopThemeWeb.ShopComponents.Layout do
<% else %>
<.link
navigate={@href}
class="flex flex-col items-center justify-center gap-1 py-2 mx-1 rounded-lg min-h-[56px]"
style={"color: #{if @is_current, do: "hsl(var(--t-accent-h) var(--t-accent-s) calc(var(--t-accent-l) - 15%))", else: "var(--t-text-secondary)"}; text-decoration: none; font-weight: #{if @is_current, do: "600", else: "500"}; background-color: #{if @is_current, do: "hsl(var(--t-accent-h) var(--t-accent-s) var(--t-accent-l) / 0.1)", else: "transparent"};"}
class="mobile-nav-link flex flex-col items-center justify-center gap-1 py-2 mx-1 rounded-lg min-h-[56px]"
aria-current={if @is_current, do: "page", else: nil}
>
<.nav_icon icon={@icon} size={if @is_current, do: "w-6 h-6", else: "w-5 h-5"} />
@@ -390,24 +380,19 @@ defmodule SimpleshopThemeWeb.ShopComponents.Layout do
<div
id="search-modal"
class="search-modal"
style={"position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 1001; display: #{if @search_open, do: "flex", else: "none"}; align-items: flex-start; justify-content: center; padding-top: 10vh;"}
style={"display: #{if @search_open, do: "flex", else: "none"};"}
phx-hook="SearchModal"
phx-click={Phoenix.LiveView.JS.dispatch("close-search", to: "#search-modal")}
>
<div
class="search-modal-content w-full max-w-xl mx-4"
style="background: var(--t-surface-raised); border-radius: var(--t-radius-card); overflow: hidden; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);"
class="search-panel w-full max-w-xl mx-4"
onclick="event.stopPropagation()"
>
<div
class="flex items-center gap-3 p-4"
style="border-bottom: 1px solid var(--t-border-default);"
>
<div class="search-bar flex items-center gap-3 p-4">
<svg
class="w-5 h-5 flex-shrink-0"
class="search-icon w-5 h-5 flex-shrink-0"
width="20"
height="20"
style="color: var(--t-text-tertiary);"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
@@ -420,8 +405,7 @@ defmodule SimpleshopThemeWeb.ShopComponents.Layout do
type="text"
id="search-input"
name="query"
class="flex-1 text-lg bg-transparent border-none outline-none"
style="font-family: var(--t-font-body); color: var(--t-text-primary);"
class="search-input flex-1 text-lg bg-transparent border-none outline-none"
placeholder="Search products..."
value={@search_query}
phx-keyup="search"
@@ -433,16 +417,14 @@ defmodule SimpleshopThemeWeb.ShopComponents.Layout do
aria-autocomplete="list"
/>
<div
class="hidden sm:flex items-center gap-1 text-xs px-1.5 py-0.5 rounded"
style="color: var(--t-text-tertiary); border: 1px solid var(--t-border-default);"
class="search-kbd hidden sm:flex items-center gap-1 text-xs px-1.5 py-0.5 rounded"
aria-hidden="true"
>
<kbd>⌘</kbd><kbd>K</kbd>
</div>
<button
type="button"
class="w-8 h-8 flex items-center justify-center transition-all"
style="color: var(--t-text-tertiary); background: none; border: none; cursor: pointer; border-radius: var(--t-radius-button);"
class="search-close w-8 h-8 flex items-center justify-center transition-all"
phx-click={Phoenix.LiveView.JS.dispatch("close-search", to: "#search-modal")}
aria-label="Close search"
>
@@ -461,7 +443,7 @@ defmodule SimpleshopThemeWeb.ShopComponents.Layout do
</button>
</div>
<div class="search-results" style="max-height: 60vh; overflow-y: auto;">
<div class="search-results">
<%= cond do %>
<% @search_results != [] -> %>
<ul id="search-results-list" class="py-2" role="listbox" aria-label="Search results">
@@ -473,16 +455,12 @@ defmodule SimpleshopThemeWeb.ShopComponents.Layout do
>
<.link
navigate={"/products/#{item.product.slug || item.product.id}"}
class="flex items-center gap-3 px-4 py-3 transition-colors"
style="text-decoration: none; color: inherit;"
onmouseenter="this.style.background='var(--t-surface-sunken)'"
onmouseleave="this.style.background='transparent'"
class="search-result flex items-center gap-3 px-4 py-3 transition-colors"
phx-click={Phoenix.LiveView.JS.dispatch("close-search", to: "#search-modal")}
>
<div
:if={item.image_url}
class="w-12 h-12 flex-shrink-0 rounded overflow-hidden"
style="background: var(--t-surface-sunken);"
class="search-result-thumb w-12 h-12 flex-shrink-0 rounded overflow-hidden"
>
<img
src={item.image_url}
@@ -492,12 +470,12 @@ defmodule SimpleshopThemeWeb.ShopComponents.Layout do
/>
</div>
<div class="flex-1 min-w-0">
<p class="text-sm font-medium truncate" style="color: var(--t-text-primary);">
<p class="search-result-title text-sm font-medium truncate">
{item.product.title}
</p>
<p class="text-xs" style="color: var(--t-text-tertiary);">
<p class="search-result-meta text-xs">
{item.product.category}
<span style="margin-left: 0.5rem;">
<span class="ml-2">
{Cart.format_price(item.product.cheapest_price)}
</span>
</p>
@@ -506,11 +484,11 @@ defmodule SimpleshopThemeWeb.ShopComponents.Layout do
</li>
</ul>
<% String.length(@search_query) >= 2 -> %>
<div class="p-6" style="color: var(--t-text-tertiary);">
<div class="search-hint p-6">
<p class="text-sm">No products found for "{@search_query}"</p>
</div>
<% @hint_text != nil -> %>
<div class="p-6" style="color: var(--t-text-tertiary);">
<div class="search-hint p-6">
<p class="text-sm">{@hint_text}</p>
</div>
<% true -> %>
@@ -543,7 +521,7 @@ defmodule SimpleshopThemeWeb.ShopComponents.Layout do
assigns = assign(assigns, :current_year, Date.utc_today().year)
~H"""
<footer style="background-color: var(--t-surface-raised); border-top: 1px solid var(--t-border-default);">
<footer class="shop-footer">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
<div class="grid grid-cols-1 md:grid-cols-2 gap-12">
<.newsletter_card variant={:inline} />
@@ -551,10 +529,7 @@ defmodule SimpleshopThemeWeb.ShopComponents.Layout do
<!-- Links -->
<div class="grid grid-cols-2 gap-8">
<div>
<h4
class="font-semibold mb-4 text-sm"
style="font-family: var(--t-font-heading); color: var(--t-text-primary);"
>
<h4 class="footer-heading font-semibold mb-4 text-sm">
Shop
</h4>
<ul class="flex flex-col gap-2 text-sm">
@@ -564,8 +539,7 @@ defmodule SimpleshopThemeWeb.ShopComponents.Layout do
href="#"
phx-click="change_preview_page"
phx-value-page="collection"
class="transition-colors hover:opacity-80"
style="color: var(--t-text-secondary); cursor: pointer;"
class="footer-link transition-colors hover:opacity-80"
>
All products
</a>
@@ -576,8 +550,7 @@ defmodule SimpleshopThemeWeb.ShopComponents.Layout do
href="#"
phx-click="change_preview_page"
phx-value-page="collection"
class="transition-colors hover:opacity-80"
style="color: var(--t-text-secondary); cursor: pointer;"
class="footer-link transition-colors hover:opacity-80"
>
{category.name}
</a>
@@ -587,8 +560,7 @@ defmodule SimpleshopThemeWeb.ShopComponents.Layout do
<li>
<.link
navigate="/collections/all"
class="transition-colors hover:opacity-80"
style="color: var(--t-text-secondary);"
class="footer-link transition-colors hover:opacity-80"
>
All products
</.link>
@@ -597,8 +569,7 @@ defmodule SimpleshopThemeWeb.ShopComponents.Layout do
<li>
<.link
navigate={"/collections/#{category.slug}"}
class="transition-colors hover:opacity-80"
style="color: var(--t-text-secondary);"
class="footer-link transition-colors hover:opacity-80"
>
{category.name}
</.link>
@@ -608,10 +579,7 @@ defmodule SimpleshopThemeWeb.ShopComponents.Layout do
</ul>
</div>
<div>
<h4
class="font-semibold mb-4 text-sm"
style="font-family: var(--t-font-heading); color: var(--t-text-primary);"
>
<h4 class="footer-heading font-semibold mb-4 text-sm">
Help
</h4>
<ul class="flex flex-col gap-2 text-sm">
@@ -621,8 +589,7 @@ defmodule SimpleshopThemeWeb.ShopComponents.Layout do
href="#"
phx-click="change_preview_page"
phx-value-page="delivery"
class="transition-colors hover:opacity-80"
style="color: var(--t-text-secondary); cursor: pointer;"
class="footer-link transition-colors hover:opacity-80"
>
Delivery & returns
</a>
@@ -632,8 +599,7 @@ defmodule SimpleshopThemeWeb.ShopComponents.Layout do
href="#"
phx-click="change_preview_page"
phx-value-page="privacy"
class="transition-colors hover:opacity-80"
style="color: var(--t-text-secondary); cursor: pointer;"
class="footer-link transition-colors hover:opacity-80"
>
Privacy policy
</a>
@@ -643,8 +609,7 @@ defmodule SimpleshopThemeWeb.ShopComponents.Layout do
href="#"
phx-click="change_preview_page"
phx-value-page="terms"
class="transition-colors hover:opacity-80"
style="color: var(--t-text-secondary); cursor: pointer;"
class="footer-link transition-colors hover:opacity-80"
>
Terms of service
</a>
@@ -654,8 +619,7 @@ defmodule SimpleshopThemeWeb.ShopComponents.Layout do
href="#"
phx-click="change_preview_page"
phx-value-page="contact"
class="transition-colors hover:opacity-80"
style="color: var(--t-text-secondary); cursor: pointer;"
class="footer-link transition-colors hover:opacity-80"
>
Contact
</a>
@@ -664,8 +628,7 @@ defmodule SimpleshopThemeWeb.ShopComponents.Layout do
<li>
<.link
navigate="/delivery"
class="transition-colors hover:opacity-80"
style="color: var(--t-text-secondary);"
class="footer-link transition-colors hover:opacity-80"
>
Delivery & returns
</.link>
@@ -673,8 +636,7 @@ defmodule SimpleshopThemeWeb.ShopComponents.Layout do
<li>
<.link
navigate="/privacy"
class="transition-colors hover:opacity-80"
style="color: var(--t-text-secondary);"
class="footer-link transition-colors hover:opacity-80"
>
Privacy policy
</.link>
@@ -682,8 +644,7 @@ defmodule SimpleshopThemeWeb.ShopComponents.Layout do
<li>
<.link
navigate="/terms"
class="transition-colors hover:opacity-80"
style="color: var(--t-text-secondary);"
class="footer-link transition-colors hover:opacity-80"
>
Terms of service
</.link>
@@ -691,8 +652,7 @@ defmodule SimpleshopThemeWeb.ShopComponents.Layout do
<li>
<.link
navigate="/contact"
class="transition-colors hover:opacity-80"
style="color: var(--t-text-secondary);"
class="footer-link transition-colors hover:opacity-80"
>
Contact
</.link>
@@ -704,11 +664,8 @@ defmodule SimpleshopThemeWeb.ShopComponents.Layout do
</div>
<!-- Bottom Bar -->
<div
class="mt-12 pt-8 flex flex-col md:flex-row justify-between items-center gap-4"
style="border-top: 1px solid var(--t-border-subtle);"
>
<p class="text-xs" style="color: var(--t-text-tertiary);">
<div class="footer-bottom mt-12 pt-8 flex flex-col md:flex-row justify-between items-center gap-4">
<p class="footer-copyright text-xs">
© {@current_year} {@theme_settings.site_name}
</p>
<.social_links />
@@ -745,18 +702,12 @@ defmodule SimpleshopThemeWeb.ShopComponents.Layout do
def shop_header(assigns) do
~H"""
<header
class="shop-header px-2 py-2 sm:px-4 sm:py-3 md:px-8 md:py-4"
style="background-color: var(--t-surface-raised); border-bottom: 1px solid var(--t-border-default); display: flex; align-items: center;"
>
<header class="shop-header px-2 py-2 sm:px-4 sm:py-3 md:px-8 md:py-4">
<%= if @theme_settings.header_background_enabled && @header_image do %>
<div style={header_background_style(@theme_settings, @header_image)} />
<% end %>
<div
class="shop-logo"
style="display: flex; align-items: center; position: relative; z-index: 1;"
>
<div class="shop-logo">
<.logo_content
theme_settings={@theme_settings}
logo_image={@logo_image}
@@ -765,7 +716,7 @@ defmodule SimpleshopThemeWeb.ShopComponents.Layout do
/>
</div>
<nav class="shop-nav hidden md:flex md:gap-6" style="position: relative; z-index: 1;">
<nav class="shop-nav hidden md:flex md:gap-6">
<%= if @mode == :preview do %>
<.nav_item label="Home" page="home" active_page={@active_page} mode={:preview} />
<.nav_item
@@ -791,12 +742,11 @@ defmodule SimpleshopThemeWeb.ShopComponents.Layout do
<% end %>
</nav>
<div class="shop-actions flex items-center" style="position: relative; z-index: 1;">
<div class="shop-actions flex items-center">
<.link
:if={@is_admin}
href="/admin"
class="header-icon-btn w-9 h-9 flex items-center justify-center transition-all"
style="color: var(--t-text-secondary); border-radius: var(--t-radius-button);"
aria-label="Admin"
>
<svg
@@ -823,7 +773,6 @@ defmodule SimpleshopThemeWeb.ShopComponents.Layout do
<button
type="button"
class="header-icon-btn w-9 h-9 flex items-center justify-center transition-all"
style="color: var(--t-text-secondary); background: none; border: none; cursor: pointer; border-radius: var(--t-radius-button);"
phx-click={Phoenix.LiveView.JS.dispatch("open-search", to: "#search-modal")}
aria-label="Search"
>
@@ -843,7 +792,6 @@ defmodule SimpleshopThemeWeb.ShopComponents.Layout do
<button
type="button"
class="header-icon-btn w-9 h-9 flex items-center justify-center transition-all relative"
style="color: var(--t-text-secondary); background: none; border: none; cursor: pointer; border-radius: var(--t-radius-button);"
phx-click={open_cart_drawer_js()}
aria-label="Cart"
>
@@ -861,10 +809,7 @@ defmodule SimpleshopThemeWeb.ShopComponents.Layout do
<path d="M16 10a4 4 0 01-8 0"></path>
</svg>
<%= if @cart_count > 0 do %>
<span
class="cart-count"
style="position: absolute; top: -4px; right: -4px; background: hsl(var(--t-accent-h) var(--t-accent-s) var(--t-accent-l)); color: var(--t-text-inverse); font-size: var(--t-text-caption); font-weight: 600; min-width: 18px; height: 18px; border-radius: 9999px; display: flex; align-items: center; justify-content: center; padding: 0 4px;"
>
<span class="cart-badge">
{@cart_count}
</span>
<% end %>
@@ -902,12 +847,12 @@ defmodule SimpleshopThemeWeb.ShopComponents.Layout do
href="#"
phx-click="change_preview_page"
phx-value-page="home"
style="display: flex; align-items: center; text-decoration: none;"
class="shop-logo-link"
>
<.logo_inner theme_settings={@theme_settings} logo_image={@logo_image} />
</a>
<% else %>
<.link navigate="/" style="display: flex; align-items: center; text-decoration: none;">
<.link navigate="/" class="shop-logo-link">
<.logo_inner theme_settings={@theme_settings} logo_image={@logo_image} />
</.link>
<% end %>
@@ -922,10 +867,7 @@ defmodule SimpleshopThemeWeb.ShopComponents.Layout do
~H"""
<%= case @theme_settings.logo_mode do %>
<% "text-only" -> %>
<span
class="shop-logo-text"
style="font-family: var(--t-font-heading); font-size: var(--t-text-xl); font-weight: var(--t-heading-weight); color: var(--t-text-primary);"
>
<span class="shop-logo-text">
{@theme_settings.site_name}
</span>
<% "logo-text" -> %>
@@ -933,13 +875,11 @@ defmodule SimpleshopThemeWeb.ShopComponents.Layout do
<img
src={logo_url(@logo_image, @theme_settings)}
alt={@theme_settings.site_name}
style={"height: #{@theme_settings.logo_size}px; width: auto; margin-right: 0.5rem;"}
class="shop-logo-img mr-2"
style={"height: #{@theme_settings.logo_size}px;"}
/>
<% end %>
<span
class="shop-logo-text"
style="font-family: var(--t-font-heading); font-size: var(--t-text-xl); font-weight: var(--t-heading-weight); color: var(--t-text-primary);"
>
<span class="shop-logo-text">
{@theme_settings.site_name}
</span>
<% "logo-only" -> %>
@@ -947,21 +887,16 @@ defmodule SimpleshopThemeWeb.ShopComponents.Layout do
<img
src={logo_url(@logo_image, @theme_settings)}
alt={@theme_settings.site_name}
style={"height: #{@theme_settings.logo_size}px; width: auto;"}
class="shop-logo-img"
style={"height: #{@theme_settings.logo_size}px;"}
/>
<% else %>
<span
class="shop-logo-text"
style="font-family: var(--t-font-heading); font-size: var(--t-text-xl); font-weight: var(--t-heading-weight); color: var(--t-text-primary);"
>
<span class="shop-logo-text">
{@theme_settings.site_name}
</span>
<% end %>
<% _ -> %>
<span
class="shop-logo-text"
style="font-family: var(--t-font-heading); font-size: var(--t-text-xl); font-weight: var(--t-heading-weight); color: var(--t-text-primary);"
>
<span class="shop-logo-text">
{@theme_settings.site_name}
</span>
<% end %>
@@ -993,7 +928,7 @@ defmodule SimpleshopThemeWeb.ShopComponents.Layout do
~H"""
<%= if @is_current do %>
<span aria-current="page" style="color: var(--t-text-secondary); text-decoration: none;">
<span class="nav-link" aria-current="page">
{@label}
</span>
<% else %>
@@ -1002,12 +937,12 @@ defmodule SimpleshopThemeWeb.ShopComponents.Layout do
href="#"
phx-click="change_preview_page"
phx-value-page={@page}
style="color: var(--t-text-secondary); text-decoration: none; cursor: pointer;"
class="nav-link"
>
{@label}
</a>
<% else %>
<.link navigate={@href} style="color: var(--t-text-secondary); text-decoration: none;">
<.link navigate={@href} class="nav-link">
{@label}
</.link>
<% end %>