Fixed moderation panel appearance on touch devices (#285)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
FritzAndFriends · Nov 7, 2023 · 9197e98 · 9197e98
1 parent 3b12623
commit 9197e98
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 10 deletions.
diff --git a/src/TagzApp.Web/Pages/Moderation.cshtml b/src/TagzApp.Web/Pages/Moderation.cshtml
@@ -43,13 +43,13 @@
 </div>
 <div class="row" style="padding: 2px 10px!important">
 
-	<div id="taggedContent" class="">
+	<div id="pauseUpdates">
+		<i id="pauseButton" class="bi bi-pause-circle-fill text-info"></i>
+		<i id="pauseButton-bg" class="bi bi-circle-fill"></i>
+	</div>
 
+	<div id="taggedContent" class="">
 
-		<div id="pauseUpdates">
-			<i id="pauseButton" class="bi bi-pause-circle-fill text-info"></i>
-			<i id="pauseButton-bg" class="bi bi-circle-fill"></i>
-		</div>
 
 	</div>
 

diff --git a/src/TagzApp.Web/wwwroot/css/site.css b/src/TagzApp.Web/wwwroot/css/site.css
@@ -580,9 +580,9 @@ a {
 
 /** Pause button on waterfall */
 #pauseUpdates {
-	position: fixed;
+	position: absolute;
 	left: 1em;
-	bottom: 1em;
+	top: calc(100dvh - 6em);
 	cursor: pointer;
 	z-index: 50;
 	opacity: 0.6;
@@ -593,14 +593,16 @@ a {
 }
 
 #pauseButton {
+	position: absolute;
+	left: 0;
 	font-size: 4rem;
 	z-index: 1;
 }
 
 #pauseButton-bg {
-	font-size: 4rem;
-	z-index: -1;
 	position: absolute;
 	left: 0;
+	font-size: 4rem;
+	z-index: -1;
 	color: #fff;
 }
diff --git a/src/TagzApp.Web/wwwroot/js/site.js b/src/TagzApp.Web/wwwroot/js/site.js
@@ -149,6 +149,9 @@
 		}
 
 		if (onclick) {
+			newMessage.addEventListener('touchend', (ev) => {
+				window.setTimeout(() => onclick(ev), 100);
+			});
 		} else {
 			newMessage.addEventListener('click', function (ev) {
 				var el = ev.target.closest('article');
@@ -440,7 +443,14 @@
 
 	function showModerationPanel(ev) {
 		var hovered = ev.target.closest('article');
-		if (hovered.querySelector('#moderationAction')) return;
+
+		// Remove all moderationAction elements inside of articles
+		var panels = document.querySelectorAll('article #moderationAction');
+		panels.forEach(function (panel) {
+			panel.remove();
+		});
+
+		if (hovered == null || hovered.querySelector('#moderationAction')) return;
 
 		// pause updates
 		window.clearTimeout(pauseTimeout);