From 0af67c0cdcef92f99c5e182d095356245429d288 Mon Sep 17 00:00:00 2001 From: Ginger Wong Date: Sat, 18 Jul 2020 17:15:52 -0700 Subject: [PATCH 1/5] simplified layout updates based on only media queries --- webroot/index.html | 8 +- webroot/js/app.js | 2 +- webroot/js/message.js | 19 +++-- webroot/styles/layout.css | 167 ++++++++++++-------------------------- 4 files changed, 66 insertions(+), 130 deletions(-) diff --git a/webroot/index.html b/webroot/index.html index fb9726a81..99debcf17 100644 --- a/webroot/index.html +++ b/webroot/index.html @@ -84,7 +84,7 @@ -
+
- +
-
+
diff --git a/webroot/js/app.js b/webroot/js/app.js index 04b97512b..9bc6df945 100644 --- a/webroot/js/app.js +++ b/webroot/js/app.js @@ -46,7 +46,7 @@ class Owncast { el: '#app-container', data: { isOnline: false, - layout: hasTouchScreen() ? 'touch' : 'desktop', + // layout: hasTouchScreen() ? 'touch' : 'desktop', messages: [], overallMaxViewerCount: 0, sessionMaxViewerCount: 0, diff --git a/webroot/js/message.js b/webroot/js/message.js index 698deb685..23b4a9ac3 100644 --- a/webroot/js/message.js +++ b/webroot/js/message.js @@ -73,14 +73,14 @@ class MessagingInterface { this.initLocalStates(); - if (hasTouchScreen()) { - this.scrollableMessagesContainer = document.body; - this.tagAppContainer.classList.add('touch-screen'); - window.onorientationchange = this.handleOrientationChange.bind(this); - this.handleOrientationChange(); - } else { - this.tagAppContainer.classList.add('desktop'); - } + // if (hasTouchScreen()) { + // this.scrollableMessagesContainer = document.body; + // this.tagAppContainer.classList.add('touch-screen'); + // window.onorientationchange = this.handleOrientationChange.bind(this); + // this.handleOrientationChange(); + // } else { + // this.tagAppContainer.classList.add('desktop'); + // } } setWebsocket(socket) { @@ -113,7 +113,7 @@ class MessagingInterface { this.tagAppContainer.classList.remove('chat'); } } - +/* handleOrientationChange() { var isPortrait = Math.abs(window.orientation % 180) === 0; if(!isPortrait) { @@ -128,6 +128,7 @@ class MessagingInterface { this.tagAppContainer.classList.remove('landscape'); } } + */ handleChatToggle() { this.chatDisplayed = !this.chatDisplayed; diff --git a/webroot/styles/layout.css b/webroot/styles/layout.css index 91c6bd63a..379c3c46f 100644 --- a/webroot/styles/layout.css +++ b/webroot/styles/layout.css @@ -426,83 +426,6 @@ h2 { /* ************************************************8 */ -.landscape #chat-toggle { - display: none; -} - -/* ************************************************8 */ -/* ************************************************8 */ - -.touch-screen header { - position: relative; -} -.touch-screen #top-content { - position: fixed; - left: 0; - top: 0; - width: 100%; - z-index: 10; -} - - -.touch-screen .user-content { - flex-direction: column; - align-content: center; -} -.touch-screen .user-image { - margin: auto; -} - - -.touch-screen #stream-info { - height: 2.5em; - overflow: hidden; -} - -.touch-screen #chat-container-wrap { - display: flex; - align-items: flex-end; - width: 100%; - height: auto; - flex-direction: column; - margin-top: calc(var(--header-height) + var(--video-container-height) + 2.5em); -} -.touch-screen #chat-container { - height: auto; - position: relative; - right: unset; - top: unset; - width: 100%; - z-index: 1; -} -.touch-screen.chat #video-container, -.touch-screen.chat #stream-info, -.touch-screen.chat #user-content { - width: 100%; -} - - -.touch-screen #video-container { - margin-top: 0; -} -.touch-screen .owncast-video-container { - height: 100%; -} - -.touch-screen #user-content-touch { - display: none; -} -.touch-screen #chat-container { - display: block; -} -.touch-screen.no-chat #user-content-touch { - display: block; -} -.touch-screen.no-chat #chat-container { - display: none; -} - -/* ************************************************8 */ @media screen and (max-width: 860px) { :root { @@ -518,31 +441,8 @@ h2 { @media screen and (max-width: 640px ) { :root { - --video-container-height: 36vh; + --right-col-width: 0; } - - .desktop { - --video-container-height: 50vh; - } - .desktop #chat-container { - height: auto; - position: relative; - right: unset; - top: unset; - width: 100%; - z-index: 1; - } - .desktop.chat #video-container, - .desktop.chat #stream-info, - .desktop.chat #user-content { - width: 100%; - } - .desktop #footer, - .desktop.chat #user-content { - display: none; - } - - #logo-container { display: none; } @@ -552,29 +452,64 @@ h2 { #user-options-container { max-width: 41%; } -} -@media screen and (orientation: landscape) and (min-width: 1024px) { - :root { - --video-container-height: 65vh; + /* single col */ + #chat-container { + width: 100%; + position: relative; + min-height: calc(100vh - var(--header-height)); } -} - -@media screen and (orientation: landscape) and (max-width: 1024px) { - :root .landscape { - --video-container-height: 75vh; + + #user-content { + width: 100%; } - .touch-screen.landscape #chat-container-wrap { - margin-top: calc(var(--header-height) + var(--video-container-height)); + #stream-info { + width: 100%; } - .touch-screen.landscape .user-content { - display: block; + #video-container { + width: 100%; } - .touch-screen.landscape #chat-container { + .chat #video-container { + width: 100%; + } + .chat #user-content { display: none; } - .touch-screen.landscape #chat-toggle { + .chat footer { display: none; } + +} +@media (min-height: 861px) { + main { + position: fixed; + z-index: 9; + width: 100%; + } + #user-content { + margin-top: calc(var(--video-container-height) + var(--header-height) + 2em) + } +} + + + + + + + +@media screen and (max-height: 860px ) { + #video-container { + height: 52vw; + } + .user-content { + flex-direction: column; + } + + @media screen and (max-height: 640px ) { + #video-container { + height: 75vh; + } + } + } From e12de3215f5643f52a2fa29839517c745938fd65 Mon Sep 17 00:00:00 2001 From: Ginger Wong Date: Sat, 18 Jul 2020 17:17:10 -0700 Subject: [PATCH 2/5] cleanup --- webroot/js/app.js | 1 - webroot/js/message.js | 26 +------------------------- 2 files changed, 1 insertion(+), 26 deletions(-) diff --git a/webroot/js/app.js b/webroot/js/app.js index 9bc6df945..3bde2eef5 100644 --- a/webroot/js/app.js +++ b/webroot/js/app.js @@ -46,7 +46,6 @@ class Owncast { el: '#app-container', data: { isOnline: false, - // layout: hasTouchScreen() ? 'touch' : 'desktop', messages: [], overallMaxViewerCount: 0, sessionMaxViewerCount: 0, diff --git a/webroot/js/message.js b/webroot/js/message.js index 23b4a9ac3..00ee65224 100644 --- a/webroot/js/message.js +++ b/webroot/js/message.js @@ -72,15 +72,6 @@ class MessagingInterface { this.btnSubmitMessage.addEventListener('click', this.handleSubmitChatButton.bind(this)); this.initLocalStates(); - - // if (hasTouchScreen()) { - // this.scrollableMessagesContainer = document.body; - // this.tagAppContainer.classList.add('touch-screen'); - // window.onorientationchange = this.handleOrientationChange.bind(this); - // this.handleOrientationChange(); - // } else { - // this.tagAppContainer.classList.add('desktop'); - // } } setWebsocket(socket) { @@ -113,22 +104,7 @@ class MessagingInterface { this.tagAppContainer.classList.remove('chat'); } } -/* - handleOrientationChange() { - var isPortrait = Math.abs(window.orientation % 180) === 0; - if(!isPortrait) { - if (document.body.clientWidth < 1024) { - this.tagAppContainer.classList.add('no-chat'); - this.tagAppContainer.classList.add('landscape'); - } - } else { - if (this.chatDisplayed) { - this.tagAppContainer.classList.remove('no-chat'); - } - this.tagAppContainer.classList.remove('landscape'); - } - } - */ + handleChatToggle() { this.chatDisplayed = !this.chatDisplayed; From 38a279485b0aea1c23a36a5ea24bd67a01dde323 Mon Sep 17 00:00:00 2001 From: Ginger Wong Date: Sat, 18 Jul 2020 17:18:58 -0700 Subject: [PATCH 3/5] disable click events on video container when offilne --- webroot/styles/layout.css | 2 ++ 1 file changed, 2 insertions(+) diff --git a/webroot/styles/layout.css b/webroot/styles/layout.css index 379c3c46f..b8a5dadb4 100644 --- a/webroot/styles/layout.css +++ b/webroot/styles/layout.css @@ -323,9 +323,11 @@ h2 { #video { transition: opacity .5s; opacity: 0; + pointer-events: none; } .online #video { opacity: 1; + pointer-events: auto; } From d775924c595211d1ab043745866d18d78a53c6b6 Mon Sep 17 00:00:00 2001 From: Ginger Wong Date: Sat, 18 Jul 2020 17:44:18 -0700 Subject: [PATCH 4/5] barebones noscript layout --- webroot/index.html | 31 ++++++++++++++++++++++++++++--- webroot/styles/layout.css | 2 +- 2 files changed, 29 insertions(+), 4 deletions(-) diff --git a/webroot/index.html b/webroot/index.html index 99debcf17..048c63552 100644 --- a/webroot/index.html +++ b/webroot/index.html @@ -15,8 +15,7 @@ - -
+

@@ -165,7 +164,6 @@

- @@ -179,5 +177,32 @@ app.init(); })(); + + \ No newline at end of file diff --git a/webroot/styles/layout.css b/webroot/styles/layout.css index b8a5dadb4..4e91fd515 100644 --- a/webroot/styles/layout.css +++ b/webroot/styles/layout.css @@ -11,10 +11,10 @@ body { font-size: 14px; } - a:hover { text-decoration: underline; } +/* vuejs attribute to hide things before content ready */ [v-cloak] { visibility: hidden; } ::-webkit-scrollbar { From fdce8585d52b9ba583b08373724de8a2f838e7e9 Mon Sep 17 00:00:00 2001 From: Ginger Wong Date: Sun, 19 Jul 2020 15:12:57 -0700 Subject: [PATCH 5/5] css tweaks for mobile mode; reintroduce mobile styles and hacks --- webroot/js/message.js | 7 ++++++- webroot/js/utils.js | 6 ++++++ webroot/styles/layout.css | 33 +++++++++++++++++---------------- 3 files changed, 29 insertions(+), 17 deletions(-) diff --git a/webroot/js/message.js b/webroot/js/message.js index 00ee65224..8d36188f6 100644 --- a/webroot/js/message.js +++ b/webroot/js/message.js @@ -72,6 +72,12 @@ class MessagingInterface { this.btnSubmitMessage.addEventListener('click', this.handleSubmitChatButton.bind(this)); this.initLocalStates(); + + if (hasTouchScreen()) { + setVHvar(); + window.addEventListener("orientationchange", setVHvar); + this.tagAppContainer.classList.add('touch-screen'); + } } setWebsocket(socket) { @@ -225,7 +231,6 @@ class MessagingInterface { this.formMessageInput.disabled = true; this.formMessageInput.placeholder = "Chat is offline." } - // also show "disabled" text/message somewhere. } enableChat() { if (this.formMessageInput) { diff --git a/webroot/js/utils.js b/webroot/js/utils.js index 103700cee..15cb657ac 100644 --- a/webroot/js/utils.js +++ b/webroot/js/utils.js @@ -141,3 +141,9 @@ function generateUsername() { return `User ${(Math.floor(Math.random() * 42) + 1)}`; } +function setVHvar() { + var vh = window.innerHeight * 0.01; + // Then we set the value in the --vh custom property to the root of the document + document.documentElement.style.setProperty('--vh', `${vh}px`); + console.log("== new vh", vh) +} diff --git a/webroot/styles/layout.css b/webroot/styles/layout.css index 4e91fd515..58a8df08a 100644 --- a/webroot/styles/layout.css +++ b/webroot/styles/layout.css @@ -366,6 +366,9 @@ h2 { flex-direction: column; justify-content: flex-end; } +.touch-screen #chat-container { + height: calc(100vh - var(--header-height) - 3vh); +} #messages-container { @@ -441,9 +444,11 @@ h2 { } +/* single col layout */ @media screen and (max-width: 640px ) { :root { --right-col-width: 0; + --video-container-height: 40vh; } #logo-container { display: none; @@ -455,13 +460,15 @@ h2 { max-width: 41%; } - /* single col */ #chat-container { width: 100%; - position: relative; - min-height: calc(100vh - var(--header-height)); + position: static; + /* min-height: calc(100vh - var(--header-height)); */ + height: calc(100vh - var(--header-height) - var(--video-container-height) - 3vh) + } + #messages-container { + min-height: unset; } - #user-content { width: 100%; } @@ -480,17 +487,18 @@ h2 { .chat footer { display: none; } - } + +/* try not making the video fixed position for now */ @media (min-height: 861px) { - main { + /* main { position: fixed; z-index: 9; width: 100%; } #user-content { margin-top: calc(var(--video-container-height) + var(--header-height) + 2em) - } + } */ } @@ -500,18 +508,11 @@ h2 { @media screen and (max-height: 860px ) { - #video-container { - height: 52vw; + :root { + --video-container-height: 40vh; } .user-content { flex-direction: column; } - - @media screen and (max-height: 640px ) { - #video-container { - height: 75vh; - } - } - }