From fdce8585d52b9ba583b08373724de8a2f838e7e9 Mon Sep 17 00:00:00 2001
From: Ginger Wong <omqmail@gmail.com>
Date: Sun, 19 Jul 2020 15:12:57 -0700
Subject: [PATCH] css tweaks for mobile mode; reintroduce mobile styles and
 hacks

---
 webroot/js/message.js     |  7 ++++++-
 webroot/js/utils.js       |  6 ++++++
 webroot/styles/layout.css | 33 +++++++++++++++++----------------
 3 files changed, 29 insertions(+), 17 deletions(-)

diff --git a/webroot/js/message.js b/webroot/js/message.js
index 00ee65224..8d36188f6 100644
--- a/webroot/js/message.js
+++ b/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) {
diff --git a/webroot/js/utils.js b/webroot/js/utils.js
index 103700cee..15cb657ac 100644
--- a/webroot/js/utils.js
+++ b/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)
+}
diff --git a/webroot/styles/layout.css b/webroot/styles/layout.css
index 4e91fd515..58a8df08a 100644
--- a/webroot/styles/layout.css
+++ b/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;
-    }
-  }
-
 }