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:
uhlwoogi
2026-04-30 17:16:08 +00:00
co-authored by Claude Opus 4.7
parent 4b8a34a2ae
commit 8ba6dcb704
4 changed files with 390 additions and 0 deletions
+80
View File
@@ -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);
}