agw/Weircon-wind
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

No card flicker during sort: body.wt-sorting freezes item transitions; hover lift gated behind @media (hover:hover)

Browse Source 
Touch no longer triggers the hover lift (which flickered while dragging), and
transitions/hover-transform on sortable items are frozen during an active drag.
This commit is contained in:
Asger Geel Weirsøe
2026-06-14 19:25:00 +02:00
parent b70a65d39e
commit 437b4fadd2
3 changed files with 17 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
adapters/bulma.css
Vendored
+6 -4
View File
@@ -45,10 +45,12 @@ a:hover { color: var(--color-accent-2); }
color: var(--color-text);
transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}
.box:hover {
border-color: color-mix(in srgb, var(--color-accent) 40%, var(--color-border));
box-shadow: var(--wt-shadow-hover);
transform: translateY(-2px);
@media (hover: hover) {
.box:hover {
border-color: color-mix(in srgb, var(--color-accent) 40%, var(--color-border));
box-shadow: var(--wt-shadow-hover);
transform: translateY(-2px);
}
}
.box .box { box-shadow: none; transform: none; }
.notification { border-radius: var(--wt-radius); border: 1px solid var(--color-border); }
weirsoe-theme.css
+7 -1
View File
@@ -156,7 +156,9 @@ body::before {
padding: 1.25rem;
transition: border-color 0.2s, transform 0.16s, box-shadow 0.16s;
}
.wt-card--hover:hover { border-color: color-mix(in srgb, var(--color-accent) 50%, transparent); }
@media (hover: hover) {
.wt-card--hover:hover { border-color: color-mix(in srgb, var(--color-accent) 50%, transparent); }
}
.wt-card--raised { background: var(--color-surface); box-shadow: var(--wt-shadow); }
.wt-card--raised.wt-card--hover:hover { transform: translateY(-2px); box-shadow: var(--wt-shadow-hover); }
.wt-card-date { font-size: 0.75rem; color: var(--color-muted); }
@@ -174,6 +176,10 @@ body::before {
.drag-handle:active { cursor: grabbing; }
[data-wt-sortable] > [data-item-id] { cursor: default; }
.wt-dragging { opacity: 0.4; }
/* While actively sorting, freeze transitions/hover on the items so cards don't
flicker as the finger/pointer passes over them. */
.wt-sorting [data-item-id], .wt-sorting [data-item-id] * { transition: none !important; }
.wt-sorting [data-item-id]:hover { transform: none !important; }
/* The floating clone that follows the finger on touch (the "popped-out" card). */
.wt-drag-clone {
position: fixed; left: 0; top: 0; z-index: 9999;
weirsoe-ui.js
+4
View File
@@ -78,11 +78,13 @@
el.addEventListener('dragstart', function (e) {
dragEl = el;
el.classList.add('wt-dragging');
document.body.classList.add('wt-sorting');
e.dataTransfer.effectAllowed = 'move';
cleanDragImage(el, e);
});
el.addEventListener('dragend', function () {
el.classList.remove('wt-dragging');
document.body.classList.remove('wt-sorting');
dragEl = null;
persist(container);
});
@@ -129,6 +131,7 @@
if (holdTimer) { clearTimeout(holdTimer); holdTimer = null; }
if (clone && clone.parentNode) clone.parentNode.removeChild(clone);
clone = null;
document.body.classList.remove('wt-sorting');
if (lifted && touchEl) { touchEl.classList.remove('wt-dragging'); persist(container); }
lifted = false; touchEl = null; stopScroll();
}
@@ -142,6 +145,7 @@
holdTimer = setTimeout(function () {
lifted = true; touchEl = el;
el.classList.add('wt-dragging');
document.body.classList.add('wt-sorting');
makeClone(el, t.clientX, t.clientY);
if (navigator.vibrate) navigator.vibrate(12);
startScroll();