[Mobile] Gestures

Added styling to back and selection
arrow (tree). Also increased the space
allowed for selection arrow on tree item.
Info Button created on grid items for mobile.
Info bubble appears on tablet like desktop.
Also on mobile, info bubble fits to width.
New QueryService that returns if on iPhone.
Also formatted dialog box so that their is no
margin and takes up fullscreen on mobile.

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

@@ -34,7 +34,7 @@
                 .mobile-grid-nav {
                     top: 0px;
                     bottom: 0px;
-                    right: 50px;
+                    right: 55px;
                 }
                 .mobile-info {
                     text-align: center;

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

@@ -75,7 +75,18 @@
            #{$phoneLandscapeEmu},
            #{$tabletPortrait},
            #{$tabletLandscape},
-           #{$tabletLandscapeEmu}{
+           #{$tabletLandscapeEmu} {
+        @content
+    }
+}
+
+// Desktop monitors in any orientation
+@mixin desktopandtablet {
+    @media #{$tabletPortrait},
+           #{$tabletLandscape},
+           #{$tabletLandscapeEmu},
+           #{$desktopPortrait},
+           #{$desktopLandscape} {
         @content
     }
 }

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

@@ -38,19 +38,22 @@ ul.tree {
                     right: $mobile-treeRight;
                     font-size: 1.8em;
                     right: 0px;
-                    width: auto;
+                    width: 35px;
+                    text-align: center;
                 }                   
 
                 .label {
                     // Designates the starting left margin
                     // (indentation) of 'My Items'
+                    // Also adds right space for selection button
                     left: $mobile-startingTreeLeft;
+                    right: 45px;
                     font-size: 1.2em;
                     // Allows tree item name to stop prior
                     // to the arrow
                     .title-label {
                         right: $mobile-treeRight * 1.3;
-                    }                    
+                    }
                 }             
             }
         }

platform/commonUI/general/res/sass/mobile/overlay/_overlay.scss

@@ -0,0 +1,11 @@
+.overlay {
+    @include phoneandtablet {
+        $m: 0;
+        // Removes curved edges on the dialog box
+        // and makes it take up fullscreen
+        >.holder {
+          @include border-radius($m);
+          top: $m; right: $m; bottom: $m; left: $m;
+        }
+    }
+}