calc resize on android on message field focus

5 years ago · 567729f6f8
3 changed files with 16 additions and 3 deletions
--- a/webroot/index.html
+++ b/webroot/index.html
@ -1,3 +1,4 @@
				@@ -1,3 +1,4 @@
+<html>
 <head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
@ -15,7 +16,14 @@
				@@ -15,7 +16,14 @@
  <script src="vendor/autolink.js"></script>
  <link href="./styles/layout.css" rel="stylesheet" />
 </head>
-
+<script>
+/* 
+GW TODO:
+- off line/ video done mode.
+- remove listeners on unload?
+
+*/
+</script>
 <body class="bg-gray-300 text-gray-800">
  <div id="app-container" class="flex no-chat">
    <header class="flex border-b border-gray-900 border-solid shadow-md">
--- a/webroot/js/message.js
+++ b/webroot/js/message.js
@ -105,9 +105,11 @@ class Messaging {
				@@ -105,9 +105,11 @@ class Messaging {

 	handleKeyboardAppear() {
 		this.tagAppContainer.classList.add("android-message-focus");
+		setVHvar();
 	}
 	handleKeyboardOut() {
 		this.tagAppContainer.classList.remove("android-message-focus");
+		setVHvar();
 	}

 	handleChatToggle() {
--- a/webroot/js/utils.js
+++ b/webroot/js/utils.js
@ -39,9 +39,10 @@ function uuidv4() {
				@@ -39,9 +39,10 @@ function uuidv4() {
 }

 function setVHvar() {
-  let vh = window.innerHeight * 0.01;
+  var vh = window.innerHeight * 0.01;
  // Then we set the value in the --vh custom property to the root of the document
  document.documentElement.style.setProperty('--vh', `${vh}px`);
+  console.log("== new vh", vh)
 }
 function mobileVHhack() {
  setVHvar();
@ -52,4 +53,6 @@ function isAndroidMobile() {
				@@ -52,4 +53,6 @@ function isAndroidMobile() {
  var isAndroid = navigator.userAgent.toLowerCase().indexOf("android") > -1; 
  //&& ua.indexOf("mobile");
  return isAndroid;
-}
+}
+
+