From 151dcb46d2745c4fabfb3c28d999f461d69a0b27 Mon Sep 17 00:00:00 2001 From: Ginger Wong Date: Sun, 14 Jun 2020 18:20:04 -0700 Subject: [PATCH 1/2] misc --- webroot/index.html | 2 +- webroot/styles/layout.css | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/webroot/index.html b/webroot/index.html index fbdd5a6cc..4543fe859 100644 --- a/webroot/index.html +++ b/webroot/index.html @@ -1,6 +1,6 @@ - + Live stream test diff --git a/webroot/styles/layout.css b/webroot/styles/layout.css index bf7bbe6be..f70110edc 100644 --- a/webroot/styles/layout.css +++ b/webroot/styles/layout.css @@ -10,7 +10,8 @@ body { font-size: 14px; - background-color: #666; + background-color: #eee; + /* color: white; */ } ::-webkit-scrollbar { width: 0px; @@ -22,8 +23,6 @@ body { flex-direction: column; justify-content: flex-start; position: relative; - - color: white; } header { @@ -255,6 +254,7 @@ header h1 { } .message-author { font-weight: 600; + color: #fff; } .message-text { color: #ccc; From c16cd50dbb66a49551399b07a2d284e2cd700a11 Mon Sep 17 00:00:00 2001 From: Ginger Wong Date: Sun, 14 Jun 2020 21:14:42 -0700 Subject: [PATCH 2/2] mobile style hacks --- webroot/index.html | 4 ++-- webroot/js/app.js | 5 +++++ webroot/js/utils.js | 10 ++++++++++ webroot/styles/layout.css | 28 ++++++++++++++++------------ 4 files changed, 33 insertions(+), 14 deletions(-) diff --git a/webroot/index.html b/webroot/index.html index 477fc1cd5..bde68973b 100644 --- a/webroot/index.html +++ b/webroot/index.html @@ -47,7 +47,7 @@ -
💬
+ @@ -67,7 +67,7 @@ poster="https://goth.land/thumbnail.png" data-setup='{}' > - + diff --git a/webroot/js/app.js b/webroot/js/app.js index e610d130f..361f17a6c 100644 --- a/webroot/js/app.js +++ b/webroot/js/app.js @@ -25,7 +25,12 @@ function setupApp() { }) + // style hackings window.VIDEOJS_NO_DYNAMIC_STYLE = true; + mobileVHhack(); + + + // init messaging interactions var appMessagingMisc = new Messaging(); appMessagingMisc.init(); diff --git a/webroot/js/utils.js b/webroot/js/utils.js index 9bf1a4e5c..fe9dc8e87 100644 --- a/webroot/js/utils.js +++ b/webroot/js/utils.js @@ -36,4 +36,14 @@ function uuidv4() { const r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8); return v.toString(16); }); +} + +function setVHvar() { + let 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`); +} +function mobileVHhack() { + setVHvar(); + window.addEventListener("orientationchange", setVHvar); } \ No newline at end of file diff --git a/webroot/styles/layout.css b/webroot/styles/layout.css index f70110edc..e64e6647d 100644 --- a/webroot/styles/layout.css +++ b/webroot/styles/layout.css @@ -7,11 +7,9 @@ --header-bg-color: rgba(20,0,40,1); } - body { font-size: 14px; background-color: #eee; - /* color: white; */ } ::-webkit-scrollbar { width: 0px; @@ -155,11 +153,15 @@ header h1 { justify-content: flex-start; align-items: center; background-color: black; + + height: calc(100vh - 8em); /* Fallback for browsers that do not support Custom Properties */ + height: calc((var(--vh, 1vh) * 100) - var(--header-height) - 5em); + } .owncast-video-container .video-js { width: 100%; + height: 100%; display: block; - height: calc(100vh - var(--header-height) - 5em); } .owncast-video-container video { width: 100%; @@ -194,7 +196,10 @@ header h1 { height: 100%; width: var(--right-col-width); background-color: var(--chat-bg-color); - height: calc(100vh - var(--header-height)); + + height: calc(100vh - 3em); /* Fallback for browsers that do not support Custom Properties */ + height: calc((var(--vh, 1vh) * 100) - var(--header-height)); + overflow: hidden; display: flex; flex-direction: column; @@ -258,7 +263,7 @@ header h1 { } .message-text { color: #ccc; - font-weight: 100; + font-weight: 200; } /* ************************************************8 */ @@ -293,7 +298,6 @@ header h1 { #main-content-container { flex-direction: column; justify-content: space-between; - height: calc(100vh - var(--header-height)); } .main-cols { @@ -302,13 +306,14 @@ header h1 { .left-col { flex-direction: column; justify-content: stretch; + z-index: 100; } .right-col { overflow: hidden; } #user-info { - width: 12em; + width: 9em; } #user-content { display: none; @@ -320,18 +325,17 @@ header h1 { height: auto; } - .owncast-video-container .video-js { + .owncast-video-container { height: 40vh; + height: calc((var(--vh, 1vh) * 40)); + min-height: 300px; } - .no-chat .left-col { - height: 100%; - } .no-chat .right-col { display: none; } .no-chat #stream-info { - display: block; + display: flex; } .no-chat #user-content { display: block;