+
diff --git a/webroot/js/app.js b/webroot/js/app.js
index 04b97512b..9bc6df945 100644
--- a/webroot/js/app.js
+++ b/webroot/js/app.js
@@ -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,
diff --git a/webroot/js/message.js b/webroot/js/message.js
index 698deb685..23b4a9ac3 100644
--- a/webroot/js/message.js
+++ b/webroot/js/message.js
@@ -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;
diff --git a/webroot/styles/layout.css b/webroot/styles/layout.css
index 91c6bd63a..379c3c46f 100644
--- a/webroot/styles/layout.css
+++ b/webroot/styles/layout.css
@@ -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;
+ }
+ }
+
}