Mobile styles, VERY WIP

WARNING: DON'T PULL!!
- Mobile in progress;

src/styles-new/_constants-mobile.scss

@@ -26,6 +26,7 @@
 $mobileListIconSize: 30px;
 $mobileTitleDescH: 35px;
 $mobileOverlayMargin: 20px;
+$mobileMenuIconD: 34px;
 $phoneItemH: floor($ueBrowseGridItemLg/4);
 $tabletItemH: floor($ueBrowseGridItemLg/3);
 

src/ui/components/controls/pane.vue

@@ -1,24 +1,20 @@
 <template>
     <div class="l-pane"
          :class="{
-             'l-pane--horizontal': type === 'horizontal',
+            'l-pane--horizontal-handle-before': type === 'horizontal' && handle === 'before',
-             'l-pane--vertical': type === 'vertical',
+            'l-pane--horizontal-handle-after': type === 'horizontal' && handle === 'after',
-             'l-pane--collapsed': collapsed,
+            'l-pane--vertical-handle-before': type === 'vertical' && handle === 'before',
-             'l-pane--resize-handle-before' : handle === 'before',
+            'l-pane--vertical-handle-after': type === 'vertical' && handle === 'after',
-             'l-pane--resize-handle-after' : handle === 'after'
+             'l-pane--collapsed': collapsed
          }">
         <!-- TODO: move resize-handle styling from handle into pane, so that padding can be handled -->
         <div v-if="handle"
-             class="l-pane__resize-handle"
+             class="l-pane__handle"
-             :class="{
-                  'l-pane__resize-handle--before': handle === 'before',
-                  'l-pane__resize-handle--after': handle === 'after'
-              }"
              @mousedown="start">
-            <a class="l-pane__collapse-button"
-               @click="toggleCollapse"
-               v-if="collapsable"></a>
         </div>
+        <a class="l-pane__collapse-button"
+           @click="toggleCollapse"
+           v-if="collapsable"></a>
         <div class="l-pane__contents">
             <slot></slot>
         </div>
@@ -29,18 +25,120 @@
     @import "~styles/sass-base";
 
     $hitMargin: 4px;
+    /**************************** BASE - MOBILE AND DESKTOP */
+    .l-pane {
+        opacity: 1;
+        pointer-events: inherit;
+
+        &__handle {
+            // __handle doesn't appear in mobile
+            display: none;
+        }
+
+        &__collapse-button {
+            @include test();
+            position: absolute;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            top: 0; right: 0; // Default
+            z-index: 3;
+        }
+
+        &[class*="--horizontal"] {
+            > .l-pane__collapse-button {
+
+            }
+
+            &.l-pane--collapsed {
+                padding-left: 0 !important;
+                padding-right: 0 !important;
+                width: 0px;
+                min-width: 0px;
+            }
+        }
+
+        &[class*="--vertical"] {
+            > .l-pane__collapse-button {
+
+            }
+
+            &.l-pane--collapsed {
+                padding-top: 0 !important;
+                padding-top: 0 !important;
+                height: 0px;
+                min-height: 0px;
+            }
+        }
+
+        /************************ MOBILE-FIRST STYLES */
+        @include test(green, 0.1);
+
+
+        /************************ DESKTOP STYLES */
+        body.desktop & {
+            @include test(blue, 0.1);
+
+            &__handle {
+                z-index: 1;
+                display: block;
+                position: absolute;
+            }
+
+            &--horizontal {
+                &--before {
+                    > .l-pane__handle {
+
+                    }
+
+                    > .l-pane__collapse-button {
+
+                    }
+
+                }
+
+                &--after {
+                    > .l-pane__handle {
+
+                    }
+
+                    > .l-pane__collapse-button {
+
+                    }
+                }
+
+
+
+
+
+
+            }
+
+            &--vertical {
+
+            }
+        }
+    }
+
+
+
+
+
+
+
+
+
+
 
-    // TODO: get handles visible when pane is collapsed
 
 
-    /**************************** BASE STYLES */
     .l-pane {
         /************************ PANES */
         &--horizontal {
             // Pane adjusts size horizontally, handles run vertically
             // Selectors here
 
-            > .l-pane__resize-handle {
+            > .l-pane__handle {
                 top: 0;
                 bottom: 0;
 
@@ -112,7 +210,7 @@
                     }
 
                     &.l-pane--collapsed {
-                        > .l-pane__resize-handle {
+                        > .l-pane__handle {
                             &--before {
                                 transform: translateX($splitterHandleD * -1) scaleX(-1);
                             }
@@ -127,19 +225,19 @@
 
 
 
-            &.l-pane--collapsed {
+/*            &.l-pane--collapsed {
                 padding-left: 0 !important;
                 padding-right: 0 !important;
                 width: 0px;
                 min-width: 0px;
-            }
+            }*/
         }
 
         &--vertical {
             // Pane adjusts size vertically, handles run horizontally
             // Selectors here
 
-            > .l-pane__resize-handle {
+            > .l-pane__handle {
                 //background: green;
                 cursor: row-resize;
                 height: $splitterHandleD;
@@ -187,11 +285,11 @@
         }
 
         /************************ HANDLES */
-        &__resize-handle {
+        &__handle {
             // Selectors for handle in any context
-            z-index: 1;
+/*            z-index: 1;
             display: block;
-            position: absolute;
+            position: absolute;*/
 
 
             body.desktop & {

src/ui/components/layout/Layout.vue

@@ -6,7 +6,7 @@
         </div>
         <multipane class="l-shell__main"
                    type="horizontal">
-            <pane class="l-pane l-shell__pane-tree"
+            <pane class="l-shell__pane-tree"
                   handle="after"
                   collapsable>
                 <div class="l-shell__search">
@@ -16,10 +16,10 @@
                     <mct-tree :nodes="treeRoots"></mct-tree>
                 </div>
             </pane>
-            <pane class="l-pane l-shell__pane-main">
+            <pane class="l-shell__pane-main">
                 <div class="l-shell__main-container" ref="mainContainer"></div>
             </pane>
-            <pane class="l-pane l-shell__pane-inspector"
+            <pane class="l-shell__pane-inspector"
                   handle="before"
                   collapsable>
                 <MctInspector ref="inspector"></MctInspector>
@@ -36,21 +36,15 @@
 
     /******************************* SHELL */
     .l-shell {
+        $m: $interiorMargin;
         position: absolute;
         top: 0; right: 0; bottom: 0; left: 0;
         display: flex;
         flex-flow: column nowrap;
 
-        /********** HEAD AND STATUS */
+        /*************************** MOBILE-FIRST */
-        &__head,
-        &__status {
-            flex: 0 1 auto;
-        }
-
         &__head {
-            border-bottom: 1px solid $colorInteriorBorder;
+            display: none;
-            height: 40px;
-            padding: $interiorMarginLg;
         }
 
         &__status {
@@ -61,6 +55,58 @@
             padding: $interiorMarginSm;
         }
 
+        &__pane-tree {
+            width: 30%;
+
+            [class*="collapse-button"] {
+                // For mobile, collapse button becomes menu icon
+                height: $mobileMenuIconD;
+                width: $mobileMenuIconD;
+                transform: translateX(100%);
+
+                &:before {
+                    content: $glyph-icon-menu-hamburger;
+                    font-size: 1.4em;
+                }
+            }
+        }
+
+        &__pane-main {
+            transform: translateX(0);
+            // width: 100%;
+        }
+
+        @include phonePortrait() {
+            border: 1px solid red;
+
+            &__pane-tree {
+               // @include test(orange);
+                width: calc(100% - #{$mobileMenuIconD});
+                [class*="collapse-button"] {
+                   // transform: translateX(0);
+                }
+
+                + .l-pane {
+                    // Hide the next pane over when this pane is expanded
+                    opacity: 0;
+                    pointer-events: none;
+                }
+
+                &[class*="--collapsed"] + .l-pane {
+                    opacity: 1;
+                    pointer-events: inherit;
+                }
+            }
+
+            &__pane-main {
+                //transform: translateX(calc(100% - #{$mobileMenuIconD}));
+                /*width: 100%;*/
+            }
+
+            > .l-pane__contents {
+            }
+        }
+
         /********** MAIN AREA */
         &__main {
             flex: 1 1 auto;
@@ -78,6 +124,7 @@
         }
 
         &__tree {
+            // Tree component within __pane-tree
             flex: 1 1 100%;
         }
 
@@ -105,34 +152,9 @@
             }
         }
 
-        &__pane-tree,
-        &__pane-inspector {
-            max-width: 30%;
-            min-width: 5%;
-        }
-
         &__pane-tree {
-            $m: $interiorMargin;
             background: $colorTreeBg;
-            padding: $m $m + ($splitterD) $m $m; // TODO: move this into pane.vue
+            padding: $m;
-            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 {
@@ -145,6 +167,30 @@
         }
 
         body.desktop & {
+            /********** HEAD AND STATUS */
+            &__head,
+            &__status {
+                display: block;
+                flex: 0 1 auto;
+            }
+
+            &__head {
+                border-bottom: 1px solid $colorInteriorBorder;
+                height: 40px;
+                padding: $interiorMarginLg;
+            }
+
+            &__pane-tree,
+            &__pane-inspector {
+                max-width: 30%;
+                min-width: 5%;
+            }
+
+            &__pane-tree {
+                width: 300px;
+            }
+
+
             &__pane-inspector {
                 display: flex;
             }