Markup / scss refactor mobile styles WIP

- Layout, panes mobile styling WIP

src/styles-new/_constants-mobile.scss

@@ -0,0 +1,146 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2018, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+/* REQUIRES /platform/commonUI/general/res/sass/_constants.scss */
+
+/************************** MOBILE REPRESENTATION ITEMS DIMENSIONS */
+$mobileListIconSize: 30px;
+$mobileTitleDescH: 35px;
+$mobileOverlayMargin: 20px;
+$phoneItemH: floor($ueBrowseGridItemLg/4);
+$tabletItemH: floor($ueBrowseGridItemLg/3);
+
+/************************** MOBILE TREE MENU DIMENSIONS */
+$mobileTreeItemH: 35px;
+$mobileTreeItemIndent: 15px;
+$mobileTreeRightArrowW: 30px;
+
+/************************** DEVICE WIDTHS */
+// IMPORTANT! Usage assumes that ranges are mutually exclusive and have no gaps
+$phoMaxW: 767px;
+$tabMinW: 768px;
+$tabMaxW: 1024px;
+$desktopMinW: 1025px;
+
+/************************** MEDIA QUERIES: WINDOW CHECKS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */
+$screenPortrait: "(orientation: portrait)";
+$screenLandscape: "(orientation: landscape)";
+
+//$mobileDevice: "(max-device-width: #{$tabMaxW})";
+
+$phoneCheck: "(max-device-width: #{$phoMaxW})";
+$tabletCheck: "(min-device-width: #{$tabMinW}) and (max-device-width: #{$tabMaxW})";
+$desktopCheck: "(min-device-width: #{$desktopMinW}) and (-webkit-min-device-pixel-ratio: 1)";
+
+/************************** MEDIA QUERIES: WINDOWS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */
+$phonePortrait: "only screen and #{$screenPortrait} and #{$phoneCheck}";
+$phoneLandscape: "only screen and #{$screenLandscape} and #{$phoneCheck}";
+
+$tabletPortrait: "only screen and #{$screenPortrait} and #{$tabletCheck}";
+$tabletLandscape: "only screen and #{$screenLandscape} and #{$tabletCheck}";
+
+$desktop: "only screen and #{$desktopCheck}";
+
+/************************** DEVICE PARAMETERS FOR MENUS/REPRESENTATIONS */
+$proporMenuOnly: 90%;
+$proporMenuWithView: 40%;
+
+// Phones in any orientation
+@mixin phone {
+    @media #{$phonePortrait},
+    #{$phoneLandscape} {
+        @content
+    }
+}
+
+//Phones in portrait orientation
+@mixin phonePortrait {
+    @media #{$phonePortrait} {
+        @content
+    }
+}
+
+// Phones in landscape orientation
+@mixin phoneLandscape {
+    @media #{$phoneLandscape} {
+        @content
+    }
+}
+
+// Tablets in any orientation
+@mixin tablet {
+    @media #{$tabletPortrait},
+    #{$tabletLandscape} {
+        @content
+    }
+}
+
+// Tablets in portrait orientation
+@mixin tabletPortrait {
+    @media #{$tabletPortrait} {
+        @content
+    }
+}
+
+// Tablets in landscape orientation
+@mixin tabletLandscape {
+    @media #{$tabletLandscape} {
+        @content
+    }
+}
+
+// Phones and tablets in any orientation
+@mixin phoneandtablet {
+    @media #{$phonePortrait},
+    #{$phoneLandscape},
+    #{$tabletPortrait},
+    #{$tabletLandscape} {
+        @content
+    }
+}
+
+// Desktop monitors in any orientation
+@mixin desktopandtablet {
+    // Keeping only for legacy - should not be used moving forward
+    // Use body.desktop, body.tablet instead.
+    @media #{$tabletPortrait},
+    #{$tabletLandscape},
+    #{$desktop} {
+        @content
+    }
+}
+
+// Desktop monitors in any orientation
+@mixin desktop {
+    // Keeping only for legacy - should not be used moving forward
+    // Use body.desktop instead.
+    @media #{$desktop} {
+        @content
+    }
+}
+
+// Transition used for the slide menu
+@mixin slMenuTransitions {
+    @include transition-duration(.35s);
+    transition-timing-function: ease;
+    backface-visibility: hidden;
+}

src/ui/components/controls/pane.vue

@@ -41,73 +41,97 @@
             // Selectors here
 
             > .l-pane__resize-handle {
-                //background: red;
-                cursor: col-resize;
-                width: $splitterHandleD;
                 top: 0;
                 bottom: 0;
 
-                &:before {
-                    // Extended hit area
-                    top: 0;
-                    right: $hitMargin * -1;
-                    bottom: 0;
-                    left: $hitMargin * -1;
-                }
-
-                &:after {
-                    // Grippy
-                    min-height: nth($splitterGrippyD, 3);
-                    height: nth($splitterGrippyD, 2);
-                    width: nth($splitterGrippyD, 1);
-                    top: 50%; left: ($splitterHandleD - nth($splitterGrippyD, 1)) / 2;
-                    transform: translateY(-50%);
-                }
-
                 &--before {
-                    // Handle at left edge of containing pane
                     left: 0;
-
                     [class*="collapse-button"] {
                         left: 0;
-                        transform: scaleX(-1);
                     }
                 }
 
                 &--after {
-                    // Handle at right edge of containing pane
                     right: 0;
-
                     [class*="collapse-button"] {
                         right: 0;
                     }
                 }
-            }
 
-            [class*="collapse-button"] {
-                height: nth($splitterCollapseBtnD, 2);
-                width: nth($splitterCollapseBtnD, 1);
 
-                &:before {
+                body.desktop & {
-                    content: $glyph-icon-arrow-left;
+                    cursor: col-resize;
+                    width: $splitterHandleD;
+
+                    &:before {
+                        // Extended hit area
+                        top: 0;
+                        right: $hitMargin * -1;
+                        bottom: 0;
+                        left: $hitMargin * -1;
+                    }
+
+                    &:after {
+                        // Grippy
+                        min-height: nth($splitterGrippyD, 3);
+                        height: nth($splitterGrippyD, 2);
+                        width: nth($splitterGrippyD, 1);
+                        top: 50%; left: ($splitterHandleD - nth($splitterGrippyD, 1)) / 2;
+                        transform: translateY(-50%);
+                    }
+
+                    &--before {
+                        // Handle at left edge of containing pane
+                        // left: 0;
+
+                        [class*="collapse-button"] {
+                            // left: 0;
+                            transform: scaleX(-1);
+                        }
+                    }
+
+                    &--after {
+                        // Handle at right edge of containing pane
+                        // right: 0;
+
+                        /*[class*="collapse-button"] {
+                            right: 0;
+                        }*/
+                    }
+
+                    [class*="collapse-button"] {
+                        background: $colorSplitterGrippy;
+                        color: $colorSplitterFg;
+                        font-size: 0.6em;
+                        height: nth($splitterCollapseBtnD, 2);
+                        width: nth($splitterCollapseBtnD, 1);
+
+                        &:before {
+                            content: $glyph-icon-arrow-left;
+                        }
+                    }
+
+                    &.l-pane--collapsed {
+                        > .l-pane__resize-handle {
+                            &--before {
+                                transform: translateX($splitterHandleD * -1) scaleX(-1);
+                            }
+
+                            &--after {
+                                transform: translateX($splitterHandleD) scaleX(-1);
+                            }
+                        }
+                    }
                 }
             }
 
+
+
             &.l-pane--collapsed {
                 padding-left: 0 !important;
                 padding-right: 0 !important;
                 width: 0px;
                 min-width: 0px;
-
-                > .l-pane__resize-handle {
-                    &--before {
-                        transform: translateX($splitterHandleD * -1) scaleX(-1);
-                    }
-
-                    &--after {
-                        transform: translateX($splitterHandleD) scaleX(-1);
-                    }
-                }
             }
         }
 
@@ -167,38 +191,41 @@
             // Selectors for handle in any context
             z-index: 1;
             display: block;
-            background: $colorSplitterBg;
             position: absolute;
-            transition: $transOut;
 
-            &:before {
-                // Extended hit area
-                content: '';
-                display: block;
-                position: absolute;
-                z-index: -1;
-            }
 
-            &:after {
+            body.desktop & {
-                // Grippy affordance
+                background: $colorSplitterBg;
-                content: '';
+                transition: $transOut;
-                background: $colorSplitterGrippy;
+                &:before {
-                border-radius: 5px;
+                    // Extended hit area
-                display: block;
+                    content: '';
-                position: absolute;
+                    display: block;
-                z-index: 1;
+                    position: absolute;
-            }
+                    z-index: -1;
+                }
 
-            &:active, &:hover {
+                &:after {
-                transition: $transIn;
+                    // Grippy affordance
-            }
+                    content: '';
+                    background: $colorSplitterGrippy;
+                    border-radius: 5px;
+                    display: block;
+                    position: absolute;
+                    z-index: 1;
+                }
 
-            &:active {
+                &:active, &:hover {
-                background: $colorSplitterActive; // Not really working with drag
+                    transition: $transIn;
-            }
+                }
 
-            &:hover {
+                &:active {
-                background: $colorSplitterHover;
+                    background: $colorSplitterActive; // Not really working with drag
+                }
+
+                &:hover {
+                    background: $colorSplitterHover;
+                }
             }
         }
 
@@ -209,25 +236,25 @@
             justify-content: center;
             position: absolute;
             z-index: 3;
-            background: $colorSplitterGrippy;
-            transition: $transOut;
 
-            &:active, &:hover {
+            body.desktop & {
-                transition: $transIn;
+                transition: $transOut;
-            }
 
-            &:hover {
+                &:active, &:hover {
-                background: $colorSplitterHover;
+                    transition: $transIn;
-            }
+                }
 
-            &:active {
+                &:hover {
-                background: $colorSplitterActive;
+                    background: $colorSplitterHover;
+                }
+
+                &:active {
+                    background: $colorSplitterActive;
+                }
             }
 
             &:before {
-                color: $colorSplitterFg;
                 display: block;
-                font-size: 0.6em;
                 font-family: symbolsfont;
             }
         }

src/ui/components/layout/Layout.vue

@@ -59,7 +59,6 @@
             border-top: 1px solid $colorInteriorBorder;
             height: 24px;
             padding: $interiorMarginSm;
-
         }
 
         /********** MAIN AREA */
@@ -116,7 +115,24 @@
             $m: $interiorMargin;
             background: $colorTreeBg;
             padding: $m $m + ($splitterD) $m $m; // TODO: move this into pane.vue
-            width: 300px
+            width: 300px;
+
+            body.mobile & {
+                [class*="collapse-button"] {
+                    // For mobile, collapse button becomes menu icon
+                    $d: 32px;
+                    height: $d;
+                    width: $d;
+                    transform: translateX(100%);
+
+                    &:before {
+                        content: $glyph-icon-menu-hamburger;
+                        font-size: 1.4em;
+                    }
+                }
+
+
+            }
         }
 
         &__pane-main {
@@ -124,7 +140,14 @@
         }
 
         &__pane-inspector {
-            width: 200px
+            // Mobile-first
+            display: none;
+        }
+
+        body.desktop & {
+            &__pane-inspector {
+                display: flex;
+            }
         }
     }
 </style>