Fix structure tree drag feedback: stable ➕ rows, on-row child drops
Rework the site structure tree's drag-and-drop to match Sortable's native
model instead of mid-drag drop zones:
- Drop the dashed empty-list drop zones that appeared on drag start
(flicker, space reservation, and mis-targeted drops: the last item's
child zone sat exactly where 'end of parent list' was).
- Every non-empty list (and the root) ends with a non-draggable ➕ footer
row (vuedraggable #footer slot): click to start a new page at that
level, and while dragging it is the 'end of this list' drop target.
It renders last even mid-drag via flex order, since Sortable appends
end-of-list previews after it in the DOM.
- Dropping ON the lower part of a row makes the page that row's first
child: the child list's container invisibly overlaps its own row's
bottom (negative margin + equal padding, no layout effect) and becomes
hit-testable only while dragging. A row's exposed top strip remains
the 'sibling before' target. Leaf rows work too, creating a sublist.
- Indentation is structural (each nested list margin-indents itself), so
a dragged row previews its whole subtree at the target list's depth.
Rows get a little vertical padding to widen the drop zones.
This commit is contained in:
@@ -191,14 +191,6 @@ body.editing #sidebar {
|
||||
}
|
||||
}
|
||||
|
||||
/* Site structure tree: while dragging, empty child lists appear as drop
|
||||
zones so a page can be moved under a childless page. */
|
||||
body.tree-dragging .treelist:empty {
|
||||
min-height: 1.2rem;
|
||||
outline: 1px dashed var(--line);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/* The banner's own pen: opens the site editor (banner + structure).
|
||||
Qualified with `button` to beat the later .edit-link rule's left offset
|
||||
(both classes apply to the same element). */
|
||||
@@ -211,15 +203,10 @@ button.banner-edit-link {
|
||||
font: inherit;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
opacity: 0.55;
|
||||
background: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.banner-edit-link:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
#sidebar {
|
||||
grid-column: 1;
|
||||
/* Pinned to the page's left edge (not the article's) and kept in view
|
||||
|
||||
Reference in New Issue
Block a user