markup and styles for simple mobile only
This commit is contained in:
Ginger Wong
parent
903fdc33ae
commit
97c71771df
@ -40,6 +40,8 @@ possible hacks
|
||||
</script>
|
||||
<body class="bg-gray-300 text-gray-800">
|
||||
<div id="app-container" class="flex no-chat">
|
||||
|
||||
<div id="fixed-content">
|
||||
<header class="flex border-b border-gray-900 border-solid shadow-md">
|
||||
<h1 class="text-gray-400">
|
||||
😈 Owncast
|
||||
@ -68,9 +70,7 @@ possible hacks
|
||||
</div>
|
||||
|
||||
</header>
|
||||
<div id="main-content-container" class="flex">
|
||||
<!-- LEFT CONTAINER SIDE-->
|
||||
<div class="flex main-cols left-col">
|
||||
|
||||
|
||||
<div id="video-container" class="flex owncast-video-container bg-black">
|
||||
<video
|
||||
@ -88,12 +88,19 @@ possible hacks
|
||||
</video>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="stream-info" class="flex font-mono bg-gray-900 text-indigo-200 shadow-md border-b border-gray-100 border-solid">
|
||||
<span>{{ streamStatus }}</span>
|
||||
<span>{{ viewerCount }} {{ 'viewer' | plural(viewerCount) }}.</span>
|
||||
<span>Max {{ sessionMaxViewerCount }} {{ 'viewer' | plural(sessionMaxViewerCount) }}.</span>
|
||||
<span>{{ overallMaxViewerCount }} overall.</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="main-mobile-container" class="flex">
|
||||
|
||||
|
||||
|
||||
<div id="user-content">
|
||||
|
||||
@ -110,10 +117,6 @@ possible hacks
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- RIGHT CONTAINER SIDE-->
|
||||
<div class="flex main-cols right-col">
|
||||
|
||||
<div id="chat-container" class="bg-gray-800">
|
||||
<div id="messages-container">
|
||||
@ -132,8 +135,9 @@ possible hacks
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="message-input-container" class="shadow-md bg-gray-900 border-t border-gray-700 border-solid">
|
||||
<form id="message-form" class="flex" /*@submit="submitChatForm"*/>
|
||||
<form id="message-form" class="flex">
|
||||
|
||||
<input type="hidden" name="inputAuthor" id="self-message-author" v-model="message.author" />
|
||||
|
||||
@ -155,8 +159,11 @@ possible hacks
|
||||
|
||||
</form>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@ -27,7 +27,7 @@ function setupApp() {
|
||||
|
||||
// style hackings
|
||||
window.VIDEOJS_NO_DYNAMIC_STYLE = true;
|
||||
setVHvar();
|
||||
// setVHvar();
|
||||
|
||||
|
||||
// init messaging interactions
|
||||
|
||||
@ -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_
|
||||
|
||||
|
||||
@ -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'
|
||||
});
|
||||
|
||||
@ -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;
|
||||
} */
|
||||
|
||||
|
||||
/* ************************************************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;
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user