add page builder polish: utility blocks, templates, duplicate
All checks were successful
deploy / deploy (push) Successful in 1m24s
All checks were successful
deploy / deploy (push) Successful in 1m24s
New block types: spacer, divider, button/CTA, video embed (YouTube, Vimeo with privacy-enhanced embeds, fallback for unknown URLs). Page templates (blank, content, landing) shown when creating custom pages. Duplicate page action on admin index with slug deduplication. Fix block picker on shop edit sidebar being cut off on mobile by accounting for bottom nav and making the grid scrollable. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -1197,10 +1197,26 @@
|
||||
}
|
||||
}
|
||||
|
||||
.page-card-action {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 0.25rem;
|
||||
color: color-mix(in oklch, var(--t-text-primary) 30%, transparent);
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
background: none;
|
||||
|
||||
@media (hover: hover) {
|
||||
&:hover {
|
||||
color: var(--t-text-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.page-card-delete {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 0.75rem;
|
||||
padding: 0 0.75rem 0 0.25rem;
|
||||
color: color-mix(in oklch, var(--t-text-primary) 30%, transparent);
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
@@ -1213,6 +1229,59 @@
|
||||
}
|
||||
}
|
||||
|
||||
/* ── Template picker ── */
|
||||
|
||||
.template-picker {
|
||||
margin-top: 1.5rem;
|
||||
max-width: 32rem;
|
||||
}
|
||||
|
||||
.template-picker-label {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
margin-bottom: 0.5rem;
|
||||
color: var(--t-text-primary);
|
||||
}
|
||||
|
||||
.template-picker-cards {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.template-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
padding: 0.75rem;
|
||||
border: 1px solid var(--t-border-default);
|
||||
border-radius: var(--t-radius);
|
||||
background: var(--t-surface-base);
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
color: var(--t-text-primary);
|
||||
transition: border-color 0.15s;
|
||||
}
|
||||
|
||||
.template-card:hover {
|
||||
border-color: var(--t-text-secondary);
|
||||
}
|
||||
|
||||
.template-card-selected {
|
||||
border-color: var(--t-accent-button);
|
||||
background: color-mix(in oklch, var(--t-accent-button) 8%, var(--t-surface-base));
|
||||
}
|
||||
|
||||
.template-card-name {
|
||||
font-weight: 600;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.template-card-desc {
|
||||
font-size: 0.75rem;
|
||||
color: var(--t-text-secondary);
|
||||
}
|
||||
|
||||
/* Page editor split layout */
|
||||
|
||||
.page-editor-container {
|
||||
@@ -1598,6 +1667,23 @@
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
/* Picker inside the editor sidebar — grid scrolls within a capped height */
|
||||
.page-editor-sidebar .block-picker-overlay {
|
||||
position: static;
|
||||
background: none;
|
||||
}
|
||||
|
||||
.page-editor-sidebar .block-picker {
|
||||
border-radius: 0;
|
||||
max-height: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.page-editor-sidebar .block-picker-grid {
|
||||
max-height: 45dvh;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.page-editor-content {
|
||||
flex: 1;
|
||||
margin-left: 360px;
|
||||
@@ -1624,6 +1710,7 @@
|
||||
.page-editor-sidebar {
|
||||
width: 85%;
|
||||
max-width: 360px;
|
||||
padding-bottom: calc(4rem + env(safe-area-inset-bottom, 0px) + 1rem);
|
||||
}
|
||||
|
||||
.page-editor-content {
|
||||
|
||||
@@ -808,6 +808,108 @@
|
||||
font-size: var(--t-text-small);
|
||||
}
|
||||
|
||||
/* ── Spacer block ── */
|
||||
|
||||
.block-spacer {
|
||||
height: 3rem;
|
||||
}
|
||||
|
||||
.block-spacer[data-size="small"] {
|
||||
height: 1.5rem;
|
||||
}
|
||||
|
||||
.block-spacer[data-size="large"] {
|
||||
height: 5rem;
|
||||
}
|
||||
|
||||
.block-spacer[data-size="xlarge"] {
|
||||
height: 8rem;
|
||||
}
|
||||
|
||||
/* ── Divider block ── */
|
||||
|
||||
.block-divider {
|
||||
border: none;
|
||||
border-top: 1px solid var(--t-border-default);
|
||||
max-width: 80rem;
|
||||
margin: 2rem auto;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.block-divider[data-style="dots"] {
|
||||
border-top-style: dotted;
|
||||
border-top-width: 3px;
|
||||
}
|
||||
|
||||
.block-divider[data-style="fade"] {
|
||||
border-top: none;
|
||||
height: 1px;
|
||||
background: linear-gradient(
|
||||
to right,
|
||||
transparent,
|
||||
var(--t-border-default) 20%,
|
||||
var(--t-border-default) 80%,
|
||||
transparent
|
||||
);
|
||||
}
|
||||
|
||||
/* ── Button block ── */
|
||||
|
||||
.block-button {
|
||||
max-width: 80rem;
|
||||
margin-inline: auto;
|
||||
padding: 1rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.block-button[data-align="left"] {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.block-button[data-align="right"] {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
/* ── Video embed block ── */
|
||||
|
||||
.video-embed {
|
||||
position: relative;
|
||||
aspect-ratio: 16 / 9;
|
||||
border-radius: var(--t-radius);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.video-embed[data-ratio="4:3"] {
|
||||
aspect-ratio: 4 / 3;
|
||||
}
|
||||
|
||||
.video-embed[data-ratio="1:1"] {
|
||||
aspect-ratio: 1 / 1;
|
||||
}
|
||||
|
||||
.video-embed iframe {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.video-embed-caption {
|
||||
color: var(--t-text-secondary);
|
||||
font-size: var(--t-text-small);
|
||||
text-align: center;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.video-embed-fallback {
|
||||
text-align: center;
|
||||
padding: 2rem 1rem;
|
||||
}
|
||||
|
||||
.video-embed-fallback a {
|
||||
color: var(--t-accent-button);
|
||||
}
|
||||
|
||||
/* ── Announcement bar ── */
|
||||
|
||||
.announcement-bar {
|
||||
|
||||
Reference in New Issue
Block a user