detect portrait mode on mobile so it doesnt go into two col layout when keyboard is up, (#178)

webroot/js/utils/constants.js

@@ -51,3 +51,5 @@ export const MESSAGE_JUMPTOBOTTOM_BUFFER = 260;
 // app styling
 export const WIDTH_SINGLE_COL = 730;
 export const HEIGHT_SHORT_WIDE = 500;
+export const ORIENTATION_PORTRAIT = 'portrait';
+export const ORIENTATION_LANDSCAPE = 'landscape';

webroot/js/utils/helpers.js

@@ -1,3 +1,5 @@
+import { ORIENTATION_LANDSCAPE, ORIENTATION_PORTRAIT } from './constants.js';
+
 export function getLocalStorage(key) {
   try {
     return localStorage.getItem(key);
@@ -75,6 +77,21 @@ export function hasTouchScreen() {
   return hasTouch;
 }
 
+
+export function getOrientation(forTouch = false) {
+  // chrome mobile gives misleading matchMedia result when keyboard is up
+  if (forTouch && window.screen && window.screen.orientation) {
+    return window.screen.orientation.type.match('portrait') ?
+      ORIENTATION_PORTRAIT :
+      ORIENTATION_LANDSCAPE;
+  } else {
+    // all other cases
+    return window.matchMedia("(orientation: portrait)").matches ?
+    ORIENTATION_PORTRAIT :
+    ORIENTATION_LANDSCAPE;
+  }
+}
+
 // generate random avatar from https://robohash.org
 export function generateAvatar(hash) {
   const avatarSource = 'https://robohash.org/';