extract layout.ex and cart.ex inline styles to CSS classes (Phase 3)
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
parent
2af2d782d5
commit
f337f51799
@ -324,4 +324,549 @@
|
|||||||
.details-subheading {
|
.details-subheading {
|
||||||
color: var(--t-text-primary);
|
color: var(--t-text-primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* ── Announcement bar ── */
|
||||||
|
|
||||||
|
.announcement-bar {
|
||||||
|
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);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Shop container (body-level defaults) ── */
|
||||||
|
|
||||||
|
.shop-container {
|
||||||
|
background-color: var(--t-surface-base);
|
||||||
|
font-family: var(--t-font-body);
|
||||||
|
color: var(--t-text-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Shop header ── */
|
||||||
|
|
||||||
|
.shop-header {
|
||||||
|
background-color: var(--t-surface-raised);
|
||||||
|
border-bottom: 1px solid var(--t-border-default);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.shop-logo {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.shop-logo-link {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.shop-logo-img {
|
||||||
|
width: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.shop-logo-text {
|
||||||
|
font-family: var(--t-font-heading);
|
||||||
|
font-size: var(--t-text-xl);
|
||||||
|
font-weight: var(--t-heading-weight);
|
||||||
|
color: var(--t-text-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.shop-nav {
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.shop-actions {
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-icon-btn {
|
||||||
|
color: var(--t-text-secondary);
|
||||||
|
border-radius: var(--t-radius-button);
|
||||||
|
|
||||||
|
&:where(button) {
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.cart-badge {
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Desktop nav links ── */
|
||||||
|
|
||||||
|
.nav-link {
|
||||||
|
color: var(--t-text-secondary);
|
||||||
|
text-decoration: none;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
&[aria-current="page"] {
|
||||||
|
color: var(--t-text-primary);
|
||||||
|
border-bottom-color: hsl(var(--t-accent-h) var(--t-accent-s) var(--t-accent-l));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Mobile bottom nav ── */
|
||||||
|
|
||||||
|
.mobile-bottom-nav {
|
||||||
|
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);
|
||||||
|
|
||||||
|
& ul {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-nav-link {
|
||||||
|
color: var(--t-text-secondary);
|
||||||
|
text-decoration: none;
|
||||||
|
font-weight: 500;
|
||||||
|
background-color: transparent;
|
||||||
|
|
||||||
|
&[aria-current="page"] {
|
||||||
|
color: hsl(var(--t-accent-h) var(--t-accent-s) calc(var(--t-accent-l) - 15%));
|
||||||
|
font-weight: 600;
|
||||||
|
background-color: hsl(var(--t-accent-h) var(--t-accent-s) var(--t-accent-l) / 0.1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Search modal ── */
|
||||||
|
|
||||||
|
.search-modal {
|
||||||
|
position: fixed;
|
||||||
|
inset: 0;
|
||||||
|
background: rgba(0, 0, 0, 0.5);
|
||||||
|
z-index: 1001;
|
||||||
|
align-items: flex-start;
|
||||||
|
justify-content: center;
|
||||||
|
padding-top: 10vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-panel {
|
||||||
|
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);
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-bar {
|
||||||
|
border-bottom: 1px solid var(--t-border-default);
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-icon {
|
||||||
|
color: var(--t-text-tertiary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-input {
|
||||||
|
font-family: var(--t-font-body);
|
||||||
|
color: var(--t-text-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-kbd {
|
||||||
|
color: var(--t-text-tertiary);
|
||||||
|
border: 1px solid var(--t-border-default);
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-close {
|
||||||
|
color: var(--t-text-tertiary);
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
cursor: pointer;
|
||||||
|
border-radius: var(--t-radius-button);
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-results {
|
||||||
|
max-height: 60vh;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-result {
|
||||||
|
text-decoration: none;
|
||||||
|
color: inherit;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: var(--t-surface-sunken);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-result-thumb {
|
||||||
|
background: var(--t-surface-sunken);
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-result-title {
|
||||||
|
color: var(--t-text-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-result-meta {
|
||||||
|
color: var(--t-text-tertiary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-hint {
|
||||||
|
color: var(--t-text-tertiary);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Shop footer ── */
|
||||||
|
|
||||||
|
.shop-footer {
|
||||||
|
background-color: var(--t-surface-raised);
|
||||||
|
border-top: 1px solid var(--t-border-default);
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-heading {
|
||||||
|
font-family: var(--t-font-heading);
|
||||||
|
color: var(--t-text-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-link {
|
||||||
|
color: var(--t-text-secondary);
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-bottom {
|
||||||
|
border-top: 1px solid var(--t-border-subtle);
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-copyright {
|
||||||
|
color: var(--t-text-tertiary);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Cart drawer ── */
|
||||||
|
|
||||||
|
.cart-drawer-overlay {
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cart-drawer {
|
||||||
|
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);
|
||||||
|
}
|
||||||
|
|
||||||
|
.cart-drawer-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding: 1rem 1.5rem;
|
||||||
|
border-bottom: 1px solid var(--t-border-default);
|
||||||
|
}
|
||||||
|
|
||||||
|
.cart-drawer-title {
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cart-drawer-close {
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
padding: 0.5rem;
|
||||||
|
cursor: pointer;
|
||||||
|
color: var(--t-text-secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.cart-drawer-items {
|
||||||
|
flex: 1;
|
||||||
|
overflow-y: auto;
|
||||||
|
padding: 1rem;
|
||||||
|
|
||||||
|
& ul {
|
||||||
|
list-style: none;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
& li {
|
||||||
|
border-bottom: 1px solid var(--t-border-default);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.cart-drawer-footer {
|
||||||
|
padding: 1rem 1.5rem;
|
||||||
|
border-top: 1px solid var(--t-border-default);
|
||||||
|
background: var(--t-surface-sunken);
|
||||||
|
}
|
||||||
|
|
||||||
|
.cart-drawer-total {
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cart-drawer-checkout {
|
||||||
|
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);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Cart item row ── */
|
||||||
|
|
||||||
|
.cart-item-row {
|
||||||
|
display: flex;
|
||||||
|
gap: 1rem;
|
||||||
|
padding: 0.75rem 0;
|
||||||
|
|
||||||
|
&[data-size="compact"] {
|
||||||
|
gap: 0.75rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.cart-item-image {
|
||||||
|
display: block;
|
||||||
|
border-radius: var(--t-radius-card);
|
||||||
|
background-size: cover;
|
||||||
|
background-position: center;
|
||||||
|
flex-shrink: 0;
|
||||||
|
width: 80px;
|
||||||
|
height: 80px;
|
||||||
|
|
||||||
|
&[data-size="compact"] {
|
||||||
|
width: 60px;
|
||||||
|
height: 60px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.cart-item-image--empty {
|
||||||
|
background-color: var(--t-surface-sunken);
|
||||||
|
}
|
||||||
|
|
||||||
|
.cart-item-details {
|
||||||
|
flex: 1;
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cart-item-name {
|
||||||
|
font-family: var(--t-font-body);
|
||||||
|
font-size: var(--t-text-base);
|
||||||
|
font-weight: 500;
|
||||||
|
margin: 0 0 2px;
|
||||||
|
|
||||||
|
&[data-size="compact"] {
|
||||||
|
font-size: var(--t-text-small);
|
||||||
|
}
|
||||||
|
|
||||||
|
& span {
|
||||||
|
color: var(--t-text-primary);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.cart-item-name-link {
|
||||||
|
color: var(--t-text-primary);
|
||||||
|
text-decoration: none;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.cart-item-variant-text {
|
||||||
|
font-family: var(--t-font-body);
|
||||||
|
font-size: var(--t-text-caption);
|
||||||
|
color: var(--t-text-tertiary);
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cart-item-actions {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-top: 4px;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cart-qty-group {
|
||||||
|
border: 1px solid var(--t-border-default);
|
||||||
|
border-radius: var(--t-radius-input);
|
||||||
|
}
|
||||||
|
|
||||||
|
.cart-qty-btn {
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
cursor: pointer;
|
||||||
|
color: var(--t-text-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.cart-qty-display {
|
||||||
|
border-color: var(--t-border-default);
|
||||||
|
color: var(--t-text-primary);
|
||||||
|
min-width: 2rem;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cart-qty-text {
|
||||||
|
font-size: var(--t-text-caption);
|
||||||
|
color: var(--t-text-tertiary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.cart-item-price-col {
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cart-item-price {
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: var(--t-text-base);
|
||||||
|
color: var(--t-text-primary);
|
||||||
|
margin: 0;
|
||||||
|
|
||||||
|
&[data-size="compact"] {
|
||||||
|
font-size: var(--t-text-small);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.cart-remove-btn {
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Cart empty state ── */
|
||||||
|
|
||||||
|
.cart-empty {
|
||||||
|
color: var(--t-text-secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.cart-empty-icon {
|
||||||
|
color: var(--t-text-tertiary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.cart-continue-link {
|
||||||
|
color: var(--t-text-accent);
|
||||||
|
text-decoration: underline;
|
||||||
|
|
||||||
|
&:where(button) {
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Cart page item (full size) ── */
|
||||||
|
|
||||||
|
.cart-page-image {
|
||||||
|
border-radius: var(--t-radius-image);
|
||||||
|
}
|
||||||
|
|
||||||
|
.cart-page-item-name {
|
||||||
|
font-family: var(--t-font-heading);
|
||||||
|
color: var(--t-text-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.cart-page-item-variant {
|
||||||
|
color: var(--t-text-secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.cart-page-item-remove {
|
||||||
|
color: var(--t-text-tertiary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.cart-page-item-price {
|
||||||
|
color: var(--t-text-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Delivery line ── */
|
||||||
|
|
||||||
|
.delivery-line {
|
||||||
|
font-family: var(--t-font-body);
|
||||||
|
font-size: var(--t-text-small);
|
||||||
|
color: var(--t-text-secondary);
|
||||||
|
|
||||||
|
& form {
|
||||||
|
display: inline;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.delivery-select {
|
||||||
|
appearance: auto;
|
||||||
|
background: transparent;
|
||||||
|
border: none;
|
||||||
|
color: inherit;
|
||||||
|
font: inherit;
|
||||||
|
padding: 0;
|
||||||
|
cursor: pointer;
|
||||||
|
text-decoration: underline;
|
||||||
|
text-underline-offset: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Order summary ── */
|
||||||
|
|
||||||
|
.order-summary-heading {
|
||||||
|
font-family: var(--t-font-heading);
|
||||||
|
color: var(--t-text-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.order-summary-label {
|
||||||
|
color: var(--t-text-secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.order-summary-value {
|
||||||
|
color: var(--t-text-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.order-summary-divider {
|
||||||
|
border-color: var(--t-border-default);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -312,8 +312,7 @@
|
|||||||
color: var(--t-text-primary);
|
color: var(--t-text-primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.shop-nav a[aria-current="page"],
|
/* Active nav underline — must stay unlayered to match the base border above */
|
||||||
.shop-nav span[aria-current="page"] {
|
.shop-nav [aria-current="page"] {
|
||||||
color: var(--t-text-primary);
|
|
||||||
border-bottom-color: hsl(var(--t-accent-h) var(--t-accent-s) var(--t-accent-l));
|
border-bottom-color: hsl(var(--t-accent-h) var(--t-accent-s) var(--t-accent-l));
|
||||||
}
|
}
|
||||||
|
|||||||
@ -60,7 +60,6 @@ defmodule SimpleshopThemeWeb.ShopComponents.Cart do
|
|||||||
id="cart-drawer-overlay"
|
id="cart-drawer-overlay"
|
||||||
class={["cart-drawer-overlay", @open && "open"]}
|
class={["cart-drawer-overlay", @open && "open"]}
|
||||||
aria-hidden={to_string(!@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()}
|
phx-click={close_cart_drawer_js()}
|
||||||
>
|
>
|
||||||
</div>
|
</div>
|
||||||
@ -75,25 +74,20 @@ defmodule SimpleshopThemeWeb.ShopComponents.Cart do
|
|||||||
aria-hidden={to_string(!@open)}
|
aria-hidden={to_string(!@open)}
|
||||||
phx-hook="CartDrawer"
|
phx-hook="CartDrawer"
|
||||||
class={["cart-drawer", @open && "open"]}
|
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">
|
<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.
|
Shopping basket with {@cart_count} {if @cart_count == 1, do: "item", else: "items"}. Press Escape to close.
|
||||||
</p>
|
</p>
|
||||||
<div
|
<div class="cart-drawer-header">
|
||||||
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);"
|
|
||||||
>
|
|
||||||
<h2
|
<h2
|
||||||
id="cart-drawer-title"
|
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
|
Your basket
|
||||||
</h2>
|
</h2>
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
class="cart-drawer-close"
|
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()}
|
phx-click={close_cart_drawer_js()}
|
||||||
aria-label="Close cart"
|
aria-label="Close cart"
|
||||||
>
|
>
|
||||||
@ -112,13 +106,13 @@ defmodule SimpleshopThemeWeb.ShopComponents.Cart do
|
|||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="cart-drawer-items" style="flex: 1; overflow-y: auto; padding: 1rem;">
|
<div class="cart-drawer-items">
|
||||||
<%= if @cart_items == [] do %>
|
<%= if @cart_items == [] do %>
|
||||||
<.cart_empty_state mode={@mode} />
|
<.cart_empty_state mode={@mode} />
|
||||||
<% else %>
|
<% 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 %>
|
<%= 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} />
|
<.cart_item_row item={item} size={:compact} show_quantity_controls mode={@mode} />
|
||||||
</li>
|
</li>
|
||||||
<% end %>
|
<% end %>
|
||||||
@ -126,20 +120,14 @@ defmodule SimpleshopThemeWeb.ShopComponents.Cart do
|
|||||||
<% end %>
|
<% end %>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div
|
<div class="cart-drawer-footer">
|
||||||
class="cart-drawer-footer"
|
|
||||||
style="padding: 1rem 1.5rem; border-top: 1px solid var(--t-border-default); background: var(--t-surface-sunken);"
|
|
||||||
>
|
|
||||||
<.delivery_line
|
<.delivery_line
|
||||||
shipping_estimate={@shipping_estimate}
|
shipping_estimate={@shipping_estimate}
|
||||||
country_code={@country_code}
|
country_code={@country_code}
|
||||||
available_countries={@available_countries}
|
available_countries={@available_countries}
|
||||||
mode={@mode}
|
mode={@mode}
|
||||||
/>
|
/>
|
||||||
<div
|
<div class="cart-drawer-total">
|
||||||
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;"
|
|
||||||
>
|
|
||||||
<span>{if @shipping_estimate, do: "Estimated total", else: "Subtotal"}</span>
|
<span>{if @shipping_estimate, do: "Estimated total", else: "Subtotal"}</span>
|
||||||
<span>{@display_total}</span>
|
<span>{@display_total}</span>
|
||||||
</div>
|
</div>
|
||||||
@ -147,7 +135,6 @@ defmodule SimpleshopThemeWeb.ShopComponents.Cart do
|
|||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
class="cart-drawer-checkout w-full mb-2"
|
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
|
Checkout
|
||||||
</button>
|
</button>
|
||||||
@ -157,7 +144,6 @@ defmodule SimpleshopThemeWeb.ShopComponents.Cart do
|
|||||||
<button
|
<button
|
||||||
type="submit"
|
type="submit"
|
||||||
class="cart-drawer-checkout w-full mb-2"
|
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
|
Checkout
|
||||||
</button>
|
</button>
|
||||||
@ -187,79 +173,71 @@ defmodule SimpleshopThemeWeb.ShopComponents.Cart do
|
|||||||
~H"""
|
~H"""
|
||||||
<div
|
<div
|
||||||
class="cart-item-row"
|
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 %>
|
<%= if @mode != :preview do %>
|
||||||
<.link
|
<.link
|
||||||
navigate={"/products/#{@item.product_id}"}
|
navigate={"/products/#{@item.product_id}"}
|
||||||
class="cart-item-image"
|
class={["cart-item-image", !@item.image && "cart-item-image--empty"]}
|
||||||
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);"}"}
|
data-size={if @size == :compact, do: "compact"}
|
||||||
|
style={if @item.image, do: "background-image: url('#{@item.image}');"}
|
||||||
aria-label={"View #{@item.name}"}
|
aria-label={"View #{@item.name}"}
|
||||||
>
|
>
|
||||||
</.link>
|
</.link>
|
||||||
<% else %>
|
<% else %>
|
||||||
<div
|
<div
|
||||||
class="cart-item-image"
|
class={["cart-item-image", !@item.image && "cart-item-image--empty"]}
|
||||||
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);"}"}
|
data-size={if @size == :compact, do: "compact"}
|
||||||
|
style={if @item.image, do: "background-image: url('#{@item.image}');"}
|
||||||
>
|
>
|
||||||
</div>
|
</div>
|
||||||
<% end %>
|
<% end %>
|
||||||
<div class="cart-item-details" style="flex: 1; min-width: 0;">
|
<div class="cart-item-details">
|
||||||
<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;"}>
|
<h3 class="cart-item-name" data-size={if @size == :compact, do: "compact"}>
|
||||||
<%= if @mode != :preview do %>
|
<%= if @mode != :preview do %>
|
||||||
<.link
|
<.link
|
||||||
navigate={"/products/#{@item.product_id}"}
|
navigate={"/products/#{@item.product_id}"}
|
||||||
style="color: var(--t-text-primary); text-decoration: none;"
|
class="cart-item-name-link"
|
||||||
onmouseover="this.style.textDecoration='underline'"
|
|
||||||
onmouseout="this.style.textDecoration='none'"
|
|
||||||
>
|
>
|
||||||
{@item.name}
|
{@item.name}
|
||||||
</.link>
|
</.link>
|
||||||
<% else %>
|
<% else %>
|
||||||
<span style="color: var(--t-text-primary);">{@item.name}</span>
|
<span>{@item.name}</span>
|
||||||
<% end %>
|
<% end %>
|
||||||
</h3>
|
</h3>
|
||||||
<%= if @item.variant do %>
|
<%= 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}
|
{@item.variant}
|
||||||
</p>
|
</p>
|
||||||
<% end %>
|
<% 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 %>
|
<%= if @show_quantity_controls do %>
|
||||||
<div
|
<div class="cart-qty-group flex items-center">
|
||||||
class="flex items-center"
|
|
||||||
style="border: 1px solid var(--t-border-default); border-radius: var(--t-radius-input);"
|
|
||||||
>
|
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
phx-click="decrement"
|
phx-click="decrement"
|
||||||
phx-value-id={@item.variant_id}
|
phx-value-id={@item.variant_id}
|
||||||
class="px-3 py-1"
|
class="cart-qty-btn px-3 py-1"
|
||||||
style="background: none; border: none; cursor: pointer; color: var(--t-text-primary);"
|
|
||||||
aria-label={"Decrease quantity of #{@item.name}"}
|
aria-label={"Decrease quantity of #{@item.name}"}
|
||||||
>
|
>
|
||||||
−
|
−
|
||||||
</button>
|
</button>
|
||||||
<span
|
<span class="cart-qty-display px-3 py-1 border-x">
|
||||||
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;"
|
|
||||||
>
|
|
||||||
{@item.quantity}
|
{@item.quantity}
|
||||||
</span>
|
</span>
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
phx-click="increment"
|
phx-click="increment"
|
||||||
phx-value-id={@item.variant_id}
|
phx-value-id={@item.variant_id}
|
||||||
class="px-3 py-1"
|
class="cart-qty-btn px-3 py-1"
|
||||||
style="background: none; border: none; cursor: pointer; color: var(--t-text-primary);"
|
|
||||||
aria-label={"Increase quantity of #{@item.name}"}
|
aria-label={"Increase quantity of #{@item.name}"}
|
||||||
>
|
>
|
||||||
+
|
+
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<% else %>
|
<% else %>
|
||||||
<span style="font-size: var(--t-text-caption); color: var(--t-text-tertiary);">
|
<span class="cart-qty-text">
|
||||||
Qty: {@item.quantity}
|
Qty: {@item.quantity}
|
||||||
</span>
|
</span>
|
||||||
<% end %>
|
<% end %>
|
||||||
@ -268,8 +246,8 @@ defmodule SimpleshopThemeWeb.ShopComponents.Cart do
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="text-right" style="flex-shrink: 0;">
|
<div class="cart-item-price-col text-right">
|
||||||
<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;"}>
|
<p class="cart-item-price" data-size={if @size == :compact, do: "compact"}>
|
||||||
{SimpleshopTheme.Cart.format_price(@item.price * @item.quantity)}
|
{SimpleshopTheme.Cart.format_price(@item.price * @item.quantity)}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
@ -284,12 +262,11 @@ defmodule SimpleshopThemeWeb.ShopComponents.Cart do
|
|||||||
|
|
||||||
def cart_empty_state(assigns) do
|
def cart_empty_state(assigns) do
|
||||||
~H"""
|
~H"""
|
||||||
<div class="text-center py-8" style="color: var(--t-text-secondary);">
|
<div class="cart-empty text-center py-8">
|
||||||
<svg
|
<svg
|
||||||
class="w-16 h-16 mx-auto mb-4"
|
class="cart-empty-icon w-16 h-16 mx-auto mb-4"
|
||||||
width="64"
|
width="64"
|
||||||
height="64"
|
height="64"
|
||||||
style="color: var(--t-text-tertiary);"
|
|
||||||
viewBox="0 0 24 24"
|
viewBox="0 0 24 24"
|
||||||
fill="none"
|
fill="none"
|
||||||
stroke="currentColor"
|
stroke="currentColor"
|
||||||
@ -305,14 +282,14 @@ defmodule SimpleshopThemeWeb.ShopComponents.Cart do
|
|||||||
type="button"
|
type="button"
|
||||||
phx-click="change_preview_page"
|
phx-click="change_preview_page"
|
||||||
phx-value-page="collection"
|
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
|
Continue shopping
|
||||||
</button>
|
</button>
|
||||||
<% else %>
|
<% else %>
|
||||||
<.link
|
<.link
|
||||||
navigate="/collections/all"
|
navigate="/collections/all"
|
||||||
style="color: var(--t-text-accent); text-decoration: underline;"
|
class="cart-continue-link"
|
||||||
>
|
>
|
||||||
Continue shopping
|
Continue shopping
|
||||||
</.link>
|
</.link>
|
||||||
@ -333,7 +310,7 @@ defmodule SimpleshopThemeWeb.ShopComponents.Cart do
|
|||||||
type="button"
|
type="button"
|
||||||
phx-click="remove_item"
|
phx-click="remove_item"
|
||||||
phx-value-id={@variant_id}
|
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"}
|
aria-label={"Remove #{@item_name} from cart"}
|
||||||
>
|
>
|
||||||
Remove
|
Remove
|
||||||
@ -358,10 +335,7 @@ defmodule SimpleshopThemeWeb.ShopComponents.Cart do
|
|||||||
def cart_item(assigns) do
|
def cart_item(assigns) do
|
||||||
~H"""
|
~H"""
|
||||||
<.shop_card class="flex gap-4 p-4">
|
<.shop_card class="flex gap-4 p-4">
|
||||||
<div
|
<div class="cart-page-image w-24 h-24 flex-shrink-0 bg-gray-200 overflow-hidden">
|
||||||
class="w-24 h-24 flex-shrink-0 bg-gray-200 overflow-hidden"
|
|
||||||
style="border-radius: var(--t-radius-image);"
|
|
||||||
>
|
|
||||||
<img
|
<img
|
||||||
src={cart_item_image(@item.product)}
|
src={cart_item_image(@item.product)}
|
||||||
alt={@item.product.title}
|
alt={@item.product.title}
|
||||||
@ -373,39 +347,30 @@ defmodule SimpleshopThemeWeb.ShopComponents.Cart do
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex-1">
|
<div class="flex-1">
|
||||||
<h3
|
<h3 class="cart-page-item-name font-semibold mb-1">
|
||||||
class="font-semibold mb-1"
|
|
||||||
style="font-family: var(--t-font-heading); color: var(--t-text-primary);"
|
|
||||||
>
|
|
||||||
{@item.product.title}
|
{@item.product.title}
|
||||||
</h3>
|
</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}
|
{@item.variant}
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<div class="flex items-center gap-4">
|
<div class="flex items-center gap-4">
|
||||||
<div
|
<div class="cart-qty-group flex items-center">
|
||||||
class="flex items-center"
|
<button class="cart-qty-btn px-3 py-1">−</button>
|
||||||
style="border: 1px solid var(--t-border-default); border-radius: var(--t-radius-input);"
|
<span class="cart-qty-display px-3 py-1 border-x">
|
||||||
>
|
|
||||||
<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);"
|
|
||||||
>
|
|
||||||
{@item.quantity}
|
{@item.quantity}
|
||||||
</span>
|
</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>
|
</div>
|
||||||
|
|
||||||
<button class="text-sm" style="color: var(--t-text-tertiary);">
|
<button class="cart-page-item-remove text-sm">
|
||||||
Remove
|
Remove
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="text-right">
|
<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)}
|
{SimpleshopTheme.Cart.format_price(@item.product.cheapest_price * @item.quantity)}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
@ -426,18 +391,15 @@ defmodule SimpleshopThemeWeb.ShopComponents.Cart do
|
|||||||
|
|
||||||
defp delivery_line(assigns) do
|
defp delivery_line(assigns) do
|
||||||
~H"""
|
~H"""
|
||||||
<div
|
<div class="delivery-line flex justify-between items-center">
|
||||||
class="flex justify-between items-center"
|
|
||||||
style="font-family: var(--t-font-body); font-size: var(--t-text-small); color: var(--t-text-secondary);"
|
|
||||||
>
|
|
||||||
<span class="flex items-center gap-1">
|
<span class="flex items-center gap-1">
|
||||||
Delivery to
|
Delivery to
|
||||||
<%= if @available_countries != [] and @mode != :preview do %>
|
<%= if @available_countries != [] and @mode != :preview do %>
|
||||||
<form phx-change="change_country" style="display: inline;">
|
<form phx-change="change_country">
|
||||||
<select
|
<select
|
||||||
name="country"
|
name="country"
|
||||||
|
class="delivery-select"
|
||||||
aria-label="Delivery country"
|
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 %>
|
<%= for {code, name} <- @available_countries do %>
|
||||||
<option value={code} selected={code == @country_code}>{name}</option>
|
<option value={code} selected={code == @country_code}>{name}</option>
|
||||||
@ -484,17 +446,14 @@ defmodule SimpleshopThemeWeb.ShopComponents.Cart do
|
|||||||
|
|
||||||
~H"""
|
~H"""
|
||||||
<.shop_card class="p-6 sticky top-4">
|
<.shop_card class="p-6 sticky top-4">
|
||||||
<h2
|
<h2 class="order-summary-heading text-xl font-bold mb-6">
|
||||||
class="text-xl font-bold mb-6"
|
|
||||||
style="font-family: var(--t-font-heading); color: var(--t-text-primary);"
|
|
||||||
>
|
|
||||||
Order summary
|
Order summary
|
||||||
</h2>
|
</h2>
|
||||||
|
|
||||||
<div class="flex flex-col gap-3 mb-6">
|
<div class="flex flex-col gap-3 mb-6">
|
||||||
<div class="flex justify-between">
|
<div class="flex justify-between">
|
||||||
<span style="color: var(--t-text-secondary);">Subtotal</span>
|
<span class="order-summary-label">Subtotal</span>
|
||||||
<span style="color: var(--t-text-primary);">
|
<span class="order-summary-value">
|
||||||
{SimpleshopTheme.Cart.format_price(@subtotal)}
|
{SimpleshopTheme.Cart.format_price(@subtotal)}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
@ -504,12 +463,12 @@ defmodule SimpleshopThemeWeb.ShopComponents.Cart do
|
|||||||
available_countries={@available_countries}
|
available_countries={@available_countries}
|
||||||
mode={@mode}
|
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">
|
<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"}
|
{if @shipping_estimate, do: "Estimated total", else: "Subtotal"}
|
||||||
</span>
|
</span>
|
||||||
<span class="font-bold" style="color: var(--t-text-primary);">
|
<span class="order-summary-value font-bold">
|
||||||
{SimpleshopTheme.Cart.format_price(@estimated_total)}
|
{SimpleshopTheme.Cart.format_price(@estimated_total)}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -26,11 +26,8 @@ defmodule SimpleshopThemeWeb.ShopComponents.Layout do
|
|||||||
|
|
||||||
def announcement_bar(assigns) do
|
def announcement_bar(assigns) do
|
||||||
~H"""
|
~H"""
|
||||||
<div
|
<div class="announcement-bar">
|
||||||
class="announcement-bar"
|
<p>{@message}</p>
|
||||||
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>
|
</div>
|
||||||
"""
|
"""
|
||||||
end
|
end
|
||||||
@ -104,7 +101,6 @@ defmodule SimpleshopThemeWeb.ShopComponents.Layout do
|
|||||||
id={unless @error_page, do: "shop-container"}
|
id={unless @error_page, do: "shop-container"}
|
||||||
phx-hook={unless @error_page, do: "CartPersist"}
|
phx-hook={unless @error_page, do: "CartPersist"}
|
||||||
class={["shop-container min-h-screen", !@error_page && "pb-20 md:pb-0"]}
|
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 />
|
<.skip_link />
|
||||||
|
|
||||||
@ -182,13 +178,9 @@ defmodule SimpleshopThemeWeb.ShopComponents.Layout do
|
|||||||
~H"""
|
~H"""
|
||||||
<nav
|
<nav
|
||||||
class="mobile-bottom-nav md:hidden"
|
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"
|
aria-label="Main navigation"
|
||||||
>
|
>
|
||||||
<ul
|
<ul class="flex justify-around items-center h-16">
|
||||||
class="flex justify-around items-center h-16"
|
|
||||||
style="margin: 0; padding: 0; list-style: none;"
|
|
||||||
>
|
|
||||||
<.mobile_nav_item
|
<.mobile_nav_item
|
||||||
icon={:home}
|
icon={:home}
|
||||||
label="Home"
|
label="Home"
|
||||||
@ -247,8 +239,7 @@ defmodule SimpleshopThemeWeb.ShopComponents.Layout do
|
|||||||
href="#"
|
href="#"
|
||||||
phx-click="change_preview_page"
|
phx-click="change_preview_page"
|
||||||
phx-value-page={@page}
|
phx-value-page={@page}
|
||||||
class="flex flex-col items-center justify-center gap-1 py-2 mx-1 rounded-lg min-h-[56px]"
|
class="mobile-nav-link 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"};"}
|
|
||||||
aria-current={if @is_current, do: "page", else: nil}
|
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"} />
|
<.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 %>
|
<% else %>
|
||||||
<.link
|
<.link
|
||||||
navigate={@href}
|
navigate={@href}
|
||||||
class="flex flex-col items-center justify-center gap-1 py-2 mx-1 rounded-lg min-h-[56px]"
|
class="mobile-nav-link 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"};"}
|
|
||||||
aria-current={if @is_current, do: "page", else: nil}
|
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"} />
|
<.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
|
<div
|
||||||
id="search-modal"
|
id="search-modal"
|
||||||
class="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-hook="SearchModal"
|
||||||
phx-click={Phoenix.LiveView.JS.dispatch("close-search", to: "#search-modal")}
|
phx-click={Phoenix.LiveView.JS.dispatch("close-search", to: "#search-modal")}
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="search-modal-content w-full max-w-xl mx-4"
|
class="search-panel 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);"
|
|
||||||
onclick="event.stopPropagation()"
|
onclick="event.stopPropagation()"
|
||||||
>
|
>
|
||||||
<div
|
<div class="search-bar flex items-center gap-3 p-4">
|
||||||
class="flex items-center gap-3 p-4"
|
|
||||||
style="border-bottom: 1px solid var(--t-border-default);"
|
|
||||||
>
|
|
||||||
<svg
|
<svg
|
||||||
class="w-5 h-5 flex-shrink-0"
|
class="search-icon w-5 h-5 flex-shrink-0"
|
||||||
width="20"
|
width="20"
|
||||||
height="20"
|
height="20"
|
||||||
style="color: var(--t-text-tertiary);"
|
|
||||||
viewBox="0 0 24 24"
|
viewBox="0 0 24 24"
|
||||||
fill="none"
|
fill="none"
|
||||||
stroke="currentColor"
|
stroke="currentColor"
|
||||||
@ -420,8 +405,7 @@ defmodule SimpleshopThemeWeb.ShopComponents.Layout do
|
|||||||
type="text"
|
type="text"
|
||||||
id="search-input"
|
id="search-input"
|
||||||
name="query"
|
name="query"
|
||||||
class="flex-1 text-lg bg-transparent border-none outline-none"
|
class="search-input flex-1 text-lg bg-transparent border-none outline-none"
|
||||||
style="font-family: var(--t-font-body); color: var(--t-text-primary);"
|
|
||||||
placeholder="Search products..."
|
placeholder="Search products..."
|
||||||
value={@search_query}
|
value={@search_query}
|
||||||
phx-keyup="search"
|
phx-keyup="search"
|
||||||
@ -433,16 +417,14 @@ defmodule SimpleshopThemeWeb.ShopComponents.Layout do
|
|||||||
aria-autocomplete="list"
|
aria-autocomplete="list"
|
||||||
/>
|
/>
|
||||||
<div
|
<div
|
||||||
class="hidden sm:flex items-center gap-1 text-xs px-1.5 py-0.5 rounded"
|
class="search-kbd 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);"
|
|
||||||
aria-hidden="true"
|
aria-hidden="true"
|
||||||
>
|
>
|
||||||
<kbd>⌘</kbd><kbd>K</kbd>
|
<kbd>⌘</kbd><kbd>K</kbd>
|
||||||
</div>
|
</div>
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
class="w-8 h-8 flex items-center justify-center transition-all"
|
class="search-close 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);"
|
|
||||||
phx-click={Phoenix.LiveView.JS.dispatch("close-search", to: "#search-modal")}
|
phx-click={Phoenix.LiveView.JS.dispatch("close-search", to: "#search-modal")}
|
||||||
aria-label="Close search"
|
aria-label="Close search"
|
||||||
>
|
>
|
||||||
@ -461,7 +443,7 @@ defmodule SimpleshopThemeWeb.ShopComponents.Layout do
|
|||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="search-results" style="max-height: 60vh; overflow-y: auto;">
|
<div class="search-results">
|
||||||
<%= cond do %>
|
<%= cond do %>
|
||||||
<% @search_results != [] -> %>
|
<% @search_results != [] -> %>
|
||||||
<ul id="search-results-list" class="py-2" role="listbox" aria-label="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
|
<.link
|
||||||
navigate={"/products/#{item.product.slug || item.product.id}"}
|
navigate={"/products/#{item.product.slug || item.product.id}"}
|
||||||
class="flex items-center gap-3 px-4 py-3 transition-colors"
|
class="search-result 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'"
|
|
||||||
phx-click={Phoenix.LiveView.JS.dispatch("close-search", to: "#search-modal")}
|
phx-click={Phoenix.LiveView.JS.dispatch("close-search", to: "#search-modal")}
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
:if={item.image_url}
|
:if={item.image_url}
|
||||||
class="w-12 h-12 flex-shrink-0 rounded overflow-hidden"
|
class="search-result-thumb w-12 h-12 flex-shrink-0 rounded overflow-hidden"
|
||||||
style="background: var(--t-surface-sunken);"
|
|
||||||
>
|
>
|
||||||
<img
|
<img
|
||||||
src={item.image_url}
|
src={item.image_url}
|
||||||
@ -492,12 +470,12 @@ defmodule SimpleshopThemeWeb.ShopComponents.Layout do
|
|||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex-1 min-w-0">
|
<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}
|
{item.product.title}
|
||||||
</p>
|
</p>
|
||||||
<p class="text-xs" style="color: var(--t-text-tertiary);">
|
<p class="search-result-meta text-xs">
|
||||||
{item.product.category}
|
{item.product.category}
|
||||||
<span style="margin-left: 0.5rem;">
|
<span class="ml-2">
|
||||||
{Cart.format_price(item.product.cheapest_price)}
|
{Cart.format_price(item.product.cheapest_price)}
|
||||||
</span>
|
</span>
|
||||||
</p>
|
</p>
|
||||||
@ -506,11 +484,11 @@ defmodule SimpleshopThemeWeb.ShopComponents.Layout do
|
|||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
<% String.length(@search_query) >= 2 -> %>
|
<% 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>
|
<p class="text-sm">No products found for "{@search_query}"</p>
|
||||||
</div>
|
</div>
|
||||||
<% @hint_text != nil -> %>
|
<% @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>
|
<p class="text-sm">{@hint_text}</p>
|
||||||
</div>
|
</div>
|
||||||
<% true -> %>
|
<% true -> %>
|
||||||
@ -543,7 +521,7 @@ defmodule SimpleshopThemeWeb.ShopComponents.Layout do
|
|||||||
assigns = assign(assigns, :current_year, Date.utc_today().year)
|
assigns = assign(assigns, :current_year, Date.utc_today().year)
|
||||||
|
|
||||||
~H"""
|
~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="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">
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-12">
|
||||||
<.newsletter_card variant={:inline} />
|
<.newsletter_card variant={:inline} />
|
||||||
@ -551,10 +529,7 @@ defmodule SimpleshopThemeWeb.ShopComponents.Layout do
|
|||||||
<!-- Links -->
|
<!-- Links -->
|
||||||
<div class="grid grid-cols-2 gap-8">
|
<div class="grid grid-cols-2 gap-8">
|
||||||
<div>
|
<div>
|
||||||
<h4
|
<h4 class="footer-heading font-semibold mb-4 text-sm">
|
||||||
class="font-semibold mb-4 text-sm"
|
|
||||||
style="font-family: var(--t-font-heading); color: var(--t-text-primary);"
|
|
||||||
>
|
|
||||||
Shop
|
Shop
|
||||||
</h4>
|
</h4>
|
||||||
<ul class="flex flex-col gap-2 text-sm">
|
<ul class="flex flex-col gap-2 text-sm">
|
||||||
@ -564,8 +539,7 @@ defmodule SimpleshopThemeWeb.ShopComponents.Layout do
|
|||||||
href="#"
|
href="#"
|
||||||
phx-click="change_preview_page"
|
phx-click="change_preview_page"
|
||||||
phx-value-page="collection"
|
phx-value-page="collection"
|
||||||
class="transition-colors hover:opacity-80"
|
class="footer-link transition-colors hover:opacity-80"
|
||||||
style="color: var(--t-text-secondary); cursor: pointer;"
|
|
||||||
>
|
>
|
||||||
All products
|
All products
|
||||||
</a>
|
</a>
|
||||||
@ -576,8 +550,7 @@ defmodule SimpleshopThemeWeb.ShopComponents.Layout do
|
|||||||
href="#"
|
href="#"
|
||||||
phx-click="change_preview_page"
|
phx-click="change_preview_page"
|
||||||
phx-value-page="collection"
|
phx-value-page="collection"
|
||||||
class="transition-colors hover:opacity-80"
|
class="footer-link transition-colors hover:opacity-80"
|
||||||
style="color: var(--t-text-secondary); cursor: pointer;"
|
|
||||||
>
|
>
|
||||||
{category.name}
|
{category.name}
|
||||||
</a>
|
</a>
|
||||||
@ -587,8 +560,7 @@ defmodule SimpleshopThemeWeb.ShopComponents.Layout do
|
|||||||
<li>
|
<li>
|
||||||
<.link
|
<.link
|
||||||
navigate="/collections/all"
|
navigate="/collections/all"
|
||||||
class="transition-colors hover:opacity-80"
|
class="footer-link transition-colors hover:opacity-80"
|
||||||
style="color: var(--t-text-secondary);"
|
|
||||||
>
|
>
|
||||||
All products
|
All products
|
||||||
</.link>
|
</.link>
|
||||||
@ -597,8 +569,7 @@ defmodule SimpleshopThemeWeb.ShopComponents.Layout do
|
|||||||
<li>
|
<li>
|
||||||
<.link
|
<.link
|
||||||
navigate={"/collections/#{category.slug}"}
|
navigate={"/collections/#{category.slug}"}
|
||||||
class="transition-colors hover:opacity-80"
|
class="footer-link transition-colors hover:opacity-80"
|
||||||
style="color: var(--t-text-secondary);"
|
|
||||||
>
|
>
|
||||||
{category.name}
|
{category.name}
|
||||||
</.link>
|
</.link>
|
||||||
@ -608,10 +579,7 @@ defmodule SimpleshopThemeWeb.ShopComponents.Layout do
|
|||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<h4
|
<h4 class="footer-heading font-semibold mb-4 text-sm">
|
||||||
class="font-semibold mb-4 text-sm"
|
|
||||||
style="font-family: var(--t-font-heading); color: var(--t-text-primary);"
|
|
||||||
>
|
|
||||||
Help
|
Help
|
||||||
</h4>
|
</h4>
|
||||||
<ul class="flex flex-col gap-2 text-sm">
|
<ul class="flex flex-col gap-2 text-sm">
|
||||||
@ -621,8 +589,7 @@ defmodule SimpleshopThemeWeb.ShopComponents.Layout do
|
|||||||
href="#"
|
href="#"
|
||||||
phx-click="change_preview_page"
|
phx-click="change_preview_page"
|
||||||
phx-value-page="delivery"
|
phx-value-page="delivery"
|
||||||
class="transition-colors hover:opacity-80"
|
class="footer-link transition-colors hover:opacity-80"
|
||||||
style="color: var(--t-text-secondary); cursor: pointer;"
|
|
||||||
>
|
>
|
||||||
Delivery & returns
|
Delivery & returns
|
||||||
</a>
|
</a>
|
||||||
@ -632,8 +599,7 @@ defmodule SimpleshopThemeWeb.ShopComponents.Layout do
|
|||||||
href="#"
|
href="#"
|
||||||
phx-click="change_preview_page"
|
phx-click="change_preview_page"
|
||||||
phx-value-page="privacy"
|
phx-value-page="privacy"
|
||||||
class="transition-colors hover:opacity-80"
|
class="footer-link transition-colors hover:opacity-80"
|
||||||
style="color: var(--t-text-secondary); cursor: pointer;"
|
|
||||||
>
|
>
|
||||||
Privacy policy
|
Privacy policy
|
||||||
</a>
|
</a>
|
||||||
@ -643,8 +609,7 @@ defmodule SimpleshopThemeWeb.ShopComponents.Layout do
|
|||||||
href="#"
|
href="#"
|
||||||
phx-click="change_preview_page"
|
phx-click="change_preview_page"
|
||||||
phx-value-page="terms"
|
phx-value-page="terms"
|
||||||
class="transition-colors hover:opacity-80"
|
class="footer-link transition-colors hover:opacity-80"
|
||||||
style="color: var(--t-text-secondary); cursor: pointer;"
|
|
||||||
>
|
>
|
||||||
Terms of service
|
Terms of service
|
||||||
</a>
|
</a>
|
||||||
@ -654,8 +619,7 @@ defmodule SimpleshopThemeWeb.ShopComponents.Layout do
|
|||||||
href="#"
|
href="#"
|
||||||
phx-click="change_preview_page"
|
phx-click="change_preview_page"
|
||||||
phx-value-page="contact"
|
phx-value-page="contact"
|
||||||
class="transition-colors hover:opacity-80"
|
class="footer-link transition-colors hover:opacity-80"
|
||||||
style="color: var(--t-text-secondary); cursor: pointer;"
|
|
||||||
>
|
>
|
||||||
Contact
|
Contact
|
||||||
</a>
|
</a>
|
||||||
@ -664,8 +628,7 @@ defmodule SimpleshopThemeWeb.ShopComponents.Layout do
|
|||||||
<li>
|
<li>
|
||||||
<.link
|
<.link
|
||||||
navigate="/delivery"
|
navigate="/delivery"
|
||||||
class="transition-colors hover:opacity-80"
|
class="footer-link transition-colors hover:opacity-80"
|
||||||
style="color: var(--t-text-secondary);"
|
|
||||||
>
|
>
|
||||||
Delivery & returns
|
Delivery & returns
|
||||||
</.link>
|
</.link>
|
||||||
@ -673,8 +636,7 @@ defmodule SimpleshopThemeWeb.ShopComponents.Layout do
|
|||||||
<li>
|
<li>
|
||||||
<.link
|
<.link
|
||||||
navigate="/privacy"
|
navigate="/privacy"
|
||||||
class="transition-colors hover:opacity-80"
|
class="footer-link transition-colors hover:opacity-80"
|
||||||
style="color: var(--t-text-secondary);"
|
|
||||||
>
|
>
|
||||||
Privacy policy
|
Privacy policy
|
||||||
</.link>
|
</.link>
|
||||||
@ -682,8 +644,7 @@ defmodule SimpleshopThemeWeb.ShopComponents.Layout do
|
|||||||
<li>
|
<li>
|
||||||
<.link
|
<.link
|
||||||
navigate="/terms"
|
navigate="/terms"
|
||||||
class="transition-colors hover:opacity-80"
|
class="footer-link transition-colors hover:opacity-80"
|
||||||
style="color: var(--t-text-secondary);"
|
|
||||||
>
|
>
|
||||||
Terms of service
|
Terms of service
|
||||||
</.link>
|
</.link>
|
||||||
@ -691,8 +652,7 @@ defmodule SimpleshopThemeWeb.ShopComponents.Layout do
|
|||||||
<li>
|
<li>
|
||||||
<.link
|
<.link
|
||||||
navigate="/contact"
|
navigate="/contact"
|
||||||
class="transition-colors hover:opacity-80"
|
class="footer-link transition-colors hover:opacity-80"
|
||||||
style="color: var(--t-text-secondary);"
|
|
||||||
>
|
>
|
||||||
Contact
|
Contact
|
||||||
</.link>
|
</.link>
|
||||||
@ -704,11 +664,8 @@ defmodule SimpleshopThemeWeb.ShopComponents.Layout do
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Bottom Bar -->
|
<!-- Bottom Bar -->
|
||||||
<div
|
<div class="footer-bottom mt-12 pt-8 flex flex-col md:flex-row justify-between items-center gap-4">
|
||||||
class="mt-12 pt-8 flex flex-col md:flex-row justify-between items-center gap-4"
|
<p class="footer-copyright text-xs">
|
||||||
style="border-top: 1px solid var(--t-border-subtle);"
|
|
||||||
>
|
|
||||||
<p class="text-xs" style="color: var(--t-text-tertiary);">
|
|
||||||
© {@current_year} {@theme_settings.site_name}
|
© {@current_year} {@theme_settings.site_name}
|
||||||
</p>
|
</p>
|
||||||
<.social_links />
|
<.social_links />
|
||||||
@ -745,18 +702,12 @@ defmodule SimpleshopThemeWeb.ShopComponents.Layout do
|
|||||||
|
|
||||||
def shop_header(assigns) do
|
def shop_header(assigns) do
|
||||||
~H"""
|
~H"""
|
||||||
<header
|
<header class="shop-header px-2 py-2 sm:px-4 sm:py-3 md:px-8 md:py-4">
|
||||||
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;"
|
|
||||||
>
|
|
||||||
<%= if @theme_settings.header_background_enabled && @header_image do %>
|
<%= if @theme_settings.header_background_enabled && @header_image do %>
|
||||||
<div style={header_background_style(@theme_settings, @header_image)} />
|
<div style={header_background_style(@theme_settings, @header_image)} />
|
||||||
<% end %>
|
<% end %>
|
||||||
|
|
||||||
<div
|
<div class="shop-logo">
|
||||||
class="shop-logo"
|
|
||||||
style="display: flex; align-items: center; position: relative; z-index: 1;"
|
|
||||||
>
|
|
||||||
<.logo_content
|
<.logo_content
|
||||||
theme_settings={@theme_settings}
|
theme_settings={@theme_settings}
|
||||||
logo_image={@logo_image}
|
logo_image={@logo_image}
|
||||||
@ -765,7 +716,7 @@ defmodule SimpleshopThemeWeb.ShopComponents.Layout do
|
|||||||
/>
|
/>
|
||||||
</div>
|
</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 %>
|
<%= if @mode == :preview do %>
|
||||||
<.nav_item label="Home" page="home" active_page={@active_page} mode={:preview} />
|
<.nav_item label="Home" page="home" active_page={@active_page} mode={:preview} />
|
||||||
<.nav_item
|
<.nav_item
|
||||||
@ -791,12 +742,11 @@ defmodule SimpleshopThemeWeb.ShopComponents.Layout do
|
|||||||
<% end %>
|
<% end %>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
<div class="shop-actions flex items-center" style="position: relative; z-index: 1;">
|
<div class="shop-actions flex items-center">
|
||||||
<.link
|
<.link
|
||||||
:if={@is_admin}
|
:if={@is_admin}
|
||||||
href="/admin"
|
href="/admin"
|
||||||
class="header-icon-btn w-9 h-9 flex items-center justify-center transition-all"
|
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"
|
aria-label="Admin"
|
||||||
>
|
>
|
||||||
<svg
|
<svg
|
||||||
@ -823,7 +773,6 @@ defmodule SimpleshopThemeWeb.ShopComponents.Layout do
|
|||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
class="header-icon-btn w-9 h-9 flex items-center justify-center transition-all"
|
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")}
|
phx-click={Phoenix.LiveView.JS.dispatch("open-search", to: "#search-modal")}
|
||||||
aria-label="Search"
|
aria-label="Search"
|
||||||
>
|
>
|
||||||
@ -843,7 +792,6 @@ defmodule SimpleshopThemeWeb.ShopComponents.Layout do
|
|||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
class="header-icon-btn w-9 h-9 flex items-center justify-center transition-all relative"
|
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()}
|
phx-click={open_cart_drawer_js()}
|
||||||
aria-label="Cart"
|
aria-label="Cart"
|
||||||
>
|
>
|
||||||
@ -861,10 +809,7 @@ defmodule SimpleshopThemeWeb.ShopComponents.Layout do
|
|||||||
<path d="M16 10a4 4 0 01-8 0"></path>
|
<path d="M16 10a4 4 0 01-8 0"></path>
|
||||||
</svg>
|
</svg>
|
||||||
<%= if @cart_count > 0 do %>
|
<%= if @cart_count > 0 do %>
|
||||||
<span
|
<span class="cart-badge">
|
||||||
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;"
|
|
||||||
>
|
|
||||||
{@cart_count}
|
{@cart_count}
|
||||||
</span>
|
</span>
|
||||||
<% end %>
|
<% end %>
|
||||||
@ -902,12 +847,12 @@ defmodule SimpleshopThemeWeb.ShopComponents.Layout do
|
|||||||
href="#"
|
href="#"
|
||||||
phx-click="change_preview_page"
|
phx-click="change_preview_page"
|
||||||
phx-value-page="home"
|
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} />
|
<.logo_inner theme_settings={@theme_settings} logo_image={@logo_image} />
|
||||||
</a>
|
</a>
|
||||||
<% else %>
|
<% 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} />
|
<.logo_inner theme_settings={@theme_settings} logo_image={@logo_image} />
|
||||||
</.link>
|
</.link>
|
||||||
<% end %>
|
<% end %>
|
||||||
@ -922,10 +867,7 @@ defmodule SimpleshopThemeWeb.ShopComponents.Layout do
|
|||||||
~H"""
|
~H"""
|
||||||
<%= case @theme_settings.logo_mode do %>
|
<%= case @theme_settings.logo_mode do %>
|
||||||
<% "text-only" -> %>
|
<% "text-only" -> %>
|
||||||
<span
|
<span class="shop-logo-text">
|
||||||
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);"
|
|
||||||
>
|
|
||||||
{@theme_settings.site_name}
|
{@theme_settings.site_name}
|
||||||
</span>
|
</span>
|
||||||
<% "logo-text" -> %>
|
<% "logo-text" -> %>
|
||||||
@ -933,13 +875,11 @@ defmodule SimpleshopThemeWeb.ShopComponents.Layout do
|
|||||||
<img
|
<img
|
||||||
src={logo_url(@logo_image, @theme_settings)}
|
src={logo_url(@logo_image, @theme_settings)}
|
||||||
alt={@theme_settings.site_name}
|
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 %>
|
<% end %>
|
||||||
<span
|
<span class="shop-logo-text">
|
||||||
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);"
|
|
||||||
>
|
|
||||||
{@theme_settings.site_name}
|
{@theme_settings.site_name}
|
||||||
</span>
|
</span>
|
||||||
<% "logo-only" -> %>
|
<% "logo-only" -> %>
|
||||||
@ -947,21 +887,16 @@ defmodule SimpleshopThemeWeb.ShopComponents.Layout do
|
|||||||
<img
|
<img
|
||||||
src={logo_url(@logo_image, @theme_settings)}
|
src={logo_url(@logo_image, @theme_settings)}
|
||||||
alt={@theme_settings.site_name}
|
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 %>
|
<% else %>
|
||||||
<span
|
<span class="shop-logo-text">
|
||||||
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);"
|
|
||||||
>
|
|
||||||
{@theme_settings.site_name}
|
{@theme_settings.site_name}
|
||||||
</span>
|
</span>
|
||||||
<% end %>
|
<% end %>
|
||||||
<% _ -> %>
|
<% _ -> %>
|
||||||
<span
|
<span class="shop-logo-text">
|
||||||
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);"
|
|
||||||
>
|
|
||||||
{@theme_settings.site_name}
|
{@theme_settings.site_name}
|
||||||
</span>
|
</span>
|
||||||
<% end %>
|
<% end %>
|
||||||
@ -993,7 +928,7 @@ defmodule SimpleshopThemeWeb.ShopComponents.Layout do
|
|||||||
|
|
||||||
~H"""
|
~H"""
|
||||||
<%= if @is_current do %>
|
<%= 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}
|
{@label}
|
||||||
</span>
|
</span>
|
||||||
<% else %>
|
<% else %>
|
||||||
@ -1002,12 +937,12 @@ defmodule SimpleshopThemeWeb.ShopComponents.Layout do
|
|||||||
href="#"
|
href="#"
|
||||||
phx-click="change_preview_page"
|
phx-click="change_preview_page"
|
||||||
phx-value-page={@page}
|
phx-value-page={@page}
|
||||||
style="color: var(--t-text-secondary); text-decoration: none; cursor: pointer;"
|
class="nav-link"
|
||||||
>
|
>
|
||||||
{@label}
|
{@label}
|
||||||
</a>
|
</a>
|
||||||
<% else %>
|
<% else %>
|
||||||
<.link navigate={@href} style="color: var(--t-text-secondary); text-decoration: none;">
|
<.link navigate={@href} class="nav-link">
|
||||||
{@label}
|
{@label}
|
||||||
</.link>
|
</.link>
|
||||||
<% end %>
|
<% end %>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user