Fix Tourney Bracket panning for touch devices (#2184)

Co-authored-by: SirzBenjie <[email protected]>
smogon · Nov 15, 2023 · 0b8a9bb · 0b8a9bb
1 parent 21de8d9
commit 0b8a9bb
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 5 deletions.
diff --git a/js/client-chat-tournament.js b/js/client-chat-tournament.js
@@ -60,11 +60,11 @@
 		var innerX = 0;
 		var innerY = 0;
 
-		$element.on('mousedown', function (e) {
+		$element.on('pointerdown', function (e) {
 			innerX = e.pageX + ($element.parent().width() - $element.width() - this.offsetLeft);
 			innerY = e.pageY - this.offsetTop;
 
-			function mouseMoveCallback(e) {
+			function pointerMoveCallback(e) {
 				position.right = innerX - e.pageX;
 				position.top = e.pageY - innerY;
 				delete position.isDefault;
@@ -74,9 +74,9 @@
 					top: position.top
 				});
 			}
-			$(document).on('mousemove', mouseMoveCallback)
-				.one('mouseup', function () {
-					$(document).off('mousemove', mouseMoveCallback);
+			$(document).on('pointermove', pointerMoveCallback)
+				.one('pointerup', function () {
+					$(document).off('pointermove', pointerMoveCallback);
 				});
 		});
 	}

diff --git a/style/client.css b/style/client.css
@@ -1219,22 +1219,27 @@ a.ilink.yours {
 	overflow: hidden;
 	transition: max-height 0.15s;
 	-webkit-transition: max-height 0.15s;
+	touch-action: none;
 }
 
 .tournament-bracket {
 	max-height: 200px;
 	padding: 10px;
 	overflow: hidden;
 	font-size: 8pt;
+	touch-action: none;
 }
+
 .tournament-bracket-overflowing {
 	height: 200px;
 	padding: 0;
 	position: relative;
 	left: 0;
 	top: 0;
+	touch-action: none;
 }
 
+
 .tournament-popout-link {
 	position: absolute;
 	bottom: 0.5em;

diff --git a/style/client2.css b/style/client2.css
@@ -1147,20 +1147,23 @@ a.ilink.yours {
 	overflow: hidden;
 	transition: max-height 0.15s;
 	-webkit-transition: max-height 0.15s;
+	touch-action: none;
 }
 
 .tournament-bracket {
 	max-height: 200px;
 	padding: 10px;
 	overflow: hidden;
 	font-size: 8pt;
+	touch-action: none;
 }
 .tournament-bracket-overflowing {
 	height: 200px;
 	padding: 0;
 	position: relative;
 	left: 0;
 	top: 0;
+	touch-action: none;
 }
 
 .tournament-popout-link {