Add column editing in dashboard edit mode
Per-column header bar with size dropdown (small/full), left/right
move arrows, and delete. New "+ Add column" button at the bottom of
the page-columns container. Each action POSTs to a column endpoint
and reloads.
Backend endpoints:
- POST /edit/api/pages/{slug}/columns — add (form: size)
- POST /edit/api/pages/{slug}/columns/{col}/delete
- POST /edit/api/pages/{slug}/columns/{col}/move?dir=left|right
- POST /edit/api/pages/{slug}/columns/{col}/size — set size
All go through configEditor's yaml.Node tree so comments and other
config survive.
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
co-authored by
Claude Opus 4.7
parent
4b8a34a2ae
commit
8ba6dcb704
@@ -477,3 +477,83 @@ textarea.edit-input {
|
||||
.edit-input-invalid {
|
||||
border-color: var(--color-negative);
|
||||
}
|
||||
|
||||
/* ---------- Column controls ---------- */
|
||||
|
||||
.edit-column-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
margin-bottom: 0.5rem;
|
||||
padding: 0.35rem 0.5rem;
|
||||
background: var(--color-popover-background);
|
||||
border: 1px solid var(--color-popover-border);
|
||||
border-radius: 4px;
|
||||
font-size: var(--font-size-h5);
|
||||
}
|
||||
|
||||
.edit-column-label {
|
||||
color: var(--color-text-subdue);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.edit-column-spacer {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.edit-column-size {
|
||||
background: var(--color-widget-background);
|
||||
border: 1px solid var(--color-widget-content-border);
|
||||
border-radius: 3px;
|
||||
color: var(--color-text-base);
|
||||
font: inherit;
|
||||
font-size: var(--font-size-h6);
|
||||
padding: 0.15rem 0.3rem;
|
||||
}
|
||||
|
||||
.edit-column-move,
|
||||
.edit-column-delete {
|
||||
background: transparent;
|
||||
border: 1px solid var(--color-popover-border);
|
||||
color: var(--color-text-subdue);
|
||||
border-radius: 3px;
|
||||
padding: 0.15rem 0.5rem;
|
||||
cursor: pointer;
|
||||
font: inherit;
|
||||
font-size: var(--font-size-h6);
|
||||
}
|
||||
|
||||
.edit-column-move:hover,
|
||||
.edit-column-delete:hover {
|
||||
color: var(--color-primary);
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
|
||||
.edit-column-move:disabled,
|
||||
.edit-column-delete:disabled {
|
||||
opacity: 0.4;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.edit-column-delete:hover:not(:disabled) {
|
||||
color: var(--color-negative);
|
||||
border-color: var(--color-negative);
|
||||
}
|
||||
|
||||
.edit-add-column {
|
||||
display: block;
|
||||
margin: var(--widget-gap) auto 0;
|
||||
padding: 0.6rem 1.5rem;
|
||||
background: transparent;
|
||||
border: 1px dashed var(--color-text-subdue);
|
||||
border-radius: var(--border-radius);
|
||||
color: var(--color-text-subdue);
|
||||
cursor: pointer;
|
||||
font: inherit;
|
||||
font-size: var(--font-size-h4);
|
||||
}
|
||||
|
||||
.edit-add-column:hover {
|
||||
border-color: var(--color-primary);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user