mirrors/owncast
1
0
Fork 0
mirror of https://github.com/owncast/owncast.git synced 2024-11-21 20:28:15 +03:00
Code Issues Projects Releases Packages Wiki Activity

simplified layout updates based on only media queries

Browse source
This commit is contained in:
Ginger Wong 2020-07-18 17:15:52 -07:00
parent addfce2ec9
commit 0af67c0cdc
4 changed files with 66 additions and 130 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
webroot/index.html
View file

@ -84,7 +84,7 @@
</section>
</main>
<section id="user-content" v-if="layout === 'desktop'" aria-label="User information">
<section id="user-content" aria-label="User information">
<user-details
v-bind:logo="logo"
v-bind:platforms="socialHandles"
@ -96,13 +96,13 @@
</section>
<owncast-footer v-if="layout === 'desktop'" v-bind:app-version="appVersion"></owncast-footer>
<owncast-footer v-bind:app-version="appVersion"></owncast-footer>
</div>
<section id="chat-container-wrap" class="flex">
<div v-if="layout !== 'desktop'" id="user-content-touch">
<!-- <div v-if="layout !== 'desktop'" id="user-content-touch">
<user-details
v-bind:logo="logo"
v-bind:platforms="socialHandles"
@ -114,7 +114,7 @@
<owncast-footer v-bind:app-version="appVersion"></owncast-footer>
</div>
</div> -->
<div id="chat-container" class="bg-gray-800">
<div id="messages-container">

2
webroot/js/app.js
View file

@ -46,7 +46,7 @@ class Owncast {
el: '#app-container',
data: {
isOnline: false,
layout: hasTouchScreen() ? 'touch' : 'desktop',
// layout: hasTouchScreen() ? 'touch' : 'desktop',
messages: [],
overallMaxViewerCount: 0,
sessionMaxViewerCount: 0,

19
webroot/js/message.js
View file

@ -73,14 +73,14 @@ class MessagingInterface {
this.initLocalStates();
if (hasTouchScreen()) {
this.scrollableMessagesContainer = document.body;
this.tagAppContainer.classList.add('touch-screen');
window.onorientationchange = this.handleOrientationChange.bind(this);
this.handleOrientationChange();
} else {
this.tagAppContainer.classList.add('desktop');
}
// if (hasTouchScreen()) {
// this.scrollableMessagesContainer = document.body;
// this.tagAppContainer.classList.add('touch-screen');
// window.onorientationchange = this.handleOrientationChange.bind(this);
// this.handleOrientationChange();
// } else {
// this.tagAppContainer.classList.add('desktop');
// }
}
setWebsocket(socket) {
@ -113,7 +113,7 @@ class MessagingInterface {
this.tagAppContainer.classList.remove('chat');
}
}
/*
handleOrientationChange() {
var isPortrait = Math.abs(window.orientation % 180) === 0;
if(!isPortrait) {
@ -128,6 +128,7 @@ class MessagingInterface {
this.tagAppContainer.classList.remove('landscape');
}
}
*/
handleChatToggle() {
this.chatDisplayed = !this.chatDisplayed;

167
webroot/styles/layout.css
View file

@ -426,83 +426,6 @@ h2 {
/* ************************************************8 */
.landscape #chat-toggle {
display: none;
}
/* ************************************************8 */
/* ************************************************8 */
.touch-screen header {
position: relative;
}
.touch-screen #top-content {
position: fixed;
left: 0;
top: 0;
width: 100%;
z-index: 10;
}
.touch-screen .user-content {
flex-direction: column;
align-content: center;
}
.touch-screen .user-image {
margin: auto;
}
.touch-screen #stream-info {
height: 2.5em;
overflow: hidden;
}
.touch-screen #chat-container-wrap {
display: flex;
align-items: flex-end;
width: 100%;
height: auto;
flex-direction: column;
margin-top: calc(var(--header-height) + var(--video-container-height) + 2.5em);
}
.touch-screen #chat-container {
height: auto;
position: relative;
right: unset;
top: unset;
width: 100%;
z-index: 1;
}
.touch-screen.chat #video-container,
.touch-screen.chat #stream-info,
.touch-screen.chat #user-content {
width: 100%;
}
.touch-screen #video-container {
margin-top: 0;
}
.touch-screen .owncast-video-container {
height: 100%;
}
.touch-screen #user-content-touch {
display: none;
}
.touch-screen #chat-container {
display: block;
}
.touch-screen.no-chat #user-content-touch {
display: block;
}
.touch-screen.no-chat #chat-container {
display: none;
}
/* ************************************************8 */
@media screen and (max-width: 860px) {
:root {
@ -518,31 +441,8 @@ h2 {
@media screen and (max-width: 640px ) {
:root {
--video-container-height: 36vh;
--right-col-width: 0;
}
.desktop {
--video-container-height: 50vh;
}
.desktop #chat-container {
height: auto;
position: relative;
right: unset;
top: unset;
width: 100%;
z-index: 1;
}
.desktop.chat #video-container,
.desktop.chat #stream-info,
.desktop.chat #user-content {
width: 100%;
}
.desktop #footer,
.desktop.chat #user-content {
display: none;
}
#logo-container {
display: none;
}
@ -552,29 +452,64 @@ h2 {
#user-options-container {
max-width: 41%;
}
}
@media screen and (orientation: landscape) and (min-width: 1024px) {
:root {
--video-container-height: 65vh;
/* single col */
#chat-container {
width: 100%;
position: relative;
min-height: calc(100vh - var(--header-height));
}
}
@media screen and (orientation: landscape) and (max-width: 1024px) {
:root .landscape {
--video-container-height: 75vh;
#user-content {
width: 100%;
}
.touch-screen.landscape #chat-container-wrap {
margin-top: calc(var(--header-height) + var(--video-container-height));
#stream-info {
width: 100%;
}
.touch-screen.landscape .user-content {
display: block;
#video-container {
width: 100%;
}
.touch-screen.landscape #chat-container {
.chat #video-container {
width: 100%;
}
.chat #user-content {
display: none;
}
.touch-screen.landscape #chat-toggle {
.chat footer {
display: none;
}
}
@media (min-height: 861px) {
main {
position: fixed;
z-index: 9;
width: 100%;
}
#user-content {
margin-top: calc(var(--video-container-height) + var(--header-height) + 2em)
}
}
@media screen and (max-height: 860px ) {
#video-container {
height: 52vw;
}
.user-content {
flex-direction: column;
}
@media screen and (max-height: 640px ) {
#video-container {
height: 75vh;
}
}
}