From 76c4b96683ea5dd2e55da3c65813fff8ac3a284c Mon Sep 17 00:00:00 2001
From: Charles Hacskaylo <charles.f.hacskaylo@nasa.gov>
Date: Mon, 24 Aug 2015 15:24:35 -0700
Subject: [PATCH] [Mobile] IN PROGRESS: Menu hide/show fixes; font-size
tweaking
open #74
Changed .right-repr to use translateX in phone portrait mode;
font-size tweaking;
Refactored css organization in mobile/_layout.scss;
---
.../commonUI/browse/res/templates/browse.html | 15 +-
.../general/res/css/theme-espresso.css | 162 +++++++++---------
platform/commonUI/general/res/css/tree.css | 12 +-
platform/commonUI/general/res/sass/_main.scss | 2 +-
.../commonUI/general/res/sass/_mixins.scss | 1 +
.../general/res/sass/mobile/_constants.scss | 2 +-
.../general/res/sass/mobile/_layout.scss | 82 +++++----
.../general/res/sass/mobile/_tree.scss | 13 +-
.../res/sass/mobile/controls/_menus.scss | 2 +-
.../res/sass/user-environ/_object-browse.scss | 1 +
10 files changed, 158 insertions(+), 134 deletions(-)
diff --git a/platform/commonUI/browse/res/templates/browse.html b/platform/commonUI/browse/res/templates/browse.html
index ce7cb41cb1..8bb6b7fa8e 100644
--- a/platform/commonUI/browse/res/templates/browse.html
+++ b/platform/commonUI/browse/res/templates/browse.html
@@ -38,13 +38,14 @@
</div>
<mct-splitter class="mobile-hide"></mct-splitter>
- <div class='split-pane-component items pane mobile-pane right-repr'>
- <div class='holder abs l-mobile' id='content-area'>
- <mct-representation mct-object="navigatedObject" key="'browse-object'">
- </mct-representation>
- </div>
- <div class="left key-properties ui-symbol icon mobile-menu-icon" ng-click="treeSlide()">m</div>
- </div>
+
+ <div class='split-pane-component items pane mobile-pane right-repr'>
+ <div class='holder abs l-mobile' id='content-area'>
+ <mct-representation mct-object="navigatedObject" key="'browse-object'">
+ </mct-representation>
+ </div>
+ <div class="key-properties ui-symbol icon mobile-menu-icon desktop-hide" ng-click="treeSlide()">m</div>
+ </div>
</mct-split-pane>
</div>
<mct-include key="'bottombar'"></mct-include>
diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index 9605e2ee4e..1ead13f014 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -870,7 +870,7 @@ mct-container {
@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) {
/* line 120, ../sass/mobile/_layout.scss */
.browse-showtree .mobile-pane.left-menu {
- right: 19px !important; } }
+ right: 10% !important; } }
@media screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
/* line 120, ../sass/mobile/_layout.scss */
.browse-showtree .mobile-pane.left-menu {
@@ -896,7 +896,8 @@ mct-container {
@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) {
/* line 144, ../sass/mobile/_layout.scss */
.browse-showtree .mobile-pane.right-repr {
- width: 19px !important; } }
+ left: 0 !important;
+ transform: translateX(90%); } }
@media screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
/* line 144, ../sass/mobile/_layout.scss */
.browse-showtree .mobile-pane.right-repr {
@@ -910,38 +911,39 @@ mct-container {
.browse-showtree .mobile-pane.right-repr {
width: 70% !important; } }
-/* line 168, ../sass/mobile/_layout.scss */
-.mobile-menu-icon {
- position: absolute;
- top: 10px;
- left: 10px; }
-
@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
- /* line 176, ../sass/mobile/_layout.scss */
- .object-header {
- position: relative;
- left: 44px; }
- /* line 181, ../sass/mobile/_layout.scss */
- .object-header .label .context-available {
- opacity: 1 !important; } }
+ /* line 171, ../sass/mobile/_layout.scss */
+ .mobile-menu-icon {
+ font-size: 110%;
+ position: absolute;
+ top: 12px;
+ left: 10px; }
+
+ /* line 178, ../sass/mobile/_layout.scss */
+ .object-browse-bar {
+ display: block !important;
+ left: 35px !important; }
+ /* line 183, ../sass/mobile/_layout.scss */
+ .object-browse-bar .context-available {
+ opacity: 1 !important; }
-@media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
/* line 188, ../sass/mobile/_layout.scss */
- .desktop-hide {
- display: none; } }
+ .tree-holder {
+ overflow-x: hidden !important; }
-@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
- /* line 195, ../sass/mobile/_layout.scss */
- .mobile-hide {
- display: none; } }
+ /* line 192, ../sass/mobile/_layout.scss */
+ .mobile-disable-select {
+ -moz-user-select: -moz-none;
+ -ms-user-select: none;
+ -webkit-user-select: none;
+ user-select: none; }
-@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
- /* line 201, ../sass/mobile/_layout.scss */
- .mobile-important-hide {
- display: none !important; } }
+ /* line 197, ../sass/mobile/_layout.scss */
+ .mobile-hide,
+ .mobile-hide-important {
+ display: none !important; }
-@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
- /* line 207, ../sass/mobile/_layout.scss */
+ /* line 202, ../sass/mobile/_layout.scss */
.mobile-back-hide {
pointer-events: none;
-moz-transition-property: opacity;
@@ -956,10 +958,9 @@ mct-container {
-o-transition-timing-function: ease-in-out;
-webkit-transition-timing-function: ease-in-out;
transition-timing-function: ease-in-out;
- opacity: 0; } }
+ opacity: 0; }
-@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
- /* line 216, ../sass/mobile/_layout.scss */
+ /* line 207, ../sass/mobile/_layout.scss */
.mobile-back-unhide {
pointer-events: all;
-moz-transition-property: opacity;
@@ -975,25 +976,54 @@ mct-container {
-webkit-transition-timing-function: ease-in-out;
transition-timing-function: ease-in-out;
opacity: 1; } }
-
-@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
- /* line 225, ../sass/mobile/_layout.scss */
- .phone-hide {
+@media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
+ /* line 214, ../sass/mobile/_layout.scss */
+ .desktop-hide {
display: none; } }
-@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
- /* line 231, ../sass/mobile/_layout.scss */
- .tree-holder {
- overflow-x: hidden !important; } }
+/*
-@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
- /* line 236, ../sass/mobile/_layout.scss */
- .mobile-disable-select {
- -moz-user-select: -moz-none;
- -ms-user-select: none;
- -webkit-user-select: none;
- user-select: none; } }
+.mobile-back-hide {
+ @include phoneandtablet {
+ pointer-events: none;
+ @include trans-prop-nice(opacity, .4s);
+ opacity: 0;
+ }
+}
+
+// Hides objects on phone and tablet
+.mobile-back-unhide {
+ @include phoneandtablet {
+ pointer-events: all;
+ @include trans-prop-nice(opacity, .4s);
+ opacity: 1;
+ }
+}
+
+
+// Hides objects only on the phone
+.phone-hide {
+ @include phone {
+ display: none;
+ }
+}
+
+.tree-holder {
+ @include phoneandtablet {
+ .tree-holder {
+ overflow-x: hidden !important;
+ }
+ }
+}
+.mobile-disable-select {
+ @include phoneandtablet {
+ .mobile-disable-select {
+ @include user-select(none);
+ }
+ }
+}
+*/
/*****************************************************************************
* Open MCT Web, Copyright (c) 2014-2015, United States Government
* as represented by the Administrator of the National Aeronautics and Space
@@ -3047,39 +3077,6 @@ label.checkbox.custom {
right: 0;
width: auto; }
-/*****************************************************************************
- * Open MCT Web, Copyright (c) 2014-2015, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT Web 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 Web 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.
- *****************************************************************************/
-/* line 25, ../sass/mobile/controls/_menus.scss */
-.mobile-menu-icon {
- display: inline-block; }
- @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
- /* line 25, ../sass/mobile/controls/_menus.scss */
- .mobile-menu-icon {
- font-size: 21px; } }
- @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
- /* line 25, ../sass/mobile/controls/_menus.scss */
- .mobile-menu-icon {
- display: none; } }
-
/* line 1, ../sass/controls/_time-controller.scss */
.l-time-controller {
position: relative;
@@ -4706,13 +4703,16 @@ input[type="text"] {
left: 0px;
width: auto;
height: auto;
+ -moz-box-sizing: border-box;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
height: 24px;
line-height: 24px;
white-space: nowrap; }
- /* line 28, ../sass/user-environ/_object-browse.scss */
+ /* line 29, ../sass/user-environ/_object-browse.scss */
.object-browse-bar .left {
padding-right: 5px; }
- /* line 30, ../sass/user-environ/_object-browse.scss */
+ /* line 31, ../sass/user-environ/_object-browse.scss */
.object-browse-bar .left .l-back {
display: inline-block;
float: left;
diff --git a/platform/commonUI/general/res/css/tree.css b/platform/commonUI/general/res/css/tree.css
index 6ddab967f0..0566559e1b 100644
--- a/platform/commonUI/general/res/css/tree.css
+++ b/platform/commonUI/general/res/css/tree.css
@@ -324,28 +324,28 @@ ul.tree {
* at runtime from the About dialog for additional information.
*****************************************************************************/
@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
- /* line 30, ../sass/mobile/_tree.scss */
+ /* line 28, ../sass/mobile/_tree.scss */
ul.tree li span.tree-item {
height: 35px;
line-height: 35px;
margin-bottom: 0px; }
- /* line 35, ../sass/mobile/_tree.scss */
+ /* line 33, ../sass/mobile/_tree.scss */
ul.tree li span.tree-item .view-control {
position: absolute;
font-size: 1.1em;
right: 0px;
width: 30px;
text-align: center; }
- /* line 44, ../sass/mobile/_tree.scss */
+ /* line 42, ../sass/mobile/_tree.scss */
ul.tree li span.tree-item .label {
left: 0;
right: 35px;
- font-size: 1.2em; }
- /* line 51, ../sass/mobile/_tree.scss */
+ font-size: 1.1em; }
+ /* line 50, ../sass/mobile/_tree.scss */
ul.tree li span.tree-item .label .type-icon {
top: 9px;
bottom: auto;
height: 16px; }
- /* line 62, ../sass/mobile/_tree.scss */
+ /* line 61, ../sass/mobile/_tree.scss */
ul.tree ul.tree {
margin-left: 20px; } }
diff --git a/platform/commonUI/general/res/sass/_main.scss b/platform/commonUI/general/res/sass/_main.scss
index 1073f325cc..18dc5aa1e1 100644
--- a/platform/commonUI/general/res/sass/_main.scss
+++ b/platform/commonUI/general/res/sass/_main.scss
@@ -48,7 +48,7 @@
@import "controls/controls";
@import "controls/lists";
@import "controls/menus";
-@import "mobile/controls/menus";
+//@import "mobile/controls/menus";
@import "controls/time-controller";
@import "edit/editor";
@import "features/imagery";
diff --git a/platform/commonUI/general/res/sass/_mixins.scss b/platform/commonUI/general/res/sass/_mixins.scss
index a42a2f480d..bc97b6a521 100644
--- a/platform/commonUI/general/res/sass/_mixins.scss
+++ b/platform/commonUI/general/res/sass/_mixins.scss
@@ -368,6 +368,7 @@
}
@mixin tmpBorder($c: #ffcc00, $a: 0.75) {
+ @inlude box-sizing(border-box);
border: 1px dotted rgba($c, $a);
}
diff --git a/platform/commonUI/general/res/sass/mobile/_constants.scss b/platform/commonUI/general/res/sass/mobile/_constants.scss
index 9d7357126e..aedd4c3abd 100644
--- a/platform/commonUI/general/res/sass/mobile/_constants.scss
+++ b/platform/commonUI/general/res/sass/mobile/_constants.scss
@@ -81,7 +81,7 @@ $desktopPortrait: "screen and #{$desktopPortraitCheck}";
$desktopLandscape: "screen and #{$desktopLandscapeCheck}";
/************************** DEVICE PARAMETERS FOR MENUS/REPRESENTATIONS */
-$phoneRepSizePortrait: 19px;
+$phoneRepSizePortrait: 10%;
$phoneRepSizeLandscape: 60%;
$tabletRepSizePortrait: 500px;
$tabletRepSizeLandscape: 70%;
diff --git a/platform/commonUI/general/res/sass/mobile/_layout.scss b/platform/commonUI/general/res/sass/mobile/_layout.scss
index 9609ed1fdd..e13334ec61 100644
--- a/platform/commonUI/general/res/sass/mobile/_layout.scss
+++ b/platform/commonUI/general/res/sass/mobile/_layout.scss
@@ -149,7 +149,9 @@
// On both phones and tablets, the width of
// the right pane is specified
@include phonePortrait {
- width: $phoneRepSizePortrait !important;
+ //width: $phoneRepSizePortrait !important;
+ left: 0 !important;
+ transform: translateX(100% - $phoneRepSizePortrait);
}
@include phoneLandscape {
width: $phoneRepSizeLandscape !important;
@@ -165,24 +167,48 @@
}
}
-.mobile-menu-icon {
- position: absolute;
- top: $bodyMargin; left: $bodyMargin;
-}
+@include phoneandtablet {
+ .mobile-menu-icon {
+ font-size: 110%;
+ position: absolute;
+ top: $bodyMargin + 2;
+ left: $bodyMargin;
+ }
-// Object header must be moved
-// over to make space for the
-// hamburger icon
-.object-header {
- @include phoneandtablet {
- position: relative;
- left: 44px;
- .label {
- .context-available {
- opacity: 1 !important;
- }
+ .object-browse-bar {
+ //@include test();
+ display: block !important;
+ //font-size: 0.95em;
+ left: 35px !important;
+ .context-available {
+ opacity: 1 !important;
}
}
+
+ .tree-holder {
+ overflow-x: hidden !important;
+ }
+
+ .mobile-disable-select {
+ @include user-select(none);
+ }
+
+ // Hides objects on phone and tablet
+ .mobile-hide,
+ .mobile-hide-important {
+ display: none !important;
+ }
+
+ .mobile-back-hide {
+ pointer-events: none;
+ @include trans-prop-nice(opacity, .4s);
+ opacity: 0;
+ }
+ .mobile-back-unhide {
+ pointer-events: all;
+ @include trans-prop-nice(opacity, .4s);
+ opacity: 1;
+ }
}
.desktop-hide {
@@ -191,18 +217,7 @@
}
}
-// Hides objects on phone and tablet
-.mobile-hide {
- @include phoneandtablet {
- display: none;
- }
-}
-
-.mobile-important-hide {
- @include phoneandtablet {
- display: none !important;
- }
-}
+/*
.mobile-back-hide {
@include phoneandtablet {
@@ -212,6 +227,7 @@
}
}
+
// Hides objects on phone and tablet
.mobile-back-unhide {
@include phoneandtablet {
@@ -221,6 +237,7 @@
}
}
+
// Hides objects only on the phone
.phone-hide {
@include phone {
@@ -230,11 +247,16 @@
.tree-holder {
@include phoneandtablet {
- overflow-x: hidden !important;
+ .tree-holder {
+ overflow-x: hidden !important;
+ }
}
}
.mobile-disable-select {
@include phoneandtablet {
- @include user-select(none);
+ .mobile-disable-select {
+ @include user-select(none);
+ }
}
}
+*/
\ No newline at end of file
diff --git a/platform/commonUI/general/res/sass/mobile/_tree.scss b/platform/commonUI/general/res/sass/mobile/_tree.scss
index 6918b8f217..5cc0ac1b25 100644
--- a/platform/commonUI/general/res/sass/mobile/_tree.scss
+++ b/platform/commonUI/general/res/sass/mobile/_tree.scss
@@ -20,10 +20,8 @@
* at runtime from the About dialog for additional information.
*****************************************************************************/
-
-ul.tree {
- // Only applies to phones and tablets
- @include phoneandtablet {
+@include phoneandtablet {
+ ul.tree {
//@include menuUlReset();
li {
//border-top: 1px solid $colorInteriorBorder; // TEMP
@@ -39,7 +37,7 @@ ul.tree {
right: 0px;
width: $mobileTreeRightArrowW;
text-align: center;
- }
+ }
.label {
// Designates the starting left margin
@@ -47,13 +45,14 @@ ul.tree {
// Also adds right space for selection button
left: 0;
right: $mobileTreeRightArrowW + $interiorMargin; // Allows tree item name to stop prior to the arrow
- font-size: 1.2em;
+ font-size: 1.1em;
+ //font-size: 1.2em; // CH CO
.type-icon {
@include verticalCenterBlock($mobileTreeItemH, $treeTypeIconH);
}
.title-label {
}
- }
+ }
}
}
diff --git a/platform/commonUI/general/res/sass/mobile/controls/_menus.scss b/platform/commonUI/general/res/sass/mobile/controls/_menus.scss
index d738f63d4a..e06fdb7979 100644
--- a/platform/commonUI/general/res/sass/mobile/controls/_menus.scss
+++ b/platform/commonUI/general/res/sass/mobile/controls/_menus.scss
@@ -30,5 +30,5 @@
}
@include desktop {
display: none;
- }
+ }
}
diff --git a/platform/commonUI/general/res/sass/user-environ/_object-browse.scss b/platform/commonUI/general/res/sass/user-environ/_object-browse.scss
index fc1065acec..3ec809343a 100644
--- a/platform/commonUI/general/res/sass/user-environ/_object-browse.scss
+++ b/platform/commonUI/general/res/sass/user-environ/_object-browse.scss
@@ -21,6 +21,7 @@
*****************************************************************************/
.object-browse-bar {
@include absPosDefault();
+ @include box-sizing(border-box);
height: $ueTopBarH;
line-height: $ueTopBarH;
white-space: nowrap;