Navy.gif/owncast
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

take out unused event listeners; layout fixes

Browse Source
This commit is contained in:
Ginger Wong 2020-06-17 10:39:13 -07:00
parent cbe37d68ce
commit aad1a407b8
3 changed files with 20 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
webroot/index.html
View File

@ -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
*/
</script>
<body class="bg-gray-300 text-gray-800">
<div id="app-container" class="flex no-chat">
<main id="app-container" class="flex no-chat">
<div id="top-content">
<header class="flex border-b border-gray-900 border-solid shadow-md">
@ -151,7 +142,7 @@ possible hacks
<button
id="button-submit-message"
class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-1 px-2 rounded"
> Send
> Chat
</button>
</div>
@ -163,7 +154,7 @@ possible hacks
</div>
</div>
</main>
<script src="js/usercolors.js"></script>
<script src="js/config.js"></script>

23
webroot/js/message.js
View File

@ -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;

8
webroot/styles/layout.css
View File

@ -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%;