Mirroristas/owncast
2
0
Fork 0
mirror of https://github.com/owncast/owncast.git synced 2024-10-10 19:16:02 +00:00
Code Issues Packages Projects Releases Wiki Activity

css tweaks for mobile mode; reintroduce mobile styles and hacks

Browse Source
This commit is contained in:
Ginger Wong 2020-07-19 15:12:57 -07:00
parent d775924c59
commit fdce8585d5
3 changed files with 29 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
webroot/js/message.js
View File

@ -72,6 +72,12 @@ class MessagingInterface {
this.btnSubmitMessage.addEventListener('click', this.handleSubmitChatButton.bind(this)); this.btnSubmitMessage.addEventListener('click', this.handleSubmitChatButton.bind(this));
this.initLocalStates(); this.initLocalStates();
if (hasTouchScreen()) {
setVHvar();
window.addEventListener("orientationchange", setVHvar);
this.tagAppContainer.classList.add('touch-screen');
}
} }
setWebsocket(socket) { setWebsocket(socket) {
@ -225,7 +231,6 @@ class MessagingInterface {
this.formMessageInput.disabled = true; this.formMessageInput.disabled = true;
this.formMessageInput.placeholder = "Chat is offline." this.formMessageInput.placeholder = "Chat is offline."
} }
// also show "disabled" text/message somewhere.
} }
enableChat() { enableChat() {
if (this.formMessageInput) { if (this.formMessageInput) {

6
webroot/js/utils.js
View File

@ -141,3 +141,9 @@ function generateUsername() {
return `User ${(Math.floor(Math.random() * 42) + 1)}`; 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)
}

33
webroot/styles/layout.css
View File

@ -366,6 +366,9 @@ h2 {
flex-direction: column; flex-direction: column;
justify-content: flex-end; justify-content: flex-end;
} }
.touch-screen #chat-container {
height: calc(100vh - var(--header-height) - 3vh);
}
#messages-container { #messages-container {
@ -441,9 +444,11 @@ h2 {
} }
/* single col layout */
@media screen and (max-width: 640px ) { @media screen and (max-width: 640px ) {
:root { :root {
--right-col-width: 0; --right-col-width: 0;
--video-container-height: 40vh;
} }
#logo-container { #logo-container {
display: none; display: none;
@ -455,13 +460,15 @@ h2 {
max-width: 41%; max-width: 41%;
} }
/* single col */
#chat-container { #chat-container {
width: 100%; width: 100%;
position: relative; position: static;
min-height: calc(100vh - var(--header-height)); /* 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 { #user-content {
width: 100%; width: 100%;
} }
@ -480,17 +487,18 @@ h2 {
.chat footer { .chat footer {
display: none; display: none;
} }
} }
/* try not making the video fixed position for now */
@media (min-height: 861px) { @media (min-height: 861px) {
main { /* main {
position: fixed; position: fixed;
z-index: 9; z-index: 9;
width: 100%; width: 100%;
} }
#user-content { #user-content {
margin-top: calc(var(--video-container-height) + var(--header-height) + 2em) margin-top: calc(var(--video-container-height) + var(--header-height) + 2em)
} } */
} }
@ -500,18 +508,11 @@ h2 {
@media screen and (max-height: 860px ) { @media screen and (max-height: 860px ) {
#video-container { :root {
height: 52vw; --video-container-height: 40vh;
} }
.user-content { .user-content {
flex-direction: column; flex-direction: column;
} }
@media screen and (max-height: 640px ) {
#video-container {
height: 75vh;
}
}
} }