pimhwang
/
owncast
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

take out unused event listeners; layout fixes

pull/5/head
Ginger Wong 5 years ago
parent
cbe37d68ce
commit
aad1a407b8
3 changed files with 20 additions and 30 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 19
      webroot/index.html
  2. 23
      webroot/js/message.js
  3. 8
      webroot/styles/layout.css

19
webroot/index.html
Unescape View File

@ -23,23 +23,14 @@ GW TODO: @@ -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 @@ -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 @@ -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
Unescape View File

@ -54,7 +54,6 @@ class Messaging { @@ -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 { @@ -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 { @@ -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 { @@ -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 { @@ -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
Unescape View File

@ -142,8 +142,9 @@ header h1 { @@ -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 { @@ -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 { @@ -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 { @@ -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%;

Write Preview
Loading…
Cancel
Save