css tweaks for mobile mode; reintroduce mobile styles and hacks

webroot/js/message.js

@@ -72,6 +72,12 @@ class MessagingInterface {
 		this.btnSubmitMessage.addEventListener('click', this.handleSubmitChatButton.bind(this));
 
 		this.initLocalStates();
+
+		if (hasTouchScreen()) {
+			setVHvar();
+			window.addEventListener("orientationchange", setVHvar);
+			this.tagAppContainer.classList.add('touch-screen');
+		}
 	}
 
 	setWebsocket(socket) {
@@ -225,7 +231,6 @@ class MessagingInterface {
 			this.formMessageInput.disabled = true;
 			this.formMessageInput.placeholder = "Chat is offline."
 		}
-		// also show "disabled" text/message somewhere.
 	}
 	enableChat() {
 		if (this.formMessageInput) {

webroot/js/utils.js

@@ -141,3 +141,9 @@ function generateUsername() {
   return `User ${(Math.floor(Math.random() * 42) + 1)}`;
 }
 
+function setVHvar() {
+  var vh = window.innerHeight * 0.01;
+  // Then we set the value in the --vh custom property to the root of the document
+  document.documentElement.style.setProperty('--vh', `${vh}px`);
+  console.log("== new vh", vh)
+}

webroot/styles/layout.css

@@ -366,6 +366,9 @@ h2 {
   flex-direction: column;
   justify-content: flex-end;
 }
+.touch-screen #chat-container {
+  height: calc(100vh - var(--header-height) - 3vh);
+}
 
 
 #messages-container {
@@ -441,9 +444,11 @@ h2 {
 
 }
 
+/* single col layout */
 @media screen and (max-width: 640px ) {
   :root {
     --right-col-width: 0;
+    --video-container-height: 40vh;
   }
   #logo-container {
     display: none;
@@ -455,13 +460,15 @@ h2 {
     max-width: 41%;
   }
 
-  /* single col */
   #chat-container {
     width: 100%;
-    position: relative;
-    min-height: calc(100vh - var(--header-height));
+    position: static;
+    /* min-height: calc(100vh - var(--header-height)); */
+    height: calc(100vh - var(--header-height) - var(--video-container-height) - 3vh)
+  }
+  #messages-container {
+    min-height: unset;
   }
- 
   #user-content {
     width: 100%;
   }
@@ -480,17 +487,18 @@ h2 {
   .chat footer {
     display: none;
   }
-
 }
+
+/* try not making the video fixed position for now */
 @media (min-height: 861px) {
-  main {
+  /* main {
     position: fixed;
     z-index: 9;
     width: 100%;
   }
   #user-content {
     margin-top: calc(var(--video-container-height) + var(--header-height) + 2em)
-  }
+  } */
 }
 
 
@@ -500,18 +508,11 @@ h2 {
 
 
 @media screen and (max-height: 860px ) {
-  #video-container {
-    height: 52vw;
+  :root {
+    --video-container-height: 40vh;
   }
   .user-content {
     flex-direction: column;
   }
-
-  @media screen and (max-height: 640px ) {
-    #video-container {
-      height: 75vh;
-    }
-  }
-
 }