diff --git a/platform/commonUI/general/res/sass/mobile/_constants.scss b/platform/commonUI/general/res/sass/mobile/_constants.scss
index 6a3a32c0db..d69084086e 100644
--- a/platform/commonUI/general/res/sass/mobile/_constants.scss
+++ b/platform/commonUI/general/res/sass/mobile/_constants.scss
@@ -21,11 +21,12 @@
*****************************************************************************/
/************************** MOBILE REPRESENTATION ITEMS DIMENSIONS */
-$mobile-listIcon: 30px;
+$mobileListIconSize: 30px;
+$mobileTitleDescH: 35px;
$mobile-listRight: 10px;
-$phone-itemHeight: $ueBrowseGridItemLg/4;
-$tablet-itemHeight: $ueBrowseGridItemLg/3;
+$phoneItemH: floor($ueBrowseGridItemLg/4);
+$tabletItemH: floor($ueBrowseGridItemLg/3);
/************************** MOBILE TREE MENU DIMENSIONS */
$mobile-treeHeight: 38px;
diff --git a/platform/commonUI/general/res/sass/mobile/_item.scss b/platform/commonUI/general/res/sass/mobile/_item.scss
index 88f08cb343..717e589cb5 100644
--- a/platform/commonUI/general/res/sass/mobile/_item.scss
+++ b/platform/commonUI/general/res/sass/mobile/_item.scss
@@ -27,103 +27,92 @@
.items-holder {
.item {
&.grid-item {
- $dWid: $ueBrowseGridItemLg;
- $dHei: $ueBrowseGridItemLg;
+ $titleH: 30px;
@include phoneandtablet {
- $dWid: 100%;
- .mobile-grid-nav {
- top: 0px;
- bottom: 0px;
- right: 55px;
- }
- .mobile-info {
- text-align: center;
- width: 50px;
- right: 0px;
- left: auto;
- font-size: 1.3em;
+ width: 100%;
+ >.contents {
+ top: 0px; right: $interiorMarginLg; bottom: 0px; left: $interiorMarginLg;
}
.bar {
- &.bottom-bar.abs {
- top: 0px;
- height: auto;
+ &.top-bar {
+ // Becomes the right side of the item
+ //@include test(blue);
+ bottom: 0 !important; left: auto !important; right: 20px !important;
+ width: 40px !important; height: auto !important;
+ text-align: right;
+ }
+ &.bottom-bar {
+ // Becomes the left side of the item
+ left: $mobileListIconSize + $interiorMarginLg;
+ right: 60px;
}
}
.item-main {
.item-type {
- font-size: $mobile-listIcon;
- top: 0px;
- left: 0px;
+ //@include test(blue);
+ font-size: $mobileListIconSize;
+ right: auto;
+ bottom: auto;
+ left: 0;
+ line-height: 100%;
text-align: left;
- height: auto
+ width: $mobileListIconSize;
+ .l-icon-link {
+ bottom: 0;
+ }
}
.item-open {
- display: none;
+ display: block;
+ opacity: 1;
+ font-size: 1em;
+ width: auto;
}
}
- .title, .details {
- margin-left: $mobile-listIcon;
- }
}
@include phone {
- $dHei: $phone-itemHeight;
- width: $dWid;
+ $dHei: $phoneItemH;
height: $dHei;
- .mobile-right {
- top: 100%;
- }
- .mobile-info {
- line-height: $phone-itemHeight * .5;
+ .bar {
+ &.top-bar {
+ // Becomes the right side of the item
+ line-height: $dHei !important;
+ }
+ &.bottom-bar {
+ @include verticalCenterBlock($dHei, $mobileTitleDescH);
+ }
}
.item-main {
.item-type {
- line-height: $phone-itemHeight * .8;
+ @include verticalCenterBlock($dHei, $mobileListIconSize);
+ }
+ .item-open {
+ line-height: $dHei;
}
}
- .title {
- margin-right: $mobile-listRight;
- line-height: $phone-itemHeight * .5;
- }
- .details {
- margin-right: $mobile-listRight;
- line-height: 0px;
- }
}
@include tablet {
- $dHei: $tablet-itemHeight;
- width: $dWid;
+ $dHei: $tabletItemH;
height: $dHei;
- .mobile-right {
- top: 100%;
- }
-
- .mobile-info {
- line-height: $tablet-itemHeight * .57;
+ .bar {
+ &.top-bar {
+ // Becomes the right side of the item
+ line-height: $dHei !important;
+ }
+ &.bottom-bar {
+ @include verticalCenterBlock($dHei, $mobileTitleDescH);
+ }
}
.item-main {
.item-type {
- font-size: $mobile-listIcon;
- line-height: $tablet-itemHeight * .75;
+ @include verticalCenterBlock($dHei, $mobileListIconSize);
+ }
+ .item-open {
+ line-height: $dHei;
}
}
- .title {
- margin-right: $mobile-listRight;
- line-height: $tablet-itemHeight * .57;
- }
- .details {
- margin-right: $mobile-listRight;
- line-height: 0px;
- }
- }
-
- @include desktop {
- $dWid: $ueBrowseGridItemLg;
- $dHei: $ueBrowseGridItemLg;
- width: $dWid;
- height: $dHei;
}
}
}
diff --git a/platform/commonUI/general/res/templates/tree-node.html b/platform/commonUI/general/res/templates/tree-node.html
index 39d6c064e6..0075b65045 100644
--- a/platform/commonUI/general/res/templates/tree-node.html
+++ b/platform/commonUI/general/res/templates/tree-node.html
@@ -25,12 +25,12 @@
class="tree-item menus-to-left"
ng-class="{selected: treeNode.isSelected()}"
>
-
-
+
+
diff --git a/platform/commonUI/inspect/src/gestures/InfoButtonGesture.js b/platform/commonUI/inspect/src/gestures/InfoButtonGesture.js
index d128392534..9dd3cf251c 100644
--- a/platform/commonUI/inspect/src/gestures/InfoButtonGesture.js
+++ b/platform/commonUI/inspect/src/gestures/InfoButtonGesture.js
@@ -68,7 +68,7 @@ define(
// and then on any body touch the bubble is dismissed
function showBubble(event) {
trackPosition(event);
-
+ event.stopPropagation();
// Show the bubble, but on any touchstart on the
// body (anywhere) call hidebubble
dismissBubble = infoService.display(