complete reviews system (phases 4-6)
All checks were successful
deploy / deploy (push) Successful in 1m4s
All checks were successful
deploy / deploy (push) Successful in 1m4s
- review display: photos with lightbox, verified badge, pagination - admin moderation: pending/approved/rejected tabs, bulk actions, nav badge - SEO: JSON-LD AggregateRating and Review markup on product pages - automation: review request emails 7 days after delivery (Oban worker) - rating cache: avg/count fields on products, updated on approval - fix file size validation in media test (10MB limit) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
jamey
@@ -6438,4 +6438,188 @@
|
||||
}
|
||||
}
|
||||
|
||||
/* ── Review moderation ── */
|
||||
|
||||
.admin-review-list {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.admin-review-row {
|
||||
border: 1px solid var(--admin-border);
|
||||
border-radius: var(--radius-md);
|
||||
margin-bottom: 0.5rem;
|
||||
background: var(--admin-surface);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.admin-review-row-expanded {
|
||||
box-shadow: 0 2px 8px oklch(0 0 0 / 0.08);
|
||||
}
|
||||
|
||||
.admin-review-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
padding: 0.75rem 1rem;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
background: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.1s ease;
|
||||
|
||||
&:hover {
|
||||
background: oklch(0.98 0 0);
|
||||
}
|
||||
}
|
||||
|
||||
.admin-review-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.admin-review-product {
|
||||
font-weight: 500;
|
||||
font-size: 0.875rem;
|
||||
max-width: 14rem;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.admin-review-rating {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
color: var(--admin-text-muted);
|
||||
}
|
||||
|
||||
.admin-star {
|
||||
color: #f59e0b;
|
||||
}
|
||||
|
||||
.admin-review-info {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
min-width: 0;
|
||||
font-size: 0.8125rem;
|
||||
color: var(--admin-text-muted);
|
||||
}
|
||||
|
||||
.admin-review-author {
|
||||
font-weight: 500;
|
||||
color: var(--admin-text-default);
|
||||
}
|
||||
|
||||
.admin-review-email {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.admin-review-date {
|
||||
flex-shrink: 0;
|
||||
color: var(--admin-text-faint);
|
||||
}
|
||||
|
||||
.admin-review-chevron {
|
||||
flex-shrink: 0;
|
||||
color: var(--admin-text-faint);
|
||||
}
|
||||
|
||||
.admin-review-detail {
|
||||
padding: 1rem;
|
||||
border-top: 1px solid var(--admin-border);
|
||||
background: oklch(0.985 0 0);
|
||||
}
|
||||
|
||||
.admin-review-content {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.admin-review-title {
|
||||
font-weight: 600;
|
||||
font-size: 0.9375rem;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.admin-review-body {
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.6;
|
||||
color: var(--admin-text-muted);
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.admin-review-empty {
|
||||
font-size: 0.875rem;
|
||||
font-style: italic;
|
||||
color: var(--admin-text-faint);
|
||||
}
|
||||
|
||||
.admin-review-photos {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
margin-top: 0.75rem;
|
||||
}
|
||||
|
||||
.admin-review-photo {
|
||||
display: block;
|
||||
width: 5rem;
|
||||
height: 5rem;
|
||||
border-radius: var(--radius-sm);
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--admin-border);
|
||||
transition: border-color 0.1s ease;
|
||||
|
||||
&:hover {
|
||||
border-color: var(--t-accent);
|
||||
}
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
|
||||
.admin-review-actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
/* Status badges */
|
||||
.admin-status-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
padding: 0.125rem 0.5rem;
|
||||
border-radius: 9999px;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
.admin-status-pending {
|
||||
background: oklch(0.96 0.04 80);
|
||||
color: oklch(0.45 0.1 80);
|
||||
}
|
||||
|
||||
.admin-status-approved {
|
||||
background: oklch(0.95 0.06 145);
|
||||
color: oklch(0.35 0.12 145);
|
||||
}
|
||||
|
||||
.admin-status-rejected {
|
||||
background: oklch(0.95 0.04 25);
|
||||
color: oklch(0.45 0.12 25);
|
||||
}
|
||||
|
||||
} /* @layer admin */
|
||||
|
||||
@@ -130,6 +130,18 @@
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
|
||||
.product-card-rating {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
|
||||
.product-card-rating-count {
|
||||
color: var(--t-text-tertiary);
|
||||
font-size: var(--t-text-caption);
|
||||
}
|
||||
|
||||
/* ── Product prices (shared between cards and PDP) ── */
|
||||
|
||||
.product-price--sale {
|
||||
@@ -2393,7 +2405,6 @@
|
||||
|
||||
.review-body {
|
||||
font-size: var(--t-text-small);
|
||||
margin-bottom: 0.75rem;
|
||||
color: var(--t-text-secondary);
|
||||
line-height: 1.6;
|
||||
}
|
||||
@@ -2402,6 +2413,7 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
margin-top: 0.75rem;
|
||||
}
|
||||
|
||||
.review-author {
|
||||
@@ -2411,11 +2423,468 @@
|
||||
}
|
||||
|
||||
.review-verified {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
font-size: var(--t-text-caption);
|
||||
padding: 0.125rem 0.5rem;
|
||||
border-radius: var(--t-radius-sm, 4px);
|
||||
background-color: var(--t-surface-sunken);
|
||||
color: var(--t-text-tertiary);
|
||||
|
||||
svg {
|
||||
flex-shrink: 0;
|
||||
color: var(--t-accent);
|
||||
}
|
||||
}
|
||||
|
||||
/* ── Review photos ── */
|
||||
|
||||
.review-photos {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.75rem;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.review-photo-thumb {
|
||||
width: 4rem;
|
||||
height: 4rem;
|
||||
padding: 0;
|
||||
border: 1px solid var(--t-border);
|
||||
border-radius: var(--t-radius-sm, 4px);
|
||||
background: var(--t-surface-sunken);
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
transition: border-color 0.15s ease;
|
||||
|
||||
&:hover {
|
||||
border-color: var(--t-accent);
|
||||
}
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
|
||||
/* ── Review request form ── */
|
||||
|
||||
.review-request-form {
|
||||
padding: 1.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
background-color: var(--t-surface-sunken);
|
||||
border-radius: var(--t-radius-card);
|
||||
}
|
||||
|
||||
.review-request-title {
|
||||
font-family: var(--t-font-heading);
|
||||
font-weight: 600;
|
||||
font-size: var(--t-text-large);
|
||||
color: var(--t-text-primary);
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.review-request-hint {
|
||||
font-size: var(--t-text-small);
|
||||
color: var(--t-text-secondary);
|
||||
margin-bottom: 1rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.review-email-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.review-email-row {
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.review-email-input {
|
||||
flex: 1;
|
||||
padding: 0.625rem 1rem;
|
||||
font-size: var(--t-text-base);
|
||||
font-family: var(--t-font-body);
|
||||
color: var(--t-text-primary);
|
||||
background-color: var(--t-surface-base);
|
||||
border: 1px solid var(--t-border-default);
|
||||
border-radius: var(--t-radius-input);
|
||||
outline: none;
|
||||
transition: border-color 0.15s ease;
|
||||
|
||||
&:focus {
|
||||
border-color: var(--t-accent);
|
||||
}
|
||||
|
||||
&::placeholder {
|
||||
color: var(--t-text-tertiary);
|
||||
}
|
||||
}
|
||||
|
||||
.review-email-submit {
|
||||
padding: 0.625rem 1.25rem;
|
||||
font-size: var(--t-text-base);
|
||||
font-weight: 500;
|
||||
font-family: var(--t-font-body);
|
||||
color: var(--t-text-inverse);
|
||||
background-color: var(--t-accent-button);
|
||||
border: none;
|
||||
border-radius: var(--t-radius-button);
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
transition: opacity 0.15s ease;
|
||||
|
||||
&:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
}
|
||||
|
||||
/* ── Review status message ── */
|
||||
|
||||
.review-status {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 0.5rem;
|
||||
padding: 0.75rem 1rem;
|
||||
margin-bottom: 1rem;
|
||||
border-radius: var(--t-radius-sm, 4px);
|
||||
font-size: var(--t-text-small);
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.review-status-icon {
|
||||
flex-shrink: 0;
|
||||
margin-top: 0.1em;
|
||||
}
|
||||
|
||||
.review-status-info {
|
||||
background-color: color-mix(in srgb, var(--t-accent) 12%, transparent);
|
||||
color: var(--t-accent);
|
||||
}
|
||||
|
||||
.review-status-error {
|
||||
background-color: color-mix(in srgb, #ef4444 12%, transparent);
|
||||
color: #b91c1c;
|
||||
}
|
||||
|
||||
/* ── Existing review notice ── */
|
||||
|
||||
.existing-review-notice {
|
||||
padding: 1rem 1.25rem;
|
||||
margin-bottom: 1.5rem;
|
||||
background-color: var(--t-surface-sunken);
|
||||
border-radius: var(--t-radius-card);
|
||||
}
|
||||
|
||||
.existing-review-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.existing-review-label {
|
||||
font-size: var(--t-text-small);
|
||||
font-weight: 600;
|
||||
color: var(--t-text-primary);
|
||||
}
|
||||
|
||||
.existing-review-edit {
|
||||
font-size: var(--t-text-small);
|
||||
color: var(--t-accent);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.existing-review-content {
|
||||
font-size: var(--t-text-small);
|
||||
color: var(--t-text-secondary);
|
||||
}
|
||||
|
||||
.existing-review-rating {
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
/* ── Reviews empty state ── */
|
||||
|
||||
.reviews-empty {
|
||||
color: var(--t-text-secondary);
|
||||
font-size: var(--t-text-small);
|
||||
padding: 1rem 0;
|
||||
}
|
||||
|
||||
/* ── Review form page ── */
|
||||
|
||||
.review-form-page {
|
||||
max-width: 32rem;
|
||||
margin: 0 auto;
|
||||
padding: 2rem 1rem;
|
||||
}
|
||||
|
||||
.review-form-container {
|
||||
padding: 2rem;
|
||||
background-color: var(--t-surface-card);
|
||||
border: 1px solid var(--t-border-default);
|
||||
border-radius: var(--t-radius-card);
|
||||
}
|
||||
|
||||
.review-form-heading {
|
||||
font-family: var(--t-font-heading);
|
||||
font-weight: 700;
|
||||
font-size: var(--t-text-2xl);
|
||||
color: var(--t-text-primary);
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.review-form-product {
|
||||
font-size: var(--t-text-base);
|
||||
color: var(--t-text-secondary);
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.review-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.review-form-field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.review-form-label {
|
||||
font-weight: 500;
|
||||
color: var(--t-text-primary);
|
||||
}
|
||||
|
||||
.review-form-optional {
|
||||
font-weight: normal;
|
||||
color: var(--t-text-tertiary);
|
||||
}
|
||||
|
||||
.review-form-input,
|
||||
.review-form-textarea {
|
||||
padding: 0.75rem 1rem;
|
||||
font-size: var(--t-text-base);
|
||||
font-family: var(--t-font-body);
|
||||
color: var(--t-text-primary);
|
||||
background-color: var(--t-surface-base);
|
||||
border: 1px solid var(--t-border-default);
|
||||
border-radius: var(--t-radius-input);
|
||||
outline: none;
|
||||
transition: border-color 0.15s ease;
|
||||
|
||||
&:focus {
|
||||
border-color: var(--t-accent);
|
||||
}
|
||||
|
||||
&::placeholder {
|
||||
color: var(--t-text-tertiary);
|
||||
}
|
||||
}
|
||||
|
||||
.review-form-textarea {
|
||||
resize: vertical;
|
||||
min-height: 6rem;
|
||||
}
|
||||
|
||||
.review-form-error {
|
||||
font-size: var(--t-text-small);
|
||||
color: #b91c1c;
|
||||
}
|
||||
|
||||
.review-form-submit {
|
||||
padding: 0.75rem 1.5rem;
|
||||
font-size: var(--t-text-base);
|
||||
font-weight: 600;
|
||||
font-family: var(--t-font-body);
|
||||
color: var(--t-text-inverse);
|
||||
background-color: var(--t-accent-button);
|
||||
border: none;
|
||||
border-radius: var(--t-radius-button);
|
||||
cursor: pointer;
|
||||
transition: opacity 0.15s ease;
|
||||
|
||||
&:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
}
|
||||
|
||||
/* ── Star rating input ── */
|
||||
|
||||
.star-rating-input {
|
||||
display: flex;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.star-rating-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
padding: 0.125rem;
|
||||
cursor: pointer;
|
||||
transition: transform 0.1s ease;
|
||||
|
||||
&:hover {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
}
|
||||
|
||||
.star-icon {
|
||||
width: 1.75rem;
|
||||
height: 1.75rem;
|
||||
}
|
||||
|
||||
.star-filled {
|
||||
color: #f59e0b;
|
||||
}
|
||||
|
||||
.star-empty {
|
||||
color: var(--t-border-default);
|
||||
}
|
||||
|
||||
/* ── Review success/error pages ── */
|
||||
|
||||
.review-success,
|
||||
.review-error {
|
||||
text-align: center;
|
||||
padding: 3rem 1.5rem;
|
||||
}
|
||||
|
||||
.review-success-icon {
|
||||
width: 4rem;
|
||||
height: 4rem;
|
||||
margin: 0 auto 1.5rem;
|
||||
color: var(--t-accent);
|
||||
}
|
||||
|
||||
.review-success h1,
|
||||
.review-error h1 {
|
||||
font-family: var(--t-font-heading);
|
||||
font-weight: 700;
|
||||
font-size: var(--t-text-2xl);
|
||||
color: var(--t-text-primary);
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.review-success p,
|
||||
.review-error p {
|
||||
color: var(--t-text-secondary);
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.review-back-link {
|
||||
display: inline-block;
|
||||
color: var(--t-accent);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.review-edit-link {
|
||||
display: block;
|
||||
margin-top: 0.75rem;
|
||||
color: var(--t-text-secondary);
|
||||
text-decoration: underline;
|
||||
font-size: var(--t-text-small);
|
||||
}
|
||||
|
||||
/* ── Review photo upload ── */
|
||||
|
||||
.review-photo-previews {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.75rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.review-photo-preview {
|
||||
position: relative;
|
||||
width: 5rem;
|
||||
height: 5rem;
|
||||
border-radius: var(--t-radius-sm, 4px);
|
||||
overflow: hidden;
|
||||
background: var(--t-surface-sunken);
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
|
||||
.review-photo-remove {
|
||||
position: absolute;
|
||||
top: 0.25rem;
|
||||
right: 0.25rem;
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
opacity: 0;
|
||||
transition: opacity 0.15s ease;
|
||||
|
||||
.review-photo-preview:hover & {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.review-photo-progress {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 3px;
|
||||
background: var(--t-surface-sunken);
|
||||
}
|
||||
|
||||
.review-photo-progress-bar {
|
||||
height: 100%;
|
||||
background: var(--t-accent);
|
||||
transition: width 0.2s ease;
|
||||
}
|
||||
|
||||
.review-photo-add {
|
||||
width: 5rem;
|
||||
height: 5rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.25rem;
|
||||
border: 2px dashed var(--t-border);
|
||||
border-radius: var(--t-radius-sm, 4px);
|
||||
color: var(--t-text-tertiary);
|
||||
cursor: pointer;
|
||||
transition: border-color 0.15s ease, color 0.15s ease;
|
||||
|
||||
&:hover {
|
||||
border-color: var(--t-accent);
|
||||
color: var(--t-accent);
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: var(--t-text-caption);
|
||||
}
|
||||
}
|
||||
|
||||
.review-form-hint {
|
||||
font-size: var(--t-text-caption);
|
||||
color: var(--t-text-tertiary);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* ── Rich text ── */
|
||||
|
||||
@@ -205,12 +205,13 @@ const CartDrawer = {
|
||||
}
|
||||
}
|
||||
|
||||
// Hook for PDP image lightbox
|
||||
// Hook for image lightbox (used by product gallery and review photos)
|
||||
const Lightbox = {
|
||||
mounted() {
|
||||
const dialog = this.el
|
||||
const lightboxImage = dialog.querySelector('#lightbox-image')
|
||||
const lightboxCounter = dialog.querySelector('#lightbox-counter')
|
||||
// Use class selectors so multiple lightboxes can coexist
|
||||
const lightboxImage = dialog.querySelector('.lightbox-image')
|
||||
const lightboxCounter = dialog.querySelector('.lightbox-counter')
|
||||
|
||||
// Get images from data attribute
|
||||
const getImages = () => {
|
||||
@@ -258,11 +259,15 @@ const Lightbox = {
|
||||
dialog.close()
|
||||
}
|
||||
|
||||
// Event listeners for custom events dispatched from LiveView.JS
|
||||
// Event listeners - support both legacy pdp: events and new lightbox: events
|
||||
dialog.addEventListener('pdp:open-lightbox', openLightbox)
|
||||
dialog.addEventListener('pdp:close-lightbox', closeLightbox)
|
||||
dialog.addEventListener('pdp:next-image', nextImage)
|
||||
dialog.addEventListener('pdp:prev-image', prevImage)
|
||||
dialog.addEventListener('lightbox:open', openLightbox)
|
||||
dialog.addEventListener('lightbox:close', closeLightbox)
|
||||
dialog.addEventListener('lightbox:next', nextImage)
|
||||
dialog.addEventListener('lightbox:prev', prevImage)
|
||||
|
||||
// Close on clicking backdrop
|
||||
dialog.addEventListener('click', (e) => {
|
||||
@@ -288,6 +293,10 @@ const Lightbox = {
|
||||
dialog.removeEventListener('pdp:close-lightbox', closeLightbox)
|
||||
dialog.removeEventListener('pdp:next-image', nextImage)
|
||||
dialog.removeEventListener('pdp:prev-image', prevImage)
|
||||
dialog.removeEventListener('lightbox:open', openLightbox)
|
||||
dialog.removeEventListener('lightbox:close', closeLightbox)
|
||||
dialog.removeEventListener('lightbox:next', nextImage)
|
||||
dialog.removeEventListener('lightbox:prev', prevImage)
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
Reference in New Issue
Block a user