diff --git a/webroot/js/message.js b/webroot/js/message.js index 927f8c043..09e1164bb 100644 --- a/webroot/js/message.js +++ b/webroot/js/message.js @@ -78,6 +78,10 @@ class Messaging { this.inputChangeUserName.addEventListener("keydown", this.handleUsernameKeydown.bind(this)); this.formMessageInput.addEventListener("keydown", this.handleMessageInputKeydown.bind(this)); this.btnSubmitMessage.addEventListener("click", this.handleSubmitChatButton.bind(this)); + if (isAndroidMobile && window.screen.width < 860) { + this.formMessageInput.addEventListener("focus", this.handleKeyboardAppear.bind(this)); + this.formMessageInput.addEventListener("blur", this.handleKeyboardOut.bind(this)); + } this.initLocalStates(); } @@ -99,6 +103,13 @@ class Messaging { this.tagAppContainer.className = this.chatDisplayed ? "flex" : "flex no-chat"; } + handleKeyboardAppear() { + this.tagAppContainer.classList.add("android-message-focus"); + } + handleKeyboardOut() { + this.tagAppContainer.classList.remove("android-message-focus"); + } + handleChatToggle() { this.chatDisplayed = !this.chatDisplayed; if (this.chatDisplayed) { diff --git a/webroot/js/utils.js b/webroot/js/utils.js index fe9dc8e87..7eea4bfc0 100644 --- a/webroot/js/utils.js +++ b/webroot/js/utils.js @@ -46,4 +46,10 @@ function setVHvar() { function mobileVHhack() { setVHvar(); window.addEventListener("orientationchange", setVHvar); +} + +function isAndroidMobile() { + var isAndroid = navigator.userAgent.toLowerCase().indexOf("android") > -1; + //&& ua.indexOf("mobile"); + return isAndroid; } \ No newline at end of file diff --git a/webroot/styles/layout.css b/webroot/styles/layout.css index 261d75e92..784737db1 100644 --- a/webroot/styles/layout.css +++ b/webroot/styles/layout.css @@ -277,6 +277,7 @@ header h1 { #main-content-container { flex-direction: column; justify-content: space-between; + height: calc((var(--vh, 1vh) * 100) - var(--header-height)); } .main-cols { @@ -319,4 +320,43 @@ header h1 { .no-chat #user-content { display: block; } +} + + +.android-message-focus #main-content-container { + flex-direction: column; + justify-content: space-between; + height: calc((var(--vh, 1vh) * 100) - var(--header-height)); + +} + +.android-message-focus .main-cols { + width: 100vw; +} +.android-message-focus .left-col { + flex-direction: column; + justify-content: stretch; + z-index: 100; +} +.android-message-focus .right-col { + overflow: hidden; +} + +.android-message-focus #user-info { + width: 9em; +} +.android-message-focus #user-content { + display: none; +} +.android-message-focus #chat-container { + width: 100%; + height: 100%; + position: relative; + height: auto; +} + +.android-message-focus .owncast-video-container { + height: 40vh; + height: calc((var(--vh, 1vh) * 40)); + min-height: 300px; } \ No newline at end of file