diff --git a/platform/commonUI/browse/res/templates/browse.html b/platform/commonUI/browse/res/templates/browse.html index 72d1ab3f1f..8cb1a642f9 100644 --- a/platform/commonUI/browse/res/templates/browse.html +++ b/platform/commonUI/browse/res/templates/browse.html @@ -20,33 +20,32 @@ at runtime from the About dialog for additional information. --> -
-
- -
- -
-
- - -
- - +
+ +
+ +
+
+ +
- - -
-
- - -
-
m
-
- -
- + + +
+ + +
+
+ + +
+
m
+
+
+
+ diff --git a/platform/commonUI/general/res/css/forms.css b/platform/commonUI/general/res/css/forms.css index 7d80703443..bed72af25f 100644 --- a/platform/commonUI/general/res/css/forms.css +++ b/platform/commonUI/general/res/css/forms.css @@ -69,6 +69,7 @@ * this source code distribution or the Licensing information page available * at runtime from the About dialog for additional information. *****************************************************************************/ +/************************** MOBILE TREE MENU DIMENSIONS */ /************************** WINDOW DIMENSIONS FOR RWD */ /************************** MEDIA QUERIES: WINDOW CHECKS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */ /************************** MEDIA QUERIES: WINDOWS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */ diff --git a/platform/commonUI/general/res/css/items.css b/platform/commonUI/general/res/css/items.css index b4152de66d..be1da9dd3d 100644 --- a/platform/commonUI/general/res/css/items.css +++ b/platform/commonUI/general/res/css/items.css @@ -69,6 +69,7 @@ * this source code distribution or the Licensing information page available * at runtime from the About dialog for additional information. *****************************************************************************/ +/************************** MOBILE TREE MENU DIMENSIONS */ /************************** WINDOW DIMENSIONS FOR RWD */ /************************** MEDIA QUERIES: WINDOW CHECKS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */ /************************** MEDIA QUERIES: WINDOWS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */ diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css index 4ea71cfdf8..d0eb24d149 100644 --- a/platform/commonUI/general/res/css/theme-espresso.css +++ b/platform/commonUI/general/res/css/theme-espresso.css @@ -70,6 +70,7 @@ * this source code distribution or the Licensing information page available * at runtime from the About dialog for additional information. *****************************************************************************/ +/************************** MOBILE TREE MENU DIMENSIONS */ /************************** WINDOW DIMENSIONS FOR RWD */ /************************** MEDIA QUERIES: WINDOW CHECKS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */ /************************** MEDIA QUERIES: WINDOWS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */ @@ -742,19 +743,17 @@ mct-container { left: 0; top: 0; right: 0; - left: 0; - white-space: nowrap; - height: 100%; } } + white-space: nowrap; } } @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) { - /* line 38, ../sass/mobile/_layout.scss */ + /* line 37, ../sass/mobile/_layout.scss */ .desktop-browse { min-width: 150px; max-width: 800px; width: 25%; } } @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 52, ../sass/mobile/_layout.scss */ + /* line 51, ../sass/mobile/_layout.scss */ .browse-hidetree .mobile-pane.left-menu { -moz-transition-duration: 0.35s; -o-transition-duration: 0.35s; @@ -780,7 +779,7 @@ mct-container { overflow-y: hidden; overflow-x: hidden; } } @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 66, ../sass/mobile/_layout.scss */ + /* line 65, ../sass/mobile/_layout.scss */ .browse-hidetree .mobile-pane.right-repr { -moz-transition-duration: 0.35s; -o-transition-duration: 0.35s; @@ -792,7 +791,7 @@ mct-container { width: 100% !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 83, ../sass/mobile/_layout.scss */ + /* line 82, ../sass/mobile/_layout.scss */ .browse-showtree .mobile-pane.left-menu { -moz-transition-duration: 0.35s; -o-transition-duration: 0.35s; @@ -816,23 +815,23 @@ mct-container { display: block !important; width: auto !important; } } @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) { - /* line 83, ../sass/mobile/_layout.scss */ + /* line 82, ../sass/mobile/_layout.scss */ .browse-showtree .mobile-pane.left-menu { right: 19px !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 83, ../sass/mobile/_layout.scss */ + /* line 82, ../sass/mobile/_layout.scss */ .browse-showtree .mobile-pane.left-menu { right: 66% !important; } } @media 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) { - /* line 83, ../sass/mobile/_layout.scss */ + /* line 82, ../sass/mobile/_layout.scss */ .browse-showtree .mobile-pane.left-menu { right: 500px !important; } } @media 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 83, ../sass/mobile/_layout.scss */ + /* line 82, ../sass/mobile/_layout.scss */ .browse-showtree .mobile-pane.left-menu { right: 78% !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 108, ../sass/mobile/_layout.scss */ + /* line 107, ../sass/mobile/_layout.scss */ .browse-showtree .mobile-pane.right-repr { -moz-transition-duration: 0.35s; -o-transition-duration: 0.35s; @@ -842,24 +841,24 @@ mct-container { backface-visibility: hidden; left: auto !important; } } @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) { - /* line 108, ../sass/mobile/_layout.scss */ + /* line 107, ../sass/mobile/_layout.scss */ .browse-showtree .mobile-pane.right-repr { width: 19px !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 108, ../sass/mobile/_layout.scss */ + /* line 107, ../sass/mobile/_layout.scss */ .browse-showtree .mobile-pane.right-repr { width: 66% !important; } } @media 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) { - /* line 108, ../sass/mobile/_layout.scss */ + /* line 107, ../sass/mobile/_layout.scss */ .browse-showtree .mobile-pane.right-repr { width: 500px !important; } } @media 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 108, ../sass/mobile/_layout.scss */ + /* line 107, ../sass/mobile/_layout.scss */ .browse-showtree .mobile-pane.right-repr { width: 78% !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 131, ../sass/mobile/_layout.scss */ + /* line 130, ../sass/mobile/_layout.scss */ .button-pos { position: absolute; -moz-transition-duration: 0.35s; @@ -870,23 +869,23 @@ mct-container { backface-visibility: hidden; } } @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 141, ../sass/mobile/_layout.scss */ + /* line 140, ../sass/mobile/_layout.scss */ .object-header-mobile { position: relative; left: 30px; } } @media 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 141, ../sass/mobile/_layout.scss */ + /* line 140, ../sass/mobile/_layout.scss */ .object-header-mobile { position: relative; left: 35px; } } @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 153, ../sass/mobile/_layout.scss */ + /* line 152, ../sass/mobile/_layout.scss */ .mobile-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) { - /* line 160, ../sass/mobile/_layout.scss */ + /* line 159, ../sass/mobile/_layout.scss */ .phone-hide { display: none; } } diff --git a/platform/commonUI/general/res/css/tree.css b/platform/commonUI/general/res/css/tree.css index 9d2ee8c87d..fb80f74fd0 100644 --- a/platform/commonUI/general/res/css/tree.css +++ b/platform/commonUI/general/res/css/tree.css @@ -69,6 +69,7 @@ * this source code distribution or the Licensing information page available * at runtime from the About dialog for additional information. *****************************************************************************/ +/************************** MOBILE TREE MENU DIMENSIONS */ /************************** WINDOW DIMENSIONS FOR RWD */ /************************** MEDIA QUERIES: WINDOW CHECKS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */ /************************** MEDIA QUERIES: WINDOWS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */ @@ -318,18 +319,21 @@ ul.tree { padding: 0; } /* line 29, ../sass/mobile/_tree.scss */ ul.tree li span.tree-item { + height: 38px; + line-height: 38px; margin-top: 3px; } - /* line 32, ../sass/mobile/_tree.scss */ + /* line 34, ../sass/mobile/_tree.scss */ ul.tree li span.tree-item .view-control { position: absolute; - right: 5px; - font-size: 1.5em; } - /* line 38, ../sass/mobile/_tree.scss */ + right: 13px; + font-size: 1.8em; } + /* line 40, ../sass/mobile/_tree.scss */ ul.tree li span.tree-item .label { - left: 3px; } - /* line 44, ../sass/mobile/_tree.scss */ + left: 3px; + font-size: 1.2em; } + /* line 47, ../sass/mobile/_tree.scss */ ul.tree li span.tree-item .label .title-label { - right: 5px; } - /* line 53, ../sass/mobile/_tree.scss */ + right: 16.9px; } + /* line 56, ../sass/mobile/_tree.scss */ ul.tree ul.tree { margin-left: 3px; } } diff --git a/platform/commonUI/general/res/sass/mobile/_constants.scss b/platform/commonUI/general/res/sass/mobile/_constants.scss index 198bf6f652..ee90144c55 100644 --- a/platform/commonUI/general/res/sass/mobile/_constants.scss +++ b/platform/commonUI/general/res/sass/mobile/_constants.scss @@ -20,6 +20,11 @@ * at runtime from the About dialog for additional information. *****************************************************************************/ +/************************** MOBILE TREE MENU DIMENSIONS */ +$mobile-treeHeight: 38px; +$mobile-treeLeft: 3px; +$mobile-treeRight: 13px; + /************************** WINDOW DIMENSIONS FOR RWD */ $phoMaxW: 514px; $phoMaxH: 740px; diff --git a/platform/commonUI/general/res/sass/mobile/_layout.scss b/platform/commonUI/general/res/sass/mobile/_layout.scss index e2699b62c6..c727c63ef6 100644 --- a/platform/commonUI/general/res/sass/mobile/_layout.scss +++ b/platform/commonUI/general/res/sass/mobile/_layout.scss @@ -27,9 +27,8 @@ @include phoneandtablet { position: absolute; left: 0; top: 0; - right: 0; left: 0; + right: 0; white-space: nowrap; - height: 100%; } } diff --git a/platform/commonUI/general/res/sass/mobile/_tree.scss b/platform/commonUI/general/res/sass/mobile/_tree.scss index c0806a806c..2137429ca7 100644 --- a/platform/commonUI/general/res/sass/mobile/_tree.scss +++ b/platform/commonUI/general/res/sass/mobile/_tree.scss @@ -28,21 +28,24 @@ ul.tree { li { span.tree-item { // Adds some space to the top of each tree item + height: $mobile-treeHeight; + line-height: $mobile-treeHeight; margin-top: $interiorMarginSm; .view-control { position: absolute; - right: 5px; - font-size: 1.5em; + right: $mobile-treeRight; + font-size: 1.8em; } .label { // Designates the starting left margin // (indentation) of 'My Items' - left: 3px; + left: $mobile-treeLeft; + font-size: 1.2em; // Allows tree item name to stop prior // to the arrow .title-label { - right: 5px; + right: $mobile-treeRight * 1.3; } } } @@ -51,7 +54,7 @@ ul.tree { // Sets the margin on the left, which causes the // running indentation after each folder is made ul.tree { - margin-left: 3px; + margin-left: $mobile-treeLeft; } } }