[Frontend] Significant mods to fluid-layouts

- Restructure code to make better use of mixins;
- Added .fl-mobile-only selector;
- Simplified layout logic for column/row/wrap styles;

app.js

@@ -78,7 +78,7 @@
     app.use(express['static'](options.directory));
 
     // Finally, open the HTTP server and log the instance to the console
-    app.listen(options.port, function() {
+    app.listen(options.port, '0.0.0.0', function() {
         console.log('Open MCT application running at localhost:' + options.port)
     });
 }());

platform/commonUI/browse/src/PaneController.js

@@ -56,7 +56,7 @@ define(
                 // declared as a method but as a property which happens to
                 // be a function.
                 if (agentService.isPhone() && agentService.isPortrait()) {
-                    // On phones, trees should collapse in portrait mode
+                    // On phones, πs should collapse in portrait mode
                     // when something is navigated-to.
                     self.state = false;
                 }

platform/commonUI/general/res/sass/user-environ/_frame.scss

@@ -175,56 +175,75 @@ body.desktop .frame {
     }
 }
 
-.holder-object:not(.s-status-editing) {
-    .l-layout {
-        &.fl-column,
-        &.fl-row,
-        &.fl-wrap,
-        &.fl-phone-best-fit,
-        &.fl-mobile-best-fit {
-            display: flex;
-            flex-wrap: nowrap;
-            align-content: stretch;
-            align-items: stretch;
-            > .frame {
-                display: block;
-                flex: 1 1 auto;
-                width: auto !important;
-                height: auto !important;
-                &.t-object-type-summary-widget {
-                    &.no-frame.t-frame-outer > .t-rep-frame {
-                        &.contents {
-                            // When frame is hidden, add a bit of margin to the contents
-                            $m: $interiorMargin;
-                            top: $m; right: $m; bottom: $m; left: $m;
-                        }
+
+/**************************************************************** FLUID LAYOUTS */
+/*
+fl-column: obey min-height, but use min-width: auto;
+fl-row: obey min-width, but use min-height: auto;
+fl-wrap: uses both min-width and min-height;
+fl-mobile-best-fit: fl-column or fl-row depending on orientation
+ */
+
+
+@mixin flStyles() {
+    &.fl-column,
+    &.fl-row,
+    &.fl-mobile-best-fit {
+        display: flex;
+        flex-wrap: nowrap;
+        align-content: stretch;
+        align-items: stretch;
+        > .frame {
+            display: block;
+            flex: 1 1 auto;
+            width: auto !important;
+            height: auto !important;
+            top: auto !important;
+            left: auto !important;
+            position: relative;
+            &.t-object-type-summary-widget {
+                &.no-frame.t-frame-outer > .t-rep-frame {
+                    &.contents {
+                        // When frame is hidden, add a bit of margin to the contents
+                        $m: $interiorMargin;
+                        top: $m; right: $m; bottom: $m; left: $m;
                     }
                 }
             }
         }
-        &.fl-column {
-            flex-direction: column;
-            padding-right: $interiorMargin;
-        }
-        &.fl-row {
-            flex-direction: row;
-            padding-bottom: $interiorMargin;
-        }
+    }
 
-        &.fl-wrap {
-            align-content: flex-start;
-            align-items: flex-start;
-            flex-wrap: wrap;
-        }
+    &.fl-wrap {
+        flex-wrap: wrap;
+    }
+}
+
+@mixin flColumn() {
+    flex-direction: column !important;
+    &:not(.fl-wrap) > .frame { min-width: auto !important; }
+    padding-right: $interiorMargin;
+}
+
+@mixin flRow() {
+    flex-direction: row !important;
+    &:not(.fl-wrap) > .frame { min-height: auto !important; }
+    padding-bottom: $interiorMargin;
+}
+
+.holder-object:not(.s-status-editing) {
+    // Browsing only
+    .l-layout:not(.fl-mobile-only) {
+        @include flStyles();
+        &.fl-column { @include flColumn(); }
+        &.fl-row { @include flRow(); }
     }
 }
 
 .holder-object {
-    .l-layout {
+    // Editing AND browsing
+    .l-layout:not(.fl-mobile-only) {
         &.fl-column,
         &.fl-row,
-        &.fl-wrap,
-        &.fl-phone-best-fit,
         &.fl-mobile-best-fit {
             > .frame {
                 top: auto !important;
@@ -236,14 +255,20 @@ body.desktop .frame {
 }
 
 body.mobile {
+    .l-layout.fl-mobile-only {
+        @include flStyles();
+    }
     .l-layout.fl-mobile-best-fit {
-        flex-wrap: wrap !important;
         padding: 0 !important;
     }
-    &.portrait .l-layout.fl-mobile-best-fit {
-        flex-direction: column !important;
+    &.landscape .l-layout {
+        &.fl-mobile-best-fit {
+            @include flRow();
+        }
     }
-    &.landscape .l-layout.fl-mobile-best-fit {
-        flex-direction: row !important;
+    &.portrait .l-layout {
+        &.fl-mobile-best-fit {
+            @include flColumn();
+        }
     }
 }

platform/commonUI/mobile/src/DeviceClassifier.js

@@ -49,6 +49,20 @@ define(
                 if (DeviceMatchers[key](agentService)) {
                     body.addClass(key);
                 }
+
+                if ((index === (array.length - 1)) && agentService.isMobile()) {
+                    var mediaQuery = window.matchMedia('(orientation: landscape)');
+
+                    mediaQuery.addListener(function (event) {
+                        if (event.matches) {
+                            body.removeClass('portrait');
+                            body.addClass('landscape');
+                        } else {
+                            body.removeClass('landscape');
+                            body.addClass('portrait');
+                        }
+                    });
+                }
             });
 
             if (agentService.isMobile()) {