diff --git a/adapters/bulma.css b/adapters/bulma.css index 2c7a4de..d2bde8e 100644 --- a/adapters/bulma.css +++ b/adapters/bulma.css @@ -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); } diff --git a/weirsoe-theme.css b/weirsoe-theme.css index 28441b4..9135ace 100644 --- a/weirsoe-theme.css +++ b/weirsoe-theme.css @@ -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; diff --git a/weirsoe-ui.js b/weirsoe-ui.js index f7a71b4..9a74b26 100644 --- a/weirsoe-ui.js +++ b/weirsoe-ui.js @@ -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();