fix alert placement on iPad 2

diff --git a/public/alert.css b/public/alert.css
index 26ab33900ebffd6a5a9a80708bee1051de1abc1d..656de4501c72c360748bf1b768535b881dd35366 100644 (file)
--- a/public/alert.css
+++ b/public/alert.css
@@ -12,7 +12,7 @@
     -webkit-justify-content:center;
     justify-content:center;
     line-height:1.5em;
-    text-align:center
+    text-align:center;
 }
 
 .alert-outer {
@@ -31,6 +31,15 @@
     padding:4px;
 }
 
+.alert.on-ipad.prompt {
+    justify-content:flex-start;
+    position:absolute;
+}
+
+.alert.on-ipad.prompt .alert-outer {
+    margin-top:1em;
+}
+
 .alert-content {
     padding:1ex
 }

diff --git a/public/alert.js b/public/alert.js
index 2dc78d62a280c5e169bef7046250b89385872a13..6675540f5ff65d96a4d89bb85657dee9d464b0d5 100644 (file)
--- a/public/alert.js
+++ b/public/alert.js
@@ -57,6 +57,11 @@
         divAlert.className = "alert";
         divAlert.style.display = "none";
 
+        // eslint-disable-next-line require-unicode-regexp
+        if ((/iPad|iPhone|iPod/g).test(navigator.userAgent)) {
+            divAlert.classList.add("on-ipad");
+        }
+
         divAlertContent = document.createElement("div");
         divAlertContent.className = "alert-content";
         divAlertContent.style.whiteSpace = "pre-wrap";
@@ -114,6 +119,8 @@
             prepare();
         }
 
+        divAlert.classList.remove("prompt");
+
         divAlertContent.textContent = msg;
         divAlertInput.style.display = "none";
         divAlertConfirm.style.display = "none";
@@ -130,6 +137,8 @@
             prepare();
         }
 
+        divAlert.classList.add("prompt");
+
         divAlertContent.textContent = msg;
         divAlertInput.style.display = "";
         alertInput.value = defaultText || "";
@@ -139,12 +148,9 @@
         divAlertCallback = callback;
         divAlert.style.display = "";
 
-        // eslint-disable-next-line require-unicode-regexp
-        if (!(/iPad|iPhone|iPod/g).test(navigator.userAgent)) {
-            alertInput.focus();
-            alertInput.setSelectionRange(0, alertInput.value.length);
-            alertInput.select();
-        }
+        alertInput.focus();
+        alertInput.setSelectionRange(0, alertInput.value.length);
+        alertInput.select();
     };
 
     global.myConfirm = function (msg, callbackYes, callbackNo) {
@@ -152,6 +158,8 @@
             prepare();
         }
 
+        divAlert.classList.remove("prompt");
+
         divAlertContent.textContent = msg;
         divAlertInput.style.display = "none";
         divAlertConfirm.style.display = "";

diff --git a/public/trivabble.js b/public/trivabble.js
index a10be57229e8abe68085498209ee39484c019bf8..90e9dcafeea092b279ee57db962bc90c5b9086e3 100644 (file)
--- a/public/trivabble.js
+++ b/public/trivabble.js
@@ -1436,8 +1436,6 @@
     }
 
     function initChat() {
-        chatMessages.style.width = chatMessages.offsetWidth + "px";
-
         const btn = document.getElementById("chat-btn");
 
         chatTextarea.onmouseup = function () {