pimhwang
/
owncast
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

markup and styles for simple mobile only

pull/5/head
Ginger Wong 6 years ago
parent
903fdc33ae
commit
97c71771df
5 changed files with 200 additions and 112 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 25
      webroot/index.html
  2. 2
      webroot/js/app.js
  3. 8
      webroot/js/message.js
  4. 4
      webroot/js/utils.js
  5. 97
      webroot/styles/layout.css

25
webroot/index.html
Unescape View File

@ -40,6 +40,8 @@ possible hacks @@ -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 @@ -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 @@ -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 @@ -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 @@ -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 @@ -155,8 +159,11 @@ possible hacks
</form>
</div>
</div>
</div>
</div>
</div>

2
webroot/js/app.js
Unescape View File

@ -27,7 +27,7 @@ function setupApp() { @@ -27,7 +27,7 @@ function setupApp() {
// style hackings
window.VIDEOJS_NO_DYNAMIC_STYLE = true;
setVHvar();
// setVHvar();
// init messaging interactions

8
webroot/js/message.js
Unescape View File

@ -99,12 +99,16 @@ class Messaging { @@ -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_

4
webroot/js/utils.js
Unescape View File

@ -23,9 +23,9 @@ function clearLocalStorage(key) { @@ -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'
});

97
webroot/styles/layout.css
Unescape View File

@ -2,7 +2,7 @@ @@ -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 { @@ -184,7 +184,7 @@ header h1 {
/* ************************************************8 */
#chat-container {
#xchat-container {
position: fixed;
z-index: 9;
right: 0;
@ -248,13 +248,13 @@ header h1 { @@ -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 { @@ -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 { @@ -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 { @@ -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 { @@ -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 { @@ -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;
}
}
Write Preview
Loading…
Cancel
Save