From 97c71771df9469b3d683fba6ffe73f4a02a6e4df Mon Sep 17 00:00:00 2001 From: Ginger Wong Date: Mon, 15 Jun 2020 23:32:26 -0700 Subject: [PATCH] markup and styles for simple mobile only --- webroot/index.html | 221 ++++++++++++++++++++------------------ webroot/js/app.js | 2 +- webroot/js/message.js | 8 +- webroot/js/utils.js | 4 +- webroot/styles/layout.css | 99 +++++++++++++++-- 5 files changed, 211 insertions(+), 123 deletions(-) diff --git a/webroot/index.html b/webroot/index.html index 3803b9cd7..3b4d00fc6 100644 --- a/webroot/index.html +++ b/webroot/index.html @@ -40,123 +40,130 @@ possible hacks
-
-

- 😈 Owncast -

-
-
-
- - -
+
+
+

+ 😈 Owncast +

-
- - - -
-
- -
+
+
+
+ + +
-
-
- -
- -
- -
- -
- {{ streamStatus }} - {{ viewerCount }} {{ 'viewer' | plural(viewerCount) }}. - Max {{ sessionMaxViewerCount }} {{ 'viewer' | plural(sessionMaxViewerCount) }}. - {{ overallMaxViewerCount }} overall. -
- -
- - -
- Blathers is an owl with brown feathers. His face is white and he has a yellow beak. His arms are wing shaped and he has yellow talons. His eyes are very big with small black irises. He also has big pink cheek circles on his cheeks. His belly appears to be checkered in diamonds with light brown and white squares, similar to an argyle vest, which is traditionally associated with academia. His green bowtie further alludes to his academic nature. - - -
-
- Blathers is an owl with brown feathers. His face is white and he has a yellow beak. His arms are wing shaped and he has yellow talons. His eyes are very big with small black irises. He also has big pink cheek circles on his cheeks. His belly appears to be checkered in diamonds with light brown and white squares, similar to an argyle vest, which is traditionally associated with academia. His green bowtie further alludes to his academic nature. - - -
- -
-
- - -
- -
-
-
-
- -
-

{{ message.author }}

-

-
-
+
+ + +
- -
-
+ +
- + - - -
- - -
- - + +
+ +
+ + +
+ {{ streamStatus }} + {{ viewerCount }} {{ 'viewer' | plural(viewerCount) }}. + Max {{ sessionMaxViewerCount }} {{ 'viewer' | plural(sessionMaxViewerCount) }}. + {{ overallMaxViewerCount }} overall. +
+
+ + +
+ + + +
+ + +
+ Blathers is an owl with brown feathers. His face is white and he has a yellow beak. His arms are wing shaped and he has yellow talons. His eyes are very big with small black irises. He also has big pink cheek circles on his cheeks. His belly appears to be checkered in diamonds with light brown and white squares, similar to an argyle vest, which is traditionally associated with academia. His green bowtie further alludes to his academic nature. + + +
+
+ Blathers is an owl with brown feathers. His face is white and he has a yellow beak. His arms are wing shaped and he has yellow talons. His eyes are very big with small black irises. He also has big pink cheek circles on his cheeks. His belly appears to be checkered in diamonds with light brown and white squares, similar to an argyle vest, which is traditionally associated with academia. His green bowtie further alludes to his academic nature. + + +
+ +
+ +
+
+
+
+ +
+

{{ message.author }}

+

+
+
+ + +
+
+ + + + + +
+ + +
+ +
+
+
+ + +
diff --git a/webroot/js/app.js b/webroot/js/app.js index bfa93c796..e5c5bf00f 100644 --- a/webroot/js/app.js +++ b/webroot/js/app.js @@ -27,7 +27,7 @@ function setupApp() { // style hackings window.VIDEOJS_NO_DYNAMIC_STYLE = true; - setVHvar(); + // setVHvar(); // init messaging interactions diff --git a/webroot/js/message.js b/webroot/js/message.js index 92a74849a..545d0b129 100644 --- a/webroot/js/message.js +++ b/webroot/js/message.js @@ -99,12 +99,16 @@ class Messaging { this.imgUsernameAvatar.src = this.avatarSource + username; } displayChat() { - this.tagAppContainer.className = this.chatDisplayed ? "flex" : "flex no-chat"; + if (this.chatDisplayed) { + this.tagAppContainer.classList.remove("no-chat"); + } else { + this.tagAppContainer.classList.add("no-chat"); + } } handleOrientationChange() { console.log("====orientation change 123", event, window.screen.orientation, window.orientation, window.matchMedia("(orientation: landscape)")) - mobileVHhack(); + // mobileVHhack(); // if small landscape, hide chat // var mql = window.matchMedia("(orientation: landscape)"); // what it _was_ diff --git a/webroot/js/utils.js b/webroot/js/utils.js index 48f487d89..7b7c90d0a 100644 --- a/webroot/js/utils.js +++ b/webroot/js/utils.js @@ -23,9 +23,9 @@ function clearLocalStorage(key) { } function jumpToBottom(id) { - const div = document.querySelector(id); + const div = id ? document.querySelector(id) : document.body; div.scrollTo({ - top: div.scrollHeight,// - div.clientHeight, + top: div.scrollHeight, left: 0, behavior: 'smooth' }); diff --git a/webroot/styles/layout.css b/webroot/styles/layout.css index 61aa8d242..c8f713ea5 100644 --- a/webroot/styles/layout.css +++ b/webroot/styles/layout.css @@ -2,7 +2,7 @@ :root { --header-height: 3em; --right-col-width: 24em; - + --video-container-height: 50vh; --header-bg-color: rgba(20,0,40,1); --vh: 1vh; } @@ -184,7 +184,7 @@ header h1 { /* ************************************************8 */ -#chat-container { +#xchat-container { position: fixed; z-index: 9; right: 0; @@ -248,13 +248,13 @@ header h1 { /* ************************************************8 */ - +/* .no-chat .left-col { width: 100vw; } .no-chat .right-col { display: none; -} +} */ .no-chat #chat-toggle { opacity: .75; @@ -273,7 +273,7 @@ header h1 { --right-col-width: 20em; } - #chat-container { + #xchat-container { width: var(--right-col-width); } .left-col { @@ -283,7 +283,7 @@ header h1 { /* ************************************************8 */ - +/* @media screen and (max-width: 640px ) { #main-content-container { flex-direction: column; @@ -312,7 +312,7 @@ header h1 { #user-content { display: none; } - #chat-container { + #xchat-container { width: 100%; height: 100%; position: relative; @@ -331,15 +331,15 @@ header h1 { .no-chat .right-col { display: none; } - .no-chat #stream-info { + .no-chat #xstream-info { display: flex; } .no-chat #user-content { display: block; } -} - +} */ +/* .message-input-focus #main-content-container { flex-direction: column; justify-content: space-between; @@ -377,4 +377,81 @@ header h1 { height: 40vh; height: calc((var(--vh, 1vh) * 40)); min-height: 300px; -} \ No newline at end of file +} */ + + +/* ************************************************8 */ +/* ************************************************8 */ + +.touch-screen header { + position: relative; +} +.touch-screen #fixed-content { + position: fixed; + left: 0; + top: 0; + width: 100%; +} + +.touch-screen #main-content-container { + display: none; +} + +.touch-screen #stream-info { + height: 2.5em; + overflow: hidden; +} + +#main-mobile-container { + flex-direction: column; + margin-top: calc(var(--header-height) + var(--video-container-height)); +} +.touch-screen #video-container { + height: var(--video-container-height); +} +.touch-screen .owncast-video-container { + height: 100%; +} + +.touch-screen #user-content { + display: none; +} +.touch-screen #chat-container { + display: block; +} +.touch-screen.no-chat #user-content { + display: block; +} +.touch-screen.no-chat #chat-container { + display: none; +} + +@media screen and (max-width: 640px ) { + :root { + --video-container-height: 36vh; + } +} + +@media screen and (orientation: landscape) and (min-width: 1024px) { + :root { + --video-container-height: 65vh; + } +} + +@media screen and (orientation: landscape) and (max-width: 1024px) { + :root { + --video-container-height: 75vh; + } + #main-mobile-container { + margin-top: calc(var(--header-height) + var(--video-container-height)); + } + .touch-screen #user-content { + display: block; + } + .touch-screen #chat-container { + display: none; + } + .touch-screen #chat-toggle { + display: none; + } +}