simplified layout updates based on only media queries

webroot/index.html

@@ -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">

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,

webroot/js/message.js

@@ -73,14 +73,14 @@ class MessagingInterface {
 
 		this.initLocalStates();
 
-		if (hasTouchScreen()) {
+		// if (hasTouchScreen()) {
-			this.scrollableMessagesContainer = document.body;
+		// 	this.scrollableMessagesContainer = document.body;
-			this.tagAppContainer.classList.add('touch-screen');
+		// 	this.tagAppContainer.classList.add('touch-screen');
-			window.onorientationchange = this.handleOrientationChange.bind(this);
+		// 	window.onorientationchange = this.handleOrientationChange.bind(this);
-			this.handleOrientationChange();
+		// 	this.handleOrientationChange();
-		} else {
+		// } else {
-			this.tagAppContainer.classList.add('desktop');
+		// 	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;

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) {
+  /* single col */
-  :root {
+  #chat-container {
-    --video-container-height: 65vh;
+    width: 100%;
+    position: relative;
+    min-height: calc(100vh - var(--header-height));
   }
-}
  
-@media screen and (orientation: landscape) and (max-width: 1024px) {
+  #user-content {
-  :root .landscape {
+    width: 100%;
-    --video-container-height: 75vh;
   }
-  .touch-screen.landscape #chat-container-wrap {
+  #stream-info {
-    margin-top: calc(var(--header-height) + var(--video-container-height));
+    width: 100%;
   }
-  .touch-screen.landscape .user-content {
+  #video-container {
-    display: block;
+    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;
+    }
+  }
+
 }