diff --git a/webroot/js/message.js b/webroot/js/message.js index 5281be2f3..29b5a2ad5 100644 --- a/webroot/js/message.js +++ b/webroot/js/message.js @@ -72,7 +72,7 @@ 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) { + if (hasTouchScreen) { this.formMessageInput.addEventListener("focus", this.handleKeyboardAppear.bind(this)); this.formMessageInput.addEventListener("blur", this.handleKeyboardOut.bind(this)); } @@ -98,11 +98,11 @@ class Messaging { } handleKeyboardAppear() { - this.tagAppContainer.classList.add("android-message-focus"); + setTimeout(() => {this.tagAppContainer.classList.add("message-input-focus");}, 50); mobileVHhack(); } handleKeyboardOut() { - this.tagAppContainer.classList.remove("android-message-focus"); + setTimeout(() => {this.tagAppContainer.classList.remove("message-input-focus");}, 50); mobileVHhack(); } diff --git a/webroot/styles/layout.css b/webroot/styles/layout.css index 02ddeadcb..6292a929c 100644 --- a/webroot/styles/layout.css +++ b/webroot/styles/layout.css @@ -329,39 +329,40 @@ header h1 { } -.android-message-focus #main-content-container { +.message-input-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 { +.message-input-focus .main-cols { width: 100vw; } -.android-message-focus .left-col { +.message-input-focus .left-col { flex-direction: column; justify-content: stretch; z-index: 100; } -.android-message-focus .right-col { +.message-input-focus .right-col { overflow: hidden; } -.android-message-focus #user-info { +.message-input-focus #user-info { width: 9em; } -.android-message-focus #user-content { +.message-input-focus #user-content { display: none; } -.android-message-focus #chat-container { +.message-input-focus #chat-container { width: 100%; height: 100%; position: relative; height: auto; + z-index: 999; } -.android-message-focus .owncast-video-container { +.message-input-focus .owncast-video-container { height: 40vh; height: calc((var(--vh, 1vh) * 40)); min-height: 300px;