diff --git a/webroot/index.html b/webroot/index.html index e57910a97..7d6a845f2 100644 --- a/webroot/index.html +++ b/webroot/index.html @@ -23,23 +23,14 @@ GW TODO: - remove listeners on unload? - config customizations -mobile yucks: -problems; -- mobile browsers need custom vh calculation due to browser chrome taken into consideration -- mobile chrome softkeyboard changes perceived width of page, alters layout -- chat windwo placementis messedup on orientation changes.. needs new vh. -orientationchange oly happens on mobile. -does orientationchange happen when keyboard appears? -- changing vh after orientation change sometimes yields same value - -possible hacks -- if mobile, don't show chat + chat icon in landscape?.. +- expand user name change text box on focus.chat +- accessilbity */ -
+
@@ -151,7 +142,7 @@ possible hacks
@@ -163,7 +154,7 @@ possible hacks
- + diff --git a/webroot/js/message.js b/webroot/js/message.js index 234a82dda..38b0fae3b 100644 --- a/webroot/js/message.js +++ b/webroot/js/message.js @@ -54,7 +54,6 @@ class Messaging { this.tagMessageFormWarning = document.querySelector("#message-form-warning"); - this.inputChangeUserName = document.querySelector("#username-change-input"); this.btnUpdateUserName = document.querySelector("#button-update-username"); this.btnCancelUpdateUsername = document.querySelector("#button-cancel-change"); @@ -79,8 +78,8 @@ class Messaging { window.onorientationchange = this.handleOrientationChange.bind(this); this.handleOrientationChange(); - this.formMessageInput.addEventListener("focus", this.handleKeyboardAppear.bind(this)); - this.formMessageInput.addEventListener("blur", this.handleKeyboardOut.bind(this)); + // this.formMessageInput.addEventListener("focus", this.handleKeyboardAppear.bind(this)); + // this.formMessageInput.addEventListener("blur", this.handleKeyboardOut.bind(this)); } else { this.tagAppContainer.classList.add("desktop"); } @@ -104,6 +103,7 @@ class Messaging { if (this.chatDisplayed) { this.tagAppContainer.classList.add("chat"); this.tagAppContainer.classList.remove("no-chat"); + setTimeout(() => { jumpToBottom(); } , 50); } else { this.tagAppContainer.classList.add("no-chat"); this.tagAppContainer.classList.remove("chat"); @@ -111,7 +111,6 @@ class Messaging { } handleOrientationChange() { - console.log("====orientation change 123", event, window.screen.orientation, window.orientation, window.matchMedia("(orientation: landscape)")) // mobileVHhack(); // if small landscape, hide chat // var mql = window.matchMedia("(orientation: landscape)"); // what it _was_ @@ -129,14 +128,14 @@ class Messaging { } } - handleKeyboardAppear() { - setTimeout(() => {this.tagAppContainer.classList.add("message-input-focus");}, 50); - mobileVHhack(); - } - handleKeyboardOut() { - setTimeout(() => {this.tagAppContainer.classList.remove("message-input-focus");}, 50); - mobileVHhack(); - } + // handleKeyboardAppear() { + // setTimeout(() => {this.tagAppContainer.classList.add("message-input-focus");}, 50); + // mobileVHhack(); + // } + // handleKeyboardOut() { + // setTimeout(() => {this.tagAppContainer.classList.remove("message-input-focus");}, 50); + // mobileVHhack(); + // } handleChatToggle() { this.chatDisplayed = !this.chatDisplayed; diff --git a/webroot/styles/layout.css b/webroot/styles/layout.css index fa16572a0..5407aff7c 100644 --- a/webroot/styles/layout.css +++ b/webroot/styles/layout.css @@ -142,8 +142,9 @@ header h1 { #video-container { - height: calc(var(--video-container-height) - var(--header-height)); + height: calc(var(--video-container-height)); width: 100%; + margin-top: var(--header-height); } .owncast-video-container { @@ -152,8 +153,6 @@ header h1 { flex-direction: column; justify-content: flex-start; align-items: center; - - } .owncast-video-container .video-js { width: 100%; @@ -214,6 +213,7 @@ header h1 { #messages-container { overflow: auto; padding: 1em 0; + min-height: 50vh; } #message-input-container { width: 100%; @@ -359,7 +359,7 @@ header h1 { .touch-screen #video-container { - height: var(--video-container-height); + margin-top: 0; } .touch-screen .owncast-video-container { height: 100%;