improved layout and fixed bugs introduced new ones

shared/_base.ts

@@ -84,6 +84,19 @@ export class BaseElement extends HTMLElement {
         return result;
     }
 
+    visibleChildren(inElement: HTMLElement = this) {
+        var result = [];
+
+        for (let i = 0; i < inElement.children.length; i++) {
+            const child = <HTMLElement>inElement.children[i];
+            if (child.style.display !== "none") {
+                result.push(child);
+            }
+        }
+
+        return result;
+    }
+
     hasChild(element: Element, startsWidth: boolean = false): boolean {
         var ele = this;
 

shared/create-script.ts

@@ -1,13 +1,16 @@
 import { executeDrawQueue } from "../outputframe-app/injects/dom-helpers";
 
-export function createScript(value: string) {
+export function createScript(value: string, appendToBody: boolean = true): HTMLScriptElement {
     var script: HTMLScriptElement = document.createElement("script");
     script.setAttribute("async", "");
     script.innerHTML = value;
 
-    document.body.appendChild(script);
+    if (appendToBody) {
+        document.body.appendChild(script);
+        executeDrawQueue();
+    }
 
-    executeDrawQueue();
+    return script;
 }
 
 export function createHtml(value: string) {

shared/set-dynamic-flex-listener.ts

@@ -0,0 +1,26 @@
+export function setDynamicFlexListener() {
+    var run = () => {
+        var flexDynamics = document.body.getElementsByClassName("flex-dynamic");
+        var isPortrait = window.matchMedia("(orientation: portrait)");
+        for (let i = 0; i < flexDynamics.length; i++) {
+            const flexDynamic = <HTMLElement>flexDynamics[i];
+
+            if (isPortrait.matches) {
+                flexDynamic.classList.add("flex-vert");
+                flexDynamic.classList.remove("flex-horiz");
+            }
+            else {
+                flexDynamic.classList.add("flex-horiz");
+                flexDynamic.classList.remove("flex-vert");
+            }
+
+        }
+    }
+
+    run();
+
+    window.addEventListener("resize", () => {
+        run();
+    });
+
+}