From 67592def9029bfaf4606ac5d15b1b7403083ce34 Mon Sep 17 00:00:00 2001 From: Charles Hacskaylo Date: Thu, 20 Aug 2015 16:11:45 -0700 Subject: [PATCH] [Mobile] Sanding of mobile styles, in progress open #74 CSS and markup changes for mobile, particularly on grid-item; Mod to behavior in tree for mobile nav: leaf node grid-item click now navs to item; Fixed info-button to work properly with mod to infoButtonGesture.js; --- .../browse/res/templates/items/grid-item.html | 2 +- .../general/res/sass/mobile/_constants.scss | 7 +- .../general/res/sass/mobile/_item.scss | 121 ++++++++---------- .../general/res/templates/tree-node.html | 6 +- .../inspect/res/templates/info-button.html | 5 +- .../inspect/src/gestures/InfoButtonGesture.js | 2 +- 6 files changed, 66 insertions(+), 77 deletions(-) diff --git a/platform/commonUI/browse/res/templates/items/grid-item.html b/platform/commonUI/browse/res/templates/items/grid-item.html index 246a7b54b4..f1fd6dd5ee 100644 --- a/platform/commonUI/browse/res/templates/items/grid-item.html +++ b/platform/commonUI/browse/res/templates/items/grid-item.html @@ -24,7 +24,7 @@
O
- +
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()}" > - -
- i -
+ + 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(