[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;

platform/commonUI/browse/res/templates/items/grid-item.html

@@ -24,7 +24,7 @@
     <div class='contents abs'>
         <div class='top-bar bar abs'>
             <div class='ui-symbol profile' title='Shared'>&#x4f;</div>
-            <!--mct-representation class="desktop-hide" key="'info-button'" mct-object="domainObject"></mct-representation-->
+            <mct-representation class="desktop-hide" key="'info-button'" mct-object="domainObject"></mct-representation>
         </div>
         <div class='item-main abs'>
             <div class='ui-symbol icon lg item-type'>

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;
+$phoneItemH: floor($ueBrowseGridItemLg/4);
-$tablet-itemHeight: $ueBrowseGridItemLg/3;
+$tabletItemH: floor($ueBrowseGridItemLg/3);
 
 /************************** MOBILE TREE MENU DIMENSIONS */
 $mobile-treeHeight: 38px;

platform/commonUI/general/res/sass/mobile/_item.scss

@@ -27,103 +27,92 @@
 .items-holder {
     .item {
         &.grid-item {
-            $dWid: $ueBrowseGridItemLg;
+            $titleH: 30px;
-            $dHei: $ueBrowseGridItemLg;
             @include phoneandtablet {
-                $dWid: 100%;
+                width: 100%;
-                .mobile-grid-nav {
+                >.contents {
-                    top: 0px;
+                    top: 0px; right: $interiorMarginLg; bottom: 0px; left: $interiorMarginLg;
-                    bottom: 0px;
-                    right: 55px;
-                }
-                .mobile-info {
-                    text-align: center;
-                    width: 50px;
-                    right: 0px;
-                    left: auto;
-                    font-size: 1.3em;
                 }
                 .bar {
-                    &.bottom-bar.abs {
+                    &.top-bar {
-                        top: 0px;
+                        // Becomes the right side of the item
-                        height: auto;
+                        //@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;
+                        //@include test(blue);
-                        top: 0px;
+                        font-size: $mobileListIconSize;
-                        left: 0px;
+                        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;
+                $dHei: $phoneItemH;
-                width: $dWid;
                 height: $dHei;
-                .mobile-right {
+                .bar {
-                    top: 100%;
+                    &.top-bar {
-                }
+                        // Becomes the right side of the item
-                .mobile-info {
+                        line-height: $dHei !important;
-                    line-height: $phone-itemHeight * .5;
+                    }
+                    &.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;
+                $dHei: $tabletItemH;
-                width: $dWid;
                 height: $dHei;
-                .mobile-right {
+                .bar {
-                    top: 100%;
+                    &.top-bar {
-                }
+                        // Becomes the right side of the item
-                
+                        line-height: $dHei !important;
-                .mobile-info {
+                    }
-                    line-height: $tablet-itemHeight * .57;
+                    &.bottom-bar {
+                        @include verticalCenterBlock($dHei, $mobileTitleDescH);
+                    }
                 }
                 .item-main {
                     .item-type {
-                        font-size: $mobile-listIcon;
+                        @include verticalCenterBlock($dHei, $mobileListIconSize);
-                        line-height: $tablet-itemHeight * .75;
+                    }
+                    .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; 
             }
         }
     }

platform/commonUI/general/res/templates/tree-node.html

@@ -25,12 +25,12 @@
 	        class="tree-item menus-to-left"
 	        ng-class="{selected: treeNode.isSelected()}"
 	        >
-            <mct-representation                                
+            <mct-representation
                 key="'label'"
 				mct-object="domainObject"
 				ng-model="ngModel"
-				ng-click="!treeNode.checkMobile() ? ngModel.selectedObject = domainObject :
+				ng-click="!treeNode.checkMobile() || model.composition == undefined ?
-                          toggle.toggle(); treeNode.trackExpansion()"
+				ngModel.selectedObject = domainObject : toggle.toggle(); treeNode.trackExpansion()"
 				>
             </mct-representation>
             <span

platform/commonUI/inspect/res/templates/info-button.html

@@ -21,6 +21,5 @@
 -->
 
 <!--The icon for the info button appearing in a grid item (list in folder)-->
-<div>
+<a class='ui-symbol icon mobile-info'>&#xe608;</a>
-    <a class='ui-symbol icon mobile-info'>i</a>
+
-</div>

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(