v2.0.14 — ghost + spinner on card move
Moving a card to another bucket took a visible round-trip (PATCH + reloadAll) during which the card sat unchanged in the source bucket, leaving the user wondering if the drop registered. Now every bucket-move path marks the affected cards `.card-moving` as soon as the action fires: 50% opacity, dark scrim and a centred accent-ring spinner. The next renderBoard() rebuilds the DOM so the class comes off automatically — no explicit cleanup needed. Call sites: - drag-drop onto a bucket tile (single + multi-select) - drag onto an existing bucket to nest it (auto-super-bucket create) - context-menu → Bucket → <target> Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
1 parent
8cbec8d601
commit
4baeee159e
6 files changed
+55
-3
No files matched your search
@@ -524,6 +524,36 @@ body.rounded-cards .card-done-badge i { position: static; bottom: auto; right: a
|
||||
animation: card-remove 0.25s ease-in forwards;
|
||||
pointer-events: none;
|
||||
}
|
||||
/* Move-in-flight: card ghosted with a spinner overlay while the
|
||||
* PATCH + reloadAll round-trip completes. The pseudo-elements paint
|
||||
* a dim scrim and a centred spinning ring so the origin bucket
|
||||
* clearly shows the card is "leaving". Removed by the next
|
||||
* renderBoard() since the DOM is rebuilt from scratch. */
|
||||
.board-card.card-moving {
|
||||
opacity: 0.5;
|
||||
pointer-events: none;
|
||||
position: relative;
|
||||
}
|
||||
.board-card.card-moving::before {
|
||||
content: "";
|
||||
position: absolute; inset: 0;
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
z-index: 3;
|
||||
pointer-events: none;
|
||||
}
|
||||
.board-card.card-moving::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 50%; left: 50%;
|
||||
width: 22px; height: 22px;
|
||||
margin: -11px 0 0 -11px;
|
||||
border: 2px solid rgba(255, 255, 255, 0.2);
|
||||
border-top-color: var(--t-accent);
|
||||
border-radius: 50%;
|
||||
animation: spin 0.8s linear infinite;
|
||||
z-index: 4;
|
||||
pointer-events: none;
|
||||
}
|
||||
.box-select {
|
||||
position: absolute; border: 1px solid var(--t-accent); background: rgba(56, 189, 248, 0.08);
|
||||
pointer-events: none; z-index: 10;
|
||||
|
||||
Reference in new issue
Block a user