diff --git a/src/styles-new/_constants-mobile.scss b/src/styles-new/_constants-mobile.scss new file mode 100644 index 0000000000..35e399abe0 --- /dev/null +++ b/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; +} diff --git a/src/ui/components/controls/pane.vue b/src/ui/components/controls/pane.vue index 73c077df5e..5480811318 100644 --- a/src/ui/components/controls/pane.vue +++ b/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 { - content: $glyph-icon-arrow-left; + body.desktop & { + 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 { - // Grippy affordance - content: ''; - background: $colorSplitterGrippy; - border-radius: 5px; - display: block; - position: absolute; - z-index: 1; - } + body.desktop & { + background: $colorSplitterBg; + transition: $transOut; + &:before { + // Extended hit area + content: ''; + display: block; + position: absolute; + z-index: -1; + } - &:active, &:hover { - transition: $transIn; - } + &:after { + // Grippy affordance + content: ''; + background: $colorSplitterGrippy; + border-radius: 5px; + display: block; + position: absolute; + z-index: 1; + } - &:active { - background: $colorSplitterActive; // Not really working with drag - } + &:active, &:hover { + transition: $transIn; + } - &:hover { - background: $colorSplitterHover; + &:active { + 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 { - transition: $transIn; - } + body.desktop & { + transition: $transOut; - &:hover { - background: $colorSplitterHover; - } + &:active, &:hover { + transition: $transIn; + } - &:active { - background: $colorSplitterActive; + &:hover { + background: $colorSplitterHover; + } + + &:active { + background: $colorSplitterActive; + } } &:before { - color: $colorSplitterFg; display: block; - font-size: 0.6em; font-family: symbolsfont; } } diff --git a/src/ui/components/layout/Layout.vue b/src/ui/components/layout/Layout.vue index 35ae3f0684..8ff06f0df0 100644 --- a/src/ui/components/layout/Layout.vue +++ b/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; + } } }