From 0c6a9ca857fc9730c5973aa4165034744e79842e Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Mon, 6 Jul 2015 13:15:38 -0700
Subject: [PATCH 001/209] [Mobile] Styles

Added new style to set the width
of the tree.
---
 .../commonUI/browse/res/templates/browse.html |   4 +-
 .../general/res/css/theme-espresso.css        | 113 ++++++++++--------
 .../res/sass/user-environ/_layout.scss        |   5 +
 3 files changed, 71 insertions(+), 51 deletions(-)

diff --git a/platform/commonUI/browse/res/templates/browse.html b/platform/commonUI/browse/res/templates/browse.html
index 0a7698e8bd..7d87c5f453 100644
--- a/platform/commonUI/browse/res/templates/browse.html
+++ b/platform/commonUI/browse/res/templates/browse.html
@@ -23,8 +23,8 @@
     <mct-include key="'topbar-browse'"></mct-include>
     <div class="holder browse-area s-browse-area abs" ng-controller="BrowseController">
         <mct-split-pane class='contents abs' anchor='left'>
-            <div class='split-pane-component treeview pane'
-                 style="min-width: 150px; max-width: 800px; width: 25%;">
+            <div class='split-pane-component treeview pane browser-manage'>
+<!--                style="min-width: 150px; max-width: 800px; width: 25%;"-->
                 <mct-representation key="'create-button'" mct-object="navigatedObject">
                 </mct-representation>
                 <div class='holder tree-holder abs'>
diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index 49c5675a07..ca0fba3fe5 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -473,7 +473,11 @@ mct-container {
   -webkit-border-radius: 3px;
   border-radius: 3px; }
 
-/* line 50, ../sass/user-environ/_layout.scss */
+/* line 51, ../sass/user-environ/_layout.scss */
+.browser-manage {
+  width: 100%; }
+
+/* line 55, ../sass/user-environ/_layout.scss */
 .contents {
   box-sizing: border-box;
   position: absolute;
@@ -481,36 +485,36 @@ mct-container {
   right: 0;
   bottom: 0;
   left: 0; }
-  /* line 58, ../sass/user-environ/_layout.scss */
+  /* line 63, ../sass/user-environ/_layout.scss */
   .contents.nomargin {
     right: 0px;
     bottom: 0px;
     left: 0px; }
 
-/* line 67, ../sass/user-environ/_layout.scss */
+/* line 72, ../sass/user-environ/_layout.scss */
 .bar .icon.major {
   margin-right: 5px; }
-/* line 70, ../sass/user-environ/_layout.scss */
+/* line 75, ../sass/user-environ/_layout.scss */
 .bar.abs, .btn-menu span.bar.l-click-area {
   text-wrap: none;
   white-space: nowrap; }
-/* line 74, ../sass/user-environ/_layout.scss */
+/* line 79, ../sass/user-environ/_layout.scss */
 .bar.left,
 .bar .left {
   width: 45% !important;
   right: auto !important; }
-/* line 79, ../sass/user-environ/_layout.scss */
+/* line 84, ../sass/user-environ/_layout.scss */
 .bar.right,
 .bar .right {
   width: 45% !important;
   left: auto !important;
   text-align: right; }
-  /* line 84, ../sass/user-environ/_layout.scss */
+  /* line 89, ../sass/user-environ/_layout.scss */
   .bar.right .icon.major,
   .bar .right .icon.major {
     margin-left: 15px; }
 
-/* line 91, ../sass/user-environ/_layout.scss */
+/* line 96, ../sass/user-environ/_layout.scss */
 .user-environ .browse-area,
 .user-environ .edit-area,
 .user-environ .editor {
@@ -518,23 +522,23 @@ mct-container {
   right: 10px;
   bottom: 35px;
   left: 10px; }
-/* line 102, ../sass/user-environ/_layout.scss */
+/* line 107, ../sass/user-environ/_layout.scss */
 .user-environ .browse-area > .contents,
 .user-environ .edit-area > .contents {
   left: 0;
   right: 0; }
-/* line 108, ../sass/user-environ/_layout.scss */
+/* line 113, ../sass/user-environ/_layout.scss */
 .user-environ .edit-area {
   top: 45px; }
-  /* line 111, ../sass/user-environ/_layout.scss */
+  /* line 116, ../sass/user-environ/_layout.scss */
   .user-environ .edit-area .tool-bar {
     bottom: auto;
     height: 30px;
     line-height: 25px; }
-  /* line 116, ../sass/user-environ/_layout.scss */
+  /* line 121, ../sass/user-environ/_layout.scss */
   .user-environ .edit-area .work-area {
     top: 40px; }
-/* line 121, ../sass/user-environ/_layout.scss */
+/* line 126, ../sass/user-environ/_layout.scss */
 .user-environ .bottom-bar {
   overflow: hidden;
   position: absolute;
@@ -546,20 +550,20 @@ mct-container {
   height: auto;
   top: auto;
   height: 25px; }
-  /* line 126, ../sass/user-environ/_layout.scss */
+  /* line 131, ../sass/user-environ/_layout.scss */
   .user-environ .bottom-bar .status-holder {
     z-index: 1; }
-  /* line 130, ../sass/user-environ/_layout.scss */
+  /* line 135, ../sass/user-environ/_layout.scss */
   .user-environ .bottom-bar .app-logo {
     left: auto;
     width: 105px;
     z-index: 2; }
 
-/* line 138, ../sass/user-environ/_layout.scss */
+/* line 143, ../sass/user-environ/_layout.scss */
 .cols {
   overflow: hidden;
   *zoom: 1; }
-  /* line 140, ../sass/user-environ/_layout.scss */
+  /* line 145, ../sass/user-environ/_layout.scss */
   .cols .col {
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
@@ -570,100 +574,100 @@ mct-container {
     margin-left: 1.5%;
     padding-left: 5px;
     position: relative; }
-    /* line 148, ../sass/user-environ/_layout.scss */
+    /* line 153, ../sass/user-environ/_layout.scss */
     .cols .col:first-child {
       margin-left: 0;
       padding-left: 0; }
-  /* line 155, ../sass/user-environ/_layout.scss */
+  /* line 160, ../sass/user-environ/_layout.scss */
   .cols.cols-2 .col-1 {
     min-width: 250px;
     width: 48.5%; }
-  /* line 161, ../sass/user-environ/_layout.scss */
+  /* line 166, ../sass/user-environ/_layout.scss */
   .cols.cols-2-ff .col-100px {
     width: 100px; }
-  /* line 168, ../sass/user-environ/_layout.scss */
+  /* line 173, ../sass/user-environ/_layout.scss */
   .cols.cols-6 .col-1 {
     min-width: 83.33333px;
     width: 15.16667%; }
-  /* line 174, ../sass/user-environ/_layout.scss */
+  /* line 179, ../sass/user-environ/_layout.scss */
   .cols.cols-16 .col-1 {
     min-width: 31.25px;
     width: 4.75%; }
-  /* line 177, ../sass/user-environ/_layout.scss */
+  /* line 182, ../sass/user-environ/_layout.scss */
   .cols.cols-16 .col-2 {
     min-width: 62.5px;
     width: 11%; }
-  /* line 180, ../sass/user-environ/_layout.scss */
+  /* line 185, ../sass/user-environ/_layout.scss */
   .cols.cols-16 .col-7 {
     min-width: 218.75px;
     width: 42.25%; }
-  /* line 186, ../sass/user-environ/_layout.scss */
+  /* line 191, ../sass/user-environ/_layout.scss */
   .cols.cols-32 .col-2 {
     min-width: 31.25px;
     width: 4.75%; }
-  /* line 189, ../sass/user-environ/_layout.scss */
+  /* line 194, ../sass/user-environ/_layout.scss */
   .cols.cols-32 .col-15 {
     min-width: 234.375px;
     width: 45.375%; }
-  /* line 193, ../sass/user-environ/_layout.scss */
+  /* line 198, ../sass/user-environ/_layout.scss */
   .cols .l-row {
     overflow: hidden;
     *zoom: 1;
     padding: 5px 0; }
 
-/* line 199, ../sass/user-environ/_layout.scss */
+/* line 204, ../sass/user-environ/_layout.scss */
 .pane {
   position: absolute; }
-  /* line 202, ../sass/user-environ/_layout.scss */
+  /* line 207, ../sass/user-environ/_layout.scss */
   .pane.treeview .create-btn-holder {
     bottom: auto;
     top: 0;
     height: 24px; }
-    /* line 205, ../sass/user-environ/_layout.scss */
+    /* line 210, ../sass/user-environ/_layout.scss */
     .pane.treeview .create-btn-holder .wrapper.menu-element {
       position: absolute;
       bottom: 5px; }
-  /* line 210, ../sass/user-environ/_layout.scss */
+  /* line 215, ../sass/user-environ/_layout.scss */
   .pane.treeview .tree-holder {
     overflow: auto;
     top: 34px; }
-  /* line 217, ../sass/user-environ/_layout.scss */
+  /* line 222, ../sass/user-environ/_layout.scss */
   .pane.items .object-browse-bar .left.abs, .pane.items .object-browse-bar .btn-menu span.left.l-click-area, .btn-menu .pane.items .object-browse-bar span.left.l-click-area,
   .pane.items .object-browse-bar .right.abs,
   .pane.items .object-browse-bar .btn-menu span.right.l-click-area,
   .btn-menu .pane.items .object-browse-bar span.right.l-click-area {
     top: auto; }
-  /* line 222, ../sass/user-environ/_layout.scss */
+  /* line 227, ../sass/user-environ/_layout.scss */
   .pane.items .object-holder {
     top: 34px; }
-  /* line 227, ../sass/user-environ/_layout.scss */
+  /* line 232, ../sass/user-environ/_layout.scss */
   .pane.edit-main .object-holder {
     top: 0; }
-  /* line 233, ../sass/user-environ/_layout.scss */
+  /* line 238, ../sass/user-environ/_layout.scss */
   .pane .object-holder {
     overflow: auto; }
 
-/* line 241, ../sass/user-environ/_layout.scss */
+/* line 246, ../sass/user-environ/_layout.scss */
 .split-layout.horizontal > .pane {
   margin-top: 5px; }
-  /* line 244, ../sass/user-environ/_layout.scss */
+  /* line 249, ../sass/user-environ/_layout.scss */
   .split-layout.horizontal > .pane:first-child {
     margin-top: 0; }
-/* line 251, ../sass/user-environ/_layout.scss */
+/* line 256, ../sass/user-environ/_layout.scss */
 .split-layout.vertical > .pane {
   margin-left: 5px; }
-  /* line 253, ../sass/user-environ/_layout.scss */
+  /* line 258, ../sass/user-environ/_layout.scss */
   .split-layout.vertical > .pane > .holder {
     left: 0;
     right: 0; }
-  /* line 257, ../sass/user-environ/_layout.scss */
+  /* line 262, ../sass/user-environ/_layout.scss */
   .split-layout.vertical > .pane:first-child {
     margin-left: 0; }
-    /* line 259, ../sass/user-environ/_layout.scss */
+    /* line 264, ../sass/user-environ/_layout.scss */
     .split-layout.vertical > .pane:first-child .holder {
       right: 5px; }
 
-/* line 268, ../sass/user-environ/_layout.scss */
+/* line 273, ../sass/user-environ/_layout.scss */
 .vscroll {
   overflow-y: auto; }
 
@@ -1256,26 +1260,37 @@ mct-container {
     .tabular tr td, .tabular tr .td, .tabular .tr td, .tabular .tr .td {
       border-top: 1px solid rgba(255, 255, 255, 0.1);
       min-width: 110px;
+      color: #fff;
       padding: 2px 5px;
       vertical-align: top; }
-      /* line 107, ../sass/lists/_tabular.scss */
+      /* line 108, ../sass/lists/_tabular.scss */
       .tabular tr td.numeric, .tabular tr .td.numeric, .tabular .tr td.numeric, .tabular .tr .td.numeric {
         text-align: right; }
-  /* line 113, ../sass/lists/_tabular.scss */
+      /* line 111, ../sass/lists/_tabular.scss */
+      .tabular tr td.s-cell-type-value, .tabular tr .td.s-cell-type-value, .tabular .tr td.s-cell-type-value, .tabular .tr .td.s-cell-type-value {
+        text-align: right; }
+        /* line 113, ../sass/lists/_tabular.scss */
+        .tabular tr td.s-cell-type-value .l-cell-contents, .tabular tr .td.s-cell-type-value .l-cell-contents, .tabular .tr td.s-cell-type-value .l-cell-contents, .tabular .tr .td.s-cell-type-value .l-cell-contents {
+          -moz-border-radius: 2px;
+          -webkit-border-radius: 2px;
+          border-radius: 2px;
+          padding-left: 5px;
+          padding-right: 5px; }
+  /* line 122, ../sass/lists/_tabular.scss */
   .tabular.filterable tbody, .tabular.filterable .tbody {
     top: 36px; }
-  /* line 118, ../sass/lists/_tabular.scss */
+  /* line 127, ../sass/lists/_tabular.scss */
   .tabular.fixed-header {
     height: 100%; }
-    /* line 120, ../sass/lists/_tabular.scss */
+    /* line 129, ../sass/lists/_tabular.scss */
     .tabular.fixed-header thead, .tabular.fixed-header .thead,
     .tabular.fixed-header tbody tr, .tabular.fixed-header .tbody .tr {
       display: table;
       table-layout: fixed; }
-    /* line 125, ../sass/lists/_tabular.scss */
+    /* line 134, ../sass/lists/_tabular.scss */
     .tabular.fixed-header thead, .tabular.fixed-header .thead {
       width: calc(100% - 10px); }
-    /* line 128, ../sass/lists/_tabular.scss */
+    /* line 137, ../sass/lists/_tabular.scss */
     .tabular.fixed-header tbody, .tabular.fixed-header .tbody {
       overflow: hidden;
       position: absolute;
@@ -1288,7 +1303,7 @@ mct-container {
       top: 18px;
       display: block;
       overflow-y: scroll; }
-  /* line 136, ../sass/lists/_tabular.scss */
+  /* line 145, ../sass/lists/_tabular.scss */
   .tabular.t-event-messages td, .tabular.t-event-messages .td {
     min-width: 150px; }
 
diff --git a/platform/commonUI/general/res/sass/user-environ/_layout.scss b/platform/commonUI/general/res/sass/user-environ/_layout.scss
index 639e53af75..d6e6f9b6cb 100644
--- a/platform/commonUI/general/res/sass/user-environ/_layout.scss
+++ b/platform/commonUI/general/res/sass/user-environ/_layout.scss
@@ -47,6 +47,11 @@
 	@include border-radius($basicCr * 1.5);
 }
 
+// style="min-width: 150px; max-width: 800px; width: 25%;"
+.browser-manage {
+    width: 100%;
+}
+
 .contents {
     $myM: 0; //$interiorMargin;
     box-sizing: border-box;

From d8806f14aab7d3994e0d96dbf1cacacb9a7abb6a Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Tue, 7 Jul 2015 09:08:16 -0700
Subject: [PATCH 002/209] [Mobile] Set viewport

Viewport has been set in
index.html. Then what was
implemented prior to this
(rem-display and browser-manage)
was commented out.
---
 index.html                                    |  1 +
 .../commonUI/browse/res/templates/browse.html |  3 +-
 .../general/res/css/theme-espresso.css        | 92 ++++++++++---------
 .../res/sass/user-environ/_layout.scss        | 22 ++++-
 4 files changed, 70 insertions(+), 48 deletions(-)

diff --git a/index.html b/index.html
index cb9e6623a7..a8c258db30 100644
--- a/index.html
+++ b/index.html
@@ -23,6 +23,7 @@
 <html>
 <head lang="en">
     <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title></title>
     <script type="text/javascript"
             src="platform/framework/lib/require.js"
diff --git a/platform/commonUI/browse/res/templates/browse.html b/platform/commonUI/browse/res/templates/browse.html
index 7d87c5f453..d32752be55 100644
--- a/platform/commonUI/browse/res/templates/browse.html
+++ b/platform/commonUI/browse/res/templates/browse.html
@@ -24,7 +24,6 @@
     <div class="holder browse-area s-browse-area abs" ng-controller="BrowseController">
         <mct-split-pane class='contents abs' anchor='left'>
             <div class='split-pane-component treeview pane browser-manage'>
-<!--                style="min-width: 150px; max-width: 800px; width: 25%;"-->
                 <mct-representation key="'create-button'" mct-object="navigatedObject">
                 </mct-representation>
                 <div class='holder tree-holder abs'>
@@ -36,7 +35,7 @@
             </div>
             <mct-splitter></mct-splitter>
             <div class='split-pane-component items pane'>
-                <div class='holder abs' id='content-area'>
+                <div class='holder abs rem-display' id='content-area'>
                     <mct-representation mct-object="navigatedObject" key="'browse-object'">
                     </mct-representation>
                 </div>
diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index ca0fba3fe5..0cd87ce1fc 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -467,17 +467,19 @@ mct-container {
 .editor {
   position: absolute; }
 
-/* line 46, ../sass/user-environ/_layout.scss */
+/* line 47, ../sass/user-environ/_layout.scss */
 .editor {
   -moz-border-radius: 3px;
   -webkit-border-radius: 3px;
   border-radius: 3px; }
 
-/* line 51, ../sass/user-environ/_layout.scss */
+/* line 57, ../sass/user-environ/_layout.scss */
 .browser-manage {
-  width: 100%; }
+  min-width: 150px;
+  max-width: 800px;
+  width: 25%; }
 
-/* line 55, ../sass/user-environ/_layout.scss */
+/* line 75, ../sass/user-environ/_layout.scss */
 .contents {
   box-sizing: border-box;
   position: absolute;
@@ -485,36 +487,36 @@ mct-container {
   right: 0;
   bottom: 0;
   left: 0; }
-  /* line 63, ../sass/user-environ/_layout.scss */
+  /* line 83, ../sass/user-environ/_layout.scss */
   .contents.nomargin {
     right: 0px;
     bottom: 0px;
     left: 0px; }
 
-/* line 72, ../sass/user-environ/_layout.scss */
+/* line 92, ../sass/user-environ/_layout.scss */
 .bar .icon.major {
   margin-right: 5px; }
-/* line 75, ../sass/user-environ/_layout.scss */
+/* line 95, ../sass/user-environ/_layout.scss */
 .bar.abs, .btn-menu span.bar.l-click-area {
   text-wrap: none;
   white-space: nowrap; }
-/* line 79, ../sass/user-environ/_layout.scss */
+/* line 99, ../sass/user-environ/_layout.scss */
 .bar.left,
 .bar .left {
   width: 45% !important;
   right: auto !important; }
-/* line 84, ../sass/user-environ/_layout.scss */
+/* line 104, ../sass/user-environ/_layout.scss */
 .bar.right,
 .bar .right {
   width: 45% !important;
   left: auto !important;
   text-align: right; }
-  /* line 89, ../sass/user-environ/_layout.scss */
+  /* line 109, ../sass/user-environ/_layout.scss */
   .bar.right .icon.major,
   .bar .right .icon.major {
     margin-left: 15px; }
 
-/* line 96, ../sass/user-environ/_layout.scss */
+/* line 116, ../sass/user-environ/_layout.scss */
 .user-environ .browse-area,
 .user-environ .edit-area,
 .user-environ .editor {
@@ -522,23 +524,23 @@ mct-container {
   right: 10px;
   bottom: 35px;
   left: 10px; }
-/* line 107, ../sass/user-environ/_layout.scss */
+/* line 127, ../sass/user-environ/_layout.scss */
 .user-environ .browse-area > .contents,
 .user-environ .edit-area > .contents {
   left: 0;
   right: 0; }
-/* line 113, ../sass/user-environ/_layout.scss */
+/* line 133, ../sass/user-environ/_layout.scss */
 .user-environ .edit-area {
   top: 45px; }
-  /* line 116, ../sass/user-environ/_layout.scss */
+  /* line 136, ../sass/user-environ/_layout.scss */
   .user-environ .edit-area .tool-bar {
     bottom: auto;
     height: 30px;
     line-height: 25px; }
-  /* line 121, ../sass/user-environ/_layout.scss */
+  /* line 141, ../sass/user-environ/_layout.scss */
   .user-environ .edit-area .work-area {
     top: 40px; }
-/* line 126, ../sass/user-environ/_layout.scss */
+/* line 146, ../sass/user-environ/_layout.scss */
 .user-environ .bottom-bar {
   overflow: hidden;
   position: absolute;
@@ -550,20 +552,20 @@ mct-container {
   height: auto;
   top: auto;
   height: 25px; }
-  /* line 131, ../sass/user-environ/_layout.scss */
+  /* line 151, ../sass/user-environ/_layout.scss */
   .user-environ .bottom-bar .status-holder {
     z-index: 1; }
-  /* line 135, ../sass/user-environ/_layout.scss */
+  /* line 155, ../sass/user-environ/_layout.scss */
   .user-environ .bottom-bar .app-logo {
     left: auto;
     width: 105px;
     z-index: 2; }
 
-/* line 143, ../sass/user-environ/_layout.scss */
+/* line 163, ../sass/user-environ/_layout.scss */
 .cols {
   overflow: hidden;
   *zoom: 1; }
-  /* line 145, ../sass/user-environ/_layout.scss */
+  /* line 165, ../sass/user-environ/_layout.scss */
   .cols .col {
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
@@ -574,100 +576,100 @@ mct-container {
     margin-left: 1.5%;
     padding-left: 5px;
     position: relative; }
-    /* line 153, ../sass/user-environ/_layout.scss */
+    /* line 173, ../sass/user-environ/_layout.scss */
     .cols .col:first-child {
       margin-left: 0;
       padding-left: 0; }
-  /* line 160, ../sass/user-environ/_layout.scss */
+  /* line 180, ../sass/user-environ/_layout.scss */
   .cols.cols-2 .col-1 {
     min-width: 250px;
     width: 48.5%; }
-  /* line 166, ../sass/user-environ/_layout.scss */
+  /* line 186, ../sass/user-environ/_layout.scss */
   .cols.cols-2-ff .col-100px {
     width: 100px; }
-  /* line 173, ../sass/user-environ/_layout.scss */
+  /* line 193, ../sass/user-environ/_layout.scss */
   .cols.cols-6 .col-1 {
     min-width: 83.33333px;
     width: 15.16667%; }
-  /* line 179, ../sass/user-environ/_layout.scss */
+  /* line 199, ../sass/user-environ/_layout.scss */
   .cols.cols-16 .col-1 {
     min-width: 31.25px;
     width: 4.75%; }
-  /* line 182, ../sass/user-environ/_layout.scss */
+  /* line 202, ../sass/user-environ/_layout.scss */
   .cols.cols-16 .col-2 {
     min-width: 62.5px;
     width: 11%; }
-  /* line 185, ../sass/user-environ/_layout.scss */
+  /* line 205, ../sass/user-environ/_layout.scss */
   .cols.cols-16 .col-7 {
     min-width: 218.75px;
     width: 42.25%; }
-  /* line 191, ../sass/user-environ/_layout.scss */
+  /* line 211, ../sass/user-environ/_layout.scss */
   .cols.cols-32 .col-2 {
     min-width: 31.25px;
     width: 4.75%; }
-  /* line 194, ../sass/user-environ/_layout.scss */
+  /* line 214, ../sass/user-environ/_layout.scss */
   .cols.cols-32 .col-15 {
     min-width: 234.375px;
     width: 45.375%; }
-  /* line 198, ../sass/user-environ/_layout.scss */
+  /* line 218, ../sass/user-environ/_layout.scss */
   .cols .l-row {
     overflow: hidden;
     *zoom: 1;
     padding: 5px 0; }
 
-/* line 204, ../sass/user-environ/_layout.scss */
+/* line 224, ../sass/user-environ/_layout.scss */
 .pane {
   position: absolute; }
-  /* line 207, ../sass/user-environ/_layout.scss */
+  /* line 227, ../sass/user-environ/_layout.scss */
   .pane.treeview .create-btn-holder {
     bottom: auto;
     top: 0;
     height: 24px; }
-    /* line 210, ../sass/user-environ/_layout.scss */
+    /* line 230, ../sass/user-environ/_layout.scss */
     .pane.treeview .create-btn-holder .wrapper.menu-element {
       position: absolute;
       bottom: 5px; }
-  /* line 215, ../sass/user-environ/_layout.scss */
+  /* line 235, ../sass/user-environ/_layout.scss */
   .pane.treeview .tree-holder {
     overflow: auto;
     top: 34px; }
-  /* line 222, ../sass/user-environ/_layout.scss */
+  /* line 242, ../sass/user-environ/_layout.scss */
   .pane.items .object-browse-bar .left.abs, .pane.items .object-browse-bar .btn-menu span.left.l-click-area, .btn-menu .pane.items .object-browse-bar span.left.l-click-area,
   .pane.items .object-browse-bar .right.abs,
   .pane.items .object-browse-bar .btn-menu span.right.l-click-area,
   .btn-menu .pane.items .object-browse-bar span.right.l-click-area {
     top: auto; }
-  /* line 227, ../sass/user-environ/_layout.scss */
+  /* line 247, ../sass/user-environ/_layout.scss */
   .pane.items .object-holder {
     top: 34px; }
-  /* line 232, ../sass/user-environ/_layout.scss */
+  /* line 252, ../sass/user-environ/_layout.scss */
   .pane.edit-main .object-holder {
     top: 0; }
-  /* line 238, ../sass/user-environ/_layout.scss */
+  /* line 258, ../sass/user-environ/_layout.scss */
   .pane .object-holder {
     overflow: auto; }
 
-/* line 246, ../sass/user-environ/_layout.scss */
+/* line 266, ../sass/user-environ/_layout.scss */
 .split-layout.horizontal > .pane {
   margin-top: 5px; }
-  /* line 249, ../sass/user-environ/_layout.scss */
+  /* line 269, ../sass/user-environ/_layout.scss */
   .split-layout.horizontal > .pane:first-child {
     margin-top: 0; }
-/* line 256, ../sass/user-environ/_layout.scss */
+/* line 276, ../sass/user-environ/_layout.scss */
 .split-layout.vertical > .pane {
   margin-left: 5px; }
-  /* line 258, ../sass/user-environ/_layout.scss */
+  /* line 278, ../sass/user-environ/_layout.scss */
   .split-layout.vertical > .pane > .holder {
     left: 0;
     right: 0; }
-  /* line 262, ../sass/user-environ/_layout.scss */
+  /* line 282, ../sass/user-environ/_layout.scss */
   .split-layout.vertical > .pane:first-child {
     margin-left: 0; }
-    /* line 264, ../sass/user-environ/_layout.scss */
+    /* line 284, ../sass/user-environ/_layout.scss */
     .split-layout.vertical > .pane:first-child .holder {
       right: 5px; }
 
-/* line 273, ../sass/user-environ/_layout.scss */
+/* line 293, ../sass/user-environ/_layout.scss */
 .vscroll {
   overflow-y: auto; }
 
diff --git a/platform/commonUI/general/res/sass/user-environ/_layout.scss b/platform/commonUI/general/res/sass/user-environ/_layout.scss
index d6e6f9b6cb..9d9a6fa33a 100644
--- a/platform/commonUI/general/res/sass/user-environ/_layout.scss
+++ b/platform/commonUI/general/res/sass/user-environ/_layout.scss
@@ -43,13 +43,33 @@
 	position: absolute;
 }
 
+
 .editor {
 	@include border-radius($basicCr * 1.5);
 }
 
+$min-name: min-device-width;
+$max-name: max-device-width;
+$max-small: 769px;
+$min-large: 770px;
+
 // style="min-width: 150px; max-width: 800px; width: 25%;"
 .browser-manage {
-    width: 100%;
+//    @media only screen and ($max-name : $max-small) {
+//        width: 100%;
+//    }
+//    
+//    @media only screen and ($min-name : $min-large) {
+        min-width: 150px;
+        max-width: 800px;
+        width: 25%;
+//    }
+}
+
+.rem-display {
+//    @media only screen and ($max-name : $max-small) {
+//        display: none;
+//    }
 }
 
 .contents {

From d828bf59f912c3afa87918595f3600cb77a8c5e1 Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Tue, 7 Jul 2015 09:58:22 -0700
Subject: [PATCH 003/209] [Mobile] Constants/Etc

Added constants for media queries.
in _constants.scss. Also, now on tablet,
zoom is disabled.
---
 index.html                                           | 2 +-
 platform/commonUI/general/res/css/forms.css          | 1 +
 platform/commonUI/general/res/css/items.css          | 1 +
 platform/commonUI/general/res/css/theme-espresso.css | 1 +
 platform/commonUI/general/res/css/tree.css           | 1 +
 platform/commonUI/general/res/sass/_constants.scss   | 9 +++++++++
 6 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/index.html b/index.html
index a8c258db30..8be727ab5a 100644
--- a/index.html
+++ b/index.html
@@ -23,7 +23,7 @@
 <html>
 <head lang="en">
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
     <title></title>
     <script type="text/javascript"
             src="platform/framework/lib/require.js"
diff --git a/platform/commonUI/general/res/css/forms.css b/platform/commonUI/general/res/css/forms.css
index bc7cbac350..e69782df64 100644
--- a/platform/commonUI/general/res/css/forms.css
+++ b/platform/commonUI/general/res/css/forms.css
@@ -42,6 +42,7 @@
  *****************************************************************************/
 /************************** FEATURES */
 /************************** VERY INFLUENTIAL GLOBAL DIMENSIONS */
+/************************** WINDOW DIMENSIONS FOR RWD */
 /************************** COLORS AND SHADING */
 /************************** RATIOS */
 /************************** LAYOUT */
diff --git a/platform/commonUI/general/res/css/items.css b/platform/commonUI/general/res/css/items.css
index c40b3f7bd9..907de21507 100644
--- a/platform/commonUI/general/res/css/items.css
+++ b/platform/commonUI/general/res/css/items.css
@@ -42,6 +42,7 @@
  *****************************************************************************/
 /************************** FEATURES */
 /************************** VERY INFLUENTIAL GLOBAL DIMENSIONS */
+/************************** WINDOW DIMENSIONS FOR RWD */
 /************************** COLORS AND SHADING */
 /************************** RATIOS */
 /************************** LAYOUT */
diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index 0cd87ce1fc..99ad0297c7 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -43,6 +43,7 @@
  *****************************************************************************/
 /************************** FEATURES */
 /************************** VERY INFLUENTIAL GLOBAL DIMENSIONS */
+/************************** WINDOW DIMENSIONS FOR RWD */
 /************************** COLORS AND SHADING */
 /************************** RATIOS */
 /************************** LAYOUT */
diff --git a/platform/commonUI/general/res/css/tree.css b/platform/commonUI/general/res/css/tree.css
index 75b40aa115..737968c577 100644
--- a/platform/commonUI/general/res/css/tree.css
+++ b/platform/commonUI/general/res/css/tree.css
@@ -42,6 +42,7 @@
  *****************************************************************************/
 /************************** FEATURES */
 /************************** VERY INFLUENTIAL GLOBAL DIMENSIONS */
+/************************** WINDOW DIMENSIONS FOR RWD */
 /************************** COLORS AND SHADING */
 /************************** RATIOS */
 /************************** LAYOUT */
diff --git a/platform/commonUI/general/res/sass/_constants.scss b/platform/commonUI/general/res/sass/_constants.scss
index 8a8fed19d1..4e6ca6e25d 100644
--- a/platform/commonUI/general/res/sass/_constants.scss
+++ b/platform/commonUI/general/res/sass/_constants.scss
@@ -33,6 +33,14 @@ $controlCr: 2px;
 $smallCr: 2px;
 $badgeW: 35px;
 
+/************************** WINDOW DIMENSIONS FOR RWD */
+$phoMaxW: 400px;
+$phoneMaxH: 680px;
+$tabMaxW: 800px;
+$tabMaxH: 1280px;
+$compMinW: 801px; 
+$compMinH: 1281px;
+
 /************************** COLORS AND SHADING */
 $colorBodyBg: #333;
 $colorBodyFg: #999;
@@ -103,6 +111,7 @@ $ovrTopBarH: 60px;
 $ovrFooterH: 40px;
 // Items
 $ueBrowseGridItemLg: 200px;
+$ueBrowseGridItemSm: 100%;
 $ueBrowseGridItemTopBarH: 20px;
 $ueBrowseGridItemBottomBarH: 30px;
 $itemPadLR: 5px;

From 2fc447e16f7ccf3445c69dd3ac5582b082890e5d Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Tue, 7 Jul 2015 10:15:25 -0700
Subject: [PATCH 004/209] [Mobile] Comments

Added comments and reverted the
grid back to normal.
---
 platform/commonUI/general/res/css/items.css   | 36 +++++++++----------
 .../commonUI/general/res/sass/_constants.scss |  4 +--
 .../general/res/sass/items/_item.scss         |  1 +
 3 files changed, 21 insertions(+), 20 deletions(-)

diff --git a/platform/commonUI/general/res/css/items.css b/platform/commonUI/general/res/css/items.css
index 907de21507..a43eb82648 100644
--- a/platform/commonUI/general/res/css/items.css
+++ b/platform/commonUI/general/res/css/items.css
@@ -152,7 +152,7 @@
     /* line 160, ../sass/_mixins.scss */
     .items-holder .item.grid-item.btn-menu .invoke-menu {
       color: #828282; }
-    /* line 42, ../sass/items/_item.scss */
+    /* line 43, ../sass/items/_item.scss */
     .items-holder .item.grid-item .item-main .item-type {
       -moz-transition-property: "color";
       -o-transition-property: "color";
@@ -166,45 +166,45 @@
       -o-transition-timing-function: ease-in-out;
       -webkit-transition-timing-function: ease-in-out;
       transition-timing-function: ease-in-out; }
-    /* line 46, ../sass/items/_item.scss */
+    /* line 47, ../sass/items/_item.scss */
     .items-holder .item.grid-item:hover .item-main .item-type {
       color: #0099cc !important; }
-    /* line 49, ../sass/items/_item.scss */
+    /* line 50, ../sass/items/_item.scss */
     .items-holder .item.grid-item:hover .item-main .item-open {
       opacity: 1; }
-    /* line 54, ../sass/items/_item.scss */
+    /* line 55, ../sass/items/_item.scss */
     .items-holder .item.grid-item .contents {
       top: 5px;
       right: 5px;
       bottom: 5px;
       left: 5px; }
-    /* line 58, ../sass/items/_item.scss */
+    /* line 59, ../sass/items/_item.scss */
     .items-holder .item.grid-item .bar.top-bar.abs {
       bottom: auto;
       height: 20px;
       line-height: 20px;
       z-index: 5; }
-      /* line 63, ../sass/items/_item.scss */
+      /* line 64, ../sass/items/_item.scss */
       .items-holder .item.grid-item .bar.top-bar.abs .left, .items-holder .item.grid-item .bar.top-bar.abs .right {
         width: auto; }
-        /* line 65, ../sass/items/_item.scss */
+        /* line 66, ../sass/items/_item.scss */
         .items-holder .item.grid-item .bar.top-bar.abs .left .icon, .items-holder .item.grid-item .bar.top-bar.abs .right .icon {
           margin-left: 5px; }
-    /* line 70, ../sass/items/_item.scss */
+    /* line 71, ../sass/items/_item.scss */
     .items-holder .item.grid-item .bar.bottom-bar.abs {
       top: auto;
       height: 30px;
       padding: 5px; }
-    /* line 76, ../sass/items/_item.scss */
+    /* line 77, ../sass/items/_item.scss */
     .items-holder .item.grid-item .item-main {
       line-height: 160px;
       z-index: 1; }
-      /* line 82, ../sass/items/_item.scss */
+      /* line 83, ../sass/items/_item.scss */
       .items-holder .item.grid-item .item-main .item-type {
         color: #737373;
         text-align: center;
         font-size: 6em; }
-      /* line 88, ../sass/items/_item.scss */
+      /* line 89, ../sass/items/_item.scss */
       .items-holder .item.grid-item .item-main .item-open {
         -moz-transition-property: "opacity";
         -o-transition-property: "opacity";
@@ -224,17 +224,17 @@
         width: 50px;
         pointer-events: none;
         text-align: right; }
-    /* line 100, ../sass/items/_item.scss */
+    /* line 101, ../sass/items/_item.scss */
     .items-holder .item.grid-item .title {
       text-shadow: rgba(0, 0, 0, 0.1) 0 1px 2px;
       color: #cccccc;
       overflow: hidden;
       white-space: nowrap;
       text-overflow: ellipsis; }
-    /* line 108, ../sass/items/_item.scss */
+    /* line 109, ../sass/items/_item.scss */
     .items-holder .item.grid-item .details {
       font-size: 0.8em; }
-    /* line 111, ../sass/items/_item.scss */
+    /* line 112, ../sass/items/_item.scss */
     .items-holder .item.grid-item.selected {
       background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzBhYzJmZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwYjRmMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
       background-size: 100%;
@@ -271,15 +271,15 @@
       /* line 160, ../sass/_mixins.scss */
       .items-holder .item.grid-item.selected.btn-menu .invoke-menu {
         color: #52d4ff; }
-      /* line 116, ../sass/items/_item.scss */
+      /* line 117, ../sass/items/_item.scss */
       .items-holder .item.grid-item.selected .item-type, .items-holder .item.grid-item.selected .top-bar .icon:not(.alert) {
         color: #80dfff; }
-      /* line 117, ../sass/items/_item.scss */
+      /* line 118, ../sass/items/_item.scss */
       .items-holder .item.grid-item.selected .item-main .item-open {
         color: #80dfff; }
-      /* line 118, ../sass/items/_item.scss */
+      /* line 119, ../sass/items/_item.scss */
       .items-holder .item.grid-item.selected .title {
         color: white; }
-      /* line 120, ../sass/items/_item.scss */
+      /* line 121, ../sass/items/_item.scss */
       .items-holder .item.grid-item.selected:hover .item-main .item-type {
         color: white !important; }
diff --git a/platform/commonUI/general/res/sass/_constants.scss b/platform/commonUI/general/res/sass/_constants.scss
index 4e6ca6e25d..49fa946c97 100644
--- a/platform/commonUI/general/res/sass/_constants.scss
+++ b/platform/commonUI/general/res/sass/_constants.scss
@@ -35,8 +35,8 @@ $badgeW: 35px;
 
 /************************** WINDOW DIMENSIONS FOR RWD */
 $phoMaxW: 400px;
-$phoneMaxH: 680px;
-$tabMaxW: 800px;
+$phoMaxH: 700px;
+$tabMaxW: 701px;
 $tabMaxH: 1280px;
 $compMinW: 801px; 
 $compMinH: 1281px;
diff --git a/platform/commonUI/general/res/sass/items/_item.scss b/platform/commonUI/general/res/sass/items/_item.scss
index 5a5cdaf9a3..745f2fa28b 100644
--- a/platform/commonUI/general/res/sass/items/_item.scss
+++ b/platform/commonUI/general/res/sass/items/_item.scss
@@ -28,6 +28,7 @@
     .item {
         &.grid-item {
             //div { @include test() }
+            // Sets grid item width
             $d: $ueBrowseGridItemLg;
             $transTime: 200ms;
             @include btnSubtle($colorItemBase);

From 8a0b77ec5c6c2197a7cd88bc2cf4e1cb2622bcbf Mon Sep 17 00:00:00 2001
From: Dave <shivamndave>
Date: Tue, 7 Jul 2015 13:02:40 -0700
Subject: [PATCH 005/209] [Mobile] Folder View

Folder representation now
will be a list.
---
 platform/commonUI/general/res/css/forms.css   |  6 +-
 platform/commonUI/general/res/css/items.css   | 65 ++++++++------
 .../general/res/css/theme-espresso.css        | 86 +++++++++----------
 platform/commonUI/general/res/css/tree.css    |  2 +-
 .../commonUI/general/res/sass/_constants.scss |  5 +-
 .../commonUI/general/res/sass/_mixins.scss    | 22 +++++
 .../general/res/sass/items/_item.scss         | 32 +++++--
 7 files changed, 138 insertions(+), 80 deletions(-)

diff --git a/platform/commonUI/general/res/css/forms.css b/platform/commonUI/general/res/css/forms.css
index e69782df64..30db438d36 100644
--- a/platform/commonUI/general/res/css/forms.css
+++ b/platform/commonUI/general/res/css/forms.css
@@ -392,7 +392,7 @@ input[type="text"] {
   margin: 0 0 2px 2px;
   overflow: hidden;
   position: relative; }
-  /* line 152, ../sass/_mixins.scss */
+  /* line 174, ../sass/_mixins.scss */
   .form-control.select:not(.disabled):hover {
     background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzYzNjM2MyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzU3NTc1NyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
     background-size: 100%;
@@ -401,10 +401,10 @@ input[type="text"] {
     background-image: -webkit-linear-gradient(#636363, #575757);
     background-image: linear-gradient(#636363, #575757);
     color: #bdbdbd; }
-    /* line 155, ../sass/_mixins.scss */
+    /* line 177, ../sass/_mixins.scss */
     .form-control.select:not(.disabled):hover.btn-menu .invoke-menu {
       color: #878787; }
-  /* line 160, ../sass/_mixins.scss */
+  /* line 182, ../sass/_mixins.scss */
   .form-control.select.btn-menu .invoke-menu {
     color: #757575; }
   /* line 29, ../sass/forms/_selects.scss */
diff --git a/platform/commonUI/general/res/css/items.css b/platform/commonUI/general/res/css/items.css
index a43eb82648..24e8e46f74 100644
--- a/platform/commonUI/general/res/css/items.css
+++ b/platform/commonUI/general/res/css/items.css
@@ -132,12 +132,27 @@
     box-sizing: border-box;
     cursor: pointer;
     float: left;
-    height: 200px;
     width: 200px;
+    height: 200px;
     margin-bottom: 3px;
     margin-right: 3px;
     position: relative; }
-    /* line 152, ../sass/_mixins.scss */
+    @media screen and (max-width: 400px) {
+      /* line 29, ../sass/items/_item.scss */
+      .items-holder .item.grid-item {
+        width: 100%;
+        height: 50px; } }
+    @media screen and (min-width: 401px) and (max-width: 800px) {
+      /* line 29, ../sass/items/_item.scss */
+      .items-holder .item.grid-item {
+        width: 100%;
+        height: 100px; } }
+    @media screen and (min-width: 801px) {
+      /* line 29, ../sass/items/_item.scss */
+      .items-holder .item.grid-item {
+        width: 200px;
+        height: 200px; } }
+    /* line 174, ../sass/_mixins.scss */
     .items-holder .item.grid-item:not(.disabled):hover {
       background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzcwNzA3MCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzYzNjM2MyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
       background-size: 100%;
@@ -146,13 +161,13 @@
       background-image: -webkit-linear-gradient(#707070, #636363);
       background-image: linear-gradient(#707070, #636363);
       color: #bdbdbd; }
-      /* line 155, ../sass/_mixins.scss */
+      /* line 177, ../sass/_mixins.scss */
       .items-holder .item.grid-item:not(.disabled):hover.btn-menu .invoke-menu {
         color: #949494; }
-    /* line 160, ../sass/_mixins.scss */
+    /* line 182, ../sass/_mixins.scss */
     .items-holder .item.grid-item.btn-menu .invoke-menu {
       color: #828282; }
-    /* line 43, ../sass/items/_item.scss */
+    /* line 65, ../sass/items/_item.scss */
     .items-holder .item.grid-item .item-main .item-type {
       -moz-transition-property: "color";
       -o-transition-property: "color";
@@ -166,45 +181,45 @@
       -o-transition-timing-function: ease-in-out;
       -webkit-transition-timing-function: ease-in-out;
       transition-timing-function: ease-in-out; }
-    /* line 47, ../sass/items/_item.scss */
+    /* line 69, ../sass/items/_item.scss */
     .items-holder .item.grid-item:hover .item-main .item-type {
       color: #0099cc !important; }
-    /* line 50, ../sass/items/_item.scss */
+    /* line 72, ../sass/items/_item.scss */
     .items-holder .item.grid-item:hover .item-main .item-open {
       opacity: 1; }
-    /* line 55, ../sass/items/_item.scss */
+    /* line 77, ../sass/items/_item.scss */
     .items-holder .item.grid-item .contents {
       top: 5px;
       right: 5px;
       bottom: 5px;
       left: 5px; }
-    /* line 59, ../sass/items/_item.scss */
+    /* line 81, ../sass/items/_item.scss */
     .items-holder .item.grid-item .bar.top-bar.abs {
       bottom: auto;
       height: 20px;
       line-height: 20px;
       z-index: 5; }
-      /* line 64, ../sass/items/_item.scss */
+      /* line 86, ../sass/items/_item.scss */
       .items-holder .item.grid-item .bar.top-bar.abs .left, .items-holder .item.grid-item .bar.top-bar.abs .right {
         width: auto; }
-        /* line 66, ../sass/items/_item.scss */
+        /* line 88, ../sass/items/_item.scss */
         .items-holder .item.grid-item .bar.top-bar.abs .left .icon, .items-holder .item.grid-item .bar.top-bar.abs .right .icon {
           margin-left: 5px; }
-    /* line 71, ../sass/items/_item.scss */
+    /* line 93, ../sass/items/_item.scss */
     .items-holder .item.grid-item .bar.bottom-bar.abs {
       top: auto;
       height: 30px;
       padding: 5px; }
-    /* line 77, ../sass/items/_item.scss */
+    /* line 99, ../sass/items/_item.scss */
     .items-holder .item.grid-item .item-main {
       line-height: 160px;
       z-index: 1; }
-      /* line 83, ../sass/items/_item.scss */
+      /* line 105, ../sass/items/_item.scss */
       .items-holder .item.grid-item .item-main .item-type {
         color: #737373;
         text-align: center;
         font-size: 6em; }
-      /* line 89, ../sass/items/_item.scss */
+      /* line 111, ../sass/items/_item.scss */
       .items-holder .item.grid-item .item-main .item-open {
         -moz-transition-property: "opacity";
         -o-transition-property: "opacity";
@@ -224,17 +239,17 @@
         width: 50px;
         pointer-events: none;
         text-align: right; }
-    /* line 101, ../sass/items/_item.scss */
+    /* line 123, ../sass/items/_item.scss */
     .items-holder .item.grid-item .title {
       text-shadow: rgba(0, 0, 0, 0.1) 0 1px 2px;
       color: #cccccc;
       overflow: hidden;
       white-space: nowrap;
       text-overflow: ellipsis; }
-    /* line 109, ../sass/items/_item.scss */
+    /* line 131, ../sass/items/_item.scss */
     .items-holder .item.grid-item .details {
       font-size: 0.8em; }
-    /* line 112, ../sass/items/_item.scss */
+    /* line 134, ../sass/items/_item.scss */
     .items-holder .item.grid-item.selected {
       background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzBhYzJmZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwYjRmMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
       background-size: 100%;
@@ -256,7 +271,7 @@
       color: #999;
       display: inline-block;
       color: #80dfff; }
-      /* line 152, ../sass/_mixins.scss */
+      /* line 174, ../sass/_mixins.scss */
       .items-holder .item.grid-item.selected:not(.disabled):hover {
         background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzJlY2JmZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzE0YzRmZiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
         background-size: 100%;
@@ -265,21 +280,21 @@
         background-image: -webkit-linear-gradient(#2ecbff, #14c4ff);
         background-image: linear-gradient(#2ecbff, #14c4ff);
         color: #bdbdbd; }
-        /* line 155, ../sass/_mixins.scss */
+        /* line 177, ../sass/_mixins.scss */
         .items-holder .item.grid-item.selected:not(.disabled):hover.btn-menu .invoke-menu {
           color: #75ddff; }
-      /* line 160, ../sass/_mixins.scss */
+      /* line 182, ../sass/_mixins.scss */
       .items-holder .item.grid-item.selected.btn-menu .invoke-menu {
         color: #52d4ff; }
-      /* line 117, ../sass/items/_item.scss */
+      /* line 139, ../sass/items/_item.scss */
       .items-holder .item.grid-item.selected .item-type, .items-holder .item.grid-item.selected .top-bar .icon:not(.alert) {
         color: #80dfff; }
-      /* line 118, ../sass/items/_item.scss */
+      /* line 140, ../sass/items/_item.scss */
       .items-holder .item.grid-item.selected .item-main .item-open {
         color: #80dfff; }
-      /* line 119, ../sass/items/_item.scss */
+      /* line 141, ../sass/items/_item.scss */
       .items-holder .item.grid-item.selected .title {
         color: white; }
-      /* line 121, ../sass/items/_item.scss */
+      /* line 143, ../sass/items/_item.scss */
       .items-holder .item.grid-item.selected:hover .item-main .item-type {
         color: white !important; }
diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index 99ad0297c7..f9ab7b359c 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -93,7 +93,7 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-/* line 5, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 5, ../../../../../../../../.gem/ruby/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 html, body, div, span, applet, object, iframe,
 h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 a, abbr, acronym, address, big, cite, code,
@@ -114,38 +114,38 @@ time, mark, audio, video {
   font-size: 100%;
   vertical-align: baseline; }
 
-/* line 22, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 22, ../../../../../../../../.gem/ruby/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 html {
   line-height: 1; }
 
-/* line 24, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 24, ../../../../../../../../.gem/ruby/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 ol, ul {
   list-style: none; }
 
-/* line 26, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 26, ../../../../../../../../.gem/ruby/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 table {
   border-collapse: collapse;
   border-spacing: 0; }
 
-/* line 28, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 28, ../../../../../../../../.gem/ruby/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 caption, th, td {
   text-align: left;
   font-weight: normal;
   vertical-align: middle; }
 
-/* line 30, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 30, ../../../../../../../../.gem/ruby/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 q, blockquote {
   quotes: none; }
-  /* line 103, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+  /* line 103, ../../../../../../../../.gem/ruby/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
   q:before, q:after, blockquote:before, blockquote:after {
     content: "";
     content: none; }
 
-/* line 32, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 32, ../../../../../../../../.gem/ruby/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 a img {
   border: none; }
 
-/* line 116, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 116, ../../../../../../../../.gem/ruby/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
   display: block; }
 
@@ -1441,7 +1441,7 @@ mct-container {
     color: #999;
     display: inline-block;
     color: #ccf2ff; }
-    /* line 152, ../sass/_mixins.scss */
+    /* line 174, ../sass/_mixins.scss */
     .btn.major:not(.disabled):hover,
     .s-btn.major:not(.disabled):hover,
     .major.icon-btn:not(.disabled):hover,
@@ -1453,13 +1453,13 @@ mct-container {
       background-image: -webkit-linear-gradient(#2ecbff, #14c4ff);
       background-image: linear-gradient(#2ecbff, #14c4ff);
       color: #bdbdbd; }
-      /* line 155, ../sass/_mixins.scss */
+      /* line 177, ../sass/_mixins.scss */
       .btn.major:not(.disabled):hover.btn-menu .invoke-menu,
       .s-btn.major:not(.disabled):hover.btn-menu .invoke-menu,
       .major.icon-btn:not(.disabled):hover.btn-menu .invoke-menu,
       .major.s-icon-btn:not(.disabled):hover.btn-menu .invoke-menu {
         color: #75ddff; }
-    /* line 160, ../sass/_mixins.scss */
+    /* line 182, ../sass/_mixins.scss */
     .btn.major.btn-menu .invoke-menu,
     .s-btn.major.btn-menu .invoke-menu,
     .major.btn-menu.icon-btn .invoke-menu,
@@ -1489,7 +1489,7 @@ mct-container {
       border-top: 1px solid #2ecbff;
       color: #ccf2ff;
       display: inline-block; }
-      /* line 152, ../sass/_mixins.scss */
+      /* line 174, ../sass/_mixins.scss */
       .btn.major:hover:not(.disabled):hover,
       .s-btn.major:hover:not(.disabled):hover,
       .major.icon-btn:hover:not(.disabled):hover,
@@ -1501,13 +1501,13 @@ mct-container {
         background-image: -webkit-linear-gradient(#47d1ff, #2ecbff);
         background-image: linear-gradient(#47d1ff, #2ecbff);
         color: white; }
-        /* line 155, ../sass/_mixins.scss */
+        /* line 177, ../sass/_mixins.scss */
         .btn.major:hover:not(.disabled):hover.btn-menu .invoke-menu,
         .s-btn.major:hover:not(.disabled):hover.btn-menu .invoke-menu,
         .major.icon-btn:hover:not(.disabled):hover.btn-menu .invoke-menu,
         .major.s-icon-btn:hover:not(.disabled):hover.btn-menu .invoke-menu {
           color: #8fe3ff; }
-      /* line 160, ../sass/_mixins.scss */
+      /* line 182, ../sass/_mixins.scss */
       .btn.major:hover.btn-menu .invoke-menu,
       .s-btn.major:hover.btn-menu .invoke-menu,
       .major.icon-btn:hover.btn-menu .invoke-menu,
@@ -1543,7 +1543,7 @@ mct-container {
     border-top: 1px solid #8a8a8a;
     color: #cccccc;
     display: inline-block; }
-    /* line 152, ../sass/_mixins.scss */
+    /* line 174, ../sass/_mixins.scss */
     .btn.subtle:not(.disabled):hover,
     .s-btn.subtle:not(.disabled):hover,
     .subtle.icon-btn:not(.disabled):hover,
@@ -1555,13 +1555,13 @@ mct-container {
       background-image: -webkit-linear-gradient(#969696, #8a8a8a);
       background-image: linear-gradient(#969696, #8a8a8a);
       color: #f0f0f0; }
-      /* line 155, ../sass/_mixins.scss */
+      /* line 177, ../sass/_mixins.scss */
       .btn.subtle:not(.disabled):hover.btn-menu .invoke-menu,
       .s-btn.subtle:not(.disabled):hover.btn-menu .invoke-menu,
       .subtle.icon-btn:not(.disabled):hover.btn-menu .invoke-menu,
       .subtle.s-icon-btn:not(.disabled):hover.btn-menu .invoke-menu {
         color: #bababa; }
-    /* line 160, ../sass/_mixins.scss */
+    /* line 182, ../sass/_mixins.scss */
     .btn.subtle.btn-menu .invoke-menu,
     .s-btn.subtle.btn-menu .invoke-menu,
     .subtle.btn-menu.icon-btn .invoke-menu,
@@ -1594,7 +1594,7 @@ mct-container {
     border-top: 1px solid #575757;
     color: #999;
     display: inline-block; }
-    /* line 152, ../sass/_mixins.scss */
+    /* line 174, ../sass/_mixins.scss */
     .btn.very-subtle:not(.disabled):hover, .btn.s-very-subtle:not(.disabled):hover,
     .s-btn.very-subtle:not(.disabled):hover,
     .very-subtle.icon-btn:not(.disabled):hover,
@@ -1609,7 +1609,7 @@ mct-container {
       background-image: -webkit-linear-gradient(#636363, #575757);
       background-image: linear-gradient(#636363, #575757);
       color: #bdbdbd; }
-      /* line 155, ../sass/_mixins.scss */
+      /* line 177, ../sass/_mixins.scss */
       .btn.very-subtle:not(.disabled):hover.btn-menu .invoke-menu, .btn.s-very-subtle:not(.disabled):hover.btn-menu .invoke-menu,
       .s-btn.very-subtle:not(.disabled):hover.btn-menu .invoke-menu,
       .very-subtle.icon-btn:not(.disabled):hover.btn-menu .invoke-menu,
@@ -1618,7 +1618,7 @@ mct-container {
       .s-very-subtle.icon-btn:not(.disabled):hover.btn-menu .invoke-menu,
       .s-very-subtle.s-icon-btn:not(.disabled):hover.btn-menu .invoke-menu {
         color: #878787; }
-    /* line 160, ../sass/_mixins.scss */
+    /* line 182, ../sass/_mixins.scss */
     .btn.very-subtle.btn-menu .invoke-menu, .btn.s-very-subtle.btn-menu .invoke-menu,
     .s-btn.very-subtle.btn-menu .invoke-menu,
     .very-subtle.btn-menu.icon-btn .invoke-menu,
@@ -1654,7 +1654,7 @@ mct-container {
       border-top: 1px solid #fe9510;
       color: #fff;
       display: inline-block; }
-      /* line 152, ../sass/_mixins.scss */
+      /* line 174, ../sass/_mixins.scss */
       .btn.very-subtle.paused:not(.disabled):hover, .btn.s-very-subtle.paused:not(.disabled):hover,
       .s-btn.very-subtle.paused:not(.disabled):hover,
       .very-subtle.paused.icon-btn:not(.disabled):hover,
@@ -1669,7 +1669,7 @@ mct-container {
         background-image: -webkit-linear-gradient(#fea029, #fe9510);
         background-image: linear-gradient(#fea029, #fe9510);
         color: white; }
-        /* line 155, ../sass/_mixins.scss */
+        /* line 177, ../sass/_mixins.scss */
         .btn.very-subtle.paused:not(.disabled):hover.btn-menu .invoke-menu, .btn.s-very-subtle.paused:not(.disabled):hover.btn-menu .invoke-menu,
         .s-btn.very-subtle.paused:not(.disabled):hover.btn-menu .invoke-menu,
         .very-subtle.paused.icon-btn:not(.disabled):hover.btn-menu .invoke-menu,
@@ -1678,7 +1678,7 @@ mct-container {
         .s-very-subtle.paused.icon-btn:not(.disabled):hover.btn-menu .invoke-menu,
         .s-very-subtle.paused.s-icon-btn:not(.disabled):hover.btn-menu .invoke-menu {
           color: #fec070; }
-      /* line 160, ../sass/_mixins.scss */
+      /* line 182, ../sass/_mixins.scss */
       .btn.very-subtle.paused.btn-menu .invoke-menu, .btn.s-very-subtle.paused.btn-menu .invoke-menu,
       .s-btn.very-subtle.paused.btn-menu .invoke-menu,
       .very-subtle.paused.btn-menu.icon-btn .invoke-menu,
@@ -2140,7 +2140,7 @@ label.checkbox.custom {
   			color: lighten($c, 10%);
   		}
   	}*/ }
-  /* line 152, ../sass/_mixins.scss */
+  /* line 174, ../sass/_mixins.scss */
   .btn-menu:not(.disabled):hover {
     background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzYzNjM2MyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzU3NTc1NyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
     background-size: 100%;
@@ -2149,10 +2149,10 @@ label.checkbox.custom {
     background-image: -webkit-linear-gradient(#636363, #575757);
     background-image: linear-gradient(#636363, #575757);
     color: #bdbdbd; }
-    /* line 155, ../sass/_mixins.scss */
+    /* line 177, ../sass/_mixins.scss */
     .btn-menu:not(.disabled):hover.btn-menu .invoke-menu {
       color: #878787; }
-  /* line 160, ../sass/_mixins.scss */
+  /* line 182, ../sass/_mixins.scss */
   .btn-menu.btn-menu .invoke-menu {
     color: #757575; }
   /* line 285, ../sass/controls/_controls.scss */
@@ -2284,7 +2284,7 @@ label.checkbox.custom {
   auto: 0;
   bottom: auto;
   left: auto; }
-  /* line 152, ../sass/_mixins.scss */
+  /* line 174, ../sass/_mixins.scss */
   .slider .knob:not(.disabled):hover {
     background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzYzNjM2MyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzU3NTc1NyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
     background-size: 100%;
@@ -2293,13 +2293,13 @@ label.checkbox.custom {
     background-image: -webkit-linear-gradient(#636363, #575757);
     background-image: linear-gradient(#636363, #575757);
     color: #bdbdbd; }
-    /* line 155, ../sass/_mixins.scss */
+    /* line 177, ../sass/_mixins.scss */
     .slider .knob:not(.disabled):hover.btn-menu .invoke-menu {
       color: #878787; }
-  /* line 160, ../sass/_mixins.scss */
+  /* line 182, ../sass/_mixins.scss */
   .slider .knob.btn-menu .invoke-menu {
     color: #757575; }
-  /* line 176, ../sass/_mixins.scss */
+  /* line 198, ../sass/_mixins.scss */
   .slider .knob:before {
     -moz-transition-property: "border-color";
     -o-transition-property: "border-color";
@@ -2323,7 +2323,7 @@ label.checkbox.custom {
     left: 2px;
     bottom: 5px;
     top: 5px; }
-  /* line 198, ../sass/_mixins.scss */
+  /* line 220, ../sass/_mixins.scss */
   .slider .knob:not(.disabled):hover:before {
     -moz-transition-property: "border-color";
     -o-transition-property: "border-color";
@@ -2495,14 +2495,14 @@ label.checkbox.custom {
     padding: 3px 0;
     position: absolute;
     z-index: 10; }
-    /* line 160, ../sass/_mixins.scss */
+    /* line 182, ../sass/_mixins.scss */
     .menu-element .menu.btn-menu .invoke-menu {
       color: #828282; }
     /* line 37, ../sass/controls/_menus.scss */
     .menu-element .menu ul {
       margin: 0;
       padding: 0; }
-      /* line 266, ../sass/_mixins.scss */
+      /* line 288, ../sass/_mixins.scss */
       .menu-element .menu ul li {
         list-style-type: none;
         margin: 0;
@@ -2558,7 +2558,7 @@ label.checkbox.custom {
     border-top: 1px solid #919191;
     color: #999;
     display: inline-block; }
-    /* line 160, ../sass/_mixins.scss */
+    /* line 182, ../sass/_mixins.scss */
     .menu-element .context-menu.btn-menu .invoke-menu,
     .menu-element .super-menu.btn-menu .invoke-menu {
       color: #b0b0b0; }
@@ -3421,7 +3421,7 @@ input[type="text"] {
   margin: 0 0 2px 2px;
   overflow: hidden;
   position: relative; }
-  /* line 152, ../sass/_mixins.scss */
+  /* line 174, ../sass/_mixins.scss */
   .form-control.select:not(.disabled):hover {
     background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzYzNjM2MyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzU3NTc1NyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
     background-size: 100%;
@@ -3430,10 +3430,10 @@ input[type="text"] {
     background-image: -webkit-linear-gradient(#636363, #575757);
     background-image: linear-gradient(#636363, #575757);
     color: #bdbdbd; }
-    /* line 155, ../sass/_mixins.scss */
+    /* line 177, ../sass/_mixins.scss */
     .form-control.select:not(.disabled):hover.btn-menu .invoke-menu {
       color: #878787; }
-  /* line 160, ../sass/_mixins.scss */
+  /* line 182, ../sass/_mixins.scss */
   .form-control.select.btn-menu .invoke-menu {
     color: #757575; }
   /* line 29, ../sass/forms/_selects.scss */
@@ -4051,7 +4051,7 @@ input[type="text"] {
   bottom: 15%;
   left: 15%;
   z-index: 101; }
-  /* line 160, ../sass/_mixins.scss */
+  /* line 182, ../sass/_mixins.scss */
   .overlay > .holder.btn-menu .invoke-menu {
     color: #757575; }
   /* line 45, ../sass/overlay/_overlay.scss */
@@ -4559,7 +4559,7 @@ input[type="text"] {
     right: 0;
     width: auto;
     height: 5px; }
-    /* line 176, ../sass/_mixins.scss */
+    /* line 198, ../sass/_mixins.scss */
     .split-layout.horizontal > .splitter:before {
       -moz-transition-property: "border-color";
       -o-transition-property: "border-color";
@@ -4583,7 +4583,7 @@ input[type="text"] {
       top: 2px;
       left: 5px;
       right: 5px; }
-    /* line 198, ../sass/_mixins.scss */
+    /* line 220, ../sass/_mixins.scss */
     .split-layout.horizontal > .splitter:not(.disabled):hover:before {
       -moz-transition-property: "border-color";
       -o-transition-property: "border-color";
@@ -4613,7 +4613,7 @@ input[type="text"] {
   bottom: 0;
   cursor: col-resize;
   width: 5px; }
-  /* line 176, ../sass/_mixins.scss */
+  /* line 198, ../sass/_mixins.scss */
   .split-layout.vertical > .splitter:before {
     -moz-transition-property: "border-color";
     -o-transition-property: "border-color";
@@ -4637,7 +4637,7 @@ input[type="text"] {
     left: 2px;
     bottom: 5px;
     top: 5px; }
-  /* line 198, ../sass/_mixins.scss */
+  /* line 220, ../sass/_mixins.scss */
   .split-layout.vertical > .splitter:not(.disabled):hover:before {
     -moz-transition-property: "border-color";
     -o-transition-property: "border-color";
diff --git a/platform/commonUI/general/res/css/tree.css b/platform/commonUI/general/res/css/tree.css
index 737968c577..45855efc19 100644
--- a/platform/commonUI/general/res/css/tree.css
+++ b/platform/commonUI/general/res/css/tree.css
@@ -104,7 +104,7 @@
 ul.tree {
   margin: 0;
   padding: 0; }
-  /* line 266, ../sass/_mixins.scss */
+  /* line 288, ../sass/_mixins.scss */
   ul.tree li {
     list-style-type: none;
     margin: 0;
diff --git a/platform/commonUI/general/res/sass/_constants.scss b/platform/commonUI/general/res/sass/_constants.scss
index 49fa946c97..8f02938bb3 100644
--- a/platform/commonUI/general/res/sass/_constants.scss
+++ b/platform/commonUI/general/res/sass/_constants.scss
@@ -35,9 +35,8 @@ $badgeW: 35px;
 
 /************************** WINDOW DIMENSIONS FOR RWD */
 $phoMaxW: 400px;
-$phoMaxH: 700px;
-$tabMaxW: 701px;
-$tabMaxH: 1280px;
+$tabMinW: 401px;
+$tabMaxW: 800px;
 $compMinW: 801px; 
 $compMinH: 1281px;
 
diff --git a/platform/commonUI/general/res/sass/_mixins.scss b/platform/commonUI/general/res/sass/_mixins.scss
index 2674bc8527..2f5baa7ea5 100644
--- a/platform/commonUI/general/res/sass/_mixins.scss
+++ b/platform/commonUI/general/res/sass/_mixins.scss
@@ -19,6 +19,28 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
+
+// Mixins for devices
+@mixin phone {
+    @media screen and (max-width: $phoMaxW) {
+        @content
+    }
+}
+
+@mixin tablet {
+    @media screen and (min-width: $tabMinW) and (max-width: $tabMaxW) {
+        @content
+    }
+}
+
+@mixin desktop {
+    @media screen and (min-width: $compMinW) {
+        @content
+    }
+}
+
+
+
 @mixin absPosDefault($offset: 0px, $overflowHidden: hidden) {
     overflow: $overflowHidden;
     position: absolute;
diff --git a/platform/commonUI/general/res/sass/items/_item.scss b/platform/commonUI/general/res/sass/items/_item.scss
index 745f2fa28b..cbdcc94b11 100644
--- a/platform/commonUI/general/res/sass/items/_item.scss
+++ b/platform/commonUI/general/res/sass/items/_item.scss
@@ -28,15 +28,37 @@
     .item {
         &.grid-item {
             //div { @include test() }
-            // Sets grid item width
-            $d: $ueBrowseGridItemLg;
+            // NOTE: Sets grid item width
+            $dWid: $ueBrowseGridItemLg;
+            $dHei: $ueBrowseGridItemLg;
+            @include phone {
+                $dWid: 100%;
+                $dHei: $ueBrowseGridItemLg/4;
+                width: $dWid;
+                height: $dHei;
+            }
+            
+            @include tablet {
+                $dWid: 100%;
+                $dHei: $ueBrowseGridItemLg/2;
+                width: $dWid;
+                height: $dHei;
+            }
+            
+            @include desktop {
+                $dWid: $ueBrowseGridItemLg;
+                $dHei: $ueBrowseGridItemLg;
+                width: $dWid;
+                height: $dHei; 
+            }
+            
             $transTime: 200ms;
             @include btnSubtle($colorItemBase);
             box-sizing: border-box;
             cursor: pointer;
-            float: left;
-            height: $d;
-            width: $d;
+            float: left;     
+            width: $dWid;
+            height: $dHei;
             margin-bottom: $interiorMarginSm;
             margin-right: $interiorMarginSm;
             position: relative;

From 1ddb00c8d6ab32502261bf290df4c73bd6893e48 Mon Sep 17 00:00:00 2001
From: Dave <shivamndave>
Date: Tue, 7 Jul 2015 14:01:57 -0700
Subject: [PATCH 006/209] [Mobile] Resize

Resized the height of each
item in grid based on new
tablet/phone widths.
---
 platform/commonUI/general/res/css/items.css   | 30 ++++++++++++-------
 .../commonUI/general/res/sass/_constants.scss |  4 +--
 .../general/res/sass/items/_item.scss         |  7 +++++
 3 files changed, 28 insertions(+), 13 deletions(-)

diff --git a/platform/commonUI/general/res/css/items.css b/platform/commonUI/general/res/css/items.css
index 24e8e46f74..043c01a5e4 100644
--- a/platform/commonUI/general/res/css/items.css
+++ b/platform/commonUI/general/res/css/items.css
@@ -137,12 +137,12 @@
     margin-bottom: 3px;
     margin-right: 3px;
     position: relative; }
-    @media screen and (max-width: 400px) {
+    @media screen and (max-width: 514px) {
       /* line 29, ../sass/items/_item.scss */
       .items-holder .item.grid-item {
         width: 100%;
         height: 50px; } }
-    @media screen and (min-width: 401px) and (max-width: 800px) {
+    @media screen and (min-width: 515px) and (max-width: 800px) {
       /* line 29, ../sass/items/_item.scss */
       .items-holder .item.grid-item {
         width: 100%;
@@ -214,12 +214,20 @@
     .items-holder .item.grid-item .item-main {
       line-height: 160px;
       z-index: 1; }
-      /* line 105, ../sass/items/_item.scss */
+      @media screen and (max-width: 514px) {
+        /* line 99, ../sass/items/_item.scss */
+        .items-holder .item.grid-item .item-main {
+          display: none; } }
+      @media screen and (min-width: 515px) and (max-width: 800px) {
+        /* line 99, ../sass/items/_item.scss */
+        .items-holder .item.grid-item .item-main {
+          display: none; } }
+      /* line 112, ../sass/items/_item.scss */
       .items-holder .item.grid-item .item-main .item-type {
         color: #737373;
         text-align: center;
         font-size: 6em; }
-      /* line 111, ../sass/items/_item.scss */
+      /* line 118, ../sass/items/_item.scss */
       .items-holder .item.grid-item .item-main .item-open {
         -moz-transition-property: "opacity";
         -o-transition-property: "opacity";
@@ -239,17 +247,17 @@
         width: 50px;
         pointer-events: none;
         text-align: right; }
-    /* line 123, ../sass/items/_item.scss */
+    /* line 130, ../sass/items/_item.scss */
     .items-holder .item.grid-item .title {
       text-shadow: rgba(0, 0, 0, 0.1) 0 1px 2px;
       color: #cccccc;
       overflow: hidden;
       white-space: nowrap;
       text-overflow: ellipsis; }
-    /* line 131, ../sass/items/_item.scss */
+    /* line 138, ../sass/items/_item.scss */
     .items-holder .item.grid-item .details {
       font-size: 0.8em; }
-    /* line 134, ../sass/items/_item.scss */
+    /* line 141, ../sass/items/_item.scss */
     .items-holder .item.grid-item.selected {
       background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzBhYzJmZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwYjRmMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
       background-size: 100%;
@@ -286,15 +294,15 @@
       /* line 182, ../sass/_mixins.scss */
       .items-holder .item.grid-item.selected.btn-menu .invoke-menu {
         color: #52d4ff; }
-      /* line 139, ../sass/items/_item.scss */
+      /* line 146, ../sass/items/_item.scss */
       .items-holder .item.grid-item.selected .item-type, .items-holder .item.grid-item.selected .top-bar .icon:not(.alert) {
         color: #80dfff; }
-      /* line 140, ../sass/items/_item.scss */
+      /* line 147, ../sass/items/_item.scss */
       .items-holder .item.grid-item.selected .item-main .item-open {
         color: #80dfff; }
-      /* line 141, ../sass/items/_item.scss */
+      /* line 148, ../sass/items/_item.scss */
       .items-holder .item.grid-item.selected .title {
         color: white; }
-      /* line 143, ../sass/items/_item.scss */
+      /* line 150, ../sass/items/_item.scss */
       .items-holder .item.grid-item.selected:hover .item-main .item-type {
         color: white !important; }
diff --git a/platform/commonUI/general/res/sass/_constants.scss b/platform/commonUI/general/res/sass/_constants.scss
index 8f02938bb3..984d2e8dac 100644
--- a/platform/commonUI/general/res/sass/_constants.scss
+++ b/platform/commonUI/general/res/sass/_constants.scss
@@ -34,8 +34,8 @@ $smallCr: 2px;
 $badgeW: 35px;
 
 /************************** WINDOW DIMENSIONS FOR RWD */
-$phoMaxW: 400px;
-$tabMinW: 401px;
+$phoMaxW: 514px;
+$tabMinW: 515px;
 $tabMaxW: 800px;
 $compMinW: 801px; 
 $compMinH: 1281px;
diff --git a/platform/commonUI/general/res/sass/items/_item.scss b/platform/commonUI/general/res/sass/items/_item.scss
index cbdcc94b11..88e75bf940 100644
--- a/platform/commonUI/general/res/sass/items/_item.scss
+++ b/platform/commonUI/general/res/sass/items/_item.scss
@@ -97,6 +97,13 @@
                 }
             }
             .item-main {
+                @include phone {
+                    display: none;
+                }
+                @include tablet {
+                    display: none;   
+                }
+                
 	            $h: $ueBrowseGridItemLg;
 	            $lh: $h * 0.8;
                 //top: $ueBrowseGridItemTopBarH; bottom: $ueBrowseGridItemBottomBarH;

From 79fb6eabd9e9f5358fe18aede8c9cad7379eccd8 Mon Sep 17 00:00:00 2001
From: Dave <shivamndave>
Date: Tue, 7 Jul 2015 16:28:34 -0700
Subject: [PATCH 007/209] [Mobile] Menu Button

Menu button added to the
bundle and as a file modelled
after the action button.
---
 platform/commonUI/general/bundle.json         |  4 +++
 .../res/templates/controls/menu-button.html   | 32 +++++++++++++++++++
 2 files changed, 36 insertions(+)
 create mode 100644 platform/commonUI/general/res/templates/controls/menu-button.html

diff --git a/platform/commonUI/general/bundle.json b/platform/commonUI/general/bundle.json
index 2093a988cd..2dd8d5dc4c 100644
--- a/platform/commonUI/general/bundle.json
+++ b/platform/commonUI/general/bundle.json
@@ -43,6 +43,10 @@
                 "key": "action-button",
                 "templateUrl": "templates/controls/action-button.html"
             },
+            {
+                "key": "menu-button",
+                "templateUrl": "templates/controls/menu-button.html"
+            },
             {
                 "key": "input-filter",
                 "templateUrl": "templates/controls/input-filter.html"
diff --git a/platform/commonUI/general/res/templates/controls/menu-button.html b/platform/commonUI/general/res/templates/controls/menu-button.html
new file mode 100644
index 0000000000..a0d1adf3a6
--- /dev/null
+++ b/platform/commonUI/general/res/templates/controls/menu-button.html
@@ -0,0 +1,32 @@
+<!--
+ Open MCT Web, Copyright (c) 2014-2015, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT Web includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+<a class="btn s-btn s-icon-btn s-very-subtle key-{{parameters.action.getMetadata().key}}"
+   ng-class="{ labeled: parameters.labeled }"
+   title="{{parameters.action.getMetadata().description}}"
+   ng-click="parameters.action.perform()">
+    <span class="ui-symbol icon">
+        {{parameters.action.getMetadata().glyph}}
+    </span>
+    <span class="title-label" ng-if="parameters.labeled">
+        {{parameters.action.getMetadata().name}}
+    </span>
+</a>

From 24fae72492691676d1704c35979e39efc12b8084 Mon Sep 17 00:00:00 2001
From: Dave <shivamndave>
Date: Tue, 7 Jul 2015 16:46:32 -0700
Subject: [PATCH 008/209] [Mobile] Left tree

Attempt to resize left
tree menu when changing device.
Currently does not move the splitter
bar.
---
 .../commonUI/browse/res/templates/browse.html |   2 +-
 .../general/res/css/theme-espresso.css        | 105 ++++++++++--------
 .../res/sass/user-environ/_layout.scss        |  22 ++--
 .../res/templates/controls/menu-button.html   |  32 ------
 4 files changed, 68 insertions(+), 93 deletions(-)
 delete mode 100644 platform/commonUI/general/res/templates/controls/menu-button.html

diff --git a/platform/commonUI/browse/res/templates/browse.html b/platform/commonUI/browse/res/templates/browse.html
index d32752be55..91e4d58593 100644
--- a/platform/commonUI/browse/res/templates/browse.html
+++ b/platform/commonUI/browse/res/templates/browse.html
@@ -35,7 +35,7 @@
             </div>
             <mct-splitter></mct-splitter>
             <div class='split-pane-component items pane'>
-                <div class='holder abs rem-display' id='content-area'>
+                <div class='holder abs' id='content-area'>
                     <mct-representation mct-object="navigatedObject" key="'browse-object'">
                     </mct-representation>
                 </div>
diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index f9ab7b359c..1572bba47e 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -474,13 +474,24 @@ mct-container {
   -webkit-border-radius: 3px;
   border-radius: 3px; }
 
-/* line 57, ../sass/user-environ/_layout.scss */
-.browser-manage {
-  min-width: 150px;
-  max-width: 800px;
-  width: 25%; }
+@media screen and (max-width: 514px) {
+  /* line 57, ../sass/user-environ/_layout.scss */
+  .browser-manage {
+    width: 150px; } }
+@media screen and (min-width: 515px) and (max-width: 800px) {
+  /* line 57, ../sass/user-environ/_layout.scss */
+  .browser-manage {
+    min-width: 150px;
+    max-width: 300px;
+    width: 25%; } }
+@media screen and (min-width: 801px) {
+  /* line 57, ../sass/user-environ/_layout.scss */
+  .browser-manage {
+    min-width: 150px;
+    max-width: 800px;
+    width: 25%; } }
 
-/* line 75, ../sass/user-environ/_layout.scss */
+/* line 73, ../sass/user-environ/_layout.scss */
 .contents {
   box-sizing: border-box;
   position: absolute;
@@ -488,36 +499,36 @@ mct-container {
   right: 0;
   bottom: 0;
   left: 0; }
-  /* line 83, ../sass/user-environ/_layout.scss */
+  /* line 81, ../sass/user-environ/_layout.scss */
   .contents.nomargin {
     right: 0px;
     bottom: 0px;
     left: 0px; }
 
-/* line 92, ../sass/user-environ/_layout.scss */
+/* line 90, ../sass/user-environ/_layout.scss */
 .bar .icon.major {
   margin-right: 5px; }
-/* line 95, ../sass/user-environ/_layout.scss */
+/* line 93, ../sass/user-environ/_layout.scss */
 .bar.abs, .btn-menu span.bar.l-click-area {
   text-wrap: none;
   white-space: nowrap; }
-/* line 99, ../sass/user-environ/_layout.scss */
+/* line 97, ../sass/user-environ/_layout.scss */
 .bar.left,
 .bar .left {
   width: 45% !important;
   right: auto !important; }
-/* line 104, ../sass/user-environ/_layout.scss */
+/* line 102, ../sass/user-environ/_layout.scss */
 .bar.right,
 .bar .right {
   width: 45% !important;
   left: auto !important;
   text-align: right; }
-  /* line 109, ../sass/user-environ/_layout.scss */
+  /* line 107, ../sass/user-environ/_layout.scss */
   .bar.right .icon.major,
   .bar .right .icon.major {
     margin-left: 15px; }
 
-/* line 116, ../sass/user-environ/_layout.scss */
+/* line 114, ../sass/user-environ/_layout.scss */
 .user-environ .browse-area,
 .user-environ .edit-area,
 .user-environ .editor {
@@ -525,23 +536,23 @@ mct-container {
   right: 10px;
   bottom: 35px;
   left: 10px; }
-/* line 127, ../sass/user-environ/_layout.scss */
+/* line 125, ../sass/user-environ/_layout.scss */
 .user-environ .browse-area > .contents,
 .user-environ .edit-area > .contents {
   left: 0;
   right: 0; }
-/* line 133, ../sass/user-environ/_layout.scss */
+/* line 131, ../sass/user-environ/_layout.scss */
 .user-environ .edit-area {
   top: 45px; }
-  /* line 136, ../sass/user-environ/_layout.scss */
+  /* line 134, ../sass/user-environ/_layout.scss */
   .user-environ .edit-area .tool-bar {
     bottom: auto;
     height: 30px;
     line-height: 25px; }
-  /* line 141, ../sass/user-environ/_layout.scss */
+  /* line 139, ../sass/user-environ/_layout.scss */
   .user-environ .edit-area .work-area {
     top: 40px; }
-/* line 146, ../sass/user-environ/_layout.scss */
+/* line 144, ../sass/user-environ/_layout.scss */
 .user-environ .bottom-bar {
   overflow: hidden;
   position: absolute;
@@ -553,20 +564,20 @@ mct-container {
   height: auto;
   top: auto;
   height: 25px; }
-  /* line 151, ../sass/user-environ/_layout.scss */
+  /* line 149, ../sass/user-environ/_layout.scss */
   .user-environ .bottom-bar .status-holder {
     z-index: 1; }
-  /* line 155, ../sass/user-environ/_layout.scss */
+  /* line 153, ../sass/user-environ/_layout.scss */
   .user-environ .bottom-bar .app-logo {
     left: auto;
     width: 105px;
     z-index: 2; }
 
-/* line 163, ../sass/user-environ/_layout.scss */
+/* line 161, ../sass/user-environ/_layout.scss */
 .cols {
   overflow: hidden;
   *zoom: 1; }
-  /* line 165, ../sass/user-environ/_layout.scss */
+  /* line 163, ../sass/user-environ/_layout.scss */
   .cols .col {
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
@@ -577,100 +588,100 @@ mct-container {
     margin-left: 1.5%;
     padding-left: 5px;
     position: relative; }
-    /* line 173, ../sass/user-environ/_layout.scss */
+    /* line 171, ../sass/user-environ/_layout.scss */
     .cols .col:first-child {
       margin-left: 0;
       padding-left: 0; }
-  /* line 180, ../sass/user-environ/_layout.scss */
+  /* line 178, ../sass/user-environ/_layout.scss */
   .cols.cols-2 .col-1 {
     min-width: 250px;
     width: 48.5%; }
-  /* line 186, ../sass/user-environ/_layout.scss */
+  /* line 184, ../sass/user-environ/_layout.scss */
   .cols.cols-2-ff .col-100px {
     width: 100px; }
-  /* line 193, ../sass/user-environ/_layout.scss */
+  /* line 191, ../sass/user-environ/_layout.scss */
   .cols.cols-6 .col-1 {
     min-width: 83.33333px;
     width: 15.16667%; }
-  /* line 199, ../sass/user-environ/_layout.scss */
+  /* line 197, ../sass/user-environ/_layout.scss */
   .cols.cols-16 .col-1 {
     min-width: 31.25px;
     width: 4.75%; }
-  /* line 202, ../sass/user-environ/_layout.scss */
+  /* line 200, ../sass/user-environ/_layout.scss */
   .cols.cols-16 .col-2 {
     min-width: 62.5px;
     width: 11%; }
-  /* line 205, ../sass/user-environ/_layout.scss */
+  /* line 203, ../sass/user-environ/_layout.scss */
   .cols.cols-16 .col-7 {
     min-width: 218.75px;
     width: 42.25%; }
-  /* line 211, ../sass/user-environ/_layout.scss */
+  /* line 209, ../sass/user-environ/_layout.scss */
   .cols.cols-32 .col-2 {
     min-width: 31.25px;
     width: 4.75%; }
-  /* line 214, ../sass/user-environ/_layout.scss */
+  /* line 212, ../sass/user-environ/_layout.scss */
   .cols.cols-32 .col-15 {
     min-width: 234.375px;
     width: 45.375%; }
-  /* line 218, ../sass/user-environ/_layout.scss */
+  /* line 216, ../sass/user-environ/_layout.scss */
   .cols .l-row {
     overflow: hidden;
     *zoom: 1;
     padding: 5px 0; }
 
-/* line 224, ../sass/user-environ/_layout.scss */
+/* line 222, ../sass/user-environ/_layout.scss */
 .pane {
   position: absolute; }
-  /* line 227, ../sass/user-environ/_layout.scss */
+  /* line 225, ../sass/user-environ/_layout.scss */
   .pane.treeview .create-btn-holder {
     bottom: auto;
     top: 0;
     height: 24px; }
-    /* line 230, ../sass/user-environ/_layout.scss */
+    /* line 228, ../sass/user-environ/_layout.scss */
     .pane.treeview .create-btn-holder .wrapper.menu-element {
       position: absolute;
       bottom: 5px; }
-  /* line 235, ../sass/user-environ/_layout.scss */
+  /* line 233, ../sass/user-environ/_layout.scss */
   .pane.treeview .tree-holder {
     overflow: auto;
     top: 34px; }
-  /* line 242, ../sass/user-environ/_layout.scss */
+  /* line 240, ../sass/user-environ/_layout.scss */
   .pane.items .object-browse-bar .left.abs, .pane.items .object-browse-bar .btn-menu span.left.l-click-area, .btn-menu .pane.items .object-browse-bar span.left.l-click-area,
   .pane.items .object-browse-bar .right.abs,
   .pane.items .object-browse-bar .btn-menu span.right.l-click-area,
   .btn-menu .pane.items .object-browse-bar span.right.l-click-area {
     top: auto; }
-  /* line 247, ../sass/user-environ/_layout.scss */
+  /* line 245, ../sass/user-environ/_layout.scss */
   .pane.items .object-holder {
     top: 34px; }
-  /* line 252, ../sass/user-environ/_layout.scss */
+  /* line 250, ../sass/user-environ/_layout.scss */
   .pane.edit-main .object-holder {
     top: 0; }
-  /* line 258, ../sass/user-environ/_layout.scss */
+  /* line 256, ../sass/user-environ/_layout.scss */
   .pane .object-holder {
     overflow: auto; }
 
-/* line 266, ../sass/user-environ/_layout.scss */
+/* line 264, ../sass/user-environ/_layout.scss */
 .split-layout.horizontal > .pane {
   margin-top: 5px; }
-  /* line 269, ../sass/user-environ/_layout.scss */
+  /* line 267, ../sass/user-environ/_layout.scss */
   .split-layout.horizontal > .pane:first-child {
     margin-top: 0; }
-/* line 276, ../sass/user-environ/_layout.scss */
+/* line 274, ../sass/user-environ/_layout.scss */
 .split-layout.vertical > .pane {
   margin-left: 5px; }
-  /* line 278, ../sass/user-environ/_layout.scss */
+  /* line 276, ../sass/user-environ/_layout.scss */
   .split-layout.vertical > .pane > .holder {
     left: 0;
     right: 0; }
-  /* line 282, ../sass/user-environ/_layout.scss */
+  /* line 280, ../sass/user-environ/_layout.scss */
   .split-layout.vertical > .pane:first-child {
     margin-left: 0; }
-    /* line 284, ../sass/user-environ/_layout.scss */
+    /* line 282, ../sass/user-environ/_layout.scss */
     .split-layout.vertical > .pane:first-child .holder {
       right: 5px; }
 
-/* line 293, ../sass/user-environ/_layout.scss */
+/* line 291, ../sass/user-environ/_layout.scss */
 .vscroll {
   overflow-y: auto; }
 
diff --git a/platform/commonUI/general/res/sass/user-environ/_layout.scss b/platform/commonUI/general/res/sass/user-environ/_layout.scss
index 9d9a6fa33a..e9be867628 100644
--- a/platform/commonUI/general/res/sass/user-environ/_layout.scss
+++ b/platform/commonUI/general/res/sass/user-environ/_layout.scss
@@ -55,21 +55,17 @@ $min-large: 770px;
 
 // style="min-width: 150px; max-width: 800px; width: 25%;"
 .browser-manage {
-//    @media only screen and ($max-name : $max-small) {
-//        width: 100%;
-//    }
-//    
-//    @media only screen and ($min-name : $min-large) {
+    @include phone {
+        width: 150px;
+    }
+    @include tablet {
+        width: 150px; 
+    }    
+    @include desktop {
         min-width: 150px;
         max-width: 800px;
-        width: 25%;
-//    }
-}
-
-.rem-display {
-//    @media only screen and ($max-name : $max-small) {
-//        display: none;
-//    }
+        width: 25%;   
+    }   
 }
 
 .contents {
diff --git a/platform/commonUI/general/res/templates/controls/menu-button.html b/platform/commonUI/general/res/templates/controls/menu-button.html
deleted file mode 100644
index a0d1adf3a6..0000000000
--- a/platform/commonUI/general/res/templates/controls/menu-button.html
+++ /dev/null
@@ -1,32 +0,0 @@
-<!--
- Open MCT Web, Copyright (c) 2014-2015, United States Government
- as represented by the Administrator of the National Aeronautics and Space
- Administration. All rights reserved.
-
- Open MCT Web is licensed under the Apache License, Version 2.0 (the
- "License"); you may not use this file except in compliance with the License.
- You may obtain a copy of the License at
- http://www.apache.org/licenses/LICENSE-2.0.
-
- Unless required by applicable law or agreed to in writing, software
- distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- License for the specific language governing permissions and limitations
- under the License.
-
- Open MCT Web includes source code licensed under additional open source
- licenses. See the Open Source Licenses file (LICENSES.md) included with
- this source code distribution or the Licensing information page available
- at runtime from the About dialog for additional information.
--->
-<a class="btn s-btn s-icon-btn s-very-subtle key-{{parameters.action.getMetadata().key}}"
-   ng-class="{ labeled: parameters.labeled }"
-   title="{{parameters.action.getMetadata().description}}"
-   ng-click="parameters.action.perform()">
-    <span class="ui-symbol icon">
-        {{parameters.action.getMetadata().glyph}}
-    </span>
-    <span class="title-label" ng-if="parameters.labeled">
-        {{parameters.action.getMetadata().name}}
-    </span>
-</a>

From 3704d64560ecd3285a3976e0fe988ea44f1b43c9 Mon Sep 17 00:00:00 2001
From: Dave <shivamndave>
Date: Wed, 8 Jul 2015 11:08:31 -0700
Subject: [PATCH 009/209] [Mobile] Push to show current

---
 .../commonUI/browse/res/templates/browse.html |  4 +-
 .../res/templates/create/create-button.html   |  3 +
 platform/commonUI/general/res/css/forms.css   |  6 +-
 platform/commonUI/general/res/css/items.css   | 12 +--
 .../general/res/css/theme-espresso.css        | 86 +++++++++----------
 platform/commonUI/general/res/css/tree.css    |  2 +-
 .../commonUI/general/res/sass/_mixins.scss    |  6 ++
 .../res/sass/user-environ/_layout.scss        | 18 ++--
 .../src/controllers/ClickAwayController.js    |  9 ++
 9 files changed, 82 insertions(+), 64 deletions(-)

diff --git a/platform/commonUI/browse/res/templates/browse.html b/platform/commonUI/browse/res/templates/browse.html
index 91e4d58593..c955d596eb 100644
--- a/platform/commonUI/browse/res/templates/browse.html
+++ b/platform/commonUI/browse/res/templates/browse.html
@@ -23,7 +23,7 @@
     <mct-include key="'topbar-browse'"></mct-include>
     <div class="holder browse-area s-browse-area abs" ng-controller="BrowseController">
         <mct-split-pane class='contents abs' anchor='left'>
-            <div class='split-pane-component treeview pane browser-manage'>
+            <div class='split-pane-component treeview pane browse-manage'>
                 <mct-representation key="'create-button'" mct-object="navigatedObject">
                 </mct-representation>
                 <div class='holder tree-holder abs'>
@@ -35,7 +35,7 @@
             </div>
             <mct-splitter></mct-splitter>
             <div class='split-pane-component items pane'>
-                <div class='holder abs' id='content-area'>
+                <div class='holder abs hider-check' id='content-area'>
                     <mct-representation mct-object="navigatedObject" key="'browse-object'">
                     </mct-representation>
                 </div>
diff --git a/platform/commonUI/browse/res/templates/create/create-button.html b/platform/commonUI/browse/res/templates/create/create-button.html
index 527afd9882..6f1efc9604 100644
--- a/platform/commonUI/browse/res/templates/create/create-button.html
+++ b/platform/commonUI/browse/res/templates/create/create-button.html
@@ -27,4 +27,7 @@
         <mct-representation mct-object="domainObject" key="'create-menu'">
         </mct-representation>
     </div>
+    <div class="btn s-btn s-icon-btn s-very-subtle key-properties" ng-click="createController.showtree()">
+    T
+    </div>
 </div>
\ No newline at end of file
diff --git a/platform/commonUI/general/res/css/forms.css b/platform/commonUI/general/res/css/forms.css
index 30db438d36..bb0416c485 100644
--- a/platform/commonUI/general/res/css/forms.css
+++ b/platform/commonUI/general/res/css/forms.css
@@ -392,7 +392,7 @@ input[type="text"] {
   margin: 0 0 2px 2px;
   overflow: hidden;
   position: relative; }
-  /* line 174, ../sass/_mixins.scss */
+  /* line 180, ../sass/_mixins.scss */
   .form-control.select:not(.disabled):hover {
     background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzYzNjM2MyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzU3NTc1NyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
     background-size: 100%;
@@ -401,10 +401,10 @@ input[type="text"] {
     background-image: -webkit-linear-gradient(#636363, #575757);
     background-image: linear-gradient(#636363, #575757);
     color: #bdbdbd; }
-    /* line 177, ../sass/_mixins.scss */
+    /* line 183, ../sass/_mixins.scss */
     .form-control.select:not(.disabled):hover.btn-menu .invoke-menu {
       color: #878787; }
-  /* line 182, ../sass/_mixins.scss */
+  /* line 188, ../sass/_mixins.scss */
   .form-control.select.btn-menu .invoke-menu {
     color: #757575; }
   /* line 29, ../sass/forms/_selects.scss */
diff --git a/platform/commonUI/general/res/css/items.css b/platform/commonUI/general/res/css/items.css
index 043c01a5e4..af53c1c0f4 100644
--- a/platform/commonUI/general/res/css/items.css
+++ b/platform/commonUI/general/res/css/items.css
@@ -152,7 +152,7 @@
       .items-holder .item.grid-item {
         width: 200px;
         height: 200px; } }
-    /* line 174, ../sass/_mixins.scss */
+    /* line 180, ../sass/_mixins.scss */
     .items-holder .item.grid-item:not(.disabled):hover {
       background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzcwNzA3MCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzYzNjM2MyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
       background-size: 100%;
@@ -161,10 +161,10 @@
       background-image: -webkit-linear-gradient(#707070, #636363);
       background-image: linear-gradient(#707070, #636363);
       color: #bdbdbd; }
-      /* line 177, ../sass/_mixins.scss */
+      /* line 183, ../sass/_mixins.scss */
       .items-holder .item.grid-item:not(.disabled):hover.btn-menu .invoke-menu {
         color: #949494; }
-    /* line 182, ../sass/_mixins.scss */
+    /* line 188, ../sass/_mixins.scss */
     .items-holder .item.grid-item.btn-menu .invoke-menu {
       color: #828282; }
     /* line 65, ../sass/items/_item.scss */
@@ -279,7 +279,7 @@
       color: #999;
       display: inline-block;
       color: #80dfff; }
-      /* line 174, ../sass/_mixins.scss */
+      /* line 180, ../sass/_mixins.scss */
       .items-holder .item.grid-item.selected:not(.disabled):hover {
         background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzJlY2JmZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzE0YzRmZiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
         background-size: 100%;
@@ -288,10 +288,10 @@
         background-image: -webkit-linear-gradient(#2ecbff, #14c4ff);
         background-image: linear-gradient(#2ecbff, #14c4ff);
         color: #bdbdbd; }
-        /* line 177, ../sass/_mixins.scss */
+        /* line 183, ../sass/_mixins.scss */
         .items-holder .item.grid-item.selected:not(.disabled):hover.btn-menu .invoke-menu {
           color: #75ddff; }
-      /* line 182, ../sass/_mixins.scss */
+      /* line 188, ../sass/_mixins.scss */
       .items-holder .item.grid-item.selected.btn-menu .invoke-menu {
         color: #52d4ff; }
       /* line 146, ../sass/items/_item.scss */
diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index 1572bba47e..cd9028b9fa 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -475,18 +475,16 @@ mct-container {
   border-radius: 3px; }
 
 @media screen and (max-width: 514px) {
-  /* line 57, ../sass/user-environ/_layout.scss */
-  .browser-manage {
-    width: 150px; } }
+  /* line 59, ../sass/user-environ/_layout.scss */
+  .browse-manage {
+    width: 100px; } }
 @media screen and (min-width: 515px) and (max-width: 800px) {
-  /* line 57, ../sass/user-environ/_layout.scss */
-  .browser-manage {
-    min-width: 150px;
-    max-width: 300px;
-    width: 25%; } }
+  /* line 59, ../sass/user-environ/_layout.scss */
+  .browse-manage {
+    width: 150px; } }
 @media screen and (min-width: 801px) {
-  /* line 57, ../sass/user-environ/_layout.scss */
-  .browser-manage {
+  /* line 59, ../sass/user-environ/_layout.scss */
+  .browse-manage {
     min-width: 150px;
     max-width: 800px;
     width: 25%; } }
@@ -1452,7 +1450,7 @@ mct-container {
     color: #999;
     display: inline-block;
     color: #ccf2ff; }
-    /* line 174, ../sass/_mixins.scss */
+    /* line 180, ../sass/_mixins.scss */
     .btn.major:not(.disabled):hover,
     .s-btn.major:not(.disabled):hover,
     .major.icon-btn:not(.disabled):hover,
@@ -1464,13 +1462,13 @@ mct-container {
       background-image: -webkit-linear-gradient(#2ecbff, #14c4ff);
       background-image: linear-gradient(#2ecbff, #14c4ff);
       color: #bdbdbd; }
-      /* line 177, ../sass/_mixins.scss */
+      /* line 183, ../sass/_mixins.scss */
       .btn.major:not(.disabled):hover.btn-menu .invoke-menu,
       .s-btn.major:not(.disabled):hover.btn-menu .invoke-menu,
       .major.icon-btn:not(.disabled):hover.btn-menu .invoke-menu,
       .major.s-icon-btn:not(.disabled):hover.btn-menu .invoke-menu {
         color: #75ddff; }
-    /* line 182, ../sass/_mixins.scss */
+    /* line 188, ../sass/_mixins.scss */
     .btn.major.btn-menu .invoke-menu,
     .s-btn.major.btn-menu .invoke-menu,
     .major.btn-menu.icon-btn .invoke-menu,
@@ -1500,7 +1498,7 @@ mct-container {
       border-top: 1px solid #2ecbff;
       color: #ccf2ff;
       display: inline-block; }
-      /* line 174, ../sass/_mixins.scss */
+      /* line 180, ../sass/_mixins.scss */
       .btn.major:hover:not(.disabled):hover,
       .s-btn.major:hover:not(.disabled):hover,
       .major.icon-btn:hover:not(.disabled):hover,
@@ -1512,13 +1510,13 @@ mct-container {
         background-image: -webkit-linear-gradient(#47d1ff, #2ecbff);
         background-image: linear-gradient(#47d1ff, #2ecbff);
         color: white; }
-        /* line 177, ../sass/_mixins.scss */
+        /* line 183, ../sass/_mixins.scss */
         .btn.major:hover:not(.disabled):hover.btn-menu .invoke-menu,
         .s-btn.major:hover:not(.disabled):hover.btn-menu .invoke-menu,
         .major.icon-btn:hover:not(.disabled):hover.btn-menu .invoke-menu,
         .major.s-icon-btn:hover:not(.disabled):hover.btn-menu .invoke-menu {
           color: #8fe3ff; }
-      /* line 182, ../sass/_mixins.scss */
+      /* line 188, ../sass/_mixins.scss */
       .btn.major:hover.btn-menu .invoke-menu,
       .s-btn.major:hover.btn-menu .invoke-menu,
       .major.icon-btn:hover.btn-menu .invoke-menu,
@@ -1554,7 +1552,7 @@ mct-container {
     border-top: 1px solid #8a8a8a;
     color: #cccccc;
     display: inline-block; }
-    /* line 174, ../sass/_mixins.scss */
+    /* line 180, ../sass/_mixins.scss */
     .btn.subtle:not(.disabled):hover,
     .s-btn.subtle:not(.disabled):hover,
     .subtle.icon-btn:not(.disabled):hover,
@@ -1566,13 +1564,13 @@ mct-container {
       background-image: -webkit-linear-gradient(#969696, #8a8a8a);
       background-image: linear-gradient(#969696, #8a8a8a);
       color: #f0f0f0; }
-      /* line 177, ../sass/_mixins.scss */
+      /* line 183, ../sass/_mixins.scss */
       .btn.subtle:not(.disabled):hover.btn-menu .invoke-menu,
       .s-btn.subtle:not(.disabled):hover.btn-menu .invoke-menu,
       .subtle.icon-btn:not(.disabled):hover.btn-menu .invoke-menu,
       .subtle.s-icon-btn:not(.disabled):hover.btn-menu .invoke-menu {
         color: #bababa; }
-    /* line 182, ../sass/_mixins.scss */
+    /* line 188, ../sass/_mixins.scss */
     .btn.subtle.btn-menu .invoke-menu,
     .s-btn.subtle.btn-menu .invoke-menu,
     .subtle.btn-menu.icon-btn .invoke-menu,
@@ -1605,7 +1603,7 @@ mct-container {
     border-top: 1px solid #575757;
     color: #999;
     display: inline-block; }
-    /* line 174, ../sass/_mixins.scss */
+    /* line 180, ../sass/_mixins.scss */
     .btn.very-subtle:not(.disabled):hover, .btn.s-very-subtle:not(.disabled):hover,
     .s-btn.very-subtle:not(.disabled):hover,
     .very-subtle.icon-btn:not(.disabled):hover,
@@ -1620,7 +1618,7 @@ mct-container {
       background-image: -webkit-linear-gradient(#636363, #575757);
       background-image: linear-gradient(#636363, #575757);
       color: #bdbdbd; }
-      /* line 177, ../sass/_mixins.scss */
+      /* line 183, ../sass/_mixins.scss */
       .btn.very-subtle:not(.disabled):hover.btn-menu .invoke-menu, .btn.s-very-subtle:not(.disabled):hover.btn-menu .invoke-menu,
       .s-btn.very-subtle:not(.disabled):hover.btn-menu .invoke-menu,
       .very-subtle.icon-btn:not(.disabled):hover.btn-menu .invoke-menu,
@@ -1629,7 +1627,7 @@ mct-container {
       .s-very-subtle.icon-btn:not(.disabled):hover.btn-menu .invoke-menu,
       .s-very-subtle.s-icon-btn:not(.disabled):hover.btn-menu .invoke-menu {
         color: #878787; }
-    /* line 182, ../sass/_mixins.scss */
+    /* line 188, ../sass/_mixins.scss */
     .btn.very-subtle.btn-menu .invoke-menu, .btn.s-very-subtle.btn-menu .invoke-menu,
     .s-btn.very-subtle.btn-menu .invoke-menu,
     .very-subtle.btn-menu.icon-btn .invoke-menu,
@@ -1665,7 +1663,7 @@ mct-container {
       border-top: 1px solid #fe9510;
       color: #fff;
       display: inline-block; }
-      /* line 174, ../sass/_mixins.scss */
+      /* line 180, ../sass/_mixins.scss */
       .btn.very-subtle.paused:not(.disabled):hover, .btn.s-very-subtle.paused:not(.disabled):hover,
       .s-btn.very-subtle.paused:not(.disabled):hover,
       .very-subtle.paused.icon-btn:not(.disabled):hover,
@@ -1680,7 +1678,7 @@ mct-container {
         background-image: -webkit-linear-gradient(#fea029, #fe9510);
         background-image: linear-gradient(#fea029, #fe9510);
         color: white; }
-        /* line 177, ../sass/_mixins.scss */
+        /* line 183, ../sass/_mixins.scss */
         .btn.very-subtle.paused:not(.disabled):hover.btn-menu .invoke-menu, .btn.s-very-subtle.paused:not(.disabled):hover.btn-menu .invoke-menu,
         .s-btn.very-subtle.paused:not(.disabled):hover.btn-menu .invoke-menu,
         .very-subtle.paused.icon-btn:not(.disabled):hover.btn-menu .invoke-menu,
@@ -1689,7 +1687,7 @@ mct-container {
         .s-very-subtle.paused.icon-btn:not(.disabled):hover.btn-menu .invoke-menu,
         .s-very-subtle.paused.s-icon-btn:not(.disabled):hover.btn-menu .invoke-menu {
           color: #fec070; }
-      /* line 182, ../sass/_mixins.scss */
+      /* line 188, ../sass/_mixins.scss */
       .btn.very-subtle.paused.btn-menu .invoke-menu, .btn.s-very-subtle.paused.btn-menu .invoke-menu,
       .s-btn.very-subtle.paused.btn-menu .invoke-menu,
       .very-subtle.paused.btn-menu.icon-btn .invoke-menu,
@@ -2151,7 +2149,7 @@ label.checkbox.custom {
   			color: lighten($c, 10%);
   		}
   	}*/ }
-  /* line 174, ../sass/_mixins.scss */
+  /* line 180, ../sass/_mixins.scss */
   .btn-menu:not(.disabled):hover {
     background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzYzNjM2MyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzU3NTc1NyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
     background-size: 100%;
@@ -2160,10 +2158,10 @@ label.checkbox.custom {
     background-image: -webkit-linear-gradient(#636363, #575757);
     background-image: linear-gradient(#636363, #575757);
     color: #bdbdbd; }
-    /* line 177, ../sass/_mixins.scss */
+    /* line 183, ../sass/_mixins.scss */
     .btn-menu:not(.disabled):hover.btn-menu .invoke-menu {
       color: #878787; }
-  /* line 182, ../sass/_mixins.scss */
+  /* line 188, ../sass/_mixins.scss */
   .btn-menu.btn-menu .invoke-menu {
     color: #757575; }
   /* line 285, ../sass/controls/_controls.scss */
@@ -2295,7 +2293,7 @@ label.checkbox.custom {
   auto: 0;
   bottom: auto;
   left: auto; }
-  /* line 174, ../sass/_mixins.scss */
+  /* line 180, ../sass/_mixins.scss */
   .slider .knob:not(.disabled):hover {
     background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzYzNjM2MyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzU3NTc1NyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
     background-size: 100%;
@@ -2304,13 +2302,13 @@ label.checkbox.custom {
     background-image: -webkit-linear-gradient(#636363, #575757);
     background-image: linear-gradient(#636363, #575757);
     color: #bdbdbd; }
-    /* line 177, ../sass/_mixins.scss */
+    /* line 183, ../sass/_mixins.scss */
     .slider .knob:not(.disabled):hover.btn-menu .invoke-menu {
       color: #878787; }
-  /* line 182, ../sass/_mixins.scss */
+  /* line 188, ../sass/_mixins.scss */
   .slider .knob.btn-menu .invoke-menu {
     color: #757575; }
-  /* line 198, ../sass/_mixins.scss */
+  /* line 204, ../sass/_mixins.scss */
   .slider .knob:before {
     -moz-transition-property: "border-color";
     -o-transition-property: "border-color";
@@ -2334,7 +2332,7 @@ label.checkbox.custom {
     left: 2px;
     bottom: 5px;
     top: 5px; }
-  /* line 220, ../sass/_mixins.scss */
+  /* line 226, ../sass/_mixins.scss */
   .slider .knob:not(.disabled):hover:before {
     -moz-transition-property: "border-color";
     -o-transition-property: "border-color";
@@ -2506,14 +2504,14 @@ label.checkbox.custom {
     padding: 3px 0;
     position: absolute;
     z-index: 10; }
-    /* line 182, ../sass/_mixins.scss */
+    /* line 188, ../sass/_mixins.scss */
     .menu-element .menu.btn-menu .invoke-menu {
       color: #828282; }
     /* line 37, ../sass/controls/_menus.scss */
     .menu-element .menu ul {
       margin: 0;
       padding: 0; }
-      /* line 288, ../sass/_mixins.scss */
+      /* line 294, ../sass/_mixins.scss */
       .menu-element .menu ul li {
         list-style-type: none;
         margin: 0;
@@ -2569,7 +2567,7 @@ label.checkbox.custom {
     border-top: 1px solid #919191;
     color: #999;
     display: inline-block; }
-    /* line 182, ../sass/_mixins.scss */
+    /* line 188, ../sass/_mixins.scss */
     .menu-element .context-menu.btn-menu .invoke-menu,
     .menu-element .super-menu.btn-menu .invoke-menu {
       color: #b0b0b0; }
@@ -3432,7 +3430,7 @@ input[type="text"] {
   margin: 0 0 2px 2px;
   overflow: hidden;
   position: relative; }
-  /* line 174, ../sass/_mixins.scss */
+  /* line 180, ../sass/_mixins.scss */
   .form-control.select:not(.disabled):hover {
     background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzYzNjM2MyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzU3NTc1NyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
     background-size: 100%;
@@ -3441,10 +3439,10 @@ input[type="text"] {
     background-image: -webkit-linear-gradient(#636363, #575757);
     background-image: linear-gradient(#636363, #575757);
     color: #bdbdbd; }
-    /* line 177, ../sass/_mixins.scss */
+    /* line 183, ../sass/_mixins.scss */
     .form-control.select:not(.disabled):hover.btn-menu .invoke-menu {
       color: #878787; }
-  /* line 182, ../sass/_mixins.scss */
+  /* line 188, ../sass/_mixins.scss */
   .form-control.select.btn-menu .invoke-menu {
     color: #757575; }
   /* line 29, ../sass/forms/_selects.scss */
@@ -4062,7 +4060,7 @@ input[type="text"] {
   bottom: 15%;
   left: 15%;
   z-index: 101; }
-  /* line 182, ../sass/_mixins.scss */
+  /* line 188, ../sass/_mixins.scss */
   .overlay > .holder.btn-menu .invoke-menu {
     color: #757575; }
   /* line 45, ../sass/overlay/_overlay.scss */
@@ -4570,7 +4568,7 @@ input[type="text"] {
     right: 0;
     width: auto;
     height: 5px; }
-    /* line 198, ../sass/_mixins.scss */
+    /* line 204, ../sass/_mixins.scss */
     .split-layout.horizontal > .splitter:before {
       -moz-transition-property: "border-color";
       -o-transition-property: "border-color";
@@ -4594,7 +4592,7 @@ input[type="text"] {
       top: 2px;
       left: 5px;
       right: 5px; }
-    /* line 220, ../sass/_mixins.scss */
+    /* line 226, ../sass/_mixins.scss */
     .split-layout.horizontal > .splitter:not(.disabled):hover:before {
       -moz-transition-property: "border-color";
       -o-transition-property: "border-color";
@@ -4624,7 +4622,7 @@ input[type="text"] {
   bottom: 0;
   cursor: col-resize;
   width: 5px; }
-  /* line 198, ../sass/_mixins.scss */
+  /* line 204, ../sass/_mixins.scss */
   .split-layout.vertical > .splitter:before {
     -moz-transition-property: "border-color";
     -o-transition-property: "border-color";
@@ -4648,7 +4646,7 @@ input[type="text"] {
     left: 2px;
     bottom: 5px;
     top: 5px; }
-  /* line 220, ../sass/_mixins.scss */
+  /* line 226, ../sass/_mixins.scss */
   .split-layout.vertical > .splitter:not(.disabled):hover:before {
     -moz-transition-property: "border-color";
     -o-transition-property: "border-color";
diff --git a/platform/commonUI/general/res/css/tree.css b/platform/commonUI/general/res/css/tree.css
index 45855efc19..9c7fd6d0ef 100644
--- a/platform/commonUI/general/res/css/tree.css
+++ b/platform/commonUI/general/res/css/tree.css
@@ -104,7 +104,7 @@
 ul.tree {
   margin: 0;
   padding: 0; }
-  /* line 288, ../sass/_mixins.scss */
+  /* line 294, ../sass/_mixins.scss */
   ul.tree li {
     list-style-type: none;
     margin: 0;
diff --git a/platform/commonUI/general/res/sass/_mixins.scss b/platform/commonUI/general/res/sass/_mixins.scss
index 2f5baa7ea5..2ae67b18fd 100644
--- a/platform/commonUI/general/res/sass/_mixins.scss
+++ b/platform/commonUI/general/res/sass/_mixins.scss
@@ -33,6 +33,12 @@
     }
 }
 
+@mixin phoneandtablet {
+    @media screen and (max-width: $tabMaxW) {
+        @content
+    }
+}
+
 @mixin desktop {
     @media screen and (min-width: $compMinW) {
         @content
diff --git a/platform/commonUI/general/res/sass/user-environ/_layout.scss b/platform/commonUI/general/res/sass/user-environ/_layout.scss
index e9be867628..08b5d80726 100644
--- a/platform/commonUI/general/res/sass/user-environ/_layout.scss
+++ b/platform/commonUI/general/res/sass/user-environ/_layout.scss
@@ -48,18 +48,20 @@
 	@include border-radius($basicCr * 1.5);
 }
 
-$min-name: min-device-width;
-$max-name: max-device-width;
-$max-small: 769px;
-$min-large: 770px;
-
 // style="min-width: 150px; max-width: 800px; width: 25%;"
-.browser-manage {
+// NOTE: Added to adjust the browse folder tree list view
+//.hider-check {
+//    @include phoneandtablet {
+//        
+//    } 
+//}
+
+.browse-manage {
     @include phone {
-        width: 150px;
+        width: 100px;
     }
     @include tablet {
-        width: 150px; 
+        width: 150px;
     }    
     @include desktop {
         min-width: 150px;
diff --git a/platform/commonUI/general/src/controllers/ClickAwayController.js b/platform/commonUI/general/src/controllers/ClickAwayController.js
index 75b1d985da..2b75ffba41 100644
--- a/platform/commonUI/general/src/controllers/ClickAwayController.js
+++ b/platform/commonUI/general/src/controllers/ClickAwayController.js
@@ -58,6 +58,11 @@ define(
                     activate();
                 }
             }
+            function changeTree() {
+                console.log("WWWWW");
+            }
+            
+            
 
             // Callback used by the document listener. Deactivates;
             // note also $scope.$apply is invoked to indicate that
@@ -91,6 +96,10 @@ define(
                  */
                 toggle: function () {
                     changeState();
+                },
+                
+                showtree: function () {
+                    changeTree();
                 }
             };
 

From 2b4162c0be7383c4cfd8cc3eb2eece2e1724cdbe Mon Sep 17 00:00:00 2001
From: Dave <shivamndave>
Date: Wed, 8 Jul 2015 12:11:48 -0700
Subject: [PATCH 010/209] [Mobile] Reorganize

Reorganized the sass files. To incorporate, new
mobile directory, which holds all the mobile
sass code.
---
 platform/commonUI/general/res/css/forms.css   |   7 +-
 platform/commonUI/general/res/css/items.css   | 125 +++++++--
 .../general/res/css/theme-espresso.css        | 247 +++++++++++-------
 platform/commonUI/general/res/css/tree.css    |   3 +-
 .../commonUI/general/res/sass/_constants.scss |   7 -
 platform/commonUI/general/res/sass/_main.scss |   4 +
 .../commonUI/general/res/sass/_mixins.scss    |  27 --
 platform/commonUI/general/res/sass/items.scss |   5 +-
 .../general/res/sass/items/_item.scss         |   1 +
 .../general/res/sass/mobile/_constants.scss   |  28 ++
 .../general/res/sass/mobile/_item.scss        |  62 +++++
 .../general/res/sass/mobile/_layout.scss      |  43 +++
 .../general/res/sass/mobile/_mixins.scss      |  46 ++++
 .../general/res/sass/theme-espresso.scss      |   1 +
 .../res/sass/user-environ/_layout.scss        |  22 --
 15 files changed, 454 insertions(+), 174 deletions(-)
 create mode 100644 platform/commonUI/general/res/sass/mobile/_constants.scss
 create mode 100644 platform/commonUI/general/res/sass/mobile/_item.scss
 create mode 100644 platform/commonUI/general/res/sass/mobile/_layout.scss
 create mode 100644 platform/commonUI/general/res/sass/mobile/_mixins.scss

diff --git a/platform/commonUI/general/res/css/forms.css b/platform/commonUI/general/res/css/forms.css
index bb0416c485..4400441d9c 100644
--- a/platform/commonUI/general/res/css/forms.css
+++ b/platform/commonUI/general/res/css/forms.css
@@ -42,7 +42,6 @@
  *****************************************************************************/
 /************************** FEATURES */
 /************************** VERY INFLUENTIAL GLOBAL DIMENSIONS */
-/************************** WINDOW DIMENSIONS FOR RWD */
 /************************** COLORS AND SHADING */
 /************************** RATIOS */
 /************************** LAYOUT */
@@ -392,7 +391,7 @@ input[type="text"] {
   margin: 0 0 2px 2px;
   overflow: hidden;
   position: relative; }
-  /* line 180, ../sass/_mixins.scss */
+  /* line 153, ../sass/_mixins.scss */
   .form-control.select:not(.disabled):hover {
     background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzYzNjM2MyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzU3NTc1NyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
     background-size: 100%;
@@ -401,10 +400,10 @@ input[type="text"] {
     background-image: -webkit-linear-gradient(#636363, #575757);
     background-image: linear-gradient(#636363, #575757);
     color: #bdbdbd; }
-    /* line 183, ../sass/_mixins.scss */
+    /* line 156, ../sass/_mixins.scss */
     .form-control.select:not(.disabled):hover.btn-menu .invoke-menu {
       color: #878787; }
-  /* line 188, ../sass/_mixins.scss */
+  /* line 161, ../sass/_mixins.scss */
   .form-control.select.btn-menu .invoke-menu {
     color: #757575; }
   /* line 29, ../sass/forms/_selects.scss */
diff --git a/platform/commonUI/general/res/css/items.css b/platform/commonUI/general/res/css/items.css
index af53c1c0f4..88c0791919 100644
--- a/platform/commonUI/general/res/css/items.css
+++ b/platform/commonUI/general/res/css/items.css
@@ -42,13 +42,34 @@
  *****************************************************************************/
 /************************** FEATURES */
 /************************** VERY INFLUENTIAL GLOBAL DIMENSIONS */
-/************************** WINDOW DIMENSIONS FOR RWD */
 /************************** COLORS AND SHADING */
 /************************** RATIOS */
 /************************** LAYOUT */
 /************************** CONTROLS */
 /************************** PATHS */
 /************************** TIMINGS */
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+/************************** WINDOW DIMENSIONS FOR RWD */
 /*****************************************************************************
  * Open MCT Web, Copyright (c) 2014-2015, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
@@ -79,6 +100,27 @@
 	}
 }
 */
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
 /*****************************************************************************
  * Open MCT Web, Copyright (c) 2014-2015, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
@@ -152,7 +194,7 @@
       .items-holder .item.grid-item {
         width: 200px;
         height: 200px; } }
-    /* line 180, ../sass/_mixins.scss */
+    /* line 153, ../sass/_mixins.scss */
     .items-holder .item.grid-item:not(.disabled):hover {
       background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzcwNzA3MCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzYzNjM2MyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
       background-size: 100%;
@@ -161,10 +203,10 @@
       background-image: -webkit-linear-gradient(#707070, #636363);
       background-image: linear-gradient(#707070, #636363);
       color: #bdbdbd; }
-      /* line 183, ../sass/_mixins.scss */
+      /* line 156, ../sass/_mixins.scss */
       .items-holder .item.grid-item:not(.disabled):hover.btn-menu .invoke-menu {
         color: #949494; }
-    /* line 188, ../sass/_mixins.scss */
+    /* line 161, ../sass/_mixins.scss */
     .items-holder .item.grid-item.btn-menu .invoke-menu {
       color: #828282; }
     /* line 65, ../sass/items/_item.scss */
@@ -210,24 +252,24 @@
       top: auto;
       height: 30px;
       padding: 5px; }
-    /* line 99, ../sass/items/_item.scss */
+    /* line 100, ../sass/items/_item.scss */
     .items-holder .item.grid-item .item-main {
       line-height: 160px;
       z-index: 1; }
       @media screen and (max-width: 514px) {
-        /* line 99, ../sass/items/_item.scss */
+        /* line 100, ../sass/items/_item.scss */
         .items-holder .item.grid-item .item-main {
           display: none; } }
       @media screen and (min-width: 515px) and (max-width: 800px) {
-        /* line 99, ../sass/items/_item.scss */
+        /* line 100, ../sass/items/_item.scss */
         .items-holder .item.grid-item .item-main {
           display: none; } }
-      /* line 112, ../sass/items/_item.scss */
+      /* line 113, ../sass/items/_item.scss */
       .items-holder .item.grid-item .item-main .item-type {
         color: #737373;
         text-align: center;
         font-size: 6em; }
-      /* line 118, ../sass/items/_item.scss */
+      /* line 119, ../sass/items/_item.scss */
       .items-holder .item.grid-item .item-main .item-open {
         -moz-transition-property: "opacity";
         -o-transition-property: "opacity";
@@ -247,17 +289,17 @@
         width: 50px;
         pointer-events: none;
         text-align: right; }
-    /* line 130, ../sass/items/_item.scss */
+    /* line 131, ../sass/items/_item.scss */
     .items-holder .item.grid-item .title {
       text-shadow: rgba(0, 0, 0, 0.1) 0 1px 2px;
       color: #cccccc;
       overflow: hidden;
       white-space: nowrap;
       text-overflow: ellipsis; }
-    /* line 138, ../sass/items/_item.scss */
+    /* line 139, ../sass/items/_item.scss */
     .items-holder .item.grid-item .details {
       font-size: 0.8em; }
-    /* line 141, ../sass/items/_item.scss */
+    /* line 142, ../sass/items/_item.scss */
     .items-holder .item.grid-item.selected {
       background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzBhYzJmZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwYjRmMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
       background-size: 100%;
@@ -279,7 +321,7 @@
       color: #999;
       display: inline-block;
       color: #80dfff; }
-      /* line 180, ../sass/_mixins.scss */
+      /* line 153, ../sass/_mixins.scss */
       .items-holder .item.grid-item.selected:not(.disabled):hover {
         background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzJlY2JmZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzE0YzRmZiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
         background-size: 100%;
@@ -288,21 +330,66 @@
         background-image: -webkit-linear-gradient(#2ecbff, #14c4ff);
         background-image: linear-gradient(#2ecbff, #14c4ff);
         color: #bdbdbd; }
-        /* line 183, ../sass/_mixins.scss */
+        /* line 156, ../sass/_mixins.scss */
         .items-holder .item.grid-item.selected:not(.disabled):hover.btn-menu .invoke-menu {
           color: #75ddff; }
-      /* line 188, ../sass/_mixins.scss */
+      /* line 161, ../sass/_mixins.scss */
       .items-holder .item.grid-item.selected.btn-menu .invoke-menu {
         color: #52d4ff; }
-      /* line 146, ../sass/items/_item.scss */
+      /* line 147, ../sass/items/_item.scss */
       .items-holder .item.grid-item.selected .item-type, .items-holder .item.grid-item.selected .top-bar .icon:not(.alert) {
         color: #80dfff; }
-      /* line 147, ../sass/items/_item.scss */
+      /* line 148, ../sass/items/_item.scss */
       .items-holder .item.grid-item.selected .item-main .item-open {
         color: #80dfff; }
-      /* line 148, ../sass/items/_item.scss */
+      /* line 149, ../sass/items/_item.scss */
       .items-holder .item.grid-item.selected .title {
         color: white; }
-      /* line 150, ../sass/items/_item.scss */
+      /* line 151, ../sass/items/_item.scss */
       .items-holder .item.grid-item.selected:hover .item-main .item-type {
         color: white !important; }
+
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+@media screen and (max-width: 514px) {
+  /* line 24, ../sass/mobile/_item.scss */
+  .items-holder .item.grid-item {
+    width: 100%;
+    height: 50px; } }
+@media screen and (min-width: 515px) and (max-width: 800px) {
+  /* line 24, ../sass/mobile/_item.scss */
+  .items-holder .item.grid-item {
+    width: 100%;
+    height: 100px; } }
+@media screen and (min-width: 801px) {
+  /* line 24, ../sass/mobile/_item.scss */
+  .items-holder .item.grid-item {
+    width: 200px;
+    height: 200px; } }
+@media screen and (max-width: 514px) {
+  /* line 51, ../sass/mobile/_item.scss */
+  .items-holder .item.grid-item .bar .item-main {
+    display: none; } }
+@media screen and (min-width: 515px) and (max-width: 800px) {
+  /* line 51, ../sass/mobile/_item.scss */
+  .items-holder .item.grid-item .bar .item-main {
+    display: none; } }
diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index cd9028b9fa..284072886c 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -43,13 +43,34 @@
  *****************************************************************************/
 /************************** FEATURES */
 /************************** VERY INFLUENTIAL GLOBAL DIMENSIONS */
-/************************** WINDOW DIMENSIONS FOR RWD */
 /************************** COLORS AND SHADING */
 /************************** RATIOS */
 /************************** LAYOUT */
 /************************** CONTROLS */
 /************************** PATHS */
 /************************** TIMINGS */
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+/************************** WINDOW DIMENSIONS FOR RWD */
 /*****************************************************************************
  * Open MCT Web, Copyright (c) 2014-2015, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
@@ -179,6 +200,27 @@ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu,
 	}
 }
 */
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
 /*****************************************************************************
  * Open MCT Web, Copyright (c) 2014-2015, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
@@ -474,22 +516,7 @@ mct-container {
   -webkit-border-radius: 3px;
   border-radius: 3px; }
 
-@media screen and (max-width: 514px) {
-  /* line 59, ../sass/user-environ/_layout.scss */
-  .browse-manage {
-    width: 100px; } }
-@media screen and (min-width: 515px) and (max-width: 800px) {
-  /* line 59, ../sass/user-environ/_layout.scss */
-  .browse-manage {
-    width: 150px; } }
-@media screen and (min-width: 801px) {
-  /* line 59, ../sass/user-environ/_layout.scss */
-  .browse-manage {
-    min-width: 150px;
-    max-width: 800px;
-    width: 25%; } }
-
-/* line 73, ../sass/user-environ/_layout.scss */
+/* line 51, ../sass/user-environ/_layout.scss */
 .contents {
   box-sizing: border-box;
   position: absolute;
@@ -497,36 +524,36 @@ mct-container {
   right: 0;
   bottom: 0;
   left: 0; }
-  /* line 81, ../sass/user-environ/_layout.scss */
+  /* line 59, ../sass/user-environ/_layout.scss */
   .contents.nomargin {
     right: 0px;
     bottom: 0px;
     left: 0px; }
 
-/* line 90, ../sass/user-environ/_layout.scss */
+/* line 68, ../sass/user-environ/_layout.scss */
 .bar .icon.major {
   margin-right: 5px; }
-/* line 93, ../sass/user-environ/_layout.scss */
+/* line 71, ../sass/user-environ/_layout.scss */
 .bar.abs, .btn-menu span.bar.l-click-area {
   text-wrap: none;
   white-space: nowrap; }
-/* line 97, ../sass/user-environ/_layout.scss */
+/* line 75, ../sass/user-environ/_layout.scss */
 .bar.left,
 .bar .left {
   width: 45% !important;
   right: auto !important; }
-/* line 102, ../sass/user-environ/_layout.scss */
+/* line 80, ../sass/user-environ/_layout.scss */
 .bar.right,
 .bar .right {
   width: 45% !important;
   left: auto !important;
   text-align: right; }
-  /* line 107, ../sass/user-environ/_layout.scss */
+  /* line 85, ../sass/user-environ/_layout.scss */
   .bar.right .icon.major,
   .bar .right .icon.major {
     margin-left: 15px; }
 
-/* line 114, ../sass/user-environ/_layout.scss */
+/* line 92, ../sass/user-environ/_layout.scss */
 .user-environ .browse-area,
 .user-environ .edit-area,
 .user-environ .editor {
@@ -534,23 +561,23 @@ mct-container {
   right: 10px;
   bottom: 35px;
   left: 10px; }
-/* line 125, ../sass/user-environ/_layout.scss */
+/* line 103, ../sass/user-environ/_layout.scss */
 .user-environ .browse-area > .contents,
 .user-environ .edit-area > .contents {
   left: 0;
   right: 0; }
-/* line 131, ../sass/user-environ/_layout.scss */
+/* line 109, ../sass/user-environ/_layout.scss */
 .user-environ .edit-area {
   top: 45px; }
-  /* line 134, ../sass/user-environ/_layout.scss */
+  /* line 112, ../sass/user-environ/_layout.scss */
   .user-environ .edit-area .tool-bar {
     bottom: auto;
     height: 30px;
     line-height: 25px; }
-  /* line 139, ../sass/user-environ/_layout.scss */
+  /* line 117, ../sass/user-environ/_layout.scss */
   .user-environ .edit-area .work-area {
     top: 40px; }
-/* line 144, ../sass/user-environ/_layout.scss */
+/* line 122, ../sass/user-environ/_layout.scss */
 .user-environ .bottom-bar {
   overflow: hidden;
   position: absolute;
@@ -562,20 +589,20 @@ mct-container {
   height: auto;
   top: auto;
   height: 25px; }
-  /* line 149, ../sass/user-environ/_layout.scss */
+  /* line 127, ../sass/user-environ/_layout.scss */
   .user-environ .bottom-bar .status-holder {
     z-index: 1; }
-  /* line 153, ../sass/user-environ/_layout.scss */
+  /* line 131, ../sass/user-environ/_layout.scss */
   .user-environ .bottom-bar .app-logo {
     left: auto;
     width: 105px;
     z-index: 2; }
 
-/* line 161, ../sass/user-environ/_layout.scss */
+/* line 139, ../sass/user-environ/_layout.scss */
 .cols {
   overflow: hidden;
   *zoom: 1; }
-  /* line 163, ../sass/user-environ/_layout.scss */
+  /* line 141, ../sass/user-environ/_layout.scss */
   .cols .col {
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
@@ -586,103 +613,139 @@ mct-container {
     margin-left: 1.5%;
     padding-left: 5px;
     position: relative; }
-    /* line 171, ../sass/user-environ/_layout.scss */
+    /* line 149, ../sass/user-environ/_layout.scss */
     .cols .col:first-child {
       margin-left: 0;
       padding-left: 0; }
-  /* line 178, ../sass/user-environ/_layout.scss */
+  /* line 156, ../sass/user-environ/_layout.scss */
   .cols.cols-2 .col-1 {
     min-width: 250px;
     width: 48.5%; }
-  /* line 184, ../sass/user-environ/_layout.scss */
+  /* line 162, ../sass/user-environ/_layout.scss */
   .cols.cols-2-ff .col-100px {
     width: 100px; }
-  /* line 191, ../sass/user-environ/_layout.scss */
+  /* line 169, ../sass/user-environ/_layout.scss */
   .cols.cols-6 .col-1 {
     min-width: 83.33333px;
     width: 15.16667%; }
-  /* line 197, ../sass/user-environ/_layout.scss */
+  /* line 175, ../sass/user-environ/_layout.scss */
   .cols.cols-16 .col-1 {
     min-width: 31.25px;
     width: 4.75%; }
-  /* line 200, ../sass/user-environ/_layout.scss */
+  /* line 178, ../sass/user-environ/_layout.scss */
   .cols.cols-16 .col-2 {
     min-width: 62.5px;
     width: 11%; }
-  /* line 203, ../sass/user-environ/_layout.scss */
+  /* line 181, ../sass/user-environ/_layout.scss */
   .cols.cols-16 .col-7 {
     min-width: 218.75px;
     width: 42.25%; }
-  /* line 209, ../sass/user-environ/_layout.scss */
+  /* line 187, ../sass/user-environ/_layout.scss */
   .cols.cols-32 .col-2 {
     min-width: 31.25px;
     width: 4.75%; }
-  /* line 212, ../sass/user-environ/_layout.scss */
+  /* line 190, ../sass/user-environ/_layout.scss */
   .cols.cols-32 .col-15 {
     min-width: 234.375px;
     width: 45.375%; }
-  /* line 216, ../sass/user-environ/_layout.scss */
+  /* line 194, ../sass/user-environ/_layout.scss */
   .cols .l-row {
     overflow: hidden;
     *zoom: 1;
     padding: 5px 0; }
 
-/* line 222, ../sass/user-environ/_layout.scss */
+/* line 200, ../sass/user-environ/_layout.scss */
 .pane {
   position: absolute; }
-  /* line 225, ../sass/user-environ/_layout.scss */
+  /* line 203, ../sass/user-environ/_layout.scss */
   .pane.treeview .create-btn-holder {
     bottom: auto;
     top: 0;
     height: 24px; }
-    /* line 228, ../sass/user-environ/_layout.scss */
+    /* line 206, ../sass/user-environ/_layout.scss */
     .pane.treeview .create-btn-holder .wrapper.menu-element {
       position: absolute;
       bottom: 5px; }
-  /* line 233, ../sass/user-environ/_layout.scss */
+  /* line 211, ../sass/user-environ/_layout.scss */
   .pane.treeview .tree-holder {
     overflow: auto;
     top: 34px; }
-  /* line 240, ../sass/user-environ/_layout.scss */
+  /* line 218, ../sass/user-environ/_layout.scss */
   .pane.items .object-browse-bar .left.abs, .pane.items .object-browse-bar .btn-menu span.left.l-click-area, .btn-menu .pane.items .object-browse-bar span.left.l-click-area,
   .pane.items .object-browse-bar .right.abs,
   .pane.items .object-browse-bar .btn-menu span.right.l-click-area,
   .btn-menu .pane.items .object-browse-bar span.right.l-click-area {
     top: auto; }
-  /* line 245, ../sass/user-environ/_layout.scss */
+  /* line 223, ../sass/user-environ/_layout.scss */
   .pane.items .object-holder {
     top: 34px; }
-  /* line 250, ../sass/user-environ/_layout.scss */
+  /* line 228, ../sass/user-environ/_layout.scss */
   .pane.edit-main .object-holder {
     top: 0; }
-  /* line 256, ../sass/user-environ/_layout.scss */
+  /* line 234, ../sass/user-environ/_layout.scss */
   .pane .object-holder {
     overflow: auto; }
 
-/* line 264, ../sass/user-environ/_layout.scss */
+/* line 242, ../sass/user-environ/_layout.scss */
 .split-layout.horizontal > .pane {
   margin-top: 5px; }
-  /* line 267, ../sass/user-environ/_layout.scss */
+  /* line 245, ../sass/user-environ/_layout.scss */
   .split-layout.horizontal > .pane:first-child {
     margin-top: 0; }
-/* line 274, ../sass/user-environ/_layout.scss */
+/* line 252, ../sass/user-environ/_layout.scss */
 .split-layout.vertical > .pane {
   margin-left: 5px; }
-  /* line 276, ../sass/user-environ/_layout.scss */
+  /* line 254, ../sass/user-environ/_layout.scss */
   .split-layout.vertical > .pane > .holder {
     left: 0;
     right: 0; }
-  /* line 280, ../sass/user-environ/_layout.scss */
+  /* line 258, ../sass/user-environ/_layout.scss */
   .split-layout.vertical > .pane:first-child {
     margin-left: 0; }
-    /* line 282, ../sass/user-environ/_layout.scss */
+    /* line 260, ../sass/user-environ/_layout.scss */
     .split-layout.vertical > .pane:first-child .holder {
       right: 5px; }
 
-/* line 291, ../sass/user-environ/_layout.scss */
+/* line 269, ../sass/user-environ/_layout.scss */
 .vscroll {
   overflow-y: auto; }
 
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+@media screen and (max-width: 514px) {
+  /* line 31, ../sass/mobile/_layout.scss */
+  .browse-manage {
+    width: 100px; } }
+@media screen and (min-width: 515px) and (max-width: 800px) {
+  /* line 31, ../sass/mobile/_layout.scss */
+  .browse-manage {
+    width: 150px; } }
+@media screen and (min-width: 801px) {
+  /* line 31, ../sass/mobile/_layout.scss */
+  .browse-manage {
+    min-width: 150px;
+    max-width: 800px;
+    width: 25%; } }
+
 /*****************************************************************************
 * Open MCT Web, Copyright (c) 2014-2015, United States Government
 * as represented by the Administrator of the National Aeronautics and Space
@@ -1450,7 +1513,7 @@ mct-container {
     color: #999;
     display: inline-block;
     color: #ccf2ff; }
-    /* line 180, ../sass/_mixins.scss */
+    /* line 153, ../sass/_mixins.scss */
     .btn.major:not(.disabled):hover,
     .s-btn.major:not(.disabled):hover,
     .major.icon-btn:not(.disabled):hover,
@@ -1462,13 +1525,13 @@ mct-container {
       background-image: -webkit-linear-gradient(#2ecbff, #14c4ff);
       background-image: linear-gradient(#2ecbff, #14c4ff);
       color: #bdbdbd; }
-      /* line 183, ../sass/_mixins.scss */
+      /* line 156, ../sass/_mixins.scss */
       .btn.major:not(.disabled):hover.btn-menu .invoke-menu,
       .s-btn.major:not(.disabled):hover.btn-menu .invoke-menu,
       .major.icon-btn:not(.disabled):hover.btn-menu .invoke-menu,
       .major.s-icon-btn:not(.disabled):hover.btn-menu .invoke-menu {
         color: #75ddff; }
-    /* line 188, ../sass/_mixins.scss */
+    /* line 161, ../sass/_mixins.scss */
     .btn.major.btn-menu .invoke-menu,
     .s-btn.major.btn-menu .invoke-menu,
     .major.btn-menu.icon-btn .invoke-menu,
@@ -1498,7 +1561,7 @@ mct-container {
       border-top: 1px solid #2ecbff;
       color: #ccf2ff;
       display: inline-block; }
-      /* line 180, ../sass/_mixins.scss */
+      /* line 153, ../sass/_mixins.scss */
       .btn.major:hover:not(.disabled):hover,
       .s-btn.major:hover:not(.disabled):hover,
       .major.icon-btn:hover:not(.disabled):hover,
@@ -1510,13 +1573,13 @@ mct-container {
         background-image: -webkit-linear-gradient(#47d1ff, #2ecbff);
         background-image: linear-gradient(#47d1ff, #2ecbff);
         color: white; }
-        /* line 183, ../sass/_mixins.scss */
+        /* line 156, ../sass/_mixins.scss */
         .btn.major:hover:not(.disabled):hover.btn-menu .invoke-menu,
         .s-btn.major:hover:not(.disabled):hover.btn-menu .invoke-menu,
         .major.icon-btn:hover:not(.disabled):hover.btn-menu .invoke-menu,
         .major.s-icon-btn:hover:not(.disabled):hover.btn-menu .invoke-menu {
           color: #8fe3ff; }
-      /* line 188, ../sass/_mixins.scss */
+      /* line 161, ../sass/_mixins.scss */
       .btn.major:hover.btn-menu .invoke-menu,
       .s-btn.major:hover.btn-menu .invoke-menu,
       .major.icon-btn:hover.btn-menu .invoke-menu,
@@ -1552,7 +1615,7 @@ mct-container {
     border-top: 1px solid #8a8a8a;
     color: #cccccc;
     display: inline-block; }
-    /* line 180, ../sass/_mixins.scss */
+    /* line 153, ../sass/_mixins.scss */
     .btn.subtle:not(.disabled):hover,
     .s-btn.subtle:not(.disabled):hover,
     .subtle.icon-btn:not(.disabled):hover,
@@ -1564,13 +1627,13 @@ mct-container {
       background-image: -webkit-linear-gradient(#969696, #8a8a8a);
       background-image: linear-gradient(#969696, #8a8a8a);
       color: #f0f0f0; }
-      /* line 183, ../sass/_mixins.scss */
+      /* line 156, ../sass/_mixins.scss */
       .btn.subtle:not(.disabled):hover.btn-menu .invoke-menu,
       .s-btn.subtle:not(.disabled):hover.btn-menu .invoke-menu,
       .subtle.icon-btn:not(.disabled):hover.btn-menu .invoke-menu,
       .subtle.s-icon-btn:not(.disabled):hover.btn-menu .invoke-menu {
         color: #bababa; }
-    /* line 188, ../sass/_mixins.scss */
+    /* line 161, ../sass/_mixins.scss */
     .btn.subtle.btn-menu .invoke-menu,
     .s-btn.subtle.btn-menu .invoke-menu,
     .subtle.btn-menu.icon-btn .invoke-menu,
@@ -1603,7 +1666,7 @@ mct-container {
     border-top: 1px solid #575757;
     color: #999;
     display: inline-block; }
-    /* line 180, ../sass/_mixins.scss */
+    /* line 153, ../sass/_mixins.scss */
     .btn.very-subtle:not(.disabled):hover, .btn.s-very-subtle:not(.disabled):hover,
     .s-btn.very-subtle:not(.disabled):hover,
     .very-subtle.icon-btn:not(.disabled):hover,
@@ -1618,7 +1681,7 @@ mct-container {
       background-image: -webkit-linear-gradient(#636363, #575757);
       background-image: linear-gradient(#636363, #575757);
       color: #bdbdbd; }
-      /* line 183, ../sass/_mixins.scss */
+      /* line 156, ../sass/_mixins.scss */
       .btn.very-subtle:not(.disabled):hover.btn-menu .invoke-menu, .btn.s-very-subtle:not(.disabled):hover.btn-menu .invoke-menu,
       .s-btn.very-subtle:not(.disabled):hover.btn-menu .invoke-menu,
       .very-subtle.icon-btn:not(.disabled):hover.btn-menu .invoke-menu,
@@ -1627,7 +1690,7 @@ mct-container {
       .s-very-subtle.icon-btn:not(.disabled):hover.btn-menu .invoke-menu,
       .s-very-subtle.s-icon-btn:not(.disabled):hover.btn-menu .invoke-menu {
         color: #878787; }
-    /* line 188, ../sass/_mixins.scss */
+    /* line 161, ../sass/_mixins.scss */
     .btn.very-subtle.btn-menu .invoke-menu, .btn.s-very-subtle.btn-menu .invoke-menu,
     .s-btn.very-subtle.btn-menu .invoke-menu,
     .very-subtle.btn-menu.icon-btn .invoke-menu,
@@ -1663,7 +1726,7 @@ mct-container {
       border-top: 1px solid #fe9510;
       color: #fff;
       display: inline-block; }
-      /* line 180, ../sass/_mixins.scss */
+      /* line 153, ../sass/_mixins.scss */
       .btn.very-subtle.paused:not(.disabled):hover, .btn.s-very-subtle.paused:not(.disabled):hover,
       .s-btn.very-subtle.paused:not(.disabled):hover,
       .very-subtle.paused.icon-btn:not(.disabled):hover,
@@ -1678,7 +1741,7 @@ mct-container {
         background-image: -webkit-linear-gradient(#fea029, #fe9510);
         background-image: linear-gradient(#fea029, #fe9510);
         color: white; }
-        /* line 183, ../sass/_mixins.scss */
+        /* line 156, ../sass/_mixins.scss */
         .btn.very-subtle.paused:not(.disabled):hover.btn-menu .invoke-menu, .btn.s-very-subtle.paused:not(.disabled):hover.btn-menu .invoke-menu,
         .s-btn.very-subtle.paused:not(.disabled):hover.btn-menu .invoke-menu,
         .very-subtle.paused.icon-btn:not(.disabled):hover.btn-menu .invoke-menu,
@@ -1687,7 +1750,7 @@ mct-container {
         .s-very-subtle.paused.icon-btn:not(.disabled):hover.btn-menu .invoke-menu,
         .s-very-subtle.paused.s-icon-btn:not(.disabled):hover.btn-menu .invoke-menu {
           color: #fec070; }
-      /* line 188, ../sass/_mixins.scss */
+      /* line 161, ../sass/_mixins.scss */
       .btn.very-subtle.paused.btn-menu .invoke-menu, .btn.s-very-subtle.paused.btn-menu .invoke-menu,
       .s-btn.very-subtle.paused.btn-menu .invoke-menu,
       .very-subtle.paused.btn-menu.icon-btn .invoke-menu,
@@ -2149,7 +2212,7 @@ label.checkbox.custom {
   			color: lighten($c, 10%);
   		}
   	}*/ }
-  /* line 180, ../sass/_mixins.scss */
+  /* line 153, ../sass/_mixins.scss */
   .btn-menu:not(.disabled):hover {
     background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzYzNjM2MyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzU3NTc1NyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
     background-size: 100%;
@@ -2158,10 +2221,10 @@ label.checkbox.custom {
     background-image: -webkit-linear-gradient(#636363, #575757);
     background-image: linear-gradient(#636363, #575757);
     color: #bdbdbd; }
-    /* line 183, ../sass/_mixins.scss */
+    /* line 156, ../sass/_mixins.scss */
     .btn-menu:not(.disabled):hover.btn-menu .invoke-menu {
       color: #878787; }
-  /* line 188, ../sass/_mixins.scss */
+  /* line 161, ../sass/_mixins.scss */
   .btn-menu.btn-menu .invoke-menu {
     color: #757575; }
   /* line 285, ../sass/controls/_controls.scss */
@@ -2293,7 +2356,7 @@ label.checkbox.custom {
   auto: 0;
   bottom: auto;
   left: auto; }
-  /* line 180, ../sass/_mixins.scss */
+  /* line 153, ../sass/_mixins.scss */
   .slider .knob:not(.disabled):hover {
     background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzYzNjM2MyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzU3NTc1NyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
     background-size: 100%;
@@ -2302,13 +2365,13 @@ label.checkbox.custom {
     background-image: -webkit-linear-gradient(#636363, #575757);
     background-image: linear-gradient(#636363, #575757);
     color: #bdbdbd; }
-    /* line 183, ../sass/_mixins.scss */
+    /* line 156, ../sass/_mixins.scss */
     .slider .knob:not(.disabled):hover.btn-menu .invoke-menu {
       color: #878787; }
-  /* line 188, ../sass/_mixins.scss */
+  /* line 161, ../sass/_mixins.scss */
   .slider .knob.btn-menu .invoke-menu {
     color: #757575; }
-  /* line 204, ../sass/_mixins.scss */
+  /* line 177, ../sass/_mixins.scss */
   .slider .knob:before {
     -moz-transition-property: "border-color";
     -o-transition-property: "border-color";
@@ -2332,7 +2395,7 @@ label.checkbox.custom {
     left: 2px;
     bottom: 5px;
     top: 5px; }
-  /* line 226, ../sass/_mixins.scss */
+  /* line 199, ../sass/_mixins.scss */
   .slider .knob:not(.disabled):hover:before {
     -moz-transition-property: "border-color";
     -o-transition-property: "border-color";
@@ -2504,14 +2567,14 @@ label.checkbox.custom {
     padding: 3px 0;
     position: absolute;
     z-index: 10; }
-    /* line 188, ../sass/_mixins.scss */
+    /* line 161, ../sass/_mixins.scss */
     .menu-element .menu.btn-menu .invoke-menu {
       color: #828282; }
     /* line 37, ../sass/controls/_menus.scss */
     .menu-element .menu ul {
       margin: 0;
       padding: 0; }
-      /* line 294, ../sass/_mixins.scss */
+      /* line 267, ../sass/_mixins.scss */
       .menu-element .menu ul li {
         list-style-type: none;
         margin: 0;
@@ -2567,7 +2630,7 @@ label.checkbox.custom {
     border-top: 1px solid #919191;
     color: #999;
     display: inline-block; }
-    /* line 188, ../sass/_mixins.scss */
+    /* line 161, ../sass/_mixins.scss */
     .menu-element .context-menu.btn-menu .invoke-menu,
     .menu-element .super-menu.btn-menu .invoke-menu {
       color: #b0b0b0; }
@@ -3430,7 +3493,7 @@ input[type="text"] {
   margin: 0 0 2px 2px;
   overflow: hidden;
   position: relative; }
-  /* line 180, ../sass/_mixins.scss */
+  /* line 153, ../sass/_mixins.scss */
   .form-control.select:not(.disabled):hover {
     background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzYzNjM2MyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzU3NTc1NyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
     background-size: 100%;
@@ -3439,10 +3502,10 @@ input[type="text"] {
     background-image: -webkit-linear-gradient(#636363, #575757);
     background-image: linear-gradient(#636363, #575757);
     color: #bdbdbd; }
-    /* line 183, ../sass/_mixins.scss */
+    /* line 156, ../sass/_mixins.scss */
     .form-control.select:not(.disabled):hover.btn-menu .invoke-menu {
       color: #878787; }
-  /* line 188, ../sass/_mixins.scss */
+  /* line 161, ../sass/_mixins.scss */
   .form-control.select.btn-menu .invoke-menu {
     color: #757575; }
   /* line 29, ../sass/forms/_selects.scss */
@@ -4060,7 +4123,7 @@ input[type="text"] {
   bottom: 15%;
   left: 15%;
   z-index: 101; }
-  /* line 188, ../sass/_mixins.scss */
+  /* line 161, ../sass/_mixins.scss */
   .overlay > .holder.btn-menu .invoke-menu {
     color: #757575; }
   /* line 45, ../sass/overlay/_overlay.scss */
@@ -4568,7 +4631,7 @@ input[type="text"] {
     right: 0;
     width: auto;
     height: 5px; }
-    /* line 204, ../sass/_mixins.scss */
+    /* line 177, ../sass/_mixins.scss */
     .split-layout.horizontal > .splitter:before {
       -moz-transition-property: "border-color";
       -o-transition-property: "border-color";
@@ -4592,7 +4655,7 @@ input[type="text"] {
       top: 2px;
       left: 5px;
       right: 5px; }
-    /* line 226, ../sass/_mixins.scss */
+    /* line 199, ../sass/_mixins.scss */
     .split-layout.horizontal > .splitter:not(.disabled):hover:before {
       -moz-transition-property: "border-color";
       -o-transition-property: "border-color";
@@ -4622,7 +4685,7 @@ input[type="text"] {
   bottom: 0;
   cursor: col-resize;
   width: 5px; }
-  /* line 204, ../sass/_mixins.scss */
+  /* line 177, ../sass/_mixins.scss */
   .split-layout.vertical > .splitter:before {
     -moz-transition-property: "border-color";
     -o-transition-property: "border-color";
@@ -4646,7 +4709,7 @@ input[type="text"] {
     left: 2px;
     bottom: 5px;
     top: 5px; }
-  /* line 226, ../sass/_mixins.scss */
+  /* line 199, ../sass/_mixins.scss */
   .split-layout.vertical > .splitter:not(.disabled):hover:before {
     -moz-transition-property: "border-color";
     -o-transition-property: "border-color";
diff --git a/platform/commonUI/general/res/css/tree.css b/platform/commonUI/general/res/css/tree.css
index 9c7fd6d0ef..b70dafaf91 100644
--- a/platform/commonUI/general/res/css/tree.css
+++ b/platform/commonUI/general/res/css/tree.css
@@ -42,7 +42,6 @@
  *****************************************************************************/
 /************************** FEATURES */
 /************************** VERY INFLUENTIAL GLOBAL DIMENSIONS */
-/************************** WINDOW DIMENSIONS FOR RWD */
 /************************** COLORS AND SHADING */
 /************************** RATIOS */
 /************************** LAYOUT */
@@ -104,7 +103,7 @@
 ul.tree {
   margin: 0;
   padding: 0; }
-  /* line 294, ../sass/_mixins.scss */
+  /* line 267, ../sass/_mixins.scss */
   ul.tree li {
     list-style-type: none;
     margin: 0;
diff --git a/platform/commonUI/general/res/sass/_constants.scss b/platform/commonUI/general/res/sass/_constants.scss
index 984d2e8dac..b373982a37 100644
--- a/platform/commonUI/general/res/sass/_constants.scss
+++ b/platform/commonUI/general/res/sass/_constants.scss
@@ -33,13 +33,6 @@ $controlCr: 2px;
 $smallCr: 2px;
 $badgeW: 35px;
 
-/************************** WINDOW DIMENSIONS FOR RWD */
-$phoMaxW: 514px;
-$tabMinW: 515px;
-$tabMaxW: 800px;
-$compMinW: 801px; 
-$compMinH: 1281px;
-
 /************************** COLORS AND SHADING */
 $colorBodyBg: #333;
 $colorBodyFg: #999;
diff --git a/platform/commonUI/general/res/sass/_main.scss b/platform/commonUI/general/res/sass/_main.scss
index 07fec4ed79..5604ba3cb6 100644
--- a/platform/commonUI/general/res/sass/_main.scss
+++ b/platform/commonUI/general/res/sass/_main.scss
@@ -27,10 +27,14 @@
 @import "compass/utilities";
 
 @import "mixins";
+@import "mobile/mixins";
+
 @import "effects";
 @import "global";
 @import "fonts";
 @import "user-environ/layout";
+@import "mobile/layout";
+
 @import "fixed-position";
 @import "about";
 @import "text";
diff --git a/platform/commonUI/general/res/sass/_mixins.scss b/platform/commonUI/general/res/sass/_mixins.scss
index 2ae67b18fd..77e7a42d6c 100644
--- a/platform/commonUI/general/res/sass/_mixins.scss
+++ b/platform/commonUI/general/res/sass/_mixins.scss
@@ -20,33 +20,6 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-// Mixins for devices
-@mixin phone {
-    @media screen and (max-width: $phoMaxW) {
-        @content
-    }
-}
-
-@mixin tablet {
-    @media screen and (min-width: $tabMinW) and (max-width: $tabMaxW) {
-        @content
-    }
-}
-
-@mixin phoneandtablet {
-    @media screen and (max-width: $tabMaxW) {
-        @content
-    }
-}
-
-@mixin desktop {
-    @media screen and (min-width: $compMinW) {
-        @content
-    }
-}
-
-
-
 @mixin absPosDefault($offset: 0px, $overflowHidden: hidden) {
     overflow: $overflowHidden;
     position: absolute;
diff --git a/platform/commonUI/general/res/sass/items.scss b/platform/commonUI/general/res/sass/items.scss
index 376497c2cf..0feb54cbae 100644
--- a/platform/commonUI/general/res/sass/items.scss
+++ b/platform/commonUI/general/res/sass/items.scss
@@ -26,5 +26,8 @@
 @import "compass/utilities";
 
 @import "constants";
+@import "mobile/constants";
 @import "mixins";
-@import "items/item";
\ No newline at end of file
+@import "mobile/mixins";
+@import "items/item";
+@import "mobile/item";
\ No newline at end of file
diff --git a/platform/commonUI/general/res/sass/items/_item.scss b/platform/commonUI/general/res/sass/items/_item.scss
index 88e75bf940..c1eb2d023f 100644
--- a/platform/commonUI/general/res/sass/items/_item.scss
+++ b/platform/commonUI/general/res/sass/items/_item.scss
@@ -96,6 +96,7 @@
 	                padding: $interiorMargin;
                 }
             }
+//            NOTE: make icon disappear
             .item-main {
                 @include phone {
                     display: none;
diff --git a/platform/commonUI/general/res/sass/mobile/_constants.scss b/platform/commonUI/general/res/sass/mobile/_constants.scss
new file mode 100644
index 0000000000..042a45ecc3
--- /dev/null
+++ b/platform/commonUI/general/res/sass/mobile/_constants.scss
@@ -0,0 +1,28 @@
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+/************************** WINDOW DIMENSIONS FOR RWD */
+$phoMaxW: 514px;
+$tabMinW: 515px;
+$tabMaxW: 800px;
+$compMinW: 801px; 
+$compMinH: 1281px;
\ No newline at end of file
diff --git a/platform/commonUI/general/res/sass/mobile/_item.scss b/platform/commonUI/general/res/sass/mobile/_item.scss
new file mode 100644
index 0000000000..31550c554b
--- /dev/null
+++ b/platform/commonUI/general/res/sass/mobile/_item.scss
@@ -0,0 +1,62 @@
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+.items-holder {
+    .item {
+        &.grid-item {
+            // NOTE: Sets grid item width
+            $dWid: $ueBrowseGridItemLg;
+            $dHei: $ueBrowseGridItemLg;
+            @include phone {
+                $dWid: 100%;
+                $dHei: $ueBrowseGridItemLg/4;
+                width: $dWid;
+                height: $dHei;
+            }
+            
+            @include tablet {
+                $dWid: 100%;
+                $dHei: $ueBrowseGridItemLg/2;
+                width: $dWid;
+                height: $dHei;
+            }
+            
+            @include desktop {
+                $dWid: $ueBrowseGridItemLg;
+                $dHei: $ueBrowseGridItemLg;
+                width: $dWid;
+                height: $dHei; 
+            }
+            
+            .bar {
+//            NOTE: make icon disappear
+            .item-main {
+                @include phone {
+                    display: none;
+                }
+                @include tablet {
+                    display: none;   
+                }
+                }
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/platform/commonUI/general/res/sass/mobile/_layout.scss b/platform/commonUI/general/res/sass/mobile/_layout.scss
new file mode 100644
index 0000000000..7533561b83
--- /dev/null
+++ b/platform/commonUI/general/res/sass/mobile/_layout.scss
@@ -0,0 +1,43 @@
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+// style="min-width: 150px; max-width: 800px; width: 25%;"
+// NOTE: Added to adjust the browse folder tree list view
+//.hider-check {
+//    @include phoneandtablet {
+//        
+//    } 
+//}
+
+.browse-manage {
+    @include phone {
+        width: 100px;
+    }
+    @include tablet {
+        width: 150px;
+    }    
+    @include desktop {
+        min-width: 150px;
+        max-width: 800px;
+        width: 25%;   
+    }   
+}
diff --git a/platform/commonUI/general/res/sass/mobile/_mixins.scss b/platform/commonUI/general/res/sass/mobile/_mixins.scss
new file mode 100644
index 0000000000..0223ef54f2
--- /dev/null
+++ b/platform/commonUI/general/res/sass/mobile/_mixins.scss
@@ -0,0 +1,46 @@
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+// NOTE: Mixins for devices
+@mixin phone {
+    @media screen and (max-width: $phoMaxW) {
+        @content
+    }
+}
+
+@mixin tablet {
+    @media screen and (min-width: $tabMinW) and (max-width: $tabMaxW) {
+        @content
+    }
+}
+
+@mixin phoneandtablet {
+    @media screen and (max-width: $tabMaxW) {
+        @content
+    }
+}
+
+@mixin desktop {
+    @media screen and (min-width: $compMinW) {
+        @content
+    }
+}
\ No newline at end of file
diff --git a/platform/commonUI/general/res/sass/theme-espresso.scss b/platform/commonUI/general/res/sass/theme-espresso.scss
index 711f43881a..68961d8140 100644
--- a/platform/commonUI/general/res/sass/theme-espresso.scss
+++ b/platform/commonUI/general/res/sass/theme-espresso.scss
@@ -20,5 +20,6 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 @import "constants";
+@import "mobile/constants";
 @import "themes/theme-espresso";
 @import "main";
\ No newline at end of file
diff --git a/platform/commonUI/general/res/sass/user-environ/_layout.scss b/platform/commonUI/general/res/sass/user-environ/_layout.scss
index 08b5d80726..7b63575d85 100644
--- a/platform/commonUI/general/res/sass/user-environ/_layout.scss
+++ b/platform/commonUI/general/res/sass/user-environ/_layout.scss
@@ -48,28 +48,6 @@
 	@include border-radius($basicCr * 1.5);
 }
 
-// style="min-width: 150px; max-width: 800px; width: 25%;"
-// NOTE: Added to adjust the browse folder tree list view
-//.hider-check {
-//    @include phoneandtablet {
-//        
-//    } 
-//}
-
-.browse-manage {
-    @include phone {
-        width: 100px;
-    }
-    @include tablet {
-        width: 150px;
-    }    
-    @include desktop {
-        min-width: 150px;
-        max-width: 800px;
-        width: 25%;   
-    }   
-}
-
 .contents {
     $myM: 0; //$interiorMargin;
     box-sizing: border-box;

From 5c5648488993f3f6cc956bf78c0544ec8d6cfab1 Mon Sep 17 00:00:00 2001
From: Dave <shivamndave>
Date: Wed, 8 Jul 2015 12:14:40 -0700
Subject: [PATCH 011/209] [Mobile] Main scss added

Added the mobile files as imports
to the main scss files that
generate as css files.
---
 platform/commonUI/general/res/sass/forms.scss | 2 ++
 platform/commonUI/general/res/sass/tree.scss  | 2 ++
 2 files changed, 4 insertions(+)

diff --git a/platform/commonUI/general/res/sass/forms.scss b/platform/commonUI/general/res/sass/forms.scss
index 56573c72ae..6929093c04 100644
--- a/platform/commonUI/general/res/sass/forms.scss
+++ b/platform/commonUI/general/res/sass/forms.scss
@@ -26,8 +26,10 @@
 @import "compass/utilities";
 
 @import "constants";
+@import "mobile/constants";
 @import "mixins";
 @import "forms/mixins";
+@import "mobile/mixins";
 @import "forms/elems";
 @import "forms/textarea";
 @import "forms/text-input";
diff --git a/platform/commonUI/general/res/sass/tree.scss b/platform/commonUI/general/res/sass/tree.scss
index b8b2d09124..5cb5d6fe1f 100644
--- a/platform/commonUI/general/res/sass/tree.scss
+++ b/platform/commonUI/general/res/sass/tree.scss
@@ -26,5 +26,7 @@
 @import "compass/utilities";
 
 @import "constants";
+@import "mobile/constants";
 @import "mixins";
+@import "mobile/mixins";
 @import "tree/tree";
\ No newline at end of file

From 342be0822f7cf4308d0a42689bd195f3f060b40e Mon Sep 17 00:00:00 2001
From: Dave <shivamndave>
Date: Wed, 8 Jul 2015 12:17:19 -0700
Subject: [PATCH 012/209] [Mobile] Gen css

---
 platform/commonUI/general/res/css/forms.css   | 43 +++++++++++++++++++
 platform/commonUI/general/res/css/tree.css    | 43 +++++++++++++++++++
 .../general/res/sass/mobile/_constants.scss   |  2 +-
 .../general/res/sass/mobile/_item.scss        |  2 +-
 .../general/res/sass/mobile/_mixins.scss      |  2 +-
 5 files changed, 89 insertions(+), 3 deletions(-)

diff --git a/platform/commonUI/general/res/css/forms.css b/platform/commonUI/general/res/css/forms.css
index 4400441d9c..7644418de2 100644
--- a/platform/commonUI/general/res/css/forms.css
+++ b/platform/commonUI/general/res/css/forms.css
@@ -48,6 +48,28 @@
 /************************** CONTROLS */
 /************************** PATHS */
 /************************** TIMINGS */
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+/************************** WINDOW DIMENSIONS FOR RWD */
 /*****************************************************************************
  * Open MCT Web, Copyright (c) 2014-2015, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
@@ -120,6 +142,27 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
 /* line 24, ../sass/forms/_elems.scss */
 .form .section-header {
   -moz-border-radius: 3px;
diff --git a/platform/commonUI/general/res/css/tree.css b/platform/commonUI/general/res/css/tree.css
index b70dafaf91..f0aa033ccd 100644
--- a/platform/commonUI/general/res/css/tree.css
+++ b/platform/commonUI/general/res/css/tree.css
@@ -48,6 +48,28 @@
 /************************** CONTROLS */
 /************************** PATHS */
 /************************** TIMINGS */
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+/************************** WINDOW DIMENSIONS FOR RWD */
 /*****************************************************************************
  * Open MCT Web, Copyright (c) 2014-2015, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
@@ -78,6 +100,27 @@
 	}
 }
 */
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
 /*****************************************************************************
  * Open MCT Web, Copyright (c) 2014-2015, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
diff --git a/platform/commonUI/general/res/sass/mobile/_constants.scss b/platform/commonUI/general/res/sass/mobile/_constants.scss
index 042a45ecc3..d05edc709e 100644
--- a/platform/commonUI/general/res/sass/mobile/_constants.scss
+++ b/platform/commonUI/general/res/sass/mobile/_constants.scss
@@ -25,4 +25,4 @@ $phoMaxW: 514px;
 $tabMinW: 515px;
 $tabMaxW: 800px;
 $compMinW: 801px; 
-$compMinH: 1281px;
\ No newline at end of file
+$compMinH: 1281px;
diff --git a/platform/commonUI/general/res/sass/mobile/_item.scss b/platform/commonUI/general/res/sass/mobile/_item.scss
index 31550c554b..83602b97c1 100644
--- a/platform/commonUI/general/res/sass/mobile/_item.scss
+++ b/platform/commonUI/general/res/sass/mobile/_item.scss
@@ -22,7 +22,7 @@
 .items-holder {
     .item {
         &.grid-item {
-            // NOTE: Sets grid item width
+//            NOTE: Sets grid item width
             $dWid: $ueBrowseGridItemLg;
             $dHei: $ueBrowseGridItemLg;
             @include phone {
diff --git a/platform/commonUI/general/res/sass/mobile/_mixins.scss b/platform/commonUI/general/res/sass/mobile/_mixins.scss
index 0223ef54f2..97de07f14a 100644
--- a/platform/commonUI/general/res/sass/mobile/_mixins.scss
+++ b/platform/commonUI/general/res/sass/mobile/_mixins.scss
@@ -43,4 +43,4 @@
     @media screen and (min-width: $compMinW) {
         @content
     }
-}
\ No newline at end of file
+}

From 07ef4dfe8adf1ff48d0aa8ff31cb13f859c1e508 Mon Sep 17 00:00:00 2001
From: Dave <shivamndave>
Date: Wed, 8 Jul 2015 14:27:59 -0700
Subject: [PATCH 013/209] [Mobile] Menu Slide

Menu slides, but not transition
css slides out on click. Currently
uses document, which needs to be
replaced with angular version using
 and/or  and/or
ng-class and/or ng-click.
---
 .../commonUI/browse/res/templates/browse.html |  4 +-
 .../res/templates/browse/object-header.html   |  5 +-
 .../res/templates/create/create-button.html   |  3 --
 platform/commonUI/general/bundle.json         |  5 ++
 .../general/res/css/theme-espresso.css        | 16 +++++--
 .../general/res/sass/mobile/_layout.scss      | 17 +++++--
 .../src/controllers/ClickAwayController.js    |  7 ---
 .../src/controllers/TreeMenuController.js     | 48 +++++++++++++++++++
 8 files changed, 84 insertions(+), 21 deletions(-)
 create mode 100644 platform/commonUI/general/src/controllers/TreeMenuController.js

diff --git a/platform/commonUI/browse/res/templates/browse.html b/platform/commonUI/browse/res/templates/browse.html
index c955d596eb..a8f25caa7d 100644
--- a/platform/commonUI/browse/res/templates/browse.html
+++ b/platform/commonUI/browse/res/templates/browse.html
@@ -19,11 +19,11 @@
  this source code distribution or the Licensing information page available
  at runtime from the About dialog for additional information.
 -->
-<div content="jquery-wrapper" class="abs holder-all browse-mode">
+<div id="myElement" content="jquery-wrapper" class="abs holder-all browse-mode holder-hide">
     <mct-include key="'topbar-browse'"></mct-include>
     <div class="holder browse-area s-browse-area abs" ng-controller="BrowseController">
         <mct-split-pane class='contents abs' anchor='left'>
-            <div class='split-pane-component treeview pane browse-manage'>
+            <div class='split-pane-component treeview pane browse-manage createtreebtns'>
                 <mct-representation key="'create-button'" mct-object="navigatedObject">
                 </mct-representation>
                 <div class='holder tree-holder abs'>
diff --git a/platform/commonUI/browse/res/templates/browse/object-header.html b/platform/commonUI/browse/res/templates/browse/object-header.html
index eb13bb3764..91f6df04d2 100644
--- a/platform/commonUI/browse/res/templates/browse/object-header.html
+++ b/platform/commonUI/browse/res/templates/browse/object-header.html
@@ -19,7 +19,10 @@
  this source code distribution or the Licensing information page available
  at runtime from the About dialog for additional information.
 -->
-<div class='object-header'>
+<div class='object-header' ng-controller="TreeMenuController as treeController">
+    <div class="btn s-btn s-icon-btn s-very-subtle key-properties" ng-click="treeController.toggle()">
+    T
+    </div>
 	<span class="label s-label">
 	    <span class='type-icon icon ui-symbol'>{{type.getGlyph()}}</span>
 	    <span ng-if="parameters.mode" class='action'>{{parameters.mode}}</span>
diff --git a/platform/commonUI/browse/res/templates/create/create-button.html b/platform/commonUI/browse/res/templates/create/create-button.html
index 6f1efc9604..527afd9882 100644
--- a/platform/commonUI/browse/res/templates/create/create-button.html
+++ b/platform/commonUI/browse/res/templates/create/create-button.html
@@ -27,7 +27,4 @@
         <mct-representation mct-object="domainObject" key="'create-menu'">
         </mct-representation>
     </div>
-    <div class="btn s-btn s-icon-btn s-very-subtle key-properties" ng-click="createController.showtree()">
-    T
-    </div>
 </div>
\ No newline at end of file
diff --git a/platform/commonUI/general/bundle.json b/platform/commonUI/general/bundle.json
index 2dd8d5dc4c..428a1f667d 100644
--- a/platform/commonUI/general/bundle.json
+++ b/platform/commonUI/general/bundle.json
@@ -85,6 +85,11 @@
                 "implementation": "controllers/ClickAwayController.js",
                 "depends": [ "$scope", "$document" ]
             },
+            {
+                "key": "TreeMenuController",
+                "implementation": "controllers/TreeMenuController.js",
+                "depends": [ "$element", "$document" ]
+            },            
             {
                 "key": "ViewSwitcherController",
                 "implementation": "controllers/ViewSwitcherController.js",
diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index 284072886c..0e9d54dbe9 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -731,16 +731,26 @@ mct-container {
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
+@media screen and (max-width: 800px) {
+  /* line 26, ../sass/mobile/_layout.scss */
+  .holder-hide {
+    left: -150px; } }
+
+@media screen and (max-width: 800px) {
+  /* line 32, ../sass/mobile/_layout.scss */
+  .holder-show {
+    left: -150px; } }
+
 @media screen and (max-width: 514px) {
-  /* line 31, ../sass/mobile/_layout.scss */
+  /* line 38, ../sass/mobile/_layout.scss */
   .browse-manage {
     width: 100px; } }
 @media screen and (min-width: 515px) and (max-width: 800px) {
-  /* line 31, ../sass/mobile/_layout.scss */
+  /* line 38, ../sass/mobile/_layout.scss */
   .browse-manage {
     width: 150px; } }
 @media screen and (min-width: 801px) {
-  /* line 31, ../sass/mobile/_layout.scss */
+  /* line 38, ../sass/mobile/_layout.scss */
   .browse-manage {
     min-width: 150px;
     max-width: 800px;
diff --git a/platform/commonUI/general/res/sass/mobile/_layout.scss b/platform/commonUI/general/res/sass/mobile/_layout.scss
index 7533561b83..d8ab1b3d02 100644
--- a/platform/commonUI/general/res/sass/mobile/_layout.scss
+++ b/platform/commonUI/general/res/sass/mobile/_layout.scss
@@ -22,11 +22,18 @@
 
 // style="min-width: 150px; max-width: 800px; width: 25%;"
 // NOTE: Added to adjust the browse folder tree list view
-//.hider-check {
-//    @include phoneandtablet {
-//        
-//    } 
-//}
+
+.holder-hide {
+    @include phoneandtablet {
+        left: -150px;
+    }
+}
+
+.holder-show {
+    @include phoneandtablet {
+        left: 0px;
+    } 
+}
 
 .browse-manage {
     @include phone {
diff --git a/platform/commonUI/general/src/controllers/ClickAwayController.js b/platform/commonUI/general/src/controllers/ClickAwayController.js
index 2b75ffba41..88965ca497 100644
--- a/platform/commonUI/general/src/controllers/ClickAwayController.js
+++ b/platform/commonUI/general/src/controllers/ClickAwayController.js
@@ -58,9 +58,6 @@ define(
                     activate();
                 }
             }
-            function changeTree() {
-                console.log("WWWWW");
-            }
             
             
 
@@ -96,10 +93,6 @@ define(
                  */
                 toggle: function () {
                     changeState();
-                },
-                
-                showtree: function () {
-                    changeTree();
                 }
             };
 
diff --git a/platform/commonUI/general/src/controllers/TreeMenuController.js b/platform/commonUI/general/src/controllers/TreeMenuController.js
new file mode 100644
index 0000000000..5d951bb4ad
--- /dev/null
+++ b/platform/commonUI/general/src/controllers/TreeMenuController.js
@@ -0,0 +1,48 @@
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+/*global define,Promise*/
+
+define(
+    [],
+    function () {
+        "use strict";
+
+        function TreeMenuController($scope, $document) {
+            return {
+                toggle: function () {
+                    if (document.getElementById("myElement").
+                            className.match(/(?:^|\s)holder-hide(?!\S)/)) {
+                        document.getElementById("myElement").className =
+                            document.getElementById("myElement")
+                            .className.replace(/(?:^|\s)holder-hide(?!\S)/g, '');
+                    } else {
+                        document.getElementById("myElement").className += " holder-hide";
+                    }
+                    
+                }
+            };
+
+        }
+
+        return TreeMenuController;
+    }
+);
\ No newline at end of file

From cdcaedc8dd36fc09ff583d0295d5e1e4eccec142 Mon Sep 17 00:00:00 2001
From: Dave <shivamndave>
Date: Wed, 8 Jul 2015 15:57:08 -0700
Subject: [PATCH 014/209] [Mobile] Added transistions

Transistions added, however still using
document.getElementById.
---
 .../general/res/css/theme-espresso.css         | 18 +++++++++++++-----
 .../general/res/sass/mobile/_layout.scss       |  2 ++
 .../src/controllers/TreeMenuController.js      |  4 ++++
 3 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index 0e9d54dbe9..a2258128ca 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -734,23 +734,31 @@ mct-container {
 @media screen and (max-width: 800px) {
   /* line 26, ../sass/mobile/_layout.scss */
   .holder-hide {
+    -moz-transition-duration: 0.2s;
+    -o-transition-duration: 0.2s;
+    -webkit-transition-duration: 0.2s;
+    transition-duration: 0.2s;
     left: -150px; } }
 
 @media screen and (max-width: 800px) {
-  /* line 32, ../sass/mobile/_layout.scss */
+  /* line 33, ../sass/mobile/_layout.scss */
   .holder-show {
-    left: -150px; } }
+    -moz-transition-duration: 0.2s;
+    -o-transition-duration: 0.2s;
+    -webkit-transition-duration: 0.2s;
+    transition-duration: 0.2s;
+    left: 0px; } }
 
 @media screen and (max-width: 514px) {
-  /* line 38, ../sass/mobile/_layout.scss */
+  /* line 40, ../sass/mobile/_layout.scss */
   .browse-manage {
     width: 100px; } }
 @media screen and (min-width: 515px) and (max-width: 800px) {
-  /* line 38, ../sass/mobile/_layout.scss */
+  /* line 40, ../sass/mobile/_layout.scss */
   .browse-manage {
     width: 150px; } }
 @media screen and (min-width: 801px) {
-  /* line 38, ../sass/mobile/_layout.scss */
+  /* line 40, ../sass/mobile/_layout.scss */
   .browse-manage {
     min-width: 150px;
     max-width: 800px;
diff --git a/platform/commonUI/general/res/sass/mobile/_layout.scss b/platform/commonUI/general/res/sass/mobile/_layout.scss
index d8ab1b3d02..797018c7e0 100644
--- a/platform/commonUI/general/res/sass/mobile/_layout.scss
+++ b/platform/commonUI/general/res/sass/mobile/_layout.scss
@@ -25,12 +25,14 @@
 
 .holder-hide {
     @include phoneandtablet {
+        @include transition-duration(.2s);
         left: -150px;
     }
 }
 
 .holder-show {
     @include phoneandtablet {
+        @include transition-duration(.2s);
         left: 0px;
     } 
 }
diff --git a/platform/commonUI/general/src/controllers/TreeMenuController.js b/platform/commonUI/general/src/controllers/TreeMenuController.js
index 5d951bb4ad..13ec491657 100644
--- a/platform/commonUI/general/src/controllers/TreeMenuController.js
+++ b/platform/commonUI/general/src/controllers/TreeMenuController.js
@@ -34,7 +34,11 @@ define(
                         document.getElementById("myElement").className =
                             document.getElementById("myElement")
                             .className.replace(/(?:^|\s)holder-hide(?!\S)/g, '');
+                        document.getElementById("myElement").className += " holder-show";
                     } else {
+                        document.getElementById("myElement").className =
+                            document.getElementById("myElement")
+                            .className.replace(/(?:^|\s)holder-show(?!\S)/g, '');
                         document.getElementById("myElement").className += " holder-hide";
                     }
                     

From 7974f33781c166a1b14a91b9581b55685c8545e2 Mon Sep 17 00:00:00 2001
From: Dave <shivamndave>
Date: Wed, 8 Jul 2015 16:28:40 -0700
Subject: [PATCH 015/209] [Mobile] Phone

Adjusted to differentiate
phones and tablets.
---
 .../general/res/css/theme-espresso.css         | 18 +++++++++++++-----
 .../general/res/sass/mobile/_layout.scss       |  8 ++++++--
 2 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index a2258128ca..a8942f1d28 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -731,7 +731,15 @@ mct-container {
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-@media screen and (max-width: 800px) {
+@media screen and (max-width: 514px) {
+  /* line 26, ../sass/mobile/_layout.scss */
+  .holder-hide {
+    -moz-transition-duration: 0.2s;
+    -o-transition-duration: 0.2s;
+    -webkit-transition-duration: 0.2s;
+    transition-duration: 0.2s;
+    left: -108px; } }
+@media screen and (min-width: 515px) and (max-width: 800px) {
   /* line 26, ../sass/mobile/_layout.scss */
   .holder-hide {
     -moz-transition-duration: 0.2s;
@@ -741,7 +749,7 @@ mct-container {
     left: -150px; } }
 
 @media screen and (max-width: 800px) {
-  /* line 33, ../sass/mobile/_layout.scss */
+  /* line 37, ../sass/mobile/_layout.scss */
   .holder-show {
     -moz-transition-duration: 0.2s;
     -o-transition-duration: 0.2s;
@@ -750,15 +758,15 @@ mct-container {
     left: 0px; } }
 
 @media screen and (max-width: 514px) {
-  /* line 40, ../sass/mobile/_layout.scss */
+  /* line 44, ../sass/mobile/_layout.scss */
   .browse-manage {
     width: 100px; } }
 @media screen and (min-width: 515px) and (max-width: 800px) {
-  /* line 40, ../sass/mobile/_layout.scss */
+  /* line 44, ../sass/mobile/_layout.scss */
   .browse-manage {
     width: 150px; } }
 @media screen and (min-width: 801px) {
-  /* line 40, ../sass/mobile/_layout.scss */
+  /* line 44, ../sass/mobile/_layout.scss */
   .browse-manage {
     min-width: 150px;
     max-width: 800px;
diff --git a/platform/commonUI/general/res/sass/mobile/_layout.scss b/platform/commonUI/general/res/sass/mobile/_layout.scss
index 797018c7e0..b7bb8e8297 100644
--- a/platform/commonUI/general/res/sass/mobile/_layout.scss
+++ b/platform/commonUI/general/res/sass/mobile/_layout.scss
@@ -24,10 +24,14 @@
 // NOTE: Added to adjust the browse folder tree list view
 
 .holder-hide {
-    @include phoneandtablet {
+    @include phone {
+        @include transition-duration(.2s);
+        left: -108px;
+    }
+    @include tablet {
         @include transition-duration(.2s);
         left: -150px;
-    }
+    }     
 }
 
 .holder-show {

From b9371ea03dfa7f0826af5ef9a9f16025de8f81dc Mon Sep 17 00:00:00 2001
From: Dave <shivamndave>
Date: Thu, 9 Jul 2015 10:28:45 -0700
Subject: [PATCH 016/209] [Mobile] Moved Button

Button moved to the Browse.html
and BrowseController handles the
tree slide.
---
 .../commonUI/browse/res/templates/browse.html |  2 +
 .../res/templates/browse/object-header.html   |  5 +--
 .../commonUI/browse/src/BrowseController.js   | 16 ++++++++
 .../general/res/css/theme-espresso.css        | 40 +++++++++++++++++--
 .../general/res/sass/mobile/_layout.scss      | 29 +++++++++++++-
 5 files changed, 82 insertions(+), 10 deletions(-)

diff --git a/platform/commonUI/browse/res/templates/browse.html b/platform/commonUI/browse/res/templates/browse.html
index a8f25caa7d..081785c491 100644
--- a/platform/commonUI/browse/res/templates/browse.html
+++ b/platform/commonUI/browse/res/templates/browse.html
@@ -41,6 +41,8 @@
                 </div>
             </div>
         </mct-split-pane>
+        <div class="btn s-btn s-icon-btn s-very-subtle key-properties button-hide" 
+                        ng-click="treeSlide()">T</div>        
     </div>
     <mct-include key="'bottombar'"></mct-include>
 </div>
diff --git a/platform/commonUI/browse/res/templates/browse/object-header.html b/platform/commonUI/browse/res/templates/browse/object-header.html
index 91f6df04d2..583940aaab 100644
--- a/platform/commonUI/browse/res/templates/browse/object-header.html
+++ b/platform/commonUI/browse/res/templates/browse/object-header.html
@@ -19,10 +19,7 @@
  this source code distribution or the Licensing information page available
  at runtime from the About dialog for additional information.
 -->
-<div class='object-header' ng-controller="TreeMenuController as treeController">
-    <div class="btn s-btn s-icon-btn s-very-subtle key-properties" ng-click="treeController.toggle()">
-    T
-    </div>
+<div class='object-header object-header-mobile'>
 	<span class="label s-label">
 	    <span class='type-icon icon ui-symbol'>{{type.getGlyph()}}</span>
 	    <span ng-if="parameters.mode" class='action'>{{parameters.mode}}</span>
diff --git a/platform/commonUI/browse/src/BrowseController.js b/platform/commonUI/browse/src/BrowseController.js
index 3ec38057fc..fd18e385ab 100644
--- a/platform/commonUI/browse/src/BrowseController.js
+++ b/platform/commonUI/browse/src/BrowseController.js
@@ -140,6 +140,22 @@ define(
             $scope.treeModel = {
                 selectedObject: navigationService.getNavigation()
             };
+            
+            $scope.treeSlide = function () {
+                console.log("Clicked");
+                if (document.getElementById("myElement").
+                        className.match(/(?:^|\s)holder-hide(?!\S)/)) {
+                    document.getElementById("myElement").className =
+                        document.getElementById("myElement")
+                        .className.replace(/(?:^|\s)holder-hide(?!\S)/g, '');
+                    document.getElementById("myElement").className += " holder-show";
+                } else {
+                    document.getElementById("myElement").className =
+                        document.getElementById("myElement")
+                        .className.replace(/(?:^|\s)holder-show(?!\S)/g, '');
+                    document.getElementById("myElement").className += " holder-hide";
+                }
+            };
 
             // Listen for changes in navigation state.
             navigationService.addListener(setNavigation);
diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index a8942f1d28..24bc9d9ad2 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -748,7 +748,15 @@ mct-container {
     transition-duration: 0.2s;
     left: -150px; } }
 
-@media screen and (max-width: 800px) {
+@media screen and (max-width: 514px) {
+  /* line 37, ../sass/mobile/_layout.scss */
+  .holder-show {
+    -moz-transition-duration: 0.2s;
+    -o-transition-duration: 0.2s;
+    -webkit-transition-duration: 0.2s;
+    transition-duration: 0.2s;
+    left: 0px; } }
+@media screen and (min-width: 515px) and (max-width: 800px) {
   /* line 37, ../sass/mobile/_layout.scss */
   .holder-show {
     -moz-transition-duration: 0.2s;
@@ -757,16 +765,40 @@ mct-container {
     transition-duration: 0.2s;
     left: 0px; } }
 
+/* line 48, ../sass/mobile/_layout.scss */
+.button-hide {
+  position: absolute; }
+  @media screen and (max-width: 514px) {
+    /* line 48, ../sass/mobile/_layout.scss */
+    .button-hide {
+      left: 108px; } }
+  @media screen and (min-width: 515px) and (max-width: 800px) {
+    /* line 48, ../sass/mobile/_layout.scss */
+    .button-hide {
+      left: 150px; } }
+
+/* line 59, ../sass/mobile/_layout.scss */
+.object-header-mobile {
+  position: relative; }
+  @media screen and (max-width: 514px) {
+    /* line 59, ../sass/mobile/_layout.scss */
+    .object-header-mobile {
+      left: 17px; } }
+  @media screen and (min-width: 515px) and (max-width: 800px) {
+    /* line 59, ../sass/mobile/_layout.scss */
+    .object-header-mobile {
+      left: 15px; } }
+
 @media screen and (max-width: 514px) {
-  /* line 44, ../sass/mobile/_layout.scss */
+  /* line 69, ../sass/mobile/_layout.scss */
   .browse-manage {
     width: 100px; } }
 @media screen and (min-width: 515px) and (max-width: 800px) {
-  /* line 44, ../sass/mobile/_layout.scss */
+  /* line 69, ../sass/mobile/_layout.scss */
   .browse-manage {
     width: 150px; } }
 @media screen and (min-width: 801px) {
-  /* line 44, ../sass/mobile/_layout.scss */
+  /* line 69, ../sass/mobile/_layout.scss */
   .browse-manage {
     min-width: 150px;
     max-width: 800px;
diff --git a/platform/commonUI/general/res/sass/mobile/_layout.scss b/platform/commonUI/general/res/sass/mobile/_layout.scss
index b7bb8e8297..80c2807772 100644
--- a/platform/commonUI/general/res/sass/mobile/_layout.scss
+++ b/platform/commonUI/general/res/sass/mobile/_layout.scss
@@ -35,10 +35,35 @@
 }
 
 .holder-show {
-    @include phoneandtablet {
+    @include phone {
         @include transition-duration(.2s);
         left: 0px;
-    } 
+    }
+    @include tablet {
+        @include transition-duration(.2s);
+        left: 0px;
+    }     
+}
+
+.button-hide {
+    position: absolute;
+//    @include transition-duration(.2s);
+    @include phone {
+        left: 108px;
+    }
+    @include tablet {
+        left: 150px;
+    }     
+}
+
+.object-header-mobile {
+    position: relative;
+    @include phone {
+        left: 23px;
+    }
+    @include tablet {
+        left: 15px;
+    }
 }
 
 .browse-manage {

From 30efec00901d6656db66bf17661c107df835564a Mon Sep 17 00:00:00 2001
From: Dave <shivamndave>
Date: Thu, 9 Jul 2015 10:53:03 -0700
Subject: [PATCH 017/209] [Mobile] Angular

Replaced document usage with
angular calls that change the ternary
op to flip the slide.
---
 .../commonUI/browse/res/templates/browse.html | 46 ++++++++++---------
 .../commonUI/browse/src/BrowseController.js   | 16 ++-----
 2 files changed, 28 insertions(+), 34 deletions(-)

diff --git a/platform/commonUI/browse/res/templates/browse.html b/platform/commonUI/browse/res/templates/browse.html
index 081785c491..f20c1a3ce1 100644
--- a/platform/commonUI/browse/res/templates/browse.html
+++ b/platform/commonUI/browse/res/templates/browse.html
@@ -19,30 +19,32 @@
  this source code distribution or the Licensing information page available
  at runtime from the About dialog for additional information.
 -->
-<div id="myElement" content="jquery-wrapper" class="abs holder-all browse-mode holder-hide">
-    <mct-include key="'topbar-browse'"></mct-include>
-    <div class="holder browse-area s-browse-area abs" ng-controller="BrowseController">
-        <mct-split-pane class='contents abs' anchor='left'>
-            <div class='split-pane-component treeview pane browse-manage createtreebtns'>
-                <mct-representation key="'create-button'" mct-object="navigatedObject">
-                </mct-representation>
-                <div class='holder tree-holder abs'>
-                    <mct-representation key="'tree'"
-                                        mct-object="domainObject"
-                                        ng-model="treeModel">
+<div ng-controller="BrowseController">
+    <div content="jquery-wrapper" class="abs holder-all browse-mode holder-hide" ng-class="treeCl ? 'holder-show' : 'holder-hide'">
+        <mct-include key="'topbar-browse'"></mct-include>
+        <div class="holder browse-area s-browse-area abs">
+            <mct-split-pane class='contents abs' anchor='left'>
+                <div class='split-pane-component treeview pane browse-manage createtreebtns'>
+                    <mct-representation key="'create-button'" mct-object="navigatedObject">
                     </mct-representation>
+                    <div class='holder tree-holder abs'>
+                        <mct-representation key="'tree'"
+                                            mct-object="domainObject"
+                                            ng-model="treeModel">
+                        </mct-representation>
+                    </div>
                 </div>
-            </div>
-            <mct-splitter></mct-splitter>
-            <div class='split-pane-component items pane'>
-                <div class='holder abs hider-check' id='content-area'>
-                    <mct-representation mct-object="navigatedObject" key="'browse-object'">
-                    </mct-representation>
+                <mct-splitter></mct-splitter>
+                <div class='split-pane-component items pane'>
+                    <div class='holder abs hider-check' id='content-area'>
+                        <mct-representation mct-object="navigatedObject" key="'browse-object'">
+                        </mct-representation>
+                    </div>
                 </div>
-            </div>
-        </mct-split-pane>
-        <div class="btn s-btn s-icon-btn s-very-subtle key-properties button-hide" 
-                        ng-click="treeSlide()">T</div>        
+            </mct-split-pane>
+            <div class="btn s-btn s-icon-btn s-very-subtle key-properties button-hide" 
+                            ng-click="treeSlide()">T</div>        
+        </div>
+        <mct-include key="'bottombar'"></mct-include>
     </div>
-    <mct-include key="'bottombar'"></mct-include>
 </div>
diff --git a/platform/commonUI/browse/src/BrowseController.js b/platform/commonUI/browse/src/BrowseController.js
index fd18e385ab..22330e5671 100644
--- a/platform/commonUI/browse/src/BrowseController.js
+++ b/platform/commonUI/browse/src/BrowseController.js
@@ -142,18 +142,10 @@ define(
             };
             
             $scope.treeSlide = function () {
-                console.log("Clicked");
-                if (document.getElementById("myElement").
-                        className.match(/(?:^|\s)holder-hide(?!\S)/)) {
-                    document.getElementById("myElement").className =
-                        document.getElementById("myElement")
-                        .className.replace(/(?:^|\s)holder-hide(?!\S)/g, '');
-                    document.getElementById("myElement").className += " holder-show";
-                } else {
-                    document.getElementById("myElement").className =
-                        document.getElementById("myElement")
-                        .className.replace(/(?:^|\s)holder-show(?!\S)/g, '');
-                    document.getElementById("myElement").className += " holder-hide";
+                if ($scope.treeCl) {
+                    $scope.treeCl = false;
+                } else if (!$scope.treeCl) {
+                    $scope.treeCl = true;
                 }
             };
 

From e47a36e7992d19bf461ecb8b5ed3720f939c8eca Mon Sep 17 00:00:00 2001
From: Dave <shivamndave>
Date: Thu, 9 Jul 2015 10:55:52 -0700
Subject: [PATCH 018/209] [Mobile] Simplified

treeSlide now uses one line that
sets it to true or false simply
like a switch. So not matter what
it will either slide or not.
---
 platform/commonUI/browse/src/BrowseController.js | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/platform/commonUI/browse/src/BrowseController.js b/platform/commonUI/browse/src/BrowseController.js
index 22330e5671..ea44af889d 100644
--- a/platform/commonUI/browse/src/BrowseController.js
+++ b/platform/commonUI/browse/src/BrowseController.js
@@ -142,11 +142,7 @@ define(
             };
             
             $scope.treeSlide = function () {
-                if ($scope.treeCl) {
-                    $scope.treeCl = false;
-                } else if (!$scope.treeCl) {
-                    $scope.treeCl = true;
-                }
+                $scope.treeCl = !$scope.treeCl;
             };
 
             // Listen for changes in navigation state.

From bd236e1cb1629d3d2f91e5fe2d986772d1f53da7 Mon Sep 17 00:00:00 2001
From: Dave <shivamndave>
Date: Thu, 9 Jul 2015 11:06:25 -0700
Subject: [PATCH 019/209] [Mobile] Icon

Added menu/hamburger icon.
---
 platform/commonUI/browse/res/templates/browse.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/platform/commonUI/browse/res/templates/browse.html b/platform/commonUI/browse/res/templates/browse.html
index f20c1a3ce1..37d5bf9ddb 100644
--- a/platform/commonUI/browse/res/templates/browse.html
+++ b/platform/commonUI/browse/res/templates/browse.html
@@ -42,8 +42,8 @@
                     </div>
                 </div>
             </mct-split-pane>
-            <div class="btn s-btn s-icon-btn s-very-subtle key-properties button-hide" 
-                            ng-click="treeSlide()">T</div>        
+            <div class="s-very-subtle key-properties button-hide ui-symbol" 
+                            ng-click="treeSlide()">m</div>        
         </div>
         <mct-include key="'bottombar'"></mct-include>
     </div>

From 82c8d26264eae8b1bae5ae239c0d8a8a9ac7da47 Mon Sep 17 00:00:00 2001
From: Dave <shivamndave>
Date: Thu, 9 Jul 2015 11:16:41 -0700
Subject: [PATCH 020/209] [Mobile]

Now does not display
the icon for the slide menu
on desktops.
---
 .../commonUI/browse/res/templates/browse.html |  2 +-
 .../general/res/css/theme-espresso.css        | 44 ++++++++++---------
 .../general/res/sass/mobile/_layout.scss      | 15 ++++---
 3 files changed, 34 insertions(+), 27 deletions(-)

diff --git a/platform/commonUI/browse/res/templates/browse.html b/platform/commonUI/browse/res/templates/browse.html
index 37d5bf9ddb..9e47cc58f8 100644
--- a/platform/commonUI/browse/res/templates/browse.html
+++ b/platform/commonUI/browse/res/templates/browse.html
@@ -42,7 +42,7 @@
                     </div>
                 </div>
             </mct-split-pane>
-            <div class="s-very-subtle key-properties button-hide ui-symbol" 
+            <div class="s-very-subtle key-properties button-hide ui-symbol mobile-menu-icon" 
                             ng-click="treeSlide()">m</div>        
         </div>
         <mct-include key="'bottombar'"></mct-include>
diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index 24bc9d9ad2..4844397666 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -748,15 +748,7 @@ mct-container {
     transition-duration: 0.2s;
     left: -150px; } }
 
-@media screen and (max-width: 514px) {
-  /* line 37, ../sass/mobile/_layout.scss */
-  .holder-show {
-    -moz-transition-duration: 0.2s;
-    -o-transition-duration: 0.2s;
-    -webkit-transition-duration: 0.2s;
-    transition-duration: 0.2s;
-    left: 0px; } }
-@media screen and (min-width: 515px) and (max-width: 800px) {
+@media screen and (max-width: 800px) {
   /* line 37, ../sass/mobile/_layout.scss */
   .holder-show {
     -moz-transition-duration: 0.2s;
@@ -765,40 +757,52 @@ mct-container {
     transition-duration: 0.2s;
     left: 0px; } }
 
-/* line 48, ../sass/mobile/_layout.scss */
+/* line 44, ../sass/mobile/_layout.scss */
 .button-hide {
-  position: absolute; }
+  position: absolute;
+  -moz-transition-duration: 0.2s;
+  -o-transition-duration: 0.2s;
+  -webkit-transition-duration: 0.2s;
+  transition-duration: 0.2s; }
   @media screen and (max-width: 514px) {
-    /* line 48, ../sass/mobile/_layout.scss */
+    /* line 44, ../sass/mobile/_layout.scss */
     .button-hide {
       left: 108px; } }
   @media screen and (min-width: 515px) and (max-width: 800px) {
-    /* line 48, ../sass/mobile/_layout.scss */
+    /* line 44, ../sass/mobile/_layout.scss */
     .button-hide {
       left: 150px; } }
 
-/* line 59, ../sass/mobile/_layout.scss */
+/* line 55, ../sass/mobile/_layout.scss */
 .object-header-mobile {
   position: relative; }
   @media screen and (max-width: 514px) {
-    /* line 59, ../sass/mobile/_layout.scss */
+    /* line 55, ../sass/mobile/_layout.scss */
     .object-header-mobile {
-      left: 17px; } }
+      left: 23px; } }
   @media screen and (min-width: 515px) and (max-width: 800px) {
-    /* line 59, ../sass/mobile/_layout.scss */
+    /* line 55, ../sass/mobile/_layout.scss */
     .object-header-mobile {
       left: 15px; } }
 
+/* line 65, ../sass/mobile/_layout.scss */
+.mobile-menu-icon {
+  top: 5px; }
+  @media screen and (min-width: 801px) {
+    /* line 65, ../sass/mobile/_layout.scss */
+    .mobile-menu-icon {
+      display: none; } }
+
 @media screen and (max-width: 514px) {
-  /* line 69, ../sass/mobile/_layout.scss */
+  /* line 72, ../sass/mobile/_layout.scss */
   .browse-manage {
     width: 100px; } }
 @media screen and (min-width: 515px) and (max-width: 800px) {
-  /* line 69, ../sass/mobile/_layout.scss */
+  /* line 72, ../sass/mobile/_layout.scss */
   .browse-manage {
     width: 150px; } }
 @media screen and (min-width: 801px) {
-  /* line 69, ../sass/mobile/_layout.scss */
+  /* line 72, ../sass/mobile/_layout.scss */
   .browse-manage {
     min-width: 150px;
     max-width: 800px;
diff --git a/platform/commonUI/general/res/sass/mobile/_layout.scss b/platform/commonUI/general/res/sass/mobile/_layout.scss
index 80c2807772..9e5f51a21a 100644
--- a/platform/commonUI/general/res/sass/mobile/_layout.scss
+++ b/platform/commonUI/general/res/sass/mobile/_layout.scss
@@ -35,11 +35,7 @@
 }
 
 .holder-show {
-    @include phone {
-        @include transition-duration(.2s);
-        left: 0px;
-    }
-    @include tablet {
+    @include phoneandtablet {
         @include transition-duration(.2s);
         left: 0px;
     }     
@@ -47,7 +43,7 @@
 
 .button-hide {
     position: absolute;
-//    @include transition-duration(.2s);
+    @include transition-duration(.2s);
     @include phone {
         left: 108px;
     }
@@ -66,6 +62,13 @@
     }
 }
 
+.mobile-menu-icon {
+    top: $interiorMargin;
+    @include desktop {
+        display: none;
+    }       
+}
+
 .browse-manage {
     @include phone {
         width: 100px;

From dfd08000f15da70d50c7ec5db2b310c15df94b94 Mon Sep 17 00:00:00 2001
From: Dave <shivamndave>
Date: Thu, 9 Jul 2015 13:42:07 -0700
Subject: [PATCH 021/209] [Mobile] Adjust

Adjusted the tablet amount
that the slide occurs.
---
 .../commonUI/browse/res/templates/browse.html |  2 +-
 .../general/res/css/theme-espresso.css        | 64 ++++++++++++-------
 .../general/res/sass/mobile/_layout.scss      | 34 +++++++---
 3 files changed, 69 insertions(+), 31 deletions(-)

diff --git a/platform/commonUI/browse/res/templates/browse.html b/platform/commonUI/browse/res/templates/browse.html
index 9e47cc58f8..3597b2cd43 100644
--- a/platform/commonUI/browse/res/templates/browse.html
+++ b/platform/commonUI/browse/res/templates/browse.html
@@ -42,7 +42,7 @@
                     </div>
                 </div>
             </mct-split-pane>
-            <div class="s-very-subtle key-properties button-hide ui-symbol mobile-menu-icon" 
+            <div class="s-very-subtle key-properties ui-symbol mobile-menu-icon button-hide" ng-class="treeCl ? 'button-show' : 'button-hide'" 
                             ng-click="treeSlide()">m</div>        
         </div>
         <mct-include key="'bottombar'"></mct-include>
diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index 4844397666..963fcf0da7 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -732,24 +732,24 @@ mct-container {
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 @media screen and (max-width: 514px) {
-  /* line 26, ../sass/mobile/_layout.scss */
+  /* line 32, ../sass/mobile/_layout.scss */
   .holder-hide {
     -moz-transition-duration: 0.2s;
     -o-transition-duration: 0.2s;
     -webkit-transition-duration: 0.2s;
     transition-duration: 0.2s;
-    left: -108px; } }
+    left: -82.8%; } }
 @media screen and (min-width: 515px) and (max-width: 800px) {
-  /* line 26, ../sass/mobile/_layout.scss */
+  /* line 32, ../sass/mobile/_layout.scss */
   .holder-hide {
     -moz-transition-duration: 0.2s;
     -o-transition-duration: 0.2s;
     -webkit-transition-duration: 0.2s;
     transition-duration: 0.2s;
-    left: -150px; } }
+    left: -38.64%; } }
 
 @media screen and (max-width: 800px) {
-  /* line 37, ../sass/mobile/_layout.scss */
+  /* line 43, ../sass/mobile/_layout.scss */
   .holder-show {
     -moz-transition-duration: 0.2s;
     -o-transition-duration: 0.2s;
@@ -757,7 +757,27 @@ mct-container {
     transition-duration: 0.2s;
     left: 0px; } }
 
-/* line 44, ../sass/mobile/_layout.scss */
+/* line 50, ../sass/mobile/_layout.scss */
+.button-show {
+  position: absolute; }
+  @media screen and (max-width: 514px) {
+    /* line 50, ../sass/mobile/_layout.scss */
+    .button-show {
+      -moz-transition-duration: 0.2s;
+      -o-transition-duration: 0.2s;
+      -webkit-transition-duration: 0.2s;
+      transition-duration: 0.2s;
+      left: 82.8%; } }
+  @media screen and (min-width: 515px) and (max-width: 800px) {
+    /* line 50, ../sass/mobile/_layout.scss */
+    .button-show {
+      -moz-transition-duration: 0.2s;
+      -o-transition-duration: 0.2s;
+      -webkit-transition-duration: 0.2s;
+      transition-duration: 0.2s;
+      left: 38.64%; } }
+
+/* line 62, ../sass/mobile/_layout.scss */
 .button-hide {
   position: absolute;
   -moz-transition-duration: 0.2s;
@@ -765,44 +785,44 @@ mct-container {
   -webkit-transition-duration: 0.2s;
   transition-duration: 0.2s; }
   @media screen and (max-width: 514px) {
-    /* line 44, ../sass/mobile/_layout.scss */
+    /* line 62, ../sass/mobile/_layout.scss */
     .button-hide {
-      left: 108px; } }
+      left: 46%; } }
   @media screen and (min-width: 515px) and (max-width: 800px) {
-    /* line 44, ../sass/mobile/_layout.scss */
+    /* line 62, ../sass/mobile/_layout.scss */
     .button-hide {
-      left: 150px; } }
+      left: 28%; } }
 
-/* line 55, ../sass/mobile/_layout.scss */
+/* line 73, ../sass/mobile/_layout.scss */
 .object-header-mobile {
   position: relative; }
   @media screen and (max-width: 514px) {
-    /* line 55, ../sass/mobile/_layout.scss */
+    /* line 73, ../sass/mobile/_layout.scss */
     .object-header-mobile {
-      left: 23px; } }
+      left: 4.6%; } }
   @media screen and (min-width: 515px) and (max-width: 800px) {
-    /* line 55, ../sass/mobile/_layout.scss */
+    /* line 73, ../sass/mobile/_layout.scss */
     .object-header-mobile {
-      left: 15px; } }
+      left: 2.8%; } }
 
-/* line 65, ../sass/mobile/_layout.scss */
+/* line 83, ../sass/mobile/_layout.scss */
 .mobile-menu-icon {
   top: 5px; }
   @media screen and (min-width: 801px) {
-    /* line 65, ../sass/mobile/_layout.scss */
+    /* line 83, ../sass/mobile/_layout.scss */
     .mobile-menu-icon {
       display: none; } }
 
 @media screen and (max-width: 514px) {
-  /* line 72, ../sass/mobile/_layout.scss */
+  /* line 90, ../sass/mobile/_layout.scss */
   .browse-manage {
-    width: 100px; } }
+    width: 46%; } }
 @media screen and (min-width: 515px) and (max-width: 800px) {
-  /* line 72, ../sass/mobile/_layout.scss */
+  /* line 90, ../sass/mobile/_layout.scss */
   .browse-manage {
-    width: 150px; } }
+    width: 28%; } }
 @media screen and (min-width: 801px) {
-  /* line 72, ../sass/mobile/_layout.scss */
+  /* line 90, ../sass/mobile/_layout.scss */
   .browse-manage {
     min-width: 150px;
     max-width: 800px;
diff --git a/platform/commonUI/general/res/sass/mobile/_layout.scss b/platform/commonUI/general/res/sass/mobile/_layout.scss
index 9e5f51a21a..6af0be9d24 100644
--- a/platform/commonUI/general/res/sass/mobile/_layout.scss
+++ b/platform/commonUI/general/res/sass/mobile/_layout.scss
@@ -23,14 +23,20 @@
 // style="min-width: 150px; max-width: 800px; width: 25%;"
 // NOTE: Added to adjust the browse folder tree list view
 
+$leftPhone: 46%;
+$leftTab: 28%;
+
+$hideRatioPhone: 1.8;
+$hideRatioTab: 1.38;
+
 .holder-hide {
     @include phone {
         @include transition-duration(.2s);
-        left: -108px;
+        left: (-1 * $hideRatioPhone) * $leftPhone;
     }
     @include tablet {
         @include transition-duration(.2s);
-        left: -150px;
+        left: (-1 * $hideRatioTab) * $leftTab;
     }     
 }
 
@@ -41,24 +47,36 @@
     }     
 }
 
+.button-show {
+    position: absolute;
+    @include phone {
+        @include transition-duration(.2s);
+        left: ($hideRatioPhone) * $leftPhone;
+    }
+    @include tablet {
+        @include transition-duration(.2s);
+        left: ($hideRatioTab) * $leftTab;
+    }      
+}
+
 .button-hide {
     position: absolute;
     @include transition-duration(.2s);
     @include phone {
-        left: 108px;
+        left: $leftPhone;
     }
     @include tablet {
-        left: 150px;
+        left: $leftTab;
     }     
 }
 
 .object-header-mobile {
     position: relative;
     @include phone {
-        left: 23px;
+        left: $leftPhone/10;
     }
     @include tablet {
-        left: 15px;
+        left: $leftTab/10;
     }
 }
 
@@ -71,10 +89,10 @@
 
 .browse-manage {
     @include phone {
-        width: 100px;
+        width: $leftPhone;
     }
     @include tablet {
-        width: 150px;
+        width: $leftTab;
     }    
     @include desktop {
         min-width: 150px;

From 30a4f15330ea7a0d281ae47f565af009facfff72 Mon Sep 17 00:00:00 2001
From: Dave <shivamndave>
Date: Thu, 9 Jul 2015 14:11:51 -0700
Subject: [PATCH 022/209] [Mobile] Adjusted

Adjusted the _layout.scss to
have a function that makes
something disappear on phone
and tablet.
---
 platform/commonUI/general/res/css/theme-espresso.css  | 11 ++++++++---
 .../commonUI/general/res/sass/mobile/_layout.scss     |  7 +++++++
 2 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index 963fcf0da7..d72ebb4cea 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -813,16 +813,21 @@ mct-container {
     .mobile-menu-icon {
       display: none; } }
 
-@media screen and (max-width: 514px) {
+@media screen and (max-width: 800px) {
   /* line 90, ../sass/mobile/_layout.scss */
+  .exclude-mobile {
+    display: none; } }
+
+@media screen and (max-width: 514px) {
+  /* line 97, ../sass/mobile/_layout.scss */
   .browse-manage {
     width: 46%; } }
 @media screen and (min-width: 515px) and (max-width: 800px) {
-  /* line 90, ../sass/mobile/_layout.scss */
+  /* line 97, ../sass/mobile/_layout.scss */
   .browse-manage {
     width: 28%; } }
 @media screen and (min-width: 801px) {
-  /* line 90, ../sass/mobile/_layout.scss */
+  /* line 97, ../sass/mobile/_layout.scss */
   .browse-manage {
     min-width: 150px;
     max-width: 800px;
diff --git a/platform/commonUI/general/res/sass/mobile/_layout.scss b/platform/commonUI/general/res/sass/mobile/_layout.scss
index 6af0be9d24..589f576bdd 100644
--- a/platform/commonUI/general/res/sass/mobile/_layout.scss
+++ b/platform/commonUI/general/res/sass/mobile/_layout.scss
@@ -87,6 +87,13 @@ $hideRatioTab: 1.38;
     }       
 }
 
+.exclude-mobile {
+    @include phoneandtablet {
+        display: none;
+    }       
+}
+
+
 .browse-manage {
     @include phone {
         width: $leftPhone;

From 684a0e88a244a6fc86ab2462fa99904702f5db74 Mon Sep 17 00:00:00 2001
From: Dave <shivamndave>
Date: Thu, 9 Jul 2015 14:26:02 -0700
Subject: [PATCH 023/209] [Mobile] Constants

Added constants to the
mobile one with device
height.
---
 .../commonUI/general/res/sass/mobile/_constants.scss   | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/platform/commonUI/general/res/sass/mobile/_constants.scss b/platform/commonUI/general/res/sass/mobile/_constants.scss
index d05edc709e..e12184a149 100644
--- a/platform/commonUI/general/res/sass/mobile/_constants.scss
+++ b/platform/commonUI/general/res/sass/mobile/_constants.scss
@@ -22,7 +22,13 @@
 
 /************************** WINDOW DIMENSIONS FOR RWD */
 $phoMaxW: 514px;
+$phoMaxH: 740px;
+    
 $tabMinW: 515px;
+$tabMinH: 741px;
+
 $tabMaxW: 800px;
-$compMinW: 801px; 
-$compMinH: 1281px;
+$tabMaxH: 1280px;
+
+
+$compMinW: 801px;

From 40d53f941ff8839f7856fee82da323f806dbc0a5 Mon Sep 17 00:00:00 2001
From: Dave <shivamndave>
Date: Thu, 9 Jul 2015 14:46:36 -0700
Subject: [PATCH 024/209] [Mobile] TreeMenuController

Removed the TreeMenuController.js file
and from the bundle. What this achieves
is already done in BrowseController.js
---
 platform/commonUI/general/bundle.json         |  7 +--
 .../src/controllers/TreeMenuController.js     | 52 -------------------
 2 files changed, 1 insertion(+), 58 deletions(-)
 delete mode 100644 platform/commonUI/general/src/controllers/TreeMenuController.js

diff --git a/platform/commonUI/general/bundle.json b/platform/commonUI/general/bundle.json
index 428a1f667d..8e49ca7fc1 100644
--- a/platform/commonUI/general/bundle.json
+++ b/platform/commonUI/general/bundle.json
@@ -84,12 +84,7 @@
                 "key": "ClickAwayController",
                 "implementation": "controllers/ClickAwayController.js",
                 "depends": [ "$scope", "$document" ]
-            },
-            {
-                "key": "TreeMenuController",
-                "implementation": "controllers/TreeMenuController.js",
-                "depends": [ "$element", "$document" ]
-            },            
+            },          
             {
                 "key": "ViewSwitcherController",
                 "implementation": "controllers/ViewSwitcherController.js",
diff --git a/platform/commonUI/general/src/controllers/TreeMenuController.js b/platform/commonUI/general/src/controllers/TreeMenuController.js
deleted file mode 100644
index 13ec491657..0000000000
--- a/platform/commonUI/general/src/controllers/TreeMenuController.js
+++ /dev/null
@@ -1,52 +0,0 @@
-/*****************************************************************************
- * Open MCT Web, Copyright (c) 2014-2015, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT Web is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT Web includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-/*global define,Promise*/
-
-define(
-    [],
-    function () {
-        "use strict";
-
-        function TreeMenuController($scope, $document) {
-            return {
-                toggle: function () {
-                    if (document.getElementById("myElement").
-                            className.match(/(?:^|\s)holder-hide(?!\S)/)) {
-                        document.getElementById("myElement").className =
-                            document.getElementById("myElement")
-                            .className.replace(/(?:^|\s)holder-hide(?!\S)/g, '');
-                        document.getElementById("myElement").className += " holder-show";
-                    } else {
-                        document.getElementById("myElement").className =
-                            document.getElementById("myElement")
-                            .className.replace(/(?:^|\s)holder-show(?!\S)/g, '');
-                        document.getElementById("myElement").className += " holder-hide";
-                    }
-                    
-                }
-            };
-
-        }
-
-        return TreeMenuController;
-    }
-);
\ No newline at end of file

From 635e1eda6971429cba3f36415417ca880f7f6017 Mon Sep 17 00:00:00 2001
From: Dave <shivamndave>
Date: Thu, 9 Jul 2015 15:14:36 -0700
Subject: [PATCH 025/209] [Mobile] Clean-Up

Removed unused menu button and
cleaned up treeCl to be treeClass.
---
 platform/commonUI/browse/res/templates/browse.html | 4 ++--
 platform/commonUI/browse/src/BrowseController.js   | 2 +-
 platform/commonUI/general/bundle.json              | 6 +-----
 3 files changed, 4 insertions(+), 8 deletions(-)

diff --git a/platform/commonUI/browse/res/templates/browse.html b/platform/commonUI/browse/res/templates/browse.html
index 3597b2cd43..a0a3d9ff9f 100644
--- a/platform/commonUI/browse/res/templates/browse.html
+++ b/platform/commonUI/browse/res/templates/browse.html
@@ -20,7 +20,7 @@
  at runtime from the About dialog for additional information.
 -->
 <div ng-controller="BrowseController">
-    <div content="jquery-wrapper" class="abs holder-all browse-mode holder-hide" ng-class="treeCl ? 'holder-show' : 'holder-hide'">
+    <div content="jquery-wrapper" class="abs holder-all browse-mode holder-hide" ng-class="treeClass ? 'holder-show' : 'holder-hide'">
         <mct-include key="'topbar-browse'"></mct-include>
         <div class="holder browse-area s-browse-area abs">
             <mct-split-pane class='contents abs' anchor='left'>
@@ -42,7 +42,7 @@
                     </div>
                 </div>
             </mct-split-pane>
-            <div class="s-very-subtle key-properties ui-symbol mobile-menu-icon button-hide" ng-class="treeCl ? 'button-show' : 'button-hide'" 
+            <div class="s-very-subtle key-properties ui-symbol mobile-menu-icon button-hide" ng-class="treeClass ? 'button-show' : 'button-hide'" 
                             ng-click="treeSlide()">m</div>        
         </div>
         <mct-include key="'bottombar'"></mct-include>
diff --git a/platform/commonUI/browse/src/BrowseController.js b/platform/commonUI/browse/src/BrowseController.js
index ea44af889d..9bf040d3eb 100644
--- a/platform/commonUI/browse/src/BrowseController.js
+++ b/platform/commonUI/browse/src/BrowseController.js
@@ -142,7 +142,7 @@ define(
             };
             
             $scope.treeSlide = function () {
-                $scope.treeCl = !$scope.treeCl;
+                $scope.treeClass = !$scope.treeClass;
             };
 
             // Listen for changes in navigation state.
diff --git a/platform/commonUI/general/bundle.json b/platform/commonUI/general/bundle.json
index 8e49ca7fc1..2093a988cd 100644
--- a/platform/commonUI/general/bundle.json
+++ b/platform/commonUI/general/bundle.json
@@ -43,10 +43,6 @@
                 "key": "action-button",
                 "templateUrl": "templates/controls/action-button.html"
             },
-            {
-                "key": "menu-button",
-                "templateUrl": "templates/controls/menu-button.html"
-            },
             {
                 "key": "input-filter",
                 "templateUrl": "templates/controls/input-filter.html"
@@ -84,7 +80,7 @@
                 "key": "ClickAwayController",
                 "implementation": "controllers/ClickAwayController.js",
                 "depends": [ "$scope", "$document" ]
-            },          
+            },
             {
                 "key": "ViewSwitcherController",
                 "implementation": "controllers/ViewSwitcherController.js",

From 1fb1174c0a33556fc649a7a69ee2b198e548e54d Mon Sep 17 00:00:00 2001
From: Dave <shivamndave>
Date: Thu, 9 Jul 2015 15:19:29 -0700
Subject: [PATCH 026/209] [Mobile] Clean-Up

Removed unused scss constant
.
---
 platform/commonUI/general/res/sass/_constants.scss | 1 -
 1 file changed, 1 deletion(-)

diff --git a/platform/commonUI/general/res/sass/_constants.scss b/platform/commonUI/general/res/sass/_constants.scss
index b373982a37..8a8fed19d1 100644
--- a/platform/commonUI/general/res/sass/_constants.scss
+++ b/platform/commonUI/general/res/sass/_constants.scss
@@ -103,7 +103,6 @@ $ovrTopBarH: 60px;
 $ovrFooterH: 40px;
 // Items
 $ueBrowseGridItemLg: 200px;
-$ueBrowseGridItemSm: 100%;
 $ueBrowseGridItemTopBarH: 20px;
 $ueBrowseGridItemBottomBarH: 30px;
 $itemPadLR: 5px;

From f079471a182231a97e49ddad217bb9d1135d0d46 Mon Sep 17 00:00:00 2001
From: Dave <shivamndave>
Date: Thu, 9 Jul 2015 15:31:35 -0700
Subject: [PATCH 027/209] [Mobile]

Reverted changes to scss file.
---
 .../general/res/sass/items/_item.scss         | 39 ++-----------------
 1 file changed, 4 insertions(+), 35 deletions(-)

diff --git a/platform/commonUI/general/res/sass/items/_item.scss b/platform/commonUI/general/res/sass/items/_item.scss
index c1eb2d023f..5a5cdaf9a3 100644
--- a/platform/commonUI/general/res/sass/items/_item.scss
+++ b/platform/commonUI/general/res/sass/items/_item.scss
@@ -28,37 +28,14 @@
     .item {
         &.grid-item {
             //div { @include test() }
-            // NOTE: Sets grid item width
-            $dWid: $ueBrowseGridItemLg;
-            $dHei: $ueBrowseGridItemLg;
-            @include phone {
-                $dWid: 100%;
-                $dHei: $ueBrowseGridItemLg/4;
-                width: $dWid;
-                height: $dHei;
-            }
-            
-            @include tablet {
-                $dWid: 100%;
-                $dHei: $ueBrowseGridItemLg/2;
-                width: $dWid;
-                height: $dHei;
-            }
-            
-            @include desktop {
-                $dWid: $ueBrowseGridItemLg;
-                $dHei: $ueBrowseGridItemLg;
-                width: $dWid;
-                height: $dHei; 
-            }
-            
+            $d: $ueBrowseGridItemLg;
             $transTime: 200ms;
             @include btnSubtle($colorItemBase);
             box-sizing: border-box;
             cursor: pointer;
-            float: left;     
-            width: $dWid;
-            height: $dHei;
+            float: left;
+            height: $d;
+            width: $d;
             margin-bottom: $interiorMarginSm;
             margin-right: $interiorMarginSm;
             position: relative;
@@ -96,15 +73,7 @@
 	                padding: $interiorMargin;
                 }
             }
-//            NOTE: make icon disappear
             .item-main {
-                @include phone {
-                    display: none;
-                }
-                @include tablet {
-                    display: none;   
-                }
-                
 	            $h: $ueBrowseGridItemLg;
 	            $lh: $h * 0.8;
                 //top: $ueBrowseGridItemTopBarH; bottom: $ueBrowseGridItemBottomBarH;

From fcb00338645b5b1a5ad2c8e0cf5f1ab72ae8174f Mon Sep 17 00:00:00 2001
From: Dave <shivamndave>
Date: Thu, 9 Jul 2015 15:32:41 -0700
Subject: [PATCH 028/209] [Mobile]

Reverted changes to css file.
---
 platform/commonUI/general/res/css/items.css | 61 +++++++--------------
 1 file changed, 19 insertions(+), 42 deletions(-)

diff --git a/platform/commonUI/general/res/css/items.css b/platform/commonUI/general/res/css/items.css
index 88c0791919..5f5a1a5e04 100644
--- a/platform/commonUI/general/res/css/items.css
+++ b/platform/commonUI/general/res/css/items.css
@@ -174,26 +174,11 @@
     box-sizing: border-box;
     cursor: pointer;
     float: left;
-    width: 200px;
     height: 200px;
+    width: 200px;
     margin-bottom: 3px;
     margin-right: 3px;
     position: relative; }
-    @media screen and (max-width: 514px) {
-      /* line 29, ../sass/items/_item.scss */
-      .items-holder .item.grid-item {
-        width: 100%;
-        height: 50px; } }
-    @media screen and (min-width: 515px) and (max-width: 800px) {
-      /* line 29, ../sass/items/_item.scss */
-      .items-holder .item.grid-item {
-        width: 100%;
-        height: 100px; } }
-    @media screen and (min-width: 801px) {
-      /* line 29, ../sass/items/_item.scss */
-      .items-holder .item.grid-item {
-        width: 200px;
-        height: 200px; } }
     /* line 153, ../sass/_mixins.scss */
     .items-holder .item.grid-item:not(.disabled):hover {
       background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzcwNzA3MCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzYzNjM2MyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
@@ -209,7 +194,7 @@
     /* line 161, ../sass/_mixins.scss */
     .items-holder .item.grid-item.btn-menu .invoke-menu {
       color: #828282; }
-    /* line 65, ../sass/items/_item.scss */
+    /* line 42, ../sass/items/_item.scss */
     .items-holder .item.grid-item .item-main .item-type {
       -moz-transition-property: "color";
       -o-transition-property: "color";
@@ -223,53 +208,45 @@
       -o-transition-timing-function: ease-in-out;
       -webkit-transition-timing-function: ease-in-out;
       transition-timing-function: ease-in-out; }
-    /* line 69, ../sass/items/_item.scss */
+    /* line 46, ../sass/items/_item.scss */
     .items-holder .item.grid-item:hover .item-main .item-type {
       color: #0099cc !important; }
-    /* line 72, ../sass/items/_item.scss */
+    /* line 49, ../sass/items/_item.scss */
     .items-holder .item.grid-item:hover .item-main .item-open {
       opacity: 1; }
-    /* line 77, ../sass/items/_item.scss */
+    /* line 54, ../sass/items/_item.scss */
     .items-holder .item.grid-item .contents {
       top: 5px;
       right: 5px;
       bottom: 5px;
       left: 5px; }
-    /* line 81, ../sass/items/_item.scss */
+    /* line 58, ../sass/items/_item.scss */
     .items-holder .item.grid-item .bar.top-bar.abs {
       bottom: auto;
       height: 20px;
       line-height: 20px;
       z-index: 5; }
-      /* line 86, ../sass/items/_item.scss */
+      /* line 63, ../sass/items/_item.scss */
       .items-holder .item.grid-item .bar.top-bar.abs .left, .items-holder .item.grid-item .bar.top-bar.abs .right {
         width: auto; }
-        /* line 88, ../sass/items/_item.scss */
+        /* line 65, ../sass/items/_item.scss */
         .items-holder .item.grid-item .bar.top-bar.abs .left .icon, .items-holder .item.grid-item .bar.top-bar.abs .right .icon {
           margin-left: 5px; }
-    /* line 93, ../sass/items/_item.scss */
+    /* line 70, ../sass/items/_item.scss */
     .items-holder .item.grid-item .bar.bottom-bar.abs {
       top: auto;
       height: 30px;
       padding: 5px; }
-    /* line 100, ../sass/items/_item.scss */
+    /* line 76, ../sass/items/_item.scss */
     .items-holder .item.grid-item .item-main {
       line-height: 160px;
       z-index: 1; }
-      @media screen and (max-width: 514px) {
-        /* line 100, ../sass/items/_item.scss */
-        .items-holder .item.grid-item .item-main {
-          display: none; } }
-      @media screen and (min-width: 515px) and (max-width: 800px) {
-        /* line 100, ../sass/items/_item.scss */
-        .items-holder .item.grid-item .item-main {
-          display: none; } }
-      /* line 113, ../sass/items/_item.scss */
+      /* line 82, ../sass/items/_item.scss */
       .items-holder .item.grid-item .item-main .item-type {
         color: #737373;
         text-align: center;
         font-size: 6em; }
-      /* line 119, ../sass/items/_item.scss */
+      /* line 88, ../sass/items/_item.scss */
       .items-holder .item.grid-item .item-main .item-open {
         -moz-transition-property: "opacity";
         -o-transition-property: "opacity";
@@ -289,17 +266,17 @@
         width: 50px;
         pointer-events: none;
         text-align: right; }
-    /* line 131, ../sass/items/_item.scss */
+    /* line 100, ../sass/items/_item.scss */
     .items-holder .item.grid-item .title {
       text-shadow: rgba(0, 0, 0, 0.1) 0 1px 2px;
       color: #cccccc;
       overflow: hidden;
       white-space: nowrap;
       text-overflow: ellipsis; }
-    /* line 139, ../sass/items/_item.scss */
+    /* line 108, ../sass/items/_item.scss */
     .items-holder .item.grid-item .details {
       font-size: 0.8em; }
-    /* line 142, ../sass/items/_item.scss */
+    /* line 111, ../sass/items/_item.scss */
     .items-holder .item.grid-item.selected {
       background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzBhYzJmZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwYjRmMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
       background-size: 100%;
@@ -336,16 +313,16 @@
       /* line 161, ../sass/_mixins.scss */
       .items-holder .item.grid-item.selected.btn-menu .invoke-menu {
         color: #52d4ff; }
-      /* line 147, ../sass/items/_item.scss */
+      /* line 116, ../sass/items/_item.scss */
       .items-holder .item.grid-item.selected .item-type, .items-holder .item.grid-item.selected .top-bar .icon:not(.alert) {
         color: #80dfff; }
-      /* line 148, ../sass/items/_item.scss */
+      /* line 117, ../sass/items/_item.scss */
       .items-holder .item.grid-item.selected .item-main .item-open {
         color: #80dfff; }
-      /* line 149, ../sass/items/_item.scss */
+      /* line 118, ../sass/items/_item.scss */
       .items-holder .item.grid-item.selected .title {
         color: white; }
-      /* line 151, ../sass/items/_item.scss */
+      /* line 120, ../sass/items/_item.scss */
       .items-holder .item.grid-item.selected:hover .item-main .item-type {
         color: white !important; }
 

From 7414275a85f570ec20ce8038a6b72c131e60a095 Mon Sep 17 00:00:00 2001
From: Dave <shivamndave>
Date: Thu, 9 Jul 2015 15:37:03 -0700
Subject: [PATCH 029/209] [Mobile]

Reverted changes to original scss file.
---
 platform/commonUI/general/res/sass/user-environ/_layout.scss | 1 -
 1 file changed, 1 deletion(-)

diff --git a/platform/commonUI/general/res/sass/user-environ/_layout.scss b/platform/commonUI/general/res/sass/user-environ/_layout.scss
index 7b63575d85..639e53af75 100644
--- a/platform/commonUI/general/res/sass/user-environ/_layout.scss
+++ b/platform/commonUI/general/res/sass/user-environ/_layout.scss
@@ -43,7 +43,6 @@
 	position: absolute;
 }
 
-
 .editor {
 	@include border-radius($basicCr * 1.5);
 }

From 3e4ae4d38db9a44a9cef92e2199de4122986aaf5 Mon Sep 17 00:00:00 2001
From: Dave <shivamndave>
Date: Thu, 9 Jul 2015 15:38:53 -0700
Subject: [PATCH 030/209] [Mobile]

Reverted changes to original controller file.
---
 .../commonUI/general/src/controllers/ClickAwayController.js     | 2 --
 1 file changed, 2 deletions(-)

diff --git a/platform/commonUI/general/src/controllers/ClickAwayController.js b/platform/commonUI/general/src/controllers/ClickAwayController.js
index 88965ca497..75b1d985da 100644
--- a/platform/commonUI/general/src/controllers/ClickAwayController.js
+++ b/platform/commonUI/general/src/controllers/ClickAwayController.js
@@ -58,8 +58,6 @@ define(
                     activate();
                 }
             }
-            
-            
 
             // Callback used by the document listener. Deactivates;
             // note also $scope.$apply is invoked to indicate that

From 30bed434fe7f95f53dbf1c1b76be8b688899223f Mon Sep 17 00:00:00 2001
From: Dave <shivamndave>
Date: Fri, 10 Jul 2015 09:02:46 -0700
Subject: [PATCH 031/209] [Mobile] Moved variables

Moved variables used for amount of
side bar and slide amount into the
mobile/_constants.scss file.
---
 .../general/res/css/theme-espresso.css        | 122 +++++++++---------
 .../general/res/sass/mobile/_constants.scss   |   8 +-
 .../general/res/sass/mobile/_layout.scss      |   6 -
 3 files changed, 68 insertions(+), 68 deletions(-)

diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index d72ebb4cea..a76e6e9a28 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -510,13 +510,13 @@ mct-container {
 .editor {
   position: absolute; }
 
-/* line 47, ../sass/user-environ/_layout.scss */
+/* line 46, ../sass/user-environ/_layout.scss */
 .editor {
   -moz-border-radius: 3px;
   -webkit-border-radius: 3px;
   border-radius: 3px; }
 
-/* line 51, ../sass/user-environ/_layout.scss */
+/* line 50, ../sass/user-environ/_layout.scss */
 .contents {
   box-sizing: border-box;
   position: absolute;
@@ -524,36 +524,36 @@ mct-container {
   right: 0;
   bottom: 0;
   left: 0; }
-  /* line 59, ../sass/user-environ/_layout.scss */
+  /* line 58, ../sass/user-environ/_layout.scss */
   .contents.nomargin {
     right: 0px;
     bottom: 0px;
     left: 0px; }
 
-/* line 68, ../sass/user-environ/_layout.scss */
+/* line 67, ../sass/user-environ/_layout.scss */
 .bar .icon.major {
   margin-right: 5px; }
-/* line 71, ../sass/user-environ/_layout.scss */
+/* line 70, ../sass/user-environ/_layout.scss */
 .bar.abs, .btn-menu span.bar.l-click-area {
   text-wrap: none;
   white-space: nowrap; }
-/* line 75, ../sass/user-environ/_layout.scss */
+/* line 74, ../sass/user-environ/_layout.scss */
 .bar.left,
 .bar .left {
   width: 45% !important;
   right: auto !important; }
-/* line 80, ../sass/user-environ/_layout.scss */
+/* line 79, ../sass/user-environ/_layout.scss */
 .bar.right,
 .bar .right {
   width: 45% !important;
   left: auto !important;
   text-align: right; }
-  /* line 85, ../sass/user-environ/_layout.scss */
+  /* line 84, ../sass/user-environ/_layout.scss */
   .bar.right .icon.major,
   .bar .right .icon.major {
     margin-left: 15px; }
 
-/* line 92, ../sass/user-environ/_layout.scss */
+/* line 91, ../sass/user-environ/_layout.scss */
 .user-environ .browse-area,
 .user-environ .edit-area,
 .user-environ .editor {
@@ -561,23 +561,23 @@ mct-container {
   right: 10px;
   bottom: 35px;
   left: 10px; }
-/* line 103, ../sass/user-environ/_layout.scss */
+/* line 102, ../sass/user-environ/_layout.scss */
 .user-environ .browse-area > .contents,
 .user-environ .edit-area > .contents {
   left: 0;
   right: 0; }
-/* line 109, ../sass/user-environ/_layout.scss */
+/* line 108, ../sass/user-environ/_layout.scss */
 .user-environ .edit-area {
   top: 45px; }
-  /* line 112, ../sass/user-environ/_layout.scss */
+  /* line 111, ../sass/user-environ/_layout.scss */
   .user-environ .edit-area .tool-bar {
     bottom: auto;
     height: 30px;
     line-height: 25px; }
-  /* line 117, ../sass/user-environ/_layout.scss */
+  /* line 116, ../sass/user-environ/_layout.scss */
   .user-environ .edit-area .work-area {
     top: 40px; }
-/* line 122, ../sass/user-environ/_layout.scss */
+/* line 121, ../sass/user-environ/_layout.scss */
 .user-environ .bottom-bar {
   overflow: hidden;
   position: absolute;
@@ -589,20 +589,20 @@ mct-container {
   height: auto;
   top: auto;
   height: 25px; }
-  /* line 127, ../sass/user-environ/_layout.scss */
+  /* line 126, ../sass/user-environ/_layout.scss */
   .user-environ .bottom-bar .status-holder {
     z-index: 1; }
-  /* line 131, ../sass/user-environ/_layout.scss */
+  /* line 130, ../sass/user-environ/_layout.scss */
   .user-environ .bottom-bar .app-logo {
     left: auto;
     width: 105px;
     z-index: 2; }
 
-/* line 139, ../sass/user-environ/_layout.scss */
+/* line 138, ../sass/user-environ/_layout.scss */
 .cols {
   overflow: hidden;
   *zoom: 1; }
-  /* line 141, ../sass/user-environ/_layout.scss */
+  /* line 140, ../sass/user-environ/_layout.scss */
   .cols .col {
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
@@ -613,100 +613,100 @@ mct-container {
     margin-left: 1.5%;
     padding-left: 5px;
     position: relative; }
-    /* line 149, ../sass/user-environ/_layout.scss */
+    /* line 148, ../sass/user-environ/_layout.scss */
     .cols .col:first-child {
       margin-left: 0;
       padding-left: 0; }
-  /* line 156, ../sass/user-environ/_layout.scss */
+  /* line 155, ../sass/user-environ/_layout.scss */
   .cols.cols-2 .col-1 {
     min-width: 250px;
     width: 48.5%; }
-  /* line 162, ../sass/user-environ/_layout.scss */
+  /* line 161, ../sass/user-environ/_layout.scss */
   .cols.cols-2-ff .col-100px {
     width: 100px; }
-  /* line 169, ../sass/user-environ/_layout.scss */
+  /* line 168, ../sass/user-environ/_layout.scss */
   .cols.cols-6 .col-1 {
     min-width: 83.33333px;
     width: 15.16667%; }
-  /* line 175, ../sass/user-environ/_layout.scss */
+  /* line 174, ../sass/user-environ/_layout.scss */
   .cols.cols-16 .col-1 {
     min-width: 31.25px;
     width: 4.75%; }
-  /* line 178, ../sass/user-environ/_layout.scss */
+  /* line 177, ../sass/user-environ/_layout.scss */
   .cols.cols-16 .col-2 {
     min-width: 62.5px;
     width: 11%; }
-  /* line 181, ../sass/user-environ/_layout.scss */
+  /* line 180, ../sass/user-environ/_layout.scss */
   .cols.cols-16 .col-7 {
     min-width: 218.75px;
     width: 42.25%; }
-  /* line 187, ../sass/user-environ/_layout.scss */
+  /* line 186, ../sass/user-environ/_layout.scss */
   .cols.cols-32 .col-2 {
     min-width: 31.25px;
     width: 4.75%; }
-  /* line 190, ../sass/user-environ/_layout.scss */
+  /* line 189, ../sass/user-environ/_layout.scss */
   .cols.cols-32 .col-15 {
     min-width: 234.375px;
     width: 45.375%; }
-  /* line 194, ../sass/user-environ/_layout.scss */
+  /* line 193, ../sass/user-environ/_layout.scss */
   .cols .l-row {
     overflow: hidden;
     *zoom: 1;
     padding: 5px 0; }
 
-/* line 200, ../sass/user-environ/_layout.scss */
+/* line 199, ../sass/user-environ/_layout.scss */
 .pane {
   position: absolute; }
-  /* line 203, ../sass/user-environ/_layout.scss */
+  /* line 202, ../sass/user-environ/_layout.scss */
   .pane.treeview .create-btn-holder {
     bottom: auto;
     top: 0;
     height: 24px; }
-    /* line 206, ../sass/user-environ/_layout.scss */
+    /* line 205, ../sass/user-environ/_layout.scss */
     .pane.treeview .create-btn-holder .wrapper.menu-element {
       position: absolute;
       bottom: 5px; }
-  /* line 211, ../sass/user-environ/_layout.scss */
+  /* line 210, ../sass/user-environ/_layout.scss */
   .pane.treeview .tree-holder {
     overflow: auto;
     top: 34px; }
-  /* line 218, ../sass/user-environ/_layout.scss */
+  /* line 217, ../sass/user-environ/_layout.scss */
   .pane.items .object-browse-bar .left.abs, .pane.items .object-browse-bar .btn-menu span.left.l-click-area, .btn-menu .pane.items .object-browse-bar span.left.l-click-area,
   .pane.items .object-browse-bar .right.abs,
   .pane.items .object-browse-bar .btn-menu span.right.l-click-area,
   .btn-menu .pane.items .object-browse-bar span.right.l-click-area {
     top: auto; }
-  /* line 223, ../sass/user-environ/_layout.scss */
+  /* line 222, ../sass/user-environ/_layout.scss */
   .pane.items .object-holder {
     top: 34px; }
-  /* line 228, ../sass/user-environ/_layout.scss */
+  /* line 227, ../sass/user-environ/_layout.scss */
   .pane.edit-main .object-holder {
     top: 0; }
-  /* line 234, ../sass/user-environ/_layout.scss */
+  /* line 233, ../sass/user-environ/_layout.scss */
   .pane .object-holder {
     overflow: auto; }
 
-/* line 242, ../sass/user-environ/_layout.scss */
+/* line 241, ../sass/user-environ/_layout.scss */
 .split-layout.horizontal > .pane {
   margin-top: 5px; }
-  /* line 245, ../sass/user-environ/_layout.scss */
+  /* line 244, ../sass/user-environ/_layout.scss */
   .split-layout.horizontal > .pane:first-child {
     margin-top: 0; }
-/* line 252, ../sass/user-environ/_layout.scss */
+/* line 251, ../sass/user-environ/_layout.scss */
 .split-layout.vertical > .pane {
   margin-left: 5px; }
-  /* line 254, ../sass/user-environ/_layout.scss */
+  /* line 253, ../sass/user-environ/_layout.scss */
   .split-layout.vertical > .pane > .holder {
     left: 0;
     right: 0; }
-  /* line 258, ../sass/user-environ/_layout.scss */
+  /* line 257, ../sass/user-environ/_layout.scss */
   .split-layout.vertical > .pane:first-child {
     margin-left: 0; }
-    /* line 260, ../sass/user-environ/_layout.scss */
+    /* line 259, ../sass/user-environ/_layout.scss */
     .split-layout.vertical > .pane:first-child .holder {
       right: 5px; }
 
-/* line 269, ../sass/user-environ/_layout.scss */
+/* line 268, ../sass/user-environ/_layout.scss */
 .vscroll {
   overflow-y: auto; }
 
@@ -732,7 +732,7 @@ mct-container {
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 @media screen and (max-width: 514px) {
-  /* line 32, ../sass/mobile/_layout.scss */
+  /* line 26, ../sass/mobile/_layout.scss */
   .holder-hide {
     -moz-transition-duration: 0.2s;
     -o-transition-duration: 0.2s;
@@ -740,7 +740,7 @@ mct-container {
     transition-duration: 0.2s;
     left: -82.8%; } }
 @media screen and (min-width: 515px) and (max-width: 800px) {
-  /* line 32, ../sass/mobile/_layout.scss */
+  /* line 26, ../sass/mobile/_layout.scss */
   .holder-hide {
     -moz-transition-duration: 0.2s;
     -o-transition-duration: 0.2s;
@@ -749,7 +749,7 @@ mct-container {
     left: -38.64%; } }
 
 @media screen and (max-width: 800px) {
-  /* line 43, ../sass/mobile/_layout.scss */
+  /* line 37, ../sass/mobile/_layout.scss */
   .holder-show {
     -moz-transition-duration: 0.2s;
     -o-transition-duration: 0.2s;
@@ -757,11 +757,11 @@ mct-container {
     transition-duration: 0.2s;
     left: 0px; } }
 
-/* line 50, ../sass/mobile/_layout.scss */
+/* line 44, ../sass/mobile/_layout.scss */
 .button-show {
   position: absolute; }
   @media screen and (max-width: 514px) {
-    /* line 50, ../sass/mobile/_layout.scss */
+    /* line 44, ../sass/mobile/_layout.scss */
     .button-show {
       -moz-transition-duration: 0.2s;
       -o-transition-duration: 0.2s;
@@ -769,7 +769,7 @@ mct-container {
       transition-duration: 0.2s;
       left: 82.8%; } }
   @media screen and (min-width: 515px) and (max-width: 800px) {
-    /* line 50, ../sass/mobile/_layout.scss */
+    /* line 44, ../sass/mobile/_layout.scss */
     .button-show {
       -moz-transition-duration: 0.2s;
       -o-transition-duration: 0.2s;
@@ -777,7 +777,7 @@ mct-container {
       transition-duration: 0.2s;
       left: 38.64%; } }
 
-/* line 62, ../sass/mobile/_layout.scss */
+/* line 56, ../sass/mobile/_layout.scss */
 .button-hide {
   position: absolute;
   -moz-transition-duration: 0.2s;
@@ -785,49 +785,49 @@ mct-container {
   -webkit-transition-duration: 0.2s;
   transition-duration: 0.2s; }
   @media screen and (max-width: 514px) {
-    /* line 62, ../sass/mobile/_layout.scss */
+    /* line 56, ../sass/mobile/_layout.scss */
     .button-hide {
       left: 46%; } }
   @media screen and (min-width: 515px) and (max-width: 800px) {
-    /* line 62, ../sass/mobile/_layout.scss */
+    /* line 56, ../sass/mobile/_layout.scss */
     .button-hide {
       left: 28%; } }
 
-/* line 73, ../sass/mobile/_layout.scss */
+/* line 67, ../sass/mobile/_layout.scss */
 .object-header-mobile {
   position: relative; }
   @media screen and (max-width: 514px) {
-    /* line 73, ../sass/mobile/_layout.scss */
+    /* line 67, ../sass/mobile/_layout.scss */
     .object-header-mobile {
       left: 4.6%; } }
   @media screen and (min-width: 515px) and (max-width: 800px) {
-    /* line 73, ../sass/mobile/_layout.scss */
+    /* line 67, ../sass/mobile/_layout.scss */
     .object-header-mobile {
       left: 2.8%; } }
 
-/* line 83, ../sass/mobile/_layout.scss */
+/* line 77, ../sass/mobile/_layout.scss */
 .mobile-menu-icon {
   top: 5px; }
   @media screen and (min-width: 801px) {
-    /* line 83, ../sass/mobile/_layout.scss */
+    /* line 77, ../sass/mobile/_layout.scss */
     .mobile-menu-icon {
       display: none; } }
 
 @media screen and (max-width: 800px) {
-  /* line 90, ../sass/mobile/_layout.scss */
+  /* line 84, ../sass/mobile/_layout.scss */
   .exclude-mobile {
     display: none; } }
 
 @media screen and (max-width: 514px) {
-  /* line 97, ../sass/mobile/_layout.scss */
+  /* line 91, ../sass/mobile/_layout.scss */
   .browse-manage {
     width: 46%; } }
 @media screen and (min-width: 515px) and (max-width: 800px) {
-  /* line 97, ../sass/mobile/_layout.scss */
+  /* line 91, ../sass/mobile/_layout.scss */
   .browse-manage {
     width: 28%; } }
 @media screen and (min-width: 801px) {
-  /* line 97, ../sass/mobile/_layout.scss */
+  /* line 91, ../sass/mobile/_layout.scss */
   .browse-manage {
     min-width: 150px;
     max-width: 800px;
diff --git a/platform/commonUI/general/res/sass/mobile/_constants.scss b/platform/commonUI/general/res/sass/mobile/_constants.scss
index e12184a149..f30a6db9c4 100644
--- a/platform/commonUI/general/res/sass/mobile/_constants.scss
+++ b/platform/commonUI/general/res/sass/mobile/_constants.scss
@@ -30,5 +30,11 @@ $tabMinH: 741px;
 $tabMaxW: 800px;
 $tabMaxH: 1280px;
 
-
 $compMinW: 801px;
+
+$leftPhone: 46%;
+$leftTab: 28%;
+
+$hideRatioPhone: 1.8;
+$hideRatioTab: 1.38;
+
diff --git a/platform/commonUI/general/res/sass/mobile/_layout.scss b/platform/commonUI/general/res/sass/mobile/_layout.scss
index 589f576bdd..66917440a1 100644
--- a/platform/commonUI/general/res/sass/mobile/_layout.scss
+++ b/platform/commonUI/general/res/sass/mobile/_layout.scss
@@ -23,12 +23,6 @@
 // style="min-width: 150px; max-width: 800px; width: 25%;"
 // NOTE: Added to adjust the browse folder tree list view
 
-$leftPhone: 46%;
-$leftTab: 28%;
-
-$hideRatioPhone: 1.8;
-$hideRatioTab: 1.38;
-
 .holder-hide {
     @include phone {
         @include transition-duration(.2s);

From d3ae4b729f7d9c740b0d0f7bcbdd73a73362d2cc Mon Sep 17 00:00:00 2001
From: Dave <shivamndave>
Date: Fri, 10 Jul 2015 10:56:48 -0700
Subject: [PATCH 032/209] [Mobile] More consistent

More consistent when moving from
landscape to portrait and
vice-versa on devices. However
still encountering issue with
the browser being resized.
---
 platform/commonUI/general/res/css/items.css   | 10 +--
 .../general/res/css/theme-espresso.css        | 87 ++++++++++---------
 .../general/res/sass/mobile/_constants.scss   | 38 ++++++--
 .../general/res/sass/mobile/_layout.scss      | 15 ++--
 .../general/res/sass/mobile/_mixins.scss      | 22 +++--
 5 files changed, 99 insertions(+), 73 deletions(-)

diff --git a/platform/commonUI/general/res/css/items.css b/platform/commonUI/general/res/css/items.css
index 5f5a1a5e04..27a32a1368 100644
--- a/platform/commonUI/general/res/css/items.css
+++ b/platform/commonUI/general/res/css/items.css
@@ -347,26 +347,26 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-@media screen and (max-width: 514px) {
+@media screen and (max-width: 514px) and (max-height: 740px) and (max-device-width: 800px) and (max-device-height: 1024px) and (orientation: portrait), screen and (max-height: 514px) and (max-width: 740px) and (orientation: landscape) {
   /* line 24, ../sass/mobile/_item.scss */
   .items-holder .item.grid-item {
     width: 100%;
     height: 50px; } }
-@media screen and (min-width: 515px) and (max-width: 800px) {
+@media screen and (min-width: 515px) and (max-width: 800px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 800px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-height: 515px) and (max-height: 800px) and (min-width: 741px) and (max-width: 1024px) and (orientation: landscape) {
   /* line 24, ../sass/mobile/_item.scss */
   .items-holder .item.grid-item {
     width: 100%;
     height: 100px; } }
-@media screen and (min-width: 801px) {
+@media screen and (min-width: 801px) and (orientation: portrait), screen and (min-device-width: 801px) and (orientation: portrait), screen and (min-width: 1025px) and (orientation: landscape), screen and (min-device-width: 1025px) and (orientation: landscape) {
   /* line 24, ../sass/mobile/_item.scss */
   .items-holder .item.grid-item {
     width: 200px;
     height: 200px; } }
-@media screen and (max-width: 514px) {
+@media screen and (max-width: 514px) and (max-height: 740px) and (max-device-width: 800px) and (max-device-height: 1024px) and (orientation: portrait), screen and (max-height: 514px) and (max-width: 740px) and (orientation: landscape) {
   /* line 51, ../sass/mobile/_item.scss */
   .items-holder .item.grid-item .bar .item-main {
     display: none; } }
-@media screen and (min-width: 515px) and (max-width: 800px) {
+@media screen and (min-width: 515px) and (max-width: 800px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 800px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-height: 515px) and (max-height: 800px) and (min-width: 741px) and (max-width: 1024px) and (orientation: landscape) {
   /* line 51, ../sass/mobile/_item.scss */
   .items-holder .item.grid-item .bar .item-main {
     display: none; } }
diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index a76e6e9a28..1778fb4848 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -731,24 +731,32 @@ mct-container {
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-@media screen and (max-width: 514px) {
+@media screen and (max-width: 514px) and (max-height: 740px) and (max-device-width: 800px) and (max-device-height: 1024px) and (orientation: portrait), screen and (max-height: 514px) and (max-width: 740px) and (orientation: landscape) {
   /* line 26, ../sass/mobile/_layout.scss */
   .holder-hide {
     -moz-transition-duration: 0.2s;
     -o-transition-duration: 0.2s;
     -webkit-transition-duration: 0.2s;
     transition-duration: 0.2s;
-    left: -82.8%; } }
-@media screen and (min-width: 515px) and (max-width: 800px) {
+    left: -257px; } }
+@media screen and (min-width: 515px) and (max-width: 800px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 800px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-height: 515px) and (max-height: 800px) and (min-width: 741px) and (max-width: 1024px) and (orientation: landscape) {
   /* line 26, ../sass/mobile/_layout.scss */
   .holder-hide {
     -moz-transition-duration: 0.2s;
     -o-transition-duration: 0.2s;
     -webkit-transition-duration: 0.2s;
     transition-duration: 0.2s;
-    left: -38.64%; } }
+    left: -400px; } }
 
-@media screen and (max-width: 800px) {
+@media screen and (max-width: 514px) and (max-height: 740px) and (max-device-width: 800px) and (max-device-height: 1024px) and (orientation: portrait), screen and (max-height: 514px) and (max-width: 740px) and (orientation: landscape) {
+  /* line 37, ../sass/mobile/_layout.scss */
+  .holder-show {
+    -moz-transition-duration: 0.2s;
+    -o-transition-duration: 0.2s;
+    -webkit-transition-duration: 0.2s;
+    transition-duration: 0.2s;
+    left: 0px; } }
+@media screen and (min-width: 515px) and (max-width: 800px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 800px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-height: 515px) and (max-height: 800px) and (min-width: 741px) and (max-width: 1024px) and (orientation: landscape) {
   /* line 37, ../sass/mobile/_layout.scss */
   .holder-show {
     -moz-transition-duration: 0.2s;
@@ -757,77 +765,72 @@ mct-container {
     transition-duration: 0.2s;
     left: 0px; } }
 
-/* line 44, ../sass/mobile/_layout.scss */
+/* line 48, ../sass/mobile/_layout.scss */
 .button-show {
   position: absolute; }
-  @media screen and (max-width: 514px) {
-    /* line 44, ../sass/mobile/_layout.scss */
+  @media screen and (max-width: 514px) and (max-height: 740px) and (max-device-width: 800px) and (max-device-height: 1024px) and (orientation: portrait), screen and (max-height: 514px) and (max-width: 740px) and (orientation: landscape) {
+    /* line 48, ../sass/mobile/_layout.scss */
     .button-show {
       -moz-transition-duration: 0.2s;
       -o-transition-duration: 0.2s;
       -webkit-transition-duration: 0.2s;
       transition-duration: 0.2s;
-      left: 82.8%; } }
-  @media screen and (min-width: 515px) and (max-width: 800px) {
-    /* line 44, ../sass/mobile/_layout.scss */
+      left: 257px; } }
+  @media screen and (min-width: 515px) and (max-width: 800px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 800px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-height: 515px) and (max-height: 800px) and (min-width: 741px) and (max-width: 1024px) and (orientation: landscape) {
+    /* line 48, ../sass/mobile/_layout.scss */
     .button-show {
       -moz-transition-duration: 0.2s;
       -o-transition-duration: 0.2s;
       -webkit-transition-duration: 0.2s;
       transition-duration: 0.2s;
-      left: 38.64%; } }
+      left: 400px; } }
 
-/* line 56, ../sass/mobile/_layout.scss */
+/* line 60, ../sass/mobile/_layout.scss */
 .button-hide {
   position: absolute;
   -moz-transition-duration: 0.2s;
   -o-transition-duration: 0.2s;
   -webkit-transition-duration: 0.2s;
   transition-duration: 0.2s; }
-  @media screen and (max-width: 514px) {
-    /* line 56, ../sass/mobile/_layout.scss */
+  @media screen and (max-width: 514px) and (max-height: 740px) and (max-device-width: 800px) and (max-device-height: 1024px) and (orientation: portrait), screen and (max-height: 514px) and (max-width: 740px) and (orientation: landscape) {
+    /* line 60, ../sass/mobile/_layout.scss */
     .button-hide {
-      left: 46%; } }
-  @media screen and (min-width: 515px) and (max-width: 800px) {
-    /* line 56, ../sass/mobile/_layout.scss */
+      left: 257px; } }
+  @media screen and (min-width: 515px) and (max-width: 800px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 800px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-height: 515px) and (max-height: 800px) and (min-width: 741px) and (max-width: 1024px) and (orientation: landscape) {
+    /* line 60, ../sass/mobile/_layout.scss */
     .button-hide {
-      left: 28%; } }
+      left: 400px; } }
 
-/* line 67, ../sass/mobile/_layout.scss */
+/* line 71, ../sass/mobile/_layout.scss */
 .object-header-mobile {
   position: relative; }
-  @media screen and (max-width: 514px) {
-    /* line 67, ../sass/mobile/_layout.scss */
+  @media screen and (max-width: 514px) and (max-height: 740px) and (max-device-width: 800px) and (max-device-height: 1024px) and (orientation: portrait), screen and (max-height: 514px) and (max-width: 740px) and (orientation: landscape) {
+    /* line 71, ../sass/mobile/_layout.scss */
     .object-header-mobile {
-      left: 4.6%; } }
-  @media screen and (min-width: 515px) and (max-width: 800px) {
-    /* line 67, ../sass/mobile/_layout.scss */
+      left: 25.7px; } }
+  @media screen and (min-width: 515px) and (max-width: 800px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 800px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-height: 515px) and (max-height: 800px) and (min-width: 741px) and (max-width: 1024px) and (orientation: landscape) {
+    /* line 71, ../sass/mobile/_layout.scss */
     .object-header-mobile {
-      left: 2.8%; } }
+      left: 40px; } }
 
-/* line 77, ../sass/mobile/_layout.scss */
+/* line 81, ../sass/mobile/_layout.scss */
 .mobile-menu-icon {
   top: 5px; }
-  @media screen and (min-width: 801px) {
-    /* line 77, ../sass/mobile/_layout.scss */
+  @media screen and (min-width: 801px) and (orientation: portrait), screen and (min-device-width: 801px) and (orientation: portrait), screen and (min-width: 1025px) and (orientation: landscape), screen and (min-device-width: 1025px) and (orientation: landscape) {
+    /* line 81, ../sass/mobile/_layout.scss */
     .mobile-menu-icon {
       display: none; } }
 
-@media screen and (max-width: 800px) {
-  /* line 84, ../sass/mobile/_layout.scss */
-  .exclude-mobile {
-    display: none; } }
-
-@media screen and (max-width: 514px) {
-  /* line 91, ../sass/mobile/_layout.scss */
+@media screen and (max-width: 514px) and (max-height: 740px) and (max-device-width: 800px) and (max-device-height: 1024px) and (orientation: portrait), screen and (max-height: 514px) and (max-width: 740px) and (orientation: landscape) {
+  /* line 88, ../sass/mobile/_layout.scss */
   .browse-manage {
-    width: 46%; } }
-@media screen and (min-width: 515px) and (max-width: 800px) {
-  /* line 91, ../sass/mobile/_layout.scss */
+    width: 257px; } }
+@media screen and (min-width: 515px) and (max-width: 800px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 800px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-height: 515px) and (max-height: 800px) and (min-width: 741px) and (max-width: 1024px) and (orientation: landscape) {
+  /* line 88, ../sass/mobile/_layout.scss */
   .browse-manage {
-    width: 28%; } }
-@media screen and (min-width: 801px) {
-  /* line 91, ../sass/mobile/_layout.scss */
+    width: 400px; } }
+@media screen and (min-width: 801px) and (orientation: portrait), screen and (min-device-width: 801px) and (orientation: portrait), screen and (min-width: 1025px) and (orientation: landscape), screen and (min-device-width: 1025px) and (orientation: landscape) {
+  /* line 88, ../sass/mobile/_layout.scss */
   .browse-manage {
     min-width: 150px;
     max-width: 800px;
diff --git a/platform/commonUI/general/res/sass/mobile/_constants.scss b/platform/commonUI/general/res/sass/mobile/_constants.scss
index f30a6db9c4..2f5ddc08e3 100644
--- a/platform/commonUI/general/res/sass/mobile/_constants.scss
+++ b/platform/commonUI/general/res/sass/mobile/_constants.scss
@@ -22,19 +22,39 @@
 
 /************************** WINDOW DIMENSIONS FOR RWD */
 $phoMaxW: 514px;
-$phoMaxH: 740px;
-    
-$tabMinW: 515px;
-$tabMinH: 741px;
+$phoWidPorCheck: "(max-width: #{$phoMaxW})";
+$phoWidLanCheck: "(max-height: #{$phoMaxW})";
 
+$phoMaxH: 740px;
+$phoHeiPorCheck: "(max-height: #{$phoMaxH})";
+$phoHeiLanCheck: "(max-width: #{$phoMaxH})";
+
+$tabMinW: 515px;
 $tabMaxW: 800px;
-$tabMaxH: 1280px;
+$tabWidPorCheck: "(min-width: #{$tabMinW}) and (max-width: #{$tabMaxW})";
+$tabWidLanCheck: "(min-height: #{$tabMinW}) and (max-height: #{$tabMaxW})";
+
+$tabMinH: 741px;
+$tabMaxH: 1024px;
+$tabHeiPorCheck: "(min-height: #{$tabMinH}) and (max-height: #{$tabMaxH})";
+$tabHeiLanCheck: "(min-width: #{$tabMinH}) and (max-width: #{$tabMaxH})";
+
+$mobileDevice: "(max-device-width: #{$tabMaxW}) and (max-device-height: #{$tabMaxH})";
+
+$phoneWidth: "screen and #{$phoWidPorCheck} and #{$phoHeiPorCheck} and #{$mobileDevice} and (orientation: portrait)";
+$phoneHeight: "screen and #{$phoWidLanCheck} and #{$phoHeiLanCheck} and (orientation: landscape)";
+
+$tabletWidth: "screen and #{$tabWidPorCheck} and #{$tabHeiPorCheck} and #{$mobileDevice} and (orientation: portrait)";
+$tabletHeight: "screen and #{$tabWidLanCheck} and #{$tabHeiLanCheck} and (orientation: landscape)";
 
 $compMinW: 801px;
+$compMinH: 1025px;
 
-$leftPhone: 46%;
-$leftTab: 28%;
+$deskTopDevice: "(min-device-width: #{$compMinW}) and (min-device-height: #{$compMinH})";
 
-$hideRatioPhone: 1.8;
-$hideRatioTab: 1.38;
+$leftPhone: $phoMaxW/2;
+$leftTab: $tabMaxW/2;
+
+$hideRatioPhone: 1;
+$hideRatioTab: 1;
 
diff --git a/platform/commonUI/general/res/sass/mobile/_layout.scss b/platform/commonUI/general/res/sass/mobile/_layout.scss
index 66917440a1..01f4093fcb 100644
--- a/platform/commonUI/general/res/sass/mobile/_layout.scss
+++ b/platform/commonUI/general/res/sass/mobile/_layout.scss
@@ -35,10 +35,14 @@
 }
 
 .holder-show {
-    @include phoneandtablet {
+    @include phone {
         @include transition-duration(.2s);
         left: 0px;
-    }     
+    }
+    @include tablet {
+        @include transition-duration(.2s);
+        left: 0px;
+    }         
 }
 
 .button-show {
@@ -81,13 +85,6 @@
     }       
 }
 
-.exclude-mobile {
-    @include phoneandtablet {
-        display: none;
-    }       
-}
-
-
 .browse-manage {
     @include phone {
         width: $leftPhone;
diff --git a/platform/commonUI/general/res/sass/mobile/_mixins.scss b/platform/commonUI/general/res/sass/mobile/_mixins.scss
index 97de07f14a..f23b8bc1d6 100644
--- a/platform/commonUI/general/res/sass/mobile/_mixins.scss
+++ b/platform/commonUI/general/res/sass/mobile/_mixins.scss
@@ -22,25 +22,31 @@
 
 // NOTE: Mixins for devices
 @mixin phone {
-    @media screen and (max-width: $phoMaxW) {
+    @media #{$phoneWidth},
+           #{$phoneHeight} {
         @content
     }
 }
 
 @mixin tablet {
-    @media screen and (min-width: $tabMinW) and (max-width: $tabMaxW) {
+    @media #{$tabletWidth},
+           #{$tabletHeight} {
         @content
     }
 }
 
-@mixin phoneandtablet {
-    @media screen and (max-width: $tabMaxW) {
-        @content
-    }
-}
+//@mixin phoneandtablet {
+//    @media screen and (max-width: $tabMaxW) and (orientation: portrait),
+//           screen and (max-width: $tabMaxH) and (orientation: landscape) {
+//        @content
+//    }
+//}
 
 @mixin desktop {
-    @media screen and (min-width: $compMinW) {
+    @media screen and (min-width: $compMinW) and (orientation: portrait),
+           screen and (min-device-width: $compMinW) and (orientation: portrait),
+           screen and (min-width: $compMinH) and (orientation: landscape),
+           screen and (min-device-width: $compMinH) and (orientation: landscape) {
         @content
     }
 }

From 4d9dc3624b02acf348d67d8aa812547aa4a2ef4e Mon Sep 17 00:00:00 2001
From: Dave <shivamndave>
Date: Fri, 10 Jul 2015 11:12:09 -0700
Subject: [PATCH 033/209] [Mobile] Items

Item icons disappear now on
tablets and mobile devices.
Adjusted _items.scss to adjust the
icon class display for phones and
tablets.
---
 platform/commonUI/general/res/css/items.css          | 8 ++++----
 platform/commonUI/general/res/sass/mobile/_item.scss | 5 +----
 2 files changed, 5 insertions(+), 8 deletions(-)

diff --git a/platform/commonUI/general/res/css/items.css b/platform/commonUI/general/res/css/items.css
index 27a32a1368..bf0f5094ce 100644
--- a/platform/commonUI/general/res/css/items.css
+++ b/platform/commonUI/general/res/css/items.css
@@ -363,10 +363,10 @@
     width: 200px;
     height: 200px; } }
 @media screen and (max-width: 514px) and (max-height: 740px) and (max-device-width: 800px) and (max-device-height: 1024px) and (orientation: portrait), screen and (max-height: 514px) and (max-width: 740px) and (orientation: landscape) {
-  /* line 51, ../sass/mobile/_item.scss */
-  .items-holder .item.grid-item .bar .item-main {
+  /* line 49, ../sass/mobile/_item.scss */
+  .items-holder .item.grid-item .icon {
     display: none; } }
 @media screen and (min-width: 515px) and (max-width: 800px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 800px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-height: 515px) and (max-height: 800px) and (min-width: 741px) and (max-width: 1024px) and (orientation: landscape) {
-  /* line 51, ../sass/mobile/_item.scss */
-  .items-holder .item.grid-item .bar .item-main {
+  /* line 49, ../sass/mobile/_item.scss */
+  .items-holder .item.grid-item .icon {
     display: none; } }
diff --git a/platform/commonUI/general/res/sass/mobile/_item.scss b/platform/commonUI/general/res/sass/mobile/_item.scss
index 83602b97c1..c6e9deabf5 100644
--- a/platform/commonUI/general/res/sass/mobile/_item.scss
+++ b/platform/commonUI/general/res/sass/mobile/_item.scss
@@ -46,16 +46,13 @@
                 height: $dHei; 
             }
             
-            .bar {
-//            NOTE: make icon disappear
-            .item-main {
+            .icon {
                 @include phone {
                     display: none;
                 }
                 @include tablet {
                     display: none;   
                 }
-                }
             }
         }
     }

From 5c99e469d5bba0b4da59550be4719a12fa687fc9 Mon Sep 17 00:00:00 2001
From: Dave <shivamndave>
Date: Fri, 10 Jul 2015 11:29:30 -0700
Subject: [PATCH 034/209] [Mobile] Device Change

Now instead of min-width, max-width,
... etc, uses the device-width/height.
This allows the devices to use the slide
menu while the browser on a desktop
consistently stays as desktop mode, no
matter if it is resized. As a result of this
the rwd is clear on phones/tablets, but not if
user resizes browser super small.
---
 platform/commonUI/general/res/css/items.css   |  8 +++----
 .../general/res/css/theme-espresso.css        | 24 +++++++++----------
 .../general/res/sass/mobile/_constants.scss   | 24 ++++++++-----------
 3 files changed, 26 insertions(+), 30 deletions(-)

diff --git a/platform/commonUI/general/res/css/items.css b/platform/commonUI/general/res/css/items.css
index bf0f5094ce..0c6173a646 100644
--- a/platform/commonUI/general/res/css/items.css
+++ b/platform/commonUI/general/res/css/items.css
@@ -347,12 +347,12 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-@media screen and (max-width: 514px) and (max-height: 740px) and (max-device-width: 800px) and (max-device-height: 1024px) and (orientation: portrait), screen and (max-height: 514px) and (max-width: 740px) and (orientation: landscape) {
+@media screen and (max-device-width: 514px) and (max-device-height: 740px) and (orientation: portrait), screen and (max-device-height: 514px) and (max-device-width: 740px) and (orientation: landscape) {
   /* line 24, ../sass/mobile/_item.scss */
   .items-holder .item.grid-item {
     width: 100%;
     height: 50px; } }
-@media screen and (min-width: 515px) and (max-width: 800px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 800px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-height: 515px) and (max-height: 800px) and (min-width: 741px) and (max-width: 1024px) and (orientation: landscape) {
+@media screen and (min-device-width: 515px) and (max-device-width: 800px) and (min-device-height: 741px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-device-height: 515px) and (max-device-height: 800px) and (min-device-width: 741px) and (max-device-width: 1024px) and (orientation: landscape) {
   /* line 24, ../sass/mobile/_item.scss */
   .items-holder .item.grid-item {
     width: 100%;
@@ -362,11 +362,11 @@
   .items-holder .item.grid-item {
     width: 200px;
     height: 200px; } }
-@media screen and (max-width: 514px) and (max-height: 740px) and (max-device-width: 800px) and (max-device-height: 1024px) and (orientation: portrait), screen and (max-height: 514px) and (max-width: 740px) and (orientation: landscape) {
+@media screen and (max-device-width: 514px) and (max-device-height: 740px) and (orientation: portrait), screen and (max-device-height: 514px) and (max-device-width: 740px) and (orientation: landscape) {
   /* line 49, ../sass/mobile/_item.scss */
   .items-holder .item.grid-item .icon {
     display: none; } }
-@media screen and (min-width: 515px) and (max-width: 800px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 800px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-height: 515px) and (max-height: 800px) and (min-width: 741px) and (max-width: 1024px) and (orientation: landscape) {
+@media screen and (min-device-width: 515px) and (max-device-width: 800px) and (min-device-height: 741px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-device-height: 515px) and (max-device-height: 800px) and (min-device-width: 741px) and (max-device-width: 1024px) and (orientation: landscape) {
   /* line 49, ../sass/mobile/_item.scss */
   .items-holder .item.grid-item .icon {
     display: none; } }
diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index 1778fb4848..c2e0e022ea 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -731,7 +731,7 @@ mct-container {
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-@media screen and (max-width: 514px) and (max-height: 740px) and (max-device-width: 800px) and (max-device-height: 1024px) and (orientation: portrait), screen and (max-height: 514px) and (max-width: 740px) and (orientation: landscape) {
+@media screen and (max-device-width: 514px) and (max-device-height: 740px) and (orientation: portrait), screen and (max-device-height: 514px) and (max-device-width: 740px) and (orientation: landscape) {
   /* line 26, ../sass/mobile/_layout.scss */
   .holder-hide {
     -moz-transition-duration: 0.2s;
@@ -739,7 +739,7 @@ mct-container {
     -webkit-transition-duration: 0.2s;
     transition-duration: 0.2s;
     left: -257px; } }
-@media screen and (min-width: 515px) and (max-width: 800px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 800px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-height: 515px) and (max-height: 800px) and (min-width: 741px) and (max-width: 1024px) and (orientation: landscape) {
+@media screen and (min-device-width: 515px) and (max-device-width: 800px) and (min-device-height: 741px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-device-height: 515px) and (max-device-height: 800px) and (min-device-width: 741px) and (max-device-width: 1024px) and (orientation: landscape) {
   /* line 26, ../sass/mobile/_layout.scss */
   .holder-hide {
     -moz-transition-duration: 0.2s;
@@ -748,7 +748,7 @@ mct-container {
     transition-duration: 0.2s;
     left: -400px; } }
 
-@media screen and (max-width: 514px) and (max-height: 740px) and (max-device-width: 800px) and (max-device-height: 1024px) and (orientation: portrait), screen and (max-height: 514px) and (max-width: 740px) and (orientation: landscape) {
+@media screen and (max-device-width: 514px) and (max-device-height: 740px) and (orientation: portrait), screen and (max-device-height: 514px) and (max-device-width: 740px) and (orientation: landscape) {
   /* line 37, ../sass/mobile/_layout.scss */
   .holder-show {
     -moz-transition-duration: 0.2s;
@@ -756,7 +756,7 @@ mct-container {
     -webkit-transition-duration: 0.2s;
     transition-duration: 0.2s;
     left: 0px; } }
-@media screen and (min-width: 515px) and (max-width: 800px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 800px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-height: 515px) and (max-height: 800px) and (min-width: 741px) and (max-width: 1024px) and (orientation: landscape) {
+@media screen and (min-device-width: 515px) and (max-device-width: 800px) and (min-device-height: 741px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-device-height: 515px) and (max-device-height: 800px) and (min-device-width: 741px) and (max-device-width: 1024px) and (orientation: landscape) {
   /* line 37, ../sass/mobile/_layout.scss */
   .holder-show {
     -moz-transition-duration: 0.2s;
@@ -768,7 +768,7 @@ mct-container {
 /* line 48, ../sass/mobile/_layout.scss */
 .button-show {
   position: absolute; }
-  @media screen and (max-width: 514px) and (max-height: 740px) and (max-device-width: 800px) and (max-device-height: 1024px) and (orientation: portrait), screen and (max-height: 514px) and (max-width: 740px) and (orientation: landscape) {
+  @media screen and (max-device-width: 514px) and (max-device-height: 740px) and (orientation: portrait), screen and (max-device-height: 514px) and (max-device-width: 740px) and (orientation: landscape) {
     /* line 48, ../sass/mobile/_layout.scss */
     .button-show {
       -moz-transition-duration: 0.2s;
@@ -776,7 +776,7 @@ mct-container {
       -webkit-transition-duration: 0.2s;
       transition-duration: 0.2s;
       left: 257px; } }
-  @media screen and (min-width: 515px) and (max-width: 800px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 800px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-height: 515px) and (max-height: 800px) and (min-width: 741px) and (max-width: 1024px) and (orientation: landscape) {
+  @media screen and (min-device-width: 515px) and (max-device-width: 800px) and (min-device-height: 741px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-device-height: 515px) and (max-device-height: 800px) and (min-device-width: 741px) and (max-device-width: 1024px) and (orientation: landscape) {
     /* line 48, ../sass/mobile/_layout.scss */
     .button-show {
       -moz-transition-duration: 0.2s;
@@ -792,11 +792,11 @@ mct-container {
   -o-transition-duration: 0.2s;
   -webkit-transition-duration: 0.2s;
   transition-duration: 0.2s; }
-  @media screen and (max-width: 514px) and (max-height: 740px) and (max-device-width: 800px) and (max-device-height: 1024px) and (orientation: portrait), screen and (max-height: 514px) and (max-width: 740px) and (orientation: landscape) {
+  @media screen and (max-device-width: 514px) and (max-device-height: 740px) and (orientation: portrait), screen and (max-device-height: 514px) and (max-device-width: 740px) and (orientation: landscape) {
     /* line 60, ../sass/mobile/_layout.scss */
     .button-hide {
       left: 257px; } }
-  @media screen and (min-width: 515px) and (max-width: 800px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 800px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-height: 515px) and (max-height: 800px) and (min-width: 741px) and (max-width: 1024px) and (orientation: landscape) {
+  @media screen and (min-device-width: 515px) and (max-device-width: 800px) and (min-device-height: 741px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-device-height: 515px) and (max-device-height: 800px) and (min-device-width: 741px) and (max-device-width: 1024px) and (orientation: landscape) {
     /* line 60, ../sass/mobile/_layout.scss */
     .button-hide {
       left: 400px; } }
@@ -804,11 +804,11 @@ mct-container {
 /* line 71, ../sass/mobile/_layout.scss */
 .object-header-mobile {
   position: relative; }
-  @media screen and (max-width: 514px) and (max-height: 740px) and (max-device-width: 800px) and (max-device-height: 1024px) and (orientation: portrait), screen and (max-height: 514px) and (max-width: 740px) and (orientation: landscape) {
+  @media screen and (max-device-width: 514px) and (max-device-height: 740px) and (orientation: portrait), screen and (max-device-height: 514px) and (max-device-width: 740px) and (orientation: landscape) {
     /* line 71, ../sass/mobile/_layout.scss */
     .object-header-mobile {
       left: 25.7px; } }
-  @media screen and (min-width: 515px) and (max-width: 800px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 800px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-height: 515px) and (max-height: 800px) and (min-width: 741px) and (max-width: 1024px) and (orientation: landscape) {
+  @media screen and (min-device-width: 515px) and (max-device-width: 800px) and (min-device-height: 741px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-device-height: 515px) and (max-device-height: 800px) and (min-device-width: 741px) and (max-device-width: 1024px) and (orientation: landscape) {
     /* line 71, ../sass/mobile/_layout.scss */
     .object-header-mobile {
       left: 40px; } }
@@ -821,11 +821,11 @@ mct-container {
     .mobile-menu-icon {
       display: none; } }
 
-@media screen and (max-width: 514px) and (max-height: 740px) and (max-device-width: 800px) and (max-device-height: 1024px) and (orientation: portrait), screen and (max-height: 514px) and (max-width: 740px) and (orientation: landscape) {
+@media screen and (max-device-width: 514px) and (max-device-height: 740px) and (orientation: portrait), screen and (max-device-height: 514px) and (max-device-width: 740px) and (orientation: landscape) {
   /* line 88, ../sass/mobile/_layout.scss */
   .browse-manage {
     width: 257px; } }
-@media screen and (min-width: 515px) and (max-width: 800px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 800px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-height: 515px) and (max-height: 800px) and (min-width: 741px) and (max-width: 1024px) and (orientation: landscape) {
+@media screen and (min-device-width: 515px) and (max-device-width: 800px) and (min-device-height: 741px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-device-height: 515px) and (max-device-height: 800px) and (min-device-width: 741px) and (max-device-width: 1024px) and (orientation: landscape) {
   /* line 88, ../sass/mobile/_layout.scss */
   .browse-manage {
     width: 400px; } }
diff --git a/platform/commonUI/general/res/sass/mobile/_constants.scss b/platform/commonUI/general/res/sass/mobile/_constants.scss
index 2f5ddc08e3..40a700e590 100644
--- a/platform/commonUI/general/res/sass/mobile/_constants.scss
+++ b/platform/commonUI/general/res/sass/mobile/_constants.scss
@@ -22,36 +22,32 @@
 
 /************************** WINDOW DIMENSIONS FOR RWD */
 $phoMaxW: 514px;
-$phoWidPorCheck: "(max-width: #{$phoMaxW})";
-$phoWidLanCheck: "(max-height: #{$phoMaxW})";
+$phoWidPorCheck: "(max-device-width: #{$phoMaxW})";
+$phoWidLanCheck: "(max-device-height: #{$phoMaxW})";
 
 $phoMaxH: 740px;
-$phoHeiPorCheck: "(max-height: #{$phoMaxH})";
-$phoHeiLanCheck: "(max-width: #{$phoMaxH})";
+$phoHeiPorCheck: "(max-device-height: #{$phoMaxH})";
+$phoHeiLanCheck: "(max-device-width: #{$phoMaxH})";
 
 $tabMinW: 515px;
 $tabMaxW: 800px;
-$tabWidPorCheck: "(min-width: #{$tabMinW}) and (max-width: #{$tabMaxW})";
-$tabWidLanCheck: "(min-height: #{$tabMinW}) and (max-height: #{$tabMaxW})";
+$tabWidPorCheck: "(min-device-width: #{$tabMinW}) and (max-device-width: #{$tabMaxW})";
+$tabWidLanCheck: "(min-device-height: #{$tabMinW}) and (max-device-height: #{$tabMaxW})";
 
 $tabMinH: 741px;
 $tabMaxH: 1024px;
-$tabHeiPorCheck: "(min-height: #{$tabMinH}) and (max-height: #{$tabMaxH})";
-$tabHeiLanCheck: "(min-width: #{$tabMinH}) and (max-width: #{$tabMaxH})";
+$tabHeiPorCheck: "(min-device-height: #{$tabMinH}) and (max-device-height: #{$tabMaxH})";
+$tabHeiLanCheck: "(min-device-width: #{$tabMinH}) and (max-device-width: #{$tabMaxH})";
 
-$mobileDevice: "(max-device-width: #{$tabMaxW}) and (max-device-height: #{$tabMaxH})";
-
-$phoneWidth: "screen and #{$phoWidPorCheck} and #{$phoHeiPorCheck} and #{$mobileDevice} and (orientation: portrait)";
+$phoneWidth: "screen and #{$phoWidPorCheck} and #{$phoHeiPorCheck} and (orientation: portrait)";
 $phoneHeight: "screen and #{$phoWidLanCheck} and #{$phoHeiLanCheck} and (orientation: landscape)";
 
-$tabletWidth: "screen and #{$tabWidPorCheck} and #{$tabHeiPorCheck} and #{$mobileDevice} and (orientation: portrait)";
+$tabletWidth: "screen and #{$tabWidPorCheck} and #{$tabHeiPorCheck} and (orientation: portrait)";
 $tabletHeight: "screen and #{$tabWidLanCheck} and #{$tabHeiLanCheck} and (orientation: landscape)";
 
 $compMinW: 801px;
 $compMinH: 1025px;
 
-$deskTopDevice: "(min-device-width: #{$compMinW}) and (min-device-height: #{$compMinH})";
-
 $leftPhone: $phoMaxW/2;
 $leftTab: $tabMaxW/2;
 

From 9caa603a65f5083ab4288861732751066e124be8 Mon Sep 17 00:00:00 2001
From: Dave <shivamndave>
Date: Fri, 10 Jul 2015 11:36:45 -0700
Subject: [PATCH 035/209] [Mobile] Device

Removes desktop mixin settings
that do not use device width and
height.
---
 platform/commonUI/general/res/css/items.css            | 2 +-
 platform/commonUI/general/res/css/theme-espresso.css   | 4 ++--
 platform/commonUI/general/res/sass/mobile/_mixins.scss | 4 +---
 3 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/platform/commonUI/general/res/css/items.css b/platform/commonUI/general/res/css/items.css
index 0c6173a646..b8dfaaa49c 100644
--- a/platform/commonUI/general/res/css/items.css
+++ b/platform/commonUI/general/res/css/items.css
@@ -357,7 +357,7 @@
   .items-holder .item.grid-item {
     width: 100%;
     height: 100px; } }
-@media screen and (min-width: 801px) and (orientation: portrait), screen and (min-device-width: 801px) and (orientation: portrait), screen and (min-width: 1025px) and (orientation: landscape), screen and (min-device-width: 1025px) and (orientation: landscape) {
+@media screen and (min-device-width: 801px) and (orientation: portrait), screen and (min-device-width: 1025px) and (orientation: landscape) {
   /* line 24, ../sass/mobile/_item.scss */
   .items-holder .item.grid-item {
     width: 200px;
diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index c2e0e022ea..1bbefa9d99 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -816,7 +816,7 @@ mct-container {
 /* line 81, ../sass/mobile/_layout.scss */
 .mobile-menu-icon {
   top: 5px; }
-  @media screen and (min-width: 801px) and (orientation: portrait), screen and (min-device-width: 801px) and (orientation: portrait), screen and (min-width: 1025px) and (orientation: landscape), screen and (min-device-width: 1025px) and (orientation: landscape) {
+  @media screen and (min-device-width: 801px) and (orientation: portrait), screen and (min-device-width: 1025px) and (orientation: landscape) {
     /* line 81, ../sass/mobile/_layout.scss */
     .mobile-menu-icon {
       display: none; } }
@@ -829,7 +829,7 @@ mct-container {
   /* line 88, ../sass/mobile/_layout.scss */
   .browse-manage {
     width: 400px; } }
-@media screen and (min-width: 801px) and (orientation: portrait), screen and (min-device-width: 801px) and (orientation: portrait), screen and (min-width: 1025px) and (orientation: landscape), screen and (min-device-width: 1025px) and (orientation: landscape) {
+@media screen and (min-device-width: 801px) and (orientation: portrait), screen and (min-device-width: 1025px) and (orientation: landscape) {
   /* line 88, ../sass/mobile/_layout.scss */
   .browse-manage {
     min-width: 150px;
diff --git a/platform/commonUI/general/res/sass/mobile/_mixins.scss b/platform/commonUI/general/res/sass/mobile/_mixins.scss
index f23b8bc1d6..3da04ae647 100644
--- a/platform/commonUI/general/res/sass/mobile/_mixins.scss
+++ b/platform/commonUI/general/res/sass/mobile/_mixins.scss
@@ -43,9 +43,7 @@
 //}
 
 @mixin desktop {
-    @media screen and (min-width: $compMinW) and (orientation: portrait),
-           screen and (min-device-width: $compMinW) and (orientation: portrait),
-           screen and (min-width: $compMinH) and (orientation: landscape),
+    @media screen and (min-device-width: $compMinW) and (orientation: portrait),
            screen and (min-device-width: $compMinH) and (orientation: landscape) {
         @content
     }

From 61e1aeb1d8e9458e05e853beed91ea59fdbd00bb Mon Sep 17 00:00:00 2001
From: Dave <shivamndave>
Date: Fri, 10 Jul 2015 11:40:14 -0700
Subject: [PATCH 036/209] [Mobile] Device

Removes desktop mixin settings
that do not use device width and
height.
---
 platform/commonUI/general/res/sass/mobile/_constants.scss | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/platform/commonUI/general/res/sass/mobile/_constants.scss b/platform/commonUI/general/res/sass/mobile/_constants.scss
index 40a700e590..19d4da8436 100644
--- a/platform/commonUI/general/res/sass/mobile/_constants.scss
+++ b/platform/commonUI/general/res/sass/mobile/_constants.scss
@@ -48,6 +48,8 @@ $tabletHeight: "screen and #{$tabWidLanCheck} and #{$tabHeiLanCheck} and (orient
 $compMinW: 801px;
 $compMinH: 1025px;
 
+$compBoth: "screen and (min-device-width: #{$compMinW}) and (min-device-height: #{$compMinH})";
+
 $leftPhone: $phoMaxW/2;
 $leftTab: $tabMaxW/2;
 

From 4d4776e0effc7e78799559b6df736f7e65dc90d2 Mon Sep 17 00:00:00 2001
From: Dave <shivamndave>
Date: Fri, 10 Jul 2015 11:40:57 -0700
Subject: [PATCH 037/209] [Mobile] Device

Removes desktop mixin settings
that do not use device width and
height.
---
 platform/commonUI/general/res/css/items.css            | 2 +-
 platform/commonUI/general/res/css/theme-espresso.css   | 4 ++--
 platform/commonUI/general/res/sass/mobile/_mixins.scss | 3 +--
 3 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/platform/commonUI/general/res/css/items.css b/platform/commonUI/general/res/css/items.css
index b8dfaaa49c..c8554d2cde 100644
--- a/platform/commonUI/general/res/css/items.css
+++ b/platform/commonUI/general/res/css/items.css
@@ -357,7 +357,7 @@
   .items-holder .item.grid-item {
     width: 100%;
     height: 100px; } }
-@media screen and (min-device-width: 801px) and (orientation: portrait), screen and (min-device-width: 1025px) and (orientation: landscape) {
+@media screen and (min-device-width: 801px) and (min-device-height: 1025px) {
   /* line 24, ../sass/mobile/_item.scss */
   .items-holder .item.grid-item {
     width: 200px;
diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index 1bbefa9d99..22c31be4de 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -816,7 +816,7 @@ mct-container {
 /* line 81, ../sass/mobile/_layout.scss */
 .mobile-menu-icon {
   top: 5px; }
-  @media screen and (min-device-width: 801px) and (orientation: portrait), screen and (min-device-width: 1025px) and (orientation: landscape) {
+  @media screen and (min-device-width: 801px) and (min-device-height: 1025px) {
     /* line 81, ../sass/mobile/_layout.scss */
     .mobile-menu-icon {
       display: none; } }
@@ -829,7 +829,7 @@ mct-container {
   /* line 88, ../sass/mobile/_layout.scss */
   .browse-manage {
     width: 400px; } }
-@media screen and (min-device-width: 801px) and (orientation: portrait), screen and (min-device-width: 1025px) and (orientation: landscape) {
+@media screen and (min-device-width: 801px) and (min-device-height: 1025px) {
   /* line 88, ../sass/mobile/_layout.scss */
   .browse-manage {
     min-width: 150px;
diff --git a/platform/commonUI/general/res/sass/mobile/_mixins.scss b/platform/commonUI/general/res/sass/mobile/_mixins.scss
index 3da04ae647..1ca3a43851 100644
--- a/platform/commonUI/general/res/sass/mobile/_mixins.scss
+++ b/platform/commonUI/general/res/sass/mobile/_mixins.scss
@@ -43,8 +43,7 @@
 //}
 
 @mixin desktop {
-    @media screen and (min-device-width: $compMinW) and (orientation: portrait),
-           screen and (min-device-width: $compMinH) and (orientation: landscape) {
+    @media #{$compBoth} {
         @content
     }
 }

From b0c5d807e72a7c615ca49965927342865da19edb Mon Sep 17 00:00:00 2001
From: Dave <shivamndave>
Date: Fri, 10 Jul 2015 11:51:56 -0700
Subject: [PATCH 038/209] [Mobile] Device

Removes splits desktop
settings into 2, one
for landscape and another
for portrait.
---
 platform/commonUI/general/res/css/items.css    |  2 +-
 .../general/res/css/theme-espresso.css         |  4 ++--
 .../general/res/sass/mobile/_constants.scss    | 18 +++++++++++++++---
 .../general/res/sass/mobile/_mixins.scss       |  3 ++-
 4 files changed, 20 insertions(+), 7 deletions(-)

diff --git a/platform/commonUI/general/res/css/items.css b/platform/commonUI/general/res/css/items.css
index c8554d2cde..6ad915844f 100644
--- a/platform/commonUI/general/res/css/items.css
+++ b/platform/commonUI/general/res/css/items.css
@@ -357,7 +357,7 @@
   .items-holder .item.grid-item {
     width: 100%;
     height: 100px; } }
-@media screen and (min-device-width: 801px) and (min-device-height: 1025px) {
+@media screen and (min-device-width: 801px) and (min-device-height: 1025px) and (orientation: portrait), screen and (min-device-height: 801px) and (min-device-width: 1025px) and (orientation: landscape) {
   /* line 24, ../sass/mobile/_item.scss */
   .items-holder .item.grid-item {
     width: 200px;
diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index 22c31be4de..da94f6e1ab 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -816,7 +816,7 @@ mct-container {
 /* line 81, ../sass/mobile/_layout.scss */
 .mobile-menu-icon {
   top: 5px; }
-  @media screen and (min-device-width: 801px) and (min-device-height: 1025px) {
+  @media screen and (min-device-width: 801px) and (min-device-height: 1025px) and (orientation: portrait), screen and (min-device-height: 801px) and (min-device-width: 1025px) and (orientation: landscape) {
     /* line 81, ../sass/mobile/_layout.scss */
     .mobile-menu-icon {
       display: none; } }
@@ -829,7 +829,7 @@ mct-container {
   /* line 88, ../sass/mobile/_layout.scss */
   .browse-manage {
     width: 400px; } }
-@media screen and (min-device-width: 801px) and (min-device-height: 1025px) {
+@media screen and (min-device-width: 801px) and (min-device-height: 1025px) and (orientation: portrait), screen and (min-device-height: 801px) and (min-device-width: 1025px) and (orientation: landscape) {
   /* line 88, ../sass/mobile/_layout.scss */
   .browse-manage {
     min-width: 150px;
diff --git a/platform/commonUI/general/res/sass/mobile/_constants.scss b/platform/commonUI/general/res/sass/mobile/_constants.scss
index 19d4da8436..cdaa5c1836 100644
--- a/platform/commonUI/general/res/sass/mobile/_constants.scss
+++ b/platform/commonUI/general/res/sass/mobile/_constants.scss
@@ -42,13 +42,25 @@ $tabHeiLanCheck: "(min-device-width: #{$tabMinH}) and (max-device-width: #{$tabM
 $phoneWidth: "screen and #{$phoWidPorCheck} and #{$phoHeiPorCheck} and (orientation: portrait)";
 $phoneHeight: "screen and #{$phoWidLanCheck} and #{$phoHeiLanCheck} and (orientation: landscape)";
 
+//$phoneBoth: "screen and #{$phoWidPorCheck} and #{$phoHeiPorCheck}";
+
 $tabletWidth: "screen and #{$tabWidPorCheck} and #{$tabHeiPorCheck} and (orientation: portrait)";
 $tabletHeight: "screen and #{$tabWidLanCheck} and #{$tabHeiLanCheck} and (orientation: landscape)";
 
-$compMinW: 801px;
-$compMinH: 1025px;
+//$tabletBoth: "screen and #{$tabWidPorCheck} and #{$tabHeiPorCheck} and (orientation: portrait)";
 
-$compBoth: "screen and (min-device-width: #{$compMinW}) and (min-device-height: #{$compMinH})";
+$compMinW: 801px;
+$compWidPorCheck: "(min-device-width: #{$compMinW})";
+$compWidLanCheck: "(min-device-height: #{$compMinW})";
+
+$compMinH: 1025px;
+$compHeiPorCheck: "(min-device-height: #{$compMinH})";
+$compHeiLanCheck: "(min-device-width: #{$compMinH})";
+
+$compWidth: "screen and #{$compWidPorCheck} and #{$compHeiPorCheck} and (orientation: portrait)";
+$compHeight: "screen and #{$compWidLanCheck} and #{$compHeiLanCheck} and (orientation: landscape)";
+
+//$compBoth: "screen and (min-device-width: #{$compMinW}) and (min-device-height: #{$compMinH})";
 
 $leftPhone: $phoMaxW/2;
 $leftTab: $tabMaxW/2;
diff --git a/platform/commonUI/general/res/sass/mobile/_mixins.scss b/platform/commonUI/general/res/sass/mobile/_mixins.scss
index 1ca3a43851..58127a0c14 100644
--- a/platform/commonUI/general/res/sass/mobile/_mixins.scss
+++ b/platform/commonUI/general/res/sass/mobile/_mixins.scss
@@ -43,7 +43,8 @@
 //}
 
 @mixin desktop {
-    @media #{$compBoth} {
+    @media #{$compWidth},
+           #{$compHeight} {
         @content
     }
 }

From b7b5f87002fa5664ce15f88f824e52ecbd624ba4 Mon Sep 17 00:00:00 2001
From: Dave <shivamndave>
Date: Fri, 10 Jul 2015 12:16:43 -0700
Subject: [PATCH 039/209] [Mobile] Device

Adjusted Comp Constant.
---
 platform/commonUI/general/res/css/items.css   |  6 ++---
 .../general/res/css/theme-espresso.css        | 26 +++++++++----------
 .../general/res/sass/mobile/_constants.scss   |  4 +--
 3 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/platform/commonUI/general/res/css/items.css b/platform/commonUI/general/res/css/items.css
index 6ad915844f..0951ef0d3c 100644
--- a/platform/commonUI/general/res/css/items.css
+++ b/platform/commonUI/general/res/css/items.css
@@ -352,12 +352,12 @@
   .items-holder .item.grid-item {
     width: 100%;
     height: 50px; } }
-@media screen and (min-device-width: 515px) and (max-device-width: 800px) and (min-device-height: 741px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-device-height: 515px) and (max-device-height: 800px) and (min-device-width: 741px) and (max-device-width: 1024px) and (orientation: landscape) {
+@media screen and (min-device-width: 515px) and (max-device-width: 799px) and (min-device-height: 741px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-device-height: 515px) and (max-device-height: 799px) and (min-device-width: 741px) and (max-device-width: 1024px) and (orientation: landscape) {
   /* line 24, ../sass/mobile/_item.scss */
   .items-holder .item.grid-item {
     width: 100%;
     height: 100px; } }
-@media screen and (min-device-width: 801px) and (min-device-height: 1025px) and (orientation: portrait), screen and (min-device-height: 801px) and (min-device-width: 1025px) and (orientation: landscape) {
+@media screen and (min-device-width: 800px) and (min-device-height: 1025px) and (orientation: portrait), screen and (min-device-height: 800px) and (min-device-width: 1025px) and (orientation: landscape) {
   /* line 24, ../sass/mobile/_item.scss */
   .items-holder .item.grid-item {
     width: 200px;
@@ -366,7 +366,7 @@
   /* line 49, ../sass/mobile/_item.scss */
   .items-holder .item.grid-item .icon {
     display: none; } }
-@media screen and (min-device-width: 515px) and (max-device-width: 800px) and (min-device-height: 741px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-device-height: 515px) and (max-device-height: 800px) and (min-device-width: 741px) and (max-device-width: 1024px) and (orientation: landscape) {
+@media screen and (min-device-width: 515px) and (max-device-width: 799px) and (min-device-height: 741px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-device-height: 515px) and (max-device-height: 799px) and (min-device-width: 741px) and (max-device-width: 1024px) and (orientation: landscape) {
   /* line 49, ../sass/mobile/_item.scss */
   .items-holder .item.grid-item .icon {
     display: none; } }
diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index da94f6e1ab..3a20d43ec3 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -739,14 +739,14 @@ mct-container {
     -webkit-transition-duration: 0.2s;
     transition-duration: 0.2s;
     left: -257px; } }
-@media screen and (min-device-width: 515px) and (max-device-width: 800px) and (min-device-height: 741px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-device-height: 515px) and (max-device-height: 800px) and (min-device-width: 741px) and (max-device-width: 1024px) and (orientation: landscape) {
+@media screen and (min-device-width: 515px) and (max-device-width: 799px) and (min-device-height: 741px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-device-height: 515px) and (max-device-height: 799px) and (min-device-width: 741px) and (max-device-width: 1024px) and (orientation: landscape) {
   /* line 26, ../sass/mobile/_layout.scss */
   .holder-hide {
     -moz-transition-duration: 0.2s;
     -o-transition-duration: 0.2s;
     -webkit-transition-duration: 0.2s;
     transition-duration: 0.2s;
-    left: -400px; } }
+    left: -399.5px; } }
 
 @media screen and (max-device-width: 514px) and (max-device-height: 740px) and (orientation: portrait), screen and (max-device-height: 514px) and (max-device-width: 740px) and (orientation: landscape) {
   /* line 37, ../sass/mobile/_layout.scss */
@@ -756,7 +756,7 @@ mct-container {
     -webkit-transition-duration: 0.2s;
     transition-duration: 0.2s;
     left: 0px; } }
-@media screen and (min-device-width: 515px) and (max-device-width: 800px) and (min-device-height: 741px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-device-height: 515px) and (max-device-height: 800px) and (min-device-width: 741px) and (max-device-width: 1024px) and (orientation: landscape) {
+@media screen and (min-device-width: 515px) and (max-device-width: 799px) and (min-device-height: 741px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-device-height: 515px) and (max-device-height: 799px) and (min-device-width: 741px) and (max-device-width: 1024px) and (orientation: landscape) {
   /* line 37, ../sass/mobile/_layout.scss */
   .holder-show {
     -moz-transition-duration: 0.2s;
@@ -776,14 +776,14 @@ mct-container {
       -webkit-transition-duration: 0.2s;
       transition-duration: 0.2s;
       left: 257px; } }
-  @media screen and (min-device-width: 515px) and (max-device-width: 800px) and (min-device-height: 741px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-device-height: 515px) and (max-device-height: 800px) and (min-device-width: 741px) and (max-device-width: 1024px) and (orientation: landscape) {
+  @media screen and (min-device-width: 515px) and (max-device-width: 799px) and (min-device-height: 741px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-device-height: 515px) and (max-device-height: 799px) and (min-device-width: 741px) and (max-device-width: 1024px) and (orientation: landscape) {
     /* line 48, ../sass/mobile/_layout.scss */
     .button-show {
       -moz-transition-duration: 0.2s;
       -o-transition-duration: 0.2s;
       -webkit-transition-duration: 0.2s;
       transition-duration: 0.2s;
-      left: 400px; } }
+      left: 399.5px; } }
 
 /* line 60, ../sass/mobile/_layout.scss */
 .button-hide {
@@ -796,10 +796,10 @@ mct-container {
     /* line 60, ../sass/mobile/_layout.scss */
     .button-hide {
       left: 257px; } }
-  @media screen and (min-device-width: 515px) and (max-device-width: 800px) and (min-device-height: 741px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-device-height: 515px) and (max-device-height: 800px) and (min-device-width: 741px) and (max-device-width: 1024px) and (orientation: landscape) {
+  @media screen and (min-device-width: 515px) and (max-device-width: 799px) and (min-device-height: 741px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-device-height: 515px) and (max-device-height: 799px) and (min-device-width: 741px) and (max-device-width: 1024px) and (orientation: landscape) {
     /* line 60, ../sass/mobile/_layout.scss */
     .button-hide {
-      left: 400px; } }
+      left: 399.5px; } }
 
 /* line 71, ../sass/mobile/_layout.scss */
 .object-header-mobile {
@@ -808,15 +808,15 @@ mct-container {
     /* line 71, ../sass/mobile/_layout.scss */
     .object-header-mobile {
       left: 25.7px; } }
-  @media screen and (min-device-width: 515px) and (max-device-width: 800px) and (min-device-height: 741px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-device-height: 515px) and (max-device-height: 800px) and (min-device-width: 741px) and (max-device-width: 1024px) and (orientation: landscape) {
+  @media screen and (min-device-width: 515px) and (max-device-width: 799px) and (min-device-height: 741px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-device-height: 515px) and (max-device-height: 799px) and (min-device-width: 741px) and (max-device-width: 1024px) and (orientation: landscape) {
     /* line 71, ../sass/mobile/_layout.scss */
     .object-header-mobile {
-      left: 40px; } }
+      left: 39.95px; } }
 
 /* line 81, ../sass/mobile/_layout.scss */
 .mobile-menu-icon {
   top: 5px; }
-  @media screen and (min-device-width: 801px) and (min-device-height: 1025px) and (orientation: portrait), screen and (min-device-height: 801px) and (min-device-width: 1025px) and (orientation: landscape) {
+  @media screen and (min-device-width: 800px) and (min-device-height: 1025px) and (orientation: portrait), screen and (min-device-height: 800px) and (min-device-width: 1025px) and (orientation: landscape) {
     /* line 81, ../sass/mobile/_layout.scss */
     .mobile-menu-icon {
       display: none; } }
@@ -825,11 +825,11 @@ mct-container {
   /* line 88, ../sass/mobile/_layout.scss */
   .browse-manage {
     width: 257px; } }
-@media screen and (min-device-width: 515px) and (max-device-width: 800px) and (min-device-height: 741px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-device-height: 515px) and (max-device-height: 800px) and (min-device-width: 741px) and (max-device-width: 1024px) and (orientation: landscape) {
+@media screen and (min-device-width: 515px) and (max-device-width: 799px) and (min-device-height: 741px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-device-height: 515px) and (max-device-height: 799px) and (min-device-width: 741px) and (max-device-width: 1024px) and (orientation: landscape) {
   /* line 88, ../sass/mobile/_layout.scss */
   .browse-manage {
-    width: 400px; } }
-@media screen and (min-device-width: 801px) and (min-device-height: 1025px) and (orientation: portrait), screen and (min-device-height: 801px) and (min-device-width: 1025px) and (orientation: landscape) {
+    width: 399.5px; } }
+@media screen and (min-device-width: 800px) and (min-device-height: 1025px) and (orientation: portrait), screen and (min-device-height: 800px) and (min-device-width: 1025px) and (orientation: landscape) {
   /* line 88, ../sass/mobile/_layout.scss */
   .browse-manage {
     min-width: 150px;
diff --git a/platform/commonUI/general/res/sass/mobile/_constants.scss b/platform/commonUI/general/res/sass/mobile/_constants.scss
index cdaa5c1836..bd79c2c5d6 100644
--- a/platform/commonUI/general/res/sass/mobile/_constants.scss
+++ b/platform/commonUI/general/res/sass/mobile/_constants.scss
@@ -30,7 +30,7 @@ $phoHeiPorCheck: "(max-device-height: #{$phoMaxH})";
 $phoHeiLanCheck: "(max-device-width: #{$phoMaxH})";
 
 $tabMinW: 515px;
-$tabMaxW: 800px;
+$tabMaxW: 799px;
 $tabWidPorCheck: "(min-device-width: #{$tabMinW}) and (max-device-width: #{$tabMaxW})";
 $tabWidLanCheck: "(min-device-height: #{$tabMinW}) and (max-device-height: #{$tabMaxW})";
 
@@ -49,7 +49,7 @@ $tabletHeight: "screen and #{$tabWidLanCheck} and #{$tabHeiLanCheck} and (orient
 
 //$tabletBoth: "screen and #{$tabWidPorCheck} and #{$tabHeiPorCheck} and (orientation: portrait)";
 
-$compMinW: 801px;
+$compMinW: 800px;
 $compWidPorCheck: "(min-device-width: #{$compMinW})";
 $compWidLanCheck: "(min-device-height: #{$compMinW})";
 

From 85c6bda5c91dc35358ba8e753a9f5b7a7ebbb016 Mon Sep 17 00:00:00 2001
From: Dave <shivamndave>
Date: Fri, 10 Jul 2015 12:21:13 -0700
Subject: [PATCH 040/209] [Mobile] Device

Adjusted Tablet slide Constant.
---
 platform/commonUI/general/res/css/theme-espresso.css   | 10 +++++-----
 .../commonUI/general/res/sass/mobile/_constants.scss   |  2 +-
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index 3a20d43ec3..cb399eb04c 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -746,7 +746,7 @@ mct-container {
     -o-transition-duration: 0.2s;
     -webkit-transition-duration: 0.2s;
     transition-duration: 0.2s;
-    left: -399.5px; } }
+    left: -512px; } }
 
 @media screen and (max-device-width: 514px) and (max-device-height: 740px) and (orientation: portrait), screen and (max-device-height: 514px) and (max-device-width: 740px) and (orientation: landscape) {
   /* line 37, ../sass/mobile/_layout.scss */
@@ -783,7 +783,7 @@ mct-container {
       -o-transition-duration: 0.2s;
       -webkit-transition-duration: 0.2s;
       transition-duration: 0.2s;
-      left: 399.5px; } }
+      left: 512px; } }
 
 /* line 60, ../sass/mobile/_layout.scss */
 .button-hide {
@@ -799,7 +799,7 @@ mct-container {
   @media screen and (min-device-width: 515px) and (max-device-width: 799px) and (min-device-height: 741px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-device-height: 515px) and (max-device-height: 799px) and (min-device-width: 741px) and (max-device-width: 1024px) and (orientation: landscape) {
     /* line 60, ../sass/mobile/_layout.scss */
     .button-hide {
-      left: 399.5px; } }
+      left: 512px; } }
 
 /* line 71, ../sass/mobile/_layout.scss */
 .object-header-mobile {
@@ -811,7 +811,7 @@ mct-container {
   @media screen and (min-device-width: 515px) and (max-device-width: 799px) and (min-device-height: 741px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-device-height: 515px) and (max-device-height: 799px) and (min-device-width: 741px) and (max-device-width: 1024px) and (orientation: landscape) {
     /* line 71, ../sass/mobile/_layout.scss */
     .object-header-mobile {
-      left: 39.95px; } }
+      left: 51.2px; } }
 
 /* line 81, ../sass/mobile/_layout.scss */
 .mobile-menu-icon {
@@ -828,7 +828,7 @@ mct-container {
 @media screen and (min-device-width: 515px) and (max-device-width: 799px) and (min-device-height: 741px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-device-height: 515px) and (max-device-height: 799px) and (min-device-width: 741px) and (max-device-width: 1024px) and (orientation: landscape) {
   /* line 88, ../sass/mobile/_layout.scss */
   .browse-manage {
-    width: 399.5px; } }
+    width: 512px; } }
 @media screen and (min-device-width: 800px) and (min-device-height: 1025px) and (orientation: portrait), screen and (min-device-height: 800px) and (min-device-width: 1025px) and (orientation: landscape) {
   /* line 88, ../sass/mobile/_layout.scss */
   .browse-manage {
diff --git a/platform/commonUI/general/res/sass/mobile/_constants.scss b/platform/commonUI/general/res/sass/mobile/_constants.scss
index bd79c2c5d6..6e3d4f5fd7 100644
--- a/platform/commonUI/general/res/sass/mobile/_constants.scss
+++ b/platform/commonUI/general/res/sass/mobile/_constants.scss
@@ -63,7 +63,7 @@ $compHeight: "screen and #{$compWidLanCheck} and #{$compHeiLanCheck} and (orient
 //$compBoth: "screen and (min-device-width: #{$compMinW}) and (min-device-height: #{$compMinH})";
 
 $leftPhone: $phoMaxW/2;
-$leftTab: $tabMaxW/2;
+$leftTab: $tabMaxH/2;
 
 $hideRatioPhone: 1;
 $hideRatioTab: 1;

From dd457f26c6b20577bf7174e6f63c7e54d699e371 Mon Sep 17 00:00:00 2001
From: Dave <shivamndave>
Date: Fri, 10 Jul 2015 12:32:34 -0700
Subject: [PATCH 041/209] [Mobile] Device

Added max width to tablet check.
---
 platform/commonUI/general/res/css/items.css          |  4 ++--
 platform/commonUI/general/res/css/theme-espresso.css | 12 ++++++------
 .../commonUI/general/res/sass/mobile/_constants.scss |  2 +-
 3 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/platform/commonUI/general/res/css/items.css b/platform/commonUI/general/res/css/items.css
index 0951ef0d3c..8ca1234189 100644
--- a/platform/commonUI/general/res/css/items.css
+++ b/platform/commonUI/general/res/css/items.css
@@ -352,7 +352,7 @@
   .items-holder .item.grid-item {
     width: 100%;
     height: 50px; } }
-@media screen and (min-device-width: 515px) and (max-device-width: 799px) and (min-device-height: 741px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-device-height: 515px) and (max-device-height: 799px) and (min-device-width: 741px) and (max-device-width: 1024px) and (orientation: landscape) {
+@media screen and (min-device-width: 515px) and (max-device-width: 799px) and (min-device-height: 741px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-device-height: 515px) and (max-device-height: 799px) and (min-device-width: 741px) and (max-device-width: 1024px) and (max-width: 1024px) and (orientation: landscape) {
   /* line 24, ../sass/mobile/_item.scss */
   .items-holder .item.grid-item {
     width: 100%;
@@ -366,7 +366,7 @@
   /* line 49, ../sass/mobile/_item.scss */
   .items-holder .item.grid-item .icon {
     display: none; } }
-@media screen and (min-device-width: 515px) and (max-device-width: 799px) and (min-device-height: 741px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-device-height: 515px) and (max-device-height: 799px) and (min-device-width: 741px) and (max-device-width: 1024px) and (orientation: landscape) {
+@media screen and (min-device-width: 515px) and (max-device-width: 799px) and (min-device-height: 741px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-device-height: 515px) and (max-device-height: 799px) and (min-device-width: 741px) and (max-device-width: 1024px) and (max-width: 1024px) and (orientation: landscape) {
   /* line 49, ../sass/mobile/_item.scss */
   .items-holder .item.grid-item .icon {
     display: none; } }
diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index cb399eb04c..6a3638f243 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -739,7 +739,7 @@ mct-container {
     -webkit-transition-duration: 0.2s;
     transition-duration: 0.2s;
     left: -257px; } }
-@media screen and (min-device-width: 515px) and (max-device-width: 799px) and (min-device-height: 741px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-device-height: 515px) and (max-device-height: 799px) and (min-device-width: 741px) and (max-device-width: 1024px) and (orientation: landscape) {
+@media screen and (min-device-width: 515px) and (max-device-width: 799px) and (min-device-height: 741px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-device-height: 515px) and (max-device-height: 799px) and (min-device-width: 741px) and (max-device-width: 1024px) and (max-width: 1024px) and (orientation: landscape) {
   /* line 26, ../sass/mobile/_layout.scss */
   .holder-hide {
     -moz-transition-duration: 0.2s;
@@ -756,7 +756,7 @@ mct-container {
     -webkit-transition-duration: 0.2s;
     transition-duration: 0.2s;
     left: 0px; } }
-@media screen and (min-device-width: 515px) and (max-device-width: 799px) and (min-device-height: 741px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-device-height: 515px) and (max-device-height: 799px) and (min-device-width: 741px) and (max-device-width: 1024px) and (orientation: landscape) {
+@media screen and (min-device-width: 515px) and (max-device-width: 799px) and (min-device-height: 741px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-device-height: 515px) and (max-device-height: 799px) and (min-device-width: 741px) and (max-device-width: 1024px) and (max-width: 1024px) and (orientation: landscape) {
   /* line 37, ../sass/mobile/_layout.scss */
   .holder-show {
     -moz-transition-duration: 0.2s;
@@ -776,7 +776,7 @@ mct-container {
       -webkit-transition-duration: 0.2s;
       transition-duration: 0.2s;
       left: 257px; } }
-  @media screen and (min-device-width: 515px) and (max-device-width: 799px) and (min-device-height: 741px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-device-height: 515px) and (max-device-height: 799px) and (min-device-width: 741px) and (max-device-width: 1024px) and (orientation: landscape) {
+  @media screen and (min-device-width: 515px) and (max-device-width: 799px) and (min-device-height: 741px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-device-height: 515px) and (max-device-height: 799px) and (min-device-width: 741px) and (max-device-width: 1024px) and (max-width: 1024px) and (orientation: landscape) {
     /* line 48, ../sass/mobile/_layout.scss */
     .button-show {
       -moz-transition-duration: 0.2s;
@@ -796,7 +796,7 @@ mct-container {
     /* line 60, ../sass/mobile/_layout.scss */
     .button-hide {
       left: 257px; } }
-  @media screen and (min-device-width: 515px) and (max-device-width: 799px) and (min-device-height: 741px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-device-height: 515px) and (max-device-height: 799px) and (min-device-width: 741px) and (max-device-width: 1024px) and (orientation: landscape) {
+  @media screen and (min-device-width: 515px) and (max-device-width: 799px) and (min-device-height: 741px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-device-height: 515px) and (max-device-height: 799px) and (min-device-width: 741px) and (max-device-width: 1024px) and (max-width: 1024px) and (orientation: landscape) {
     /* line 60, ../sass/mobile/_layout.scss */
     .button-hide {
       left: 512px; } }
@@ -808,7 +808,7 @@ mct-container {
     /* line 71, ../sass/mobile/_layout.scss */
     .object-header-mobile {
       left: 25.7px; } }
-  @media screen and (min-device-width: 515px) and (max-device-width: 799px) and (min-device-height: 741px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-device-height: 515px) and (max-device-height: 799px) and (min-device-width: 741px) and (max-device-width: 1024px) and (orientation: landscape) {
+  @media screen and (min-device-width: 515px) and (max-device-width: 799px) and (min-device-height: 741px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-device-height: 515px) and (max-device-height: 799px) and (min-device-width: 741px) and (max-device-width: 1024px) and (max-width: 1024px) and (orientation: landscape) {
     /* line 71, ../sass/mobile/_layout.scss */
     .object-header-mobile {
       left: 51.2px; } }
@@ -825,7 +825,7 @@ mct-container {
   /* line 88, ../sass/mobile/_layout.scss */
   .browse-manage {
     width: 257px; } }
-@media screen and (min-device-width: 515px) and (max-device-width: 799px) and (min-device-height: 741px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-device-height: 515px) and (max-device-height: 799px) and (min-device-width: 741px) and (max-device-width: 1024px) and (orientation: landscape) {
+@media screen and (min-device-width: 515px) and (max-device-width: 799px) and (min-device-height: 741px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-device-height: 515px) and (max-device-height: 799px) and (min-device-width: 741px) and (max-device-width: 1024px) and (max-width: 1024px) and (orientation: landscape) {
   /* line 88, ../sass/mobile/_layout.scss */
   .browse-manage {
     width: 512px; } }
diff --git a/platform/commonUI/general/res/sass/mobile/_constants.scss b/platform/commonUI/general/res/sass/mobile/_constants.scss
index 6e3d4f5fd7..f312ac8d91 100644
--- a/platform/commonUI/general/res/sass/mobile/_constants.scss
+++ b/platform/commonUI/general/res/sass/mobile/_constants.scss
@@ -37,7 +37,7 @@ $tabWidLanCheck: "(min-device-height: #{$tabMinW}) and (max-device-height: #{$ta
 $tabMinH: 741px;
 $tabMaxH: 1024px;
 $tabHeiPorCheck: "(min-device-height: #{$tabMinH}) and (max-device-height: #{$tabMaxH})";
-$tabHeiLanCheck: "(min-device-width: #{$tabMinH}) and (max-device-width: #{$tabMaxH})";
+$tabHeiLanCheck: "(min-device-width: #{$tabMinH}) and (max-device-width: #{$tabMaxH}) and (max-width: #{$tabMaxH})";
 
 $phoneWidth: "screen and #{$phoWidPorCheck} and #{$phoHeiPorCheck} and (orientation: portrait)";
 $phoneHeight: "screen and #{$phoWidLanCheck} and #{$phoHeiLanCheck} and (orientation: landscape)";

From 67890a72986655317b0cb3042158a106d3799d5d Mon Sep 17 00:00:00 2001
From: Dave <shivamndave>
Date: Fri, 10 Jul 2015 12:38:04 -0700
Subject: [PATCH 042/209] [Mobile] Test

---
 platform/commonUI/general/res/css/items.css      |  6 +++---
 .../commonUI/general/res/css/theme-espresso.css  | 16 ++++++++--------
 .../general/res/sass/mobile/_constants.scss      |  8 ++++----
 3 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/platform/commonUI/general/res/css/items.css b/platform/commonUI/general/res/css/items.css
index 8ca1234189..104acc4bd1 100644
--- a/platform/commonUI/general/res/css/items.css
+++ b/platform/commonUI/general/res/css/items.css
@@ -352,12 +352,12 @@
   .items-holder .item.grid-item {
     width: 100%;
     height: 50px; } }
-@media screen and (min-device-width: 515px) and (max-device-width: 799px) and (min-device-height: 741px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-device-height: 515px) and (max-device-height: 799px) and (min-device-width: 741px) and (max-device-width: 1024px) and (max-width: 1024px) and (orientation: landscape) {
+@media screen and (min-device-width: 515px) and (max-device-width: 799px) and (min-device-height: 741px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-device-height: 515px) and (max-device-height: 799px) and (min-width: 515px) and (max-width: 799px) and (min-device-width: 741px) and (max-device-width: 1024px) and (min-width: 741px) and (max-width: 1024px) and (orientation: landscape) {
   /* line 24, ../sass/mobile/_item.scss */
   .items-holder .item.grid-item {
     width: 100%;
     height: 100px; } }
-@media screen and (min-device-width: 800px) and (min-device-height: 1025px) and (orientation: portrait), screen and (min-device-height: 800px) and (min-device-width: 1025px) and (orientation: landscape) {
+@media screen and (min-device-width: 800px) and (min-device-height: 1025px) and (orientation: portrait), screen and (min-device-height: 800px) and (min-height: 800px) and (min-device-width: 1025px) and (min-width: 1025px) and (orientation: landscape) {
   /* line 24, ../sass/mobile/_item.scss */
   .items-holder .item.grid-item {
     width: 200px;
@@ -366,7 +366,7 @@
   /* line 49, ../sass/mobile/_item.scss */
   .items-holder .item.grid-item .icon {
     display: none; } }
-@media screen and (min-device-width: 515px) and (max-device-width: 799px) and (min-device-height: 741px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-device-height: 515px) and (max-device-height: 799px) and (min-device-width: 741px) and (max-device-width: 1024px) and (max-width: 1024px) and (orientation: landscape) {
+@media screen and (min-device-width: 515px) and (max-device-width: 799px) and (min-device-height: 741px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-device-height: 515px) and (max-device-height: 799px) and (min-width: 515px) and (max-width: 799px) and (min-device-width: 741px) and (max-device-width: 1024px) and (min-width: 741px) and (max-width: 1024px) and (orientation: landscape) {
   /* line 49, ../sass/mobile/_item.scss */
   .items-holder .item.grid-item .icon {
     display: none; } }
diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index 6a3638f243..6ec675ea30 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -739,7 +739,7 @@ mct-container {
     -webkit-transition-duration: 0.2s;
     transition-duration: 0.2s;
     left: -257px; } }
-@media screen and (min-device-width: 515px) and (max-device-width: 799px) and (min-device-height: 741px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-device-height: 515px) and (max-device-height: 799px) and (min-device-width: 741px) and (max-device-width: 1024px) and (max-width: 1024px) and (orientation: landscape) {
+@media screen and (min-device-width: 515px) and (max-device-width: 799px) and (min-device-height: 741px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-device-height: 515px) and (max-device-height: 799px) and (min-width: 515px) and (max-width: 799px) and (min-device-width: 741px) and (max-device-width: 1024px) and (min-width: 741px) and (max-width: 1024px) and (orientation: landscape) {
   /* line 26, ../sass/mobile/_layout.scss */
   .holder-hide {
     -moz-transition-duration: 0.2s;
@@ -756,7 +756,7 @@ mct-container {
     -webkit-transition-duration: 0.2s;
     transition-duration: 0.2s;
     left: 0px; } }
-@media screen and (min-device-width: 515px) and (max-device-width: 799px) and (min-device-height: 741px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-device-height: 515px) and (max-device-height: 799px) and (min-device-width: 741px) and (max-device-width: 1024px) and (max-width: 1024px) and (orientation: landscape) {
+@media screen and (min-device-width: 515px) and (max-device-width: 799px) and (min-device-height: 741px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-device-height: 515px) and (max-device-height: 799px) and (min-width: 515px) and (max-width: 799px) and (min-device-width: 741px) and (max-device-width: 1024px) and (min-width: 741px) and (max-width: 1024px) and (orientation: landscape) {
   /* line 37, ../sass/mobile/_layout.scss */
   .holder-show {
     -moz-transition-duration: 0.2s;
@@ -776,7 +776,7 @@ mct-container {
       -webkit-transition-duration: 0.2s;
       transition-duration: 0.2s;
       left: 257px; } }
-  @media screen and (min-device-width: 515px) and (max-device-width: 799px) and (min-device-height: 741px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-device-height: 515px) and (max-device-height: 799px) and (min-device-width: 741px) and (max-device-width: 1024px) and (max-width: 1024px) and (orientation: landscape) {
+  @media screen and (min-device-width: 515px) and (max-device-width: 799px) and (min-device-height: 741px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-device-height: 515px) and (max-device-height: 799px) and (min-width: 515px) and (max-width: 799px) and (min-device-width: 741px) and (max-device-width: 1024px) and (min-width: 741px) and (max-width: 1024px) and (orientation: landscape) {
     /* line 48, ../sass/mobile/_layout.scss */
     .button-show {
       -moz-transition-duration: 0.2s;
@@ -796,7 +796,7 @@ mct-container {
     /* line 60, ../sass/mobile/_layout.scss */
     .button-hide {
       left: 257px; } }
-  @media screen and (min-device-width: 515px) and (max-device-width: 799px) and (min-device-height: 741px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-device-height: 515px) and (max-device-height: 799px) and (min-device-width: 741px) and (max-device-width: 1024px) and (max-width: 1024px) and (orientation: landscape) {
+  @media screen and (min-device-width: 515px) and (max-device-width: 799px) and (min-device-height: 741px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-device-height: 515px) and (max-device-height: 799px) and (min-width: 515px) and (max-width: 799px) and (min-device-width: 741px) and (max-device-width: 1024px) and (min-width: 741px) and (max-width: 1024px) and (orientation: landscape) {
     /* line 60, ../sass/mobile/_layout.scss */
     .button-hide {
       left: 512px; } }
@@ -808,7 +808,7 @@ mct-container {
     /* line 71, ../sass/mobile/_layout.scss */
     .object-header-mobile {
       left: 25.7px; } }
-  @media screen and (min-device-width: 515px) and (max-device-width: 799px) and (min-device-height: 741px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-device-height: 515px) and (max-device-height: 799px) and (min-device-width: 741px) and (max-device-width: 1024px) and (max-width: 1024px) and (orientation: landscape) {
+  @media screen and (min-device-width: 515px) and (max-device-width: 799px) and (min-device-height: 741px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-device-height: 515px) and (max-device-height: 799px) and (min-width: 515px) and (max-width: 799px) and (min-device-width: 741px) and (max-device-width: 1024px) and (min-width: 741px) and (max-width: 1024px) and (orientation: landscape) {
     /* line 71, ../sass/mobile/_layout.scss */
     .object-header-mobile {
       left: 51.2px; } }
@@ -816,7 +816,7 @@ mct-container {
 /* line 81, ../sass/mobile/_layout.scss */
 .mobile-menu-icon {
   top: 5px; }
-  @media screen and (min-device-width: 800px) and (min-device-height: 1025px) and (orientation: portrait), screen and (min-device-height: 800px) and (min-device-width: 1025px) and (orientation: landscape) {
+  @media screen and (min-device-width: 800px) and (min-device-height: 1025px) and (orientation: portrait), screen and (min-device-height: 800px) and (min-height: 800px) and (min-device-width: 1025px) and (min-width: 1025px) and (orientation: landscape) {
     /* line 81, ../sass/mobile/_layout.scss */
     .mobile-menu-icon {
       display: none; } }
@@ -825,11 +825,11 @@ mct-container {
   /* line 88, ../sass/mobile/_layout.scss */
   .browse-manage {
     width: 257px; } }
-@media screen and (min-device-width: 515px) and (max-device-width: 799px) and (min-device-height: 741px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-device-height: 515px) and (max-device-height: 799px) and (min-device-width: 741px) and (max-device-width: 1024px) and (max-width: 1024px) and (orientation: landscape) {
+@media screen and (min-device-width: 515px) and (max-device-width: 799px) and (min-device-height: 741px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-device-height: 515px) and (max-device-height: 799px) and (min-width: 515px) and (max-width: 799px) and (min-device-width: 741px) and (max-device-width: 1024px) and (min-width: 741px) and (max-width: 1024px) and (orientation: landscape) {
   /* line 88, ../sass/mobile/_layout.scss */
   .browse-manage {
     width: 512px; } }
-@media screen and (min-device-width: 800px) and (min-device-height: 1025px) and (orientation: portrait), screen and (min-device-height: 800px) and (min-device-width: 1025px) and (orientation: landscape) {
+@media screen and (min-device-width: 800px) and (min-device-height: 1025px) and (orientation: portrait), screen and (min-device-height: 800px) and (min-height: 800px) and (min-device-width: 1025px) and (min-width: 1025px) and (orientation: landscape) {
   /* line 88, ../sass/mobile/_layout.scss */
   .browse-manage {
     min-width: 150px;
diff --git a/platform/commonUI/general/res/sass/mobile/_constants.scss b/platform/commonUI/general/res/sass/mobile/_constants.scss
index f312ac8d91..cf0482bfdf 100644
--- a/platform/commonUI/general/res/sass/mobile/_constants.scss
+++ b/platform/commonUI/general/res/sass/mobile/_constants.scss
@@ -32,12 +32,12 @@ $phoHeiLanCheck: "(max-device-width: #{$phoMaxH})";
 $tabMinW: 515px;
 $tabMaxW: 799px;
 $tabWidPorCheck: "(min-device-width: #{$tabMinW}) and (max-device-width: #{$tabMaxW})";
-$tabWidLanCheck: "(min-device-height: #{$tabMinW}) and (max-device-height: #{$tabMaxW})";
+$tabWidLanCheck: "(min-device-height: #{$tabMinW}) and (max-device-height: #{$tabMaxW}) and (min-width: #{$tabMinW}) and (max-width: #{$tabMaxW})";
 
 $tabMinH: 741px;
 $tabMaxH: 1024px;
 $tabHeiPorCheck: "(min-device-height: #{$tabMinH}) and (max-device-height: #{$tabMaxH})";
-$tabHeiLanCheck: "(min-device-width: #{$tabMinH}) and (max-device-width: #{$tabMaxH}) and (max-width: #{$tabMaxH})";
+$tabHeiLanCheck: "(min-device-width: #{$tabMinH}) and (max-device-width: #{$tabMaxH}) and (min-width: #{$tabMinH}) and (max-width: #{$tabMaxH})";
 
 $phoneWidth: "screen and #{$phoWidPorCheck} and #{$phoHeiPorCheck} and (orientation: portrait)";
 $phoneHeight: "screen and #{$phoWidLanCheck} and #{$phoHeiLanCheck} and (orientation: landscape)";
@@ -51,11 +51,11 @@ $tabletHeight: "screen and #{$tabWidLanCheck} and #{$tabHeiLanCheck} and (orient
 
 $compMinW: 800px;
 $compWidPorCheck: "(min-device-width: #{$compMinW})";
-$compWidLanCheck: "(min-device-height: #{$compMinW})";
+$compWidLanCheck: "(min-device-height: #{$compMinW}) and (min-height: #{$compMinW})";
 
 $compMinH: 1025px;
 $compHeiPorCheck: "(min-device-height: #{$compMinH})";
-$compHeiLanCheck: "(min-device-width: #{$compMinH})";
+$compHeiLanCheck: "(min-device-width: #{$compMinH}) and (min-width: #{$compMinH})";
 
 $compWidth: "screen and #{$compWidPorCheck} and #{$compHeiPorCheck} and (orientation: portrait)";
 $compHeight: "screen and #{$compWidLanCheck} and #{$compHeiLanCheck} and (orientation: landscape)";

From eec955317a39a4905bcc8c682cca349461a0a1a8 Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Fri, 10 Jul 2015 12:47:00 -0700
Subject: [PATCH 043/209] revert back to

4d9dc3624b02acf348d67d8aa812547aa4a2ef4e
---
 platform/commonUI/general/res/css/items.css   | 10 ++---
 .../general/res/css/theme-espresso.css        | 38 ++++++++---------
 .../general/res/sass/mobile/_constants.scss   | 42 +++++++------------
 .../general/res/sass/mobile/_mixins.scss      |  6 ++-
 4 files changed, 44 insertions(+), 52 deletions(-)

diff --git a/platform/commonUI/general/res/css/items.css b/platform/commonUI/general/res/css/items.css
index 104acc4bd1..bf0f5094ce 100644
--- a/platform/commonUI/general/res/css/items.css
+++ b/platform/commonUI/general/res/css/items.css
@@ -347,26 +347,26 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-@media screen and (max-device-width: 514px) and (max-device-height: 740px) and (orientation: portrait), screen and (max-device-height: 514px) and (max-device-width: 740px) and (orientation: landscape) {
+@media screen and (max-width: 514px) and (max-height: 740px) and (max-device-width: 800px) and (max-device-height: 1024px) and (orientation: portrait), screen and (max-height: 514px) and (max-width: 740px) and (orientation: landscape) {
   /* line 24, ../sass/mobile/_item.scss */
   .items-holder .item.grid-item {
     width: 100%;
     height: 50px; } }
-@media screen and (min-device-width: 515px) and (max-device-width: 799px) and (min-device-height: 741px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-device-height: 515px) and (max-device-height: 799px) and (min-width: 515px) and (max-width: 799px) and (min-device-width: 741px) and (max-device-width: 1024px) and (min-width: 741px) and (max-width: 1024px) and (orientation: landscape) {
+@media screen and (min-width: 515px) and (max-width: 800px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 800px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-height: 515px) and (max-height: 800px) and (min-width: 741px) and (max-width: 1024px) and (orientation: landscape) {
   /* line 24, ../sass/mobile/_item.scss */
   .items-holder .item.grid-item {
     width: 100%;
     height: 100px; } }
-@media screen and (min-device-width: 800px) and (min-device-height: 1025px) and (orientation: portrait), screen and (min-device-height: 800px) and (min-height: 800px) and (min-device-width: 1025px) and (min-width: 1025px) and (orientation: landscape) {
+@media screen and (min-width: 801px) and (orientation: portrait), screen and (min-device-width: 801px) and (orientation: portrait), screen and (min-width: 1025px) and (orientation: landscape), screen and (min-device-width: 1025px) and (orientation: landscape) {
   /* line 24, ../sass/mobile/_item.scss */
   .items-holder .item.grid-item {
     width: 200px;
     height: 200px; } }
-@media screen and (max-device-width: 514px) and (max-device-height: 740px) and (orientation: portrait), screen and (max-device-height: 514px) and (max-device-width: 740px) and (orientation: landscape) {
+@media screen and (max-width: 514px) and (max-height: 740px) and (max-device-width: 800px) and (max-device-height: 1024px) and (orientation: portrait), screen and (max-height: 514px) and (max-width: 740px) and (orientation: landscape) {
   /* line 49, ../sass/mobile/_item.scss */
   .items-holder .item.grid-item .icon {
     display: none; } }
-@media screen and (min-device-width: 515px) and (max-device-width: 799px) and (min-device-height: 741px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-device-height: 515px) and (max-device-height: 799px) and (min-width: 515px) and (max-width: 799px) and (min-device-width: 741px) and (max-device-width: 1024px) and (min-width: 741px) and (max-width: 1024px) and (orientation: landscape) {
+@media screen and (min-width: 515px) and (max-width: 800px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 800px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-height: 515px) and (max-height: 800px) and (min-width: 741px) and (max-width: 1024px) and (orientation: landscape) {
   /* line 49, ../sass/mobile/_item.scss */
   .items-holder .item.grid-item .icon {
     display: none; } }
diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index 6ec675ea30..1778fb4848 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -731,7 +731,7 @@ mct-container {
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-@media screen and (max-device-width: 514px) and (max-device-height: 740px) and (orientation: portrait), screen and (max-device-height: 514px) and (max-device-width: 740px) and (orientation: landscape) {
+@media screen and (max-width: 514px) and (max-height: 740px) and (max-device-width: 800px) and (max-device-height: 1024px) and (orientation: portrait), screen and (max-height: 514px) and (max-width: 740px) and (orientation: landscape) {
   /* line 26, ../sass/mobile/_layout.scss */
   .holder-hide {
     -moz-transition-duration: 0.2s;
@@ -739,16 +739,16 @@ mct-container {
     -webkit-transition-duration: 0.2s;
     transition-duration: 0.2s;
     left: -257px; } }
-@media screen and (min-device-width: 515px) and (max-device-width: 799px) and (min-device-height: 741px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-device-height: 515px) and (max-device-height: 799px) and (min-width: 515px) and (max-width: 799px) and (min-device-width: 741px) and (max-device-width: 1024px) and (min-width: 741px) and (max-width: 1024px) and (orientation: landscape) {
+@media screen and (min-width: 515px) and (max-width: 800px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 800px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-height: 515px) and (max-height: 800px) and (min-width: 741px) and (max-width: 1024px) and (orientation: landscape) {
   /* line 26, ../sass/mobile/_layout.scss */
   .holder-hide {
     -moz-transition-duration: 0.2s;
     -o-transition-duration: 0.2s;
     -webkit-transition-duration: 0.2s;
     transition-duration: 0.2s;
-    left: -512px; } }
+    left: -400px; } }
 
-@media screen and (max-device-width: 514px) and (max-device-height: 740px) and (orientation: portrait), screen and (max-device-height: 514px) and (max-device-width: 740px) and (orientation: landscape) {
+@media screen and (max-width: 514px) and (max-height: 740px) and (max-device-width: 800px) and (max-device-height: 1024px) and (orientation: portrait), screen and (max-height: 514px) and (max-width: 740px) and (orientation: landscape) {
   /* line 37, ../sass/mobile/_layout.scss */
   .holder-show {
     -moz-transition-duration: 0.2s;
@@ -756,7 +756,7 @@ mct-container {
     -webkit-transition-duration: 0.2s;
     transition-duration: 0.2s;
     left: 0px; } }
-@media screen and (min-device-width: 515px) and (max-device-width: 799px) and (min-device-height: 741px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-device-height: 515px) and (max-device-height: 799px) and (min-width: 515px) and (max-width: 799px) and (min-device-width: 741px) and (max-device-width: 1024px) and (min-width: 741px) and (max-width: 1024px) and (orientation: landscape) {
+@media screen and (min-width: 515px) and (max-width: 800px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 800px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-height: 515px) and (max-height: 800px) and (min-width: 741px) and (max-width: 1024px) and (orientation: landscape) {
   /* line 37, ../sass/mobile/_layout.scss */
   .holder-show {
     -moz-transition-duration: 0.2s;
@@ -768,7 +768,7 @@ mct-container {
 /* line 48, ../sass/mobile/_layout.scss */
 .button-show {
   position: absolute; }
-  @media screen and (max-device-width: 514px) and (max-device-height: 740px) and (orientation: portrait), screen and (max-device-height: 514px) and (max-device-width: 740px) and (orientation: landscape) {
+  @media screen and (max-width: 514px) and (max-height: 740px) and (max-device-width: 800px) and (max-device-height: 1024px) and (orientation: portrait), screen and (max-height: 514px) and (max-width: 740px) and (orientation: landscape) {
     /* line 48, ../sass/mobile/_layout.scss */
     .button-show {
       -moz-transition-duration: 0.2s;
@@ -776,14 +776,14 @@ mct-container {
       -webkit-transition-duration: 0.2s;
       transition-duration: 0.2s;
       left: 257px; } }
-  @media screen and (min-device-width: 515px) and (max-device-width: 799px) and (min-device-height: 741px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-device-height: 515px) and (max-device-height: 799px) and (min-width: 515px) and (max-width: 799px) and (min-device-width: 741px) and (max-device-width: 1024px) and (min-width: 741px) and (max-width: 1024px) and (orientation: landscape) {
+  @media screen and (min-width: 515px) and (max-width: 800px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 800px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-height: 515px) and (max-height: 800px) and (min-width: 741px) and (max-width: 1024px) and (orientation: landscape) {
     /* line 48, ../sass/mobile/_layout.scss */
     .button-show {
       -moz-transition-duration: 0.2s;
       -o-transition-duration: 0.2s;
       -webkit-transition-duration: 0.2s;
       transition-duration: 0.2s;
-      left: 512px; } }
+      left: 400px; } }
 
 /* line 60, ../sass/mobile/_layout.scss */
 .button-hide {
@@ -792,44 +792,44 @@ mct-container {
   -o-transition-duration: 0.2s;
   -webkit-transition-duration: 0.2s;
   transition-duration: 0.2s; }
-  @media screen and (max-device-width: 514px) and (max-device-height: 740px) and (orientation: portrait), screen and (max-device-height: 514px) and (max-device-width: 740px) and (orientation: landscape) {
+  @media screen and (max-width: 514px) and (max-height: 740px) and (max-device-width: 800px) and (max-device-height: 1024px) and (orientation: portrait), screen and (max-height: 514px) and (max-width: 740px) and (orientation: landscape) {
     /* line 60, ../sass/mobile/_layout.scss */
     .button-hide {
       left: 257px; } }
-  @media screen and (min-device-width: 515px) and (max-device-width: 799px) and (min-device-height: 741px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-device-height: 515px) and (max-device-height: 799px) and (min-width: 515px) and (max-width: 799px) and (min-device-width: 741px) and (max-device-width: 1024px) and (min-width: 741px) and (max-width: 1024px) and (orientation: landscape) {
+  @media screen and (min-width: 515px) and (max-width: 800px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 800px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-height: 515px) and (max-height: 800px) and (min-width: 741px) and (max-width: 1024px) and (orientation: landscape) {
     /* line 60, ../sass/mobile/_layout.scss */
     .button-hide {
-      left: 512px; } }
+      left: 400px; } }
 
 /* line 71, ../sass/mobile/_layout.scss */
 .object-header-mobile {
   position: relative; }
-  @media screen and (max-device-width: 514px) and (max-device-height: 740px) and (orientation: portrait), screen and (max-device-height: 514px) and (max-device-width: 740px) and (orientation: landscape) {
+  @media screen and (max-width: 514px) and (max-height: 740px) and (max-device-width: 800px) and (max-device-height: 1024px) and (orientation: portrait), screen and (max-height: 514px) and (max-width: 740px) and (orientation: landscape) {
     /* line 71, ../sass/mobile/_layout.scss */
     .object-header-mobile {
       left: 25.7px; } }
-  @media screen and (min-device-width: 515px) and (max-device-width: 799px) and (min-device-height: 741px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-device-height: 515px) and (max-device-height: 799px) and (min-width: 515px) and (max-width: 799px) and (min-device-width: 741px) and (max-device-width: 1024px) and (min-width: 741px) and (max-width: 1024px) and (orientation: landscape) {
+  @media screen and (min-width: 515px) and (max-width: 800px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 800px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-height: 515px) and (max-height: 800px) and (min-width: 741px) and (max-width: 1024px) and (orientation: landscape) {
     /* line 71, ../sass/mobile/_layout.scss */
     .object-header-mobile {
-      left: 51.2px; } }
+      left: 40px; } }
 
 /* line 81, ../sass/mobile/_layout.scss */
 .mobile-menu-icon {
   top: 5px; }
-  @media screen and (min-device-width: 800px) and (min-device-height: 1025px) and (orientation: portrait), screen and (min-device-height: 800px) and (min-height: 800px) and (min-device-width: 1025px) and (min-width: 1025px) and (orientation: landscape) {
+  @media screen and (min-width: 801px) and (orientation: portrait), screen and (min-device-width: 801px) and (orientation: portrait), screen and (min-width: 1025px) and (orientation: landscape), screen and (min-device-width: 1025px) and (orientation: landscape) {
     /* line 81, ../sass/mobile/_layout.scss */
     .mobile-menu-icon {
       display: none; } }
 
-@media screen and (max-device-width: 514px) and (max-device-height: 740px) and (orientation: portrait), screen and (max-device-height: 514px) and (max-device-width: 740px) and (orientation: landscape) {
+@media screen and (max-width: 514px) and (max-height: 740px) and (max-device-width: 800px) and (max-device-height: 1024px) and (orientation: portrait), screen and (max-height: 514px) and (max-width: 740px) and (orientation: landscape) {
   /* line 88, ../sass/mobile/_layout.scss */
   .browse-manage {
     width: 257px; } }
-@media screen and (min-device-width: 515px) and (max-device-width: 799px) and (min-device-height: 741px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-device-height: 515px) and (max-device-height: 799px) and (min-width: 515px) and (max-width: 799px) and (min-device-width: 741px) and (max-device-width: 1024px) and (min-width: 741px) and (max-width: 1024px) and (orientation: landscape) {
+@media screen and (min-width: 515px) and (max-width: 800px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 800px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-height: 515px) and (max-height: 800px) and (min-width: 741px) and (max-width: 1024px) and (orientation: landscape) {
   /* line 88, ../sass/mobile/_layout.scss */
   .browse-manage {
-    width: 512px; } }
-@media screen and (min-device-width: 800px) and (min-device-height: 1025px) and (orientation: portrait), screen and (min-device-height: 800px) and (min-height: 800px) and (min-device-width: 1025px) and (min-width: 1025px) and (orientation: landscape) {
+    width: 400px; } }
+@media screen and (min-width: 801px) and (orientation: portrait), screen and (min-device-width: 801px) and (orientation: portrait), screen and (min-width: 1025px) and (orientation: landscape), screen and (min-device-width: 1025px) and (orientation: landscape) {
   /* line 88, ../sass/mobile/_layout.scss */
   .browse-manage {
     min-width: 150px;
diff --git a/platform/commonUI/general/res/sass/mobile/_constants.scss b/platform/commonUI/general/res/sass/mobile/_constants.scss
index cf0482bfdf..2f5ddc08e3 100644
--- a/platform/commonUI/general/res/sass/mobile/_constants.scss
+++ b/platform/commonUI/general/res/sass/mobile/_constants.scss
@@ -22,48 +22,38 @@
 
 /************************** WINDOW DIMENSIONS FOR RWD */
 $phoMaxW: 514px;
-$phoWidPorCheck: "(max-device-width: #{$phoMaxW})";
-$phoWidLanCheck: "(max-device-height: #{$phoMaxW})";
+$phoWidPorCheck: "(max-width: #{$phoMaxW})";
+$phoWidLanCheck: "(max-height: #{$phoMaxW})";
 
 $phoMaxH: 740px;
-$phoHeiPorCheck: "(max-device-height: #{$phoMaxH})";
-$phoHeiLanCheck: "(max-device-width: #{$phoMaxH})";
+$phoHeiPorCheck: "(max-height: #{$phoMaxH})";
+$phoHeiLanCheck: "(max-width: #{$phoMaxH})";
 
 $tabMinW: 515px;
-$tabMaxW: 799px;
-$tabWidPorCheck: "(min-device-width: #{$tabMinW}) and (max-device-width: #{$tabMaxW})";
-$tabWidLanCheck: "(min-device-height: #{$tabMinW}) and (max-device-height: #{$tabMaxW}) and (min-width: #{$tabMinW}) and (max-width: #{$tabMaxW})";
+$tabMaxW: 800px;
+$tabWidPorCheck: "(min-width: #{$tabMinW}) and (max-width: #{$tabMaxW})";
+$tabWidLanCheck: "(min-height: #{$tabMinW}) and (max-height: #{$tabMaxW})";
 
 $tabMinH: 741px;
 $tabMaxH: 1024px;
-$tabHeiPorCheck: "(min-device-height: #{$tabMinH}) and (max-device-height: #{$tabMaxH})";
-$tabHeiLanCheck: "(min-device-width: #{$tabMinH}) and (max-device-width: #{$tabMaxH}) and (min-width: #{$tabMinH}) and (max-width: #{$tabMaxH})";
+$tabHeiPorCheck: "(min-height: #{$tabMinH}) and (max-height: #{$tabMaxH})";
+$tabHeiLanCheck: "(min-width: #{$tabMinH}) and (max-width: #{$tabMaxH})";
 
-$phoneWidth: "screen and #{$phoWidPorCheck} and #{$phoHeiPorCheck} and (orientation: portrait)";
+$mobileDevice: "(max-device-width: #{$tabMaxW}) and (max-device-height: #{$tabMaxH})";
+
+$phoneWidth: "screen and #{$phoWidPorCheck} and #{$phoHeiPorCheck} and #{$mobileDevice} and (orientation: portrait)";
 $phoneHeight: "screen and #{$phoWidLanCheck} and #{$phoHeiLanCheck} and (orientation: landscape)";
 
-//$phoneBoth: "screen and #{$phoWidPorCheck} and #{$phoHeiPorCheck}";
-
-$tabletWidth: "screen and #{$tabWidPorCheck} and #{$tabHeiPorCheck} and (orientation: portrait)";
+$tabletWidth: "screen and #{$tabWidPorCheck} and #{$tabHeiPorCheck} and #{$mobileDevice} and (orientation: portrait)";
 $tabletHeight: "screen and #{$tabWidLanCheck} and #{$tabHeiLanCheck} and (orientation: landscape)";
 
-//$tabletBoth: "screen and #{$tabWidPorCheck} and #{$tabHeiPorCheck} and (orientation: portrait)";
-
-$compMinW: 800px;
-$compWidPorCheck: "(min-device-width: #{$compMinW})";
-$compWidLanCheck: "(min-device-height: #{$compMinW}) and (min-height: #{$compMinW})";
-
+$compMinW: 801px;
 $compMinH: 1025px;
-$compHeiPorCheck: "(min-device-height: #{$compMinH})";
-$compHeiLanCheck: "(min-device-width: #{$compMinH}) and (min-width: #{$compMinH})";
 
-$compWidth: "screen and #{$compWidPorCheck} and #{$compHeiPorCheck} and (orientation: portrait)";
-$compHeight: "screen and #{$compWidLanCheck} and #{$compHeiLanCheck} and (orientation: landscape)";
-
-//$compBoth: "screen and (min-device-width: #{$compMinW}) and (min-device-height: #{$compMinH})";
+$deskTopDevice: "(min-device-width: #{$compMinW}) and (min-device-height: #{$compMinH})";
 
 $leftPhone: $phoMaxW/2;
-$leftTab: $tabMaxH/2;
+$leftTab: $tabMaxW/2;
 
 $hideRatioPhone: 1;
 $hideRatioTab: 1;
diff --git a/platform/commonUI/general/res/sass/mobile/_mixins.scss b/platform/commonUI/general/res/sass/mobile/_mixins.scss
index 58127a0c14..f23b8bc1d6 100644
--- a/platform/commonUI/general/res/sass/mobile/_mixins.scss
+++ b/platform/commonUI/general/res/sass/mobile/_mixins.scss
@@ -43,8 +43,10 @@
 //}
 
 @mixin desktop {
-    @media #{$compWidth},
-           #{$compHeight} {
+    @media screen and (min-width: $compMinW) and (orientation: portrait),
+           screen and (min-device-width: $compMinW) and (orientation: portrait),
+           screen and (min-width: $compMinH) and (orientation: landscape),
+           screen and (min-device-width: $compMinH) and (orientation: landscape) {
         @content
     }
 }

From 404d02ec23c788bbd5280d0e6a1c370902c748f6 Mon Sep 17 00:00:00 2001
From: Dave <shivamndave>
Date: Mon, 13 Jul 2015 09:17:59 -0700
Subject: [PATCH 044/209] [Mobile] Added Constants

Re-edited constants to set min
ones for the desktop screen, that
is based on the device size.
---
 platform/commonUI/general/res/css/items.css               | 2 +-
 platform/commonUI/general/res/css/theme-espresso.css      | 4 ++--
 platform/commonUI/general/res/sass/mobile/_constants.scss | 6 +++++-
 platform/commonUI/general/res/sass/mobile/_mixins.scss    | 6 ++----
 4 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/platform/commonUI/general/res/css/items.css b/platform/commonUI/general/res/css/items.css
index bf0f5094ce..9295201d2b 100644
--- a/platform/commonUI/general/res/css/items.css
+++ b/platform/commonUI/general/res/css/items.css
@@ -357,7 +357,7 @@
   .items-holder .item.grid-item {
     width: 100%;
     height: 100px; } }
-@media screen and (min-width: 801px) and (orientation: portrait), screen and (min-device-width: 801px) and (orientation: portrait), screen and (min-width: 1025px) and (orientation: landscape), screen and (min-device-width: 1025px) and (orientation: landscape) {
+@media screen and (min-device-width: 801px) and (min-device-height: 1025px) and (orientation: portrait), screen and (min-device-width: 801px) and (min-device-height: 1025px) and (orientation: landscape) {
   /* line 24, ../sass/mobile/_item.scss */
   .items-holder .item.grid-item {
     width: 200px;
diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index 1778fb4848..702fb0bae7 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -816,7 +816,7 @@ mct-container {
 /* line 81, ../sass/mobile/_layout.scss */
 .mobile-menu-icon {
   top: 5px; }
-  @media screen and (min-width: 801px) and (orientation: portrait), screen and (min-device-width: 801px) and (orientation: portrait), screen and (min-width: 1025px) and (orientation: landscape), screen and (min-device-width: 1025px) and (orientation: landscape) {
+  @media screen and (min-device-width: 801px) and (min-device-height: 1025px) and (orientation: portrait), screen and (min-device-width: 801px) and (min-device-height: 1025px) and (orientation: landscape) {
     /* line 81, ../sass/mobile/_layout.scss */
     .mobile-menu-icon {
       display: none; } }
@@ -829,7 +829,7 @@ mct-container {
   /* line 88, ../sass/mobile/_layout.scss */
   .browse-manage {
     width: 400px; } }
-@media screen and (min-width: 801px) and (orientation: portrait), screen and (min-device-width: 801px) and (orientation: portrait), screen and (min-width: 1025px) and (orientation: landscape), screen and (min-device-width: 1025px) and (orientation: landscape) {
+@media screen and (min-device-width: 801px) and (min-device-height: 1025px) and (orientation: portrait), screen and (min-device-width: 801px) and (min-device-height: 1025px) and (orientation: landscape) {
   /* line 88, ../sass/mobile/_layout.scss */
   .browse-manage {
     min-width: 150px;
diff --git a/platform/commonUI/general/res/sass/mobile/_constants.scss b/platform/commonUI/general/res/sass/mobile/_constants.scss
index 2f5ddc08e3..2d968b0c82 100644
--- a/platform/commonUI/general/res/sass/mobile/_constants.scss
+++ b/platform/commonUI/general/res/sass/mobile/_constants.scss
@@ -50,7 +50,11 @@ $tabletHeight: "screen and #{$tabWidLanCheck} and #{$tabHeiLanCheck} and (orient
 $compMinW: 801px;
 $compMinH: 1025px;
 
-$deskTopDevice: "(min-device-width: #{$compMinW}) and (min-device-height: #{$compMinH})";
+$desktopDevicePortrait: "(min-device-width: #{$compMinW}) and (min-device-height: #{$compMinH})";
+$desktopDeviceLandscape: "(min-device-width: #{$compMinH}) and (min-device-height: #{$compMinW})";
+
+$compWidth: "screen and #{$desktopDevicePortrait} and (orientation: portrait)";
+$compHeight: "screen and #{$desktopDevicePortrait} and (orientation: landscape)";
 
 $leftPhone: $phoMaxW/2;
 $leftTab: $tabMaxW/2;
diff --git a/platform/commonUI/general/res/sass/mobile/_mixins.scss b/platform/commonUI/general/res/sass/mobile/_mixins.scss
index f23b8bc1d6..58127a0c14 100644
--- a/platform/commonUI/general/res/sass/mobile/_mixins.scss
+++ b/platform/commonUI/general/res/sass/mobile/_mixins.scss
@@ -43,10 +43,8 @@
 //}
 
 @mixin desktop {
-    @media screen and (min-width: $compMinW) and (orientation: portrait),
-           screen and (min-device-width: $compMinW) and (orientation: portrait),
-           screen and (min-width: $compMinH) and (orientation: landscape),
-           screen and (min-device-width: $compMinH) and (orientation: landscape) {
+    @media #{$compWidth},
+           #{$compHeight} {
         @content
     }
 }

From 46d5a1431fc92d46378616c20bb6726e7642e5f4 Mon Sep 17 00:00:00 2001
From: Dave <shivamndave>
Date: Mon, 13 Jul 2015 09:24:01 -0700
Subject: [PATCH 045/209] [Mobile] Added Constants

Rixed mis-initialized desktop
constant
---
 platform/commonUI/general/res/css/items.css               | 2 +-
 platform/commonUI/general/res/css/theme-espresso.css      | 4 ++--
 platform/commonUI/general/res/sass/mobile/_constants.scss | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/platform/commonUI/general/res/css/items.css b/platform/commonUI/general/res/css/items.css
index 9295201d2b..3df0f33fc2 100644
--- a/platform/commonUI/general/res/css/items.css
+++ b/platform/commonUI/general/res/css/items.css
@@ -357,7 +357,7 @@
   .items-holder .item.grid-item {
     width: 100%;
     height: 100px; } }
-@media screen and (min-device-width: 801px) and (min-device-height: 1025px) and (orientation: portrait), screen and (min-device-width: 801px) and (min-device-height: 1025px) and (orientation: landscape) {
+@media screen and (min-device-width: 801px) and (min-device-height: 1025px) and (orientation: portrait), screen and (min-device-width: 1025px) and (min-device-height: 801px) and (orientation: landscape) {
   /* line 24, ../sass/mobile/_item.scss */
   .items-holder .item.grid-item {
     width: 200px;
diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index 702fb0bae7..e79fdfb828 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -816,7 +816,7 @@ mct-container {
 /* line 81, ../sass/mobile/_layout.scss */
 .mobile-menu-icon {
   top: 5px; }
-  @media screen and (min-device-width: 801px) and (min-device-height: 1025px) and (orientation: portrait), screen and (min-device-width: 801px) and (min-device-height: 1025px) and (orientation: landscape) {
+  @media screen and (min-device-width: 801px) and (min-device-height: 1025px) and (orientation: portrait), screen and (min-device-width: 1025px) and (min-device-height: 801px) and (orientation: landscape) {
     /* line 81, ../sass/mobile/_layout.scss */
     .mobile-menu-icon {
       display: none; } }
@@ -829,7 +829,7 @@ mct-container {
   /* line 88, ../sass/mobile/_layout.scss */
   .browse-manage {
     width: 400px; } }
-@media screen and (min-device-width: 801px) and (min-device-height: 1025px) and (orientation: portrait), screen and (min-device-width: 801px) and (min-device-height: 1025px) and (orientation: landscape) {
+@media screen and (min-device-width: 801px) and (min-device-height: 1025px) and (orientation: portrait), screen and (min-device-width: 1025px) and (min-device-height: 801px) and (orientation: landscape) {
   /* line 88, ../sass/mobile/_layout.scss */
   .browse-manage {
     min-width: 150px;
diff --git a/platform/commonUI/general/res/sass/mobile/_constants.scss b/platform/commonUI/general/res/sass/mobile/_constants.scss
index 2d968b0c82..5e8f9a7f35 100644
--- a/platform/commonUI/general/res/sass/mobile/_constants.scss
+++ b/platform/commonUI/general/res/sass/mobile/_constants.scss
@@ -54,7 +54,7 @@ $desktopDevicePortrait: "(min-device-width: #{$compMinW}) and (min-device-height
 $desktopDeviceLandscape: "(min-device-width: #{$compMinH}) and (min-device-height: #{$compMinW})";
 
 $compWidth: "screen and #{$desktopDevicePortrait} and (orientation: portrait)";
-$compHeight: "screen and #{$desktopDevicePortrait} and (orientation: landscape)";
+$compHeight: "screen and #{$desktopDeviceLandscape} and (orientation: landscape)";
 
 $leftPhone: $phoMaxW/2;
 $leftTab: $tabMaxW/2;

From 137a60f510801d72732e68de7ae5186fab44e0f8 Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Mon, 13 Jul 2015 10:16:52 -0700
Subject: [PATCH 046/209] [Mobile] Constants

Fixed constants to work for laptop.
---
 platform/commonUI/general/res/css/items.css   | 10 ++--
 .../general/res/css/theme-espresso.css        | 56 +++++++++----------
 .../general/res/sass/mobile/_constants.scss   |  8 +--
 3 files changed, 37 insertions(+), 37 deletions(-)

diff --git a/platform/commonUI/general/res/css/items.css b/platform/commonUI/general/res/css/items.css
index 3df0f33fc2..17d1dc03c4 100644
--- a/platform/commonUI/general/res/css/items.css
+++ b/platform/commonUI/general/res/css/items.css
@@ -347,26 +347,26 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-@media screen and (max-width: 514px) and (max-height: 740px) and (max-device-width: 800px) and (max-device-height: 1024px) and (orientation: portrait), screen and (max-height: 514px) and (max-width: 740px) and (orientation: landscape) {
+@media screen and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1023px) and (orientation: portrait), screen and (max-height: 514px) and (max-width: 740px) and (orientation: landscape) {
   /* line 24, ../sass/mobile/_item.scss */
   .items-holder .item.grid-item {
     width: 100%;
     height: 50px; } }
-@media screen and (min-width: 515px) and (max-width: 800px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 800px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-height: 515px) and (max-height: 800px) and (min-width: 741px) and (max-width: 1024px) and (orientation: landscape) {
+@media screen and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1023px) and (max-device-width: 799px) and (max-device-height: 1023px) and (orientation: portrait), screen and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1023px) and (orientation: landscape) {
   /* line 24, ../sass/mobile/_item.scss */
   .items-holder .item.grid-item {
     width: 100%;
     height: 100px; } }
-@media screen and (min-device-width: 801px) and (min-device-height: 1025px) and (orientation: portrait), screen and (min-device-width: 1025px) and (min-device-height: 801px) and (orientation: landscape) {
+@media screen and (min-device-width: 800px) and (min-device-height: 1024px) and (orientation: portrait), screen and (min-device-width: 1024px) and (min-device-height: 800px) and (orientation: landscape) {
   /* line 24, ../sass/mobile/_item.scss */
   .items-holder .item.grid-item {
     width: 200px;
     height: 200px; } }
-@media screen and (max-width: 514px) and (max-height: 740px) and (max-device-width: 800px) and (max-device-height: 1024px) and (orientation: portrait), screen and (max-height: 514px) and (max-width: 740px) and (orientation: landscape) {
+@media screen and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1023px) and (orientation: portrait), screen and (max-height: 514px) and (max-width: 740px) and (orientation: landscape) {
   /* line 49, ../sass/mobile/_item.scss */
   .items-holder .item.grid-item .icon {
     display: none; } }
-@media screen and (min-width: 515px) and (max-width: 800px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 800px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-height: 515px) and (max-height: 800px) and (min-width: 741px) and (max-width: 1024px) and (orientation: landscape) {
+@media screen and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1023px) and (max-device-width: 799px) and (max-device-height: 1023px) and (orientation: portrait), screen and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1023px) and (orientation: landscape) {
   /* line 49, ../sass/mobile/_item.scss */
   .items-holder .item.grid-item .icon {
     display: none; } }
diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index e79fdfb828..aafa198c9e 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -114,7 +114,7 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-/* line 5, ../../../../../../../../.gem/ruby/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 5, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 html, body, div, span, applet, object, iframe,
 h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 a, abbr, acronym, address, big, cite, code,
@@ -135,38 +135,38 @@ time, mark, audio, video {
   font-size: 100%;
   vertical-align: baseline; }
 
-/* line 22, ../../../../../../../../.gem/ruby/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 22, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 html {
   line-height: 1; }
 
-/* line 24, ../../../../../../../../.gem/ruby/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 24, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 ol, ul {
   list-style: none; }
 
-/* line 26, ../../../../../../../../.gem/ruby/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 26, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 table {
   border-collapse: collapse;
   border-spacing: 0; }
 
-/* line 28, ../../../../../../../../.gem/ruby/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 28, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 caption, th, td {
   text-align: left;
   font-weight: normal;
   vertical-align: middle; }
 
-/* line 30, ../../../../../../../../.gem/ruby/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 30, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 q, blockquote {
   quotes: none; }
-  /* line 103, ../../../../../../../../.gem/ruby/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+  /* line 103, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
   q:before, q:after, blockquote:before, blockquote:after {
     content: "";
     content: none; }
 
-/* line 32, ../../../../../../../../.gem/ruby/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 32, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 a img {
   border: none; }
 
-/* line 116, ../../../../../../../../.gem/ruby/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 116, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
   display: block; }
 
@@ -731,7 +731,7 @@ mct-container {
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-@media screen and (max-width: 514px) and (max-height: 740px) and (max-device-width: 800px) and (max-device-height: 1024px) and (orientation: portrait), screen and (max-height: 514px) and (max-width: 740px) and (orientation: landscape) {
+@media screen and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1023px) and (orientation: portrait), screen and (max-height: 514px) and (max-width: 740px) and (orientation: landscape) {
   /* line 26, ../sass/mobile/_layout.scss */
   .holder-hide {
     -moz-transition-duration: 0.2s;
@@ -739,16 +739,16 @@ mct-container {
     -webkit-transition-duration: 0.2s;
     transition-duration: 0.2s;
     left: -257px; } }
-@media screen and (min-width: 515px) and (max-width: 800px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 800px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-height: 515px) and (max-height: 800px) and (min-width: 741px) and (max-width: 1024px) and (orientation: landscape) {
+@media screen and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1023px) and (max-device-width: 799px) and (max-device-height: 1023px) and (orientation: portrait), screen and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1023px) and (orientation: landscape) {
   /* line 26, ../sass/mobile/_layout.scss */
   .holder-hide {
     -moz-transition-duration: 0.2s;
     -o-transition-duration: 0.2s;
     -webkit-transition-duration: 0.2s;
     transition-duration: 0.2s;
-    left: -400px; } }
+    left: -399.5px; } }
 
-@media screen and (max-width: 514px) and (max-height: 740px) and (max-device-width: 800px) and (max-device-height: 1024px) and (orientation: portrait), screen and (max-height: 514px) and (max-width: 740px) and (orientation: landscape) {
+@media screen and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1023px) and (orientation: portrait), screen and (max-height: 514px) and (max-width: 740px) and (orientation: landscape) {
   /* line 37, ../sass/mobile/_layout.scss */
   .holder-show {
     -moz-transition-duration: 0.2s;
@@ -756,7 +756,7 @@ mct-container {
     -webkit-transition-duration: 0.2s;
     transition-duration: 0.2s;
     left: 0px; } }
-@media screen and (min-width: 515px) and (max-width: 800px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 800px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-height: 515px) and (max-height: 800px) and (min-width: 741px) and (max-width: 1024px) and (orientation: landscape) {
+@media screen and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1023px) and (max-device-width: 799px) and (max-device-height: 1023px) and (orientation: portrait), screen and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1023px) and (orientation: landscape) {
   /* line 37, ../sass/mobile/_layout.scss */
   .holder-show {
     -moz-transition-duration: 0.2s;
@@ -768,7 +768,7 @@ mct-container {
 /* line 48, ../sass/mobile/_layout.scss */
 .button-show {
   position: absolute; }
-  @media screen and (max-width: 514px) and (max-height: 740px) and (max-device-width: 800px) and (max-device-height: 1024px) and (orientation: portrait), screen and (max-height: 514px) and (max-width: 740px) and (orientation: landscape) {
+  @media screen and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1023px) and (orientation: portrait), screen and (max-height: 514px) and (max-width: 740px) and (orientation: landscape) {
     /* line 48, ../sass/mobile/_layout.scss */
     .button-show {
       -moz-transition-duration: 0.2s;
@@ -776,14 +776,14 @@ mct-container {
       -webkit-transition-duration: 0.2s;
       transition-duration: 0.2s;
       left: 257px; } }
-  @media screen and (min-width: 515px) and (max-width: 800px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 800px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-height: 515px) and (max-height: 800px) and (min-width: 741px) and (max-width: 1024px) and (orientation: landscape) {
+  @media screen and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1023px) and (max-device-width: 799px) and (max-device-height: 1023px) and (orientation: portrait), screen and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1023px) and (orientation: landscape) {
     /* line 48, ../sass/mobile/_layout.scss */
     .button-show {
       -moz-transition-duration: 0.2s;
       -o-transition-duration: 0.2s;
       -webkit-transition-duration: 0.2s;
       transition-duration: 0.2s;
-      left: 400px; } }
+      left: 399.5px; } }
 
 /* line 60, ../sass/mobile/_layout.scss */
 .button-hide {
@@ -792,44 +792,44 @@ mct-container {
   -o-transition-duration: 0.2s;
   -webkit-transition-duration: 0.2s;
   transition-duration: 0.2s; }
-  @media screen and (max-width: 514px) and (max-height: 740px) and (max-device-width: 800px) and (max-device-height: 1024px) and (orientation: portrait), screen and (max-height: 514px) and (max-width: 740px) and (orientation: landscape) {
+  @media screen and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1023px) and (orientation: portrait), screen and (max-height: 514px) and (max-width: 740px) and (orientation: landscape) {
     /* line 60, ../sass/mobile/_layout.scss */
     .button-hide {
       left: 257px; } }
-  @media screen and (min-width: 515px) and (max-width: 800px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 800px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-height: 515px) and (max-height: 800px) and (min-width: 741px) and (max-width: 1024px) and (orientation: landscape) {
+  @media screen and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1023px) and (max-device-width: 799px) and (max-device-height: 1023px) and (orientation: portrait), screen and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1023px) and (orientation: landscape) {
     /* line 60, ../sass/mobile/_layout.scss */
     .button-hide {
-      left: 400px; } }
+      left: 399.5px; } }
 
 /* line 71, ../sass/mobile/_layout.scss */
 .object-header-mobile {
   position: relative; }
-  @media screen and (max-width: 514px) and (max-height: 740px) and (max-device-width: 800px) and (max-device-height: 1024px) and (orientation: portrait), screen and (max-height: 514px) and (max-width: 740px) and (orientation: landscape) {
+  @media screen and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1023px) and (orientation: portrait), screen and (max-height: 514px) and (max-width: 740px) and (orientation: landscape) {
     /* line 71, ../sass/mobile/_layout.scss */
     .object-header-mobile {
       left: 25.7px; } }
-  @media screen and (min-width: 515px) and (max-width: 800px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 800px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-height: 515px) and (max-height: 800px) and (min-width: 741px) and (max-width: 1024px) and (orientation: landscape) {
+  @media screen and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1023px) and (max-device-width: 799px) and (max-device-height: 1023px) and (orientation: portrait), screen and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1023px) and (orientation: landscape) {
     /* line 71, ../sass/mobile/_layout.scss */
     .object-header-mobile {
-      left: 40px; } }
+      left: 39.95px; } }
 
 /* line 81, ../sass/mobile/_layout.scss */
 .mobile-menu-icon {
   top: 5px; }
-  @media screen and (min-device-width: 801px) and (min-device-height: 1025px) and (orientation: portrait), screen and (min-device-width: 1025px) and (min-device-height: 801px) and (orientation: landscape) {
+  @media screen and (min-device-width: 800px) and (min-device-height: 1024px) and (orientation: portrait), screen and (min-device-width: 1024px) and (min-device-height: 800px) and (orientation: landscape) {
     /* line 81, ../sass/mobile/_layout.scss */
     .mobile-menu-icon {
       display: none; } }
 
-@media screen and (max-width: 514px) and (max-height: 740px) and (max-device-width: 800px) and (max-device-height: 1024px) and (orientation: portrait), screen and (max-height: 514px) and (max-width: 740px) and (orientation: landscape) {
+@media screen and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1023px) and (orientation: portrait), screen and (max-height: 514px) and (max-width: 740px) and (orientation: landscape) {
   /* line 88, ../sass/mobile/_layout.scss */
   .browse-manage {
     width: 257px; } }
-@media screen and (min-width: 515px) and (max-width: 800px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 800px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-height: 515px) and (max-height: 800px) and (min-width: 741px) and (max-width: 1024px) and (orientation: landscape) {
+@media screen and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1023px) and (max-device-width: 799px) and (max-device-height: 1023px) and (orientation: portrait), screen and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1023px) and (orientation: landscape) {
   /* line 88, ../sass/mobile/_layout.scss */
   .browse-manage {
-    width: 400px; } }
-@media screen and (min-device-width: 801px) and (min-device-height: 1025px) and (orientation: portrait), screen and (min-device-width: 1025px) and (min-device-height: 801px) and (orientation: landscape) {
+    width: 399.5px; } }
+@media screen and (min-device-width: 800px) and (min-device-height: 1024px) and (orientation: portrait), screen and (min-device-width: 1024px) and (min-device-height: 800px) and (orientation: landscape) {
   /* line 88, ../sass/mobile/_layout.scss */
   .browse-manage {
     min-width: 150px;
diff --git a/platform/commonUI/general/res/sass/mobile/_constants.scss b/platform/commonUI/general/res/sass/mobile/_constants.scss
index 5e8f9a7f35..bf19012dda 100644
--- a/platform/commonUI/general/res/sass/mobile/_constants.scss
+++ b/platform/commonUI/general/res/sass/mobile/_constants.scss
@@ -30,12 +30,12 @@ $phoHeiPorCheck: "(max-height: #{$phoMaxH})";
 $phoHeiLanCheck: "(max-width: #{$phoMaxH})";
 
 $tabMinW: 515px;
-$tabMaxW: 800px;
+$tabMaxW: 799px;
 $tabWidPorCheck: "(min-width: #{$tabMinW}) and (max-width: #{$tabMaxW})";
 $tabWidLanCheck: "(min-height: #{$tabMinW}) and (max-height: #{$tabMaxW})";
 
 $tabMinH: 741px;
-$tabMaxH: 1024px;
+$tabMaxH: 1023px;
 $tabHeiPorCheck: "(min-height: #{$tabMinH}) and (max-height: #{$tabMaxH})";
 $tabHeiLanCheck: "(min-width: #{$tabMinH}) and (max-width: #{$tabMaxH})";
 
@@ -47,8 +47,8 @@ $phoneHeight: "screen and #{$phoWidLanCheck} and #{$phoHeiLanCheck} and (orienta
 $tabletWidth: "screen and #{$tabWidPorCheck} and #{$tabHeiPorCheck} and #{$mobileDevice} and (orientation: portrait)";
 $tabletHeight: "screen and #{$tabWidLanCheck} and #{$tabHeiLanCheck} and (orientation: landscape)";
 
-$compMinW: 801px;
-$compMinH: 1025px;
+$compMinW: 800px;
+$compMinH: 1024px;
 
 $desktopDevicePortrait: "(min-device-width: #{$compMinW}) and (min-device-height: #{$compMinH})";
 $desktopDeviceLandscape: "(min-device-width: #{$compMinH}) and (min-device-height: #{$compMinW})";

From 687f810475650cdb19be1f8351cfbed8ab687002 Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Mon, 13 Jul 2015 10:23:28 -0700
Subject: [PATCH 047/209] [Mobile] Constants

Fixed width constant to work for laptop.
---
 platform/commonUI/general/res/css/items.css   | 10 +++----
 .../general/res/css/theme-espresso.css        | 28 +++++++++----------
 .../general/res/sass/mobile/_constants.scss   |  4 +--
 3 files changed, 21 insertions(+), 21 deletions(-)

diff --git a/platform/commonUI/general/res/css/items.css b/platform/commonUI/general/res/css/items.css
index 17d1dc03c4..d348a96d9a 100644
--- a/platform/commonUI/general/res/css/items.css
+++ b/platform/commonUI/general/res/css/items.css
@@ -347,26 +347,26 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-@media screen and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1023px) and (orientation: portrait), screen and (max-height: 514px) and (max-width: 740px) and (orientation: landscape) {
+@media screen and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) and (orientation: portrait), screen and (max-height: 514px) and (max-width: 740px) and (orientation: landscape) {
   /* line 24, ../sass/mobile/_item.scss */
   .items-holder .item.grid-item {
     width: 100%;
     height: 50px; } }
-@media screen and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1023px) and (max-device-width: 799px) and (max-device-height: 1023px) and (orientation: portrait), screen and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1023px) and (orientation: landscape) {
+@media screen 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) and (orientation: portrait), screen and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (orientation: landscape) {
   /* line 24, ../sass/mobile/_item.scss */
   .items-holder .item.grid-item {
     width: 100%;
     height: 100px; } }
-@media screen and (min-device-width: 800px) and (min-device-height: 1024px) and (orientation: portrait), screen and (min-device-width: 1024px) and (min-device-height: 800px) and (orientation: landscape) {
+@media screen and (min-device-width: 800px) and (min-device-height: 1025px) and (orientation: portrait), screen and (min-device-width: 1025px) and (min-device-height: 800px) and (orientation: landscape) {
   /* line 24, ../sass/mobile/_item.scss */
   .items-holder .item.grid-item {
     width: 200px;
     height: 200px; } }
-@media screen and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1023px) and (orientation: portrait), screen and (max-height: 514px) and (max-width: 740px) and (orientation: landscape) {
+@media screen and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) and (orientation: portrait), screen and (max-height: 514px) and (max-width: 740px) and (orientation: landscape) {
   /* line 49, ../sass/mobile/_item.scss */
   .items-holder .item.grid-item .icon {
     display: none; } }
-@media screen and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1023px) and (max-device-width: 799px) and (max-device-height: 1023px) and (orientation: portrait), screen and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1023px) and (orientation: landscape) {
+@media screen 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) and (orientation: portrait), screen and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (orientation: landscape) {
   /* line 49, ../sass/mobile/_item.scss */
   .items-holder .item.grid-item .icon {
     display: none; } }
diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index aafa198c9e..7f3be73b91 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -731,7 +731,7 @@ mct-container {
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-@media screen and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1023px) and (orientation: portrait), screen and (max-height: 514px) and (max-width: 740px) and (orientation: landscape) {
+@media screen and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) and (orientation: portrait), screen and (max-height: 514px) and (max-width: 740px) and (orientation: landscape) {
   /* line 26, ../sass/mobile/_layout.scss */
   .holder-hide {
     -moz-transition-duration: 0.2s;
@@ -739,7 +739,7 @@ mct-container {
     -webkit-transition-duration: 0.2s;
     transition-duration: 0.2s;
     left: -257px; } }
-@media screen and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1023px) and (max-device-width: 799px) and (max-device-height: 1023px) and (orientation: portrait), screen and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1023px) and (orientation: landscape) {
+@media screen 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) and (orientation: portrait), screen and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (orientation: landscape) {
   /* line 26, ../sass/mobile/_layout.scss */
   .holder-hide {
     -moz-transition-duration: 0.2s;
@@ -748,7 +748,7 @@ mct-container {
     transition-duration: 0.2s;
     left: -399.5px; } }
 
-@media screen and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1023px) and (orientation: portrait), screen and (max-height: 514px) and (max-width: 740px) and (orientation: landscape) {
+@media screen and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) and (orientation: portrait), screen and (max-height: 514px) and (max-width: 740px) and (orientation: landscape) {
   /* line 37, ../sass/mobile/_layout.scss */
   .holder-show {
     -moz-transition-duration: 0.2s;
@@ -756,7 +756,7 @@ mct-container {
     -webkit-transition-duration: 0.2s;
     transition-duration: 0.2s;
     left: 0px; } }
-@media screen and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1023px) and (max-device-width: 799px) and (max-device-height: 1023px) and (orientation: portrait), screen and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1023px) and (orientation: landscape) {
+@media screen 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) and (orientation: portrait), screen and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (orientation: landscape) {
   /* line 37, ../sass/mobile/_layout.scss */
   .holder-show {
     -moz-transition-duration: 0.2s;
@@ -768,7 +768,7 @@ mct-container {
 /* line 48, ../sass/mobile/_layout.scss */
 .button-show {
   position: absolute; }
-  @media screen and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1023px) and (orientation: portrait), screen and (max-height: 514px) and (max-width: 740px) and (orientation: landscape) {
+  @media screen and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) and (orientation: portrait), screen and (max-height: 514px) and (max-width: 740px) and (orientation: landscape) {
     /* line 48, ../sass/mobile/_layout.scss */
     .button-show {
       -moz-transition-duration: 0.2s;
@@ -776,7 +776,7 @@ mct-container {
       -webkit-transition-duration: 0.2s;
       transition-duration: 0.2s;
       left: 257px; } }
-  @media screen and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1023px) and (max-device-width: 799px) and (max-device-height: 1023px) and (orientation: portrait), screen and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1023px) and (orientation: landscape) {
+  @media screen 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) and (orientation: portrait), screen and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (orientation: landscape) {
     /* line 48, ../sass/mobile/_layout.scss */
     .button-show {
       -moz-transition-duration: 0.2s;
@@ -792,11 +792,11 @@ mct-container {
   -o-transition-duration: 0.2s;
   -webkit-transition-duration: 0.2s;
   transition-duration: 0.2s; }
-  @media screen and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1023px) and (orientation: portrait), screen and (max-height: 514px) and (max-width: 740px) and (orientation: landscape) {
+  @media screen and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) and (orientation: portrait), screen and (max-height: 514px) and (max-width: 740px) and (orientation: landscape) {
     /* line 60, ../sass/mobile/_layout.scss */
     .button-hide {
       left: 257px; } }
-  @media screen and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1023px) and (max-device-width: 799px) and (max-device-height: 1023px) and (orientation: portrait), screen and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1023px) and (orientation: landscape) {
+  @media screen 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) and (orientation: portrait), screen and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (orientation: landscape) {
     /* line 60, ../sass/mobile/_layout.scss */
     .button-hide {
       left: 399.5px; } }
@@ -804,11 +804,11 @@ mct-container {
 /* line 71, ../sass/mobile/_layout.scss */
 .object-header-mobile {
   position: relative; }
-  @media screen and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1023px) and (orientation: portrait), screen and (max-height: 514px) and (max-width: 740px) and (orientation: landscape) {
+  @media screen and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) and (orientation: portrait), screen and (max-height: 514px) and (max-width: 740px) and (orientation: landscape) {
     /* line 71, ../sass/mobile/_layout.scss */
     .object-header-mobile {
       left: 25.7px; } }
-  @media screen and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1023px) and (max-device-width: 799px) and (max-device-height: 1023px) and (orientation: portrait), screen and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1023px) and (orientation: landscape) {
+  @media screen 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) and (orientation: portrait), screen and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (orientation: landscape) {
     /* line 71, ../sass/mobile/_layout.scss */
     .object-header-mobile {
       left: 39.95px; } }
@@ -816,20 +816,20 @@ mct-container {
 /* line 81, ../sass/mobile/_layout.scss */
 .mobile-menu-icon {
   top: 5px; }
-  @media screen and (min-device-width: 800px) and (min-device-height: 1024px) and (orientation: portrait), screen and (min-device-width: 1024px) and (min-device-height: 800px) and (orientation: landscape) {
+  @media screen and (min-device-width: 800px) and (min-device-height: 1025px) and (orientation: portrait), screen and (min-device-width: 1025px) and (min-device-height: 800px) and (orientation: landscape) {
     /* line 81, ../sass/mobile/_layout.scss */
     .mobile-menu-icon {
       display: none; } }
 
-@media screen and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1023px) and (orientation: portrait), screen and (max-height: 514px) and (max-width: 740px) and (orientation: landscape) {
+@media screen and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) and (orientation: portrait), screen and (max-height: 514px) and (max-width: 740px) and (orientation: landscape) {
   /* line 88, ../sass/mobile/_layout.scss */
   .browse-manage {
     width: 257px; } }
-@media screen and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1023px) and (max-device-width: 799px) and (max-device-height: 1023px) and (orientation: portrait), screen and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1023px) and (orientation: landscape) {
+@media screen 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) and (orientation: portrait), screen and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (orientation: landscape) {
   /* line 88, ../sass/mobile/_layout.scss */
   .browse-manage {
     width: 399.5px; } }
-@media screen and (min-device-width: 800px) and (min-device-height: 1024px) and (orientation: portrait), screen and (min-device-width: 1024px) and (min-device-height: 800px) and (orientation: landscape) {
+@media screen and (min-device-width: 800px) and (min-device-height: 1025px) and (orientation: portrait), screen and (min-device-width: 1025px) and (min-device-height: 800px) and (orientation: landscape) {
   /* line 88, ../sass/mobile/_layout.scss */
   .browse-manage {
     min-width: 150px;
diff --git a/platform/commonUI/general/res/sass/mobile/_constants.scss b/platform/commonUI/general/res/sass/mobile/_constants.scss
index bf19012dda..7500707a63 100644
--- a/platform/commonUI/general/res/sass/mobile/_constants.scss
+++ b/platform/commonUI/general/res/sass/mobile/_constants.scss
@@ -35,7 +35,7 @@ $tabWidPorCheck: "(min-width: #{$tabMinW}) and (max-width: #{$tabMaxW})";
 $tabWidLanCheck: "(min-height: #{$tabMinW}) and (max-height: #{$tabMaxW})";
 
 $tabMinH: 741px;
-$tabMaxH: 1023px;
+$tabMaxH: 1024px;
 $tabHeiPorCheck: "(min-height: #{$tabMinH}) and (max-height: #{$tabMaxH})";
 $tabHeiLanCheck: "(min-width: #{$tabMinH}) and (max-width: #{$tabMaxH})";
 
@@ -48,7 +48,7 @@ $tabletWidth: "screen and #{$tabWidPorCheck} and #{$tabHeiPorCheck} and #{$mobil
 $tabletHeight: "screen and #{$tabWidLanCheck} and #{$tabHeiLanCheck} and (orientation: landscape)";
 
 $compMinW: 800px;
-$compMinH: 1024px;
+$compMinH: 1025px;
 
 $desktopDevicePortrait: "(min-device-width: #{$compMinW}) and (min-device-height: #{$compMinH})";
 $desktopDeviceLandscape: "(min-device-width: #{$compMinH}) and (min-device-height: #{$compMinW})";

From 885433390e0778891a724e48a3ad02d5b24bbd27 Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Mon, 13 Jul 2015 10:32:58 -0700
Subject: [PATCH 048/209] [Mobile] Fix for emu and act

Adds 2 landscape conditions for tablets and
phones to check if they are in landscape, in
the actual tablet, or in an emulate of the tablet,
then it displays.
---
 platform/commonUI/general/res/css/items.css   |  8 +++----
 .../general/res/css/theme-espresso.css        | 24 +++++++++----------
 .../general/res/sass/mobile/_constants.scss   |  7 ++++--
 .../general/res/sass/mobile/_mixins.scss      |  6 +++--
 4 files changed, 25 insertions(+), 20 deletions(-)

diff --git a/platform/commonUI/general/res/css/items.css b/platform/commonUI/general/res/css/items.css
index d348a96d9a..c0b691e897 100644
--- a/platform/commonUI/general/res/css/items.css
+++ b/platform/commonUI/general/res/css/items.css
@@ -347,12 +347,12 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-@media screen and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) and (orientation: portrait), screen and (max-height: 514px) and (max-width: 740px) and (orientation: landscape) {
+@media screen and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) and (orientation: portrait), screen and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) and (orientation: landscape), screen and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) and (orientation: landscape) {
   /* line 24, ../sass/mobile/_item.scss */
   .items-holder .item.grid-item {
     width: 100%;
     height: 50px; } }
-@media screen 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) and (orientation: portrait), screen and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (orientation: landscape) {
+@media screen 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) and (orientation: portrait), screen 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) and (orientation: landscape), screen 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) and (orientation: landscape) {
   /* line 24, ../sass/mobile/_item.scss */
   .items-holder .item.grid-item {
     width: 100%;
@@ -362,11 +362,11 @@
   .items-holder .item.grid-item {
     width: 200px;
     height: 200px; } }
-@media screen and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) and (orientation: portrait), screen and (max-height: 514px) and (max-width: 740px) and (orientation: landscape) {
+@media screen and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) and (orientation: portrait), screen and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) and (orientation: landscape), screen and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) and (orientation: landscape) {
   /* line 49, ../sass/mobile/_item.scss */
   .items-holder .item.grid-item .icon {
     display: none; } }
-@media screen 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) and (orientation: portrait), screen and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (orientation: landscape) {
+@media screen 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) and (orientation: portrait), screen 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) and (orientation: landscape), screen 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) and (orientation: landscape) {
   /* line 49, ../sass/mobile/_item.scss */
   .items-holder .item.grid-item .icon {
     display: none; } }
diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index 7f3be73b91..4ee5eb2863 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -731,7 +731,7 @@ mct-container {
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-@media screen and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) and (orientation: portrait), screen and (max-height: 514px) and (max-width: 740px) and (orientation: landscape) {
+@media screen and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) and (orientation: portrait), screen and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) and (orientation: landscape), screen and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) and (orientation: landscape) {
   /* line 26, ../sass/mobile/_layout.scss */
   .holder-hide {
     -moz-transition-duration: 0.2s;
@@ -739,7 +739,7 @@ mct-container {
     -webkit-transition-duration: 0.2s;
     transition-duration: 0.2s;
     left: -257px; } }
-@media screen 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) and (orientation: portrait), screen and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (orientation: landscape) {
+@media screen 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) and (orientation: portrait), screen 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) and (orientation: landscape), screen 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) and (orientation: landscape) {
   /* line 26, ../sass/mobile/_layout.scss */
   .holder-hide {
     -moz-transition-duration: 0.2s;
@@ -748,7 +748,7 @@ mct-container {
     transition-duration: 0.2s;
     left: -399.5px; } }
 
-@media screen and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) and (orientation: portrait), screen and (max-height: 514px) and (max-width: 740px) and (orientation: landscape) {
+@media screen and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) and (orientation: portrait), screen and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) and (orientation: landscape), screen and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) and (orientation: landscape) {
   /* line 37, ../sass/mobile/_layout.scss */
   .holder-show {
     -moz-transition-duration: 0.2s;
@@ -756,7 +756,7 @@ mct-container {
     -webkit-transition-duration: 0.2s;
     transition-duration: 0.2s;
     left: 0px; } }
-@media screen 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) and (orientation: portrait), screen and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (orientation: landscape) {
+@media screen 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) and (orientation: portrait), screen 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) and (orientation: landscape), screen 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) and (orientation: landscape) {
   /* line 37, ../sass/mobile/_layout.scss */
   .holder-show {
     -moz-transition-duration: 0.2s;
@@ -768,7 +768,7 @@ mct-container {
 /* line 48, ../sass/mobile/_layout.scss */
 .button-show {
   position: absolute; }
-  @media screen and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) and (orientation: portrait), screen and (max-height: 514px) and (max-width: 740px) and (orientation: landscape) {
+  @media screen and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) and (orientation: portrait), screen and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) and (orientation: landscape), screen and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) and (orientation: landscape) {
     /* line 48, ../sass/mobile/_layout.scss */
     .button-show {
       -moz-transition-duration: 0.2s;
@@ -776,7 +776,7 @@ mct-container {
       -webkit-transition-duration: 0.2s;
       transition-duration: 0.2s;
       left: 257px; } }
-  @media screen 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) and (orientation: portrait), screen and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (orientation: landscape) {
+  @media screen 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) and (orientation: portrait), screen 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) and (orientation: landscape), screen 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) and (orientation: landscape) {
     /* line 48, ../sass/mobile/_layout.scss */
     .button-show {
       -moz-transition-duration: 0.2s;
@@ -792,11 +792,11 @@ mct-container {
   -o-transition-duration: 0.2s;
   -webkit-transition-duration: 0.2s;
   transition-duration: 0.2s; }
-  @media screen and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) and (orientation: portrait), screen and (max-height: 514px) and (max-width: 740px) and (orientation: landscape) {
+  @media screen and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) and (orientation: portrait), screen and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) and (orientation: landscape), screen and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) and (orientation: landscape) {
     /* line 60, ../sass/mobile/_layout.scss */
     .button-hide {
       left: 257px; } }
-  @media screen 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) and (orientation: portrait), screen and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (orientation: landscape) {
+  @media screen 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) and (orientation: portrait), screen 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) and (orientation: landscape), screen 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) and (orientation: landscape) {
     /* line 60, ../sass/mobile/_layout.scss */
     .button-hide {
       left: 399.5px; } }
@@ -804,11 +804,11 @@ mct-container {
 /* line 71, ../sass/mobile/_layout.scss */
 .object-header-mobile {
   position: relative; }
-  @media screen and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) and (orientation: portrait), screen and (max-height: 514px) and (max-width: 740px) and (orientation: landscape) {
+  @media screen and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) and (orientation: portrait), screen and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) and (orientation: landscape), screen and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) and (orientation: landscape) {
     /* line 71, ../sass/mobile/_layout.scss */
     .object-header-mobile {
       left: 25.7px; } }
-  @media screen 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) and (orientation: portrait), screen and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (orientation: landscape) {
+  @media screen 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) and (orientation: portrait), screen 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) and (orientation: landscape), screen 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) and (orientation: landscape) {
     /* line 71, ../sass/mobile/_layout.scss */
     .object-header-mobile {
       left: 39.95px; } }
@@ -821,11 +821,11 @@ mct-container {
     .mobile-menu-icon {
       display: none; } }
 
-@media screen and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) and (orientation: portrait), screen and (max-height: 514px) and (max-width: 740px) and (orientation: landscape) {
+@media screen and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) and (orientation: portrait), screen and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) and (orientation: landscape), screen and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) and (orientation: landscape) {
   /* line 88, ../sass/mobile/_layout.scss */
   .browse-manage {
     width: 257px; } }
-@media screen 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) and (orientation: portrait), screen and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (orientation: landscape) {
+@media screen 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) and (orientation: portrait), screen 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) and (orientation: landscape), screen 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) and (orientation: landscape) {
   /* line 88, ../sass/mobile/_layout.scss */
   .browse-manage {
     width: 399.5px; } }
diff --git a/platform/commonUI/general/res/sass/mobile/_constants.scss b/platform/commonUI/general/res/sass/mobile/_constants.scss
index 7500707a63..afee63e8e5 100644
--- a/platform/commonUI/general/res/sass/mobile/_constants.scss
+++ b/platform/commonUI/general/res/sass/mobile/_constants.scss
@@ -40,12 +40,15 @@ $tabHeiPorCheck: "(min-height: #{$tabMinH}) and (max-height: #{$tabMaxH})";
 $tabHeiLanCheck: "(min-width: #{$tabMinH}) and (max-width: #{$tabMaxH})";
 
 $mobileDevice: "(max-device-width: #{$tabMaxW}) and (max-device-height: #{$tabMaxH})";
+$mobileDeviceEmu: "(max-device-width: #{$tabMaxH}) and (max-device-height: #{$tabMaxW})";
 
 $phoneWidth: "screen and #{$phoWidPorCheck} and #{$phoHeiPorCheck} and #{$mobileDevice} and (orientation: portrait)";
-$phoneHeight: "screen and #{$phoWidLanCheck} and #{$phoHeiLanCheck} and (orientation: landscape)";
+$phoneHeight: "screen and #{$phoWidLanCheck} and #{$phoHeiLanCheck} and #{$mobileDevice} and (orientation: landscape)";
+$phoneHeightEmu: "screen and #{$phoWidLanCheck} and #{$phoHeiLanCheck} and #{$mobileDeviceEmu} and (orientation: landscape)";
 
 $tabletWidth: "screen and #{$tabWidPorCheck} and #{$tabHeiPorCheck} and #{$mobileDevice} and (orientation: portrait)";
-$tabletHeight: "screen and #{$tabWidLanCheck} and #{$tabHeiLanCheck} and (orientation: landscape)";
+$tabletHeight: "screen and #{$tabWidLanCheck} and #{$tabHeiLanCheck} and #{$mobileDevice} and (orientation: landscape)";
+$tabletHeightEmu: "screen and #{$tabWidLanCheck} and #{$tabHeiLanCheck} and #{$mobileDeviceEmu} and (orientation: landscape)";
 
 $compMinW: 800px;
 $compMinH: 1025px;
diff --git a/platform/commonUI/general/res/sass/mobile/_mixins.scss b/platform/commonUI/general/res/sass/mobile/_mixins.scss
index 58127a0c14..f71edf2c8c 100644
--- a/platform/commonUI/general/res/sass/mobile/_mixins.scss
+++ b/platform/commonUI/general/res/sass/mobile/_mixins.scss
@@ -23,14 +23,16 @@
 // NOTE: Mixins for devices
 @mixin phone {
     @media #{$phoneWidth},
-           #{$phoneHeight} {
+           #{$phoneHeight},
+           #{$phoneHeightEmu}{
         @content
     }
 }
 
 @mixin tablet {
     @media #{$tabletWidth},
-           #{$tabletHeight} {
+           #{$tabletHeight},
+           #{$tabletHeightEmu}{
         @content
     }
 }

From be757066f57f2e5ca76522353058427934077862 Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Mon, 13 Jul 2015 11:18:51 -0700
Subject: [PATCH 049/209] [Mobile] Desktop adjusted

Adjusted the desktop to accomodate browser
orientation changes. Done so by forgoing
checking the orientation because the
actual device can be in landscape, but it
reads orientation based on the viewport.
---
 platform/commonUI/general/res/css/forms.css   |  1 +
 platform/commonUI/general/res/css/items.css   | 11 ++---
 .../general/res/css/theme-espresso.css        | 29 +++++++------
 platform/commonUI/general/res/css/tree.css    |  1 +
 .../general/res/sass/mobile/_constants.scss   | 43 +++++++++++--------
 5 files changed, 49 insertions(+), 36 deletions(-)

diff --git a/platform/commonUI/general/res/css/forms.css b/platform/commonUI/general/res/css/forms.css
index 7644418de2..ea4af06eee 100644
--- a/platform/commonUI/general/res/css/forms.css
+++ b/platform/commonUI/general/res/css/forms.css
@@ -70,6 +70,7 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 /************************** WINDOW DIMENSIONS FOR RWD */
+/************************** WINDOW CHECKS FOR RWD */
 /*****************************************************************************
  * Open MCT Web, Copyright (c) 2014-2015, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
diff --git a/platform/commonUI/general/res/css/items.css b/platform/commonUI/general/res/css/items.css
index c0b691e897..ba1c8234c6 100644
--- a/platform/commonUI/general/res/css/items.css
+++ b/platform/commonUI/general/res/css/items.css
@@ -70,6 +70,7 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 /************************** WINDOW DIMENSIONS FOR RWD */
+/************************** WINDOW CHECKS FOR RWD */
 /*****************************************************************************
  * Open MCT Web, Copyright (c) 2014-2015, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
@@ -347,26 +348,26 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-@media screen and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) and (orientation: portrait), screen and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) and (orientation: landscape), screen and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) and (orientation: landscape) {
+@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 24, ../sass/mobile/_item.scss */
   .items-holder .item.grid-item {
     width: 100%;
     height: 50px; } }
-@media screen 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) and (orientation: portrait), screen 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) and (orientation: landscape), screen 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) and (orientation: landscape) {
+@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 24, ../sass/mobile/_item.scss */
   .items-holder .item.grid-item {
     width: 100%;
     height: 100px; } }
-@media screen and (min-device-width: 800px) and (min-device-height: 1025px) and (orientation: portrait), screen and (min-device-width: 1025px) and (min-device-height: 800px) and (orientation: landscape) {
+@media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
   /* line 24, ../sass/mobile/_item.scss */
   .items-holder .item.grid-item {
     width: 200px;
     height: 200px; } }
-@media screen and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) and (orientation: portrait), screen and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) and (orientation: landscape), screen and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) and (orientation: landscape) {
+@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 49, ../sass/mobile/_item.scss */
   .items-holder .item.grid-item .icon {
     display: none; } }
-@media screen 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) and (orientation: portrait), screen 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) and (orientation: landscape), screen 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) and (orientation: landscape) {
+@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 49, ../sass/mobile/_item.scss */
   .items-holder .item.grid-item .icon {
     display: none; } }
diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index 4ee5eb2863..4166dc61b5 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -71,6 +71,7 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 /************************** WINDOW DIMENSIONS FOR RWD */
+/************************** WINDOW CHECKS FOR RWD */
 /*****************************************************************************
  * Open MCT Web, Copyright (c) 2014-2015, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
@@ -731,7 +732,7 @@ mct-container {
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-@media screen and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) and (orientation: portrait), screen and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) and (orientation: landscape), screen and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) and (orientation: landscape) {
+@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 26, ../sass/mobile/_layout.scss */
   .holder-hide {
     -moz-transition-duration: 0.2s;
@@ -739,7 +740,7 @@ mct-container {
     -webkit-transition-duration: 0.2s;
     transition-duration: 0.2s;
     left: -257px; } }
-@media screen 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) and (orientation: portrait), screen 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) and (orientation: landscape), screen 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) and (orientation: landscape) {
+@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 26, ../sass/mobile/_layout.scss */
   .holder-hide {
     -moz-transition-duration: 0.2s;
@@ -748,7 +749,7 @@ mct-container {
     transition-duration: 0.2s;
     left: -399.5px; } }
 
-@media screen and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) and (orientation: portrait), screen and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) and (orientation: landscape), screen and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) and (orientation: landscape) {
+@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 37, ../sass/mobile/_layout.scss */
   .holder-show {
     -moz-transition-duration: 0.2s;
@@ -756,7 +757,7 @@ mct-container {
     -webkit-transition-duration: 0.2s;
     transition-duration: 0.2s;
     left: 0px; } }
-@media screen 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) and (orientation: portrait), screen 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) and (orientation: landscape), screen 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) and (orientation: landscape) {
+@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 37, ../sass/mobile/_layout.scss */
   .holder-show {
     -moz-transition-duration: 0.2s;
@@ -768,7 +769,7 @@ mct-container {
 /* line 48, ../sass/mobile/_layout.scss */
 .button-show {
   position: absolute; }
-  @media screen and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) and (orientation: portrait), screen and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) and (orientation: landscape), screen and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) and (orientation: landscape) {
+  @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 48, ../sass/mobile/_layout.scss */
     .button-show {
       -moz-transition-duration: 0.2s;
@@ -776,7 +777,7 @@ mct-container {
       -webkit-transition-duration: 0.2s;
       transition-duration: 0.2s;
       left: 257px; } }
-  @media screen 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) and (orientation: portrait), screen 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) and (orientation: landscape), screen 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) and (orientation: landscape) {
+  @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 48, ../sass/mobile/_layout.scss */
     .button-show {
       -moz-transition-duration: 0.2s;
@@ -792,11 +793,11 @@ mct-container {
   -o-transition-duration: 0.2s;
   -webkit-transition-duration: 0.2s;
   transition-duration: 0.2s; }
-  @media screen and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) and (orientation: portrait), screen and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) and (orientation: landscape), screen and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) and (orientation: landscape) {
+  @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 60, ../sass/mobile/_layout.scss */
     .button-hide {
       left: 257px; } }
-  @media screen 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) and (orientation: portrait), screen 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) and (orientation: landscape), screen 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) and (orientation: landscape) {
+  @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 60, ../sass/mobile/_layout.scss */
     .button-hide {
       left: 399.5px; } }
@@ -804,11 +805,11 @@ mct-container {
 /* line 71, ../sass/mobile/_layout.scss */
 .object-header-mobile {
   position: relative; }
-  @media screen and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) and (orientation: portrait), screen and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) and (orientation: landscape), screen and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) and (orientation: landscape) {
+  @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 71, ../sass/mobile/_layout.scss */
     .object-header-mobile {
       left: 25.7px; } }
-  @media screen 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) and (orientation: portrait), screen 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) and (orientation: landscape), screen 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) and (orientation: landscape) {
+  @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 71, ../sass/mobile/_layout.scss */
     .object-header-mobile {
       left: 39.95px; } }
@@ -816,20 +817,20 @@ mct-container {
 /* line 81, ../sass/mobile/_layout.scss */
 .mobile-menu-icon {
   top: 5px; }
-  @media screen and (min-device-width: 800px) and (min-device-height: 1025px) and (orientation: portrait), screen and (min-device-width: 1025px) and (min-device-height: 800px) and (orientation: landscape) {
+  @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
     /* line 81, ../sass/mobile/_layout.scss */
     .mobile-menu-icon {
       display: none; } }
 
-@media screen and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) and (orientation: portrait), screen and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) and (orientation: landscape), screen and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) and (orientation: landscape) {
+@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 88, ../sass/mobile/_layout.scss */
   .browse-manage {
     width: 257px; } }
-@media screen 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) and (orientation: portrait), screen 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) and (orientation: landscape), screen 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) and (orientation: landscape) {
+@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 88, ../sass/mobile/_layout.scss */
   .browse-manage {
     width: 399.5px; } }
-@media screen and (min-device-width: 800px) and (min-device-height: 1025px) and (orientation: portrait), screen and (min-device-width: 1025px) and (min-device-height: 800px) and (orientation: landscape) {
+@media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
   /* line 88, ../sass/mobile/_layout.scss */
   .browse-manage {
     min-width: 150px;
diff --git a/platform/commonUI/general/res/css/tree.css b/platform/commonUI/general/res/css/tree.css
index f0aa033ccd..6580bf26d8 100644
--- a/platform/commonUI/general/res/css/tree.css
+++ b/platform/commonUI/general/res/css/tree.css
@@ -70,6 +70,7 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 /************************** WINDOW DIMENSIONS FOR RWD */
+/************************** WINDOW CHECKS FOR RWD */
 /*****************************************************************************
  * Open MCT Web, Copyright (c) 2014-2015, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
diff --git a/platform/commonUI/general/res/sass/mobile/_constants.scss b/platform/commonUI/general/res/sass/mobile/_constants.scss
index afee63e8e5..e71e83f84e 100644
--- a/platform/commonUI/general/res/sass/mobile/_constants.scss
+++ b/platform/commonUI/general/res/sass/mobile/_constants.scss
@@ -22,42 +22,51 @@
 
 /************************** WINDOW DIMENSIONS FOR RWD */
 $phoMaxW: 514px;
-$phoWidPorCheck: "(max-width: #{$phoMaxW})";
-$phoWidLanCheck: "(max-height: #{$phoMaxW})";
-
 $phoMaxH: 740px;
-$phoHeiPorCheck: "(max-height: #{$phoMaxH})";
-$phoHeiLanCheck: "(max-width: #{$phoMaxH})";
 
 $tabMinW: 515px;
 $tabMaxW: 799px;
-$tabWidPorCheck: "(min-width: #{$tabMinW}) and (max-width: #{$tabMaxW})";
-$tabWidLanCheck: "(min-height: #{$tabMinW}) and (max-height: #{$tabMaxW})";
 
 $tabMinH: 741px;
 $tabMaxH: 1024px;
+
+$compMinW: 800px;
+$compMinH: 1025px;
+/************************** WINDOW CHECKS FOR RWD */
+
+$phoWidPorCheck: "(max-width: #{$phoMaxW})";
+$phoHeiPorCheck: "(max-height: #{$phoMaxH})";
+
+$phoWidLanCheck: "(max-height: #{$phoMaxW})";
+$phoHeiLanCheck: "(max-width: #{$phoMaxH})";
+
+$tabWidPorCheck: "(min-width: #{$tabMinW}) and (max-width: #{$tabMaxW})";
 $tabHeiPorCheck: "(min-height: #{$tabMinH}) and (max-height: #{$tabMaxH})";
+
+$tabWidLanCheck: "(min-height: #{$tabMinW}) and (max-height: #{$tabMaxW})";
 $tabHeiLanCheck: "(min-width: #{$tabMinH}) and (max-width: #{$tabMaxH})";
 
 $mobileDevice: "(max-device-width: #{$tabMaxW}) and (max-device-height: #{$tabMaxH})";
 $mobileDeviceEmu: "(max-device-width: #{$tabMaxH}) and (max-device-height: #{$tabMaxW})";
 
-$phoneWidth: "screen and #{$phoWidPorCheck} and #{$phoHeiPorCheck} and #{$mobileDevice} and (orientation: portrait)";
-$phoneHeight: "screen and #{$phoWidLanCheck} and #{$phoHeiLanCheck} and #{$mobileDevice} and (orientation: landscape)";
-$phoneHeightEmu: "screen and #{$phoWidLanCheck} and #{$phoHeiLanCheck} and #{$mobileDeviceEmu} and (orientation: landscape)";
 
-$tabletWidth: "screen and #{$tabWidPorCheck} and #{$tabHeiPorCheck} and #{$mobileDevice} and (orientation: portrait)";
-$tabletHeight: "screen and #{$tabWidLanCheck} and #{$tabHeiLanCheck} and #{$mobileDevice} and (orientation: landscape)";
-$tabletHeightEmu: "screen and #{$tabWidLanCheck} and #{$tabHeiLanCheck} and #{$mobileDeviceEmu} and (orientation: landscape)";
 
-$compMinW: 800px;
-$compMinH: 1025px;
+
+$phoneWidth: "screen and (orientation: portrait) and #{$phoWidPorCheck} and #{$phoHeiPorCheck} and #{$mobileDevice}";
+$phoneHeight: "screen and (orientation: landscape) and #{$phoWidLanCheck} and #{$phoHeiLanCheck} and #{$mobileDevice}";
+$phoneHeightEmu: "screen and (orientation: landscape) and #{$phoWidLanCheck} and #{$phoHeiLanCheck} and #{$mobileDeviceEmu}";
+
+$tabletWidth: "screen and (orientation: portrait) and #{$tabWidPorCheck} and #{$tabHeiPorCheck} and #{$mobileDevice}";
+$tabletHeight: "screen and (orientation: landscape) and #{$tabWidLanCheck} and #{$tabHeiLanCheck} and #{$mobileDevice}";
+$tabletHeightEmu: "screen and (orientation: landscape) and #{$tabWidLanCheck} and #{$tabHeiLanCheck} and #{$mobileDeviceEmu}";
+
+
 
 $desktopDevicePortrait: "(min-device-width: #{$compMinW}) and (min-device-height: #{$compMinH})";
 $desktopDeviceLandscape: "(min-device-width: #{$compMinH}) and (min-device-height: #{$compMinW})";
 
-$compWidth: "screen and #{$desktopDevicePortrait} and (orientation: portrait)";
-$compHeight: "screen and #{$desktopDeviceLandscape} and (orientation: landscape)";
+$compWidth: "screen and #{$desktopDevicePortrait}";
+$compHeight: "screen and #{$desktopDeviceLandscape}";
 
 $leftPhone: $phoMaxW/2;
 $leftTab: $tabMaxW/2;

From c0d83f9395534e6d346e2b27ea3b9173a8a3a96b Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Mon, 13 Jul 2015 12:39:09 -0700
Subject: [PATCH 050/209] [Mobile] Format

Reformatted the rwd media
query rules.
---
 platform/commonUI/general/res/css/forms.css   |  1 +
 platform/commonUI/general/res/css/items.css   |  1 +
 .../general/res/css/theme-espresso.css        |  1 +
 platform/commonUI/general/res/css/tree.css    |  1 +
 .../general/res/sass/mobile/_constants.scss   | 21 +++++++++----------
 5 files changed, 14 insertions(+), 11 deletions(-)

diff --git a/platform/commonUI/general/res/css/forms.css b/platform/commonUI/general/res/css/forms.css
index ea4af06eee..8278e6322f 100644
--- a/platform/commonUI/general/res/css/forms.css
+++ b/platform/commonUI/general/res/css/forms.css
@@ -71,6 +71,7 @@
  *****************************************************************************/
 /************************** WINDOW DIMENSIONS FOR RWD */
 /************************** WINDOW CHECKS FOR RWD */
+/************************** WINDOWS FOR RWD */
 /*****************************************************************************
  * Open MCT Web, Copyright (c) 2014-2015, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
diff --git a/platform/commonUI/general/res/css/items.css b/platform/commonUI/general/res/css/items.css
index ba1c8234c6..dc970e3b00 100644
--- a/platform/commonUI/general/res/css/items.css
+++ b/platform/commonUI/general/res/css/items.css
@@ -71,6 +71,7 @@
  *****************************************************************************/
 /************************** WINDOW DIMENSIONS FOR RWD */
 /************************** WINDOW CHECKS FOR RWD */
+/************************** WINDOWS FOR RWD */
 /*****************************************************************************
  * Open MCT Web, Copyright (c) 2014-2015, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index 4166dc61b5..6af1fbf5da 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -72,6 +72,7 @@
  *****************************************************************************/
 /************************** WINDOW DIMENSIONS FOR RWD */
 /************************** WINDOW CHECKS FOR RWD */
+/************************** WINDOWS FOR RWD */
 /*****************************************************************************
  * Open MCT Web, Copyright (c) 2014-2015, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
diff --git a/platform/commonUI/general/res/css/tree.css b/platform/commonUI/general/res/css/tree.css
index 6580bf26d8..525193bbdc 100644
--- a/platform/commonUI/general/res/css/tree.css
+++ b/platform/commonUI/general/res/css/tree.css
@@ -71,6 +71,7 @@
  *****************************************************************************/
 /************************** WINDOW DIMENSIONS FOR RWD */
 /************************** WINDOW CHECKS FOR RWD */
+/************************** WINDOWS FOR RWD */
 /*****************************************************************************
  * Open MCT Web, Copyright (c) 2014-2015, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
diff --git a/platform/commonUI/general/res/sass/mobile/_constants.scss b/platform/commonUI/general/res/sass/mobile/_constants.scss
index e71e83f84e..84354b4e7d 100644
--- a/platform/commonUI/general/res/sass/mobile/_constants.scss
+++ b/platform/commonUI/general/res/sass/mobile/_constants.scss
@@ -32,7 +32,10 @@ $tabMaxH: 1024px;
 
 $compMinW: 800px;
 $compMinH: 1025px;
+
 /************************** WINDOW CHECKS FOR RWD */
+$screenPortrait: "screen and (orientation: portrait)";
+$screenLandscape: "screen and (orientation: landscape)";
 
 $phoWidPorCheck: "(max-width: #{$phoMaxW})";
 $phoHeiPorCheck: "(max-height: #{$phoMaxH})";
@@ -49,18 +52,14 @@ $tabHeiLanCheck: "(min-width: #{$tabMinH}) and (max-width: #{$tabMaxH})";
 $mobileDevice: "(max-device-width: #{$tabMaxW}) and (max-device-height: #{$tabMaxH})";
 $mobileDeviceEmu: "(max-device-width: #{$tabMaxH}) and (max-device-height: #{$tabMaxW})";
 
+/************************** WINDOWS FOR RWD */
+$phoneWidth: "#{$screenPortrait} and #{$phoWidPorCheck} and #{$phoHeiPorCheck} and #{$mobileDevice}";
+$phoneHeight: "#{$screenLandscape} and #{$phoWidLanCheck} and #{$phoHeiLanCheck} and #{$mobileDevice}";
+$phoneHeightEmu: "#{$screenLandscape} and #{$phoWidLanCheck} and #{$phoHeiLanCheck} and #{$mobileDeviceEmu}";
 
-
-
-$phoneWidth: "screen and (orientation: portrait) and #{$phoWidPorCheck} and #{$phoHeiPorCheck} and #{$mobileDevice}";
-$phoneHeight: "screen and (orientation: landscape) and #{$phoWidLanCheck} and #{$phoHeiLanCheck} and #{$mobileDevice}";
-$phoneHeightEmu: "screen and (orientation: landscape) and #{$phoWidLanCheck} and #{$phoHeiLanCheck} and #{$mobileDeviceEmu}";
-
-$tabletWidth: "screen and (orientation: portrait) and #{$tabWidPorCheck} and #{$tabHeiPorCheck} and #{$mobileDevice}";
-$tabletHeight: "screen and (orientation: landscape) and #{$tabWidLanCheck} and #{$tabHeiLanCheck} and #{$mobileDevice}";
-$tabletHeightEmu: "screen and (orientation: landscape) and #{$tabWidLanCheck} and #{$tabHeiLanCheck} and #{$mobileDeviceEmu}";
-
-
+$tabletWidth: "#{$screenPortrait} and #{$tabWidPorCheck} and #{$tabHeiPorCheck} and #{$mobileDevice}";
+$tabletHeight: "#{$screenLandscape} and #{$tabWidLanCheck} and #{$tabHeiLanCheck} and #{$mobileDevice}";
+$tabletHeightEmu: "#{$screenLandscape} and #{$tabWidLanCheck} and #{$tabHeiLanCheck} and #{$mobileDeviceEmu}";
 
 $desktopDevicePortrait: "(min-device-width: #{$compMinW}) and (min-device-height: #{$compMinH})";
 $desktopDeviceLandscape: "(min-device-width: #{$compMinH}) and (min-device-height: #{$compMinW})";

From b00eee00fc5f5bd07b3393fcdda7736fb9ffcfbd Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Mon, 13 Jul 2015 13:02:57 -0700
Subject: [PATCH 051/209] [Mobile] Redefine

Renames variables to be clearer.
Breaks up constants into parts to be
cleaners and straightforward. Also
removed the ratio.
---
 platform/commonUI/general/res/css/forms.css   |  5 +--
 platform/commonUI/general/res/css/items.css   |  5 +--
 .../general/res/css/theme-espresso.css        |  5 +--
 platform/commonUI/general/res/css/tree.css    |  5 +--
 .../general/res/sass/mobile/_constants.scss   | 33 +++++++++----------
 .../general/res/sass/mobile/_layout.scss      | 20 +++++------
 .../general/res/sass/mobile/_mixins.scss      | 12 +++----
 7 files changed, 43 insertions(+), 42 deletions(-)

diff --git a/platform/commonUI/general/res/css/forms.css b/platform/commonUI/general/res/css/forms.css
index 8278e6322f..d36234d47b 100644
--- a/platform/commonUI/general/res/css/forms.css
+++ b/platform/commonUI/general/res/css/forms.css
@@ -70,8 +70,9 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 /************************** WINDOW DIMENSIONS FOR RWD */
-/************************** WINDOW CHECKS FOR RWD */
-/************************** WINDOWS FOR RWD */
+/************************** WINDOW CHECKS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */
+/************************** WINDOWS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */
+/************************** DEVICE PARAMETERS FOR MENUS */
 /*****************************************************************************
  * Open MCT Web, Copyright (c) 2014-2015, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
diff --git a/platform/commonUI/general/res/css/items.css b/platform/commonUI/general/res/css/items.css
index dc970e3b00..c1b31b9e51 100644
--- a/platform/commonUI/general/res/css/items.css
+++ b/platform/commonUI/general/res/css/items.css
@@ -70,8 +70,9 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 /************************** WINDOW DIMENSIONS FOR RWD */
-/************************** WINDOW CHECKS FOR RWD */
-/************************** WINDOWS FOR RWD */
+/************************** WINDOW CHECKS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */
+/************************** WINDOWS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */
+/************************** DEVICE PARAMETERS FOR MENUS */
 /*****************************************************************************
  * Open MCT Web, Copyright (c) 2014-2015, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index 6af1fbf5da..a5f9d5279e 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -71,8 +71,9 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 /************************** WINDOW DIMENSIONS FOR RWD */
-/************************** WINDOW CHECKS FOR RWD */
-/************************** WINDOWS FOR RWD */
+/************************** WINDOW CHECKS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */
+/************************** WINDOWS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */
+/************************** DEVICE PARAMETERS FOR MENUS */
 /*****************************************************************************
  * Open MCT Web, Copyright (c) 2014-2015, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
diff --git a/platform/commonUI/general/res/css/tree.css b/platform/commonUI/general/res/css/tree.css
index 525193bbdc..08714e39c8 100644
--- a/platform/commonUI/general/res/css/tree.css
+++ b/platform/commonUI/general/res/css/tree.css
@@ -70,8 +70,9 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 /************************** WINDOW DIMENSIONS FOR RWD */
-/************************** WINDOW CHECKS FOR RWD */
-/************************** WINDOWS FOR RWD */
+/************************** WINDOW CHECKS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */
+/************************** WINDOWS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */
+/************************** DEVICE PARAMETERS FOR MENUS */
 /*****************************************************************************
  * Open MCT Web, Copyright (c) 2014-2015, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
diff --git a/platform/commonUI/general/res/sass/mobile/_constants.scss b/platform/commonUI/general/res/sass/mobile/_constants.scss
index 84354b4e7d..985cae1854 100644
--- a/platform/commonUI/general/res/sass/mobile/_constants.scss
+++ b/platform/commonUI/general/res/sass/mobile/_constants.scss
@@ -33,33 +33,32 @@ $tabMaxH: 1024px;
 $compMinW: 800px;
 $compMinH: 1025px;
 
-/************************** WINDOW CHECKS FOR RWD */
+/************************** WINDOW CHECKS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */
 $screenPortrait: "screen and (orientation: portrait)";
 $screenLandscape: "screen and (orientation: landscape)";
 
-$phoWidPorCheck: "(max-width: #{$phoMaxW})";
-$phoHeiPorCheck: "(max-height: #{$phoMaxH})";
-
-$phoWidLanCheck: "(max-height: #{$phoMaxW})";
-$phoHeiLanCheck: "(max-width: #{$phoMaxH})";
+$phonePortraitCheck: "(max-width: #{$phoMaxW}) and (max-height: #{$phoMaxH})";
+$phoneLandscapeCheck: "(max-height: #{$phoMaxW}) and (max-width: #{$phoMaxH})";
 
 $tabWidPorCheck: "(min-width: #{$tabMinW}) and (max-width: #{$tabMaxW})";
 $tabHeiPorCheck: "(min-height: #{$tabMinH}) and (max-height: #{$tabMaxH})";
+$tabletPortraitCheck: "#{$tabWidPorCheck} and #{$tabHeiPorCheck}";
 
 $tabWidLanCheck: "(min-height: #{$tabMinW}) and (max-height: #{$tabMaxW})";
 $tabHeiLanCheck: "(min-width: #{$tabMinH}) and (max-width: #{$tabMaxH})";
+$tabletLandscapeCheck: "#{$tabWidLanCheck} and #{$tabHeiLanCheck}";
 
 $mobileDevice: "(max-device-width: #{$tabMaxW}) and (max-device-height: #{$tabMaxH})";
 $mobileDeviceEmu: "(max-device-width: #{$tabMaxH}) and (max-device-height: #{$tabMaxW})";
 
-/************************** WINDOWS FOR RWD */
-$phoneWidth: "#{$screenPortrait} and #{$phoWidPorCheck} and #{$phoHeiPorCheck} and #{$mobileDevice}";
-$phoneHeight: "#{$screenLandscape} and #{$phoWidLanCheck} and #{$phoHeiLanCheck} and #{$mobileDevice}";
-$phoneHeightEmu: "#{$screenLandscape} and #{$phoWidLanCheck} and #{$phoHeiLanCheck} and #{$mobileDeviceEmu}";
+/************************** WINDOWS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */
+$phonePortrait: "#{$screenPortrait} and #{$phonePortraitCheck} and #{$mobileDevice}";
+$phoneLandscape: "#{$screenLandscape} and #{$phoneLandscapeCheck} and #{$mobileDevice}";
+$phoneLandscapeEmu: "#{$screenLandscape} and #{$phoneLandscapeCheck} and #{$mobileDeviceEmu}";
 
-$tabletWidth: "#{$screenPortrait} and #{$tabWidPorCheck} and #{$tabHeiPorCheck} and #{$mobileDevice}";
-$tabletHeight: "#{$screenLandscape} and #{$tabWidLanCheck} and #{$tabHeiLanCheck} and #{$mobileDevice}";
-$tabletHeightEmu: "#{$screenLandscape} and #{$tabWidLanCheck} and #{$tabHeiLanCheck} and #{$mobileDeviceEmu}";
+$tabletPortrait: "#{$screenPortrait} and #{$tabletPortraitCheck} and #{$mobileDevice}";
+$tabletLandscape: "#{$screenLandscape} and #{$tabletLandscapeCheck} and #{$mobileDevice}";
+$tabletLandscapeEmu: "#{$screenLandscape} and #{$tabletLandscapeCheck} and #{$mobileDeviceEmu}";
 
 $desktopDevicePortrait: "(min-device-width: #{$compMinW}) and (min-device-height: #{$compMinH})";
 $desktopDeviceLandscape: "(min-device-width: #{$compMinH}) and (min-device-height: #{$compMinW})";
@@ -67,9 +66,7 @@ $desktopDeviceLandscape: "(min-device-width: #{$compMinH}) and (min-device-heigh
 $compWidth: "screen and #{$desktopDevicePortrait}";
 $compHeight: "screen and #{$desktopDeviceLandscape}";
 
-$leftPhone: $phoMaxW/2;
-$leftTab: $tabMaxW/2;
-
-$hideRatioPhone: 1;
-$hideRatioTab: 1;
+/************************** DEVICE PARAMETERS FOR MENUS */
 
+$phoneSlideMenuWidth: $phoMaxW/2;
+$tabletSlideMenuWidth: $tabMaxW/2;
diff --git a/platform/commonUI/general/res/sass/mobile/_layout.scss b/platform/commonUI/general/res/sass/mobile/_layout.scss
index 01f4093fcb..fa8e6ddff1 100644
--- a/platform/commonUI/general/res/sass/mobile/_layout.scss
+++ b/platform/commonUI/general/res/sass/mobile/_layout.scss
@@ -26,11 +26,11 @@
 .holder-hide {
     @include phone {
         @include transition-duration(.2s);
-        left: (-1 * $hideRatioPhone) * $leftPhone;
+        left: (-1) * $phoneSlideMenuWidth;
     }
     @include tablet {
         @include transition-duration(.2s);
-        left: (-1 * $hideRatioTab) * $leftTab;
+        left: (-1) * $tabletSlideMenuWidth;
     }     
 }
 
@@ -49,11 +49,11 @@
     position: absolute;
     @include phone {
         @include transition-duration(.2s);
-        left: ($hideRatioPhone) * $leftPhone;
+        left: $phoneSlideMenuWidth;
     }
     @include tablet {
         @include transition-duration(.2s);
-        left: ($hideRatioTab) * $leftTab;
+        left: $tabletSlideMenuWidth;
     }      
 }
 
@@ -61,20 +61,20 @@
     position: absolute;
     @include transition-duration(.2s);
     @include phone {
-        left: $leftPhone;
+        left: $phoneSlideMenuWidth;
     }
     @include tablet {
-        left: $leftTab;
+        left: $tabletSlideMenuWidth;
     }     
 }
 
 .object-header-mobile {
     position: relative;
     @include phone {
-        left: $leftPhone/10;
+        left: $phoneSlideMenuWidth/10;
     }
     @include tablet {
-        left: $leftTab/10;
+        left: $tabletSlideMenuWidth/10;
     }
 }
 
@@ -87,10 +87,10 @@
 
 .browse-manage {
     @include phone {
-        width: $leftPhone;
+        width: $phoneSlideMenuWidth;
     }
     @include tablet {
-        width: $leftTab;
+        width: $tabletSlideMenuWidth;
     }    
     @include desktop {
         min-width: 150px;
diff --git a/platform/commonUI/general/res/sass/mobile/_mixins.scss b/platform/commonUI/general/res/sass/mobile/_mixins.scss
index f71edf2c8c..c92708fe73 100644
--- a/platform/commonUI/general/res/sass/mobile/_mixins.scss
+++ b/platform/commonUI/general/res/sass/mobile/_mixins.scss
@@ -22,17 +22,17 @@
 
 // NOTE: Mixins for devices
 @mixin phone {
-    @media #{$phoneWidth},
-           #{$phoneHeight},
-           #{$phoneHeightEmu}{
+    @media #{$phonePortrait},
+           #{$phoneLandscape},
+           #{$phoneLandscapeEmu}{
         @content
     }
 }
 
 @mixin tablet {
-    @media #{$tabletWidth},
-           #{$tabletHeight},
-           #{$tabletHeightEmu}{
+    @media #{$tabletPortrait},
+           #{$tabletLandscape},
+           #{$tabletLandscapeEmu}{
         @content
     }
 }

From 7d09df9a852b2631d73ca9fd30ef5bdd4c2df057 Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Mon, 13 Jul 2015 13:11:27 -0700
Subject: [PATCH 052/209] [Mobile] Constants

Re-edited media query constants
to be cleaner and consistent.
---
 platform/commonUI/general/res/css/forms.css   |  4 ++--
 platform/commonUI/general/res/css/items.css   |  4 ++--
 .../general/res/css/theme-espresso.css        |  4 ++--
 platform/commonUI/general/res/css/tree.css    |  4 ++--
 .../general/res/sass/mobile/_constants.scss   | 19 +++++++++----------
 .../general/res/sass/mobile/_mixins.scss      | 11 ++---------
 6 files changed, 19 insertions(+), 27 deletions(-)

diff --git a/platform/commonUI/general/res/css/forms.css b/platform/commonUI/general/res/css/forms.css
index d36234d47b..2630143bbf 100644
--- a/platform/commonUI/general/res/css/forms.css
+++ b/platform/commonUI/general/res/css/forms.css
@@ -70,8 +70,8 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 /************************** WINDOW DIMENSIONS FOR RWD */
-/************************** WINDOW CHECKS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */
-/************************** WINDOWS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */
+/************************** MEDIA QUERIES: WINDOW CHECKS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */
+/************************** MEDIA QUERIES: WINDOWS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */
 /************************** DEVICE PARAMETERS FOR MENUS */
 /*****************************************************************************
  * Open MCT Web, Copyright (c) 2014-2015, United States Government
diff --git a/platform/commonUI/general/res/css/items.css b/platform/commonUI/general/res/css/items.css
index c1b31b9e51..0706514394 100644
--- a/platform/commonUI/general/res/css/items.css
+++ b/platform/commonUI/general/res/css/items.css
@@ -70,8 +70,8 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 /************************** WINDOW DIMENSIONS FOR RWD */
-/************************** WINDOW CHECKS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */
-/************************** WINDOWS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */
+/************************** MEDIA QUERIES: WINDOW CHECKS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */
+/************************** MEDIA QUERIES: WINDOWS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */
 /************************** DEVICE PARAMETERS FOR MENUS */
 /*****************************************************************************
  * Open MCT Web, Copyright (c) 2014-2015, United States Government
diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index a5f9d5279e..9c73cba594 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -71,8 +71,8 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 /************************** WINDOW DIMENSIONS FOR RWD */
-/************************** WINDOW CHECKS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */
-/************************** WINDOWS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */
+/************************** MEDIA QUERIES: WINDOW CHECKS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */
+/************************** MEDIA QUERIES: WINDOWS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */
 /************************** DEVICE PARAMETERS FOR MENUS */
 /*****************************************************************************
  * Open MCT Web, Copyright (c) 2014-2015, United States Government
diff --git a/platform/commonUI/general/res/css/tree.css b/platform/commonUI/general/res/css/tree.css
index 08714e39c8..b9e4f360ba 100644
--- a/platform/commonUI/general/res/css/tree.css
+++ b/platform/commonUI/general/res/css/tree.css
@@ -70,8 +70,8 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 /************************** WINDOW DIMENSIONS FOR RWD */
-/************************** WINDOW CHECKS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */
-/************************** WINDOWS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */
+/************************** MEDIA QUERIES: WINDOW CHECKS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */
+/************************** MEDIA QUERIES: WINDOWS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */
 /************************** DEVICE PARAMETERS FOR MENUS */
 /*****************************************************************************
  * Open MCT Web, Copyright (c) 2014-2015, United States Government
diff --git a/platform/commonUI/general/res/sass/mobile/_constants.scss b/platform/commonUI/general/res/sass/mobile/_constants.scss
index 985cae1854..564e8169f5 100644
--- a/platform/commonUI/general/res/sass/mobile/_constants.scss
+++ b/platform/commonUI/general/res/sass/mobile/_constants.scss
@@ -33,10 +33,13 @@ $tabMaxH: 1024px;
 $compMinW: 800px;
 $compMinH: 1025px;
 
-/************************** WINDOW CHECKS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */
+/************************** MEDIA QUERIES: WINDOW CHECKS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */
 $screenPortrait: "screen and (orientation: portrait)";
 $screenLandscape: "screen and (orientation: landscape)";
 
+$mobileDevice: "(max-device-width: #{$tabMaxW}) and (max-device-height: #{$tabMaxH})";
+$mobileDeviceEmu: "(max-device-width: #{$tabMaxH}) and (max-device-height: #{$tabMaxW})";
+
 $phonePortraitCheck: "(max-width: #{$phoMaxW}) and (max-height: #{$phoMaxH})";
 $phoneLandscapeCheck: "(max-height: #{$phoMaxW}) and (max-width: #{$phoMaxH})";
 
@@ -48,10 +51,10 @@ $tabWidLanCheck: "(min-height: #{$tabMinW}) and (max-height: #{$tabMaxW})";
 $tabHeiLanCheck: "(min-width: #{$tabMinH}) and (max-width: #{$tabMaxH})";
 $tabletLandscapeCheck: "#{$tabWidLanCheck} and #{$tabHeiLanCheck}";
 
-$mobileDevice: "(max-device-width: #{$tabMaxW}) and (max-device-height: #{$tabMaxH})";
-$mobileDeviceEmu: "(max-device-width: #{$tabMaxH}) and (max-device-height: #{$tabMaxW})";
+$desktopPortraitCheck: "(min-device-width: #{$compMinW}) and (min-device-height: #{$compMinH})";
+$desktopLanscapeCheck: "(min-device-width: #{$compMinH}) and (min-device-height: #{$compMinW})";
 
-/************************** WINDOWS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */
+/************************** MEDIA QUERIES: WINDOWS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */
 $phonePortrait: "#{$screenPortrait} and #{$phonePortraitCheck} and #{$mobileDevice}";
 $phoneLandscape: "#{$screenLandscape} and #{$phoneLandscapeCheck} and #{$mobileDevice}";
 $phoneLandscapeEmu: "#{$screenLandscape} and #{$phoneLandscapeCheck} and #{$mobileDeviceEmu}";
@@ -60,13 +63,9 @@ $tabletPortrait: "#{$screenPortrait} and #{$tabletPortraitCheck} and #{$mobileDe
 $tabletLandscape: "#{$screenLandscape} and #{$tabletLandscapeCheck} and #{$mobileDevice}";
 $tabletLandscapeEmu: "#{$screenLandscape} and #{$tabletLandscapeCheck} and #{$mobileDeviceEmu}";
 
-$desktopDevicePortrait: "(min-device-width: #{$compMinW}) and (min-device-height: #{$compMinH})";
-$desktopDeviceLandscape: "(min-device-width: #{$compMinH}) and (min-device-height: #{$compMinW})";
-
-$compWidth: "screen and #{$desktopDevicePortrait}";
-$compHeight: "screen and #{$desktopDeviceLandscape}";
+$desktopPortrait: "screen and #{$desktopPortraitCheck}";
+$desktopLandscape: "screen and #{$desktopLanscapeCheck}";
 
 /************************** DEVICE PARAMETERS FOR MENUS */
-
 $phoneSlideMenuWidth: $phoMaxW/2;
 $tabletSlideMenuWidth: $tabMaxW/2;
diff --git a/platform/commonUI/general/res/sass/mobile/_mixins.scss b/platform/commonUI/general/res/sass/mobile/_mixins.scss
index c92708fe73..b1e868add5 100644
--- a/platform/commonUI/general/res/sass/mobile/_mixins.scss
+++ b/platform/commonUI/general/res/sass/mobile/_mixins.scss
@@ -37,16 +37,9 @@
     }
 }
 
-//@mixin phoneandtablet {
-//    @media screen and (max-width: $tabMaxW) and (orientation: portrait),
-//           screen and (max-width: $tabMaxH) and (orientation: landscape) {
-//        @content
-//    }
-//}
-
 @mixin desktop {
-    @media #{$compWidth},
-           #{$compHeight} {
+    @media #{$desktopPortrait},
+           #{$desktopLandscape} {
         @content
     }
 }

From edcafc5835ef4f47749604ca8f319b5ca942cee9 Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Mon, 13 Jul 2015 13:56:44 -0700
Subject: [PATCH 053/209] [Mobile] Remove Bar

Remove the splitter bar on mobile
and tablets.
---
 .../commonUI/browse/res/templates/browse.html |  2 +-
 .../general/res/css/theme-espresso.css        | 23 ++++++++++++++++---
 .../general/res/sass/mobile/_layout.scss      | 15 ++++++++++++
 3 files changed, 36 insertions(+), 4 deletions(-)

diff --git a/platform/commonUI/browse/res/templates/browse.html b/platform/commonUI/browse/res/templates/browse.html
index a0a3d9ff9f..4ea43b7b06 100644
--- a/platform/commonUI/browse/res/templates/browse.html
+++ b/platform/commonUI/browse/res/templates/browse.html
@@ -34,7 +34,7 @@
                         </mct-representation>
                     </div>
                 </div>
-                <mct-splitter></mct-splitter>
+                <mct-splitter class="mobile-hide"></mct-splitter>
                 <div class='split-pane-component items pane'>
                     <div class='holder abs hider-check' id='content-area'>
                         <mct-representation mct-object="navigatedObject" key="'browse-object'">
diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index 9c73cba594..7d816ef342 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -819,21 +819,38 @@ mct-container {
 /* line 81, ../sass/mobile/_layout.scss */
 .mobile-menu-icon {
   top: 5px; }
+  @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 81, ../sass/mobile/_layout.scss */
+    .mobile-menu-icon {
+      font-size: 125%; } }
+  @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 81, ../sass/mobile/_layout.scss */
+    .mobile-menu-icon {
+      font-size: 175%; } }
   @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
     /* line 81, ../sass/mobile/_layout.scss */
     .mobile-menu-icon {
       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 88, ../sass/mobile/_layout.scss */
+  /* line 94, ../sass/mobile/_layout.scss */
+  .mobile-hide {
+    display: none; } }
+@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 94, ../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 103, ../sass/mobile/_layout.scss */
   .browse-manage {
     width: 257px; } }
 @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 88, ../sass/mobile/_layout.scss */
+  /* line 103, ../sass/mobile/_layout.scss */
   .browse-manage {
     width: 399.5px; } }
 @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-  /* line 88, ../sass/mobile/_layout.scss */
+  /* line 103, ../sass/mobile/_layout.scss */
   .browse-manage {
     min-width: 150px;
     max-width: 800px;
diff --git a/platform/commonUI/general/res/sass/mobile/_layout.scss b/platform/commonUI/general/res/sass/mobile/_layout.scss
index fa8e6ddff1..d30676b84a 100644
--- a/platform/commonUI/general/res/sass/mobile/_layout.scss
+++ b/platform/commonUI/general/res/sass/mobile/_layout.scss
@@ -80,11 +80,26 @@
 
 .mobile-menu-icon {
     top: $interiorMargin;
+    @include phone {
+        font-size: 125%;
+    }
+    @include tablet {
+        font-size: 175%;
+    }      
     @include desktop {
         display: none;
     }       
 }
 
+.mobile-hide {
+    @include phone {
+        display: none;
+    }
+    @include tablet {
+        display: none;
+    }      
+}
+
 .browse-manage {
     @include phone {
         width: $phoneSlideMenuWidth;

From 9a7bbd92bd57fe94954d2c7b73259dd37d629712 Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Mon, 13 Jul 2015 17:04:14 -0700
Subject: [PATCH 054/209] [Mobile] Cleaned up

Cleaned up the transistion css to
be more DRY.
---
 .../general/res/css/theme-espresso.css        | 84 +++++++++----------
 .../general/res/sass/mobile/_layout.scss      |  8 +-
 2 files changed, 42 insertions(+), 50 deletions(-)

diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index 7d816ef342..b9422ddc62 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -751,44 +751,38 @@ mct-container {
     transition-duration: 0.2s;
     left: -399.5px; } }
 
-@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 37, ../sass/mobile/_layout.scss */
-  .holder-show {
-    -moz-transition-duration: 0.2s;
-    -o-transition-duration: 0.2s;
-    -webkit-transition-duration: 0.2s;
-    transition-duration: 0.2s;
-    left: 0px; } }
-@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 37, ../sass/mobile/_layout.scss */
-  .holder-show {
-    -moz-transition-duration: 0.2s;
-    -o-transition-duration: 0.2s;
-    -webkit-transition-duration: 0.2s;
-    transition-duration: 0.2s;
-    left: 0px; } }
-
-/* line 48, ../sass/mobile/_layout.scss */
-.button-show {
-  position: absolute; }
+/* line 37, ../sass/mobile/_layout.scss */
+.holder-show {
+  -moz-transition-duration: 0.2s;
+  -o-transition-duration: 0.2s;
+  -webkit-transition-duration: 0.2s;
+  transition-duration: 0.2s; }
   @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 48, ../sass/mobile/_layout.scss */
+    /* line 37, ../sass/mobile/_layout.scss */
+    .holder-show {
+      left: 0px; } }
+  @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 37, ../sass/mobile/_layout.scss */
+    .holder-show {
+      left: 0px; } }
+
+/* line 47, ../sass/mobile/_layout.scss */
+.button-show {
+  position: absolute;
+  -moz-transition-duration: 0.2s;
+  -o-transition-duration: 0.2s;
+  -webkit-transition-duration: 0.2s;
+  transition-duration: 0.2s; }
+  @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 47, ../sass/mobile/_layout.scss */
     .button-show {
-      -moz-transition-duration: 0.2s;
-      -o-transition-duration: 0.2s;
-      -webkit-transition-duration: 0.2s;
-      transition-duration: 0.2s;
       left: 257px; } }
   @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 48, ../sass/mobile/_layout.scss */
+    /* line 47, ../sass/mobile/_layout.scss */
     .button-show {
-      -moz-transition-duration: 0.2s;
-      -o-transition-duration: 0.2s;
-      -webkit-transition-duration: 0.2s;
-      transition-duration: 0.2s;
       left: 399.5px; } }
 
-/* line 60, ../sass/mobile/_layout.scss */
+/* line 58, ../sass/mobile/_layout.scss */
 .button-hide {
   position: absolute;
   -moz-transition-duration: 0.2s;
@@ -796,61 +790,61 @@ mct-container {
   -webkit-transition-duration: 0.2s;
   transition-duration: 0.2s; }
   @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 60, ../sass/mobile/_layout.scss */
+    /* line 58, ../sass/mobile/_layout.scss */
     .button-hide {
       left: 257px; } }
   @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 60, ../sass/mobile/_layout.scss */
+    /* line 58, ../sass/mobile/_layout.scss */
     .button-hide {
       left: 399.5px; } }
 
-/* line 71, ../sass/mobile/_layout.scss */
+/* line 69, ../sass/mobile/_layout.scss */
 .object-header-mobile {
   position: relative; }
   @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 71, ../sass/mobile/_layout.scss */
+    /* line 69, ../sass/mobile/_layout.scss */
     .object-header-mobile {
       left: 25.7px; } }
   @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 71, ../sass/mobile/_layout.scss */
+    /* line 69, ../sass/mobile/_layout.scss */
     .object-header-mobile {
       left: 39.95px; } }
 
-/* line 81, ../sass/mobile/_layout.scss */
+/* line 79, ../sass/mobile/_layout.scss */
 .mobile-menu-icon {
   top: 5px; }
   @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 81, ../sass/mobile/_layout.scss */
+    /* line 79, ../sass/mobile/_layout.scss */
     .mobile-menu-icon {
       font-size: 125%; } }
   @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 81, ../sass/mobile/_layout.scss */
+    /* line 79, ../sass/mobile/_layout.scss */
     .mobile-menu-icon {
       font-size: 175%; } }
   @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-    /* line 81, ../sass/mobile/_layout.scss */
+    /* line 79, ../sass/mobile/_layout.scss */
     .mobile-menu-icon {
       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 94, ../sass/mobile/_layout.scss */
+  /* line 92, ../sass/mobile/_layout.scss */
   .mobile-hide {
     display: none; } }
 @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 94, ../sass/mobile/_layout.scss */
+  /* line 92, ../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 103, ../sass/mobile/_layout.scss */
+  /* line 101, ../sass/mobile/_layout.scss */
   .browse-manage {
     width: 257px; } }
 @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 103, ../sass/mobile/_layout.scss */
+  /* line 101, ../sass/mobile/_layout.scss */
   .browse-manage {
     width: 399.5px; } }
 @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-  /* line 103, ../sass/mobile/_layout.scss */
+  /* line 101, ../sass/mobile/_layout.scss */
   .browse-manage {
     min-width: 150px;
     max-width: 800px;
diff --git a/platform/commonUI/general/res/sass/mobile/_layout.scss b/platform/commonUI/general/res/sass/mobile/_layout.scss
index d30676b84a..04f8898a72 100644
--- a/platform/commonUI/general/res/sass/mobile/_layout.scss
+++ b/platform/commonUI/general/res/sass/mobile/_layout.scss
@@ -35,24 +35,22 @@
 }
 
 .holder-show {
+    @include transition-duration(.2s);
     @include phone {
-        @include transition-duration(.2s);
         left: 0px;
     }
     @include tablet {
-        @include transition-duration(.2s);
         left: 0px;
     }         
 }
 
 .button-show {
     position: absolute;
-    @include phone {
-        @include transition-duration(.2s);
+    @include transition-duration(.2s);
+    @include phone {        
         left: $phoneSlideMenuWidth;
     }
     @include tablet {
-        @include transition-duration(.2s);
         left: $tabletSlideMenuWidth;
     }      
 }

From 6f07a21bb8c5768f9bf0dfb2a39b51f84ce013fc Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Tue, 14 Jul 2015 13:10:28 -0700
Subject: [PATCH 055/209] [Mobile] Clean-up

Cleaned up scss and also, the
edit/new tab/full screen buttons are
hidden in mobile, temporarily.
---
 .../browse/res/templates/browse-object.html   |  4 +-
 .../commonUI/browse/res/templates/browse.html |  2 +-
 .../general/res/css/theme-espresso.css        | 44 ++++++-------------
 .../general/res/sass/mobile/_layout.scss      | 13 +-----
 4 files changed, 18 insertions(+), 45 deletions(-)

diff --git a/platform/commonUI/browse/res/templates/browse-object.html b/platform/commonUI/browse/res/templates/browse-object.html
index 6730d5a186..7a5bd09470 100644
--- a/platform/commonUI/browse/res/templates/browse-object.html
+++ b/platform/commonUI/browse/res/templates/browse-object.html
@@ -25,8 +25,8 @@
             <mct-representation key="'object-header'" mct-object="domainObject">
             </mct-representation>
         </div>
-
-        <div class="btn-bar right abs">
+        <!-- For now, on mobile the button bar is hidden-->
+        <div class="btn-bar right abs mobile-hide">
             <mct-representation key="'action-group'"
                                 mct-object="domainObject"
                                 parameters="{ category: 'view-control' }">
diff --git a/platform/commonUI/browse/res/templates/browse.html b/platform/commonUI/browse/res/templates/browse.html
index 4ea43b7b06..730cffbeef 100644
--- a/platform/commonUI/browse/res/templates/browse.html
+++ b/platform/commonUI/browse/res/templates/browse.html
@@ -42,7 +42,7 @@
                     </div>
                 </div>
             </mct-split-pane>
-            <div class="s-very-subtle key-properties ui-symbol mobile-menu-icon button-hide" ng-class="treeClass ? 'button-show' : 'button-hide'" 
+            <div class="s-very-subtle key-properties ui-symbol mobile-menu-icon button-pos" 
                             ng-click="treeSlide()">m</div>        
         </div>
         <mct-include key="'bottombar'"></mct-include>
diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index b9422ddc62..1eea14670f 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -767,7 +767,7 @@ mct-container {
       left: 0px; } }
 
 /* line 47, ../sass/mobile/_layout.scss */
-.button-show {
+.button-pos {
   position: absolute;
   -moz-transition-duration: 0.2s;
   -o-transition-duration: 0.2s;
@@ -775,76 +775,60 @@ mct-container {
   transition-duration: 0.2s; }
   @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 47, ../sass/mobile/_layout.scss */
-    .button-show {
+    .button-pos {
       left: 257px; } }
   @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 47, ../sass/mobile/_layout.scss */
-    .button-show {
+    .button-pos {
       left: 399.5px; } }
 
 /* line 58, ../sass/mobile/_layout.scss */
-.button-hide {
-  position: absolute;
-  -moz-transition-duration: 0.2s;
-  -o-transition-duration: 0.2s;
-  -webkit-transition-duration: 0.2s;
-  transition-duration: 0.2s; }
-  @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 58, ../sass/mobile/_layout.scss */
-    .button-hide {
-      left: 257px; } }
-  @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 58, ../sass/mobile/_layout.scss */
-    .button-hide {
-      left: 399.5px; } }
-
-/* line 69, ../sass/mobile/_layout.scss */
 .object-header-mobile {
   position: relative; }
   @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 69, ../sass/mobile/_layout.scss */
+    /* line 58, ../sass/mobile/_layout.scss */
     .object-header-mobile {
       left: 25.7px; } }
   @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 69, ../sass/mobile/_layout.scss */
+    /* line 58, ../sass/mobile/_layout.scss */
     .object-header-mobile {
       left: 39.95px; } }
 
-/* line 79, ../sass/mobile/_layout.scss */
+/* line 68, ../sass/mobile/_layout.scss */
 .mobile-menu-icon {
   top: 5px; }
   @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 79, ../sass/mobile/_layout.scss */
+    /* line 68, ../sass/mobile/_layout.scss */
     .mobile-menu-icon {
       font-size: 125%; } }
   @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 79, ../sass/mobile/_layout.scss */
+    /* line 68, ../sass/mobile/_layout.scss */
     .mobile-menu-icon {
       font-size: 175%; } }
   @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-    /* line 79, ../sass/mobile/_layout.scss */
+    /* line 68, ../sass/mobile/_layout.scss */
     .mobile-menu-icon {
       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 92, ../sass/mobile/_layout.scss */
+  /* line 81, ../sass/mobile/_layout.scss */
   .mobile-hide {
     display: none; } }
 @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 92, ../sass/mobile/_layout.scss */
+  /* line 81, ../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 101, ../sass/mobile/_layout.scss */
+  /* line 90, ../sass/mobile/_layout.scss */
   .browse-manage {
     width: 257px; } }
 @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 101, ../sass/mobile/_layout.scss */
+  /* line 90, ../sass/mobile/_layout.scss */
   .browse-manage {
     width: 399.5px; } }
 @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-  /* line 101, ../sass/mobile/_layout.scss */
+  /* line 90, ../sass/mobile/_layout.scss */
   .browse-manage {
     min-width: 150px;
     max-width: 800px;
diff --git a/platform/commonUI/general/res/sass/mobile/_layout.scss b/platform/commonUI/general/res/sass/mobile/_layout.scss
index 04f8898a72..26b677688d 100644
--- a/platform/commonUI/general/res/sass/mobile/_layout.scss
+++ b/platform/commonUI/general/res/sass/mobile/_layout.scss
@@ -44,7 +44,7 @@
     }         
 }
 
-.button-show {
+.button-pos {
     position: absolute;
     @include transition-duration(.2s);
     @include phone {        
@@ -55,17 +55,6 @@
     }      
 }
 
-.button-hide {
-    position: absolute;
-    @include transition-duration(.2s);
-    @include phone {
-        left: $phoneSlideMenuWidth;
-    }
-    @include tablet {
-        left: $tabletSlideMenuWidth;
-    }     
-}
-
 .object-header-mobile {
     position: relative;
     @include phone {

From 0f89e98a718f7744bc35f8fb990854b65a1baa64 Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Tue, 14 Jul 2015 14:14:12 -0700
Subject: [PATCH 056/209] [Mobile] Clean up

Cleaned up layout and added phone only hider.
Also added tree.scss file, where all tree
node classes will be placed.
---
 platform/commonUI/general/res/css/theme-espresso.css   | 9 +++++++--
 platform/commonUI/general/res/sass/mobile/_layout.scss | 8 +++++++-
 platform/commonUI/general/res/sass/mobile/_tree.scss   | 0
 3 files changed, 14 insertions(+), 3 deletions(-)
 create mode 100644 platform/commonUI/general/res/sass/mobile/_tree.scss

diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index 1eea14670f..05ffc921fc 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -821,14 +821,19 @@ mct-container {
 
 @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 90, ../sass/mobile/_layout.scss */
+  .phone-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 96, ../sass/mobile/_layout.scss */
   .browse-manage {
     width: 257px; } }
 @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 90, ../sass/mobile/_layout.scss */
+  /* line 96, ../sass/mobile/_layout.scss */
   .browse-manage {
     width: 399.5px; } }
 @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-  /* line 90, ../sass/mobile/_layout.scss */
+  /* line 96, ../sass/mobile/_layout.scss */
   .browse-manage {
     min-width: 150px;
     max-width: 800px;
diff --git a/platform/commonUI/general/res/sass/mobile/_layout.scss b/platform/commonUI/general/res/sass/mobile/_layout.scss
index 26b677688d..9cc09d22b6 100644
--- a/platform/commonUI/general/res/sass/mobile/_layout.scss
+++ b/platform/commonUI/general/res/sass/mobile/_layout.scss
@@ -84,7 +84,13 @@
     }
     @include tablet {
         display: none;
-    }      
+    }
+}
+
+.phone-hide {
+    @include phone {
+        display: none;
+    }
 }
 
 .browse-manage {
diff --git a/platform/commonUI/general/res/sass/mobile/_tree.scss b/platform/commonUI/general/res/sass/mobile/_tree.scss
new file mode 100644
index 0000000000..e69de29bb2

From 54b6cd110004c2fe43115685a27882c50f790d22 Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Wed, 15 Jul 2015 13:28:42 -0700
Subject: [PATCH 057/209] [Mobile] Debug

Added debug statement to print
to console.
---
 platform/commonUI/browse/src/BrowseController.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/platform/commonUI/browse/src/BrowseController.js b/platform/commonUI/browse/src/BrowseController.js
index 9bf040d3eb..b05793b15f 100644
--- a/platform/commonUI/browse/src/BrowseController.js
+++ b/platform/commonUI/browse/src/BrowseController.js
@@ -143,6 +143,8 @@ define(
             
             $scope.treeSlide = function () {
                 $scope.treeClass = !$scope.treeClass;
+                // FUTURE: Remove before merge
+                console.log($scope.treeClass ? "browse-showtree" : "browse-hidetree");
             };
 
             // Listen for changes in navigation state.

From ee35976c9250ceaeab7659ef1b18dc926c8bf0c2 Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Wed, 15 Jul 2015 13:30:06 -0700
Subject: [PATCH 058/209] [Mobile] Tree Mobile

Added mobile/_tree.scss and edited
normal tree.scss to accomodate for
future sass that adjusts the tree
menu.
---
 platform/commonUI/general/res/css/tree.css    | 22 ++++++++++++++
 .../general/res/sass/mobile/_tree.scss        | 30 +++++++++++++++++++
 platform/commonUI/general/res/sass/tree.scss  |  3 +-
 3 files changed, 54 insertions(+), 1 deletion(-)

diff --git a/platform/commonUI/general/res/css/tree.css b/platform/commonUI/general/res/css/tree.css
index b9e4f360ba..aba2210cf6 100644
--- a/platform/commonUI/general/res/css/tree.css
+++ b/platform/commonUI/general/res/css/tree.css
@@ -284,3 +284,25 @@ ul.tree {
   /* line 144, ../sass/tree/_tree.scss */
   ul.tree ul.tree {
     margin-left: 15px; }
+
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
diff --git a/platform/commonUI/general/res/sass/mobile/_tree.scss b/platform/commonUI/general/res/sass/mobile/_tree.scss
index e69de29bb2..673ff6c066 100644
--- a/platform/commonUI/general/res/sass/mobile/_tree.scss
+++ b/platform/commonUI/general/res/sass/mobile/_tree.scss
@@ -0,0 +1,30 @@
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+//mobile-flat-list {
+//	// For lists of tree-items that are flat. Remove margin, etc. normally needed for the expansion arrow.
+//	.tree-item {
+//        .label {
+//			left: -100px;
+//		}
+//	}
+//}
\ No newline at end of file
diff --git a/platform/commonUI/general/res/sass/tree.scss b/platform/commonUI/general/res/sass/tree.scss
index 5cb5d6fe1f..4af1deb6ac 100644
--- a/platform/commonUI/general/res/sass/tree.scss
+++ b/platform/commonUI/general/res/sass/tree.scss
@@ -29,4 +29,5 @@
 @import "mobile/constants";
 @import "mixins";
 @import "mobile/mixins";
-@import "tree/tree";
\ No newline at end of file
+@import "tree/tree";
+@import "mobile/tree";
\ No newline at end of file

From 4b5540830b4e975fb1b506e02192143435bbefe3 Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Wed, 15 Jul 2015 16:49:16 -0700
Subject: [PATCH 059/209] [Mobile] Slide menu

Rouch menu using important to
overwrite splitter setting of
amounts. Also has default values
for now for all devices.
---
 .../commonUI/browse/res/templates/browse.html |  27 +++--
 .../general/res/css/theme-espresso.css        | 114 ++++++------------
 .../general/res/sass/mobile/_layout.scss      |  85 ++++++-------
 .../res/sass/user-environ/_layout.scss        |   1 +
 4 files changed, 99 insertions(+), 128 deletions(-)

diff --git a/platform/commonUI/browse/res/templates/browse.html b/platform/commonUI/browse/res/templates/browse.html
index 730cffbeef..1cecf97b3f 100644
--- a/platform/commonUI/browse/res/templates/browse.html
+++ b/platform/commonUI/browse/res/templates/browse.html
@@ -19,12 +19,18 @@
  this source code distribution or the Licensing information page available
  at runtime from the About dialog for additional information.
 -->
+
 <div ng-controller="BrowseController">
-    <div content="jquery-wrapper" class="abs holder-all browse-mode holder-hide" ng-class="treeClass ? 'holder-show' : 'holder-hide'">
+    <div content="jquery-wrapper" class="abs holder-all browse-mode">
         <mct-include key="'topbar-browse'"></mct-include>
-        <div class="holder browse-area s-browse-area abs">
-            <mct-split-pane class='contents abs' anchor='left'>
-                <div class='split-pane-component treeview pane browse-manage createtreebtns'>
+        
+        <!-- WRAPPER CLASS IS HERE-->
+        <!-- NG-CLASS HERE TO SWITCH THE PARENT CLASS FOR pane-special's left and right-->
+        <div class="holder browse-area s-browse-area abs browse-wrapper" ng-class="treeClass ? 'browse-showtree' : 'browse-hidetree'"  anchor='left'>
+            <mct-split-pane class='contents abs'>
+            
+                <!-- TREE MENU: ADDED THE PANE LEFT HERE, similar to .pane.left example-->
+                <div class='split-pane-component treeview pane pane-special left'>  
                     <mct-representation key="'create-button'" mct-object="navigatedObject">
                     </mct-representation>
                     <div class='holder tree-holder abs'>
@@ -34,16 +40,19 @@
                         </mct-representation>
                     </div>
                 </div>
+                
                 <mct-splitter class="mobile-hide"></mct-splitter>
-                <div class='split-pane-component items pane'>
-                    <div class='holder abs hider-check' id='content-area'>
+                
+                    <!-- ITEMS MENU: ADDED THE PANE RIGHT HERE, similar to .pane.right example-->
+                    <div class='split-pane-component items pane pane-special right'>
+                    <div class='holder abs' id='content-area'>
                         <mct-representation mct-object="navigatedObject" key="'browse-object'">
                         </mct-representation>
                     </div>
-                </div>
+                    <div class="s-very-subtle key-properties ui-symbol mobile-menu-icon button-pos" 
+                            ng-click="treeSlide()">m</div>                        
+                </div>                     
             </mct-split-pane>
-            <div class="s-very-subtle key-properties ui-symbol mobile-menu-icon button-pos" 
-                            ng-click="treeSlide()">m</div>        
         </div>
         <mct-include key="'bottombar'"></mct-include>
     </div>
diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index 05ffc921fc..e9d9e05a30 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -698,18 +698,18 @@ mct-container {
 /* line 251, ../sass/user-environ/_layout.scss */
 .split-layout.vertical > .pane {
   margin-left: 5px; }
-  /* line 253, ../sass/user-environ/_layout.scss */
+  /* line 254, ../sass/user-environ/_layout.scss */
   .split-layout.vertical > .pane > .holder {
     left: 0;
     right: 0; }
-  /* line 257, ../sass/user-environ/_layout.scss */
+  /* line 258, ../sass/user-environ/_layout.scss */
   .split-layout.vertical > .pane:first-child {
     margin-left: 0; }
-    /* line 259, ../sass/user-environ/_layout.scss */
+    /* line 260, ../sass/user-environ/_layout.scss */
     .split-layout.vertical > .pane:first-child .holder {
       right: 5px; }
 
-/* line 268, ../sass/user-environ/_layout.scss */
+/* line 269, ../sass/user-environ/_layout.scss */
 .vscroll {
   overflow-y: auto; }
 
@@ -734,111 +734,77 @@ mct-container {
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-@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 26, ../sass/mobile/_layout.scss */
-  .holder-hide {
-    -moz-transition-duration: 0.2s;
-    -o-transition-duration: 0.2s;
-    -webkit-transition-duration: 0.2s;
-    transition-duration: 0.2s;
-    left: -257px; } }
-@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 26, ../sass/mobile/_layout.scss */
-  .holder-hide {
-    -moz-transition-duration: 0.2s;
-    -o-transition-duration: 0.2s;
-    -webkit-transition-duration: 0.2s;
-    transition-duration: 0.2s;
-    left: -399.5px; } }
+/* line 25, ../sass/mobile/_layout.scss */
+.browse-wrapper,
+.pane-special {
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  left: 0;
+  white-space: nowrap;
+  height: 100%; }
 
-/* line 37, ../sass/mobile/_layout.scss */
-.holder-show {
-  -moz-transition-duration: 0.2s;
-  -o-transition-duration: 0.2s;
-  -webkit-transition-duration: 0.2s;
-  transition-duration: 0.2s; }
-  @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 37, ../sass/mobile/_layout.scss */
-    .holder-show {
-      left: 0px; } }
-  @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 37, ../sass/mobile/_layout.scss */
-    .holder-show {
-      left: 0px; } }
+/* line 36, ../sass/mobile/_layout.scss */
+.browse-hidetree .pane-special.left {
+  display: none !important; }
+/* line 43, ../sass/mobile/_layout.scss */
+.browse-hidetree .pane-special.right {
+  width: auto !important;
+  left: 0px !important; }
 
-/* line 47, ../sass/mobile/_layout.scss */
+/* line 51, ../sass/mobile/_layout.scss */
+.browse-showtree .pane-special.left {
+  display: block !important;
+  width: 300px !important;
+  right: auto !important; }
+/* line 58, ../sass/mobile/_layout.scss */
+.browse-showtree .pane-special.right {
+  left: 300px !important;
+  width: auto !important; }
+
+/* line 68, ../sass/mobile/_layout.scss */
 .button-pos {
   position: absolute;
   -moz-transition-duration: 0.2s;
   -o-transition-duration: 0.2s;
   -webkit-transition-duration: 0.2s;
   transition-duration: 0.2s; }
-  @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 47, ../sass/mobile/_layout.scss */
-    .button-pos {
-      left: 257px; } }
-  @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 47, ../sass/mobile/_layout.scss */
-    .button-pos {
-      left: 399.5px; } }
 
-/* line 58, ../sass/mobile/_layout.scss */
+/* line 73, ../sass/mobile/_layout.scss */
 .object-header-mobile {
   position: relative; }
-  @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 58, ../sass/mobile/_layout.scss */
-    .object-header-mobile {
-      left: 25.7px; } }
-  @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 58, ../sass/mobile/_layout.scss */
-    .object-header-mobile {
-      left: 39.95px; } }
 
-/* line 68, ../sass/mobile/_layout.scss */
+/* line 77, ../sass/mobile/_layout.scss */
 .mobile-menu-icon {
   top: 5px; }
   @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 68, ../sass/mobile/_layout.scss */
+    /* line 77, ../sass/mobile/_layout.scss */
     .mobile-menu-icon {
       font-size: 125%; } }
   @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 68, ../sass/mobile/_layout.scss */
+    /* line 77, ../sass/mobile/_layout.scss */
     .mobile-menu-icon {
       font-size: 175%; } }
   @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-    /* line 68, ../sass/mobile/_layout.scss */
+    /* line 77, ../sass/mobile/_layout.scss */
     .mobile-menu-icon {
       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 81, ../sass/mobile/_layout.scss */
+  /* line 90, ../sass/mobile/_layout.scss */
   .mobile-hide {
     display: none; } }
 @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 81, ../sass/mobile/_layout.scss */
+  /* line 90, ../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 90, ../sass/mobile/_layout.scss */
+  /* line 99, ../sass/mobile/_layout.scss */
   .phone-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 96, ../sass/mobile/_layout.scss */
-  .browse-manage {
-    width: 257px; } }
-@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 96, ../sass/mobile/_layout.scss */
-  .browse-manage {
-    width: 399.5px; } }
-@media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-  /* line 96, ../sass/mobile/_layout.scss */
-  .browse-manage {
-    min-width: 150px;
-    max-width: 800px;
-    width: 25%; } }
-
 /*****************************************************************************
 * Open MCT Web, Copyright (c) 2014-2015, United States Government
 * as represented by the Administrator of the National Aeronautics and Space
diff --git a/platform/commonUI/general/res/sass/mobile/_layout.scss b/platform/commonUI/general/res/sass/mobile/_layout.scss
index 9cc09d22b6..154b8113a5 100644
--- a/platform/commonUI/general/res/sass/mobile/_layout.scss
+++ b/platform/commonUI/general/res/sass/mobile/_layout.scss
@@ -20,49 +20,58 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-// style="min-width: 150px; max-width: 800px; width: 25%;"
-// NOTE: Added to adjust the browse folder tree list view
+// NOTE: Added to adjust the browse folder left list view
 
-.holder-hide {
-    @include phone {
-        @include transition-duration(.2s);
-        left: (-1) * $phoneSlideMenuWidth;
-    }
-    @include tablet {
-        @include transition-duration(.2s);
-        left: (-1) * $tabletSlideMenuWidth;
-    }     
+.browse-wrapper,
+.pane-special {
+    position: absolute;
+    left: 0; top: 0;
+    right: 0; left: 0;
+    white-space: nowrap;
+    height: 100%;
+//    overflow: hidden;
 }
 
-.holder-show {
-    @include transition-duration(.2s);
-    @include phone {
-        left: 0px;
+.browse-hidetree {
+    .pane-special.left {
+//        background-color: #FFF;
+//        right: auto;
+//        width: 50px;
+        display: none !important;
     }
-    @include tablet {
-        left: 0px;
-    }         
+
+    .pane-special.right {
+//        background-color: #325DE6;
+        width: auto !important;
+        left: 0px !important;
+    }    
 }
 
+.browse-showtree {
+    .pane-special.left {
+        display: block !important;
+//        background-color: #FFF;
+        width: 300px !important;
+        right: auto !important;
+    }
+    
+    .pane-special.right {
+//        background-color: #325DE6;
+        left: 300px !important;
+        width: auto !important;
+    }
+}
+
+
+
+
 .button-pos {
     position: absolute;
-    @include transition-duration(.2s);
-    @include phone {        
-        left: $phoneSlideMenuWidth;
-    }
-    @include tablet {
-        left: $tabletSlideMenuWidth;
-    }      
+    @include transition-duration(.2s);   
 }
 
 .object-header-mobile {
     position: relative;
-    @include phone {
-        left: $phoneSlideMenuWidth/10;
-    }
-    @include tablet {
-        left: $tabletSlideMenuWidth/10;
-    }
 }
 
 .mobile-menu-icon {
@@ -92,17 +101,3 @@
         display: none;
     }
 }
-
-.browse-manage {
-    @include phone {
-        width: $phoneSlideMenuWidth;
-    }
-    @include tablet {
-        width: $tabletSlideMenuWidth;
-    }    
-    @include desktop {
-        min-width: 150px;
-        max-width: 800px;
-        width: 25%;   
-    }   
-}
diff --git a/platform/commonUI/general/res/sass/user-environ/_layout.scss b/platform/commonUI/general/res/sass/user-environ/_layout.scss
index 639e53af75..da98997d20 100644
--- a/platform/commonUI/general/res/sass/user-environ/_layout.scss
+++ b/platform/commonUI/general/res/sass/user-environ/_layout.scss
@@ -249,6 +249,7 @@
 	&.vertical {
 		// Slides left and right
 		>.pane {
+//            @include test();
 			margin-left: $interiorMargin;
 			>.holder {
 				left: 0;

From a9dd1f982819ab63adbeb063bd815d48f4839b18 Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Wed, 15 Jul 2015 16:57:36 -0700
Subject: [PATCH 060/209] [Mobile] Transistions

Cleaned up and added transitions.
---
 .../general/res/css/theme-espresso.css        | 47 ++++++++++++++-----
 .../general/res/sass/mobile/_layout.scss      | 15 +++---
 2 files changed, 41 insertions(+), 21 deletions(-)

diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index e9d9e05a30..368ef6274c 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -737,6 +737,10 @@ mct-container {
 /* line 25, ../sass/mobile/_layout.scss */
 .browse-wrapper,
 .pane-special {
+  -moz-transition-duration: 0.2s;
+  -o-transition-duration: 0.2s;
+  -webkit-transition-duration: 0.2s;
+  transition-duration: 0.2s;
   position: absolute;
   left: 0;
   top: 0;
@@ -747,23 +751,39 @@ mct-container {
 
 /* line 36, ../sass/mobile/_layout.scss */
 .browse-hidetree .pane-special.left {
+  -moz-transition-duration: 0.2s;
+  -o-transition-duration: 0.2s;
+  -webkit-transition-duration: 0.2s;
+  transition-duration: 0.2s;
   display: none !important; }
-/* line 43, ../sass/mobile/_layout.scss */
+/* line 41, ../sass/mobile/_layout.scss */
 .browse-hidetree .pane-special.right {
+  -moz-transition-duration: 0.2s;
+  -o-transition-duration: 0.2s;
+  -webkit-transition-duration: 0.2s;
+  transition-duration: 0.2s;
   width: auto !important;
   left: 0px !important; }
 
-/* line 51, ../sass/mobile/_layout.scss */
+/* line 49, ../sass/mobile/_layout.scss */
 .browse-showtree .pane-special.left {
+  -moz-transition-duration: 0.2s;
+  -o-transition-duration: 0.2s;
+  -webkit-transition-duration: 0.2s;
+  transition-duration: 0.2s;
   display: block !important;
   width: 300px !important;
   right: auto !important; }
-/* line 58, ../sass/mobile/_layout.scss */
+/* line 56, ../sass/mobile/_layout.scss */
 .browse-showtree .pane-special.right {
+  -moz-transition-duration: 0.2s;
+  -o-transition-duration: 0.2s;
+  -webkit-transition-duration: 0.2s;
+  transition-duration: 0.2s;
   left: 300px !important;
   width: auto !important; }
 
-/* line 68, ../sass/mobile/_layout.scss */
+/* line 66, ../sass/mobile/_layout.scss */
 .button-pos {
   position: absolute;
   -moz-transition-duration: 0.2s;
@@ -771,37 +791,38 @@ mct-container {
   -webkit-transition-duration: 0.2s;
   transition-duration: 0.2s; }
 
-/* line 73, ../sass/mobile/_layout.scss */
+/* line 71, ../sass/mobile/_layout.scss */
 .object-header-mobile {
-  position: relative; }
+  position: relative;
+  left: 30px; }
 
-/* line 77, ../sass/mobile/_layout.scss */
+/* line 76, ../sass/mobile/_layout.scss */
 .mobile-menu-icon {
   top: 5px; }
   @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 77, ../sass/mobile/_layout.scss */
+    /* line 76, ../sass/mobile/_layout.scss */
     .mobile-menu-icon {
       font-size: 125%; } }
   @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 77, ../sass/mobile/_layout.scss */
+    /* line 76, ../sass/mobile/_layout.scss */
     .mobile-menu-icon {
       font-size: 175%; } }
   @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-    /* line 77, ../sass/mobile/_layout.scss */
+    /* line 76, ../sass/mobile/_layout.scss */
     .mobile-menu-icon {
       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 90, ../sass/mobile/_layout.scss */
+  /* line 89, ../sass/mobile/_layout.scss */
   .mobile-hide {
     display: none; } }
 @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 90, ../sass/mobile/_layout.scss */
+  /* line 89, ../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 99, ../sass/mobile/_layout.scss */
+  /* line 98, ../sass/mobile/_layout.scss */
   .phone-hide {
     display: none; } }
 
diff --git a/platform/commonUI/general/res/sass/mobile/_layout.scss b/platform/commonUI/general/res/sass/mobile/_layout.scss
index 154b8113a5..aa0a012faa 100644
--- a/platform/commonUI/general/res/sass/mobile/_layout.scss
+++ b/platform/commonUI/general/res/sass/mobile/_layout.scss
@@ -24,24 +24,22 @@
 
 .browse-wrapper,
 .pane-special {
+    @include transition-duration(.2s);
     position: absolute;
     left: 0; top: 0;
     right: 0; left: 0;
     white-space: nowrap;
     height: 100%;
-//    overflow: hidden;
 }
 
 .browse-hidetree {
     .pane-special.left {
-//        background-color: #FFF;
-//        right: auto;
-//        width: 50px;
+        @include transition-duration(.2s);
         display: none !important;
     }
 
     .pane-special.right {
-//        background-color: #325DE6;
+        @include transition-duration(.2s);
         width: auto !important;
         left: 0px !important;
     }    
@@ -49,14 +47,14 @@
 
 .browse-showtree {
     .pane-special.left {
+        @include transition-duration(.2s);
         display: block !important;
-//        background-color: #FFF;
         width: 300px !important;
         right: auto !important;
     }
     
     .pane-special.right {
-//        background-color: #325DE6;
+        @include transition-duration(.2s);
         left: 300px !important;
         width: auto !important;
     }
@@ -67,11 +65,12 @@
 
 .button-pos {
     position: absolute;
-    @include transition-duration(.2s);   
+    @include transition-duration(.2s);
 }
 
 .object-header-mobile {
     position: relative;
+    left: 30px;
 }
 
 .mobile-menu-icon {

From ce75d194805c551936a7caf4c090a367a5b679d5 Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Thu, 16 Jul 2015 10:44:20 -0700
Subject: [PATCH 061/209] [Mobile] Desktop

Cleans up the _layout by making the different
pane sizes device specific. Also adds a new
sass class just for desktop versions.
---
 .../commonUI/browse/res/templates/browse.html |   8 +-
 .../general/res/css/theme-espresso.css        | 186 ++++++++++++------
 .../general/res/sass/mobile/_layout.scss      | 109 +++++++---
 .../general/res/sass/mobile/_mixins.scss      |  30 ++-
 4 files changed, 247 insertions(+), 86 deletions(-)

diff --git a/platform/commonUI/browse/res/templates/browse.html b/platform/commonUI/browse/res/templates/browse.html
index 1cecf97b3f..0d6ee32bac 100644
--- a/platform/commonUI/browse/res/templates/browse.html
+++ b/platform/commonUI/browse/res/templates/browse.html
@@ -26,11 +26,11 @@
         
         <!-- WRAPPER CLASS IS HERE-->
         <!-- NG-CLASS HERE TO SWITCH THE PARENT CLASS FOR pane-special's left and right-->
-        <div class="holder browse-area s-browse-area abs browse-wrapper" ng-class="treeClass ? 'browse-showtree' : 'browse-hidetree'"  anchor='left'>
-            <mct-split-pane class='contents abs'>
+        <div class="holder browse-area s-browse-area abs browse-wrapper" ng-class="treeClass ? 'browse-showtree' : 'browse-hidetree'">
+            <mct-split-pane class='contents abs' anchor='left'>
             
                 <!-- TREE MENU: ADDED THE PANE LEFT HERE, similar to .pane.left example-->
-                <div class='split-pane-component treeview pane pane-special left'>  
+                <div class='split-pane-component treeview pane pane-special left desktop-browse'>  
                     <mct-representation key="'create-button'" mct-object="navigatedObject">
                     </mct-representation>
                     <div class='holder tree-holder abs'>
@@ -41,7 +41,7 @@
                     </div>
                 </div>
                 
-                <mct-splitter class="mobile-hide"></mct-splitter>
+                <mct-splitter class="mobile-splitter"></mct-splitter>
                 
                     <!-- ITEMS MENU: ADDED THE PANE RIGHT HERE, similar to .pane.right example-->
                     <div class='split-pane-component items pane pane-special right'>
diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index 368ef6274c..d503687f0f 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -734,56 +734,120 @@ mct-container {
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-/* line 25, ../sass/mobile/_layout.scss */
-.browse-wrapper,
-.pane-special {
-  -moz-transition-duration: 0.2s;
-  -o-transition-duration: 0.2s;
-  -webkit-transition-duration: 0.2s;
-  transition-duration: 0.2s;
-  position: absolute;
-  left: 0;
-  top: 0;
-  right: 0;
-  left: 0;
-  white-space: nowrap;
-  height: 100%; }
+@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 25, ../sass/mobile/_layout.scss */
+  .browse-wrapper,
+  .pane-special {
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    left: 0;
+    white-space: nowrap;
+    height: 100%; } }
+@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 25, ../sass/mobile/_layout.scss */
+  .browse-wrapper,
+  .pane-special {
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    left: 0;
+    white-space: nowrap;
+    height: 100%; } }
 
-/* line 36, ../sass/mobile/_layout.scss */
-.browse-hidetree .pane-special.left {
-  -moz-transition-duration: 0.2s;
-  -o-transition-duration: 0.2s;
-  -webkit-transition-duration: 0.2s;
-  transition-duration: 0.2s;
-  display: none !important; }
-/* line 41, ../sass/mobile/_layout.scss */
-.browse-hidetree .pane-special.right {
-  -moz-transition-duration: 0.2s;
-  -o-transition-duration: 0.2s;
-  -webkit-transition-duration: 0.2s;
-  transition-duration: 0.2s;
-  width: auto !important;
-  left: 0px !important; }
+@media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
+  /* line 49, ../sass/mobile/_layout.scss */
+  .desktop-browse {
+    min-width: 150px;
+    max-width: 800px;
+    width: 25%; } }
 
-/* line 49, ../sass/mobile/_layout.scss */
-.browse-showtree .pane-special.left {
-  -moz-transition-duration: 0.2s;
-  -o-transition-duration: 0.2s;
-  -webkit-transition-duration: 0.2s;
-  transition-duration: 0.2s;
-  display: block !important;
-  width: 300px !important;
-  right: auto !important; }
-/* line 56, ../sass/mobile/_layout.scss */
-.browse-showtree .pane-special.right {
-  -moz-transition-duration: 0.2s;
-  -o-transition-duration: 0.2s;
-  -webkit-transition-duration: 0.2s;
-  transition-duration: 0.2s;
-  left: 300px !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), 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 58, ../sass/mobile/_layout.scss */
+  .browse-hidetree .pane-special.left {
+    -moz-transition-duration: 0.2s;
+    -o-transition-duration: 0.2s;
+    -webkit-transition-duration: 0.2s;
+    transition-duration: 0.2s;
+    display: none !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), 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 58, ../sass/mobile/_layout.scss */
+  .browse-hidetree .pane-special.left {
+    -moz-transition-duration: 0.2s;
+    -o-transition-duration: 0.2s;
+    -webkit-transition-duration: 0.2s;
+    transition-duration: 0.2s;
+    display: none !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) {
+  /* line 69, ../sass/mobile/_layout.scss */
+  .browse-hidetree .pane-special.right {
+    -moz-transition-duration: 0.2s;
+    -o-transition-duration: 0.2s;
+    -webkit-transition-duration: 0.2s;
+    transition-duration: 0.2s;
+    width: auto !important;
+    left: 0px !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), 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 69, ../sass/mobile/_layout.scss */
+  .browse-hidetree .pane-special.right {
+    -moz-transition-duration: 0.2s;
+    -o-transition-duration: 0.2s;
+    -webkit-transition-duration: 0.2s;
+    transition-duration: 0.2s;
+    width: auto !important;
+    left: 0px !important; } }
 
-/* line 66, ../sass/mobile/_layout.scss */
+@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 84, ../sass/mobile/_layout.scss */
+  .browse-showtree .pane-special.left {
+    -moz-transition-duration: 0.2s;
+    -o-transition-duration: 0.2s;
+    -webkit-transition-duration: 0.2s;
+    transition-duration: 0.2s;
+    display: block !important;
+    width: 80% !important;
+    right: auto !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), 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 84, ../sass/mobile/_layout.scss */
+  .browse-showtree .pane-special.left {
+    -moz-transition-duration: 0.2s;
+    -o-transition-duration: 0.2s;
+    -webkit-transition-duration: 0.2s;
+    transition-duration: 0.2s;
+    display: block !important;
+    width: 60% !important;
+    right: 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), 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 99, ../sass/mobile/_layout.scss */
+  .browse-showtree .pane-special.right {
+    -moz-transition-duration: 0.2s;
+    -o-transition-duration: 0.2s;
+    -webkit-transition-duration: 0.2s;
+    transition-duration: 0.2s;
+    left: 80% !important;
+    width: auto !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), 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 99, ../sass/mobile/_layout.scss */
+  .browse-showtree .pane-special.right {
+    -moz-transition-duration: 0.2s;
+    -o-transition-duration: 0.2s;
+    -webkit-transition-duration: 0.2s;
+    transition-duration: 0.2s;
+    left: 60% !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), 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 113, ../sass/mobile/_layout.scss */
+  .mobile-splitter {
+    display: none; } }
+@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 113, ../sass/mobile/_layout.scss */
+  .mobile-splitter {
+    display: none; } }
+
+/* line 124, ../sass/mobile/_layout.scss */
 .button-pos {
   position: absolute;
   -moz-transition-duration: 0.2s;
@@ -791,38 +855,44 @@ mct-container {
   -webkit-transition-duration: 0.2s;
   transition-duration: 0.2s; }
 
-/* line 71, ../sass/mobile/_layout.scss */
-.object-header-mobile {
-  position: relative;
-  left: 30px; }
+@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 129, ../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 129, ../sass/mobile/_layout.scss */
+  .object-header-mobile {
+    position: relative;
+    left: 30px; } }
 
-/* line 76, ../sass/mobile/_layout.scss */
+/* line 140, ../sass/mobile/_layout.scss */
 .mobile-menu-icon {
   top: 5px; }
   @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 76, ../sass/mobile/_layout.scss */
+    /* line 140, ../sass/mobile/_layout.scss */
     .mobile-menu-icon {
       font-size: 125%; } }
   @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 76, ../sass/mobile/_layout.scss */
+    /* line 140, ../sass/mobile/_layout.scss */
     .mobile-menu-icon {
       font-size: 175%; } }
   @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-    /* line 76, ../sass/mobile/_layout.scss */
+    /* line 140, ../sass/mobile/_layout.scss */
     .mobile-menu-icon {
       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 89, ../sass/mobile/_layout.scss */
+  /* line 154, ../sass/mobile/_layout.scss */
   .mobile-hide {
     display: none; } }
 @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 89, ../sass/mobile/_layout.scss */
+  /* line 154, ../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 98, ../sass/mobile/_layout.scss */
+  /* line 163, ../sass/mobile/_layout.scss */
   .phone-hide {
     display: none; } }
 
diff --git a/platform/commonUI/general/res/sass/mobile/_layout.scss b/platform/commonUI/general/res/sass/mobile/_layout.scss
index aa0a012faa..e36e825ca0 100644
--- a/platform/commonUI/general/res/sass/mobile/_layout.scss
+++ b/platform/commonUI/general/res/sass/mobile/_layout.scss
@@ -24,42 +24,100 @@
 
 .browse-wrapper,
 .pane-special {
-    @include transition-duration(.2s);
-    position: absolute;
-    left: 0; top: 0;
-    right: 0; left: 0;
-    white-space: nowrap;
-    height: 100%;
+//    @include transition-duration(.2s);
+    @include phone {
+        position: absolute;
+        left: 0; top: 0;
+        right: 0; left: 0;
+        white-space: nowrap;
+        height: 100%;
+    }
+    @include tablet {
+        position: absolute;
+        left: 0; top: 0;
+        right: 0; left: 0;
+        white-space: nowrap;
+        height: 100%;        
+    }
+}
+
+$phoneMenuSize: 80%;
+$tabletMenuSize: 60%;
+$desktopMenuSize: 25%;
+
+
+.desktop-browse {
+    @include desktop {
+        min-width: 150px;
+        max-width: 800px;
+        width: $desktopMenuSize;   
+    }   
 }
 
 .browse-hidetree {
     .pane-special.left {
-        @include transition-duration(.2s);
-        display: none !important;
+        @include phone {
+            @include transition-duration(.2s);
+            display: none !important;
+        }
+        @include tablet {
+            @include transition-duration(.2s);
+            display: none !important;
+        }
     }
 
-    .pane-special.right {
-        @include transition-duration(.2s);
-        width: auto !important;
-        left: 0px !important;
+    .pane-special.right {       
+        @include phone {
+            @include transition-duration(.2s);
+            width: auto !important;
+            left: 0px !important;
+        }
+        @include tablet {
+            @include transition-duration(.2s);
+            width: auto !important;
+            left: 0px !important;
+        }
     }    
 }
 
 .browse-showtree {
-    .pane-special.left {
-        @include transition-duration(.2s);
-        display: block !important;
-        width: 300px !important;
-        right: auto !important;
+    .pane-special.left {      
+        @include phone {
+            @include transition-duration(.2s);
+            display: block !important;
+            width: $phoneMenuSize !important;
+            right: auto !important;
+        }
+        @include tablet {
+            @include transition-duration(.2s);
+            display: block !important;
+            width: $tabletMenuSize !important;
+            right: auto !important;
+        }
     }
     
     .pane-special.right {
-        @include transition-duration(.2s);
-        left: 300px !important;
-        width: auto !important;
+        @include phone {
+            @include transition-duration(.2s);
+            left: $phoneMenuSize !important;
+            width: auto !important;
+        }
+        @include tablet {
+            @include transition-duration(.2s);
+            left: $tabletMenuSize !important;
+            width: auto !important;
+        }
     }
 }
 
+.mobile-splitter {
+    @include phone {
+        display: none;
+    }
+    @include tablet {
+        display: none;
+    }
+}
 
 
 
@@ -69,8 +127,14 @@
 }
 
 .object-header-mobile {
-    position: relative;
-    left: 30px;
+    @include phone {
+        position: relative;
+        left: 30px;
+    }
+    @include tablet {
+        position: relative;
+        left: 30px;
+    }
 }
 
 .mobile-menu-icon {
@@ -86,6 +150,7 @@
     }       
 }
 
+
 .mobile-hide {
     @include phone {
         display: none;
diff --git a/platform/commonUI/general/res/sass/mobile/_mixins.scss b/platform/commonUI/general/res/sass/mobile/_mixins.scss
index b1e868add5..319a3683ca 100644
--- a/platform/commonUI/general/res/sass/mobile/_mixins.scss
+++ b/platform/commonUI/general/res/sass/mobile/_mixins.scss
@@ -24,7 +24,20 @@
 @mixin phone {
     @media #{$phonePortrait},
            #{$phoneLandscape},
-           #{$phoneLandscapeEmu}{
+           #{$phoneLandscapeEmu} {
+        @content
+    }
+}
+
+@mixin phonePortrait {
+    @media #{$phonePortrait} {
+        @content
+    }
+}
+
+@mixin phoneLandscape {
+    @media #{$phoneLandscape},
+           #{$phoneLandscapeEmu} {
         @content
     }
 }
@@ -32,7 +45,20 @@
 @mixin tablet {
     @media #{$tabletPortrait},
            #{$tabletLandscape},
-           #{$tabletLandscapeEmu}{
+           #{$tabletLandscapeEmu} {
+        @content
+    }
+}
+
+@mixin tabletPortrait {
+    @media #{$tabletPortrait} {
+        @content
+    }
+}
+
+@mixin tabletLandscape {
+    @media #{$tabletLandscape},
+           #{$tabletLandscapeEmu} {
         @content
     }
 }

From e9314898d2316a742db668b3559d7f23cf935c5a Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Thu, 16 Jul 2015 11:50:55 -0700
Subject: [PATCH 062/209] [Mobile] Portrait & Landsc.

Specifies amounts based on phone and tablet's
orientation. Not tested for the actual device,
but emulator. Also currently makes the create
button appear/disappear instead of smoothly sliding.
---
 .../commonUI/browse/res/templates/browse.html |   2 +-
 .../general/res/css/theme-espresso.css        | 132 ++++++++++--------
 .../general/res/sass/mobile/_layout.scss      |  82 ++++++-----
 .../general/res/sass/mobile/_mixins.scss      |  11 ++
 4 files changed, 132 insertions(+), 95 deletions(-)

diff --git a/platform/commonUI/browse/res/templates/browse.html b/platform/commonUI/browse/res/templates/browse.html
index 0d6ee32bac..5428086f20 100644
--- a/platform/commonUI/browse/res/templates/browse.html
+++ b/platform/commonUI/browse/res/templates/browse.html
@@ -31,7 +31,7 @@
             
                 <!-- TREE MENU: ADDED THE PANE LEFT HERE, similar to .pane.left example-->
                 <div class='split-pane-component treeview pane pane-special left desktop-browse'>  
-                    <mct-representation key="'create-button'" mct-object="navigatedObject">
+                    <mct-representation key="'create-button'" mct-object="navigatedObject" class="createBtnPos">
                     </mct-representation>
                     <div class='holder tree-holder abs'>
                         <mct-representation key="'tree'"
diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index d503687f0f..9325a2c927 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -749,6 +749,10 @@ mct-container {
   /* line 25, ../sass/mobile/_layout.scss */
   .browse-wrapper,
   .pane-special {
+    -moz-transition-duration: 0.2s;
+    -o-transition-duration: 0.2s;
+    -webkit-transition-duration: 0.2s;
+    transition-duration: 0.2s;
     position: absolute;
     left: 0;
     top: 0;
@@ -758,39 +762,26 @@ mct-container {
     height: 100%; } }
 
 @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-  /* line 49, ../sass/mobile/_layout.scss */
+  /* line 51, ../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) {
-  /* line 58, ../sass/mobile/_layout.scss */
+@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 60, ../sass/mobile/_layout.scss */
   .browse-hidetree .pane-special.left {
     -moz-transition-duration: 0.2s;
     -o-transition-duration: 0.2s;
     -webkit-transition-duration: 0.2s;
     transition-duration: 0.2s;
-    display: none !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), 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 58, ../sass/mobile/_layout.scss */
-  .browse-hidetree .pane-special.left {
-    -moz-transition-duration: 0.2s;
-    -o-transition-duration: 0.2s;
-    -webkit-transition-duration: 0.2s;
-    transition-duration: 0.2s;
-    display: none !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) {
-  /* line 69, ../sass/mobile/_layout.scss */
-  .browse-hidetree .pane-special.right {
-    -moz-transition-duration: 0.2s;
-    -o-transition-duration: 0.2s;
-    -webkit-transition-duration: 0.2s;
-    transition-duration: 0.2s;
-    width: auto !important;
-    left: 0px !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), 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 69, ../sass/mobile/_layout.scss */
+    width: 0px !important;
+    right: auto !important; }
+    /* line 66, ../sass/mobile/_layout.scss */
+    .browse-hidetree .pane-special.left .createBtnPos {
+      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), 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 72, ../sass/mobile/_layout.scss */
   .browse-hidetree .pane-special.right {
     -moz-transition-duration: 0.2s;
     -o-transition-duration: 0.2s;
@@ -799,8 +790,8 @@ mct-container {
     width: auto !important;
     left: 0px !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) {
-  /* line 84, ../sass/mobile/_layout.scss */
+@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) {
+  /* line 82, ../sass/mobile/_layout.scss */
   .browse-showtree .pane-special.left {
     -moz-transition-duration: 0.2s;
     -o-transition-duration: 0.2s;
@@ -809,18 +800,38 @@ mct-container {
     display: block !important;
     width: 80% !important;
     right: auto !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), 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 84, ../sass/mobile/_layout.scss */
+@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 82, ../sass/mobile/_layout.scss */
   .browse-showtree .pane-special.left {
     -moz-transition-duration: 0.2s;
     -o-transition-duration: 0.2s;
     -webkit-transition-duration: 0.2s;
     transition-duration: 0.2s;
     display: block !important;
-    width: 60% !important;
+    width: 30% !important;
     right: 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), 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 99, ../sass/mobile/_layout.scss */
+@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 82, ../sass/mobile/_layout.scss */
+  .browse-showtree .pane-special.left {
+    -moz-transition-duration: 0.2s;
+    -o-transition-duration: 0.2s;
+    -webkit-transition-duration: 0.2s;
+    transition-duration: 0.2s;
+    display: block !important;
+    width: 30% !important;
+    right: auto !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 82, ../sass/mobile/_layout.scss */
+  .browse-showtree .pane-special.left {
+    -moz-transition-duration: 0.2s;
+    -o-transition-duration: 0.2s;
+    -webkit-transition-duration: 0.2s;
+    transition-duration: 0.2s;
+    display: block !important;
+    width: 25% !important;
+    right: 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 109, ../sass/mobile/_layout.scss */
   .browse-showtree .pane-special.right {
     -moz-transition-duration: 0.2s;
     -o-transition-duration: 0.2s;
@@ -828,26 +839,40 @@ mct-container {
     transition-duration: 0.2s;
     left: 80% !important;
     width: auto !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), 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 99, ../sass/mobile/_layout.scss */
+@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 109, ../sass/mobile/_layout.scss */
   .browse-showtree .pane-special.right {
     -moz-transition-duration: 0.2s;
     -o-transition-duration: 0.2s;
     -webkit-transition-duration: 0.2s;
     transition-duration: 0.2s;
-    left: 60% !important;
+    left: 30% !important;
+    width: auto !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 109, ../sass/mobile/_layout.scss */
+  .browse-showtree .pane-special.right {
+    -moz-transition-duration: 0.2s;
+    -o-transition-duration: 0.2s;
+    -webkit-transition-duration: 0.2s;
+    transition-duration: 0.2s;
+    left: 30% !important;
+    width: auto !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 109, ../sass/mobile/_layout.scss */
+  .browse-showtree .pane-special.right {
+    -moz-transition-duration: 0.2s;
+    -o-transition-duration: 0.2s;
+    -webkit-transition-duration: 0.2s;
+    transition-duration: 0.2s;
+    left: 25% !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), 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 113, ../sass/mobile/_layout.scss */
-  .mobile-splitter {
-    display: none; } }
-@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 113, ../sass/mobile/_layout.scss */
+@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 133, ../sass/mobile/_layout.scss */
   .mobile-splitter {
     display: none; } }
 
-/* line 124, ../sass/mobile/_layout.scss */
+/* line 141, ../sass/mobile/_layout.scss */
 .button-pos {
   position: absolute;
   -moz-transition-duration: 0.2s;
@@ -855,44 +880,35 @@ mct-container {
   -webkit-transition-duration: 0.2s;
   transition-duration: 0.2s; }
 
-@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 129, ../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 129, ../sass/mobile/_layout.scss */
+@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 146, ../sass/mobile/_layout.scss */
   .object-header-mobile {
     position: relative;
     left: 30px; } }
 
-/* line 140, ../sass/mobile/_layout.scss */
+/* line 153, ../sass/mobile/_layout.scss */
 .mobile-menu-icon {
   top: 5px; }
   @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 140, ../sass/mobile/_layout.scss */
+    /* line 153, ../sass/mobile/_layout.scss */
     .mobile-menu-icon {
       font-size: 125%; } }
   @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 140, ../sass/mobile/_layout.scss */
+    /* line 153, ../sass/mobile/_layout.scss */
     .mobile-menu-icon {
       font-size: 175%; } }
   @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-    /* line 140, ../sass/mobile/_layout.scss */
+    /* line 153, ../sass/mobile/_layout.scss */
     .mobile-menu-icon {
       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 154, ../sass/mobile/_layout.scss */
-  .mobile-hide {
-    display: none; } }
-@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 154, ../sass/mobile/_layout.scss */
+@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 167, ../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 163, ../sass/mobile/_layout.scss */
+  /* line 173, ../sass/mobile/_layout.scss */
   .phone-hide {
     display: none; } }
 
diff --git a/platform/commonUI/general/res/sass/mobile/_layout.scss b/platform/commonUI/general/res/sass/mobile/_layout.scss
index e36e825ca0..d5364ae6b2 100644
--- a/platform/commonUI/general/res/sass/mobile/_layout.scss
+++ b/platform/commonUI/general/res/sass/mobile/_layout.scss
@@ -24,7 +24,6 @@
 
 .browse-wrapper,
 .pane-special {
-//    @include transition-duration(.2s);
     @include phone {
         position: absolute;
         left: 0; top: 0;
@@ -33,6 +32,7 @@
         height: 100%;
     }
     @include tablet {
+        @include transition-duration(.2s);
         position: absolute;
         left: 0; top: 0;
         right: 0; left: 0;
@@ -41,8 +41,10 @@
     }
 }
 
-$phoneMenuSize: 80%;
-$tabletMenuSize: 60%;
+$phoneMenuSizePortrait: 80%;
+$phoneMenuSizeLandscape: 30%;
+$tabletMenuSizePortrait: 40%;
+$tabletMenuSizeLandscape: 25%;
 $desktopMenuSize: 25%;
 
 
@@ -56,23 +58,19 @@ $desktopMenuSize: 25%;
 
 .browse-hidetree {
     .pane-special.left {
-        @include phone {
+        @include phoneandtablet {
             @include transition-duration(.2s);
-            display: none !important;
-        }
-        @include tablet {
-            @include transition-duration(.2s);
-            display: none !important;
+            width: 0px !important;
+            right: auto !important;
+            
+            .createBtnPos {
+                display: none;
+            }            
         }
     }
 
     .pane-special.right {       
-        @include phone {
-            @include transition-duration(.2s);
-            width: auto !important;
-            left: 0px !important;
-        }
-        @include tablet {
+        @include phoneandtablet {
             @include transition-duration(.2s);
             width: auto !important;
             left: 0px !important;
@@ -82,39 +80,58 @@ $desktopMenuSize: 25%;
 
 .browse-showtree {
     .pane-special.left {      
-        @include phone {
+        @include phonePortrait {
             @include transition-duration(.2s);
             display: block !important;
-            width: $phoneMenuSize !important;
+            width: $phoneMenuSizePortrait !important;
             right: auto !important;
         }
-        @include tablet {
+        @include phoneLandscape {
             @include transition-duration(.2s);
             display: block !important;
-            width: $tabletMenuSize !important;
+            width: $phoneMenuSizeLandscape !important;
+            right: auto !important;
+        }
+        @include tabletPortrait {
+            @include transition-duration(.2s);
+            display: block !important;
+            width: $tabletMenuSizePortrait !important;
+            right: auto !important;
+        }
+        @include tabletLandscape {
+            @include transition-duration(.2s);
+            display: block !important;
+            width: $tabletMenuSizeLandscape !important;
             right: auto !important;
         }
     }
     
     .pane-special.right {
-        @include phone {
+        @include phonePortrait {
             @include transition-duration(.2s);
-            left: $phoneMenuSize !important;
+            left: $phoneMenuSizePortrait !important;
             width: auto !important;
         }
-        @include tablet {
+        @include phoneLandscape {
             @include transition-duration(.2s);
-            left: $tabletMenuSize !important;
+            left: $phoneMenuSizeLandscape !important;
+            width: auto !important;
+        }
+        @include tabletPortrait {
+            @include transition-duration(.2s);
+            left: $tabletMenuSizePortrait !important;
+            width: auto !important;
+        }
+        @include tabletLandscape {
+            @include transition-duration(.2s);
+            left: $tabletMenuSizeLandscape !important;
             width: auto !important;
         }
     }
 }
 
 .mobile-splitter {
-    @include phone {
-        display: none;
-    }
-    @include tablet {
+    @include phoneandtablet {
         display: none;
     }
 }
@@ -127,11 +144,7 @@ $desktopMenuSize: 25%;
 }
 
 .object-header-mobile {
-    @include phone {
-        position: relative;
-        left: 30px;
-    }
-    @include tablet {
+    @include phoneandtablet {
         position: relative;
         left: 30px;
     }
@@ -152,10 +165,7 @@ $desktopMenuSize: 25%;
 
 
 .mobile-hide {
-    @include phone {
-        display: none;
-    }
-    @include tablet {
+    @include phoneandtablet {
         display: none;
     }
 }
diff --git a/platform/commonUI/general/res/sass/mobile/_mixins.scss b/platform/commonUI/general/res/sass/mobile/_mixins.scss
index 319a3683ca..85d4a78b7a 100644
--- a/platform/commonUI/general/res/sass/mobile/_mixins.scss
+++ b/platform/commonUI/general/res/sass/mobile/_mixins.scss
@@ -63,6 +63,17 @@
     }
 }
 
+@mixin phoneandtablet {
+    @media #{$phonePortrait},
+           #{$phoneLandscape},
+           #{$phoneLandscapeEmu},
+           #{$tabletPortrait},
+           #{$tabletLandscape},
+           #{$tabletLandscapeEmu}{
+        @content
+    }
+}
+
 @mixin desktop {
     @media #{$desktopPortrait},
            #{$desktopLandscape} {

From 180e5f14aeff12015d456abcfa2a8621b3b932c0 Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Thu, 16 Jul 2015 12:25:06 -0700
Subject: [PATCH 063/209] [Mobile] Cleaned up

Made pane sass code more DRY by
using the phoneandtablet mixin
on repeated conditions.
---
 .../general/res/css/theme-espresso.css        | 134 ++++++------------
 .../general/res/sass/mobile/_layout.scss      |  39 ++---
 2 files changed, 56 insertions(+), 117 deletions(-)

diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index 9325a2c927..c28a7e46a8 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -734,7 +734,7 @@ mct-container {
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-@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) {
+@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 25, ../sass/mobile/_layout.scss */
   .browse-wrapper,
   .pane-special {
@@ -745,31 +745,16 @@ mct-container {
     left: 0;
     white-space: nowrap;
     height: 100%; } }
-@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 25, ../sass/mobile/_layout.scss */
-  .browse-wrapper,
-  .pane-special {
-    -moz-transition-duration: 0.2s;
-    -o-transition-duration: 0.2s;
-    -webkit-transition-duration: 0.2s;
-    transition-duration: 0.2s;
-    position: absolute;
-    left: 0;
-    top: 0;
-    right: 0;
-    left: 0;
-    white-space: nowrap;
-    height: 100%; } }
 
 @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-  /* line 51, ../sass/mobile/_layout.scss */
+  /* line 43, ../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 60, ../sass/mobile/_layout.scss */
+  /* line 52, ../sass/mobile/_layout.scss */
   .browse-hidetree .pane-special.left {
     -moz-transition-duration: 0.2s;
     -o-transition-duration: 0.2s;
@@ -777,11 +762,11 @@ mct-container {
     transition-duration: 0.2s;
     width: 0px !important;
     right: auto !important; }
-    /* line 66, ../sass/mobile/_layout.scss */
+    /* line 58, ../sass/mobile/_layout.scss */
     .browse-hidetree .pane-special.left .createBtnPos {
       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), 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 72, ../sass/mobile/_layout.scss */
+  /* line 64, ../sass/mobile/_layout.scss */
   .browse-hidetree .pane-special.right {
     -moz-transition-duration: 0.2s;
     -o-transition-duration: 0.2s;
@@ -790,89 +775,62 @@ mct-container {
     width: auto !important;
     left: 0px !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 82, ../sass/mobile/_layout.scss */
+@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 74, ../sass/mobile/_layout.scss */
   .browse-showtree .pane-special.left {
     -moz-transition-duration: 0.2s;
     -o-transition-duration: 0.2s;
     -webkit-transition-duration: 0.2s;
     transition-duration: 0.2s;
     display: block !important;
-    width: 80% !important;
-    right: auto !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 82, ../sass/mobile/_layout.scss */
-  .browse-showtree .pane-special.left {
-    -moz-transition-duration: 0.2s;
-    -o-transition-duration: 0.2s;
-    -webkit-transition-duration: 0.2s;
-    transition-duration: 0.2s;
-    display: block !important;
-    width: 30% !important;
-    right: auto !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 82, ../sass/mobile/_layout.scss */
-  .browse-showtree .pane-special.left {
-    -moz-transition-duration: 0.2s;
-    -o-transition-duration: 0.2s;
-    -webkit-transition-duration: 0.2s;
-    transition-duration: 0.2s;
-    display: block !important;
-    width: 30% !important;
-    right: auto !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 82, ../sass/mobile/_layout.scss */
-  .browse-showtree .pane-special.left {
-    -moz-transition-duration: 0.2s;
-    -o-transition-duration: 0.2s;
-    -webkit-transition-duration: 0.2s;
-    transition-duration: 0.2s;
-    display: block !important;
-    width: 25% !important;
     right: 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 109, ../sass/mobile/_layout.scss */
-  .browse-showtree .pane-special.right {
-    -moz-transition-duration: 0.2s;
-    -o-transition-duration: 0.2s;
-    -webkit-transition-duration: 0.2s;
-    transition-duration: 0.2s;
-    left: 80% !important;
-    width: auto !important; } }
+  /* line 74, ../sass/mobile/_layout.scss */
+  .browse-showtree .pane-special.left {
+    width: 80% !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 109, ../sass/mobile/_layout.scss */
-  .browse-showtree .pane-special.right {
-    -moz-transition-duration: 0.2s;
-    -o-transition-duration: 0.2s;
-    -webkit-transition-duration: 0.2s;
-    transition-duration: 0.2s;
-    left: 30% !important;
-    width: auto !important; } }
+  /* line 74, ../sass/mobile/_layout.scss */
+  .browse-showtree .pane-special.left {
+    width: 30% !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 109, ../sass/mobile/_layout.scss */
-  .browse-showtree .pane-special.right {
-    -moz-transition-duration: 0.2s;
-    -o-transition-duration: 0.2s;
-    -webkit-transition-duration: 0.2s;
-    transition-duration: 0.2s;
-    left: 30% !important;
-    width: auto !important; } }
+  /* line 74, ../sass/mobile/_layout.scss */
+  .browse-showtree .pane-special.left {
+    width: 40% !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 109, ../sass/mobile/_layout.scss */
+  /* line 74, ../sass/mobile/_layout.scss */
+  .browse-showtree .pane-special.left {
+    width: 25% !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 94, ../sass/mobile/_layout.scss */
   .browse-showtree .pane-special.right {
     -moz-transition-duration: 0.2s;
     -o-transition-duration: 0.2s;
     -webkit-transition-duration: 0.2s;
     transition-duration: 0.2s;
-    left: 25% !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 94, ../sass/mobile/_layout.scss */
+  .browse-showtree .pane-special.right {
+    left: 80% !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 94, ../sass/mobile/_layout.scss */
+  .browse-showtree .pane-special.right {
+    left: 30% !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 94, ../sass/mobile/_layout.scss */
+  .browse-showtree .pane-special.right {
+    left: 40% !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 94, ../sass/mobile/_layout.scss */
+  .browse-showtree .pane-special.right {
+    left: 25% !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 133, ../sass/mobile/_layout.scss */
+  /* line 114, ../sass/mobile/_layout.scss */
   .mobile-splitter {
     display: none; } }
 
-/* line 141, ../sass/mobile/_layout.scss */
+/* line 122, ../sass/mobile/_layout.scss */
 .button-pos {
   position: absolute;
   -moz-transition-duration: 0.2s;
@@ -881,34 +839,34 @@ mct-container {
   transition-duration: 0.2s; }
 
 @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 146, ../sass/mobile/_layout.scss */
+  /* line 127, ../sass/mobile/_layout.scss */
   .object-header-mobile {
     position: relative;
     left: 30px; } }
 
-/* line 153, ../sass/mobile/_layout.scss */
+/* line 134, ../sass/mobile/_layout.scss */
 .mobile-menu-icon {
   top: 5px; }
   @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 153, ../sass/mobile/_layout.scss */
+    /* line 134, ../sass/mobile/_layout.scss */
     .mobile-menu-icon {
       font-size: 125%; } }
   @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 153, ../sass/mobile/_layout.scss */
+    /* line 134, ../sass/mobile/_layout.scss */
     .mobile-menu-icon {
       font-size: 175%; } }
   @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-    /* line 153, ../sass/mobile/_layout.scss */
+    /* line 134, ../sass/mobile/_layout.scss */
     .mobile-menu-icon {
       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), 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 167, ../sass/mobile/_layout.scss */
+  /* line 148, ../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 173, ../sass/mobile/_layout.scss */
+  /* line 154, ../sass/mobile/_layout.scss */
   .phone-hide {
     display: none; } }
 
diff --git a/platform/commonUI/general/res/sass/mobile/_layout.scss b/platform/commonUI/general/res/sass/mobile/_layout.scss
index d5364ae6b2..fcd7b667b5 100644
--- a/platform/commonUI/general/res/sass/mobile/_layout.scss
+++ b/platform/commonUI/general/res/sass/mobile/_layout.scss
@@ -24,21 +24,13 @@
 
 .browse-wrapper,
 .pane-special {
-    @include phone {
+    @include phoneandtablet {
         position: absolute;
         left: 0; top: 0;
         right: 0; left: 0;
         white-space: nowrap;
         height: 100%;
     }
-    @include tablet {
-        @include transition-duration(.2s);
-        position: absolute;
-        left: 0; top: 0;
-        right: 0; left: 0;
-        white-space: nowrap;
-        height: 100%;        
-    }
 }
 
 $phoneMenuSizePortrait: 80%;
@@ -79,53 +71,42 @@ $desktopMenuSize: 25%;
 }
 
 .browse-showtree {
-    .pane-special.left {      
-        @include phonePortrait {
+    .pane-special.left {
+        @include phoneandtablet {
             @include transition-duration(.2s);
             display: block !important;
-            width: $phoneMenuSizePortrait !important;
             right: auto !important;
         }
+        @include phonePortrait {
+            width: $phoneMenuSizePortrait !important;
+        }
         @include phoneLandscape {
-            @include transition-duration(.2s);
-            display: block !important;
             width: $phoneMenuSizeLandscape !important;
-            right: auto !important;
         }
         @include tabletPortrait {
-            @include transition-duration(.2s);
-            display: block !important;
             width: $tabletMenuSizePortrait !important;
-            right: auto !important;
         }
         @include tabletLandscape {
-            @include transition-duration(.2s);
-            display: block !important;
             width: $tabletMenuSizeLandscape !important;
-            right: auto !important;
         }
     }
     
     .pane-special.right {
-        @include phonePortrait {
+        @include phoneandtablet {
             @include transition-duration(.2s);
+            width: auto !important;   
+        }
+        @include phonePortrait {
             left: $phoneMenuSizePortrait !important;
-            width: auto !important;
         }
         @include phoneLandscape {
-            @include transition-duration(.2s);
             left: $phoneMenuSizeLandscape !important;
-            width: auto !important;
         }
         @include tabletPortrait {
-            @include transition-duration(.2s);
             left: $tabletMenuSizePortrait !important;
-            width: auto !important;
         }
         @include tabletLandscape {
-            @include transition-duration(.2s);
             left: $tabletMenuSizeLandscape !important;
-            width: auto !important;
         }
     }
 }

From 6e6fbe0d65e7b563feb6f39bc440721cb49f9517 Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Thu, 16 Jul 2015 12:54:10 -0700
Subject: [PATCH 064/209] [Mobile] Transitions

Made transitions properly work for
create button.
---
 .../commonUI/browse/res/templates/browse.html |  6 +++--
 .../general/res/css/theme-espresso.css        | 27 +++++++++++--------
 .../general/res/sass/mobile/_constants.scss   |  7 +++--
 .../general/res/sass/mobile/_layout.scss      | 14 +++++-----
 4 files changed, 32 insertions(+), 22 deletions(-)

diff --git a/platform/commonUI/browse/res/templates/browse.html b/platform/commonUI/browse/res/templates/browse.html
index 5428086f20..12755dd3f1 100644
--- a/platform/commonUI/browse/res/templates/browse.html
+++ b/platform/commonUI/browse/res/templates/browse.html
@@ -31,8 +31,10 @@
             
                 <!-- TREE MENU: ADDED THE PANE LEFT HERE, similar to .pane.left example-->
                 <div class='split-pane-component treeview pane pane-special left desktop-browse'>  
-                    <mct-representation key="'create-button'" mct-object="navigatedObject" class="createBtnPos">
-                    </mct-representation>
+                     <div class='createBtnPos'>
+                        <mct-representation key="'create-button'" mct-object="navigatedObject">
+                        </mct-representation>
+                    </div>
                     <div class='holder tree-holder abs'>
                         <mct-representation key="'tree'"
                                             mct-object="domainObject"
diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index c28a7e46a8..6fb970f646 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -747,14 +747,14 @@ mct-container {
     height: 100%; } }
 
 @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-  /* line 43, ../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 46, ../sass/mobile/_layout.scss */
   .browse-hidetree .pane-special.left {
     -moz-transition-duration: 0.2s;
     -o-transition-duration: 0.2s;
@@ -762,11 +762,12 @@ mct-container {
     transition-duration: 0.2s;
     width: 0px !important;
     right: auto !important; }
-    /* line 58, ../sass/mobile/_layout.scss */
+    /* line 52, ../sass/mobile/_layout.scss */
     .browse-hidetree .pane-special.left .createBtnPos {
-      display: none; } }
+      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 64, ../sass/mobile/_layout.scss */
+  /* line 59, ../sass/mobile/_layout.scss */
   .browse-hidetree .pane-special.right {
     -moz-transition-duration: 0.2s;
     -o-transition-duration: 0.2s;
@@ -776,28 +777,32 @@ mct-container {
     left: 0px !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 74, ../sass/mobile/_layout.scss */
+  /* line 69, ../sass/mobile/_layout.scss */
   .browse-showtree .pane-special.left {
     -moz-transition-duration: 0.2s;
     -o-transition-duration: 0.2s;
     -webkit-transition-duration: 0.2s;
     transition-duration: 0.2s;
     display: block !important;
-    right: auto !important; } }
+    right: auto !important; }
+    /* line 75, ../sass/mobile/_layout.scss */
+    .browse-showtree .pane-special.left .createBtnPos {
+      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) {
-  /* line 74, ../sass/mobile/_layout.scss */
+  /* line 69, ../sass/mobile/_layout.scss */
   .browse-showtree .pane-special.left {
     width: 80% !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 74, ../sass/mobile/_layout.scss */
+  /* line 69, ../sass/mobile/_layout.scss */
   .browse-showtree .pane-special.left {
     width: 30% !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 74, ../sass/mobile/_layout.scss */
+  /* line 69, ../sass/mobile/_layout.scss */
   .browse-showtree .pane-special.left {
     width: 40% !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 74, ../sass/mobile/_layout.scss */
+  /* line 69, ../sass/mobile/_layout.scss */
   .browse-showtree .pane-special.left {
     width: 25% !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) {
diff --git a/platform/commonUI/general/res/sass/mobile/_constants.scss b/platform/commonUI/general/res/sass/mobile/_constants.scss
index 564e8169f5..1c10f59395 100644
--- a/platform/commonUI/general/res/sass/mobile/_constants.scss
+++ b/platform/commonUI/general/res/sass/mobile/_constants.scss
@@ -67,5 +67,8 @@ $desktopPortrait: "screen and #{$desktopPortraitCheck}";
 $desktopLandscape: "screen and #{$desktopLanscapeCheck}";
 
 /************************** DEVICE PARAMETERS FOR MENUS */
-$phoneSlideMenuWidth: $phoMaxW/2;
-$tabletSlideMenuWidth: $tabMaxW/2;
+$phoneMenuSizePortrait: 80%;
+$phoneMenuSizeLandscape: 30%;
+$tabletMenuSizePortrait: 40%;
+$tabletMenuSizeLandscape: 25%;
+$desktopMenuSize: 25%;
\ No newline at end of file
diff --git a/platform/commonUI/general/res/sass/mobile/_layout.scss b/platform/commonUI/general/res/sass/mobile/_layout.scss
index fcd7b667b5..a59713c236 100644
--- a/platform/commonUI/general/res/sass/mobile/_layout.scss
+++ b/platform/commonUI/general/res/sass/mobile/_layout.scss
@@ -33,12 +33,6 @@
     }
 }
 
-$phoneMenuSizePortrait: 80%;
-$phoneMenuSizeLandscape: 30%;
-$tabletMenuSizePortrait: 40%;
-$tabletMenuSizeLandscape: 25%;
-$desktopMenuSize: 25%;
-
 
 .desktop-browse {
     @include desktop {
@@ -56,7 +50,8 @@ $desktopMenuSize: 25%;
             right: auto !important;
             
             .createBtnPos {
-                display: none;
+                overflow-y: hidden;
+                overflow-x: hidden;
             }            
         }
     }
@@ -76,6 +71,11 @@ $desktopMenuSize: 25%;
             @include transition-duration(.2s);
             display: block !important;
             right: auto !important;
+            
+            .createBtnPos {
+                overflow-y: hidden;
+                overflow-x: hidden;
+            }                
         }
         @include phonePortrait {
             width: $phoneMenuSizePortrait !important;

From 15a88967d02b97d31df7bc3e80a44d6426ced81b Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Thu, 16 Jul 2015 13:22:07 -0700
Subject: [PATCH 065/209] [Mobile] Transition/Create Fix

Fix the create button to work and
also transition well. Added transition mixin
to stay DRY.
---
 .../commonUI/browse/res/templates/browse.html |  8 +-
 .../general/res/css/theme-espresso.css        | 96 ++++++++++---------
 .../general/res/sass/mobile/_constants.scss   |  2 +-
 .../general/res/sass/mobile/_layout.scss      | 17 ++--
 .../general/res/sass/mobile/_mixins.scss      |  5 +
 5 files changed, 71 insertions(+), 57 deletions(-)

diff --git a/platform/commonUI/browse/res/templates/browse.html b/platform/commonUI/browse/res/templates/browse.html
index 12755dd3f1..b8ab9845cb 100644
--- a/platform/commonUI/browse/res/templates/browse.html
+++ b/platform/commonUI/browse/res/templates/browse.html
@@ -31,16 +31,16 @@
             
                 <!-- TREE MENU: ADDED THE PANE LEFT HERE, similar to .pane.left example-->
                 <div class='split-pane-component treeview pane pane-special left desktop-browse'>  
-                     <div class='createBtnPos'>
-                        <mct-representation key="'create-button'" mct-object="navigatedObject">
-                        </mct-representation>
-                    </div>
                     <div class='holder tree-holder abs'>
                         <mct-representation key="'tree'"
                                             mct-object="domainObject"
                                             ng-model="treeModel">
                         </mct-representation>
                     </div>
+                     <div class='createBtnPos'>
+                        <mct-representation key="'create-button'" mct-object="navigatedObject">
+                        </mct-representation>
+                    </div>                    
                 </div>
                 
                 <mct-splitter class="mobile-splitter"></mct-splitter>
diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index 6fb970f646..33838faa7f 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -754,124 +754,130 @@ mct-container {
     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 46, ../sass/mobile/_layout.scss */
+  /* line 48, ../sass/mobile/_layout.scss */
   .browse-hidetree .pane-special.left {
-    -moz-transition-duration: 0.2s;
-    -o-transition-duration: 0.2s;
-    -webkit-transition-duration: 0.2s;
-    transition-duration: 0.2s;
+    -moz-transition-duration: 0.5s;
+    -o-transition-duration: 0.5s;
+    -webkit-transition-duration: 0.5s;
+    transition-duration: 0.5s;
+    transition-timing-function: ease;
     width: 0px !important;
     right: auto !important; }
-    /* line 52, ../sass/mobile/_layout.scss */
+    /* line 54, ../sass/mobile/_layout.scss */
     .browse-hidetree .pane-special.left .createBtnPos {
       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 59, ../sass/mobile/_layout.scss */
+  /* line 61, ../sass/mobile/_layout.scss */
   .browse-hidetree .pane-special.right {
-    -moz-transition-duration: 0.2s;
-    -o-transition-duration: 0.2s;
-    -webkit-transition-duration: 0.2s;
-    transition-duration: 0.2s;
+    -moz-transition-duration: 0.5s;
+    -o-transition-duration: 0.5s;
+    -webkit-transition-duration: 0.5s;
+    transition-duration: 0.5s;
+    transition-timing-function: ease;
     width: auto !important;
     left: 0px !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 69, ../sass/mobile/_layout.scss */
+  /* line 71, ../sass/mobile/_layout.scss */
   .browse-showtree .pane-special.left {
-    -moz-transition-duration: 0.2s;
-    -o-transition-duration: 0.2s;
-    -webkit-transition-duration: 0.2s;
-    transition-duration: 0.2s;
+    -moz-transition-duration: 0.5s;
+    -o-transition-duration: 0.5s;
+    -webkit-transition-duration: 0.5s;
+    transition-duration: 0.5s;
+    transition-timing-function: ease;
     display: block !important;
     right: auto !important; }
-    /* line 75, ../sass/mobile/_layout.scss */
+    /* line 77, ../sass/mobile/_layout.scss */
     .browse-showtree .pane-special.left .createBtnPos {
+      height: inherit;
       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) {
-  /* line 69, ../sass/mobile/_layout.scss */
+  /* line 71, ../sass/mobile/_layout.scss */
   .browse-showtree .pane-special.left {
     width: 80% !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 69, ../sass/mobile/_layout.scss */
+  /* line 71, ../sass/mobile/_layout.scss */
   .browse-showtree .pane-special.left {
     width: 30% !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 69, ../sass/mobile/_layout.scss */
+  /* line 71, ../sass/mobile/_layout.scss */
   .browse-showtree .pane-special.left {
-    width: 40% !important; } }
+    width: 35% !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 69, ../sass/mobile/_layout.scss */
+  /* line 71, ../sass/mobile/_layout.scss */
   .browse-showtree .pane-special.left {
     width: 25% !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 94, ../sass/mobile/_layout.scss */
+  /* line 97, ../sass/mobile/_layout.scss */
   .browse-showtree .pane-special.right {
-    -moz-transition-duration: 0.2s;
-    -o-transition-duration: 0.2s;
-    -webkit-transition-duration: 0.2s;
-    transition-duration: 0.2s;
+    -moz-transition-duration: 0.5s;
+    -o-transition-duration: 0.5s;
+    -webkit-transition-duration: 0.5s;
+    transition-duration: 0.5s;
+    transition-timing-function: ease;
     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 94, ../sass/mobile/_layout.scss */
+  /* line 97, ../sass/mobile/_layout.scss */
   .browse-showtree .pane-special.right {
     left: 80% !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 94, ../sass/mobile/_layout.scss */
+  /* line 97, ../sass/mobile/_layout.scss */
   .browse-showtree .pane-special.right {
     left: 30% !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 94, ../sass/mobile/_layout.scss */
+  /* line 97, ../sass/mobile/_layout.scss */
   .browse-showtree .pane-special.right {
-    left: 40% !important; } }
+    left: 35% !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 94, ../sass/mobile/_layout.scss */
+  /* line 97, ../sass/mobile/_layout.scss */
   .browse-showtree .pane-special.right {
     left: 25% !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 114, ../sass/mobile/_layout.scss */
+  /* line 117, ../sass/mobile/_layout.scss */
   .mobile-splitter {
     display: none; } }
 
-/* line 122, ../sass/mobile/_layout.scss */
+/* line 125, ../sass/mobile/_layout.scss */
 .button-pos {
   position: absolute;
-  -moz-transition-duration: 0.2s;
-  -o-transition-duration: 0.2s;
-  -webkit-transition-duration: 0.2s;
-  transition-duration: 0.2s; }
+  -moz-transition-duration: 0.5s;
+  -o-transition-duration: 0.5s;
+  -webkit-transition-duration: 0.5s;
+  transition-duration: 0.5s;
+  transition-timing-function: ease; }
 
 @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 127, ../sass/mobile/_layout.scss */
+  /* line 130, ../sass/mobile/_layout.scss */
   .object-header-mobile {
     position: relative;
     left: 30px; } }
 
-/* line 134, ../sass/mobile/_layout.scss */
+/* line 137, ../sass/mobile/_layout.scss */
 .mobile-menu-icon {
   top: 5px; }
   @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 134, ../sass/mobile/_layout.scss */
+    /* line 137, ../sass/mobile/_layout.scss */
     .mobile-menu-icon {
       font-size: 125%; } }
   @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 134, ../sass/mobile/_layout.scss */
+    /* line 137, ../sass/mobile/_layout.scss */
     .mobile-menu-icon {
       font-size: 175%; } }
   @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-    /* line 134, ../sass/mobile/_layout.scss */
+    /* line 137, ../sass/mobile/_layout.scss */
     .mobile-menu-icon {
       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), 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 148, ../sass/mobile/_layout.scss */
+  /* line 151, ../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 154, ../sass/mobile/_layout.scss */
+  /* line 157, ../sass/mobile/_layout.scss */
   .phone-hide {
     display: none; } }
 
diff --git a/platform/commonUI/general/res/sass/mobile/_constants.scss b/platform/commonUI/general/res/sass/mobile/_constants.scss
index 1c10f59395..2886b8a7e6 100644
--- a/platform/commonUI/general/res/sass/mobile/_constants.scss
+++ b/platform/commonUI/general/res/sass/mobile/_constants.scss
@@ -69,6 +69,6 @@ $desktopLandscape: "screen and #{$desktopLanscapeCheck}";
 /************************** DEVICE PARAMETERS FOR MENUS */
 $phoneMenuSizePortrait: 80%;
 $phoneMenuSizeLandscape: 30%;
-$tabletMenuSizePortrait: 40%;
+$tabletMenuSizePortrait: 35%;
 $tabletMenuSizeLandscape: 25%;
 $desktopMenuSize: 25%;
\ No newline at end of file
diff --git a/platform/commonUI/general/res/sass/mobile/_layout.scss b/platform/commonUI/general/res/sass/mobile/_layout.scss
index a59713c236..0cb3ac5307 100644
--- a/platform/commonUI/general/res/sass/mobile/_layout.scss
+++ b/platform/commonUI/general/res/sass/mobile/_layout.scss
@@ -42,10 +42,12 @@
     }   
 }
 
+
+
 .browse-hidetree {
     .pane-special.left {
         @include phoneandtablet {
-            @include transition-duration(.2s);
+            @include slMenuTransitions;
             width: 0px !important;
             right: auto !important;
             
@@ -58,7 +60,7 @@
 
     .pane-special.right {       
         @include phoneandtablet {
-            @include transition-duration(.2s);
+            @include slMenuTransitions;
             width: auto !important;
             left: 0px !important;
         }
@@ -68,14 +70,15 @@
 .browse-showtree {
     .pane-special.left {
         @include phoneandtablet {
-            @include transition-duration(.2s);
+            @include slMenuTransitions;
             display: block !important;
             right: auto !important;
             
             .createBtnPos {
+                height: inherit;
                 overflow-y: hidden;
                 overflow-x: hidden;
-            }                
+            }         
         }
         @include phonePortrait {
             width: $phoneMenuSizePortrait !important;
@@ -93,8 +96,8 @@
     
     .pane-special.right {
         @include phoneandtablet {
-            @include transition-duration(.2s);
-            width: auto !important;   
+            @include slMenuTransitions;
+            width: auto !important;
         }
         @include phonePortrait {
             left: $phoneMenuSizePortrait !important;
@@ -121,7 +124,7 @@
 
 .button-pos {
     position: absolute;
-    @include transition-duration(.2s);
+    @include slMenuTransitions;
 }
 
 .object-header-mobile {
diff --git a/platform/commonUI/general/res/sass/mobile/_mixins.scss b/platform/commonUI/general/res/sass/mobile/_mixins.scss
index 85d4a78b7a..764fdfd098 100644
--- a/platform/commonUI/general/res/sass/mobile/_mixins.scss
+++ b/platform/commonUI/general/res/sass/mobile/_mixins.scss
@@ -80,3 +80,8 @@
         @content
     }
 }
+
+@mixin slMenuTransitions {
+    @include transition-duration(.5s);
+    transition-timing-function: ease;
+}

From d99b4d75d807051ff5fc4ad250d1c29d413acb96 Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Thu, 16 Jul 2015 14:07:25 -0700
Subject: [PATCH 066/209] [Mobile] Fix

Fixed the desktop version breaking.
CUrrent issue is hte menu is getting cut off.
---
 .../commonUI/browse/res/templates/browse.html | 15 +++----
 .../general/res/css/theme-espresso.css        | 43 ++++++++++---------
 .../general/res/sass/mobile/_layout.scss      |  9 ++--
 3 files changed, 34 insertions(+), 33 deletions(-)

diff --git a/platform/commonUI/browse/res/templates/browse.html b/platform/commonUI/browse/res/templates/browse.html
index b8ab9845cb..9666fcaafd 100644
--- a/platform/commonUI/browse/res/templates/browse.html
+++ b/platform/commonUI/browse/res/templates/browse.html
@@ -44,16 +44,15 @@
                 </div>
                 
                 <mct-splitter class="mobile-splitter"></mct-splitter>
-                
                     <!-- ITEMS MENU: ADDED THE PANE RIGHT HERE, similar to .pane.right example-->
-                    <div class='split-pane-component items pane pane-special right'>
-                    <div class='holder abs' id='content-area'>
-                        <mct-representation mct-object="navigatedObject" key="'browse-object'">
-                        </mct-representation>
-                    </div>
-                    <div class="s-very-subtle key-properties ui-symbol mobile-menu-icon button-pos" 
+                        <div class='split-pane-component items pane pane-special right'>
+                            <div class='holder abs' id='content-area'>
+                                <mct-representation mct-object="navigatedObject" key="'browse-object'">
+                                </mct-representation>
+                            </div>
+                        <div class="s-very-subtle key-properties ui-symbol mobile-menu-icon button-pos" 
                             ng-click="treeSlide()">m</div>                        
-                </div>                     
+                        </div>   
             </mct-split-pane>
         </div>
         <mct-include key="'bottombar'"></mct-include>
diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index 33838faa7f..fc95bd48cb 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -810,7 +810,7 @@ mct-container {
   .browse-showtree .pane-special.left {
     width: 25% !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 97, ../sass/mobile/_layout.scss */
+  /* line 96, ../sass/mobile/_layout.scss */
   .browse-showtree .pane-special.right {
     -moz-transition-duration: 0.5s;
     -o-transition-duration: 0.5s;
@@ -819,65 +819,66 @@ mct-container {
     transition-timing-function: ease;
     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 97, ../sass/mobile/_layout.scss */
+  /* line 96, ../sass/mobile/_layout.scss */
   .browse-showtree .pane-special.right {
     left: 80% !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 97, ../sass/mobile/_layout.scss */
+  /* line 96, ../sass/mobile/_layout.scss */
   .browse-showtree .pane-special.right {
     left: 30% !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 97, ../sass/mobile/_layout.scss */
+  /* line 96, ../sass/mobile/_layout.scss */
   .browse-showtree .pane-special.right {
     left: 35% !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 97, ../sass/mobile/_layout.scss */
+  /* line 96, ../sass/mobile/_layout.scss */
   .browse-showtree .pane-special.right {
     left: 25% !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 117, ../sass/mobile/_layout.scss */
+  /* line 116, ../sass/mobile/_layout.scss */
   .mobile-splitter {
     display: none; } }
 
-/* line 125, ../sass/mobile/_layout.scss */
-.button-pos {
-  position: absolute;
-  -moz-transition-duration: 0.5s;
-  -o-transition-duration: 0.5s;
-  -webkit-transition-duration: 0.5s;
-  transition-duration: 0.5s;
-  transition-timing-function: ease; }
+@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 124, ../sass/mobile/_layout.scss */
+  .button-pos {
+    position: absolute;
+    -moz-transition-duration: 0.5s;
+    -o-transition-duration: 0.5s;
+    -webkit-transition-duration: 0.5s;
+    transition-duration: 0.5s;
+    transition-timing-function: ease; } }
 
 @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 130, ../sass/mobile/_layout.scss */
+  /* line 131, ../sass/mobile/_layout.scss */
   .object-header-mobile {
     position: relative;
     left: 30px; } }
 
-/* line 137, ../sass/mobile/_layout.scss */
+/* line 138, ../sass/mobile/_layout.scss */
 .mobile-menu-icon {
   top: 5px; }
   @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 137, ../sass/mobile/_layout.scss */
+    /* line 138, ../sass/mobile/_layout.scss */
     .mobile-menu-icon {
       font-size: 125%; } }
   @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 137, ../sass/mobile/_layout.scss */
+    /* line 138, ../sass/mobile/_layout.scss */
     .mobile-menu-icon {
       font-size: 175%; } }
   @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-    /* line 137, ../sass/mobile/_layout.scss */
+    /* line 138, ../sass/mobile/_layout.scss */
     .mobile-menu-icon {
       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), 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 151, ../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 157, ../sass/mobile/_layout.scss */
+  /* line 158, ../sass/mobile/_layout.scss */
   .phone-hide {
     display: none; } }
 
diff --git a/platform/commonUI/general/res/sass/mobile/_layout.scss b/platform/commonUI/general/res/sass/mobile/_layout.scss
index 0cb3ac5307..6bdbb40950 100644
--- a/platform/commonUI/general/res/sass/mobile/_layout.scss
+++ b/platform/commonUI/general/res/sass/mobile/_layout.scss
@@ -59,7 +59,7 @@
     }
 
     .pane-special.right {       
-        @include phoneandtablet {
+        @include phoneandtablet {         
             @include slMenuTransitions;
             width: auto !important;
             left: 0px !important;
@@ -93,7 +93,6 @@
             width: $tabletMenuSizeLandscape !important;
         }
     }
-    
     .pane-special.right {
         @include phoneandtablet {
             @include slMenuTransitions;
@@ -123,8 +122,10 @@
 
 
 .button-pos {
-    position: absolute;
-    @include slMenuTransitions;
+    @include phoneandtablet {
+        position: absolute;
+        @include slMenuTransitions;
+    }
 }
 
 .object-header-mobile {

From 85c7a36e25cf69483d800b8577d8af219731a907 Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Thu, 16 Jul 2015 15:21:17 -0700
Subject: [PATCH 067/209] [Mobile] Cleaned up

Set the width of the create menu
text/components to fit the menu
however it gets cuttoff sometimes.
Next steps are to Clean up screen,
change the create menu to fit the left side,
and fix bottom space.
---
 .../commonUI/browse/res/templates/browse.html |  2 +-
 .../res/templates/create/create-menu.html     |  2 +-
 .../general/res/css/theme-espresso.css        | 40 +++++++++----------
 .../general/res/sass/mobile/_layout.scss      |  2 +-
 .../general/res/sass/mobile/_mixins.scss      |  2 +-
 5 files changed, 24 insertions(+), 24 deletions(-)

diff --git a/platform/commonUI/browse/res/templates/browse.html b/platform/commonUI/browse/res/templates/browse.html
index 9666fcaafd..d476921eaf 100644
--- a/platform/commonUI/browse/res/templates/browse.html
+++ b/platform/commonUI/browse/res/templates/browse.html
@@ -40,7 +40,7 @@
                      <div class='createBtnPos'>
                         <mct-representation key="'create-button'" mct-object="navigatedObject">
                         </mct-representation>
-                    </div>                    
+                    </div>                
                 </div>
                 
                 <mct-splitter class="mobile-splitter"></mct-splitter>
diff --git a/platform/commonUI/browse/res/templates/create/create-menu.html b/platform/commonUI/browse/res/templates/create/create-menu.html
index 3386d2d266..1af6c5cd31 100644
--- a/platform/commonUI/browse/res/templates/create/create-menu.html
+++ b/platform/commonUI/browse/res/templates/create/create-menu.html
@@ -20,7 +20,7 @@
  at runtime from the About dialog for additional information.
 -->
 <div class="contents" ng-controller="CreateMenuController">
-    <div class="pane left menu-items">
+    <div class="pane left menu-items pane-special left">
         <ul>
 
             <li ng-repeat="createAction in createActions">
diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index fc95bd48cb..ebf5cef519 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -756,10 +756,10 @@ mct-container {
 @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 48, ../sass/mobile/_layout.scss */
   .browse-hidetree .pane-special.left {
-    -moz-transition-duration: 0.5s;
-    -o-transition-duration: 0.5s;
-    -webkit-transition-duration: 0.5s;
-    transition-duration: 0.5s;
+    -moz-transition-duration: 0.2s;
+    -o-transition-duration: 0.2s;
+    -webkit-transition-duration: 0.2s;
+    transition-duration: 0.2s;
     transition-timing-function: ease;
     width: 0px !important;
     right: auto !important; }
@@ -770,10 +770,10 @@ mct-container {
 @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 61, ../sass/mobile/_layout.scss */
   .browse-hidetree .pane-special.right {
-    -moz-transition-duration: 0.5s;
-    -o-transition-duration: 0.5s;
-    -webkit-transition-duration: 0.5s;
-    transition-duration: 0.5s;
+    -moz-transition-duration: 0.2s;
+    -o-transition-duration: 0.2s;
+    -webkit-transition-duration: 0.2s;
+    transition-duration: 0.2s;
     transition-timing-function: ease;
     width: auto !important;
     left: 0px !important; } }
@@ -781,10 +781,10 @@ mct-container {
 @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 71, ../sass/mobile/_layout.scss */
   .browse-showtree .pane-special.left {
-    -moz-transition-duration: 0.5s;
-    -o-transition-duration: 0.5s;
-    -webkit-transition-duration: 0.5s;
-    transition-duration: 0.5s;
+    -moz-transition-duration: 0.2s;
+    -o-transition-duration: 0.2s;
+    -webkit-transition-duration: 0.2s;
+    transition-duration: 0.2s;
     transition-timing-function: ease;
     display: block !important;
     right: auto !important; }
@@ -812,10 +812,10 @@ mct-container {
 @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 96, ../sass/mobile/_layout.scss */
   .browse-showtree .pane-special.right {
-    -moz-transition-duration: 0.5s;
-    -o-transition-duration: 0.5s;
-    -webkit-transition-duration: 0.5s;
-    transition-duration: 0.5s;
+    -moz-transition-duration: 0.2s;
+    -o-transition-duration: 0.2s;
+    -webkit-transition-duration: 0.2s;
+    transition-duration: 0.2s;
     transition-timing-function: ease;
     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) {
@@ -844,10 +844,10 @@ mct-container {
   /* line 124, ../sass/mobile/_layout.scss */
   .button-pos {
     position: absolute;
-    -moz-transition-duration: 0.5s;
-    -o-transition-duration: 0.5s;
-    -webkit-transition-duration: 0.5s;
-    transition-duration: 0.5s;
+    -moz-transition-duration: 0.2s;
+    -o-transition-duration: 0.2s;
+    -webkit-transition-duration: 0.2s;
+    transition-duration: 0.2s;
     transition-timing-function: ease; } }
 
 @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) {
diff --git a/platform/commonUI/general/res/sass/mobile/_layout.scss b/platform/commonUI/general/res/sass/mobile/_layout.scss
index 6bdbb40950..93f35661ba 100644
--- a/platform/commonUI/general/res/sass/mobile/_layout.scss
+++ b/platform/commonUI/general/res/sass/mobile/_layout.scss
@@ -78,7 +78,7 @@
                 height: inherit;
                 overflow-y: hidden;
                 overflow-x: hidden;
-            }         
+            }
         }
         @include phonePortrait {
             width: $phoneMenuSizePortrait !important;
diff --git a/platform/commonUI/general/res/sass/mobile/_mixins.scss b/platform/commonUI/general/res/sass/mobile/_mixins.scss
index 764fdfd098..b6c1cf93e9 100644
--- a/platform/commonUI/general/res/sass/mobile/_mixins.scss
+++ b/platform/commonUI/general/res/sass/mobile/_mixins.scss
@@ -82,6 +82,6 @@
 }
 
 @mixin slMenuTransitions {
-    @include transition-duration(.5s);
+    @include transition-duration(.2s);
     transition-timing-function: ease;
 }

From 488829a20c7d4924dccfcd6cceee51cbf93c30c0 Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Thu, 16 Jul 2015 16:13:58 -0700
Subject: [PATCH 068/209] [Mobile] Header

Removed type from header
along with the right side buttons.
---
 platform/commonUI/browse/res/templates/browse.html     |  2 +-
 .../browse/res/templates/browse/object-header.html     |  2 +-
 platform/commonUI/general/res/css/theme-espresso.css   | 10 ++++++++--
 platform/commonUI/general/res/sass/mobile/_layout.scss |  9 ++++++++-
 4 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/platform/commonUI/browse/res/templates/browse.html b/platform/commonUI/browse/res/templates/browse.html
index d476921eaf..c86b44e496 100644
--- a/platform/commonUI/browse/res/templates/browse.html
+++ b/platform/commonUI/browse/res/templates/browse.html
@@ -50,7 +50,7 @@
                                 <mct-representation mct-object="navigatedObject" key="'browse-object'">
                                 </mct-representation>
                             </div>
-                        <div class="s-very-subtle key-properties ui-symbol mobile-menu-icon button-pos" 
+                        <div class="left s-very-subtle key-properties ui-symbol mobile-menu-icon button-pos" 
                             ng-click="treeSlide()">m</div>                        
                         </div>   
             </mct-split-pane>
diff --git a/platform/commonUI/browse/res/templates/browse/object-header.html b/platform/commonUI/browse/res/templates/browse/object-header.html
index 583940aaab..f4b17bf79e 100644
--- a/platform/commonUI/browse/res/templates/browse/object-header.html
+++ b/platform/commonUI/browse/res/templates/browse/object-header.html
@@ -23,7 +23,7 @@
 	<span class="label s-label">
 	    <span class='type-icon icon ui-symbol'>{{type.getGlyph()}}</span>
 	    <span ng-if="parameters.mode" class='action'>{{parameters.mode}}</span>
-	    <span class='type-name'>{{type.getName()}}</span>
+	    <span class='type-name mobile-text-hide'>{{type.getName()}}</span>
 	    <span class='title-label'>{{model.name}}</span>
 		<!--a id='actions-menu' class='ui-symbol context-available' onclick="alert('Not yet functional. This will display a dropdown menu of options for this object.');">v</a-->
 	</span>
diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index ebf5cef519..70c65c582f 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -858,7 +858,7 @@ mct-container {
 
 /* line 138, ../sass/mobile/_layout.scss */
 .mobile-menu-icon {
-  top: 5px; }
+  display: inline-block; }
   @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 138, ../sass/mobile/_layout.scss */
     .mobile-menu-icon {
@@ -877,8 +877,14 @@ mct-container {
   .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) {
+@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 158, ../sass/mobile/_layout.scss */
+  .mobile-text-hide {
+    width: 0px;
+    overflow: 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 165, ../sass/mobile/_layout.scss */
   .phone-hide {
     display: none; } }
 
diff --git a/platform/commonUI/general/res/sass/mobile/_layout.scss b/platform/commonUI/general/res/sass/mobile/_layout.scss
index 93f35661ba..2d72aba1ff 100644
--- a/platform/commonUI/general/res/sass/mobile/_layout.scss
+++ b/platform/commonUI/general/res/sass/mobile/_layout.scss
@@ -136,7 +136,7 @@
 }
 
 .mobile-menu-icon {
-    top: $interiorMargin;
+    display: inline-block;
     @include phone {
         font-size: 125%;
     }
@@ -155,6 +155,13 @@
     }
 }
 
+.mobile-text-hide {
+    @include phoneandtablet {
+        width: 0px;
+        overflow:hidden;
+    }
+}
+
 .phone-hide {
     @include phone {
         display: none;

From 1e2e20b1459dd213df34e98ad1abff891549e960 Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Fri, 17 Jul 2015 09:04:39 -0700
Subject: [PATCH 069/209] [Mobile] Comments

Added comments to the mixins.
---
 platform/commonUI/general/res/sass/mobile/_mixins.scss | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/platform/commonUI/general/res/sass/mobile/_mixins.scss b/platform/commonUI/general/res/sass/mobile/_mixins.scss
index b6c1cf93e9..a3e06d745b 100644
--- a/platform/commonUI/general/res/sass/mobile/_mixins.scss
+++ b/platform/commonUI/general/res/sass/mobile/_mixins.scss
@@ -20,7 +20,7 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-// NOTE: Mixins for devices
+// Phones in any orientation
 @mixin phone {
     @media #{$phonePortrait},
            #{$phoneLandscape},
@@ -29,12 +29,14 @@
     }
 }
 
+//Phones in portrait orientation
 @mixin phonePortrait {
     @media #{$phonePortrait} {
         @content
     }
 }
 
+// Phones in landscape orientation
 @mixin phoneLandscape {
     @media #{$phoneLandscape},
            #{$phoneLandscapeEmu} {
@@ -42,6 +44,7 @@
     }
 }
 
+// Tablets in any orientation
 @mixin tablet {
     @media #{$tabletPortrait},
            #{$tabletLandscape},
@@ -50,12 +53,14 @@
     }
 }
 
+// Tablets in portrait orientation
 @mixin tabletPortrait {
     @media #{$tabletPortrait} {
         @content
     }
 }
 
+// Tablets in landscape orientation
 @mixin tabletLandscape {
     @media #{$tabletLandscape},
            #{$tabletLandscapeEmu} {
@@ -63,6 +68,7 @@
     }
 }
 
+// Phones and tablets in any orientation
 @mixin phoneandtablet {
     @media #{$phonePortrait},
            #{$phoneLandscape},
@@ -74,6 +80,7 @@
     }
 }
 
+// Desktop monitors in any orientation
 @mixin desktop {
     @media #{$desktopPortrait},
            #{$desktopLandscape} {

From 0d7387080d0c55f54295f09f16c50eef33d853f0 Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Fri, 17 Jul 2015 10:28:19 -0700
Subject: [PATCH 070/209] [Mobile] Create Menu

Create menu text has ellipsis
attribute now, so if text is cut off
it will have a '...' appended to it.
Also added comments to mixins.
---
 .../commonUI/browse/res/templates/browse.html |  2 -
 .../res/templates/create/create-button.html   |  2 +-
 .../res/templates/create/create-menu.html     |  6 +-
 .../general/res/css/theme-espresso.css        | 79 ++++++++++---------
 .../general/res/sass/mobile/_layout.scss      | 39 ++++-----
 5 files changed, 67 insertions(+), 61 deletions(-)

diff --git a/platform/commonUI/browse/res/templates/browse.html b/platform/commonUI/browse/res/templates/browse.html
index c86b44e496..d126d672cb 100644
--- a/platform/commonUI/browse/res/templates/browse.html
+++ b/platform/commonUI/browse/res/templates/browse.html
@@ -37,10 +37,8 @@
                                             ng-model="treeModel">
                         </mct-representation>
                     </div>
-                     <div class='createBtnPos'>
                         <mct-representation key="'create-button'" mct-object="navigatedObject">
                         </mct-representation>
-                    </div>                
                 </div>
                 
                 <mct-splitter class="mobile-splitter"></mct-splitter>
diff --git a/platform/commonUI/browse/res/templates/create/create-button.html b/platform/commonUI/browse/res/templates/create/create-button.html
index 527afd9882..4fce8d8f9c 100644
--- a/platform/commonUI/browse/res/templates/create/create-button.html
+++ b/platform/commonUI/browse/res/templates/create/create-button.html
@@ -23,7 +23,7 @@
     <div class="btn btn-menu create-btn major" ng-click="createController.toggle()">
 	    Create
     </div>
-    <div class="menu dropdown super-menu" ng-show="createController.isActive()">
+    <div class="menu dropdown super-menu mobile-super-menu" ng-show="createController.isActive()">
         <mct-representation mct-object="domainObject" key="'create-menu'">
         </mct-representation>
     </div>
diff --git a/platform/commonUI/browse/res/templates/create/create-menu.html b/platform/commonUI/browse/res/templates/create/create-menu.html
index 1af6c5cd31..e0de7ecc2d 100644
--- a/platform/commonUI/browse/res/templates/create/create-menu.html
+++ b/platform/commonUI/browse/res/templates/create/create-menu.html
@@ -20,11 +20,11 @@
  at runtime from the About dialog for additional information.
 -->
 <div class="contents" ng-controller="CreateMenuController">
-    <div class="pane left menu-items pane-special left">
+    <div class="pane left menu-items mobile-super-menu">
         <ul>
 
             <li ng-repeat="createAction in createActions">
-                <a
+                <a class="mobile-super-menu-text"
                    ng-click="createAction.perform()"
                    ng-mouseover="representation.activeMetadata = createAction.getMetadata()"
                    ng-mouseleave="representation.activeMetadata = undefined">
@@ -37,7 +37,7 @@
 
         </ul>
     </div>
-    <div class="pane right menu-item-description">
+    <div class="pane right menu-item-description mobile-right-create">
         <div class="desc-area ui-symbol icon type-icon">
             {{representation.activeMetadata.glyph}}
         </div>
diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index 70c65c582f..7a1b471d44 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -762,13 +762,11 @@ mct-container {
     transition-duration: 0.2s;
     transition-timing-function: ease;
     width: 0px !important;
-    right: auto !important; }
-    /* line 54, ../sass/mobile/_layout.scss */
-    .browse-hidetree .pane-special.left .createBtnPos {
-      overflow-y: hidden;
-      overflow-x: hidden; } }
+    right: auto !important;
+    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 61, ../sass/mobile/_layout.scss */
+  /* line 58, ../sass/mobile/_layout.scss */
   .browse-hidetree .pane-special.right {
     -moz-transition-duration: 0.2s;
     -o-transition-duration: 0.2s;
@@ -779,7 +777,7 @@ mct-container {
     left: 0px !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 71, ../sass/mobile/_layout.scss */
+  /* line 68, ../sass/mobile/_layout.scss */
   .browse-showtree .pane-special.left {
     -moz-transition-duration: 0.2s;
     -o-transition-duration: 0.2s;
@@ -787,30 +785,27 @@ mct-container {
     transition-duration: 0.2s;
     transition-timing-function: ease;
     display: block !important;
-    right: auto !important; }
-    /* line 77, ../sass/mobile/_layout.scss */
-    .browse-showtree .pane-special.left .createBtnPos {
-      height: inherit;
-      overflow-y: hidden;
-      overflow-x: hidden; } }
+    right: auto !important;
+    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) {
-  /* line 71, ../sass/mobile/_layout.scss */
+  /* line 68, ../sass/mobile/_layout.scss */
   .browse-showtree .pane-special.left {
     width: 80% !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 71, ../sass/mobile/_layout.scss */
+  /* line 68, ../sass/mobile/_layout.scss */
   .browse-showtree .pane-special.left {
     width: 30% !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 71, ../sass/mobile/_layout.scss */
+  /* line 68, ../sass/mobile/_layout.scss */
   .browse-showtree .pane-special.left {
     width: 35% !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 71, ../sass/mobile/_layout.scss */
+  /* line 68, ../sass/mobile/_layout.scss */
   .browse-showtree .pane-special.left {
     width: 25% !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 96, ../sass/mobile/_layout.scss */
+  /* line 89, ../sass/mobile/_layout.scss */
   .browse-showtree .pane-special.right {
     -moz-transition-duration: 0.2s;
     -o-transition-duration: 0.2s;
@@ -819,29 +814,29 @@ mct-container {
     transition-timing-function: ease;
     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 96, ../sass/mobile/_layout.scss */
+  /* line 89, ../sass/mobile/_layout.scss */
   .browse-showtree .pane-special.right {
     left: 80% !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 96, ../sass/mobile/_layout.scss */
+  /* line 89, ../sass/mobile/_layout.scss */
   .browse-showtree .pane-special.right {
     left: 30% !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 96, ../sass/mobile/_layout.scss */
+  /* line 89, ../sass/mobile/_layout.scss */
   .browse-showtree .pane-special.right {
     left: 35% !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 96, ../sass/mobile/_layout.scss */
+  /* line 89, ../sass/mobile/_layout.scss */
   .browse-showtree .pane-special.right {
     left: 25% !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 116, ../sass/mobile/_layout.scss */
+  /* line 109, ../sass/mobile/_layout.scss */
   .mobile-splitter {
     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), 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 124, ../sass/mobile/_layout.scss */
+  /* line 117, ../sass/mobile/_layout.scss */
   .button-pos {
     position: absolute;
     -moz-transition-duration: 0.2s;
@@ -851,40 +846,50 @@ mct-container {
     transition-timing-function: ease; } }
 
 @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 124, ../sass/mobile/_layout.scss */
   .object-header-mobile {
     position: relative;
     left: 30px; } }
 
-/* line 138, ../sass/mobile/_layout.scss */
+/* line 131, ../sass/mobile/_layout.scss */
 .mobile-menu-icon {
   display: inline-block; }
   @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 138, ../sass/mobile/_layout.scss */
+    /* line 131, ../sass/mobile/_layout.scss */
     .mobile-menu-icon {
       font-size: 125%; } }
   @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 138, ../sass/mobile/_layout.scss */
+    /* line 131, ../sass/mobile/_layout.scss */
     .mobile-menu-icon {
       font-size: 175%; } }
   @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-    /* line 138, ../sass/mobile/_layout.scss */
+    /* line 131, ../sass/mobile/_layout.scss */
     .mobile-menu-icon {
       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), 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 152, ../sass/mobile/_layout.scss */
+  /* line 144, ../sass/mobile/_layout.scss */
+  .mobile-super-menu {
+    width: 100% !important; } }
+
+/* line 150, ../sass/mobile/_layout.scss */
+.mobile-super-menu-text {
+  overflow-x: hidden !important;
+  text-overflow: ellipsis !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 155, ../sass/mobile/_layout.scss */
+  .mobile-right-create {
+    width: 0px !important;
+    padding: 0px !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 162, ../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), 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 158, ../sass/mobile/_layout.scss */
-  .mobile-text-hide {
-    width: 0px;
-    overflow: 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 165, ../sass/mobile/_layout.scss */
+  /* line 168, ../sass/mobile/_layout.scss */
   .phone-hide {
     display: none; } }
 
diff --git a/platform/commonUI/general/res/sass/mobile/_layout.scss b/platform/commonUI/general/res/sass/mobile/_layout.scss
index 2d72aba1ff..565c092f20 100644
--- a/platform/commonUI/general/res/sass/mobile/_layout.scss
+++ b/platform/commonUI/general/res/sass/mobile/_layout.scss
@@ -50,11 +50,8 @@
             @include slMenuTransitions;
             width: 0px !important;
             right: auto !important;
-            
-            .createBtnPos {
-                overflow-y: hidden;
-                overflow-x: hidden;
-            }            
+            overflow-y: hidden;
+            overflow-x: hidden;       
         }
     }
 
@@ -73,12 +70,8 @@
             @include slMenuTransitions;
             display: block !important;
             right: auto !important;
-            
-            .createBtnPos {
-                height: inherit;
-                overflow-y: hidden;
-                overflow-x: hidden;
-            }
+            overflow-y: hidden;
+            overflow-x: hidden;
         }
         @include phonePortrait {
             width: $phoneMenuSizePortrait !important;
@@ -148,6 +141,23 @@
     }       
 }
 
+.mobile-super-menu {
+    @include phoneandtablet {
+        width: 100% !important;
+    }
+}
+
+.mobile-super-menu-text {
+    overflow-x: hidden !important;
+    text-overflow: ellipsis !important;
+}
+
+.mobile-right-create {
+    @include phoneandtablet {
+        width: 0px !important;
+        padding: 0px !important;
+    }
+}
 
 .mobile-hide {
     @include phoneandtablet {
@@ -155,13 +165,6 @@
     }
 }
 
-.mobile-text-hide {
-    @include phoneandtablet {
-        width: 0px;
-        overflow:hidden;
-    }
-}
-
 .phone-hide {
     @include phone {
         display: none;

From 272c6bca97707299c1d36c790bd7ab7f08045874 Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Fri, 17 Jul 2015 10:50:02 -0700
Subject: [PATCH 071/209] [Mobile] Create Menu

Create menu's is specified/overwritten
with 1000% (change) to fit on mobile).
Also gets rid of the right bar in that view.
---
 .../general/res/css/theme-espresso.css        | 75 ++++++++++---------
 platform/commonUI/general/res/sass/_main.scss |  1 +
 .../general/res/sass/mobile/_layout.scss      | 33 --------
 .../res/sass/mobile/controls/_menus.scss      | 34 +++++++++
 4 files changed, 74 insertions(+), 69 deletions(-)
 create mode 100644 platform/commonUI/general/res/sass/mobile/controls/_menus.scss

diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index 7a1b471d44..1f0048bb7f 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -836,7 +836,7 @@ mct-container {
     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), 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 117, ../sass/mobile/_layout.scss */
+  /* line 115, ../sass/mobile/_layout.scss */
   .button-pos {
     position: absolute;
     -moz-transition-duration: 0.2s;
@@ -846,50 +846,18 @@ mct-container {
     transition-timing-function: ease; } }
 
 @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 124, ../sass/mobile/_layout.scss */
+  /* line 122, ../sass/mobile/_layout.scss */
   .object-header-mobile {
     position: relative;
     left: 30px; } }
 
-/* line 131, ../sass/mobile/_layout.scss */
-.mobile-menu-icon {
-  display: inline-block; }
-  @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 131, ../sass/mobile/_layout.scss */
-    .mobile-menu-icon {
-      font-size: 125%; } }
-  @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 131, ../sass/mobile/_layout.scss */
-    .mobile-menu-icon {
-      font-size: 175%; } }
-  @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-    /* line 131, ../sass/mobile/_layout.scss */
-    .mobile-menu-icon {
-      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), 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 144, ../sass/mobile/_layout.scss */
-  .mobile-super-menu {
-    width: 100% !important; } }
-
-/* line 150, ../sass/mobile/_layout.scss */
-.mobile-super-menu-text {
-  overflow-x: hidden !important;
-  text-overflow: ellipsis !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 155, ../sass/mobile/_layout.scss */
-  .mobile-right-create {
-    width: 0px !important;
-    padding: 0px !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 162, ../sass/mobile/_layout.scss */
+  /* line 129, ../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 168, ../sass/mobile/_layout.scss */
+  /* line 135, ../sass/mobile/_layout.scss */
   .phone-hide {
     display: none; } }
 
@@ -2895,6 +2863,41 @@ label.checkbox.custom {
   right: 0;
   width: auto; }
 
+/* line 2, ../sass/mobile/controls/_menus.scss */
+.mobile-menu-icon {
+  display: inline-block; }
+  @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 2, ../sass/mobile/controls/_menus.scss */
+    .mobile-menu-icon {
+      font-size: 125%; } }
+  @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 2, ../sass/mobile/controls/_menus.scss */
+    .mobile-menu-icon {
+      font-size: 175%; } }
+  @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
+    /* line 2, ../sass/mobile/controls/_menus.scss */
+    .mobile-menu-icon {
+      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), 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 15, ../sass/mobile/controls/_menus.scss */
+  .mobile-super-menu {
+    width: 100% !important;
+    height: 1000% !important;
+    border-right: 0px !important;
+    padding-right: 0px !important; } }
+
+/* line 24, ../sass/mobile/controls/_menus.scss */
+.mobile-super-menu-text {
+  overflow-x: hidden !important;
+  text-overflow: ellipsis !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 29, ../sass/mobile/controls/_menus.scss */
+  .mobile-right-create {
+    width: 0px !important;
+    padding: 0px !important; } }
+
 /* line 1, ../sass/controls/_time-controller.scss */
 .l-time-controller {
   position: relative;
diff --git a/platform/commonUI/general/res/sass/_main.scss b/platform/commonUI/general/res/sass/_main.scss
index 5604ba3cb6..4814cb66c7 100644
--- a/platform/commonUI/general/res/sass/_main.scss
+++ b/platform/commonUI/general/res/sass/_main.scss
@@ -49,6 +49,7 @@
 @import "controls/controls";
 @import "controls/lists";
 @import "controls/menus";
+@import "mobile/controls/menus";
 @import "controls/time-controller";
 @import "edit/editor";
 @import "features/imagery";
diff --git a/platform/commonUI/general/res/sass/mobile/_layout.scss b/platform/commonUI/general/res/sass/mobile/_layout.scss
index 565c092f20..ff9a89cf55 100644
--- a/platform/commonUI/general/res/sass/mobile/_layout.scss
+++ b/platform/commonUI/general/res/sass/mobile/_layout.scss
@@ -112,8 +112,6 @@
     }
 }
 
-
-
 .button-pos {
     @include phoneandtablet {
         position: absolute;
@@ -128,37 +126,6 @@
     }
 }
 
-.mobile-menu-icon {
-    display: inline-block;
-    @include phone {
-        font-size: 125%;
-    }
-    @include tablet {
-        font-size: 175%;
-    }      
-    @include desktop {
-        display: none;
-    }       
-}
-
-.mobile-super-menu {
-    @include phoneandtablet {
-        width: 100% !important;
-    }
-}
-
-.mobile-super-menu-text {
-    overflow-x: hidden !important;
-    text-overflow: ellipsis !important;
-}
-
-.mobile-right-create {
-    @include phoneandtablet {
-        width: 0px !important;
-        padding: 0px !important;
-    }
-}
-
 .mobile-hide {
     @include phoneandtablet {
         display: none;
diff --git a/platform/commonUI/general/res/sass/mobile/controls/_menus.scss b/platform/commonUI/general/res/sass/mobile/controls/_menus.scss
new file mode 100644
index 0000000000..54c97645eb
--- /dev/null
+++ b/platform/commonUI/general/res/sass/mobile/controls/_menus.scss
@@ -0,0 +1,34 @@
+
+.mobile-menu-icon {
+    display: inline-block;
+    @include phone {
+        font-size: 125%;
+    }
+    @include tablet {
+        font-size: 175%;
+    }      
+    @include desktop {
+        display: none;
+    }       
+}
+
+.mobile-super-menu {
+    @include phoneandtablet {
+        width: 100% !important;
+        height: 1000% !important;
+        border-right: 0px !important;
+        padding-right: 0px !important;
+    }
+}
+
+.mobile-super-menu-text {
+    overflow-x: hidden !important;
+    text-overflow: ellipsis !important;
+}
+
+.mobile-right-create {
+    @include phoneandtablet {
+        width: 0px !important;
+        padding: 0px !important;
+    }
+}
\ No newline at end of file

From 2614427e0ec720cb067bb8ddabd33e5331faaac2 Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Fri, 17 Jul 2015 14:32:33 -0700
Subject: [PATCH 072/209] [Mobile] Fix

Fixed to open menu fully.
---
 .../general/res/css/theme-espresso.css        | 30 ++++++++-----------
 .../general/res/sass/mobile/_layout.scss      |  2 --
 .../res/sass/mobile/controls/_menus.scss      |  2 --
 3 files changed, 13 insertions(+), 21 deletions(-)

diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index 1f0048bb7f..3b49a7d862 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -785,9 +785,7 @@ mct-container {
     transition-duration: 0.2s;
     transition-timing-function: ease;
     display: block !important;
-    right: auto !important;
-    overflow-y: hidden;
-    overflow-x: hidden; } }
+    right: 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 68, ../sass/mobile/_layout.scss */
   .browse-showtree .pane-special.left {
@@ -805,7 +803,7 @@ mct-container {
   .browse-showtree .pane-special.left {
     width: 25% !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 89, ../sass/mobile/_layout.scss */
+  /* line 87, ../sass/mobile/_layout.scss */
   .browse-showtree .pane-special.right {
     -moz-transition-duration: 0.2s;
     -o-transition-duration: 0.2s;
@@ -814,29 +812,29 @@ mct-container {
     transition-timing-function: ease;
     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 89, ../sass/mobile/_layout.scss */
+  /* line 87, ../sass/mobile/_layout.scss */
   .browse-showtree .pane-special.right {
     left: 80% !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 89, ../sass/mobile/_layout.scss */
+  /* line 87, ../sass/mobile/_layout.scss */
   .browse-showtree .pane-special.right {
     left: 30% !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 89, ../sass/mobile/_layout.scss */
+  /* line 87, ../sass/mobile/_layout.scss */
   .browse-showtree .pane-special.right {
     left: 35% !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 89, ../sass/mobile/_layout.scss */
+  /* line 87, ../sass/mobile/_layout.scss */
   .browse-showtree .pane-special.right {
     left: 25% !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 109, ../sass/mobile/_layout.scss */
+  /* line 107, ../sass/mobile/_layout.scss */
   .mobile-splitter {
     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), 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 115, ../sass/mobile/_layout.scss */
+  /* line 113, ../sass/mobile/_layout.scss */
   .button-pos {
     position: absolute;
     -moz-transition-duration: 0.2s;
@@ -846,18 +844,18 @@ mct-container {
     transition-timing-function: ease; } }
 
 @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 122, ../sass/mobile/_layout.scss */
+  /* line 120, ../sass/mobile/_layout.scss */
   .object-header-mobile {
     position: relative;
     left: 30px; } }
 
 @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 129, ../sass/mobile/_layout.scss */
+  /* line 127, ../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 135, ../sass/mobile/_layout.scss */
+  /* line 133, ../sass/mobile/_layout.scss */
   .phone-hide {
     display: none; } }
 
@@ -2882,18 +2880,16 @@ label.checkbox.custom {
 @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 15, ../sass/mobile/controls/_menus.scss */
   .mobile-super-menu {
-    width: 100% !important;
-    height: 1000% !important;
     border-right: 0px !important;
     padding-right: 0px !important; } }
 
-/* line 24, ../sass/mobile/controls/_menus.scss */
+/* line 22, ../sass/mobile/controls/_menus.scss */
 .mobile-super-menu-text {
   overflow-x: hidden !important;
   text-overflow: ellipsis !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 29, ../sass/mobile/controls/_menus.scss */
+  /* line 27, ../sass/mobile/controls/_menus.scss */
   .mobile-right-create {
     width: 0px !important;
     padding: 0px !important; } }
diff --git a/platform/commonUI/general/res/sass/mobile/_layout.scss b/platform/commonUI/general/res/sass/mobile/_layout.scss
index ff9a89cf55..c1e42b61bf 100644
--- a/platform/commonUI/general/res/sass/mobile/_layout.scss
+++ b/platform/commonUI/general/res/sass/mobile/_layout.scss
@@ -70,8 +70,6 @@
             @include slMenuTransitions;
             display: block !important;
             right: auto !important;
-            overflow-y: hidden;
-            overflow-x: hidden;
         }
         @include phonePortrait {
             width: $phoneMenuSizePortrait !important;
diff --git a/platform/commonUI/general/res/sass/mobile/controls/_menus.scss b/platform/commonUI/general/res/sass/mobile/controls/_menus.scss
index 54c97645eb..40b05539d9 100644
--- a/platform/commonUI/general/res/sass/mobile/controls/_menus.scss
+++ b/platform/commonUI/general/res/sass/mobile/controls/_menus.scss
@@ -14,8 +14,6 @@
 
 .mobile-super-menu {
     @include phoneandtablet {
-        width: 100% !important;
-        height: 1000% !important;
         border-right: 0px !important;
         padding-right: 0px !important;
     }

From 6e406fd06050f28136ac47682fd3db014ebb77b6 Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Mon, 20 Jul 2015 09:16:28 -0700
Subject: [PATCH 073/209] [Mobile] Right Pane sets

Right pane sets the size of itself,
causing the left pane to re-adjust
to fit the screen based on it. Also
transitions work on the slide and the
fade in.
---
 .../general/res/css/theme-espresso.css        | 163 +++++++++++-------
 .../general/res/sass/mobile/_constants.scss   |   8 +-
 .../general/res/sass/mobile/_layout.scss      |  58 ++++---
 .../general/res/sass/mobile/_mixins.scss      |   2 +-
 .../res/sass/mobile/controls/_menus.scss      |   4 +-
 5 files changed, 136 insertions(+), 99 deletions(-)

diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index 3b49a7d862..01221fca13 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -756,106 +756,137 @@ mct-container {
 @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 48, ../sass/mobile/_layout.scss */
   .browse-hidetree .pane-special.left {
-    -moz-transition-duration: 0.2s;
-    -o-transition-duration: 0.2s;
-    -webkit-transition-duration: 0.2s;
-    transition-duration: 0.2s;
+    -moz-transition-duration: 0.35s;
+    -o-transition-duration: 0.35s;
+    -webkit-transition-duration: 0.35s;
+    transition-duration: 0.35s;
     transition-timing-function: ease;
-    width: 0px !important;
-    right: auto !important;
+    -moz-transition-property: opacity;
+    -o-transition-property: opacity;
+    -webkit-transition-property: opacity;
+    transition-property: opacity;
+    -moz-transition-duration: 0.35s;
+    -o-transition-duration: 0.35s;
+    -webkit-transition-duration: 0.35s;
+    transition-duration: 0.35s;
+    -moz-transition-timing-function: ease-in-out;
+    -o-transition-timing-function: ease-in-out;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-timing-function: ease-in-out;
+    opacity: 0;
+    right: 100% !important;
+    width: auto !important;
     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 58, ../sass/mobile/_layout.scss */
+  /* line 60, ../sass/mobile/_layout.scss */
   .browse-hidetree .pane-special.right {
-    -moz-transition-duration: 0.2s;
-    -o-transition-duration: 0.2s;
-    -webkit-transition-duration: 0.2s;
-    transition-duration: 0.2s;
+    -moz-transition-duration: 0.35s;
+    -o-transition-duration: 0.35s;
+    -webkit-transition-duration: 0.35s;
+    transition-duration: 0.35s;
     transition-timing-function: ease;
-    width: auto !important;
-    left: 0px !important; } }
+    left: auto !important;
+    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 68, ../sass/mobile/_layout.scss */
+  /* line 70, ../sass/mobile/_layout.scss */
   .browse-showtree .pane-special.left {
-    -moz-transition-duration: 0.2s;
-    -o-transition-duration: 0.2s;
-    -webkit-transition-duration: 0.2s;
-    transition-duration: 0.2s;
+    -moz-transition-duration: 0.35s;
+    -o-transition-duration: 0.35s;
+    -webkit-transition-duration: 0.35s;
+    transition-duration: 0.35s;
     transition-timing-function: ease;
+    -moz-transition-property: opacity;
+    -o-transition-property: opacity;
+    -webkit-transition-property: opacity;
+    transition-property: opacity;
+    -moz-transition-duration: 0.4s;
+    -o-transition-duration: 0.4s;
+    -webkit-transition-duration: 0.4s;
+    transition-duration: 0.4s;
+    -moz-transition-timing-function: ease-in-out;
+    -o-transition-timing-function: ease-in-out;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-timing-function: ease-in-out;
+    opacity: 1;
     display: block !important;
-    right: 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 68, ../sass/mobile/_layout.scss */
-  .browse-showtree .pane-special.left {
-    width: 80% !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 68, ../sass/mobile/_layout.scss */
-  .browse-showtree .pane-special.left {
-    width: 30% !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 68, ../sass/mobile/_layout.scss */
-  .browse-showtree .pane-special.left {
-    width: 35% !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 68, ../sass/mobile/_layout.scss */
-  .browse-showtree .pane-special.left {
-    width: 25% !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 87, ../sass/mobile/_layout.scss */
-  .browse-showtree .pane-special.right {
-    -moz-transition-duration: 0.2s;
-    -o-transition-duration: 0.2s;
-    -webkit-transition-duration: 0.2s;
-    transition-duration: 0.2s;
-    transition-timing-function: ease;
     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 87, ../sass/mobile/_layout.scss */
-  .browse-showtree .pane-special.right {
-    left: 80% !important; } }
+  /* line 70, ../sass/mobile/_layout.scss */
+  .browse-showtree .pane-special.left {
+    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 87, ../sass/mobile/_layout.scss */
-  .browse-showtree .pane-special.right {
-    left: 30% !important; } }
+  /* line 70, ../sass/mobile/_layout.scss */
+  .browse-showtree .pane-special.left {
+    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 87, ../sass/mobile/_layout.scss */
-  .browse-showtree .pane-special.right {
-    left: 35% !important; } }
+  /* line 70, ../sass/mobile/_layout.scss */
+  .browse-showtree .pane-special.left {
+    right: 600px !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 87, ../sass/mobile/_layout.scss */
+  /* line 70, ../sass/mobile/_layout.scss */
+  .browse-showtree .pane-special.left {
+    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 91, ../sass/mobile/_layout.scss */
   .browse-showtree .pane-special.right {
-    left: 25% !important; } }
+    -moz-transition-duration: 0.35s;
+    -o-transition-duration: 0.35s;
+    -webkit-transition-duration: 0.35s;
+    transition-duration: 0.35s;
+    transition-timing-function: ease;
+    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 91, ../sass/mobile/_layout.scss */
+  .browse-showtree .pane-special.right {
+    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 91, ../sass/mobile/_layout.scss */
+  .browse-showtree .pane-special.right {
+    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 91, ../sass/mobile/_layout.scss */
+  .browse-showtree .pane-special.right {
+    width: 600px !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 91, ../sass/mobile/_layout.scss */
+  .browse-showtree .pane-special.right {
+    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 107, ../sass/mobile/_layout.scss */
+  /* line 111, ../sass/mobile/_layout.scss */
   .mobile-splitter {
     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), 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 113, ../sass/mobile/_layout.scss */
+  /* line 117, ../sass/mobile/_layout.scss */
   .button-pos {
     position: absolute;
-    -moz-transition-duration: 0.2s;
-    -o-transition-duration: 0.2s;
-    -webkit-transition-duration: 0.2s;
-    transition-duration: 0.2s;
+    -moz-transition-duration: 0.35s;
+    -o-transition-duration: 0.35s;
+    -webkit-transition-duration: 0.35s;
+    transition-duration: 0.35s;
     transition-timing-function: ease; } }
 
-@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 120, ../sass/mobile/_layout.scss */
+@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 124, ../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 124, ../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 127, ../sass/mobile/_layout.scss */
+  /* line 135, ../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 133, ../sass/mobile/_layout.scss */
+  /* line 141, ../sass/mobile/_layout.scss */
   .phone-hide {
     display: none; } }
 
@@ -2867,11 +2898,11 @@ label.checkbox.custom {
   @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 2, ../sass/mobile/controls/_menus.scss */
     .mobile-menu-icon {
-      font-size: 125%; } }
+      font-size: 25px; } }
   @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 2, ../sass/mobile/controls/_menus.scss */
     .mobile-menu-icon {
-      font-size: 175%; } }
+      font-size: 29px; } }
   @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
     /* line 2, ../sass/mobile/controls/_menus.scss */
     .mobile-menu-icon {
diff --git a/platform/commonUI/general/res/sass/mobile/_constants.scss b/platform/commonUI/general/res/sass/mobile/_constants.scss
index 2886b8a7e6..448a7fb531 100644
--- a/platform/commonUI/general/res/sass/mobile/_constants.scss
+++ b/platform/commonUI/general/res/sass/mobile/_constants.scss
@@ -67,8 +67,8 @@ $desktopPortrait: "screen and #{$desktopPortraitCheck}";
 $desktopLandscape: "screen and #{$desktopLanscapeCheck}";
 
 /************************** DEVICE PARAMETERS FOR MENUS */
-$phoneMenuSizePortrait: 80%;
-$phoneMenuSizeLandscape: 30%;
-$tabletMenuSizePortrait: 35%;
-$tabletMenuSizeLandscape: 25%;
+$phoneMenuSizePortrait: 19px;
+$phoneMenuSizeLandscape: 66%;
+$tabletMenuSizePortrait: 600px;
+$tabletMenuSizeLandscape: 78%;
 $desktopMenuSize: 25%;
\ No newline at end of file
diff --git a/platform/commonUI/general/res/sass/mobile/_layout.scss b/platform/commonUI/general/res/sass/mobile/_layout.scss
index c1e42b61bf..09bfa95cba 100644
--- a/platform/commonUI/general/res/sass/mobile/_layout.scss
+++ b/platform/commonUI/general/res/sass/mobile/_layout.scss
@@ -20,8 +20,6 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-// NOTE: Added to adjust the browse folder left list view
-
 .browse-wrapper,
 .pane-special {
     @include phoneandtablet {
@@ -48,8 +46,10 @@
     .pane-special.left {
         @include phoneandtablet {
             @include slMenuTransitions;
-            width: 0px !important;
-            right: auto !important;
+            @include trans-prop-nice(opacity, .35s);
+            opacity: 0;
+            right: 100% !important;
+            width: auto !important;
             overflow-y: hidden;
             overflow-x: hidden;       
         }
@@ -58,8 +58,8 @@
     .pane-special.right {       
         @include phoneandtablet {         
             @include slMenuTransitions;
-            width: auto !important;
-            left: 0px !important;
+            left: auto !important;
+            width: 100% !important;
         }
     }    
 }
@@ -68,8 +68,28 @@
     .pane-special.left {
         @include phoneandtablet {
             @include slMenuTransitions;
+            @include trans-prop-nice(opacity, .4s);
+            opacity: 1;
             display: block !important;
-            right: auto !important;
+            width: auto !important;
+        }
+        @include phonePortrait {
+            right: $phoneMenuSizePortrait !important;
+        }
+        @include phoneLandscape {
+            right: $phoneMenuSizeLandscape !important;
+        }
+        @include tabletPortrait {
+            right: $tabletMenuSizePortrait !important;
+        }
+        @include tabletLandscape {
+            right: $tabletMenuSizeLandscape !important;
+        }
+    }
+    .pane-special.right {
+        @include phoneandtablet {
+            @include slMenuTransitions;
+            left: auto !important;
         }
         @include phonePortrait {
             width: $phoneMenuSizePortrait !important;
@@ -84,24 +104,6 @@
             width: $tabletMenuSizeLandscape !important;
         }
     }
-    .pane-special.right {
-        @include phoneandtablet {
-            @include slMenuTransitions;
-            width: auto !important;
-        }
-        @include phonePortrait {
-            left: $phoneMenuSizePortrait !important;
-        }
-        @include phoneLandscape {
-            left: $phoneMenuSizeLandscape !important;
-        }
-        @include tabletPortrait {
-            left: $tabletMenuSizePortrait !important;
-        }
-        @include tabletLandscape {
-            left: $tabletMenuSizeLandscape !important;
-        }
-    }
 }
 
 .mobile-splitter {
@@ -118,9 +120,13 @@
 }
 
 .object-header-mobile {
-    @include phoneandtablet {
+    @include phone {
         position: relative;
         left: 30px;
+    }    
+    @include tablet {
+        position: relative;
+        left: 35px;
     }
 }
 
diff --git a/platform/commonUI/general/res/sass/mobile/_mixins.scss b/platform/commonUI/general/res/sass/mobile/_mixins.scss
index a3e06d745b..e65963f3f8 100644
--- a/platform/commonUI/general/res/sass/mobile/_mixins.scss
+++ b/platform/commonUI/general/res/sass/mobile/_mixins.scss
@@ -89,6 +89,6 @@
 }
 
 @mixin slMenuTransitions {
-    @include transition-duration(.2s);
+    @include transition-duration(.35s);
     transition-timing-function: ease;
 }
diff --git a/platform/commonUI/general/res/sass/mobile/controls/_menus.scss b/platform/commonUI/general/res/sass/mobile/controls/_menus.scss
index 40b05539d9..3a5b67fa50 100644
--- a/platform/commonUI/general/res/sass/mobile/controls/_menus.scss
+++ b/platform/commonUI/general/res/sass/mobile/controls/_menus.scss
@@ -2,10 +2,10 @@
 .mobile-menu-icon {
     display: inline-block;
     @include phone {
-        font-size: 125%;
+        font-size: 25px;
     }
     @include tablet {
-        font-size: 175%;
+        font-size: 29px;
     }      
     @include desktop {
         display: none;

From ce6d74390e8c1b909159eb50703d90b63011cc5a Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Mon, 20 Jul 2015 09:39:06 -0700
Subject: [PATCH 074/209] [Mobile] Clean-Up

Removed unnecessary classes. Also added
comments and adjusted menu sizes.
---
 .../commonUI/browse/res/templates/browse.html |  12 +-
 .../res/templates/create/create-button.html   |   2 +-
 .../res/templates/create/create-menu.html     |   6 +-
 platform/commonUI/general/res/css/forms.css   |   2 +-
 platform/commonUI/general/res/css/items.css   |  16 +--
 .../general/res/css/theme-espresso.css        | 119 +++++++++---------
 platform/commonUI/general/res/css/tree.css    |   2 +-
 .../general/res/sass/mobile/_constants.scss   |  12 +-
 .../general/res/sass/mobile/_item.scss        |  10 +-
 .../general/res/sass/mobile/_layout.scss      |  53 ++++----
 .../res/sass/mobile/controls/_menus.scss      |  42 ++++---
 11 files changed, 139 insertions(+), 137 deletions(-)

diff --git a/platform/commonUI/browse/res/templates/browse.html b/platform/commonUI/browse/res/templates/browse.html
index d126d672cb..72d1ab3f1f 100644
--- a/platform/commonUI/browse/res/templates/browse.html
+++ b/platform/commonUI/browse/res/templates/browse.html
@@ -23,14 +23,9 @@
 <div ng-controller="BrowseController">
     <div content="jquery-wrapper" class="abs holder-all browse-mode">
         <mct-include key="'topbar-browse'"></mct-include>
-        
-        <!-- WRAPPER CLASS IS HERE-->
-        <!-- NG-CLASS HERE TO SWITCH THE PARENT CLASS FOR pane-special's left and right-->
         <div class="holder browse-area s-browse-area abs browse-wrapper" ng-class="treeClass ? 'browse-showtree' : 'browse-hidetree'">
             <mct-split-pane class='contents abs' anchor='left'>
-            
-                <!-- TREE MENU: ADDED THE PANE LEFT HERE, similar to .pane.left example-->
-                <div class='split-pane-component treeview pane pane-special left desktop-browse'>  
+                <div class='split-pane-component treeview pane mobile-pane left-menu desktop-browse'>  
                     <div class='holder tree-holder abs'>
                         <mct-representation key="'tree'"
                                             mct-object="domainObject"
@@ -41,9 +36,8 @@
                         </mct-representation>
                 </div>
                 
-                <mct-splitter class="mobile-splitter"></mct-splitter>
-                    <!-- ITEMS MENU: ADDED THE PANE RIGHT HERE, similar to .pane.right example-->
-                        <div class='split-pane-component items pane pane-special right'>
+                <mct-splitter class="mobile-hide"></mct-splitter>
+                        <div class='split-pane-component items pane mobile-pane right-repr'>
                             <div class='holder abs' id='content-area'>
                                 <mct-representation mct-object="navigatedObject" key="'browse-object'">
                                 </mct-representation>
diff --git a/platform/commonUI/browse/res/templates/create/create-button.html b/platform/commonUI/browse/res/templates/create/create-button.html
index 4fce8d8f9c..527afd9882 100644
--- a/platform/commonUI/browse/res/templates/create/create-button.html
+++ b/platform/commonUI/browse/res/templates/create/create-button.html
@@ -23,7 +23,7 @@
     <div class="btn btn-menu create-btn major" ng-click="createController.toggle()">
 	    Create
     </div>
-    <div class="menu dropdown super-menu mobile-super-menu" ng-show="createController.isActive()">
+    <div class="menu dropdown super-menu" ng-show="createController.isActive()">
         <mct-representation mct-object="domainObject" key="'create-menu'">
         </mct-representation>
     </div>
diff --git a/platform/commonUI/browse/res/templates/create/create-menu.html b/platform/commonUI/browse/res/templates/create/create-menu.html
index e0de7ecc2d..3386d2d266 100644
--- a/platform/commonUI/browse/res/templates/create/create-menu.html
+++ b/platform/commonUI/browse/res/templates/create/create-menu.html
@@ -20,11 +20,11 @@
  at runtime from the About dialog for additional information.
 -->
 <div class="contents" ng-controller="CreateMenuController">
-    <div class="pane left menu-items mobile-super-menu">
+    <div class="pane left menu-items">
         <ul>
 
             <li ng-repeat="createAction in createActions">
-                <a class="mobile-super-menu-text"
+                <a
                    ng-click="createAction.perform()"
                    ng-mouseover="representation.activeMetadata = createAction.getMetadata()"
                    ng-mouseleave="representation.activeMetadata = undefined">
@@ -37,7 +37,7 @@
 
         </ul>
     </div>
-    <div class="pane right menu-item-description mobile-right-create">
+    <div class="pane right menu-item-description">
         <div class="desc-area ui-symbol icon type-icon">
             {{representation.activeMetadata.glyph}}
         </div>
diff --git a/platform/commonUI/general/res/css/forms.css b/platform/commonUI/general/res/css/forms.css
index 2630143bbf..7d80703443 100644
--- a/platform/commonUI/general/res/css/forms.css
+++ b/platform/commonUI/general/res/css/forms.css
@@ -72,7 +72,7 @@
 /************************** WINDOW DIMENSIONS FOR RWD */
 /************************** MEDIA QUERIES: WINDOW CHECKS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */
 /************************** MEDIA QUERIES: WINDOWS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */
-/************************** DEVICE PARAMETERS FOR MENUS */
+/************************** DEVICE PARAMETERS FOR MENUS/REPRESENTATIONS */
 /*****************************************************************************
  * Open MCT Web, Copyright (c) 2014-2015, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
diff --git a/platform/commonUI/general/res/css/items.css b/platform/commonUI/general/res/css/items.css
index 0706514394..b4152de66d 100644
--- a/platform/commonUI/general/res/css/items.css
+++ b/platform/commonUI/general/res/css/items.css
@@ -72,7 +72,7 @@
 /************************** WINDOW DIMENSIONS FOR RWD */
 /************************** MEDIA QUERIES: WINDOW CHECKS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */
 /************************** MEDIA QUERIES: WINDOWS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */
-/************************** DEVICE PARAMETERS FOR MENUS */
+/************************** DEVICE PARAMETERS FOR MENUS/REPRESENTATIONS */
 /*****************************************************************************
  * Open MCT Web, Copyright (c) 2014-2015, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
@@ -351,25 +351,21 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 @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 24, ../sass/mobile/_item.scss */
+  /* line 28, ../sass/mobile/_item.scss */
   .items-holder .item.grid-item {
     width: 100%;
     height: 50px; } }
 @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 24, ../sass/mobile/_item.scss */
+  /* line 28, ../sass/mobile/_item.scss */
   .items-holder .item.grid-item {
     width: 100%;
     height: 100px; } }
 @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-  /* line 24, ../sass/mobile/_item.scss */
+  /* line 28, ../sass/mobile/_item.scss */
   .items-holder .item.grid-item {
     width: 200px;
     height: 200px; } }
-@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 49, ../sass/mobile/_item.scss */
-  .items-holder .item.grid-item .icon {
-    display: none; } }
-@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 49, ../sass/mobile/_item.scss */
+@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/_item.scss */
   .items-holder .item.grid-item .icon {
     display: none; } }
diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index 01221fca13..6f0704c532 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -73,7 +73,7 @@
 /************************** WINDOW DIMENSIONS FOR RWD */
 /************************** MEDIA QUERIES: WINDOW CHECKS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */
 /************************** MEDIA QUERIES: WINDOWS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */
-/************************** DEVICE PARAMETERS FOR MENUS */
+/************************** DEVICE PARAMETERS FOR MENUS/REPRESENTATIONS */
 /*****************************************************************************
  * Open MCT Web, Copyright (c) 2014-2015, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
@@ -737,7 +737,7 @@ mct-container {
 @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 25, ../sass/mobile/_layout.scss */
   .browse-wrapper,
-  .pane-special {
+  .mobile-pane {
     position: absolute;
     left: 0;
     top: 0;
@@ -747,15 +747,15 @@ mct-container {
     height: 100%; } }
 
 @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-  /* line 37, ../sass/mobile/_layout.scss */
+  /* line 38, ../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 48, ../sass/mobile/_layout.scss */
-  .browse-hidetree .pane-special.left {
+  /* line 50, ../sass/mobile/_layout.scss */
+  .browse-hidetree .mobile-pane.left-menu {
     -moz-transition-duration: 0.35s;
     -o-transition-duration: 0.35s;
     -webkit-transition-duration: 0.35s;
@@ -779,8 +779,8 @@ 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 60, ../sass/mobile/_layout.scss */
-  .browse-hidetree .pane-special.right {
+  /* line 62, ../sass/mobile/_layout.scss */
+  .browse-hidetree .mobile-pane.right-repr {
     -moz-transition-duration: 0.35s;
     -o-transition-duration: 0.35s;
     -webkit-transition-duration: 0.35s;
@@ -790,8 +790,8 @@ 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 70, ../sass/mobile/_layout.scss */
-  .browse-showtree .pane-special.left {
+  /* line 77, ../sass/mobile/_layout.scss */
+  .browse-showtree .mobile-pane.left-menu {
     -moz-transition-duration: 0.35s;
     -o-transition-duration: 0.35s;
     -webkit-transition-duration: 0.35s;
@@ -813,24 +813,24 @@ 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 70, ../sass/mobile/_layout.scss */
-  .browse-showtree .pane-special.left {
+  /* line 77, ../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 70, ../sass/mobile/_layout.scss */
-  .browse-showtree .pane-special.left {
+  /* line 77, ../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 70, ../sass/mobile/_layout.scss */
-  .browse-showtree .pane-special.left {
-    right: 600px !important; } }
+  /* line 77, ../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 70, ../sass/mobile/_layout.scss */
-  .browse-showtree .pane-special.left {
+  /* line 77, ../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 91, ../sass/mobile/_layout.scss */
-  .browse-showtree .pane-special.right {
+  /* line 98, ../sass/mobile/_layout.scss */
+  .browse-showtree .mobile-pane.right-repr {
     -moz-transition-duration: 0.35s;
     -o-transition-duration: 0.35s;
     -webkit-transition-duration: 0.35s;
@@ -838,29 +838,24 @@ mct-container {
     transition-timing-function: ease;
     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 91, ../sass/mobile/_layout.scss */
-  .browse-showtree .pane-special.right {
+  /* line 98, ../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 91, ../sass/mobile/_layout.scss */
-  .browse-showtree .pane-special.right {
+  /* line 98, ../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 91, ../sass/mobile/_layout.scss */
-  .browse-showtree .pane-special.right {
-    width: 600px !important; } }
+  /* line 98, ../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 91, ../sass/mobile/_layout.scss */
-  .browse-showtree .pane-special.right {
+  /* line 98, ../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 111, ../sass/mobile/_layout.scss */
-  .mobile-splitter {
-    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), 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 117, ../sass/mobile/_layout.scss */
+  /* line 119, ../sass/mobile/_layout.scss */
   .button-pos {
     position: absolute;
     -moz-transition-duration: 0.35s;
@@ -870,23 +865,23 @@ mct-container {
     transition-timing-function: ease; } }
 
 @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 124, ../sass/mobile/_layout.scss */
+  /* line 129, ../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 124, ../sass/mobile/_layout.scss */
+  /* line 129, ../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 135, ../sass/mobile/_layout.scss */
+  /* line 141, ../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 141, ../sass/mobile/_layout.scss */
+  /* line 148, ../sass/mobile/_layout.scss */
   .phone-hide {
     display: none; } }
 
@@ -2892,39 +2887,43 @@ label.checkbox.custom {
   right: 0;
   width: auto; }
 
-/* line 2, ../sass/mobile/controls/_menus.scss */
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+/* line 25, ../sass/mobile/controls/_menus.scss */
 .mobile-menu-icon {
   display: inline-block; }
   @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 2, ../sass/mobile/controls/_menus.scss */
+    /* line 25, ../sass/mobile/controls/_menus.scss */
     .mobile-menu-icon {
       font-size: 25px; } }
   @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 2, ../sass/mobile/controls/_menus.scss */
+    /* line 25, ../sass/mobile/controls/_menus.scss */
     .mobile-menu-icon {
       font-size: 29px; } }
   @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-    /* line 2, ../sass/mobile/controls/_menus.scss */
+    /* line 25, ../sass/mobile/controls/_menus.scss */
     .mobile-menu-icon {
       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), 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 15, ../sass/mobile/controls/_menus.scss */
-  .mobile-super-menu {
-    border-right: 0px !important;
-    padding-right: 0px !important; } }
-
-/* line 22, ../sass/mobile/controls/_menus.scss */
-.mobile-super-menu-text {
-  overflow-x: hidden !important;
-  text-overflow: ellipsis !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 27, ../sass/mobile/controls/_menus.scss */
-  .mobile-right-create {
-    width: 0px !important;
-    padding: 0px !important; } }
-
 /* line 1, ../sass/controls/_time-controller.scss */
 .l-time-controller {
   position: relative;
diff --git a/platform/commonUI/general/res/css/tree.css b/platform/commonUI/general/res/css/tree.css
index aba2210cf6..3fe58b337d 100644
--- a/platform/commonUI/general/res/css/tree.css
+++ b/platform/commonUI/general/res/css/tree.css
@@ -72,7 +72,7 @@
 /************************** WINDOW DIMENSIONS FOR RWD */
 /************************** MEDIA QUERIES: WINDOW CHECKS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */
 /************************** MEDIA QUERIES: WINDOWS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */
-/************************** DEVICE PARAMETERS FOR MENUS */
+/************************** DEVICE PARAMETERS FOR MENUS/REPRESENTATIONS */
 /*****************************************************************************
  * Open MCT Web, Copyright (c) 2014-2015, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
diff --git a/platform/commonUI/general/res/sass/mobile/_constants.scss b/platform/commonUI/general/res/sass/mobile/_constants.scss
index 448a7fb531..27761e2132 100644
--- a/platform/commonUI/general/res/sass/mobile/_constants.scss
+++ b/platform/commonUI/general/res/sass/mobile/_constants.scss
@@ -66,9 +66,9 @@ $tabletLandscapeEmu: "#{$screenLandscape} and #{$tabletLandscapeCheck} and #{$mo
 $desktopPortrait: "screen and #{$desktopPortraitCheck}";
 $desktopLandscape: "screen and #{$desktopLanscapeCheck}";
 
-/************************** DEVICE PARAMETERS FOR MENUS */
-$phoneMenuSizePortrait: 19px;
-$phoneMenuSizeLandscape: 66%;
-$tabletMenuSizePortrait: 600px;
-$tabletMenuSizeLandscape: 78%;
-$desktopMenuSize: 25%;
\ No newline at end of file
+/************************** DEVICE PARAMETERS FOR MENUS/REPRESENTATIONS */
+$phoneRepSizePortrait: 19px;
+$phoneRepSizeLandscape: 66%;
+$tabletRepSizePortrait: 500px;
+$tabletRepSizeLandscape: 78%;
+$desktopMenuSize: 25%;
diff --git a/platform/commonUI/general/res/sass/mobile/_item.scss b/platform/commonUI/general/res/sass/mobile/_item.scss
index c6e9deabf5..2b74671628 100644
--- a/platform/commonUI/general/res/sass/mobile/_item.scss
+++ b/platform/commonUI/general/res/sass/mobile/_item.scss
@@ -19,10 +19,13 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
+
+// Sets the size of the items in the folder
+// representation. Instead of a grid,
+// a list is used.
 .items-holder {
     .item {
         &.grid-item {
-//            NOTE: Sets grid item width
             $dWid: $ueBrowseGridItemLg;
             $dHei: $ueBrowseGridItemLg;
             @include phone {
@@ -47,12 +50,9 @@
             }
             
             .icon {
-                @include phone {
+                @include phoneandtablet {
                     display: none;
                 }
-                @include tablet {
-                    display: none;   
-                }
             }
         }
     }
diff --git a/platform/commonUI/general/res/sass/mobile/_layout.scss b/platform/commonUI/general/res/sass/mobile/_layout.scss
index 09bfa95cba..014aa8ca3d 100644
--- a/platform/commonUI/general/res/sass/mobile/_layout.scss
+++ b/platform/commonUI/general/res/sass/mobile/_layout.scss
@@ -20,8 +20,10 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
+// Wrapper of the entire 2 panes, only enacted on
+// phone and tablet. Also for the panes
 .browse-wrapper,
-.pane-special {
+.mobile-pane {
     @include phoneandtablet {
         position: absolute;
         left: 0; top: 0;
@@ -31,7 +33,8 @@
     }
 }
 
-
+// Default views of the panels
+// if in desktop browser
 .desktop-browse {
     @include desktop {
         min-width: 150px;
@@ -40,10 +43,11 @@
     }   
 }
 
-
-
+// When the tree is hidden, these are the
+// classes used for the left menu and the
+// right representation.
 .browse-hidetree {
-    .pane-special.left {
+    .mobile-pane.left-menu {
         @include phoneandtablet {
             @include slMenuTransitions;
             @include trans-prop-nice(opacity, .35s);
@@ -55,7 +59,7 @@
         }
     }
 
-    .pane-special.right {       
+    .mobile-pane.right-repr {       
         @include phoneandtablet {         
             @include slMenuTransitions;
             left: auto !important;
@@ -64,8 +68,13 @@
     }    
 }
 
+// When the tree is shown, these are
+// the classes used for the left menu
+// and the right menu (for each device &
+// orientation combination, separate 
+// parameters are used)
 .browse-showtree {
-    .pane-special.left {
+    .mobile-pane.left-menu {
         @include phoneandtablet {
             @include slMenuTransitions;
             @include trans-prop-nice(opacity, .4s);
@@ -74,44 +83,39 @@
             width: auto !important;
         }
         @include phonePortrait {
-            right: $phoneMenuSizePortrait !important;
+            right: $phoneRepSizePortrait !important;
         }
         @include phoneLandscape {
-            right: $phoneMenuSizeLandscape !important;
+            right: $phoneRepSizeLandscape !important;
         }
         @include tabletPortrait {
-            right: $tabletMenuSizePortrait !important;
+            right: $tabletRepSizePortrait !important;
         }
         @include tabletLandscape {
-            right: $tabletMenuSizeLandscape !important;
+            right: $tabletRepSizeLandscape !important;
         }
     }
-    .pane-special.right {
+    .mobile-pane.right-repr {
         @include phoneandtablet {
             @include slMenuTransitions;
             left: auto !important;
         }
         @include phonePortrait {
-            width: $phoneMenuSizePortrait !important;
+            width: $phoneRepSizePortrait !important;
         }
         @include phoneLandscape {
-            width: $phoneMenuSizeLandscape !important;
+            width: $phoneRepSizeLandscape !important;
         }
         @include tabletPortrait {
-            width: $tabletMenuSizePortrait !important;
+            width: $tabletRepSizePortrait !important;
         }
         @include tabletLandscape {
-            width: $tabletMenuSizeLandscape !important;
+            width: $tabletRepSizeLandscape !important;
         }
     }
 }
 
-.mobile-splitter {
-    @include phoneandtablet {
-        display: none;
-    }
-}
-
+// Button position is set as absolute with transitions
 .button-pos {
     @include phoneandtablet {
         position: absolute;
@@ -119,6 +123,9 @@
     }
 }
 
+// Object header must be moved
+// over to make space for the 
+// hamburger icon
 .object-header-mobile {
     @include phone {
         position: relative;
@@ -130,12 +137,14 @@
     }
 }
 
+// Hides objects on phone and tablet
 .mobile-hide {
     @include phoneandtablet {
         display: none;
     }
 }
 
+// Hides objects only on the phone
 .phone-hide {
     @include phone {
         display: none;
diff --git a/platform/commonUI/general/res/sass/mobile/controls/_menus.scss b/platform/commonUI/general/res/sass/mobile/controls/_menus.scss
index 3a5b67fa50..9b0136b5b3 100644
--- a/platform/commonUI/general/res/sass/mobile/controls/_menus.scss
+++ b/platform/commonUI/general/res/sass/mobile/controls/_menus.scss
@@ -1,4 +1,27 @@
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
 
+// Mobile hamburger icon is
+// sized according to the device
 .mobile-menu-icon {
     display: inline-block;
     @include phone {
@@ -11,22 +34,3 @@
         display: none;
     }       
 }
-
-.mobile-super-menu {
-    @include phoneandtablet {
-        border-right: 0px !important;
-        padding-right: 0px !important;
-    }
-}
-
-.mobile-super-menu-text {
-    overflow-x: hidden !important;
-    text-overflow: ellipsis !important;
-}
-
-.mobile-right-create {
-    @include phoneandtablet {
-        width: 0px !important;
-        padding: 0px !important;
-    }
-}
\ No newline at end of file

From 4e6c307684ce57eba6812eff27a095482faea2a1 Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Mon, 20 Jul 2015 09:48:12 -0700
Subject: [PATCH 075/209] [Mobile] Transition

Adjusts transition time on fade.
---
 platform/commonUI/general/res/css/theme-espresso.css   | 8 ++++----
 platform/commonUI/general/res/sass/mobile/_layout.scss | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index 6f0704c532..0b65157070 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -765,10 +765,10 @@ mct-container {
     -o-transition-property: opacity;
     -webkit-transition-property: opacity;
     transition-property: opacity;
-    -moz-transition-duration: 0.35s;
-    -o-transition-duration: 0.35s;
-    -webkit-transition-duration: 0.35s;
-    transition-duration: 0.35s;
+    -moz-transition-duration: 0.4s;
+    -o-transition-duration: 0.4s;
+    -webkit-transition-duration: 0.4s;
+    transition-duration: 0.4s;
     -moz-transition-timing-function: ease-in-out;
     -o-transition-timing-function: ease-in-out;
     -webkit-transition-timing-function: ease-in-out;
diff --git a/platform/commonUI/general/res/sass/mobile/_layout.scss b/platform/commonUI/general/res/sass/mobile/_layout.scss
index 014aa8ca3d..667e2949c4 100644
--- a/platform/commonUI/general/res/sass/mobile/_layout.scss
+++ b/platform/commonUI/general/res/sass/mobile/_layout.scss
@@ -50,7 +50,7 @@
     .mobile-pane.left-menu {
         @include phoneandtablet {
             @include slMenuTransitions;
-            @include trans-prop-nice(opacity, .35s);
+            @include trans-prop-nice(opacity, .4s);
             opacity: 0;
             right: 100% !important;
             width: auto !important;

From f98915cdddc232ed1579450642ed15f50461699b Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Mon, 20 Jul 2015 09:51:37 -0700
Subject: [PATCH 076/209] [Mobile] Comments

Added comments to the mixin list.
---
 platform/commonUI/general/res/sass/mobile/_mixins.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/platform/commonUI/general/res/sass/mobile/_mixins.scss b/platform/commonUI/general/res/sass/mobile/_mixins.scss
index e65963f3f8..a867b49834 100644
--- a/platform/commonUI/general/res/sass/mobile/_mixins.scss
+++ b/platform/commonUI/general/res/sass/mobile/_mixins.scss
@@ -88,6 +88,7 @@
     }
 }
 
+// Transition used for the slide menu
 @mixin slMenuTransitions {
     @include transition-duration(.35s);
     transition-timing-function: ease;

From dcdafbaebf230fe9ee678515502a65f3b38cc9fb Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Mon, 20 Jul 2015 10:25:27 -0700
Subject: [PATCH 077/209] [Mobile] Fix Shift

Shifting occurring during transition
fixed by making transition backface-
visibility hidden during the
transition.
---
 platform/commonUI/general/res/css/theme-espresso.css   | 7 ++++++-
 platform/commonUI/general/res/sass/mobile/_mixins.scss | 1 +
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index 0b65157070..6979a0df40 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -761,6 +761,7 @@ mct-container {
     -webkit-transition-duration: 0.35s;
     transition-duration: 0.35s;
     transition-timing-function: ease;
+    backface-visibility: hidden;
     -moz-transition-property: opacity;
     -o-transition-property: opacity;
     -webkit-transition-property: opacity;
@@ -786,6 +787,7 @@ mct-container {
     -webkit-transition-duration: 0.35s;
     transition-duration: 0.35s;
     transition-timing-function: ease;
+    backface-visibility: hidden;
     left: auto !important;
     width: 100% !important; } }
 
@@ -797,6 +799,7 @@ mct-container {
     -webkit-transition-duration: 0.35s;
     transition-duration: 0.35s;
     transition-timing-function: ease;
+    backface-visibility: hidden;
     -moz-transition-property: opacity;
     -o-transition-property: opacity;
     -webkit-transition-property: opacity;
@@ -836,6 +839,7 @@ mct-container {
     -webkit-transition-duration: 0.35s;
     transition-duration: 0.35s;
     transition-timing-function: ease;
+    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 98, ../sass/mobile/_layout.scss */
@@ -862,7 +866,8 @@ mct-container {
     -o-transition-duration: 0.35s;
     -webkit-transition-duration: 0.35s;
     transition-duration: 0.35s;
-    transition-timing-function: ease; } }
+    transition-timing-function: ease;
+    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 129, ../sass/mobile/_layout.scss */
diff --git a/platform/commonUI/general/res/sass/mobile/_mixins.scss b/platform/commonUI/general/res/sass/mobile/_mixins.scss
index a867b49834..23ce4cff2a 100644
--- a/platform/commonUI/general/res/sass/mobile/_mixins.scss
+++ b/platform/commonUI/general/res/sass/mobile/_mixins.scss
@@ -92,4 +92,5 @@
 @mixin slMenuTransitions {
     @include transition-duration(.35s);
     transition-timing-function: ease;
+    backface-visibility: hidden;
 }

From 56e51ea32a6155d1875e1bc0b219a3be31448e89 Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Tue, 21 Jul 2015 13:29:45 -0700
Subject: [PATCH 078/209] [Mobile] Reformat of menu

Reformats menu to move the
arrow to the right and now
that is what selects an object.
Pressing the actual menu item will
enact the dropdown menu. This
only happens on mobile platforms.
---
 .../commonUI/browse/src/BrowseController.js   |  2 -
 platform/commonUI/general/bundle.json         |  7 +-
 platform/commonUI/general/res/css/tree.css    | 39 +++++++++
 .../general/res/sass/mobile/_constants.scss   |  4 +-
 .../general/res/sass/mobile/_item.scss        |  2 +-
 .../general/res/sass/mobile/_tree.scss        | 57 +++++++++++--
 .../general/res/templates/tree-node.html      | 24 +++---
 .../src/controllers/TreeNodeController.js     | 11 ++-
 .../general/src/services/QueryService.js      | 85 +++++++++++++++++++
 9 files changed, 204 insertions(+), 27 deletions(-)
 create mode 100644 platform/commonUI/general/src/services/QueryService.js

diff --git a/platform/commonUI/browse/src/BrowseController.js b/platform/commonUI/browse/src/BrowseController.js
index b05793b15f..9bf040d3eb 100644
--- a/platform/commonUI/browse/src/BrowseController.js
+++ b/platform/commonUI/browse/src/BrowseController.js
@@ -143,8 +143,6 @@ define(
             
             $scope.treeSlide = function () {
                 $scope.treeClass = !$scope.treeClass;
-                // FUTURE: Remove before merge
-                console.log($scope.treeClass ? "browse-showtree" : "browse-hidetree");
             };
 
             // Listen for changes in navigation state.
diff --git a/platform/commonUI/general/bundle.json b/platform/commonUI/general/bundle.json
index 2093a988cd..25635d6093 100644
--- a/platform/commonUI/general/bundle.json
+++ b/platform/commonUI/general/bundle.json
@@ -8,6 +8,11 @@
                 "key": "urlService",
                 "implementation": "/services/UrlService.js",
                 "depends": [ "$location" ]
+            },
+            {
+                "key": "queryService",
+                "implementation": "/services/QueryService.js",
+                "depends": [ "$window" ]
             }
         ],
         "runs": [
@@ -60,7 +65,7 @@
             {
                 "key": "TreeNodeController",
                 "implementation": "controllers/TreeNodeController.js",
-                "depends": [ "$scope", "$timeout" ]
+                "depends": [ "$scope", "$timeout", "queryService" ]
             },
             {
                 "key": "ActionGroupController",
diff --git a/platform/commonUI/general/res/css/tree.css b/platform/commonUI/general/res/css/tree.css
index 3fe58b337d..fbbd16e929 100644
--- a/platform/commonUI/general/res/css/tree.css
+++ b/platform/commonUI/general/res/css/tree.css
@@ -306,3 +306,42 @@ ul.tree {
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
+@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 22, ../sass/mobile/_tree.scss */
+  .test-tree-words {
+    margin-bottom: 7px;
+    width: 90%;
+    text-overflow: ellipsis; } }
+
+@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 30, ../sass/mobile/_tree.scss */
+  ul.tree {
+    margin: 0;
+    padding: 0; }
+    /* line 267, ../sass/_mixins.scss */
+    ul.tree li {
+      list-style-type: none;
+      margin: 0;
+      padding: 0; }
+    /* line 39, ../sass/mobile/_tree.scss */
+    ul.tree li span.tree-item .label {
+      left: 3px; }
+      /* line 43, ../sass/mobile/_tree.scss */
+      ul.tree li span.tree-item .label .type-icon .alert {
+        right: auto;
+        left: 9px; }
+      /* line 48, ../sass/mobile/_tree.scss */
+      ul.tree li span.tree-item .label .title-label {
+        left: 20px; }
+    /* line 53, ../sass/mobile/_tree.scss */
+    ul.tree li span.tree-item .context-trigger {
+      right: 3px; }
+    /* line 57, ../sass/mobile/_tree.scss */
+    ul.tree li span.tree-item .view-control {
+      position: relative;
+      left: 100%;
+      right: 0;
+      font-size: 1.5em; }
+    /* line 67, ../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 27761e2132..198bf6f652 100644
--- a/platform/commonUI/general/res/sass/mobile/_constants.scss
+++ b/platform/commonUI/general/res/sass/mobile/_constants.scss
@@ -52,7 +52,7 @@ $tabHeiLanCheck: "(min-width: #{$tabMinH}) and (max-width: #{$tabMaxH})";
 $tabletLandscapeCheck: "#{$tabWidLanCheck} and #{$tabHeiLanCheck}";
 
 $desktopPortraitCheck: "(min-device-width: #{$compMinW}) and (min-device-height: #{$compMinH})";
-$desktopLanscapeCheck: "(min-device-width: #{$compMinH}) and (min-device-height: #{$compMinW})";
+$desktopLandscapeCheck: "(min-device-width: #{$compMinH}) and (min-device-height: #{$compMinW})";
 
 /************************** MEDIA QUERIES: WINDOWS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */
 $phonePortrait: "#{$screenPortrait} and #{$phonePortraitCheck} and #{$mobileDevice}";
@@ -64,7 +64,7 @@ $tabletLandscape: "#{$screenLandscape} and #{$tabletLandscapeCheck} and #{$mobil
 $tabletLandscapeEmu: "#{$screenLandscape} and #{$tabletLandscapeCheck} and #{$mobileDeviceEmu}";
 
 $desktopPortrait: "screen and #{$desktopPortraitCheck}";
-$desktopLandscape: "screen and #{$desktopLanscapeCheck}";
+$desktopLandscape: "screen and #{$desktopLandscapeCheck}";
 
 /************************** DEVICE PARAMETERS FOR MENUS/REPRESENTATIONS */
 $phoneRepSizePortrait: 19px;
diff --git a/platform/commonUI/general/res/sass/mobile/_item.scss b/platform/commonUI/general/res/sass/mobile/_item.scss
index 2b74671628..9542645136 100644
--- a/platform/commonUI/general/res/sass/mobile/_item.scss
+++ b/platform/commonUI/general/res/sass/mobile/_item.scss
@@ -56,4 +56,4 @@
             }
         }
     }
-}
\ No newline at end of file
+}
diff --git a/platform/commonUI/general/res/sass/mobile/_tree.scss b/platform/commonUI/general/res/sass/mobile/_tree.scss
index 673ff6c066..5d24928a4b 100644
--- a/platform/commonUI/general/res/sass/mobile/_tree.scss
+++ b/platform/commonUI/general/res/sass/mobile/_tree.scss
@@ -19,12 +19,53 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
+.test-tree-words {
+    @include phoneandtablet {
+        margin-bottom: 7px;
+        width: 90%;
+        text-overflow: ellipsis;
+    }
+}
 
-//mobile-flat-list {
-//	// For lists of tree-items that are flat. Remove margin, etc. normally needed for the expansion arrow.
-//	.tree-item {
-//        .label {
-//			left: -100px;
-//		}
-//	}
-//}
\ No newline at end of file
+ul.tree {
+    @include phoneandtablet {
+        @include menuUlReset();
+        li {
+            span.tree-item {
+                $runningItemW: 0;
+                $customMargin: auto;
+                $runningItemW: $interiorMargin + $treeVCW;
+
+                .label {
+                    left: 3px;
+
+                    .type-icon {
+                        .alert {
+                            right: auto;
+                            left: 9px;
+                        }
+                    }
+                    .title-label {
+                        left: $runningItemW + ($interiorMargin);
+                    }
+                }
+
+                .context-trigger {
+                    right: $interiorMarginSm;
+                }
+                
+                .view-control {
+                    position: relative;
+                    left: 100%;
+                    right: 0;
+                    font-size: 1.5em;
+                    $runningItemW: $interiorMargin + $treeVCW;
+                }                
+            }
+        }
+
+        ul.tree {
+            margin-left: 3px;
+        }
+    }
+}
diff --git a/platform/commonUI/general/res/templates/tree-node.html b/platform/commonUI/general/res/templates/tree-node.html
index f584befb1a..2e4c48ec3a 100644
--- a/platform/commonUI/general/res/templates/tree-node.html
+++ b/platform/commonUI/general/res/templates/tree-node.html
@@ -22,23 +22,25 @@
 <span ng-controller="ToggleController as toggle">
     <span ng-controller="TreeNodeController as treeNode">
         <span
-	        class="tree-item menus-to-left"
+	        class="tree-item menus-to-left test-tree-words"
 	        ng-class="{selected: treeNode.isSelected()}"
 	        >
-            <span
-	            class='ui-symbol view-control'
-				ng-click="toggle.toggle(); treeNode.trackExpansion()"
-				ng-if="model.composition !== undefined"
-				>
-                {{toggle.isActive() ? "v" : ">"}}
-            </span>
-            <mct-representation
-				key="'label'"
+            <mct-representation                                
+                key="'label'"
 				mct-object="domainObject"
 				ng-model="ngModel"
-				ng-click="ngModel.selectedObject = domainObject"
+				ng-click="!treeNode.checkMobile() ? ngModel.selectedObject = domainObject : toggle.toggle(); treeNode.trackExpansion()"
 				>
             </mct-representation>
+            <span
+	            class='ui-symbol view-control'
+                mct-object="domainObject"
+                ng-model="ngModel"
+				ng-click="treeNode.checkMobile() ? ngModel.selectedObject = domainObject : toggle.toggle(); treeNode.trackExpansion()"
+				ng-if="model.composition !== undefined || treeNode.checkMobile()"
+				>
+                {{treeNode.checkMobile() ? ">" : toggle.isActive() ? "v" : ">"}}
+            </span>            
         </span>
         <span
 			class="tree-item-subtree"
diff --git a/platform/commonUI/general/src/controllers/TreeNodeController.js b/platform/commonUI/general/src/controllers/TreeNodeController.js
index cfb70357bb..2a219fa499 100644
--- a/platform/commonUI/general/src/controllers/TreeNodeController.js
+++ b/platform/commonUI/general/src/controllers/TreeNodeController.js
@@ -50,7 +50,7 @@ define(
          * expand-to-show-navigated-object behavior.)
          * @constructor
          */
-        function TreeNodeController($scope, $timeout) {
+        function TreeNodeController($scope, $timeout, queryService) {
             var selectedObject = ($scope.ngModel || {}).selectedObject,
                 isSelected = false,
                 hasBeenExpanded = false;
@@ -86,7 +86,11 @@ define(
                     $timeout(function () { hasBeenExpanded = true; }, 0);
                 }
             }
-
+            
+            function checkMobile() {
+                return queryService.isMobile();
+            }
+            
             // Consider the currently-navigated object and update
             // parameters which support display.
             function checkSelection() {
@@ -150,6 +154,9 @@ define(
                  * lazy loading of the node's subtree.
                  */
                 trackExpansion: trackExpansion,
+                
+                checkMobile: checkMobile,
+                
                 /**
                  * Check if this not has ever been expanded.
                  * @returns true if it has been expanded
diff --git a/platform/commonUI/general/src/services/QueryService.js b/platform/commonUI/general/src/services/QueryService.js
new file mode 100644
index 0000000000..11b278f7a8
--- /dev/null
+++ b/platform/commonUI/general/src/services/QueryService.js
@@ -0,0 +1,85 @@
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+/*global define,Promise*/
+
+/**
+ * Module defining QueryService.
+ */
+
+var phoMaxWidth = 514,
+    phoMaxHeight = 740,
+
+    tabMinWidth = 515,
+    tabMaxWidth = 799,
+
+    tabMinHeight = 741,
+    tabMaxHeight = 1024,
+
+    compMinWidth = 800,
+    compMinHeight = 1025;
+
+define(
+    [],
+    function () {
+        "use strict";
+
+        /**
+         * The url service handles calls for url paths
+         * using domain objects.
+         */
+        function QueryService($window) {
+            
+            
+            
+            function getDeviceUA() {
+                var ua = navigator.userAgent;
+                return ua.match(/iPad|iPhone|Android/i) ?
+                        ua.match(/iPad|iPhone|Android/i) : "";
+            }
+            
+            function isMobile() {
+                if (getDeviceUA()) {
+                    return true;
+                } else {
+                    return false;
+                }
+            }
+
+            
+            function getOrientation(screenWidth, screenHeight) {
+                if ($window.screen.width > $window.screen.height) {
+                    return "landscape";
+                } else if ($window.screen.width < $window.screen.height) {
+                    return "portrait";
+                }
+            }
+         
+            return {
+                getOrientation: getOrientation,
+                
+                isMobile: isMobile
+            };
+        }
+
+        return QueryService;
+    }
+);
\ No newline at end of file

From 0842f464db62c584b758ec970f5020e842a6f532 Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Tue, 21 Jul 2015 14:29:13 -0700
Subject: [PATCH 079/209] [Mobile] Menu Adjustment

Makes highlight go all the way to right.
Also makes the arrow be absolute on the
right side, making it aligned to right.
---
 platform/commonUI/general/res/css/tree.css    | 22 +++++++++----------
 .../general/res/sass/mobile/_tree.scss        | 10 ++++-----
 2 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/platform/commonUI/general/res/css/tree.css b/platform/commonUI/general/res/css/tree.css
index fbbd16e929..ddffb9899b 100644
--- a/platform/commonUI/general/res/css/tree.css
+++ b/platform/commonUI/general/res/css/tree.css
@@ -309,12 +309,13 @@ ul.tree {
 @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 22, ../sass/mobile/_tree.scss */
   .test-tree-words {
-    margin-bottom: 7px;
-    width: 90%;
+    margin-bottom: 4px;
+    margin-bottom: 4px;
+    width: 100%;
     text-overflow: ellipsis; } }
 
 @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 30, ../sass/mobile/_tree.scss */
+  /* line 31, ../sass/mobile/_tree.scss */
   ul.tree {
     margin: 0;
     padding: 0; }
@@ -323,24 +324,23 @@ ul.tree {
       list-style-type: none;
       margin: 0;
       padding: 0; }
-    /* line 39, ../sass/mobile/_tree.scss */
+    /* line 40, ../sass/mobile/_tree.scss */
     ul.tree li span.tree-item .label {
       left: 3px; }
-      /* line 43, ../sass/mobile/_tree.scss */
+      /* line 44, ../sass/mobile/_tree.scss */
       ul.tree li span.tree-item .label .type-icon .alert {
         right: auto;
         left: 9px; }
-      /* line 48, ../sass/mobile/_tree.scss */
+      /* line 49, ../sass/mobile/_tree.scss */
       ul.tree li span.tree-item .label .title-label {
         left: 20px; }
-    /* line 53, ../sass/mobile/_tree.scss */
+    /* line 54, ../sass/mobile/_tree.scss */
     ul.tree li span.tree-item .context-trigger {
       right: 3px; }
-    /* line 57, ../sass/mobile/_tree.scss */
+    /* line 58, ../sass/mobile/_tree.scss */
     ul.tree li span.tree-item .view-control {
-      position: relative;
-      left: 100%;
-      right: 0;
+      position: absolute;
+      right: 5px;
       font-size: 1.5em; }
     /* line 67, ../sass/mobile/_tree.scss */
     ul.tree ul.tree {
diff --git a/platform/commonUI/general/res/sass/mobile/_tree.scss b/platform/commonUI/general/res/sass/mobile/_tree.scss
index 5d24928a4b..a0e428fd1c 100644
--- a/platform/commonUI/general/res/sass/mobile/_tree.scss
+++ b/platform/commonUI/general/res/sass/mobile/_tree.scss
@@ -21,8 +21,9 @@
  *****************************************************************************/
 .test-tree-words {
     @include phoneandtablet {
-        margin-bottom: 7px;
-        width: 90%;
+        margin-bottom: 4px;
+        margin-bottom: 4px;
+        width: 100%;
         text-overflow: ellipsis;
     }
 }
@@ -55,9 +56,8 @@ ul.tree {
                 }
                 
                 .view-control {
-                    position: relative;
-                    left: 100%;
-                    right: 0;
+                    position: absolute;
+                    right: 5px;
                     font-size: 1.5em;
                     $runningItemW: $interiorMargin + $treeVCW;
                 }                

From 827cb27f28d89fbcc9cd8ad6e518eebfcb3d4c87 Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Tue, 21 Jul 2015 16:19:59 -0700
Subject: [PATCH 080/209] [Mobile] Menu

Added margin to top of tree list items.
Also removed hovering Info coming
up on mobile devices.
---
 platform/commonUI/general/res/css/tree.css    | 45 ++++++++++---------
 .../general/res/sass/mobile/_tree.scss        |  3 +-
 .../general/res/templates/tree-node.html      |  8 ++--
 platform/commonUI/inspect/bundle.json         |  1 +
 .../inspect/src/gestures/InfoGesture.js       | 31 +++++++------
 5 files changed, 48 insertions(+), 40 deletions(-)

diff --git a/platform/commonUI/general/res/css/tree.css b/platform/commonUI/general/res/css/tree.css
index ddffb9899b..2dd23415b9 100644
--- a/platform/commonUI/general/res/css/tree.css
+++ b/platform/commonUI/general/res/css/tree.css
@@ -309,13 +309,11 @@ ul.tree {
 @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 22, ../sass/mobile/_tree.scss */
   .test-tree-words {
-    margin-bottom: 4px;
-    margin-bottom: 4px;
     width: 100%;
     text-overflow: ellipsis; } }
 
 @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 31, ../sass/mobile/_tree.scss */
+  /* line 29, ../sass/mobile/_tree.scss */
   ul.tree {
     margin: 0;
     padding: 0; }
@@ -324,24 +322,27 @@ ul.tree {
       list-style-type: none;
       margin: 0;
       padding: 0; }
-    /* line 40, ../sass/mobile/_tree.scss */
-    ul.tree li span.tree-item .label {
-      left: 3px; }
-      /* line 44, ../sass/mobile/_tree.scss */
-      ul.tree li span.tree-item .label .type-icon .alert {
-        right: auto;
-        left: 9px; }
-      /* line 49, ../sass/mobile/_tree.scss */
-      ul.tree li span.tree-item .label .title-label {
-        left: 20px; }
-    /* line 54, ../sass/mobile/_tree.scss */
-    ul.tree li span.tree-item .context-trigger {
-      right: 3px; }
-    /* line 58, ../sass/mobile/_tree.scss */
-    ul.tree li span.tree-item .view-control {
-      position: absolute;
-      right: 5px;
-      font-size: 1.5em; }
-    /* line 67, ../sass/mobile/_tree.scss */
+    /* line 33, ../sass/mobile/_tree.scss */
+    ul.tree li span.tree-item {
+      margin-top: 3px; }
+      /* line 39, ../sass/mobile/_tree.scss */
+      ul.tree li span.tree-item .label {
+        left: 3px; }
+        /* line 43, ../sass/mobile/_tree.scss */
+        ul.tree li span.tree-item .label .type-icon .alert {
+          right: auto;
+          left: 9px; }
+        /* line 48, ../sass/mobile/_tree.scss */
+        ul.tree li span.tree-item .label .title-label {
+          left: 20px; }
+      /* line 53, ../sass/mobile/_tree.scss */
+      ul.tree li span.tree-item .context-trigger {
+        right: 3px; }
+      /* line 57, ../sass/mobile/_tree.scss */
+      ul.tree li span.tree-item .view-control {
+        position: absolute;
+        right: 5px;
+        font-size: 1.5em; }
+    /* line 66, ../sass/mobile/_tree.scss */
     ul.tree ul.tree {
       margin-left: 3px; } }
diff --git a/platform/commonUI/general/res/sass/mobile/_tree.scss b/platform/commonUI/general/res/sass/mobile/_tree.scss
index a0e428fd1c..c50d9f71d1 100644
--- a/platform/commonUI/general/res/sass/mobile/_tree.scss
+++ b/platform/commonUI/general/res/sass/mobile/_tree.scss
@@ -21,8 +21,6 @@
  *****************************************************************************/
 .test-tree-words {
     @include phoneandtablet {
-        margin-bottom: 4px;
-        margin-bottom: 4px;
         width: 100%;
         text-overflow: ellipsis;
     }
@@ -36,6 +34,7 @@ ul.tree {
                 $runningItemW: 0;
                 $customMargin: auto;
                 $runningItemW: $interiorMargin + $treeVCW;
+                margin-top: $interiorMarginSm;
 
                 .label {
                     left: 3px;
diff --git a/platform/commonUI/general/res/templates/tree-node.html b/platform/commonUI/general/res/templates/tree-node.html
index 2e4c48ec3a..03b6808dca 100644
--- a/platform/commonUI/general/res/templates/tree-node.html
+++ b/platform/commonUI/general/res/templates/tree-node.html
@@ -29,18 +29,20 @@
                 key="'label'"
 				mct-object="domainObject"
 				ng-model="ngModel"
-				ng-click="!treeNode.checkMobile() ? ngModel.selectedObject = domainObject : toggle.toggle(); treeNode.trackExpansion()"
+				ng-click="!treeNode.checkMobile() ? ngModel.selectedObject = domainObject :
+                          toggle.toggle(); treeNode.trackExpansion()"
 				>
             </mct-representation>
             <span
 	            class='ui-symbol view-control'
                 mct-object="domainObject"
                 ng-model="ngModel"
-				ng-click="treeNode.checkMobile() ? ngModel.selectedObject = domainObject : toggle.toggle(); treeNode.trackExpansion()"
+				ng-click="treeNode.checkMobile() ? ngModel.selectedObject = domainObject :
+                          toggle.toggle(); treeNode.trackExpansion()"
 				ng-if="model.composition !== undefined || treeNode.checkMobile()"
 				>
                 {{treeNode.checkMobile() ? ">" : toggle.isActive() ? "v" : ">"}}
-            </span>            
+            </span>
         </span>
         <span
 			class="tree-item-subtree"
diff --git a/platform/commonUI/inspect/bundle.json b/platform/commonUI/inspect/bundle.json
index 51244b2bf2..7a2123486b 100644
--- a/platform/commonUI/inspect/bundle.json
+++ b/platform/commonUI/inspect/bundle.json
@@ -24,6 +24,7 @@
                 "implementation": "gestures/InfoGesture.js",
                 "depends": [
                     "$timeout",
+                    "queryService",
                     "infoService",
                     "INFO_HOVER_DELAY"
                 ]
diff --git a/platform/commonUI/inspect/src/gestures/InfoGesture.js b/platform/commonUI/inspect/src/gestures/InfoGesture.js
index 879cc2ac36..c40a2baac2 100644
--- a/platform/commonUI/inspect/src/gestures/InfoGesture.js
+++ b/platform/commonUI/inspect/src/gestures/InfoGesture.js
@@ -38,7 +38,7 @@ define(
          * @param {DomainObject} domainObject the domain object for which to
          *        show information
          */
-        function InfoGesture($timeout, infoService, DELAY, element, domainObject) {
+        function InfoGesture($timeout, queryService, infoService, DELAY, element, domainObject) {
             var dismissBubble,
                 pendingBubble,
                 mousePosition,
@@ -75,21 +75,26 @@ define(
                 // Also need to track position during hover
                 element.on('mousemove', trackPosition);
 
-                // Show the bubble, after a suitable delay (if mouse has
-                // left before this time is up, this will be canceled.)
-                pendingBubble = $timeout(function () {
-                    dismissBubble = infoService.display(
-                        "info-table",
-                        domainObject.getModel().name,
-                        domainObject.useCapability('metadata'),
-                        mousePosition
-                    );
-                    element.off('mousemove', trackPosition);
-                    pendingBubble = undefined;
-                }, DELAY);
+                // Checks if you are on a mobile device, if the device is
+                // mobile, then hovering is not done.
+                if (!queryService.isMobile()) {
+                    // Show the bubble, after a suitable delay (if mouse has
+                    // left before this time is up, this will be canceled.)
+                    pendingBubble = $timeout(function () {
+                        dismissBubble = infoService.display(
+                            "info-table",
+                            domainObject.getModel().name,
+                            domainObject.useCapability('metadata'),
+                            mousePosition
+                        );
+                        element.off('mousemove', trackPosition);
 
+                        pendingBubble = undefined;
+                    }, DELAY);
+                }
                 element.on('mouseleave', hideBubble);
             }
+            
 
             // Show bubble (on a timeout) on mouse over
             element.on('mouseenter', showBubble);

From 926b3d075ccfbdb07cf94b75939ecfdd7758ded1 Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Wed, 22 Jul 2015 10:25:21 -0700
Subject: [PATCH 081/209] [Mobile] Clean Up

Cleaned up scss files. Removed
repeated statements and added
comments. Also commented js files
like QueryService and InfoGesture.
---
 .../general/res/css/theme-espresso.css        | 34 +++++++-------
 platform/commonUI/general/res/css/tree.css    | 33 ++++---------
 .../general/res/sass/mobile/_layout.scss      | 12 +++++
 .../general/res/sass/mobile/_tree.scss        | 47 +++++++------------
 .../general/res/templates/tree-node.html      |  2 +-
 .../general/src/services/QueryService.js      | 39 +++++++--------
 .../inspect/src/gestures/InfoGesture.js       |  3 +-
 7 files changed, 79 insertions(+), 91 deletions(-)

diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index 6979a0df40..4ea71cfdf8 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -754,7 +754,7 @@ mct-container {
     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 50, ../sass/mobile/_layout.scss */
+  /* line 52, ../sass/mobile/_layout.scss */
   .browse-hidetree .mobile-pane.left-menu {
     -moz-transition-duration: 0.35s;
     -o-transition-duration: 0.35s;
@@ -780,7 +780,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 62, ../sass/mobile/_layout.scss */
+  /* line 66, ../sass/mobile/_layout.scss */
   .browse-hidetree .mobile-pane.right-repr {
     -moz-transition-duration: 0.35s;
     -o-transition-duration: 0.35s;
@@ -792,7 +792,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 77, ../sass/mobile/_layout.scss */
+  /* line 83, ../sass/mobile/_layout.scss */
   .browse-showtree .mobile-pane.left-menu {
     -moz-transition-duration: 0.35s;
     -o-transition-duration: 0.35s;
@@ -816,23 +816,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 77, ../sass/mobile/_layout.scss */
+  /* line 83, ../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 77, ../sass/mobile/_layout.scss */
+  /* line 83, ../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 77, ../sass/mobile/_layout.scss */
+  /* line 83, ../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 77, ../sass/mobile/_layout.scss */
+  /* line 83, ../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 98, ../sass/mobile/_layout.scss */
+  /* line 108, ../sass/mobile/_layout.scss */
   .browse-showtree .mobile-pane.right-repr {
     -moz-transition-duration: 0.35s;
     -o-transition-duration: 0.35s;
@@ -842,24 +842,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 98, ../sass/mobile/_layout.scss */
+  /* line 108, ../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 98, ../sass/mobile/_layout.scss */
+  /* line 108, ../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 98, ../sass/mobile/_layout.scss */
+  /* line 108, ../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 98, ../sass/mobile/_layout.scss */
+  /* line 108, ../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 119, ../sass/mobile/_layout.scss */
+  /* line 131, ../sass/mobile/_layout.scss */
   .button-pos {
     position: absolute;
     -moz-transition-duration: 0.35s;
@@ -870,23 +870,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 129, ../sass/mobile/_layout.scss */
+  /* line 141, ../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 129, ../sass/mobile/_layout.scss */
+  /* line 141, ../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 141, ../sass/mobile/_layout.scss */
+  /* line 153, ../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 148, ../sass/mobile/_layout.scss */
+  /* line 160, ../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 2dd23415b9..9d2ee8c87d 100644
--- a/platform/commonUI/general/res/css/tree.css
+++ b/platform/commonUI/general/res/css/tree.css
@@ -307,13 +307,7 @@ ul.tree {
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 @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 22, ../sass/mobile/_tree.scss */
-  .test-tree-words {
-    width: 100%;
-    text-overflow: ellipsis; } }
-
-@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 29, ../sass/mobile/_tree.scss */
+  /* line 24, ../sass/mobile/_tree.scss */
   ul.tree {
     margin: 0;
     padding: 0; }
@@ -322,27 +316,20 @@ ul.tree {
       list-style-type: none;
       margin: 0;
       padding: 0; }
-    /* line 33, ../sass/mobile/_tree.scss */
+    /* line 29, ../sass/mobile/_tree.scss */
     ul.tree li span.tree-item {
       margin-top: 3px; }
-      /* line 39, ../sass/mobile/_tree.scss */
-      ul.tree li span.tree-item .label {
-        left: 3px; }
-        /* line 43, ../sass/mobile/_tree.scss */
-        ul.tree li span.tree-item .label .type-icon .alert {
-          right: auto;
-          left: 9px; }
-        /* line 48, ../sass/mobile/_tree.scss */
-        ul.tree li span.tree-item .label .title-label {
-          left: 20px; }
-      /* line 53, ../sass/mobile/_tree.scss */
-      ul.tree li span.tree-item .context-trigger {
-        right: 3px; }
-      /* line 57, ../sass/mobile/_tree.scss */
+      /* line 32, ../sass/mobile/_tree.scss */
       ul.tree li span.tree-item .view-control {
         position: absolute;
         right: 5px;
         font-size: 1.5em; }
-    /* line 66, ../sass/mobile/_tree.scss */
+      /* line 38, ../sass/mobile/_tree.scss */
+      ul.tree li span.tree-item .label {
+        left: 3px; }
+        /* line 44, ../sass/mobile/_tree.scss */
+        ul.tree li span.tree-item .label .title-label {
+          right: 5px; }
+    /* line 53, ../sass/mobile/_tree.scss */
     ul.tree ul.tree {
       margin-left: 3px; } }
diff --git a/platform/commonUI/general/res/sass/mobile/_layout.scss b/platform/commonUI/general/res/sass/mobile/_layout.scss
index 667e2949c4..e2699b62c6 100644
--- a/platform/commonUI/general/res/sass/mobile/_layout.scss
+++ b/platform/commonUI/general/res/sass/mobile/_layout.scss
@@ -47,6 +47,8 @@
 // classes used for the left menu and the
 // right representation.
 .browse-hidetree {
+    // Sets the left tree menu when the tree
+    // is hidden. 
     .mobile-pane.left-menu {
         @include phoneandtablet {
             @include slMenuTransitions;
@@ -59,6 +61,8 @@
         }
     }
 
+    // Sets the right represenation when
+    // the tree is hidden. 
     .mobile-pane.right-repr {       
         @include phoneandtablet {         
             @include slMenuTransitions;
@@ -74,6 +78,8 @@
 // orientation combination, separate 
 // parameters are used)
 .browse-showtree {
+    // Sets the left tree menu when the tree
+    // is shown.     
     .mobile-pane.left-menu {
         @include phoneandtablet {
             @include slMenuTransitions;
@@ -82,6 +88,8 @@
             display: block !important;
             width: auto !important;
         }
+        // On both phones and tablets, the amount of
+        // space allowed for the right pane is specified
         @include phonePortrait {
             right: $phoneRepSizePortrait !important;
         }
@@ -95,11 +103,15 @@
             right: $tabletRepSizeLandscape !important;
         }
     }
+    // Sets the right represenation when
+    // the tree is shown.     
     .mobile-pane.right-repr {
         @include phoneandtablet {
             @include slMenuTransitions;
             left: auto !important;
         }
+        // On both phones and tablets, the width of
+        // the right pane is specified
         @include phonePortrait {
             width: $phoneRepSizePortrait !important;
         }
diff --git a/platform/commonUI/general/res/sass/mobile/_tree.scss b/platform/commonUI/general/res/sass/mobile/_tree.scss
index c50d9f71d1..c0806a806c 100644
--- a/platform/commonUI/general/res/sass/mobile/_tree.scss
+++ b/platform/commonUI/general/res/sass/mobile/_tree.scss
@@ -19,50 +19,37 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-.test-tree-words {
-    @include phoneandtablet {
-        width: 100%;
-        text-overflow: ellipsis;
-    }
-}
+
 
 ul.tree {
+    // Only applies to phones and tablets
     @include phoneandtablet {
         @include menuUlReset();
         li {
             span.tree-item {
-                $runningItemW: 0;
-                $customMargin: auto;
-                $runningItemW: $interiorMargin + $treeVCW;
+                // Adds some space to the top of each tree item
                 margin-top: $interiorMarginSm;
-
-                .label {
-                    left: 3px;
-
-                    .type-icon {
-                        .alert {
-                            right: auto;
-                            left: 9px;
-                        }
-                    }
-                    .title-label {
-                        left: $runningItemW + ($interiorMargin);
-                    }
-                }
-
-                .context-trigger {
-                    right: $interiorMarginSm;
-                }
-                
                 .view-control {
                     position: absolute;
                     right: 5px;
                     font-size: 1.5em;
-                    $runningItemW: $interiorMargin + $treeVCW;
-                }                
+                }                   
+
+                .label {
+                    // Designates the starting left margin
+                    // (indentation) of 'My Items'
+                    left: 3px;
+                    // Allows tree item name to stop prior
+                    // to the arrow
+                    .title-label {
+                        right: 5px;
+                    }                    
+                }             
             }
         }
 
+        // Sets the margin on the left, which causes the
+        // running indentation after each folder is made
         ul.tree {
             margin-left: 3px;
         }
diff --git a/platform/commonUI/general/res/templates/tree-node.html b/platform/commonUI/general/res/templates/tree-node.html
index 03b6808dca..6f791cfa75 100644
--- a/platform/commonUI/general/res/templates/tree-node.html
+++ b/platform/commonUI/general/res/templates/tree-node.html
@@ -22,7 +22,7 @@
 <span ng-controller="ToggleController as toggle">
     <span ng-controller="TreeNodeController as treeNode">
         <span
-	        class="tree-item menus-to-left test-tree-words"
+	        class="tree-item menus-to-left"
 	        ng-class="{selected: treeNode.isSelected()}"
 	        >
             <mct-representation                                
diff --git a/platform/commonUI/general/src/services/QueryService.js b/platform/commonUI/general/src/services/QueryService.js
index 11b278f7a8..90c8aed53a 100644
--- a/platform/commonUI/general/src/services/QueryService.js
+++ b/platform/commonUI/general/src/services/QueryService.js
@@ -25,37 +25,29 @@
  * Module defining QueryService.
  */
 
-var phoMaxWidth = 514,
-    phoMaxHeight = 740,
-
-    tabMinWidth = 515,
-    tabMaxWidth = 799,
-
-    tabMinHeight = 741,
-    tabMaxHeight = 1024,
-
-    compMinWidth = 800,
-    compMinHeight = 1025;
-
 define(
     [],
     function () {
         "use strict";
 
         /**
-         * The url service handles calls for url paths
-         * using domain objects.
+         * The query service handles calls for browser and userAgent
+         * info using a comparison between the userAgent and key
+         * device names
          */
         function QueryService($window) {
             
-            
-            
+            // Gets the UA name if it is one of the following.
+            // If it is not (a desktop for example) nothing is
+            // returned instead
             function getDeviceUA() {
                 var ua = navigator.userAgent;
                 return ua.match(/iPad|iPhone|Android/i) ?
                         ua.match(/iPad|iPhone|Android/i) : "";
             }
             
+            // Checks if gotten device is mobile,
+            // Mobile is defined as a phone or tablet
             function isMobile() {
                 if (getDeviceUA()) {
                     return true;
@@ -64,18 +56,27 @@ define(
                 }
             }
 
-            
+            // Returns the orientation of the device based on the
+            // device's window dimensions
             function getOrientation(screenWidth, screenHeight) {
-                if ($window.screen.width > $window.screen.height) {
+                if ($window.outerWidth > $window.outerHeight) {
                     return "landscape";
-                } else if ($window.screen.width < $window.screen.height) {
+                } else if ($window.outerWidth < $window.outerHeight) {
                     return "portrait";
                 }
             }
          
             return {
+                /**
+                 * Returns the orientation for the user's device
+                 */
                 getOrientation: getOrientation,
                 
+                /**
+                 * Returns the a boolean checking if the user is
+                 * on a mobile or non-mobile device. (mobile: true,
+                 * non-mobile: false)
+                 */
                 isMobile: isMobile
             };
         }
diff --git a/platform/commonUI/inspect/src/gestures/InfoGesture.js b/platform/commonUI/inspect/src/gestures/InfoGesture.js
index c40a2baac2..67ff6cd4a5 100644
--- a/platform/commonUI/inspect/src/gestures/InfoGesture.js
+++ b/platform/commonUI/inspect/src/gestures/InfoGesture.js
@@ -76,7 +76,8 @@ define(
                 element.on('mousemove', trackPosition);
 
                 // Checks if you are on a mobile device, if the device is
-                // mobile, then hovering is not done.
+                // not mobile (queryService.isMobile() = false), then
+                // the pendingBubble and therefore hovering is allowed
                 if (!queryService.isMobile()) {
                     // Show the bubble, after a suitable delay (if mouse has
                     // left before this time is up, this will be canceled.)

From 7aba3b6672e6d2b41d9d3040f1132510bbae910f Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Wed, 22 Jul 2015 12:53:49 -0700
Subject: [PATCH 082/209] [Mobile] Clean Up

Removed gap below bottom bar. Moved
around constants for the resizing
of the tree. Also added comments in
layout and reformatted that slightly.
---
 .../commonUI/browse/res/templates/browse.html | 53 +++++++++----------
 platform/commonUI/general/res/css/forms.css   |  1 +
 platform/commonUI/general/res/css/items.css   |  1 +
 .../general/res/css/theme-espresso.css        | 41 +++++++-------
 platform/commonUI/general/res/css/tree.css    | 20 ++++---
 .../general/res/sass/mobile/_constants.scss   |  5 ++
 .../general/res/sass/mobile/_layout.scss      |  3 +-
 .../general/res/sass/mobile/_tree.scss        | 13 +++--
 8 files changed, 74 insertions(+), 63 deletions(-)

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.
 -->
 
-<div ng-controller="BrowseController">
-    <div content="jquery-wrapper" class="abs holder-all browse-mode">
-        <mct-include key="'topbar-browse'"></mct-include>
-        <div class="holder browse-area s-browse-area abs browse-wrapper" ng-class="treeClass ? 'browse-showtree' : 'browse-hidetree'">
-            <mct-split-pane class='contents abs' anchor='left'>
-                <div class='split-pane-component treeview pane mobile-pane left-menu desktop-browse'>  
-                    <div class='holder tree-holder abs'>
-                        <mct-representation key="'tree'"
-                                            mct-object="domainObject"
-                                            ng-model="treeModel">
-                        </mct-representation>
-                    </div>
-                        <mct-representation key="'create-button'" mct-object="navigatedObject">
-                        </mct-representation>
+<div content="jquery-wrapper" class="abs holder-all browse-mode" ng-controller="BrowseController">
+    <mct-include key="'topbar-browse'"></mct-include>
+    <div class="holder browse-area s-browse-area abs browse-wrapper" ng-class="treeClass ? 'browse-showtree' : 'browse-hidetree'">
+        <mct-split-pane class='contents abs' anchor='left'>
+            <div class='split-pane-component treeview pane mobile-pane left-menu desktop-browse'>  
+                <div class='holder tree-holder abs'>
+                    <mct-representation key="'tree'"
+                                        mct-object="domainObject"
+                                        ng-model="treeModel">
+                    </mct-representation>
                 </div>
-                
-                <mct-splitter class="mobile-hide"></mct-splitter>
-                        <div class='split-pane-component items pane mobile-pane right-repr'>
-                            <div class='holder abs' id='content-area'>
-                                <mct-representation mct-object="navigatedObject" key="'browse-object'">
-                                </mct-representation>
-                            </div>
-                        <div class="left s-very-subtle key-properties ui-symbol mobile-menu-icon button-pos" 
-                            ng-click="treeSlide()">m</div>                        
-                        </div>   
-            </mct-split-pane>
-        </div>
-        <mct-include key="'bottombar'"></mct-include>
+                    <mct-representation key="'create-button'" mct-object="navigatedObject">
+                    </mct-representation>
+            </div>
+
+            <mct-splitter class="mobile-hide"></mct-splitter>
+                    <div class='split-pane-component items pane mobile-pane right-repr'>
+                        <div class='holder abs' id='content-area'>
+                            <mct-representation mct-object="navigatedObject" key="'browse-object'">
+                            </mct-representation>
+                        </div>
+                    <div class="left s-very-subtle key-properties ui-symbol mobile-menu-icon button-pos" 
+                        ng-click="treeSlide()">m</div>                        
+                    </div>   
+        </mct-split-pane>
     </div>
+    <mct-include key="'bottombar'"></mct-include>
 </div>
+
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;
         }
     }
 }

From 1f7ba70ad78c8063a4d32a0e5640cd92c8865c4c Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Wed, 22 Jul 2015 15:21:34 -0700
Subject: [PATCH 083/209] [Mobile] Scroll Bug

Removed scrollbar that appears in landscape
mode in tree menu.
---
 platform/commonUI/general/res/css/theme-espresso.css   | 5 +++++
 platform/commonUI/general/res/sass/mobile/_layout.scss | 6 ++++++
 2 files changed, 11 insertions(+)

diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index d0eb24d149..07e5d6e54d 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -889,6 +889,11 @@ mct-container {
   .phone-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), 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 165, ../sass/mobile/_layout.scss */
+  .tree-holder {
+    overflow-x: hidden !important; } }
+
 /*****************************************************************************
 * Open MCT Web, Copyright (c) 2014-2015, United States Government
 * as represented by the Administrator of the National Aeronautics and Space
diff --git a/platform/commonUI/general/res/sass/mobile/_layout.scss b/platform/commonUI/general/res/sass/mobile/_layout.scss
index c727c63ef6..56d0191035 100644
--- a/platform/commonUI/general/res/sass/mobile/_layout.scss
+++ b/platform/commonUI/general/res/sass/mobile/_layout.scss
@@ -161,3 +161,9 @@
         display: none;
     }
 }
+
+.tree-holder {
+    @include phoneandtablet {
+        overflow-x: hidden !important;
+    }
+}

From b3bc8b6876339e091e1f4575e6277d22602e4664 Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Thu, 23 Jul 2015 09:28:36 -0700
Subject: [PATCH 084/209] [Mobile[ Tests

Added jasmine test for

QUerySerivce and adjusted
the InfoGestureSpec to
account for use of
QueryService.
---
 .../general/src/services/QueryService.js      |  2 +-
 .../general/test/services/QueryServiceSpec.js | 69 +++++++++++++++++++
 .../general/test/services/UrlServiceSpec.js   |  2 +-
 platform/commonUI/general/test/suite.json     |  1 +
 .../inspect/test/gestures/InfoGestureSpec.js  |  3 +
 5 files changed, 75 insertions(+), 2 deletions(-)
 create mode 100644 platform/commonUI/general/test/services/QueryServiceSpec.js

diff --git a/platform/commonUI/general/src/services/QueryService.js b/platform/commonUI/general/src/services/QueryService.js
index 90c8aed53a..f5352c9e69 100644
--- a/platform/commonUI/general/src/services/QueryService.js
+++ b/platform/commonUI/general/src/services/QueryService.js
@@ -58,7 +58,7 @@ define(
 
             // Returns the orientation of the device based on the
             // device's window dimensions
-            function getOrientation(screenWidth, screenHeight) {
+            function getOrientation() {
                 if ($window.outerWidth > $window.outerHeight) {
                     return "landscape";
                 } else if ($window.outerWidth < $window.outerHeight) {
diff --git a/platform/commonUI/general/test/services/QueryServiceSpec.js b/platform/commonUI/general/test/services/QueryServiceSpec.js
new file mode 100644
index 0000000000..8469d21fe1
--- /dev/null
+++ b/platform/commonUI/general/test/services/QueryServiceSpec.js
@@ -0,0 +1,69 @@
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+/*global define,Promise,describe,it,expect,beforeEach,waitsFor,jasmine*/
+
+/**
+ * MCTRepresentationSpec. Created by vwoeltje on 11/6/14.
+ */
+define(
+    ["../../src/services/QueryService"],
+    function (QueryService) {
+        "use strict";
+
+        describe("The url service", function () {
+            var queryService,
+                mockWindow,
+                mockNavigator;
+
+            beforeEach(function () {
+                // Creates a mockLocation, used to 
+                // do the view search
+                mockWindow = jasmine.createSpyObj(
+                    "$window",
+                    [ "outerWidth", "outerHeight" ]
+                );
+                
+                mockNavigator = jasmine.createSpyObj(
+                    "navigator",
+                    [ "userAgent" ]
+                );
+                
+                queryService = new QueryService(mockWindow);
+            });
+            
+            it("get current device user agent", function () {
+                queryService.isMobile();
+                mockNavigator.userAgent = "Mozilla/5.0 (iPad; CPU OS 7_0 like Mac OS X) AppleWebKit/537.51.1 (KHTML, like Gecko) Version/7.0 Mobile/11A465 Safari/9537.53";
+                queryService.isMobile();
+            });
+            
+            it("get orientation of the current device", function () {
+                mockWindow.outerWidth = 768;
+                mockWindow.outerHeight = 1024;
+                queryService.getOrientation();
+                mockWindow.outerWidth = 1024;
+                mockWindow.outerHeight = 768;
+                queryService.getOrientation();
+            });
+        });
+    }
+);
\ No newline at end of file
diff --git a/platform/commonUI/general/test/services/UrlServiceSpec.js b/platform/commonUI/general/test/services/UrlServiceSpec.js
index daff0c5448..f8526c4b5b 100644
--- a/platform/commonUI/general/test/services/UrlServiceSpec.js
+++ b/platform/commonUI/general/test/services/UrlServiceSpec.js
@@ -91,7 +91,7 @@ define(
             
             it("get url for a new tab using domainObject and mode", function () {
                 urlService.urlForNewTab(mockMode, mockDomainObject);
-            });            
+            });
         });
     }
 );
\ No newline at end of file
diff --git a/platform/commonUI/general/test/suite.json b/platform/commonUI/general/test/suite.json
index 37fc4c4b78..08240b6044 100644
--- a/platform/commonUI/general/test/suite.json
+++ b/platform/commonUI/general/test/suite.json
@@ -13,6 +13,7 @@
     "directives/MCTDrag",
     "directives/MCTResize",
     "directives/MCTScroll",
+    "services/QueryService",
     "services/UrlService",
     "StyleSheetLoader"
 ]
\ No newline at end of file
diff --git a/platform/commonUI/inspect/test/gestures/InfoGestureSpec.js b/platform/commonUI/inspect/test/gestures/InfoGestureSpec.js
index 44f2b1e54b..a9a83eeb5a 100644
--- a/platform/commonUI/inspect/test/gestures/InfoGestureSpec.js
+++ b/platform/commonUI/inspect/test/gestures/InfoGestureSpec.js
@@ -28,6 +28,7 @@ define(
 
         describe("The info gesture", function () {
             var mockTimeout,
+                mockQueryService,
                 mockInfoService,
                 testDelay = 12321,
                 mockElement,
@@ -50,6 +51,7 @@ define(
             beforeEach(function () {
                 mockTimeout = jasmine.createSpy('$timeout');
                 mockTimeout.cancel = jasmine.createSpy('cancel');
+                mockQueryService = jasmine.createSpyObj('queryService', ['isMobile']);
                 mockInfoService = jasmine.createSpyObj(
                     'infoService',
                     [ 'display' ]
@@ -79,6 +81,7 @@ define(
 
                 gesture = new InfoGesture(
                     mockTimeout,
+                    mockQueryService,
                     mockInfoService,
                     testDelay,
                     mockElement,

From 143e3eeb6c8098cad5dd650b38ff14d62d926b83 Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Thu, 23 Jul 2015 13:19:58 -0700
Subject: [PATCH 085/209] [Mobile] CleanUp/Tests

Added tests inside spec files
for the QueryService, TreeNodeController,
and InfoGesture. Also cleaned up the
tree so that padding is used between
buttons instead of margins.
---
 platform/commonUI/general/res/css/tree.css        | 15 +++++++++------
 .../commonUI/general/res/sass/mobile/_layout.scss |  2 +-
 .../commonUI/general/res/sass/mobile/_tree.scss   |  7 +++++--
 .../general/src/controllers/TreeNodeController.js |  2 +-
 .../commonUI/general/src/services/QueryService.js |  7 +++----
 .../test/controllers/TreeNodeControllerSpec.js    |  8 +++++++-
 .../general/test/services/QueryServiceSpec.js     |  6 ++++--
 .../commonUI/inspect/src/gestures/InfoGesture.js  |  2 +-
 8 files changed, 31 insertions(+), 18 deletions(-)

diff --git a/platform/commonUI/general/res/css/tree.css b/platform/commonUI/general/res/css/tree.css
index fb80f74fd0..1c8523eb62 100644
--- a/platform/commonUI/general/res/css/tree.css
+++ b/platform/commonUI/general/res/css/tree.css
@@ -321,19 +321,22 @@ ul.tree {
     ul.tree li span.tree-item {
       height: 38px;
       line-height: 38px;
-      margin-top: 3px; }
-      /* line 34, ../sass/mobile/_tree.scss */
+      padding-top: 3px;
+      padding-bottom: 3px;
+      margin-bottom: 0px; }
+      /* line 36, ../sass/mobile/_tree.scss */
       ul.tree li span.tree-item .view-control {
         position: absolute;
         right: 13px;
         font-size: 1.8em; }
-      /* line 40, ../sass/mobile/_tree.scss */
+      /* line 42, ../sass/mobile/_tree.scss */
       ul.tree li span.tree-item .label {
         left: 3px;
         font-size: 1.2em; }
-        /* line 47, ../sass/mobile/_tree.scss */
+        /* line 49, ../sass/mobile/_tree.scss */
         ul.tree li span.tree-item .label .title-label {
           right: 16.9px; }
-    /* line 56, ../sass/mobile/_tree.scss */
+    /* line 58, ../sass/mobile/_tree.scss */
     ul.tree ul.tree {
-      margin-left: 3px; } }
+      margin-left: 0px;
+      padding-left: 3px; } }
diff --git a/platform/commonUI/general/res/sass/mobile/_layout.scss b/platform/commonUI/general/res/sass/mobile/_layout.scss
index 56d0191035..7d69b98460 100644
--- a/platform/commonUI/general/res/sass/mobile/_layout.scss
+++ b/platform/commonUI/general/res/sass/mobile/_layout.scss
@@ -21,7 +21,7 @@
  *****************************************************************************/
 
 // Wrapper of the entire 2 panes, only enacted on
-// phone and tablet. Also for the panes
+// phone and tablet.
 .browse-wrapper,
 .mobile-pane {
     @include phoneandtablet {
diff --git a/platform/commonUI/general/res/sass/mobile/_tree.scss b/platform/commonUI/general/res/sass/mobile/_tree.scss
index 2137429ca7..6d5273f56f 100644
--- a/platform/commonUI/general/res/sass/mobile/_tree.scss
+++ b/platform/commonUI/general/res/sass/mobile/_tree.scss
@@ -30,7 +30,9 @@ ul.tree {
                 // Adds some space to the top of each tree item
                 height: $mobile-treeHeight;
                 line-height: $mobile-treeHeight;
-                margin-top: $interiorMarginSm;
+                padding-top: $interiorMarginSm;
+                padding-bottom: $interiorMarginSm;
+                margin-bottom: 0px;
                 .view-control {
                     position: absolute;
                     right: $mobile-treeRight;
@@ -54,7 +56,8 @@ ul.tree {
         // Sets the margin on the left, which causes the
         // running indentation after each folder is made
         ul.tree {
-            margin-left: $mobile-treeLeft;
+            margin-left: 0px;
+            padding-left: $mobile-treeLeft;
         }
     }
 }
diff --git a/platform/commonUI/general/src/controllers/TreeNodeController.js b/platform/commonUI/general/src/controllers/TreeNodeController.js
index 2a219fa499..43cc671a20 100644
--- a/platform/commonUI/general/src/controllers/TreeNodeController.js
+++ b/platform/commonUI/general/src/controllers/TreeNodeController.js
@@ -88,7 +88,7 @@ define(
             }
             
             function checkMobile() {
-                return queryService.isMobile();
+                return queryService.isMobile(navigator.userAgent);
             }
             
             // Consider the currently-navigated object and update
diff --git a/platform/commonUI/general/src/services/QueryService.js b/platform/commonUI/general/src/services/QueryService.js
index f5352c9e69..9d9b13989b 100644
--- a/platform/commonUI/general/src/services/QueryService.js
+++ b/platform/commonUI/general/src/services/QueryService.js
@@ -40,16 +40,15 @@ define(
             // Gets the UA name if it is one of the following.
             // If it is not (a desktop for example) nothing is
             // returned instead
-            function getDeviceUA() {
-                var ua = navigator.userAgent;
+            function getDeviceUA(ua) {
                 return ua.match(/iPad|iPhone|Android/i) ?
                         ua.match(/iPad|iPhone|Android/i) : "";
             }
             
             // Checks if gotten device is mobile,
             // Mobile is defined as a phone or tablet
-            function isMobile() {
-                if (getDeviceUA()) {
+            function isMobile(ua) {
+                if (getDeviceUA(ua)) {
                     return true;
                 } else {
                     return false;
diff --git a/platform/commonUI/general/test/controllers/TreeNodeControllerSpec.js b/platform/commonUI/general/test/controllers/TreeNodeControllerSpec.js
index ab468ad7a7..394d71b88a 100644
--- a/platform/commonUI/general/test/controllers/TreeNodeControllerSpec.js
+++ b/platform/commonUI/general/test/controllers/TreeNodeControllerSpec.js
@@ -29,6 +29,7 @@ define(
         describe("The tree node controller", function () {
             var mockScope,
                 mockTimeout,
+                mockQueryService,
                 controller;
 
             function TestObject(id, context) {
@@ -43,7 +44,8 @@ define(
             beforeEach(function () {
                 mockScope = jasmine.createSpyObj("$scope", ["$watch", "$on"]);
                 mockTimeout = jasmine.createSpy("$timeout");
-                controller = new TreeNodeController(mockScope, mockTimeout);
+                mockQueryService = jasmine.createSpyObj("queryService", ["isMobile"]);
+                controller = new TreeNodeController(mockScope, mockTimeout, mockQueryService);
             });
 
             it("allows tracking of expansion state", function () {
@@ -183,6 +185,10 @@ define(
                 expect(controller.isSelected()).toBeFalsy();
 
             });
+            
+            it("check if tree node is in a mobile device", function () {
+                controller.checkMobile();
+            });
         });
     }
 );
\ No newline at end of file
diff --git a/platform/commonUI/general/test/services/QueryServiceSpec.js b/platform/commonUI/general/test/services/QueryServiceSpec.js
index 8469d21fe1..7caf551029 100644
--- a/platform/commonUI/general/test/services/QueryServiceSpec.js
+++ b/platform/commonUI/general/test/services/QueryServiceSpec.js
@@ -51,15 +51,17 @@ define(
             });
             
             it("get current device user agent", function () {
-                queryService.isMobile();
+                mockNavigator.userAgent = "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/44.0.2403.89 Safari/537.36";
+                queryService.isMobile(mockNavigator.userAgent);
                 mockNavigator.userAgent = "Mozilla/5.0 (iPad; CPU OS 7_0 like Mac OS X) AppleWebKit/537.51.1 (KHTML, like Gecko) Version/7.0 Mobile/11A465 Safari/9537.53";
-                queryService.isMobile();
+                queryService.isMobile(mockNavigator.userAgent);
             });
             
             it("get orientation of the current device", function () {
                 mockWindow.outerWidth = 768;
                 mockWindow.outerHeight = 1024;
                 queryService.getOrientation();
+                
                 mockWindow.outerWidth = 1024;
                 mockWindow.outerHeight = 768;
                 queryService.getOrientation();
diff --git a/platform/commonUI/inspect/src/gestures/InfoGesture.js b/platform/commonUI/inspect/src/gestures/InfoGesture.js
index 67ff6cd4a5..483216d838 100644
--- a/platform/commonUI/inspect/src/gestures/InfoGesture.js
+++ b/platform/commonUI/inspect/src/gestures/InfoGesture.js
@@ -78,7 +78,7 @@ define(
                 // Checks if you are on a mobile device, if the device is
                 // not mobile (queryService.isMobile() = false), then
                 // the pendingBubble and therefore hovering is allowed
-                if (!queryService.isMobile()) {
+                if (!queryService.isMobile(navigator.userAgent)) {
                     // Show the bubble, after a suitable delay (if mouse has
                     // left before this time is up, this will be canceled.)
                     pendingBubble = $timeout(function () {

From d176f9f8110898eb749a9318da2be5a28494c0c1 Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Thu, 23 Jul 2015 13:46:46 -0700
Subject: [PATCH 086/209] [Mobile] Test

Fixed BrowseControllerSpec.js to
account for the .treeslide
call and added a new test for thatasds
---
 platform/commonUI/browse/test/BrowseControllerSpec.js | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/platform/commonUI/browse/test/BrowseControllerSpec.js b/platform/commonUI/browse/test/BrowseControllerSpec.js
index ce9296c239..ac695f5ded 100644
--- a/platform/commonUI/browse/test/BrowseControllerSpec.js
+++ b/platform/commonUI/browse/test/BrowseControllerSpec.js
@@ -52,7 +52,7 @@ define(
             beforeEach(function () {
                 mockScope = jasmine.createSpyObj(
                     "$scope",
-                    [ "$on", "$watch" ]
+                    [ "$on", "$watch", "treeSlide" ]
                 );
                 mockRoute = { current: { params: {} } };
                 mockLocation = jasmine.createSpyObj(
@@ -145,6 +145,11 @@ define(
                 );
                 expect(mockScope.navigatedObject).toEqual(mockDomainObject);
             });
+            
+            it("updates boolean", function () {
+//                spyOn(mockScope, 'treeSlide').andCallThrough();
+                mockScope.treeSlide();
+            });
 
             it("releases its navigation listener when its scope is destroyed", function () {
                 expect(mockScope.$on).toHaveBeenCalledWith(

From d115166dde7ab03706f8f8dd8f1caf186b02d25e Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Thu, 23 Jul 2015 13:48:21 -0700
Subject: [PATCH 087/209] [Mobile] Comments

Added comments and removed
unwanted spec test code for
BrowseController.
---
 platform/commonUI/browse/test/BrowseControllerSpec.js | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/platform/commonUI/browse/test/BrowseControllerSpec.js b/platform/commonUI/browse/test/BrowseControllerSpec.js
index ac695f5ded..b61a856d41 100644
--- a/platform/commonUI/browse/test/BrowseControllerSpec.js
+++ b/platform/commonUI/browse/test/BrowseControllerSpec.js
@@ -146,8 +146,10 @@ define(
                 expect(mockScope.navigatedObject).toEqual(mockDomainObject);
             });
             
-            it("updates boolean", function () {
-//                spyOn(mockScope, 'treeSlide').andCallThrough();
+            // Mocks the tree slide call that
+            // lets the html code know if the
+            // tree menu is open.
+            it("calls the treeSlide function", function () {
                 mockScope.treeSlide();
             });
 

From b592b89dc87d1821920b8982356b155f5e453591 Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Thu, 23 Jul 2015 14:15:01 -0700
Subject: [PATCH 088/209] [Mobile] Clean Up

Removed unnecessary transitions.:
---
 .../general/res/css/theme-espresso.css        | 48 ++++++-------------
 .../general/res/sass/mobile/_layout.scss      |  6 +--
 2 files changed, 17 insertions(+), 37 deletions(-)

diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index 07e5d6e54d..6e44bf8f39 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -736,7 +736,7 @@ mct-container {
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 @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 25, ../sass/mobile/_layout.scss */
+  /* line 26, ../sass/mobile/_layout.scss */
   .browse-wrapper,
   .mobile-pane {
     position: absolute;
@@ -746,21 +746,15 @@ mct-container {
     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 37, ../sass/mobile/_layout.scss */
+  /* line 38, ../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 51, ../sass/mobile/_layout.scss */
+  /* line 52, ../sass/mobile/_layout.scss */
   .browse-hidetree .mobile-pane.left-menu {
-    -moz-transition-duration: 0.35s;
-    -o-transition-duration: 0.35s;
-    -webkit-transition-duration: 0.35s;
-    transition-duration: 0.35s;
-    transition-timing-function: ease;
-    backface-visibility: hidden;
     -moz-transition-property: opacity;
     -o-transition-property: opacity;
     -webkit-transition-property: opacity;
@@ -793,12 +787,6 @@ mct-container {
 @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 82, ../sass/mobile/_layout.scss */
   .browse-showtree .mobile-pane.left-menu {
-    -moz-transition-duration: 0.35s;
-    -o-transition-duration: 0.35s;
-    -webkit-transition-duration: 0.35s;
-    transition-duration: 0.35s;
-    transition-timing-function: ease;
-    backface-visibility: hidden;
     -moz-transition-property: opacity;
     -o-transition-property: opacity;
     -webkit-transition-property: opacity;
@@ -831,7 +819,7 @@ mct-container {
   .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 107, ../sass/mobile/_layout.scss */
+  /* line 106, ../sass/mobile/_layout.scss */
   .browse-showtree .mobile-pane.right-repr {
     -moz-transition-duration: 0.35s;
     -o-transition-duration: 0.35s;
@@ -841,56 +829,50 @@ 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 107, ../sass/mobile/_layout.scss */
+  /* line 106, ../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 107, ../sass/mobile/_layout.scss */
+  /* line 106, ../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 107, ../sass/mobile/_layout.scss */
+  /* line 106, ../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 107, ../sass/mobile/_layout.scss */
+  /* line 106, ../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 130, ../sass/mobile/_layout.scss */
+  /* line 129, ../sass/mobile/_layout.scss */
   .button-pos {
-    position: absolute;
-    -moz-transition-duration: 0.35s;
-    -o-transition-duration: 0.35s;
-    -webkit-transition-duration: 0.35s;
-    transition-duration: 0.35s;
-    transition-timing-function: ease;
-    backface-visibility: hidden; } }
+    position: absolute; } }
 
 @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 140, ../sass/mobile/_layout.scss */
+  /* line 138, ../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 140, ../sass/mobile/_layout.scss */
+  /* line 138, ../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 152, ../sass/mobile/_layout.scss */
+  /* line 150, ../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 159, ../sass/mobile/_layout.scss */
+  /* line 157, ../sass/mobile/_layout.scss */
   .phone-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), 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 165, ../sass/mobile/_layout.scss */
+  /* line 163, ../sass/mobile/_layout.scss */
   .tree-holder {
     overflow-x: hidden !important; } }
 
diff --git a/platform/commonUI/general/res/sass/mobile/_layout.scss b/platform/commonUI/general/res/sass/mobile/_layout.scss
index 7d69b98460..a70944f038 100644
--- a/platform/commonUI/general/res/sass/mobile/_layout.scss
+++ b/platform/commonUI/general/res/sass/mobile/_layout.scss
@@ -21,7 +21,8 @@
  *****************************************************************************/
 
 // Wrapper of the entire 2 panes, only enacted on
-// phone and tablet.
+// phone and tablet. Also for the panes
+
 .browse-wrapper,
 .mobile-pane {
     @include phoneandtablet {
@@ -50,7 +51,6 @@
     // is hidden. 
     .mobile-pane.left-menu {
         @include phoneandtablet {
-            @include slMenuTransitions;
             @include trans-prop-nice(opacity, .4s);
             opacity: 0;
             right: 100% !important;
@@ -81,7 +81,6 @@
     // is shown.     
     .mobile-pane.left-menu {
         @include phoneandtablet {
-            @include slMenuTransitions;
             @include trans-prop-nice(opacity, .4s);
             opacity: 1;
             display: block !important;
@@ -130,7 +129,6 @@
 .button-pos {
     @include phoneandtablet {
         position: absolute;
-        @include slMenuTransitions;
     }
 }
 

From 7993e4c03f3e57c4a9ea3527293fea53431ac6d1 Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Thu, 23 Jul 2015 15:01:14 -0700
Subject: [PATCH 089/209] [Mobile] Gestures

Removed the hover coloring on
the tree menu on mobile by changing
original** scss code. Also added
check in ContextMenuGesture that
will only allow context menu to appear
in non-mobile browser.
---
 platform/commonUI/general/res/css/tree.css    | 58 ++++++++++---------
 .../commonUI/general/res/sass/tree/_tree.scss | 32 +++++-----
 2 files changed, 49 insertions(+), 41 deletions(-)

diff --git a/platform/commonUI/general/res/css/tree.css b/platform/commonUI/general/res/css/tree.css
index 1c8523eb62..8b3b6125dd 100644
--- a/platform/commonUI/general/res/css/tree.css
+++ b/platform/commonUI/general/res/css/tree.css
@@ -180,10 +180,11 @@ ul.tree {
         margin-left: 5px;
         font-size: 0.75em;
         width: 10px; }
-        /* line 44, ../sass/tree/_tree.scss */
-        ul.tree li span.tree-item .view-control:hover {
-          color: #ffc700; }
-      /* line 49, ../sass/tree/_tree.scss */
+        @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
+          /* line 46, ../sass/tree/_tree.scss */
+          ul.tree li span.tree-item .view-control:hover {
+            color: #ffc700; } }
+      /* line 52, ../sass/tree/_tree.scss */
       ul.tree li span.tree-item .label {
         display: block;
         overflow: hidden;
@@ -195,7 +196,7 @@ ul.tree {
         width: auto;
         height: auto;
         left: 20px; }
-        /* line 55, ../sass/tree/_tree.scss */
+        /* line 58, ../sass/tree/_tree.scss */
         ul.tree li span.tree-item .label .type-icon {
           overflow: hidden;
           position: absolute;
@@ -207,7 +208,7 @@ ul.tree {
           height: auto;
           text-shadow: rgba(0, 0, 0, 0.6) 0 1px 2px;
           color: #0099cc; }
-          /* line 59, ../sass/tree/_tree.scss */
+          /* line 62, ../sass/tree/_tree.scss */
           ul.tree li span.tree-item .label .type-icon .alert {
             text-shadow: rgba(0, 0, 0, 0.3) 0 1px 2px;
             background: #333;
@@ -222,7 +223,7 @@ ul.tree {
             width: auto;
             position: absolute;
             z-index: 2; }
-        /* line 75, ../sass/tree/_tree.scss */
+        /* line 78, ../sass/tree/_tree.scss */
         ul.tree li span.tree-item .label .title-label {
           overflow: hidden;
           position: absolute;
@@ -237,52 +238,53 @@ ul.tree {
           overflow: hidden;
           text-overflow: ellipsis;
           white-space: nowrap; }
-      /* line 87, ../sass/tree/_tree.scss */
+      /* line 90, ../sass/tree/_tree.scss */
       ul.tree li span.tree-item.loading {
         pointer-events: none; }
-        /* line 89, ../sass/tree/_tree.scss */
+        /* line 92, ../sass/tree/_tree.scss */
         ul.tree li span.tree-item.loading .label {
           opacity: 0.5; }
-          /* line 91, ../sass/tree/_tree.scss */
+          /* line 94, ../sass/tree/_tree.scss */
           ul.tree li span.tree-item.loading .label .title-label {
             font-style: italic; }
-        /* line 95, ../sass/tree/_tree.scss */
+        /* line 98, ../sass/tree/_tree.scss */
         ul.tree li span.tree-item.loading .wait-spinner {
           margin-left: 14px; }
-      /* line 100, ../sass/tree/_tree.scss */
+      /* line 103, ../sass/tree/_tree.scss */
       ul.tree li span.tree-item.selected {
         background: #005177;
         color: #fff; }
-        /* line 104, ../sass/tree/_tree.scss */
+        /* line 107, ../sass/tree/_tree.scss */
         ul.tree li span.tree-item.selected .view-control {
           color: #0099cc; }
-        /* line 107, ../sass/tree/_tree.scss */
+        /* line 110, ../sass/tree/_tree.scss */
         ul.tree li span.tree-item.selected .label .type-icon {
           color: #fff; }
-      /* line 113, ../sass/tree/_tree.scss */
-      ul.tree li span.tree-item:not(.selected):hover {
-        background: #404040;
-        color: #cccccc; }
-        /* line 116, ../sass/tree/_tree.scss */
-        ul.tree li span.tree-item:not(.selected):hover .context-trigger {
-          display: block; }
-        /* line 119, ../sass/tree/_tree.scss */
-        ul.tree li span.tree-item:not(.selected):hover .icon {
-          color: #33ccff; }
-      /* line 125, ../sass/tree/_tree.scss */
+      @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
+        /* line 118, ../sass/tree/_tree.scss */
+        ul.tree li span.tree-item:not(.selected):hover {
+          background: #404040;
+          color: #cccccc; }
+          /* line 121, ../sass/tree/_tree.scss */
+          ul.tree li span.tree-item:not(.selected):hover .context-trigger {
+            display: block; }
+          /* line 124, ../sass/tree/_tree.scss */
+          ul.tree li span.tree-item:not(.selected):hover .icon {
+            color: #33ccff; } }
+      /* line 131, ../sass/tree/_tree.scss */
       ul.tree li span.tree-item:not(.loading) {
         cursor: pointer; }
-      /* line 129, ../sass/tree/_tree.scss */
+      /* line 135, ../sass/tree/_tree.scss */
       ul.tree li span.tree-item .context-trigger {
         top: -1px;
         position: absolute;
         right: 3px; }
-        /* line 135, ../sass/tree/_tree.scss */
+        /* line 141, ../sass/tree/_tree.scss */
         ul.tree li span.tree-item .context-trigger .invoke-menu {
           font-size: 0.75em;
           height: 0.9rem;
           line-height: 0.9rem; }
-  /* line 144, ../sass/tree/_tree.scss */
+  /* line 150, ../sass/tree/_tree.scss */
   ul.tree ul.tree {
     margin-left: 15px; }
 
diff --git a/platform/commonUI/general/res/sass/tree/_tree.scss b/platform/commonUI/general/res/sass/tree/_tree.scss
index 356bb8a527..4e272960f1 100644
--- a/platform/commonUI/general/res/sass/tree/_tree.scss
+++ b/platform/commonUI/general/res/sass/tree/_tree.scss
@@ -41,9 +41,12 @@ ul.tree {
 				font-size: 0.75em;
 				width: $treeVCW;
 				$runningItemW: $interiorMargin + $treeVCW;
-				&:hover {
-					color: $colorItemTreeVCHover;
-				}
+                // NOTE: [Mobile] Removed Hover on Mobile
+                @include desktop {
+                    &:hover {
+                        color: $colorItemTreeVCHover;
+                    }
+                }
 			}
 
 			.label {
@@ -110,16 +113,19 @@ ul.tree {
 			}
 
 			&:not(.selected) {
-				&:hover {
-					background: lighten($colorBodyBg, 5%);
-					color: lighten($colorBodyFg, 20%);
-					.context-trigger {
-						display: block;
-					}
-					.icon {
-						color: $colorItemTreeIconHover;
-					}
-				}
+                // NOTE: [Mobile] Removed Hover on Mobile
+                @include desktop {
+                    &:hover {
+                        background: lighten($colorBodyBg, 5%);
+                        color: lighten($colorBodyFg, 20%);
+                        .context-trigger {
+                            display: block;
+                        }
+                        .icon {
+                            color: $colorItemTreeIconHover;
+                        }
+                    }
+                }
 			}
 
 			&:not(.loading) {

From a89f9eed42cabd3769de3e74052da102f83e01c9 Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Thu, 23 Jul 2015 16:47:57 -0700
Subject: [PATCH 090/209] [Mobile] Grid List/Gestures

Context menu only shown with contextmenu
click on desktops (non-mobile devices). Also
edited items list in a folder's representation
to show the icon on the left side, with text
centered horizontally (only mobile).
---
 platform/commonUI/general/res/css/items.css   | 36 ++++++++++--
 .../general/res/sass/mobile/_item.scss        | 56 ++++++++++++++++---
 platform/representation/bundle.json           |  2 +-
 .../src/gestures/ContextMenuGesture.js        |  9 ++-
 4 files changed, 86 insertions(+), 17 deletions(-)

diff --git a/platform/commonUI/general/res/css/items.css b/platform/commonUI/general/res/css/items.css
index be1da9dd3d..8c25e81c41 100644
--- a/platform/commonUI/general/res/css/items.css
+++ b/platform/commonUI/general/res/css/items.css
@@ -355,18 +355,42 @@
   /* line 28, ../sass/mobile/_item.scss */
   .items-holder .item.grid-item {
     width: 100%;
-    height: 50px; } }
+    height: 50px; }
+    /* line 38, ../sass/mobile/_item.scss */
+    .items-holder .item.grid-item .item-main .item-type {
+      font-size: 30px;
+      line-height: 40px;
+      text-align: left; }
+    /* line 46, ../sass/mobile/_item.scss */
+    .items-holder .item.grid-item .item-main .item-open {
+      display: none; }
+    /* line 53, ../sass/mobile/_item.scss */
+    .items-holder .item.grid-item .title {
+      text-align: center; }
+    /* line 57, ../sass/mobile/_item.scss */
+    .items-holder .item.grid-item .details {
+      text-align: center; } }
 @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 28, ../sass/mobile/_item.scss */
   .items-holder .item.grid-item {
     width: 100%;
-    height: 100px; } }
+    height: 66.66667px; }
+    /* line 69, ../sass/mobile/_item.scss */
+    .items-holder .item.grid-item .item-main .item-type {
+      font-size: 30px;
+      line-height: 50px;
+      text-align: left; }
+    /* line 77, ../sass/mobile/_item.scss */
+    .items-holder .item.grid-item .item-main .item-open {
+      display: none; }
+    /* line 84, ../sass/mobile/_item.scss */
+    .items-holder .item.grid-item .title {
+      text-align: center; }
+    /* line 88, ../sass/mobile/_item.scss */
+    .items-holder .item.grid-item .details {
+      text-align: center; } }
 @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
   /* line 28, ../sass/mobile/_item.scss */
   .items-holder .item.grid-item {
     width: 200px;
     height: 200px; } }
-@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/_item.scss */
-  .items-holder .item.grid-item .icon {
-    display: none; } }
diff --git a/platform/commonUI/general/res/sass/mobile/_item.scss b/platform/commonUI/general/res/sass/mobile/_item.scss
index 9542645136..c7bbc68d41 100644
--- a/platform/commonUI/general/res/sass/mobile/_item.scss
+++ b/platform/commonUI/general/res/sass/mobile/_item.scss
@@ -33,13 +33,61 @@
                 $dHei: $ueBrowseGridItemLg/4;
                 width: $dWid;
                 height: $dHei;
+                
+                .item-main {
+                    .item-type {
+    //                     NOTE: [Mobile] Icon for the list/grid item inside folder
+    //                    display: none;
+                        font-size: 30px;
+                        line-height: $ueBrowseGridItemLg/5;
+                        text-align: left;
+
+                    }
+                    .item-open {
+    //                     NOTE: [Mobile] Icon for the open item inside folder
+                       display: none;
+
+                    }
+                }
+
+                .title {
+                    text-align: center;
+                }
+
+                .details {
+                    text-align: center;
+                }                
             }
             
             @include tablet {
                 $dWid: 100%;
-                $dHei: $ueBrowseGridItemLg/2;
+                $dHei: $ueBrowseGridItemLg/3;
                 width: $dWid;
                 height: $dHei;
+                
+                .item-main {
+                    .item-type {
+    //                     NOTE: [Mobile] Icon for the list/grid item inside folder
+    //                    display: none;
+                        font-size: 30px;
+                        line-height: $ueBrowseGridItemLg/4;
+                        text-align: left;
+
+                    }
+                    .item-open {
+    //                     NOTE: [Mobile] Icon for the open item inside folder
+                        display: none;
+
+                    }
+                }
+
+                .title {
+                    text-align: center;
+                }
+
+                .details {
+                    text-align: center;
+                }
             }
             
             @include desktop {
@@ -48,12 +96,6 @@
                 width: $dWid;
                 height: $dHei; 
             }
-            
-            .icon {
-                @include phoneandtablet {
-                    display: none;
-                }
-            }
         }
     }
 }
diff --git a/platform/representation/bundle.json b/platform/representation/bundle.json
index c9872367aa..64fc1b0f27 100644
--- a/platform/representation/bundle.json
+++ b/platform/representation/bundle.json
@@ -26,7 +26,7 @@
             {
                 "key": "menu",
                 "implementation": "gestures/ContextMenuGesture.js",
-                "depends": [ "$compile", "$document", "$window", "$rootScope" ]
+                "depends": [ "$compile", "$document", "$window", "$rootScope", "queryService" ]
             }
         ],
         "components": [
diff --git a/platform/representation/src/gestures/ContextMenuGesture.js b/platform/representation/src/gestures/ContextMenuGesture.js
index 83ea1ddc23..298d34face 100644
--- a/platform/representation/src/gestures/ContextMenuGesture.js
+++ b/platform/representation/src/gestures/ContextMenuGesture.js
@@ -50,7 +50,7 @@ define(
          * @param {DomainObject} domainObject the object on which actions
          *                       in the context menu will be performed
          */
-        function ContextMenuGesture($compile, $document, $window, $rootScope, element, domainObject) {
+        function ContextMenuGesture($compile, $document, $window, $rootScope, queryService, element, domainObject) {
             function showMenu(event) {
                 var winDim = [$window.innerWidth, $window.innerHeight],
                     eventCoors = [event.pageX, event.pageY],
@@ -102,8 +102,11 @@ define(
                 event.preventDefault();
             }
 
-            // When context menu event occurs, show object actions instead
-            element.on('contextmenu', showMenu);
+            // Iff the user is not on a mobile device, then when 
+            // the context menu event occurs, show object actions instead
+            if (!queryService.isMobile(navigator.userAgent)) {
+                element.on('contextmenu', showMenu);
+            }
 
             return {
                 /**

From 200c6e49fcc7fa800ed2125ee5f9d7fe5dddd038 Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Thu, 23 Jul 2015 16:55:45 -0700
Subject: [PATCH 091/209] [Mobile] Test

QueryService (mock) added to the
ContextMenuGestureSpec to account
for isMobile call that allows/
disallows use of contextmenu
gesture.
---
 .../representation/test/gestures/ContextMenuGestureSpec.js  | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/platform/representation/test/gestures/ContextMenuGestureSpec.js b/platform/representation/test/gestures/ContextMenuGestureSpec.js
index 8b91a969d4..f1a6b3419d 100644
--- a/platform/representation/test/gestures/ContextMenuGestureSpec.js
+++ b/platform/representation/test/gestures/ContextMenuGestureSpec.js
@@ -43,6 +43,7 @@ define(
                 mockBody,
                 mockWindow,
                 mockRootScope,
+                mockQueryService,
                 mockScope,
                 mockElement,
                 mockDomainObject,
@@ -59,12 +60,14 @@ define(
                 mockWindow = { innerWidth: MENU_DIMENSIONS[0] * 4, innerHeight: MENU_DIMENSIONS[1] * 4 };
                 mockRootScope = jasmine.createSpyObj("$rootScope", ["$new"]);
                 mockScope = {};
+                mockQueryService = jasmine.createSpyObj("queryService", ["isMobile"]);
                 mockElement = jasmine.createSpyObj("element", JQLITE_FUNCTIONS);
                 mockDomainObject = jasmine.createSpyObj("domainObject", DOMAIN_OBJECT_METHODS);
                 mockEvent = jasmine.createSpyObj("event", ["preventDefault"]);
                 mockEvent.pageX = 0;
                 mockEvent.pageY = 0;
-
+                
+                
                 mockCompile.andReturn(mockCompiledTemplate);
                 mockCompiledTemplate.andReturn(mockMenu);
                 mockDocument.find.andReturn(mockBody);
@@ -75,6 +78,7 @@ define(
                     mockDocument,
                     mockWindow,
                     mockRootScope,
+                    mockQueryService,
                     mockElement,
                     mockDomainObject
                 );

From 2355d354b3ccd0060714c53e5ddd9401b828ead9 Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Fri, 24 Jul 2015 11:46:58 -0700
Subject: [PATCH 092/209] [Mobile] Items List

Flushes items left and
vertically centers the
title/details. Also cleaned
up the items classes in sass
files.
---
 platform/commonUI/general/res/css/forms.css   |  1 +
 platform/commonUI/general/res/css/items.css   | 59 +++++++++++-------
 .../general/res/css/theme-espresso.css        |  1 +
 platform/commonUI/general/res/css/tree.css    |  1 +
 .../general/res/sass/mobile/_constants.scss   |  7 +++
 .../general/res/sass/mobile/_item.scss        | 62 +++++++++++--------
 6 files changed, 82 insertions(+), 49 deletions(-)

diff --git a/platform/commonUI/general/res/css/forms.css b/platform/commonUI/general/res/css/forms.css
index bed72af25f..a63582b84b 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 REPRESENTATION ITEMS DIMENSIONS */
 /************************** MOBILE TREE MENU DIMENSIONS */
 /************************** WINDOW DIMENSIONS FOR RWD */
 /************************** MEDIA QUERIES: WINDOW CHECKS 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 8c25e81c41..0786a7cef7 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 REPRESENTATION ITEMS DIMENSIONS */
 /************************** MOBILE TREE MENU DIMENSIONS */
 /************************** WINDOW DIMENSIONS FOR RWD */
 /************************** MEDIA QUERIES: WINDOW CHECKS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */
@@ -351,46 +352,56 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
+@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 36, ../sass/mobile/_item.scss */
+  .items-holder .item.grid-item .bar.bottom-bar.abs {
+    top: 0px;
+    height: auto; }
+  /* line 43, ../sass/mobile/_item.scss */
+  .items-holder .item.grid-item .item-main .item-type {
+    font-size: 30px;
+    text-align: left; }
+  /* line 48, ../sass/mobile/_item.scss */
+  .items-holder .item.grid-item .item-main .item-open {
+    display: none; }
+  /* line 53, ../sass/mobile/_item.scss */
+  .items-holder .item.grid-item .title, .items-holder .item.grid-item .details {
+    margin-left: 30px; } }
 @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 28, ../sass/mobile/_item.scss */
+  /* line 29, ../sass/mobile/_item.scss */
   .items-holder .item.grid-item {
     width: 100%;
     height: 50px; }
-    /* line 38, ../sass/mobile/_item.scss */
+    /* line 63, ../sass/mobile/_item.scss */
     .items-holder .item.grid-item .item-main .item-type {
-      font-size: 30px;
-      line-height: 40px;
-      text-align: left; }
-    /* line 46, ../sass/mobile/_item.scss */
-    .items-holder .item.grid-item .item-main .item-open {
-      display: none; }
-    /* line 53, ../sass/mobile/_item.scss */
+      line-height: 40px; }
+    /* line 68, ../sass/mobile/_item.scss */
     .items-holder .item.grid-item .title {
-      text-align: center; }
-    /* line 57, ../sass/mobile/_item.scss */
+      margin-right: 10px;
+      line-height: 25px; }
+    /* line 74, ../sass/mobile/_item.scss */
     .items-holder .item.grid-item .details {
-      text-align: center; } }
+      margin-right: 10px;
+      line-height: 0px; } }
 @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 28, ../sass/mobile/_item.scss */
+  /* line 29, ../sass/mobile/_item.scss */
   .items-holder .item.grid-item {
     width: 100%;
     height: 66.66667px; }
-    /* line 69, ../sass/mobile/_item.scss */
+    /* line 86, ../sass/mobile/_item.scss */
     .items-holder .item.grid-item .item-main .item-type {
       font-size: 30px;
-      line-height: 50px;
-      text-align: left; }
-    /* line 77, ../sass/mobile/_item.scss */
-    .items-holder .item.grid-item .item-main .item-open {
-      display: none; }
-    /* line 84, ../sass/mobile/_item.scss */
+      line-height: 50px; }
+    /* line 93, ../sass/mobile/_item.scss */
     .items-holder .item.grid-item .title {
-      text-align: center; }
-    /* line 88, ../sass/mobile/_item.scss */
+      margin-right: 10px;
+      line-height: 38px; }
+    /* line 99, ../sass/mobile/_item.scss */
     .items-holder .item.grid-item .details {
-      text-align: center; } }
+      margin-right: 10px;
+      line-height: 0px; } }
 @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-  /* line 28, ../sass/mobile/_item.scss */
+  /* line 29, ../sass/mobile/_item.scss */
   .items-holder .item.grid-item {
     width: 200px;
     height: 200px; } }
diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index 6e44bf8f39..78e042f07a 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 REPRESENTATION ITEMS DIMENSIONS */
 /************************** MOBILE TREE MENU DIMENSIONS */
 /************************** WINDOW DIMENSIONS FOR RWD */
 /************************** MEDIA QUERIES: WINDOW CHECKS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */
diff --git a/platform/commonUI/general/res/css/tree.css b/platform/commonUI/general/res/css/tree.css
index 8b3b6125dd..fa97baaa9a 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 REPRESENTATION ITEMS DIMENSIONS */
 /************************** MOBILE TREE MENU DIMENSIONS */
 /************************** WINDOW DIMENSIONS FOR RWD */
 /************************** MEDIA QUERIES: WINDOW CHECKS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */
diff --git a/platform/commonUI/general/res/sass/mobile/_constants.scss b/platform/commonUI/general/res/sass/mobile/_constants.scss
index ee90144c55..6ebfd519e1 100644
--- a/platform/commonUI/general/res/sass/mobile/_constants.scss
+++ b/platform/commonUI/general/res/sass/mobile/_constants.scss
@@ -20,6 +20,13 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
+/************************** MOBILE REPRESENTATION ITEMS DIMENSIONS */
+$mobile-listIcon: 30px;
+$mobile-listRight: 10px;
+
+$phone-itemHeight: $ueBrowseGridItemLg/4;
+$tablet-itemHeight: $ueBrowseGridItemLg/3;
+
 /************************** MOBILE TREE MENU DIMENSIONS */
 $mobile-treeHeight: 38px;
 $mobile-treeLeft: 3px;
diff --git a/platform/commonUI/general/res/sass/mobile/_item.scss b/platform/commonUI/general/res/sass/mobile/_item.scss
index c7bbc68d41..eb44048dc8 100644
--- a/platform/commonUI/general/res/sass/mobile/_item.scss
+++ b/platform/commonUI/general/res/sass/mobile/_item.scss
@@ -23,70 +23,82 @@
 // Sets the size of the items in the folder
 // representation. Instead of a grid,
 // a list is used.
+
 .items-holder {
     .item {
         &.grid-item {
             $dWid: $ueBrowseGridItemLg;
             $dHei: $ueBrowseGridItemLg;
-            @include phone {
+            @include phoneandtablet {
                 $dWid: 100%;
-                $dHei: $ueBrowseGridItemLg/4;
-                width: $dWid;
-                height: $dHei;
+                
+                .bar {
+                    &.bottom-bar.abs {
+                        top: 0px;
+                        height: auto;
+                    }
+                }                                
                 
                 .item-main {
                     .item-type {
-    //                     NOTE: [Mobile] Icon for the list/grid item inside folder
-    //                    display: none;
-                        font-size: 30px;
-                        line-height: $ueBrowseGridItemLg/5;
+                        font-size: $mobile-listIcon;
                         text-align: left;
 
                     }
                     .item-open {
-    //                     NOTE: [Mobile] Icon for the open item inside folder
                        display: none;
+                    }
+                }
 
+                .title, .details {
+                    margin-left: $mobile-listIcon;
+                }             
+            }
+
+            @include phone {
+                $dHei: $phone-itemHeight;
+                width: $dWid;
+                height: $dHei;
+                .item-main {
+                    .item-type {
+                        line-height: $phone-itemHeight * .8;
                     }
                 }
 
                 .title {
-                    text-align: center;
+                    margin-right: $mobile-listRight;
+                    line-height: $phone-itemHeight * .5;
+    
                 }
 
                 .details {
-                    text-align: center;
+                    margin-right: $mobile-listRight;
+                    line-height: 0px;
                 }                
             }
             
             @include tablet {
-                $dWid: 100%;
-                $dHei: $ueBrowseGridItemLg/3;
+                $dHei: $tablet-itemHeight;
                 width: $dWid;
                 height: $dHei;
                 
                 .item-main {
                     .item-type {
-    //                     NOTE: [Mobile] Icon for the list/grid item inside folder
-    //                    display: none;
-                        font-size: 30px;
-                        line-height: $ueBrowseGridItemLg/4;
-                        text-align: left;
-
-                    }
-                    .item-open {
-    //                     NOTE: [Mobile] Icon for the open item inside folder
-                        display: none;
+                        font-size: $mobile-listIcon;
+                        line-height: $tablet-itemHeight * .75;
 
                     }
                 }
 
                 .title {
-                    text-align: center;
+                    margin-right: $mobile-listRight;
+                    line-height: $tablet-itemHeight * .57;
+    
                 }
 
                 .details {
-                    text-align: center;
+                    margin-right: $mobile-listRight;
+                    line-height: 0px;
                 }
             }
             

From b37ee19fbc5283e152a9c513ff9aa5f06b1d7c3b Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Fri, 24 Jul 2015 12:35:19 -0700
Subject: [PATCH 093/209] [Mobile] Size Adjustment

Adjusted indentation size
on the tree. Also change size of the
hamburger icon to match the
object icon and moved it slightly
down.
---
 platform/commonUI/general/res/css/items.css   | 20 ++++++++--------
 .../general/res/css/theme-espresso.css        | 24 +++++++------------
 platform/commonUI/general/res/css/tree.css    |  3 +--
 .../general/res/sass/mobile/_constants.scss   |  3 ++-
 .../general/res/sass/mobile/_item.scss        | 14 +----------
 .../general/res/sass/mobile/_layout.scss      |  8 ++-----
 .../general/res/sass/mobile/_tree.scss        |  5 ++--
 .../res/sass/mobile/controls/_menus.scss      |  8 +++----
 8 files changed, 29 insertions(+), 56 deletions(-)

diff --git a/platform/commonUI/general/res/css/items.css b/platform/commonUI/general/res/css/items.css
index 0786a7cef7..4576077bdc 100644
--- a/platform/commonUI/general/res/css/items.css
+++ b/platform/commonUI/general/res/css/items.css
@@ -353,18 +353,18 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 @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 36, ../sass/mobile/_item.scss */
+  /* line 35, ../sass/mobile/_item.scss */
   .items-holder .item.grid-item .bar.bottom-bar.abs {
     top: 0px;
     height: auto; }
-  /* line 43, ../sass/mobile/_item.scss */
+  /* line 41, ../sass/mobile/_item.scss */
   .items-holder .item.grid-item .item-main .item-type {
     font-size: 30px;
     text-align: left; }
-  /* line 48, ../sass/mobile/_item.scss */
+  /* line 45, ../sass/mobile/_item.scss */
   .items-holder .item.grid-item .item-main .item-open {
     display: none; }
-  /* line 53, ../sass/mobile/_item.scss */
+  /* line 49, ../sass/mobile/_item.scss */
   .items-holder .item.grid-item .title, .items-holder .item.grid-item .details {
     margin-left: 30px; } }
 @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) {
@@ -372,14 +372,14 @@
   .items-holder .item.grid-item {
     width: 100%;
     height: 50px; }
-    /* line 63, ../sass/mobile/_item.scss */
+    /* line 59, ../sass/mobile/_item.scss */
     .items-holder .item.grid-item .item-main .item-type {
       line-height: 40px; }
-    /* line 68, ../sass/mobile/_item.scss */
+    /* line 63, ../sass/mobile/_item.scss */
     .items-holder .item.grid-item .title {
       margin-right: 10px;
       line-height: 25px; }
-    /* line 74, ../sass/mobile/_item.scss */
+    /* line 67, ../sass/mobile/_item.scss */
     .items-holder .item.grid-item .details {
       margin-right: 10px;
       line-height: 0px; } }
@@ -388,15 +388,15 @@
   .items-holder .item.grid-item {
     width: 100%;
     height: 66.66667px; }
-    /* line 86, ../sass/mobile/_item.scss */
+    /* line 78, ../sass/mobile/_item.scss */
     .items-holder .item.grid-item .item-main .item-type {
       font-size: 30px;
       line-height: 50px; }
-    /* line 93, ../sass/mobile/_item.scss */
+    /* line 83, ../sass/mobile/_item.scss */
     .items-holder .item.grid-item .title {
       margin-right: 10px;
       line-height: 38px; }
-    /* line 99, ../sass/mobile/_item.scss */
+    /* line 87, ../sass/mobile/_item.scss */
     .items-holder .item.grid-item .details {
       margin-right: 10px;
       line-height: 0px; } }
diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index 78e042f07a..12cb464c59 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -851,29 +851,24 @@ mct-container {
   .button-pos {
     position: absolute; } }
 
-@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) {
+@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 138, ../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 138, ../sass/mobile/_layout.scss */
-  .object-header-mobile {
-    position: relative;
-    left: 35px; } }
+    left: 44px; } }
 
 @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 150, ../sass/mobile/_layout.scss */
+  /* line 146, ../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 157, ../sass/mobile/_layout.scss */
+  /* line 153, ../sass/mobile/_layout.scss */
   .phone-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), 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 163, ../sass/mobile/_layout.scss */
+  /* line 159, ../sass/mobile/_layout.scss */
   .tree-holder {
     overflow-x: hidden !important; } }
 
@@ -2903,14 +2898,11 @@ label.checkbox.custom {
 /* line 25, ../sass/mobile/controls/_menus.scss */
 .mobile-menu-icon {
   display: inline-block; }
-  @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) {
+  @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 25, ../sass/mobile/controls/_menus.scss */
     .mobile-menu-icon {
-      font-size: 25px; } }
-  @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 25, ../sass/mobile/controls/_menus.scss */
-    .mobile-menu-icon {
-      font-size: 29px; } }
+      font-size: 21px;
+      margin-top: 1px; } }
   @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
     /* line 25, ../sass/mobile/controls/_menus.scss */
     .mobile-menu-icon {
diff --git a/platform/commonUI/general/res/css/tree.css b/platform/commonUI/general/res/css/tree.css
index fa97baaa9a..625907bcb1 100644
--- a/platform/commonUI/general/res/css/tree.css
+++ b/platform/commonUI/general/res/css/tree.css
@@ -341,5 +341,4 @@ ul.tree {
           right: 16.9px; }
     /* line 58, ../sass/mobile/_tree.scss */
     ul.tree ul.tree {
-      margin-left: 0px;
-      padding-left: 3px; } }
+      margin-left: 7px; } }
diff --git a/platform/commonUI/general/res/sass/mobile/_constants.scss b/platform/commonUI/general/res/sass/mobile/_constants.scss
index 6ebfd519e1..6a3a32c0db 100644
--- a/platform/commonUI/general/res/sass/mobile/_constants.scss
+++ b/platform/commonUI/general/res/sass/mobile/_constants.scss
@@ -29,7 +29,8 @@ $tablet-itemHeight: $ueBrowseGridItemLg/3;
 
 /************************** MOBILE TREE MENU DIMENSIONS */
 $mobile-treeHeight: 38px;
-$mobile-treeLeft: 3px;
+$mobile-startingTreeLeft: 3px;
+$mobile-runningTreeLeft: 7px;
 $mobile-treeRight: 13px;
 
 /************************** WINDOW DIMENSIONS FOR RWD */
diff --git a/platform/commonUI/general/res/sass/mobile/_item.scss b/platform/commonUI/general/res/sass/mobile/_item.scss
index eb44048dc8..360acf3925 100644
--- a/platform/commonUI/general/res/sass/mobile/_item.scss
+++ b/platform/commonUI/general/res/sass/mobile/_item.scss
@@ -31,25 +31,21 @@
             $dHei: $ueBrowseGridItemLg;
             @include phoneandtablet {
                 $dWid: 100%;
-                
                 .bar {
                     &.bottom-bar.abs {
                         top: 0px;
                         height: auto;
                     }
-                }                                
-                
+                }
                 .item-main {
                     .item-type {
                         font-size: $mobile-listIcon;
                         text-align: left;
-
                     }
                     .item-open {
                        display: none;
                     }
                 }
-
                 .title, .details {
                     margin-left: $mobile-listIcon;
                 }             
@@ -64,13 +60,10 @@
                         line-height: $phone-itemHeight * .8;
                     }
                 }
-
                 .title {
                     margin-right: $mobile-listRight;
                     line-height: $phone-itemHeight * .5;
-    
                 }
-
                 .details {
                     margin-right: $mobile-listRight;
                     line-height: 0px;
@@ -81,21 +74,16 @@
                 $dHei: $tablet-itemHeight;
                 width: $dWid;
                 height: $dHei;
-                
                 .item-main {
                     .item-type {
                         font-size: $mobile-listIcon;
                         line-height: $tablet-itemHeight * .75;
-
                     }
                 }
-
                 .title {
                     margin-right: $mobile-listRight;
                     line-height: $tablet-itemHeight * .57;
-    
                 }
-
                 .details {
                     margin-right: $mobile-listRight;
                     line-height: 0px;
diff --git a/platform/commonUI/general/res/sass/mobile/_layout.scss b/platform/commonUI/general/res/sass/mobile/_layout.scss
index a70944f038..4200916739 100644
--- a/platform/commonUI/general/res/sass/mobile/_layout.scss
+++ b/platform/commonUI/general/res/sass/mobile/_layout.scss
@@ -136,13 +136,9 @@
 // over to make space for the 
 // hamburger icon
 .object-header-mobile {
-    @include phone {
+    @include phoneandtablet {
         position: relative;
-        left: 30px;
-    }    
-    @include tablet {
-        position: relative;
-        left: 35px;
+        left: 44px;
     }
 }
 
diff --git a/platform/commonUI/general/res/sass/mobile/_tree.scss b/platform/commonUI/general/res/sass/mobile/_tree.scss
index 6d5273f56f..37c7ad6a70 100644
--- a/platform/commonUI/general/res/sass/mobile/_tree.scss
+++ b/platform/commonUI/general/res/sass/mobile/_tree.scss
@@ -42,7 +42,7 @@ ul.tree {
                 .label {
                     // Designates the starting left margin
                     // (indentation) of 'My Items'
-                    left: $mobile-treeLeft;
+                    left: $mobile-startingTreeLeft;
                     font-size: 1.2em;
                     // Allows tree item name to stop prior
                     // to the arrow
@@ -56,8 +56,7 @@ ul.tree {
         // Sets the margin on the left, which causes the
         // running indentation after each folder is made
         ul.tree {
-            margin-left: 0px;
-            padding-left: $mobile-treeLeft;
+            margin-left: $mobile-runningTreeLeft;
         }
     }
 }
diff --git a/platform/commonUI/general/res/sass/mobile/controls/_menus.scss b/platform/commonUI/general/res/sass/mobile/controls/_menus.scss
index 9b0136b5b3..e2e360b204 100644
--- a/platform/commonUI/general/res/sass/mobile/controls/_menus.scss
+++ b/platform/commonUI/general/res/sass/mobile/controls/_menus.scss
@@ -24,12 +24,10 @@
 // sized according to the device
 .mobile-menu-icon {
     display: inline-block;
-    @include phone {
-        font-size: 25px;
+    @include phoneandtablet {
+        font-size: 21px;
+        margin-top: 1px;
     }
-    @include tablet {
-        font-size: 29px;
-    }      
     @include desktop {
         display: none;
     }       

From 91bd58215ae38fe589dd413dba0b0bc193cb1096 Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Fri, 24 Jul 2015 12:38:01 -0700
Subject: [PATCH 094/209] [Mobile] Size Adjustment

Moved hamburger icon slightly up
using the padding instead of
margin.
---
 platform/commonUI/general/res/css/theme-espresso.css           | 2 +-
 platform/commonUI/general/res/sass/mobile/controls/_menus.scss | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index 12cb464c59..15394500e9 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -2902,7 +2902,7 @@ label.checkbox.custom {
     /* line 25, ../sass/mobile/controls/_menus.scss */
     .mobile-menu-icon {
       font-size: 21px;
-      margin-top: 1px; } }
+      padding-top: 1px; } }
   @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
     /* line 25, ../sass/mobile/controls/_menus.scss */
     .mobile-menu-icon {
diff --git a/platform/commonUI/general/res/sass/mobile/controls/_menus.scss b/platform/commonUI/general/res/sass/mobile/controls/_menus.scss
index e2e360b204..40aef796ee 100644
--- a/platform/commonUI/general/res/sass/mobile/controls/_menus.scss
+++ b/platform/commonUI/general/res/sass/mobile/controls/_menus.scss
@@ -26,7 +26,7 @@
     display: inline-block;
     @include phoneandtablet {
         font-size: 21px;
-        margin-top: 1px;
+        padding-top: $imageThumbPad;
     }
     @include desktop {
         display: none;

From 011e6fc512746ee6e07d42b8cd7728d29d382c13 Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Fri, 24 Jul 2015 15:27:33 -0700
Subject: [PATCH 095/209] [Mobile] Clean Up

Moved Mobile check in InfoGesture to
call on mouseEnter.
---
 .../inspect/src/gestures/InfoGesture.js       | 42 +++++++++----------
 1 file changed, 21 insertions(+), 21 deletions(-)

diff --git a/platform/commonUI/inspect/src/gestures/InfoGesture.js b/platform/commonUI/inspect/src/gestures/InfoGesture.js
index 483216d838..4792445f6b 100644
--- a/platform/commonUI/inspect/src/gestures/InfoGesture.js
+++ b/platform/commonUI/inspect/src/gestures/InfoGesture.js
@@ -71,34 +71,34 @@ define(
 
             function showBubble(event) {
                 trackPosition(event);
-
+                
                 // Also need to track position during hover
                 element.on('mousemove', trackPosition);
 
-                // Checks if you are on a mobile device, if the device is
-                // not mobile (queryService.isMobile() = false), then
-                // the pendingBubble and therefore hovering is allowed
-                if (!queryService.isMobile(navigator.userAgent)) {
-                    // Show the bubble, after a suitable delay (if mouse has
-                    // left before this time is up, this will be canceled.)
-                    pendingBubble = $timeout(function () {
-                        dismissBubble = infoService.display(
-                            "info-table",
-                            domainObject.getModel().name,
-                            domainObject.useCapability('metadata'),
-                            mousePosition
-                        );
-                        element.off('mousemove', trackPosition);
+                // Show the bubble, after a suitable delay (if mouse has
+                // left before this time is up, this will be canceled.)
+                pendingBubble = $timeout(function () {
+                    dismissBubble = infoService.display(
+                        "info-table",
+                        domainObject.getModel().name,
+                        domainObject.useCapability('metadata'),
+                        mousePosition
+                    );
+                    element.off('mousemove', trackPosition);
+
+                    pendingBubble = undefined;
+                }, DELAY);
 
-                        pendingBubble = undefined;
-                    }, DELAY);
-                }
                 element.on('mouseleave', hideBubble);
             }
             
-
-            // Show bubble (on a timeout) on mouse over
-            element.on('mouseenter', showBubble);
+            // Checks if you are on a mobile device, if the device is
+            // not mobile (queryService.isMobile() = false), then
+            // the pendingBubble and therefore hovering is allowed
+            if (!queryService.isMobile(navigator.userAgent)) {
+                // Show bubble (on a timeout) on mouse over
+                element.on('mouseenter', showBubble);
+            }
 
             // Also make sure we dismiss bubble if representation is destroyed
             // before the mouse actually leaves it

From ddc2295ec30d5545005b790a69ef226f66fd1d15 Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Fri, 24 Jul 2015 16:02:06 -0700
Subject: [PATCH 096/209] [Mobile] Touch Hold Gesture

Rough touch hold gesture added
to the info gesture. Currently
if you hold on an item (that you
would normally hover over) for
500ms, you get the info gesture pop
up.
---
 .../inspect/src/gestures/InfoGesture.js       | 28 ++++++++++++++++++-
 1 file changed, 27 insertions(+), 1 deletion(-)

diff --git a/platform/commonUI/inspect/src/gestures/InfoGesture.js b/platform/commonUI/inspect/src/gestures/InfoGesture.js
index 4792445f6b..b01902d78f 100644
--- a/platform/commonUI/inspect/src/gestures/InfoGesture.js
+++ b/platform/commonUI/inspect/src/gestures/InfoGesture.js
@@ -42,13 +42,22 @@ define(
             var dismissBubble,
                 pendingBubble,
                 mousePosition,
-                scopeOff;
+                touchPosition,
+                scopeOff,
+                touchDELAY = 500;
 
             function trackPosition(event) {
                 // Record mouse position, so bubble can be shown at latest
                 // mouse position (not just where the mouse entered)
                 mousePosition = [ event.clientX, event.clientY ];
             }
+            
+            function trackTouchPosition(event) {
+                var tEvent = event.changedTouches[0];
+                // Record mouse position, so bubble can be shown at latest
+                // mouse position (not just where the mouse entered)
+                touchPosition = [ tEvent.clientX + 44, tEvent.clientY ];
+            }
 
             function hideBubble() {
                 // If a bubble is showing, dismiss it
@@ -67,6 +76,7 @@ define(
                 // Also clear mouse position so we don't have a ton of tiny
                 // arrays allocated while user mouses over things
                 mousePosition = undefined;
+                touchPosition = undefined;
             }
 
             function showBubble(event) {
@@ -92,12 +102,28 @@ define(
                 element.on('mouseleave', hideBubble);
             }
             
+            function showTouchBubble(event) {
+                trackTouchPosition(event);
+                pendingBubble = $timeout(function () {
+                    dismissBubble = infoService.display(
+                        "info-table",
+                        domainObject.getModel().name,
+                        domainObject.useCapability('metadata'),
+                        touchPosition
+                    );
+                }, touchDELAY);
+
+                element.on('touchend', hideBubble);
+            }
+            
             // Checks if you are on a mobile device, if the device is
             // not mobile (queryService.isMobile() = false), then
             // the pendingBubble and therefore hovering is allowed
             if (!queryService.isMobile(navigator.userAgent)) {
                 // Show bubble (on a timeout) on mouse over
                 element.on('mouseenter', showBubble);
+            } else if (queryService.isMobile(navigator.userAgent)) {
+                element.on('touchstart', showTouchBubble);
             }
 
             // Also make sure we dismiss bubble if representation is destroyed

From 066258ab8322d67f4221003f5a2f349dfe1b6f98 Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Fri, 24 Jul 2015 16:19:15 -0700
Subject: [PATCH 097/209] [Mobile] User-Select

Removes the copy/define
mobile safari menu that
appears during some touch events.
Only apply to left and right panes.
---
 .../general/res/css/theme-espresso.css        | 206 +++++++++---------
 .../general/res/sass/mobile/_layout.scss      |   2 +
 2 files changed, 111 insertions(+), 97 deletions(-)

diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index 15394500e9..971482f019 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -753,122 +753,134 @@ mct-container {
     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 */
-  .browse-hidetree .mobile-pane.left-menu {
-    -moz-transition-property: opacity;
-    -o-transition-property: opacity;
-    -webkit-transition-property: opacity;
-    transition-property: opacity;
-    -moz-transition-duration: 0.4s;
-    -o-transition-duration: 0.4s;
-    -webkit-transition-duration: 0.4s;
-    transition-duration: 0.4s;
-    -moz-transition-timing-function: ease-in-out;
-    -o-transition-timing-function: ease-in-out;
-    -webkit-transition-timing-function: ease-in-out;
-    transition-timing-function: ease-in-out;
-    opacity: 0;
-    right: 100% !important;
-    width: auto !important;
-    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 65, ../sass/mobile/_layout.scss */
-  .browse-hidetree .mobile-pane.right-repr {
-    -moz-transition-duration: 0.35s;
-    -o-transition-duration: 0.35s;
-    -webkit-transition-duration: 0.35s;
-    transition-duration: 0.35s;
-    transition-timing-function: ease;
-    backface-visibility: hidden;
-    left: auto !important;
-    width: 100% !important; } }
+/* line 49, ../sass/mobile/_layout.scss */
+.browse-hidetree {
+  -moz-user-select: -moz-none;
+  -ms-user-select: none;
+  -webkit-user-select: none;
+  user-select: 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), 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 53, ../sass/mobile/_layout.scss */
+    .browse-hidetree .mobile-pane.left-menu {
+      -moz-transition-property: opacity;
+      -o-transition-property: opacity;
+      -webkit-transition-property: opacity;
+      transition-property: opacity;
+      -moz-transition-duration: 0.4s;
+      -o-transition-duration: 0.4s;
+      -webkit-transition-duration: 0.4s;
+      transition-duration: 0.4s;
+      -moz-transition-timing-function: ease-in-out;
+      -o-transition-timing-function: ease-in-out;
+      -webkit-transition-timing-function: ease-in-out;
+      transition-timing-function: ease-in-out;
+      opacity: 0;
+      right: 100% !important;
+      width: auto !important;
+      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 */
+    .browse-hidetree .mobile-pane.right-repr {
+      -moz-transition-duration: 0.35s;
+      -o-transition-duration: 0.35s;
+      -webkit-transition-duration: 0.35s;
+      transition-duration: 0.35s;
+      transition-timing-function: ease;
+      backface-visibility: hidden;
+      left: auto !important;
+      width: 100% !important; } }
+
+/* line 80, ../sass/mobile/_layout.scss */
+.browse-showtree {
+  -moz-user-select: -moz-none;
+  -ms-user-select: none;
+  -webkit-user-select: none;
+  user-select: 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), 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 84, ../sass/mobile/_layout.scss */
+    .browse-showtree .mobile-pane.left-menu {
+      -moz-transition-property: opacity;
+      -o-transition-property: opacity;
+      -webkit-transition-property: opacity;
+      transition-property: opacity;
+      -moz-transition-duration: 0.4s;
+      -o-transition-duration: 0.4s;
+      -webkit-transition-duration: 0.4s;
+      transition-duration: 0.4s;
+      -moz-transition-timing-function: ease-in-out;
+      -o-transition-timing-function: ease-in-out;
+      -webkit-transition-timing-function: ease-in-out;
+      transition-timing-function: ease-in-out;
+      opacity: 1;
+      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 84, ../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 84, ../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 84, ../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 84, ../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 */
+    .browse-showtree .mobile-pane.right-repr {
+      -moz-transition-duration: 0.35s;
+      -o-transition-duration: 0.35s;
+      -webkit-transition-duration: 0.35s;
+      transition-duration: 0.35s;
+      transition-timing-function: ease;
+      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 */
+    .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 */
+    .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 */
+    .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 */
+    .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 82, ../sass/mobile/_layout.scss */
-  .browse-showtree .mobile-pane.left-menu {
-    -moz-transition-property: opacity;
-    -o-transition-property: opacity;
-    -webkit-transition-property: opacity;
-    transition-property: opacity;
-    -moz-transition-duration: 0.4s;
-    -o-transition-duration: 0.4s;
-    -webkit-transition-duration: 0.4s;
-    transition-duration: 0.4s;
-    -moz-transition-timing-function: ease-in-out;
-    -o-transition-timing-function: ease-in-out;
-    -webkit-transition-timing-function: ease-in-out;
-    transition-timing-function: ease-in-out;
-    opacity: 1;
-    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 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 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 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 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 106, ../sass/mobile/_layout.scss */
-  .browse-showtree .mobile-pane.right-repr {
-    -moz-transition-duration: 0.35s;
-    -o-transition-duration: 0.35s;
-    -webkit-transition-duration: 0.35s;
-    transition-duration: 0.35s;
-    transition-timing-function: ease;
-    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 106, ../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 106, ../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 106, ../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 106, ../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 129, ../sass/mobile/_layout.scss */
+  /* line 131, ../sass/mobile/_layout.scss */
   .button-pos {
     position: absolute; } }
 
 @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 138, ../sass/mobile/_layout.scss */
+  /* line 140, ../sass/mobile/_layout.scss */
   .object-header-mobile {
     position: relative;
     left: 44px; } }
 
 @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 146, ../sass/mobile/_layout.scss */
+  /* line 148, ../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 153, ../sass/mobile/_layout.scss */
+  /* line 155, ../sass/mobile/_layout.scss */
   .phone-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), 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 159, ../sass/mobile/_layout.scss */
+  /* line 161, ../sass/mobile/_layout.scss */
   .tree-holder {
     overflow-x: hidden !important; } }
 
diff --git a/platform/commonUI/general/res/sass/mobile/_layout.scss b/platform/commonUI/general/res/sass/mobile/_layout.scss
index 4200916739..ff3ec5cd64 100644
--- a/platform/commonUI/general/res/sass/mobile/_layout.scss
+++ b/platform/commonUI/general/res/sass/mobile/_layout.scss
@@ -47,6 +47,7 @@
 // classes used for the left menu and the
 // right representation.
 .browse-hidetree {
+    @include user-select(none);
     // Sets the left tree menu when the tree
     // is hidden. 
     .mobile-pane.left-menu {
@@ -77,6 +78,7 @@
 // orientation combination, separate 
 // parameters are used)
 .browse-showtree {
+    @include user-select(none);
     // Sets the left tree menu when the tree
     // is shown.     
     .mobile-pane.left-menu {

From c85a3787c0ad3daa9fdcc4223db449e632ec7e72 Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Fri, 24 Jul 2015 16:46:45 -0700
Subject: [PATCH 098/209] [Mobile] User-Select

Edited user-select used in
panes' layout to only
happen on phones and tablets
(just to be safe).
---
 .../general/res/css/theme-espresso.css        | 220 +++++++++---------
 .../general/res/sass/mobile/_layout.scss      |  18 +-
 2 files changed, 127 insertions(+), 111 deletions(-)

diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index 971482f019..e2bda6e949 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -753,134 +753,136 @@ mct-container {
     max-width: 800px;
     width: 25%; } }
 
-/* line 49, ../sass/mobile/_layout.scss */
-.browse-hidetree {
-  -moz-user-select: -moz-none;
-  -ms-user-select: none;
-  -webkit-user-select: none;
-  user-select: 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), 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 53, ../sass/mobile/_layout.scss */
-    .browse-hidetree .mobile-pane.left-menu {
-      -moz-transition-property: opacity;
-      -o-transition-property: opacity;
-      -webkit-transition-property: opacity;
-      transition-property: opacity;
-      -moz-transition-duration: 0.4s;
-      -o-transition-duration: 0.4s;
-      -webkit-transition-duration: 0.4s;
-      transition-duration: 0.4s;
-      -moz-transition-timing-function: ease-in-out;
-      -o-transition-timing-function: ease-in-out;
-      -webkit-transition-timing-function: ease-in-out;
-      transition-timing-function: ease-in-out;
-      opacity: 0;
-      right: 100% !important;
-      width: auto !important;
-      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 */
-    .browse-hidetree .mobile-pane.right-repr {
-      -moz-transition-duration: 0.35s;
-      -o-transition-duration: 0.35s;
-      -webkit-transition-duration: 0.35s;
-      transition-duration: 0.35s;
-      transition-timing-function: ease;
-      backface-visibility: hidden;
-      left: auto !important;
-      width: 100% !important; } }
-
-/* line 80, ../sass/mobile/_layout.scss */
-.browse-showtree {
-  -moz-user-select: -moz-none;
-  -ms-user-select: none;
-  -webkit-user-select: none;
-  user-select: 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), 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 84, ../sass/mobile/_layout.scss */
-    .browse-showtree .mobile-pane.left-menu {
-      -moz-transition-property: opacity;
-      -o-transition-property: opacity;
-      -webkit-transition-property: opacity;
-      transition-property: opacity;
-      -moz-transition-duration: 0.4s;
-      -o-transition-duration: 0.4s;
-      -webkit-transition-duration: 0.4s;
-      transition-duration: 0.4s;
-      -moz-transition-timing-function: ease-in-out;
-      -o-transition-timing-function: ease-in-out;
-      -webkit-transition-timing-function: ease-in-out;
-      transition-timing-function: ease-in-out;
-      opacity: 1;
-      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 84, ../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 84, ../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 84, ../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 84, ../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 */
-    .browse-showtree .mobile-pane.right-repr {
-      -moz-transition-duration: 0.35s;
-      -o-transition-duration: 0.35s;
-      -webkit-transition-duration: 0.35s;
-      transition-duration: 0.35s;
-      transition-timing-function: ease;
-      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 */
-    .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 */
-    .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 */
-    .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 */
-    .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 49, ../sass/mobile/_layout.scss */
+  .browse-hidetree {
+    -moz-user-select: -moz-none;
+    -ms-user-select: none;
+    -webkit-user-select: none;
+    user-select: 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), 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 60, ../sass/mobile/_layout.scss */
+  .browse-hidetree .mobile-pane.left-menu {
+    -moz-transition-property: opacity;
+    -o-transition-property: opacity;
+    -webkit-transition-property: opacity;
+    transition-property: opacity;
+    -moz-transition-duration: 0.4s;
+    -o-transition-duration: 0.4s;
+    -webkit-transition-duration: 0.4s;
+    transition-duration: 0.4s;
+    -moz-transition-timing-function: ease-in-out;
+    -o-transition-timing-function: ease-in-out;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-timing-function: ease-in-out;
+    opacity: 0;
+    right: 100% !important;
+    width: auto !important;
+    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 73, ../sass/mobile/_layout.scss */
+  .browse-hidetree .mobile-pane.right-repr {
+    -moz-transition-duration: 0.35s;
+    -o-transition-duration: 0.35s;
+    -webkit-transition-duration: 0.35s;
+    transition-duration: 0.35s;
+    transition-timing-function: ease;
+    backface-visibility: hidden;
+    left: auto !important;
+    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 131, ../sass/mobile/_layout.scss */
+  /* line 87, ../sass/mobile/_layout.scss */
+  .browse-showtree {
+    -moz-user-select: -moz-none;
+    -ms-user-select: none;
+    -webkit-user-select: none;
+    user-select: 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), 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 98, ../sass/mobile/_layout.scss */
+  .browse-showtree .mobile-pane.left-menu {
+    -moz-transition-property: opacity;
+    -o-transition-property: opacity;
+    -webkit-transition-property: opacity;
+    transition-property: opacity;
+    -moz-transition-duration: 0.4s;
+    -o-transition-duration: 0.4s;
+    -webkit-transition-duration: 0.4s;
+    transition-duration: 0.4s;
+    -moz-transition-timing-function: ease-in-out;
+    -o-transition-timing-function: ease-in-out;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-timing-function: ease-in-out;
+    opacity: 1;
+    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 98, ../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 98, ../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 98, ../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 98, ../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 122, ../sass/mobile/_layout.scss */
+  .browse-showtree .mobile-pane.right-repr {
+    -moz-transition-duration: 0.35s;
+    -o-transition-duration: 0.35s;
+    -webkit-transition-duration: 0.35s;
+    transition-duration: 0.35s;
+    transition-timing-function: ease;
+    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 122, ../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 122, ../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 122, ../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 122, ../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 145, ../sass/mobile/_layout.scss */
   .button-pos {
     position: absolute; } }
 
 @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 140, ../sass/mobile/_layout.scss */
+  /* line 154, ../sass/mobile/_layout.scss */
   .object-header-mobile {
     position: relative;
     left: 44px; } }
 
 @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 148, ../sass/mobile/_layout.scss */
+  /* line 162, ../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 155, ../sass/mobile/_layout.scss */
+  /* line 169, ../sass/mobile/_layout.scss */
   .phone-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), 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 161, ../sass/mobile/_layout.scss */
+  /* line 175, ../sass/mobile/_layout.scss */
   .tree-holder {
     overflow-x: hidden !important; } }
 
diff --git a/platform/commonUI/general/res/sass/mobile/_layout.scss b/platform/commonUI/general/res/sass/mobile/_layout.scss
index ff3ec5cd64..e4139483f0 100644
--- a/platform/commonUI/general/res/sass/mobile/_layout.scss
+++ b/platform/commonUI/general/res/sass/mobile/_layout.scss
@@ -47,7 +47,14 @@
 // classes used for the left menu and the
 // right representation.
 .browse-hidetree {
-    @include user-select(none);
+    // NOTE: DISABLED SELECTION
+    // Selection disabled in both panes
+    // causing cut/copy/paste menu to
+    // not appear. Should me moved in
+    // future to properly work
+    @include phoneandtablet {
+        @include user-select(none);
+    }
     // Sets the left tree menu when the tree
     // is hidden. 
     .mobile-pane.left-menu {
@@ -78,7 +85,14 @@
 // orientation combination, separate 
 // parameters are used)
 .browse-showtree {
-    @include user-select(none);
+    // NOTE: DISABLED SELECTION
+    // Selection disabled in both panes
+    // causing cut/copy/paste menu to
+    // not appear. Should me moved in
+    // future to properly work
+    @include phoneandtablet {
+        @include user-select(none);
+    }
     // Sets the left tree menu when the tree
     // is shown.     
     .mobile-pane.left-menu {

From 3d0795cde31e610a3da44d0227bb76567fea0ec6 Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Mon, 27 Jul 2015 10:20:08 -0700
Subject: [PATCH 099/209] [Mobile] Starting Context

Added check to make sure
user is touching only one object.
Started contextmenugesture to be
long touch, however currently long
touch is still infogesture.
---
 .../inspect/src/gestures/InfoGesture.js       | 23 ++++----
 platform/representation/bundle.json           |  2 +-
 .../src/gestures/ContextMenuGesture.js        | 55 ++++++++++++++++++-
 3 files changed, 68 insertions(+), 12 deletions(-)

diff --git a/platform/commonUI/inspect/src/gestures/InfoGesture.js b/platform/commonUI/inspect/src/gestures/InfoGesture.js
index b01902d78f..67107773f5 100644
--- a/platform/commonUI/inspect/src/gestures/InfoGesture.js
+++ b/platform/commonUI/inspect/src/gestures/InfoGesture.js
@@ -103,17 +103,20 @@ define(
             }
             
             function showTouchBubble(event) {
-                trackTouchPosition(event);
-                pendingBubble = $timeout(function () {
-                    dismissBubble = infoService.display(
-                        "info-table",
-                        domainObject.getModel().name,
-                        domainObject.useCapability('metadata'),
-                        touchPosition
-                    );
-                }, touchDELAY);
+                // Makes sure user is only touching one place
+                if (event.touches.length < 2) {
+                    trackTouchPosition(event);
+                    pendingBubble = $timeout(function () {
+                        dismissBubble = infoService.display(
+                            "info-table",
+                            domainObject.getModel().name,
+                            domainObject.useCapability('metadata'),
+                            touchPosition
+                        );
+                    }, touchDELAY);
 
-                element.on('touchend', hideBubble);
+                    element.on('touchend', hideBubble);
+                }
             }
             
             // Checks if you are on a mobile device, if the device is
diff --git a/platform/representation/bundle.json b/platform/representation/bundle.json
index 64fc1b0f27..cbbe058701 100644
--- a/platform/representation/bundle.json
+++ b/platform/representation/bundle.json
@@ -26,7 +26,7 @@
             {
                 "key": "menu",
                 "implementation": "gestures/ContextMenuGesture.js",
-                "depends": [ "$compile", "$document", "$window", "$rootScope", "queryService" ]
+                "depends": [ "$timeout", "$compile", "$document", "$window", "$rootScope", "queryService" ]
             }
         ],
         "components": [
diff --git a/platform/representation/src/gestures/ContextMenuGesture.js b/platform/representation/src/gestures/ContextMenuGesture.js
index 298d34face..e7a9fe27f3 100644
--- a/platform/representation/src/gestures/ContextMenuGesture.js
+++ b/platform/representation/src/gestures/ContextMenuGesture.js
@@ -50,7 +50,7 @@ define(
          * @param {DomainObject} domainObject the object on which actions
          *                       in the context menu will be performed
          */
-        function ContextMenuGesture($compile, $document, $window, $rootScope, queryService, element, domainObject) {
+        function ContextMenuGesture($timeout, $compile, $document, $window, $rootScope, queryService, element, domainObject) {
             function showMenu(event) {
                 var winDim = [$window.innerWidth, $window.innerHeight],
                     eventCoors = [event.pageX, event.pageY],
@@ -101,6 +101,59 @@ define(
                 // Don't launch browser's context menu
                 event.preventDefault();
             }
+            
+//            function showTouchMenu(event) {
+//                var winDim = [$window.innerWidth, $window.innerHeight],
+//                    eventCoors = [event.pageX, event.pageY],
+//                    menuDim = GestureConstants.MCT_MENU_DIMENSIONS,
+//                    body = $document.find('body'),
+//                    scope = $rootScope.$new(),
+//                    goLeft = eventCoors[0] + menuDim[0] > winDim[0],
+//                    goUp = eventCoors[1] + menuDim[1] > winDim[1],
+//                    menu;
+//
+//                // Remove the context menu
+//                function dismiss() {
+//                    menu.remove();
+//                    body.off("click", dismiss);
+//                    dismissExistingMenu = undefined;
+//                }
+//
+//                if (event.touches.length < 2) {
+//                    // Dismiss any menu which was already showing
+//                    if (dismissExistingMenu) {
+//                        dismissExistingMenu();
+//                    }
+//
+//                    // ...and record the presence of this menu.
+//                    dismissExistingMenu = dismiss;
+//
+//                    // Set up the scope, including menu positioning
+//                    scope.domainObject = domainObject;
+//                    scope.menuStyle = {};
+//                    scope.menuStyle[goLeft ? "right" : "left"] =
+//                        (goLeft ? (winDim[0] - eventCoors[0]) : eventCoors[0]) + 'px';
+//                    scope.menuStyle[goUp ? "bottom" : "top"] =
+//                        (goUp ? (winDim[1] - eventCoors[1]) : eventCoors[1]) + 'px';
+//                    scope.menuClass = {
+//                        "go-left": goLeft,
+//                        "go-up": goUp,
+//                        "context-menu-holder": true
+//                    };
+//
+//                    // Create the context menu
+//                    menu = $compile(MENU_TEMPLATE)(scope);
+//
+//                    // Add the menu to the body
+//                    body.append(menu);
+//
+//                    // Dismiss the menu when body is clicked elsewhere
+//                    body.on('click', dismiss);
+//
+//                    // Don't launch browser's context menu
+//                    event.preventDefault();
+//                }
+//            }
 
             // Iff the user is not on a mobile device, then when 
             // the context menu event occurs, show object actions instead

From 30c530178ad2d09cfbfa720e883a026db19d3d55 Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Mon, 27 Jul 2015 11:01:03 -0700
Subject: [PATCH 100/209] [Mobile] No ContextMenu

Removed context menu code
started to be used for the
long hold gesture.
---
 .../src/gestures/ContextMenuGesture.js        | 53 -------------------
 1 file changed, 53 deletions(-)

diff --git a/platform/representation/src/gestures/ContextMenuGesture.js b/platform/representation/src/gestures/ContextMenuGesture.js
index e7a9fe27f3..10f657f529 100644
--- a/platform/representation/src/gestures/ContextMenuGesture.js
+++ b/platform/representation/src/gestures/ContextMenuGesture.js
@@ -101,59 +101,6 @@ define(
                 // Don't launch browser's context menu
                 event.preventDefault();
             }
-            
-//            function showTouchMenu(event) {
-//                var winDim = [$window.innerWidth, $window.innerHeight],
-//                    eventCoors = [event.pageX, event.pageY],
-//                    menuDim = GestureConstants.MCT_MENU_DIMENSIONS,
-//                    body = $document.find('body'),
-//                    scope = $rootScope.$new(),
-//                    goLeft = eventCoors[0] + menuDim[0] > winDim[0],
-//                    goUp = eventCoors[1] + menuDim[1] > winDim[1],
-//                    menu;
-//
-//                // Remove the context menu
-//                function dismiss() {
-//                    menu.remove();
-//                    body.off("click", dismiss);
-//                    dismissExistingMenu = undefined;
-//                }
-//
-//                if (event.touches.length < 2) {
-//                    // Dismiss any menu which was already showing
-//                    if (dismissExistingMenu) {
-//                        dismissExistingMenu();
-//                    }
-//
-//                    // ...and record the presence of this menu.
-//                    dismissExistingMenu = dismiss;
-//
-//                    // Set up the scope, including menu positioning
-//                    scope.domainObject = domainObject;
-//                    scope.menuStyle = {};
-//                    scope.menuStyle[goLeft ? "right" : "left"] =
-//                        (goLeft ? (winDim[0] - eventCoors[0]) : eventCoors[0]) + 'px';
-//                    scope.menuStyle[goUp ? "bottom" : "top"] =
-//                        (goUp ? (winDim[1] - eventCoors[1]) : eventCoors[1]) + 'px';
-//                    scope.menuClass = {
-//                        "go-left": goLeft,
-//                        "go-up": goUp,
-//                        "context-menu-holder": true
-//                    };
-//
-//                    // Create the context menu
-//                    menu = $compile(MENU_TEMPLATE)(scope);
-//
-//                    // Add the menu to the body
-//                    body.append(menu);
-//
-//                    // Dismiss the menu when body is clicked elsewhere
-//                    body.on('click', dismiss);
-//
-//                    // Don't launch browser's context menu
-//                    event.preventDefault();
-//                }
-//            }
 
             // Iff the user is not on a mobile device, then when 
             // the context menu event occurs, show object actions instead

From 1d7a0fa48d3ea476657e454a60c11a4539d3ce4d Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Mon, 27 Jul 2015 11:30:29 -0700
Subject: [PATCH 101/209] [Mobile] Removed InfoGesture

Commented out infogesture.
---
 platform/commonUI/inspect/src/gestures/InfoGesture.js | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/platform/commonUI/inspect/src/gestures/InfoGesture.js b/platform/commonUI/inspect/src/gestures/InfoGesture.js
index 67107773f5..4cac0ff98a 100644
--- a/platform/commonUI/inspect/src/gestures/InfoGesture.js
+++ b/platform/commonUI/inspect/src/gestures/InfoGesture.js
@@ -125,9 +125,10 @@ define(
             if (!queryService.isMobile(navigator.userAgent)) {
                 // Show bubble (on a timeout) on mouse over
                 element.on('mouseenter', showBubble);
-            } else if (queryService.isMobile(navigator.userAgent)) {
-                element.on('touchstart', showTouchBubble);
             }
+//            else if (queryService.isMobile(navigator.userAgent)) {
+//                element.on('touchstart', showTouchBubble);
+//            }
 
             // Also make sure we dismiss bubble if representation is destroyed
             // before the mouse actually leaves it

From 617df739ee5f3ea02598b0078f1187b790d582b8 Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Mon, 27 Jul 2015 15:26:09 -0700
Subject: [PATCH 102/209] [Mobile] persistence

Removed elasticsearch.
---
 platform/persistence/elastic/bundle.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/platform/persistence/elastic/bundle.json b/platform/persistence/elastic/bundle.json
index e7dfa1ab9d..2e3be8e1df 100644
--- a/platform/persistence/elastic/bundle.json
+++ b/platform/persistence/elastic/bundle.json
@@ -17,7 +17,7 @@
             },
             {
                 "key": "ELASTIC_ROOT",
-                "value": "http://localhost:9200",
+                "value": "/elastic",
                 "priority": "fallback"
             },
             {

From 621ccc25ec781718170371622d551be22997e5de Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Mon, 27 Jul 2015 15:31:47 -0700
Subject: [PATCH 103/209] [Mobile] Back Arrow HTML

Created HTMl for back arrow,
next neew to hook up a click.
---
 platform/commonUI/browse/bundle.json          |  5 ----
 .../browse/res/templates/back-arrow.html      | 25 +++++++++++++++++++
 2 files changed, 25 insertions(+), 5 deletions(-)
 create mode 100644 platform/commonUI/browse/res/templates/back-arrow.html

diff --git a/platform/commonUI/browse/bundle.json b/platform/commonUI/browse/bundle.json
index 52f9c95075..1e41b57c7a 100644
--- a/platform/commonUI/browse/bundle.json
+++ b/platform/commonUI/browse/bundle.json
@@ -37,11 +37,6 @@
                 "key": "MenuArrowController",
                 "implementation": "MenuArrowController",
                 "depends": [ "$scope" ]
-            },
-            {
-                "key": "BackArrowController",
-                "implementation": "BackArrowController",
-                "depends": ["$location", "$route", "$location", "urlService" ]
             }
         ],
         "controls": [
diff --git a/platform/commonUI/browse/res/templates/back-arrow.html b/platform/commonUI/browse/res/templates/back-arrow.html
new file mode 100644
index 0000000000..525398f96a
--- /dev/null
+++ b/platform/commonUI/browse/res/templates/back-arrow.html
@@ -0,0 +1,25 @@
+<!--
+ Open MCT Web, Copyright (c) 2014-2015, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT Web includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+
+<span ng-controller="BrowseController">
+    <a class='icon ui-symbol mobile-back-arrow'>&lt;</a>
+</span>
\ No newline at end of file

From b0c42c12b76dd41b67a1a12cd8a354dccf46755b Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Mon, 27 Jul 2015 17:01:30 -0700
Subject: [PATCH 104/209] [Mobile] Back Arrow

Changes URL correctly that
is printed to the console. Is the
url to up one level of objects.
However not navigating to that
object.
---
 .../browse/res/templates/back-arrow.html      |  5 ++--
 .../commonUI/browse/src/BrowseController.js   | 12 +++------
 .../general/res/css/theme-espresso.css        |  4 ---
 .../general/res/sass/mobile/_layout.scss      |  2 +-
 .../general/src/services/UrlService.js        | 27 ++++++++++++++++++-
 .../inspect/src/gestures/InfoGesture.js       |  5 ++--
 6 files changed, 36 insertions(+), 19 deletions(-)

diff --git a/platform/commonUI/browse/res/templates/back-arrow.html b/platform/commonUI/browse/res/templates/back-arrow.html
index 525398f96a..69b8320734 100644
--- a/platform/commonUI/browse/res/templates/back-arrow.html
+++ b/platform/commonUI/browse/res/templates/back-arrow.html
@@ -20,6 +20,7 @@
  at runtime from the About dialog for additional information.
 -->
 
-<span ng-controller="BrowseController">
+<span ng-controller="BrowseController"
+      ng-click="backArrow()">
     <a class='icon ui-symbol mobile-back-arrow'>&lt;</a>
-</span>
\ No newline at end of file
+</span>
diff --git a/platform/commonUI/browse/src/BrowseController.js b/platform/commonUI/browse/src/BrowseController.js
index 9b5ffc4d71..eb8d5cceb2 100644
--- a/platform/commonUI/browse/src/BrowseController.js
+++ b/platform/commonUI/browse/src/BrowseController.js
@@ -63,10 +63,9 @@ define(
                 // path to new, addressed, path based on
                 // domainObject
                 $location.path(urlService.urlForLocation("browse", domainObject));
-                
             }
             
-            function backArr(domainObject) {
+            function backArr() {
                 var priorRoute = $route.current,
                     // Act as if params HADN'T changed to avoid page reload
                     unlisten;
@@ -79,13 +78,8 @@ define(
                     }
                     unlisten();
                 });
-                // urlService.urlForLocation used to adjust current
-                // path to new, addressed, path based on
-                // domainObject
-                                
-                
-                var thing = urlService.urlForLocation("browse", domainObject);
-                $location.path(thing);
+                console.log(urlService.urlForBack("browse", $scope.navigatedObject));
+                $location.path(urlService.urlForBack("browse", $scope.navigatedObject));
             }
 
             // Callback for updating the in-scope reference to the object
diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index 405b371e1a..f9a59ef071 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -890,10 +890,6 @@ mct-container {
     .object-header .label .context-available {
       opacity: 1 !important; } }
 
-/* line 170, ../sass/mobile/_layout.scss */
-.mobile-back-arrow {
-  font-size: 0.8em; }
-
 @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
   /* line 175, ../sass/mobile/_layout.scss */
   .desktop-hide {
diff --git a/platform/commonUI/general/res/sass/mobile/_layout.scss b/platform/commonUI/general/res/sass/mobile/_layout.scss
index 0a634b4235..f1d7c306b3 100644
--- a/platform/commonUI/general/res/sass/mobile/_layout.scss
+++ b/platform/commonUI/general/res/sass/mobile/_layout.scss
@@ -168,7 +168,7 @@
 }
 
 .mobile-back-arrow {
-    font-size: 0.8em;
+//    font-size: 0.8em;
 }
 
 
diff --git a/platform/commonUI/general/src/services/UrlService.js b/platform/commonUI/general/src/services/UrlService.js
index 4562059d0c..a700f288d4 100644
--- a/platform/commonUI/general/src/services/UrlService.js
+++ b/platform/commonUI/general/src/services/UrlService.js
@@ -55,6 +55,23 @@ define(
                 return path;
             }
             
+            function urlForLastLocation(mode, domainObject) {
+                var context = domainObject &&
+                        domainObject.getCapability('context'),
+                    objectPath = context ? context.getPath() : [],
+                    editedPath = (objectPath.length > 1) ? objectPath.slice(0, -1) : objectPath,
+                    ids = editedPath.map(function (domainObject) {
+                        return domainObject.getId();
+                    }),
+                    // Parses the path together. Starts with the 
+                    // default index.html file, then the mode passed
+                    // into the service, followed by ids in the url
+                    // joined by '/', and lastly the view path from
+                    // the current location
+                    path = mode + "/" + ids.slice(1).join("/");
+                return path;
+            }
+            
             // Uses the Url for the current location
             // from the urlForLocation function and
             // includes the view and the index path
@@ -65,6 +82,12 @@ define(
                 return newTabPath;
             }
             
+            function urlForBack(mode, domainObject) {
+                var newTabPath =
+                        "index.html#/" + urlForLastLocation(mode, domainObject);
+                return newTabPath;
+            }
+                        
             return {
                /**
                  * Returns the Url path for a specific domain object
@@ -84,7 +107,9 @@ define(
                  * @param {DomainObject} value of the domain object 
                  *        to get the path of
                  */
-                urlForLocation: urlForLocation
+                urlForLocation: urlForLocation,
+                
+                urlForBack: urlForBack
             };
         }
 
diff --git a/platform/commonUI/inspect/src/gestures/InfoGesture.js b/platform/commonUI/inspect/src/gestures/InfoGesture.js
index 67107773f5..4cac0ff98a 100644
--- a/platform/commonUI/inspect/src/gestures/InfoGesture.js
+++ b/platform/commonUI/inspect/src/gestures/InfoGesture.js
@@ -125,9 +125,10 @@ define(
             if (!queryService.isMobile(navigator.userAgent)) {
                 // Show bubble (on a timeout) on mouse over
                 element.on('mouseenter', showBubble);
-            } else if (queryService.isMobile(navigator.userAgent)) {
-                element.on('touchstart', showTouchBubble);
             }
+//            else if (queryService.isMobile(navigator.userAgent)) {
+//                element.on('touchstart', showTouchBubble);
+//            }
 
             // Also make sure we dismiss bubble if representation is destroyed
             // before the mouse actually leaves it

From e32403a75f55564088c2a70663eed01f8affbbd7 Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Tue, 28 Jul 2015 10:56:29 -0700
Subject: [PATCH 105/209] [Mobile] Clean-Up

Cleaned the unused code for the
backArrow and long touch gestures.
Commented out functions for later use
Currently shows the back arrow, however,
only will print to console on press.
Edited tests where mobile checks were breaking
and fixed.
---
 .../browse/res/templates/back-arrow.html      |  1 +
 .../browse/res/templates/browse-object.html   |  2 +-
 .../commonUI/browse/src/BrowseController.js   | 23 ++-------
 .../browse/test/BrowseControllerSpec.js       | 10 +++-
 platform/commonUI/general/bundle.json         |  2 +-
 .../general/res/css/theme-espresso.css        |  8 ++--
 .../general/res/sass/mobile/_layout.scss      |  1 +
 .../src/controllers/TreeNodeController.js     |  2 +-
 .../general/src/services/UrlService.js        | 35 ++++----------
 .../controllers/TreeNodeControllerSpec.js     |  4 +-
 .../inspect/src/gestures/InfoGesture.js       | 47 +++++++++----------
 11 files changed, 57 insertions(+), 78 deletions(-)

diff --git a/platform/commonUI/browse/res/templates/back-arrow.html b/platform/commonUI/browse/res/templates/back-arrow.html
index 69b8320734..5e54b06185 100644
--- a/platform/commonUI/browse/res/templates/back-arrow.html
+++ b/platform/commonUI/browse/res/templates/back-arrow.html
@@ -20,6 +20,7 @@
  at runtime from the About dialog for additional information.
 -->
 
+<!-- Back Arrow Icon used on mobile-->
 <span ng-controller="BrowseController"
       ng-click="backArrow()">
     <a class='icon ui-symbol mobile-back-arrow'>&lt;</a>
diff --git a/platform/commonUI/browse/res/templates/browse-object.html b/platform/commonUI/browse/res/templates/browse-object.html
index 7a5bd09470..1f69f45b0a 100644
--- a/platform/commonUI/browse/res/templates/browse-object.html
+++ b/platform/commonUI/browse/res/templates/browse-object.html
@@ -25,7 +25,7 @@
             <mct-representation key="'object-header'" mct-object="domainObject">
             </mct-representation>
         </div>
-        <!-- For now, on mobile the button bar is hidden-->
+        <!-- Temporarily, on mobile, the button bar is hidden-->
         <div class="btn-bar right abs mobile-hide">
             <mct-representation key="'action-group'"
                                 mct-object="domainObject"
diff --git a/platform/commonUI/browse/src/BrowseController.js b/platform/commonUI/browse/src/BrowseController.js
index eb8d5cceb2..21dad21744 100644
--- a/platform/commonUI/browse/src/BrowseController.js
+++ b/platform/commonUI/browse/src/BrowseController.js
@@ -64,23 +64,6 @@ define(
                 // domainObject
                 $location.path(urlService.urlForLocation("browse", domainObject));
             }
-            
-            function backArr() {
-                var priorRoute = $route.current,
-                    // Act as if params HADN'T changed to avoid page reload
-                    unlisten;
-
-                unlisten = $scope.$on('$locationChangeSuccess', function () {
-                    // Checks path to make sure /browse/ is at front
-                    // if so, change $route.current                    
-                    if ($location.path().indexOf("/browse/") === 0) {
-                        $route.current = priorRoute;
-                    }
-                    unlisten();
-                });
-                console.log(urlService.urlForBack("browse", $scope.navigatedObject));
-                $location.path(urlService.urlForBack("browse", $scope.navigatedObject));
-            }
 
             // Callback for updating the in-scope reference to the object
             // that is currently navigated-to.
@@ -142,6 +125,10 @@ define(
                     navigateTo(domainObject);
                 }
             }
+            
+            function updateRouteBackArrow() {
+                console.log("Back Arrow");
+            }
 
             // Load the root object, put it in the scope.
             // Also, load its immediate children, and (possibly)
@@ -172,7 +159,7 @@ define(
                 navigationService.removeListener(setNavigation);
             });
             
-            $scope.backArrow = backArr;
+            $scope.backArrow = updateRouteBackArrow;
 
         }
 
diff --git a/platform/commonUI/browse/test/BrowseControllerSpec.js b/platform/commonUI/browse/test/BrowseControllerSpec.js
index b61a856d41..339eb7febd 100644
--- a/platform/commonUI/browse/test/BrowseControllerSpec.js
+++ b/platform/commonUI/browse/test/BrowseControllerSpec.js
@@ -52,7 +52,7 @@ define(
             beforeEach(function () {
                 mockScope = jasmine.createSpyObj(
                     "$scope",
-                    [ "$on", "$watch", "treeSlide" ]
+                    [ "$on", "$watch", "treeSlide", "backArrow" ]
                 );
                 mockRoute = { current: { params: {} } };
                 mockLocation = jasmine.createSpyObj(
@@ -244,7 +244,13 @@ define(
                     mockUrlService.urlForLocation(mockMode, mockNextObject)
                 );
             });
-
+            
+            // Mocks the back arrow call that
+            // lets the html code know the back
+            // arrow navigation needs to be done
+            it("calls the backArrow function", function () {
+                mockScope.backArrow();
+            });
         });
     }
 );
diff --git a/platform/commonUI/general/bundle.json b/platform/commonUI/general/bundle.json
index 157c8c834b..53486c3f0e 100644
--- a/platform/commonUI/general/bundle.json
+++ b/platform/commonUI/general/bundle.json
@@ -65,7 +65,7 @@
             {
                 "key": "TreeNodeController",
                 "implementation": "controllers/TreeNodeController.js",
-                "depends": [ "$scope", "$timeout", "$rootScope", "queryService" ]
+                "depends": [ "$scope", "$timeout", "queryService" ]
             },
             {
                 "key": "ActionGroupController",
diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index f9a59ef071..4cb2a1336b 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -891,22 +891,22 @@ mct-container {
       opacity: 1 !important; } }
 
 @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-  /* line 175, ../sass/mobile/_layout.scss */
+  /* line 176, ../sass/mobile/_layout.scss */
   .desktop-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), 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 182, ../sass/mobile/_layout.scss */
+  /* line 183, ../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 189, ../sass/mobile/_layout.scss */
+  /* line 190, ../sass/mobile/_layout.scss */
   .phone-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), 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 195, ../sass/mobile/_layout.scss */
+  /* line 196, ../sass/mobile/_layout.scss */
   .tree-holder {
     overflow-x: hidden !important; } }
 
diff --git a/platform/commonUI/general/res/sass/mobile/_layout.scss b/platform/commonUI/general/res/sass/mobile/_layout.scss
index f1d7c306b3..b7704681e7 100644
--- a/platform/commonUI/general/res/sass/mobile/_layout.scss
+++ b/platform/commonUI/general/res/sass/mobile/_layout.scss
@@ -168,6 +168,7 @@
 }
 
 .mobile-back-arrow {
+//    display: none !important;
 //    font-size: 0.8em;
 }
 
diff --git a/platform/commonUI/general/src/controllers/TreeNodeController.js b/platform/commonUI/general/src/controllers/TreeNodeController.js
index 70d38d9b77..27ef3bfd49 100644
--- a/platform/commonUI/general/src/controllers/TreeNodeController.js
+++ b/platform/commonUI/general/src/controllers/TreeNodeController.js
@@ -50,7 +50,7 @@ define(
          * expand-to-show-navigated-object behavior.)
          * @constructor
          */
-        function TreeNodeController($scope, $timeout, $rootScope, queryService) {
+        function TreeNodeController($scope, $timeout, queryService) {
             var selectedObject = ($scope.ngModel || {}).selectedObject,
                 isSelected = false,
                 hasBeenExpanded = false;
diff --git a/platform/commonUI/general/src/services/UrlService.js b/platform/commonUI/general/src/services/UrlService.js
index a700f288d4..3363dc1d49 100644
--- a/platform/commonUI/general/src/services/UrlService.js
+++ b/platform/commonUI/general/src/services/UrlService.js
@@ -55,22 +55,13 @@ define(
                 return path;
             }
             
-            function urlForLastLocation(mode, domainObject) {
-                var context = domainObject &&
-                        domainObject.getCapability('context'),
-                    objectPath = context ? context.getPath() : [],
-                    editedPath = (objectPath.length > 1) ? objectPath.slice(0, -1) : objectPath,
-                    ids = editedPath.map(function (domainObject) {
-                        return domainObject.getId();
-                    }),
-                    // Parses the path together. Starts with the 
-                    // default index.html file, then the mode passed
-                    // into the service, followed by ids in the url
-                    // joined by '/', and lastly the view path from
-                    // the current location
-                    path = mode + "/" + ids.slice(1).join("/");
-                return path;
-            }
+//            function idForLevelArrow(domainObject) {
+//                var context = domainObject &&
+//                        domainObject.getCapability('context'),
+//                    objectPath = context ? context.getPath() : [],
+//                    id = objectPath[objectPath.length - 2];
+//                return id;
+//            }
             
             // Uses the Url for the current location
             // from the urlForLocation function and
@@ -81,13 +72,7 @@ define(
                         "index.html#" + urlForLocation(mode, domainObject) + viewPath;
                 return newTabPath;
             }
-            
-            function urlForBack(mode, domainObject) {
-                var newTabPath =
-                        "index.html#/" + urlForLastLocation(mode, domainObject);
-                return newTabPath;
-            }
-                        
+             
             return {
                /**
                  * Returns the Url path for a specific domain object
@@ -107,9 +92,9 @@ define(
                  * @param {DomainObject} value of the domain object 
                  *        to get the path of
                  */
-                urlForLocation: urlForLocation,
+                urlForLocation: urlForLocation
                 
-                urlForBack: urlForBack
+//                idForLevelArrow: idForLevelArrow
             };
         }
 
diff --git a/platform/commonUI/general/test/controllers/TreeNodeControllerSpec.js b/platform/commonUI/general/test/controllers/TreeNodeControllerSpec.js
index 394d71b88a..2ce5c9f9fc 100644
--- a/platform/commonUI/general/test/controllers/TreeNodeControllerSpec.js
+++ b/platform/commonUI/general/test/controllers/TreeNodeControllerSpec.js
@@ -187,7 +187,9 @@ define(
             });
             
             it("check if tree node is in a mobile device", function () {
-                controller.checkMobile();
+                if (controller) {
+                    controller.checkMobile();
+                }
             });
         });
     }
diff --git a/platform/commonUI/inspect/src/gestures/InfoGesture.js b/platform/commonUI/inspect/src/gestures/InfoGesture.js
index 4cac0ff98a..3634042212 100644
--- a/platform/commonUI/inspect/src/gestures/InfoGesture.js
+++ b/platform/commonUI/inspect/src/gestures/InfoGesture.js
@@ -52,12 +52,12 @@ define(
                 mousePosition = [ event.clientX, event.clientY ];
             }
             
-            function trackTouchPosition(event) {
-                var tEvent = event.changedTouches[0];
-                // Record mouse position, so bubble can be shown at latest
-                // mouse position (not just where the mouse entered)
-                touchPosition = [ tEvent.clientX + 44, tEvent.clientY ];
-            }
+//            function trackTouchPosition(event) {
+//                var tEvent = event.changedTouches[0];
+//                // Record mouse position, so bubble can be shown at latest
+//                // mouse position (not just where the mouse entered)
+//                touchPosition = [ tEvent.clientX + 44, tEvent.clientY ];
+//            }
 
             function hideBubble() {
                 // If a bubble is showing, dismiss it
@@ -102,22 +102,22 @@ define(
                 element.on('mouseleave', hideBubble);
             }
             
-            function showTouchBubble(event) {
-                // Makes sure user is only touching one place
-                if (event.touches.length < 2) {
-                    trackTouchPosition(event);
-                    pendingBubble = $timeout(function () {
-                        dismissBubble = infoService.display(
-                            "info-table",
-                            domainObject.getModel().name,
-                            domainObject.useCapability('metadata'),
-                            touchPosition
-                        );
-                    }, touchDELAY);
-
-                    element.on('touchend', hideBubble);
-                }
-            }
+//            function showTouchBubble(event) {
+//                // Makes sure user is only touching one place
+//                if (event.touches.length < 2) {
+//                    trackTouchPosition(event);
+//                    pendingBubble = $timeout(function () {
+//                        dismissBubble = infoService.display(
+//                            "info-table",
+//                            domainObject.getModel().name,
+//                            domainObject.useCapability('metadata'),
+//                            touchPosition
+//                        );
+//                    }, touchDELAY);
+//
+//                    element.on('touchend', hideBubble);
+//                }
+//            }
             
             // Checks if you are on a mobile device, if the device is
             // not mobile (queryService.isMobile() = false), then
@@ -126,9 +126,6 @@ define(
                 // Show bubble (on a timeout) on mouse over
                 element.on('mouseenter', showBubble);
             }
-//            else if (queryService.isMobile(navigator.userAgent)) {
-//                element.on('touchstart', showTouchBubble);
-//            }
 
             // Also make sure we dismiss bubble if representation is destroyed
             // before the mouse actually leaves it

From 2a4943f58480c6a00d4d614c2bc90a09930e0f07 Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Tue, 28 Jul 2015 10:58:22 -0700
Subject: [PATCH 106/209] [Mobile] Console

Removed call to console so
mvn clean install would compile.
---
 platform/commonUI/browse/src/BrowseController.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/platform/commonUI/browse/src/BrowseController.js b/platform/commonUI/browse/src/BrowseController.js
index 21dad21744..b7e8e796ff 100644
--- a/platform/commonUI/browse/src/BrowseController.js
+++ b/platform/commonUI/browse/src/BrowseController.js
@@ -127,7 +127,7 @@ define(
             }
             
             function updateRouteBackArrow() {
-                console.log("Back Arrow");
+//                console.log("Back Arrow");
             }
 
             // Load the root object, put it in the scope.

From 62714bb97ce4354699c40c9bfcc06b7b41f2d018 Mon Sep 17 00:00:00 2001
From: Pete Richards <peter.l.richards@nasa.gov>
Date: Tue, 28 Jul 2015 09:40:16 -0700
Subject: [PATCH 107/209] [Continuous] Deploy to staging-un

---
 circle.yml | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/circle.yml b/circle.yml
index b8f367a604..2a79a5ed93 100644
--- a/circle.yml
+++ b/circle.yml
@@ -4,3 +4,7 @@ deployment:
     commands:
       - ./build-docs.sh
       - git push git@heroku.com:openmctweb-demo.git $CIRCLE_SHA1:refs/heads/master
+  openmctweb-staging-un:
+    branch: search
+    heroku:
+      appname: openmctweb-staging-un

From 21964fe68e8956c18f60912a348ee7052504cec5 Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Tue, 28 Jul 2015 11:08:10 -0700
Subject: [PATCH 108/209] [Mobile] Demo Setup

Added lines to circle.yml
for mobile demo branch.
---
 circle.yml | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/circle.yml b/circle.yml
index 2a79a5ed93..3ee4c7f1c3 100644
--- a/circle.yml
+++ b/circle.yml
@@ -8,3 +8,7 @@ deployment:
     branch: search
     heroku:
       appname: openmctweb-staging-un
+  openmctweb-staging-deux:
+    branch: mobile
+    heroku:
+      appname: openmctweb-staging-deux
\ No newline at end of file

From 3c6c420023c43a87309d17630b7b2d45c31c18b0 Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Tue, 28 Jul 2015 15:08:14 -0700
Subject: [PATCH 109/209] [Mobile] Back Arrow

Back Arrow implemented
by getting parent and then
navigating to it.
---
 platform/commonUI/browse/bundle.json           |  1 +
 .../browse/res/templates/back-arrow.html       |  2 +-
 .../res/templates/browse/object-header.html    |  2 +-
 .../commonUI/browse/src/BrowseController.js    | 18 ++++++++++++++----
 .../general/res/css/theme-espresso.css         |  9 +++++++--
 .../general/res/sass/mobile/_layout.scss       |  7 +++++++
 .../general/src/services/UrlService.js         | 10 ----------
 7 files changed, 31 insertions(+), 18 deletions(-)

diff --git a/platform/commonUI/browse/bundle.json b/platform/commonUI/browse/bundle.json
index 1e41b57c7a..6852c3e8e6 100644
--- a/platform/commonUI/browse/bundle.json
+++ b/platform/commonUI/browse/bundle.json
@@ -85,6 +85,7 @@
             },
             {
                 "key": "back-arrow",
+                "uses": [ "type", "action" ],
                 "templateUrl": "templates/back-arrow.html"
             }
         ],
diff --git a/platform/commonUI/browse/res/templates/back-arrow.html b/platform/commonUI/browse/res/templates/back-arrow.html
index 5e54b06185..ceb3df0ef2 100644
--- a/platform/commonUI/browse/res/templates/back-arrow.html
+++ b/platform/commonUI/browse/res/templates/back-arrow.html
@@ -22,6 +22,6 @@
 
 <!-- Back Arrow Icon used on mobile-->
 <span ng-controller="BrowseController"
-      ng-click="backArrow()">
+      ng-click='backArrow()'>
     <a class='icon ui-symbol mobile-back-arrow'>&lt;</a>
 </span>
diff --git a/platform/commonUI/browse/res/templates/browse/object-header.html b/platform/commonUI/browse/res/templates/browse/object-header.html
index 8687646271..884f4fa888 100644
--- a/platform/commonUI/browse/res/templates/browse/object-header.html
+++ b/platform/commonUI/browse/res/templates/browse/object-header.html
@@ -21,7 +21,7 @@
 -->
 <div class='object-header object-header-mobile'>
     <span class="label s-label">
-        <mct-representation key="'back-arrow'" mct-object='domainObject'></mct-representation>
+        <mct-representation key="'back-arrow'"></mct-representation>
         <span class='type-icon icon ui-symbol'>{{type.getGlyph()}}</span>
         <span ng-if="parameters.mode" class='action'>{{parameters.mode}}</span>
         <span class='type-name'>{{type.getName()}}</span>
diff --git a/platform/commonUI/browse/src/BrowseController.js b/platform/commonUI/browse/src/BrowseController.js
index b7e8e796ff..cc4f06b243 100644
--- a/platform/commonUI/browse/src/BrowseController.js
+++ b/platform/commonUI/browse/src/BrowseController.js
@@ -126,8 +126,16 @@ define(
                 }
             }
             
-            function updateRouteBackArrow() {
-//                console.log("Back Arrow");
+            // Uses the current navigation to get the 
+            // current ContextCapability, then the
+            // parent is gotten from that. If the parent
+            // is not the root, then user is navigated to
+            // parent
+            function navigateToParent() {
+                var parent = navigationService.getNavigation().getCapability('context').getParent();
+                if (parent.getId() !== ROOT_ID) {
+                    navigateTo(parent);
+                }
             }
 
             // Load the root object, put it in the scope.
@@ -144,10 +152,12 @@ define(
                 selectedObject: navigationService.getNavigation()
             };
             
+            // SlideMenu boolean used to hide and show
+            // tree menu
             $scope.treeSlide = function () {
                 $scope.treeClass = !$scope.treeClass;
             };
-
+            
             // Listen for changes in navigation state.
             navigationService.addListener(setNavigation);
 
@@ -159,7 +169,7 @@ define(
                 navigationService.removeListener(setNavigation);
             });
             
-            $scope.backArrow = updateRouteBackArrow;
+            $scope.backArrow = navigateToParent;
 
         }
 
diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index 4cb2a1336b..f0109afbbf 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -900,13 +900,18 @@ mct-container {
   .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) {
+@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 190, ../sass/mobile/_layout.scss */
+  .mobile-unhide {
+    display: inline-block; } }
+
+@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 197, ../sass/mobile/_layout.scss */
   .phone-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), 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 196, ../sass/mobile/_layout.scss */
+  /* line 203, ../sass/mobile/_layout.scss */
   .tree-holder {
     overflow-x: hidden !important; } }
 
diff --git a/platform/commonUI/general/res/sass/mobile/_layout.scss b/platform/commonUI/general/res/sass/mobile/_layout.scss
index b7704681e7..c36d513671 100644
--- a/platform/commonUI/general/res/sass/mobile/_layout.scss
+++ b/platform/commonUI/general/res/sass/mobile/_layout.scss
@@ -186,6 +186,13 @@
     }
 }
 
+// Hides objects on phone and tablet
+.mobile-unhide {
+    @include phoneandtablet {
+        display: inline-block;
+    }
+}
+
 // Hides objects only on the phone
 .phone-hide {
     @include phone {
diff --git a/platform/commonUI/general/src/services/UrlService.js b/platform/commonUI/general/src/services/UrlService.js
index 3363dc1d49..edb5f6235b 100644
--- a/platform/commonUI/general/src/services/UrlService.js
+++ b/platform/commonUI/general/src/services/UrlService.js
@@ -55,14 +55,6 @@ define(
                 return path;
             }
             
-//            function idForLevelArrow(domainObject) {
-//                var context = domainObject &&
-//                        domainObject.getCapability('context'),
-//                    objectPath = context ? context.getPath() : [],
-//                    id = objectPath[objectPath.length - 2];
-//                return id;
-//            }
-            
             // Uses the Url for the current location
             // from the urlForLocation function and
             // includes the view and the index path
@@ -93,8 +85,6 @@ define(
                  *        to get the path of
                  */
                 urlForLocation: urlForLocation
-                
-//                idForLevelArrow: idForLevelArrow
             };
         }
 

From a073ef69ac7d436070bfd90b5c1d94a57ddf40b6 Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Tue, 28 Jul 2015 15:15:42 -0700
Subject: [PATCH 110/209] [Mobile] Back Arrow

Shifted Back Arrow down to
align with header.
---
 platform/commonUI/browse/res/templates/back-arrow.html |  2 +-
 platform/commonUI/general/res/css/theme-espresso.css   | 10 +++++-----
 platform/commonUI/general/res/sass/mobile/_layout.scss |  6 ------
 3 files changed, 6 insertions(+), 12 deletions(-)

diff --git a/platform/commonUI/browse/res/templates/back-arrow.html b/platform/commonUI/browse/res/templates/back-arrow.html
index ceb3df0ef2..b4003a8a9b 100644
--- a/platform/commonUI/browse/res/templates/back-arrow.html
+++ b/platform/commonUI/browse/res/templates/back-arrow.html
@@ -23,5 +23,5 @@
 <!-- Back Arrow Icon used on mobile-->
 <span ng-controller="BrowseController"
       ng-click='backArrow()'>
-    <a class='icon ui-symbol mobile-back-arrow'>&lt;</a>
+    <a class='type-icon icon ui-symbol'>&lt;</a>
 </span>
diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index f0109afbbf..394e6ac721 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -891,27 +891,27 @@ mct-container {
       opacity: 1 !important; } }
 
 @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-  /* line 176, ../sass/mobile/_layout.scss */
+  /* line 170, ../sass/mobile/_layout.scss */
   .desktop-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), 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 183, ../sass/mobile/_layout.scss */
+  /* line 177, ../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), 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 190, ../sass/mobile/_layout.scss */
+  /* line 184, ../sass/mobile/_layout.scss */
   .mobile-unhide {
     display: inline-block; } }
 
 @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 197, ../sass/mobile/_layout.scss */
+  /* line 191, ../sass/mobile/_layout.scss */
   .phone-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), 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 203, ../sass/mobile/_layout.scss */
+  /* line 197, ../sass/mobile/_layout.scss */
   .tree-holder {
     overflow-x: hidden !important; } }
 
diff --git a/platform/commonUI/general/res/sass/mobile/_layout.scss b/platform/commonUI/general/res/sass/mobile/_layout.scss
index c36d513671..806c7547f3 100644
--- a/platform/commonUI/general/res/sass/mobile/_layout.scss
+++ b/platform/commonUI/general/res/sass/mobile/_layout.scss
@@ -167,12 +167,6 @@
     }
 }
 
-.mobile-back-arrow {
-//    display: none !important;
-//    font-size: 0.8em;
-}
-
-
 .desktop-hide {
     @include desktop {
         display: none;

From 356fa73c919360b3e513ddc044f32bd720a56deb Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Tue, 28 Jul 2015 15:55:22 -0700
Subject: [PATCH 111/209] [Mobile] Tests

Test created for backArrow
that spies on all objects
used to find parent.
---
 .../browse/test/BrowseControllerSpec.js       | 33 +++++++++++++++++++
 1 file changed, 33 insertions(+)

diff --git a/platform/commonUI/browse/test/BrowseControllerSpec.js b/platform/commonUI/browse/test/BrowseControllerSpec.js
index 339eb7febd..181121574a 100644
--- a/platform/commonUI/browse/test/BrowseControllerSpec.js
+++ b/platform/commonUI/browse/test/BrowseControllerSpec.js
@@ -249,6 +249,39 @@ define(
             // lets the html code know the back
             // arrow navigation needs to be done
             it("calls the backArrow function", function () {
+                var mockContext = jasmine.createSpyObj('context', ['getParent']),
+                    mockParent  = jasmine.createSpyObj(
+                        "domainObject",
+                        [ "getId", "getCapability", "getModel", "useCapability" ]
+                    );
+                mockNavigationService = jasmine.createSpyObj(
+                    "navigationService",
+                    [
+                        "getNavigation",
+                        "setNavigation",
+                        "addListener",
+                        "removeListener"
+                    ]
+                );
+                
+                mockRoute.current.params.ids = "mine/junk";
+                mockParent.getId.andReturn("mine");
+                
+                mockDomainObject.getCapability.andCallFake(function (c) {
+                    return c === 'context' && mockContext;
+                });
+                
+                mockNavigationService.getNavigation.andReturn(mockDomainObject);
+                mockContext.getParent.andReturn(mockParent);
+                
+                controller = new BrowseController(
+                    mockScope,
+                    mockRoute,
+                    mockLocation,
+                    mockObjectService,
+                    mockNavigationService
+                );
+                
                 mockScope.backArrow();
             });
         });

From 84b9e4d781a8d7a6c89ede45bd9a57ebd33b390f Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Tue, 28 Jul 2015 17:09:15 -0700
Subject: [PATCH 112/209] [Mobile] Context Menu

Context menu next to object header
now dismisses when touching away
from it. Also, when long touching
an object, the context menu appears.
Set on 500ms timeout.
---
 .../inspect/src/gestures/InfoGesture.js       | 29 +------------------
 platform/representation/bundle.json           |  4 +--
 .../src/actions/ContextMenuAction.js          | 25 ++++++++++++----
 .../src/gestures/ContextMenuGesture.js        | 26 +++++++++++++++--
 4 files changed, 46 insertions(+), 38 deletions(-)

diff --git a/platform/commonUI/inspect/src/gestures/InfoGesture.js b/platform/commonUI/inspect/src/gestures/InfoGesture.js
index 3634042212..4792445f6b 100644
--- a/platform/commonUI/inspect/src/gestures/InfoGesture.js
+++ b/platform/commonUI/inspect/src/gestures/InfoGesture.js
@@ -42,22 +42,13 @@ define(
             var dismissBubble,
                 pendingBubble,
                 mousePosition,
-                touchPosition,
-                scopeOff,
-                touchDELAY = 500;
+                scopeOff;
 
             function trackPosition(event) {
                 // Record mouse position, so bubble can be shown at latest
                 // mouse position (not just where the mouse entered)
                 mousePosition = [ event.clientX, event.clientY ];
             }
-            
-//            function trackTouchPosition(event) {
-//                var tEvent = event.changedTouches[0];
-//                // Record mouse position, so bubble can be shown at latest
-//                // mouse position (not just where the mouse entered)
-//                touchPosition = [ tEvent.clientX + 44, tEvent.clientY ];
-//            }
 
             function hideBubble() {
                 // If a bubble is showing, dismiss it
@@ -76,7 +67,6 @@ define(
                 // Also clear mouse position so we don't have a ton of tiny
                 // arrays allocated while user mouses over things
                 mousePosition = undefined;
-                touchPosition = undefined;
             }
 
             function showBubble(event) {
@@ -102,23 +92,6 @@ define(
                 element.on('mouseleave', hideBubble);
             }
             
-//            function showTouchBubble(event) {
-//                // Makes sure user is only touching one place
-//                if (event.touches.length < 2) {
-//                    trackTouchPosition(event);
-//                    pendingBubble = $timeout(function () {
-//                        dismissBubble = infoService.display(
-//                            "info-table",
-//                            domainObject.getModel().name,
-//                            domainObject.useCapability('metadata'),
-//                            touchPosition
-//                        );
-//                    }, touchDELAY);
-//
-//                    element.on('touchend', hideBubble);
-//                }
-//            }
-            
             // Checks if you are on a mobile device, if the device is
             // not mobile (queryService.isMobile() = false), then
             // the pendingBubble and therefore hovering is allowed
diff --git a/platform/representation/bundle.json b/platform/representation/bundle.json
index b8370f1682..3eeaf2d258 100644
--- a/platform/representation/bundle.json
+++ b/platform/representation/bundle.json
@@ -26,7 +26,7 @@
             {
                 "key": "menu",
                 "implementation": "gestures/ContextMenuGesture.js",
-                "depends": ["queryService"]
+                "depends": ["$timeout", "queryService"]
             }
         ],
         "components": [
@@ -54,7 +54,7 @@
             {
                 "key": "menu",
                 "implementation": "actions/ContextMenuAction.js",
-                "depends": [ "$compile", "$document", "$window", "$rootScope" ]
+                "depends": [ "$compile", "$document", "$window", "$rootScope", "queryService" ]
             }
         ]
     }
diff --git a/platform/representation/src/actions/ContextMenuAction.js b/platform/representation/src/actions/ContextMenuAction.js
index 390531053e..244d6a0b0d 100644
--- a/platform/representation/src/actions/ContextMenuAction.js
+++ b/platform/representation/src/actions/ContextMenuAction.js
@@ -47,7 +47,7 @@ define(
          * @param actionContexr the context in which the action
          *                      should be performed
          */
-        function ContextMenuAction($compile, $document, $window, $rootScope, actionContext) {
+        function ContextMenuAction($compile, $document, $window, $rootScope, queryService, actionContext) {
             
             function perform() {
                 var winDim = [$window.innerWidth, $window.innerHeight],
@@ -94,13 +94,26 @@ define(
                 body.append(menu);
                 
                 // Stop propagation so that clicks on the menu do not close the menu
-                menu.on('mousedown', function (event) {
-                    event.stopPropagation();
-                });
+                // Stop propagation so that touches on the menu do not close the menu
+                if (!queryService.isMobile(navigator.userAgent)) {
+                    menu.on('mousedown', function (event) {
+                        event.stopPropagation();
+                    });
+                } else if (queryService.isMobile(navigator.userAgent)) {
+                    menu.on('touchstart', function (event) {
+                        event.stopPropagation();
+                    });
+                }
                 
-                // Dismiss the menu when body is clicked elsewhere
+                // Dismiss the menu when body is clicked/touched elsewhere
                 // ('mousedown' because 'click' breaks left-click context menus)
-                body.on('mousedown', dismiss);
+                // ('touchstart' because 'touch' breaks context menus up)
+                if (!queryService.isMobile(navigator.userAgent)) {
+                    body.on('mousedown', dismiss);
+                } else if (queryService.isMobile(navigator.userAgent)) {
+                    body.on('touchstart', dismiss);
+                }
+                
 
                 // Don't launch browser's context menu
                 actionContext.event.preventDefault();
diff --git a/platform/representation/src/gestures/ContextMenuGesture.js b/platform/representation/src/gestures/ContextMenuGesture.js
index 34e11e039c..576c5eb66f 100644
--- a/platform/representation/src/gestures/ContextMenuGesture.js
+++ b/platform/representation/src/gestures/ContextMenuGesture.js
@@ -39,9 +39,11 @@ define(
          * @param {DomainObject} domainObject the object on which actions
          *                       in the context menu will be performed
          */
-        function ContextMenuGesture(queryService, element, domainObject) {
+        function ContextMenuGesture($timeout, queryService, element, domainObject) {
             var actionContext,
-                stop;
+                stop,
+                isPressing,
+                longTouchTime = 500;
             
             // When context menu event occurs, show object actions instead
             if (!queryService.isMobile(navigator.userAgent)) {
@@ -49,6 +51,26 @@ define(
                     actionContext = {key: 'menu', domainObject: domainObject, event: event};
                     stop = domainObject.getCapability('action').perform(actionContext);
                 });
+            } else if (queryService.isMobile(navigator.userAgent)) {
+                // If on mobile device, then start timeout for the single touch event
+                // during the timeout 'isPressing' is true.
+                element.on('touchstart', function (event) {
+                    if (event.touches.length < 2) {
+                        isPressing = true;
+                        // After the timeout, if 'isPressing' is
+                        // true, display context menu for object
+                        $timeout(function () {
+                            if (isPressing) {
+                                actionContext = {key: 'menu', domainObject: domainObject, event: event};
+                                stop = domainObject.getCapability('action').perform(actionContext);
+                            }
+                        }, longTouchTime);
+                    }
+                });
+                // Whenever the touch event ends, 'isPressing' is false.
+                element.on('touchend', function (event) {
+                    isPressing = false;
+                });
             }
 
             return {

From 7cc14a195b968ad337278d35b6e4ccdccee18fc9 Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Wed, 29 Jul 2015 10:00:03 -0700
Subject: [PATCH 113/209] [Mobile] Tests/Header

Removes back arrow on desktops.
Also added queryService to tests
for the context menu action and
gesture.
---
 .../browse/res/templates/browse/object-header.html         | 2 +-
 .../representation/test/actions/ContextMenuActionSpec.js   | 3 +++
 .../representation/test/gestures/ContextMenuGestureSpec.js | 7 +++++--
 3 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/platform/commonUI/browse/res/templates/browse/object-header.html b/platform/commonUI/browse/res/templates/browse/object-header.html
index 884f4fa888..a7bb8029fc 100644
--- a/platform/commonUI/browse/res/templates/browse/object-header.html
+++ b/platform/commonUI/browse/res/templates/browse/object-header.html
@@ -21,7 +21,7 @@
 -->
 <div class='object-header object-header-mobile'>
     <span class="label s-label">
-        <mct-representation key="'back-arrow'"></mct-representation>
+        <mct-representation class="desktop-hide" key="'back-arrow'"></mct-representation>
         <span class='type-icon icon ui-symbol'>{{type.getGlyph()}}</span>
         <span ng-if="parameters.mode" class='action'>{{parameters.mode}}</span>
         <span class='type-name'>{{type.getName()}}</span>
diff --git a/platform/representation/test/actions/ContextMenuActionSpec.js b/platform/representation/test/actions/ContextMenuActionSpec.js
index 73b877ddc3..8d94a30766 100644
--- a/platform/representation/test/actions/ContextMenuActionSpec.js
+++ b/platform/representation/test/actions/ContextMenuActionSpec.js
@@ -43,6 +43,7 @@ define(
                 mockBody,
                 mockWindow,
                 mockRootScope,
+                mockQueryService,
                 mockScope,
                 mockElement,
                 mockDomainObject,
@@ -58,6 +59,7 @@ define(
                 mockBody = jasmine.createSpyObj("body", JQLITE_FUNCTIONS);
                 mockWindow = { innerWidth: MENU_DIMENSIONS[0] * 4, innerHeight: MENU_DIMENSIONS[1] * 4 };
                 mockRootScope = jasmine.createSpyObj("$rootScope", ["$new"]);
+                mockQueryService = jasmine.createSpyObj("queryService", ["isMobile"]);
                 mockScope = {};
                 mockElement = jasmine.createSpyObj("element", JQLITE_FUNCTIONS);
                 mockDomainObject = jasmine.createSpyObj("domainObject", DOMAIN_OBJECT_METHODS);
@@ -77,6 +79,7 @@ define(
                     mockDocument,
                     mockWindow,
                     mockRootScope,
+                    mockQueryService,
                     mockActionContext
                 );
             });
diff --git a/platform/representation/test/gestures/ContextMenuGestureSpec.js b/platform/representation/test/gestures/ContextMenuGestureSpec.js
index 655e68ff2e..ec687e3983 100644
--- a/platform/representation/test/gestures/ContextMenuGestureSpec.js
+++ b/platform/representation/test/gestures/ContextMenuGestureSpec.js
@@ -35,7 +35,8 @@ define(
 
 
         describe("The 'context menu' gesture", function () {
-            var mockElement,
+            var mockTimeout,
+                mockElement,
                 mockQueryService,
                 mockDomainObject,
                 mockEvent,
@@ -44,11 +45,13 @@ define(
 
             beforeEach(function () {
                 mockElement = jasmine.createSpyObj("element", JQLITE_FUNCTIONS);
+                mockTimeout = jasmine.createSpy("$timeout");
+                mockQueryService = jasmine.createSpyObj("queryService", ["isMobile"]);
                 mockDomainObject = jasmine.createSpyObj("domainObject", DOMAIN_OBJECT_METHODS);
                 mockEvent = jasmine.createSpyObj("event", ["preventDefault"]);
                 mockQueryService = jasmine.createSpyObj("queryService", ["isMobile"]);
                 
-                gesture = new ContextMenuGesture(mockQueryService, mockElement, mockDomainObject);
+                gesture = new ContextMenuGesture(mockTimeout, mockQueryService, mockElement, mockDomainObject);
 
                 // Capture the contextmenu callback
                 fireGesture =  mockElement.on.mostRecentCall.args[1];

From d2625205942043007cae2fbc51ce0bde0625bdb3 Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Wed, 29 Jul 2015 10:25:09 -0700
Subject: [PATCH 114/209] [Mobile] Tree menu Open

Tree menu select arrow button's width
is now size of full button. Prior to this
the pressable area was less and therefore
less responsive.
---
 platform/commonUI/general/res/css/tree.css           | 10 ++++++----
 platform/commonUI/general/res/sass/mobile/_tree.scss |  2 ++
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/platform/commonUI/general/res/css/tree.css b/platform/commonUI/general/res/css/tree.css
index 01c5a20921..a0b8f7286d 100644
--- a/platform/commonUI/general/res/css/tree.css
+++ b/platform/commonUI/general/res/css/tree.css
@@ -342,14 +342,16 @@ ul.tree {
       ul.tree li span.tree-item .view-control {
         position: absolute;
         right: 13px;
-        font-size: 1.8em; }
-      /* line 42, ../sass/mobile/_tree.scss */
+        font-size: 1.8em;
+        right: 0px;
+        width: auto; }
+      /* line 44, ../sass/mobile/_tree.scss */
       ul.tree li span.tree-item .label {
         left: 3px;
         font-size: 1.2em; }
-        /* line 49, ../sass/mobile/_tree.scss */
+        /* line 51, ../sass/mobile/_tree.scss */
         ul.tree li span.tree-item .label .title-label {
           right: 16.9px; }
-    /* line 58, ../sass/mobile/_tree.scss */
+    /* line 60, ../sass/mobile/_tree.scss */
     ul.tree ul.tree {
       margin-left: 7px; } }
diff --git a/platform/commonUI/general/res/sass/mobile/_tree.scss b/platform/commonUI/general/res/sass/mobile/_tree.scss
index 37c7ad6a70..fcdc70666e 100644
--- a/platform/commonUI/general/res/sass/mobile/_tree.scss
+++ b/platform/commonUI/general/res/sass/mobile/_tree.scss
@@ -37,6 +37,8 @@ ul.tree {
                     position: absolute;
                     right: $mobile-treeRight;
                     font-size: 1.8em;
+                    right: 0px;
+                    width: auto;
                 }                   
 
                 .label {

From 28a2a5b92ae500c97d38ecffd7558b849a4c6837 Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Wed, 29 Jul 2015 10:39:17 -0700
Subject: [PATCH 115/209] [Mobile] Tweaks to layout

Removed the user-select option
for the context menu and bottom bar
on mobile. Also edited the folder
grid item so that its icon rep
size is not overly large.
---
 platform/commonUI/general/res/css/items.css         | 13 +++++++------
 .../commonUI/general/res/css/theme-espresso.css     |  8 ++++++++
 .../commonUI/general/res/sass/mobile/_item.scss     |  1 +
 .../commonUI/general/res/sass/mobile/_layout.scss   |  5 +++++
 .../commonUI/general/res/templates/bottombar.html   |  2 +-
 .../general/res/templates/menu/context-menu.html    |  2 +-
 6 files changed, 23 insertions(+), 8 deletions(-)

diff --git a/platform/commonUI/general/res/css/items.css b/platform/commonUI/general/res/css/items.css
index 4d69e7e790..ce8878b4c3 100644
--- a/platform/commonUI/general/res/css/items.css
+++ b/platform/commonUI/general/res/css/items.css
@@ -390,12 +390,13 @@
     height: 50px; }
     /* line 61, ../sass/mobile/_item.scss */
     .items-holder .item.grid-item .item-main .item-type {
-      line-height: 40px; }
-    /* line 65, ../sass/mobile/_item.scss */
+      line-height: 40px;
+      height: auto; }
+    /* line 66, ../sass/mobile/_item.scss */
     .items-holder .item.grid-item .title {
       margin-right: 10px;
       line-height: 25px; }
-    /* line 69, ../sass/mobile/_item.scss */
+    /* line 70, ../sass/mobile/_item.scss */
     .items-holder .item.grid-item .details {
       margin-right: 10px;
       line-height: 0px; } }
@@ -404,15 +405,15 @@
   .items-holder .item.grid-item {
     width: 100%;
     height: 66.66667px; }
-    /* line 80, ../sass/mobile/_item.scss */
+    /* line 81, ../sass/mobile/_item.scss */
     .items-holder .item.grid-item .item-main .item-type {
       font-size: 30px;
       line-height: 50px; }
-    /* line 85, ../sass/mobile/_item.scss */
+    /* line 86, ../sass/mobile/_item.scss */
     .items-holder .item.grid-item .title {
       margin-right: 10px;
       line-height: 38px; }
-    /* line 89, ../sass/mobile/_item.scss */
+    /* line 90, ../sass/mobile/_item.scss */
     .items-holder .item.grid-item .details {
       margin-right: 10px;
       line-height: 0px; } }
diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index 394e6ac721..638a08c9b6 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -915,6 +915,14 @@ mct-container {
   .tree-holder {
     overflow-x: hidden !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 202, ../sass/mobile/_layout.scss */
+  .disable-select {
+    -moz-user-select: -moz-none;
+    -ms-user-select: none;
+    -webkit-user-select: none;
+    user-select: none; } }
+
 /*****************************************************************************
 * Open MCT Web, Copyright (c) 2014-2015, United States Government
 * as represented by the Administrator of the National Aeronautics and Space
diff --git a/platform/commonUI/general/res/sass/mobile/_item.scss b/platform/commonUI/general/res/sass/mobile/_item.scss
index 22a641d174..9090f8604a 100644
--- a/platform/commonUI/general/res/sass/mobile/_item.scss
+++ b/platform/commonUI/general/res/sass/mobile/_item.scss
@@ -60,6 +60,7 @@
                 .item-main {
                     .item-type {
                         line-height: $phone-itemHeight * .8;
+                        height: auto;
                     }
                 }
                 .title {
diff --git a/platform/commonUI/general/res/sass/mobile/_layout.scss b/platform/commonUI/general/res/sass/mobile/_layout.scss
index 806c7547f3..85b0f3d755 100644
--- a/platform/commonUI/general/res/sass/mobile/_layout.scss
+++ b/platform/commonUI/general/res/sass/mobile/_layout.scss
@@ -199,3 +199,8 @@
         overflow-x: hidden !important;
     }
 }
+.disable-select {
+    @include phoneandtablet {
+        @include user-select(none);
+    }
+}
diff --git a/platform/commonUI/general/res/templates/bottombar.html b/platform/commonUI/general/res/templates/bottombar.html
index fe275a49da..bfe9974b52 100644
--- a/platform/commonUI/general/res/templates/bottombar.html
+++ b/platform/commonUI/general/res/templates/bottombar.html
@@ -19,7 +19,7 @@
  this source code distribution or the Licensing information page available
  at runtime from the About dialog for additional information.
 -->
-<div class='abs bottom-bar ue-bottom-bar' ng-controller="BottomBarController as bar">
+<div class='abs bottom-bar ue-bottom-bar disable-select' ng-controller="BottomBarController as bar">
     <div id='status' class='status-holder'>
         <mct-include ng-repeat="indicator in bar.getIndicators()"
                      ng-model="indicator.ngModel"
diff --git a/platform/commonUI/general/res/templates/menu/context-menu.html b/platform/commonUI/general/res/templates/menu/context-menu.html
index 8267a8ccb1..a14c2de063 100644
--- a/platform/commonUI/general/res/templates/menu/context-menu.html
+++ b/platform/commonUI/general/res/templates/menu/context-menu.html
@@ -19,7 +19,7 @@
  this source code distribution or the Licensing information page available
  at runtime from the About dialog for additional information.
 -->
-<div class="menu-element context-menu-wrapper" ng-controller="ContextMenuController">
+<div class="menu-element context-menu-wrapper disable-select" ng-controller="ContextMenuController">
     <div class="menu context-menu dropdown">
         <ul>
 

From 7e35e55f0ba9f1054c426200ab31f1930f89c8fa Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Wed, 29 Jul 2015 11:13:09 -0700
Subject: [PATCH 116/209] [Mobile] Hide Back Button

When you are at the highest level the
back button fades out and is unclickable.
When you are able to go up a level the
back button appears/fades in and is
pressable. Also removed the object type
name from the header.
---
 .../browse/res/templates/back-arrow.html      |  3 +-
 .../res/templates/browse/object-header.html   |  2 +-
 .../commonUI/browse/src/BrowseController.js   | 25 +++++++++-
 .../general/res/css/theme-espresso.css        | 50 ++++++++++++++++---
 .../general/res/sass/mobile/_layout.scss      | 24 +++++++--
 .../general/res/templates/bottombar.html      |  2 +-
 .../res/templates/menu/context-menu.html      |  2 +-
 7 files changed, 92 insertions(+), 16 deletions(-)

diff --git a/platform/commonUI/browse/res/templates/back-arrow.html b/platform/commonUI/browse/res/templates/back-arrow.html
index b4003a8a9b..c718bed951 100644
--- a/platform/commonUI/browse/res/templates/back-arrow.html
+++ b/platform/commonUI/browse/res/templates/back-arrow.html
@@ -22,6 +22,7 @@
 
 <!-- Back Arrow Icon used on mobile-->
 <span ng-controller="BrowseController"
-      ng-click='backArrow()'>
+      ng-click='backArrow()'
+      ng-class="checkRoot(); atRoot ? 'mobile-back-hide' : 'mobile-back-unhide'">
     <a class='type-icon icon ui-symbol'>&lt;</a>
 </span>
diff --git a/platform/commonUI/browse/res/templates/browse/object-header.html b/platform/commonUI/browse/res/templates/browse/object-header.html
index a7bb8029fc..84cc087bbc 100644
--- a/platform/commonUI/browse/res/templates/browse/object-header.html
+++ b/platform/commonUI/browse/res/templates/browse/object-header.html
@@ -24,7 +24,7 @@
         <mct-representation class="desktop-hide" key="'back-arrow'"></mct-representation>
         <span class='type-icon icon ui-symbol'>{{type.getGlyph()}}</span>
         <span ng-if="parameters.mode" class='action'>{{parameters.mode}}</span>
-        <span class='type-name'>{{type.getName()}}</span>
+        <span class='type-name mobile-important-hide'>{{type.getName()}}</span>
         <span class='title-label'>{{model.name}}</span>
         <mct-representation key="'menu-arrow'" mct-object='domainObject'></mct-representation>
     </span>
diff --git a/platform/commonUI/browse/src/BrowseController.js b/platform/commonUI/browse/src/BrowseController.js
index cc4f06b243..e791ae17ef 100644
--- a/platform/commonUI/browse/src/BrowseController.js
+++ b/platform/commonUI/browse/src/BrowseController.js
@@ -132,10 +132,31 @@ define(
             // is not the root, then user is navigated to
             // parent
             function navigateToParent() {
-                var parent = navigationService.getNavigation().getCapability('context').getParent();
+                var parent = navigationService.getNavigation().getCapability('context').getParent(),
+                    grandparent;
                 if (parent.getId() !== ROOT_ID) {
+                    grandparent = parent.getCapability('context').getParent().getId();
                     navigateTo(parent);
+                    if (grandparent && grandparent !== ROOT_ID) {
+                        $scope.atRoot = false;
+                    } else {
+                        $scope.atRoot = true;
+                    }
+                } else {
+                    $scope.atRoot = true;
                 }
+                console.log($scope.atRoot);
+            }
+            
+            function checkRoot() {
+                var parent = navigationService.getNavigation().getCapability('context').getParent(),
+                    grandparent;
+                if (parent.getId() !== ROOT_ID) {
+                    $scope.atRoot = false;
+                } else {
+                    $scope.atRoot = true;
+                }
+                console.log($scope.atRoot);
             }
 
             // Load the root object, put it in the scope.
@@ -170,6 +191,8 @@ define(
             });
             
             $scope.backArrow = navigateToParent;
+            
+            $scope.checkRoot = checkRoot;
 
         }
 
diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index 638a08c9b6..e894e4d472 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -901,23 +901,59 @@ mct-container {
     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), 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 184, ../sass/mobile/_layout.scss */
-  .mobile-unhide {
-    display: inline-block; } }
+  /* line 183, ../sass/mobile/_layout.scss */
+  .mobile-important-hide {
+    display: none !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 189, ../sass/mobile/_layout.scss */
+  .mobile-back-hide {
+    pointer-events: none;
+    -moz-transition-property: opacity;
+    -o-transition-property: opacity;
+    -webkit-transition-property: opacity;
+    transition-property: opacity;
+    -moz-transition-duration: 0.4s;
+    -o-transition-duration: 0.4s;
+    -webkit-transition-duration: 0.4s;
+    transition-duration: 0.4s;
+    -moz-transition-timing-function: ease-in-out;
+    -o-transition-timing-function: ease-in-out;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-timing-function: ease-in-out;
+    opacity: 0; } }
+
+@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 198, ../sass/mobile/_layout.scss */
+  .mobile-back-unhide {
+    pointer-events: all;
+    -moz-transition-property: opacity;
+    -o-transition-property: opacity;
+    -webkit-transition-property: opacity;
+    transition-property: opacity;
+    -moz-transition-duration: 0.4s;
+    -o-transition-duration: 0.4s;
+    -webkit-transition-duration: 0.4s;
+    transition-duration: 0.4s;
+    -moz-transition-timing-function: ease-in-out;
+    -o-transition-timing-function: ease-in-out;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-timing-function: ease-in-out;
+    opacity: 1; } }
 
 @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 191, ../sass/mobile/_layout.scss */
+  /* line 207, ../sass/mobile/_layout.scss */
   .phone-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), 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 197, ../sass/mobile/_layout.scss */
+  /* line 213, ../sass/mobile/_layout.scss */
   .tree-holder {
     overflow-x: hidden !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 202, ../sass/mobile/_layout.scss */
-  .disable-select {
+  /* line 218, ../sass/mobile/_layout.scss */
+  .mobile-disable-select {
     -moz-user-select: -moz-none;
     -ms-user-select: none;
     -webkit-user-select: none;
diff --git a/platform/commonUI/general/res/sass/mobile/_layout.scss b/platform/commonUI/general/res/sass/mobile/_layout.scss
index 85b0f3d755..3f4fc062d3 100644
--- a/platform/commonUI/general/res/sass/mobile/_layout.scss
+++ b/platform/commonUI/general/res/sass/mobile/_layout.scss
@@ -180,10 +180,26 @@
     }
 }
 
-// Hides objects on phone and tablet
-.mobile-unhide {
+.mobile-important-hide {
     @include phoneandtablet {
-        display: inline-block;
+        display: none !important;
+    }
+}
+
+.mobile-back-hide {
+    @include phoneandtablet {
+        pointer-events: none;
+        @include trans-prop-nice(opacity, .4s);
+        opacity: 0;
+    }
+}
+
+// Hides objects on phone and tablet
+.mobile-back-unhide {
+    @include phoneandtablet {
+        pointer-events: all;
+        @include trans-prop-nice(opacity, .4s);
+        opacity: 1;
     }
 }
 
@@ -199,7 +215,7 @@
         overflow-x: hidden !important;
     }
 }
-.disable-select {
+.mobile-disable-select {
     @include phoneandtablet {
         @include user-select(none);
     }
diff --git a/platform/commonUI/general/res/templates/bottombar.html b/platform/commonUI/general/res/templates/bottombar.html
index bfe9974b52..4da2686fa1 100644
--- a/platform/commonUI/general/res/templates/bottombar.html
+++ b/platform/commonUI/general/res/templates/bottombar.html
@@ -19,7 +19,7 @@
  this source code distribution or the Licensing information page available
  at runtime from the About dialog for additional information.
 -->
-<div class='abs bottom-bar ue-bottom-bar disable-select' ng-controller="BottomBarController as bar">
+<div class='abs bottom-bar ue-bottom-bar mobile-disable-select' ng-controller="BottomBarController as bar">
     <div id='status' class='status-holder'>
         <mct-include ng-repeat="indicator in bar.getIndicators()"
                      ng-model="indicator.ngModel"
diff --git a/platform/commonUI/general/res/templates/menu/context-menu.html b/platform/commonUI/general/res/templates/menu/context-menu.html
index a14c2de063..467d8c9d20 100644
--- a/platform/commonUI/general/res/templates/menu/context-menu.html
+++ b/platform/commonUI/general/res/templates/menu/context-menu.html
@@ -19,7 +19,7 @@
  this source code distribution or the Licensing information page available
  at runtime from the About dialog for additional information.
 -->
-<div class="menu-element context-menu-wrapper disable-select" ng-controller="ContextMenuController">
+<div class="menu-element context-menu-wrapper mobile-disable-select" ng-controller="ContextMenuController">
     <div class="menu context-menu dropdown">
         <ul>
 

From 18348476c6800943e68a95a3b57f21290bbdf274 Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Wed, 29 Jul 2015 11:38:47 -0700
Subject: [PATCH 117/209] [Mobile] RemoveAction Tweak

If you remove an object you are
currently within/opened, then on
removal of it you navigate to the
parent of whatever you removed.
---
 platform/commonUI/edit/bundle.json                 |  2 +-
 platform/commonUI/edit/src/actions/RemoveAction.js | 14 +++++++++++++-
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/platform/commonUI/edit/bundle.json b/platform/commonUI/edit/bundle.json
index 2aed41c2ee..c216a9d877 100644
--- a/platform/commonUI/edit/bundle.json
+++ b/platform/commonUI/edit/bundle.json
@@ -59,7 +59,7 @@
                 "glyph": "Z",
                 "name": "Remove",
                 "description": "Remove this object from its containing object.",
-                "depends": [ "$q" ]
+                "depends": [ "$q", "navigationService" ]
             },
             {
                 "key": "save",
diff --git a/platform/commonUI/edit/src/actions/RemoveAction.js b/platform/commonUI/edit/src/actions/RemoveAction.js
index fbf47d22d9..f0ed09d161 100644
--- a/platform/commonUI/edit/src/actions/RemoveAction.js
+++ b/platform/commonUI/edit/src/actions/RemoveAction.js
@@ -40,7 +40,7 @@ define(
          * @constructor
          * @memberof module:editor/actions/remove-action
          */
-        function RemoveAction($q, context) {
+        function RemoveAction($q, navigationService, context) {
             var object = (context || {}).domainObject;
 
             /**
@@ -69,6 +69,15 @@ define(
                 return persistence && persistence.persist();
             }
 
+            function checkCurrentObjectNavigation(parent) {
+                var currParent = navigationService.getNavigation().getCapability('context').getParent()
+                if(currParent.getId() === parent.getId()) {
+                    navigationService.setNavigation(parent);
+                } else {
+                    console.log("ALL GOOD");
+                }
+            }
+            
             /**
              * Remove the object from its parent, as identified by its context
              * capability.
@@ -77,6 +86,9 @@ define(
              */
             function removeFromContext(contextCapability) {
                 var parent = contextCapability.getParent();
+                // Goes to parent if deleting currently
+                // opened object
+                checkCurrentObjectNavigation(parent);
                 $q.when(
                     parent.useCapability('mutation', doMutate)
                 ).then(function () {

From 97bf530b1d4bf0ba691e2d489fa714b672a42916 Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Wed, 29 Jul 2015 11:41:10 -0700
Subject: [PATCH 118/209] [Mobile] BackArrow

Removed the BackArrow console log
that was getting called in the
BrowseController.
---
 platform/commonUI/browse/src/BrowseController.js | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/platform/commonUI/browse/src/BrowseController.js b/platform/commonUI/browse/src/BrowseController.js
index e791ae17ef..c61260a400 100644
--- a/platform/commonUI/browse/src/BrowseController.js
+++ b/platform/commonUI/browse/src/BrowseController.js
@@ -145,18 +145,15 @@ define(
                 } else {
                     $scope.atRoot = true;
                 }
-                console.log($scope.atRoot);
             }
             
             function checkRoot() {
-                var parent = navigationService.getNavigation().getCapability('context').getParent(),
-                    grandparent;
+                var parent = navigationService.getNavigation().getCapability('context').getParent();
                 if (parent.getId() !== ROOT_ID) {
                     $scope.atRoot = false;
                 } else {
                     $scope.atRoot = true;
                 }
-                console.log($scope.atRoot);
             }
 
             // Load the root object, put it in the scope.

From 6e60088b11def414d750fa7eb765d06707d28593 Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Wed, 29 Jul 2015 11:58:53 -0700
Subject: [PATCH 119/209] [Mobile] RemoveAction

Removed console and added
navigationService (mock) to the
spec version.
---
 platform/commonUI/edit/src/actions/RemoveAction.js |  6 ++----
 .../commonUI/edit/test/actions/RemoveActionSpec.js | 14 ++++++++++++--
 2 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/platform/commonUI/edit/src/actions/RemoveAction.js b/platform/commonUI/edit/src/actions/RemoveAction.js
index f0ed09d161..0a60f6d358 100644
--- a/platform/commonUI/edit/src/actions/RemoveAction.js
+++ b/platform/commonUI/edit/src/actions/RemoveAction.js
@@ -70,11 +70,9 @@ define(
             }
 
             function checkCurrentObjectNavigation(parent) {
-                var currParent = navigationService.getNavigation().getCapability('context').getParent()
-                if(currParent.getId() === parent.getId()) {
+                var currParent = navigationService.getNavigation().getCapability('context').getParent();
+                if (currParent.getId() === parent.getId()) {
                     navigationService.setNavigation(parent);
-                } else {
-                    console.log("ALL GOOD");
                 }
             }
             
diff --git a/platform/commonUI/edit/test/actions/RemoveActionSpec.js b/platform/commonUI/edit/test/actions/RemoveActionSpec.js
index d23542f0ee..e0776c1712 100644
--- a/platform/commonUI/edit/test/actions/RemoveActionSpec.js
+++ b/platform/commonUI/edit/test/actions/RemoveActionSpec.js
@@ -28,6 +28,7 @@ define(
 
         describe("The Remove action", function () {
             var mockQ,
+                mockNavigationService,
                 mockDomainObject,
                 mockParent,
                 mockContext,
@@ -70,7 +71,16 @@ define(
                 mockMutation = jasmine.createSpyObj("mutation", [ "invoke" ]);
                 mockPersistence = jasmine.createSpyObj("persistence", [ "persist" ]);
                 mockType = jasmine.createSpyObj("type", [ "hasFeature" ]);
-
+                mockNavigationService = jasmine.createSpyObj(
+                    "navigationService",
+                    [
+                        "getNavigation",
+                        "setNavigation",
+                        "addListener",
+                        "removeListener"
+                    ]
+                );
+                
                 mockDomainObject.getId.andReturn("test");
                 mockDomainObject.getCapability.andReturn(mockContext);
                 mockContext.getParent.andReturn(mockParent);
@@ -88,7 +98,7 @@ define(
 
                 actionContext = { domainObject: mockDomainObject };
 
-                action = new RemoveAction(mockQ, actionContext);
+                action = new RemoveAction(mockQ, mockNavigationService, actionContext);
             });
 
             it("only applies to objects with parents", function () {

From bdf8b4d3f11fd57c65e8a9b088caf90f586a35fb Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Wed, 29 Jul 2015 13:22:47 -0700
Subject: [PATCH 120/209] [Mobile] Test for Back Arrow

Added tests for the backarrow and
when it appears/disappears.
---
 .../browse/test/BrowseControllerSpec.js       | 94 +++++++++++++++++++
 1 file changed, 94 insertions(+)

diff --git a/platform/commonUI/browse/test/BrowseControllerSpec.js b/platform/commonUI/browse/test/BrowseControllerSpec.js
index 181121574a..658a08d5aa 100644
--- a/platform/commonUI/browse/test/BrowseControllerSpec.js
+++ b/platform/commonUI/browse/test/BrowseControllerSpec.js
@@ -245,14 +245,78 @@ define(
                 );
             });
             
+            it("checks if the user is current navigated to the root", function () {
+                var mockContext = jasmine.createSpyObj('context', ['getParent']),
+                    mockParentContext = jasmine.createSpyObj('context', ['getParent']),
+                    mockParent  = jasmine.createSpyObj(
+                        "domainObject",
+                        [ "getId", "getCapability", "getModel", "useCapability" ]
+                    ),
+                    mockGrandparent  = jasmine.createSpyObj(
+                        "domainObject",
+                        [ "getId", "getCapability", "getModel", "useCapability" ]
+                    );
+                mockNavigationService = jasmine.createSpyObj(
+                    "navigationService",
+                    [
+                        "getNavigation",
+                        "setNavigation",
+                        "addListener",
+                        "removeListener"
+                    ]
+                );
+                
+                mockRoute.current.params.ids = "ROOT/mine";
+                mockParent.getId.andReturn("ROOT");
+                
+                mockDomainObject.getCapability.andCallFake(function (c) {
+                    return c === 'context' && mockContext;
+                });
+                
+                mockNavigationService.getNavigation.andReturn(mockDomainObject);
+                mockContext.getParent.andReturn(mockParent);
+                mockParent.getCapability.andCallFake(function (c) {
+                    return c === 'context' && mockParentContext;
+                });
+                mockParentContext.getParent.andReturn(mockGrandparent);
+                
+                controller = new BrowseController(
+                    mockScope,
+                    mockRoute,
+                    mockLocation,
+                    mockObjectService,
+                    mockNavigationService
+                );
+                
+                mockScope.checkRoot();
+                
+                mockRoute.current.params.ids = "mine/junk";
+                mockParent.getId.andReturn("mine");
+                
+                controller = new BrowseController(
+                    mockScope,
+                    mockRoute,
+                    mockLocation,
+                    mockObjectService,
+                    mockNavigationService
+                );
+                
+                mockScope.checkRoot();                
+            });
+            
             // Mocks the back arrow call that
             // lets the html code know the back
             // arrow navigation needs to be done
             it("calls the backArrow function", function () {
                 var mockContext = jasmine.createSpyObj('context', ['getParent']),
+                    mockParentContext = jasmine.createSpyObj('context', ['getParent']),
                     mockParent  = jasmine.createSpyObj(
                         "domainObject",
                         [ "getId", "getCapability", "getModel", "useCapability" ]
+                    ),
+                    mockGrandparent  = jasmine.createSpyObj(
+                        "domainObject",
+                        [ "getId", "getCapability", "getModel", "useCapability" ]
                     );
                 mockNavigationService = jasmine.createSpyObj(
                     "navigationService",
@@ -273,6 +337,36 @@ define(
                 
                 mockNavigationService.getNavigation.andReturn(mockDomainObject);
                 mockContext.getParent.andReturn(mockParent);
+                mockParent.getCapability.andCallFake(function (c) {
+                    return c === 'context' && mockParentContext;
+                });
+                mockParentContext.getParent.andReturn(mockGrandparent);
+                
+                controller = new BrowseController(
+                    mockScope,
+                    mockRoute,
+                    mockLocation,
+                    mockObjectService,
+                    mockNavigationService
+                );
+                
+                mockScope.backArrow();
+                
+                mockRoute.current.params.ids = "mine/lessjunk/morejunk";
+                mockGrandparent.getId.andReturn("mine");
+                
+                controller = new BrowseController(
+                    mockScope,
+                    mockRoute,
+                    mockLocation,
+                    mockObjectService,
+                    mockNavigationService
+                );
+                
+                mockScope.backArrow();
+                
+                mockRoute.current.params.ids = "ROOT/mine";
+                mockParent.getId.andReturn("ROOT");
                 
                 controller = new BrowseController(
                     mockScope,

From 12ec293f3d60e5ad682fd82efd38aabba221d133 Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Wed, 29 Jul 2015 13:57:11 -0700
Subject: [PATCH 121/209] [Mobile] Tests

Changed BrowseController and RemoveActionSpec to account
for grandparent and navigation usage. Also changed
RemoveAction variable name.
---
 platform/commonUI/browse/test/BrowseControllerSpec.js   | 2 +-
 platform/commonUI/edit/src/actions/RemoveAction.js      | 5 +++--
 platform/commonUI/edit/test/actions/RemoveActionSpec.js | 6 +++++-
 3 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/platform/commonUI/browse/test/BrowseControllerSpec.js b/platform/commonUI/browse/test/BrowseControllerSpec.js
index 658a08d5aa..a4be906b1d 100644
--- a/platform/commonUI/browse/test/BrowseControllerSpec.js
+++ b/platform/commonUI/browse/test/BrowseControllerSpec.js
@@ -301,7 +301,7 @@ define(
                     mockNavigationService
                 );
                 
-                mockScope.checkRoot();                
+                mockScope.checkRoot();
             });
             
             // Mocks the back arrow call that
diff --git a/platform/commonUI/edit/src/actions/RemoveAction.js b/platform/commonUI/edit/src/actions/RemoveAction.js
index 0a60f6d358..8836af0831 100644
--- a/platform/commonUI/edit/src/actions/RemoveAction.js
+++ b/platform/commonUI/edit/src/actions/RemoveAction.js
@@ -70,8 +70,9 @@ define(
             }
 
             function checkCurrentObjectNavigation(parent) {
-                var currParent = navigationService.getNavigation().getCapability('context').getParent();
-                if (currParent.getId() === parent.getId()) {
+                var currentParent = navigationService.getNavigation()
+                                    .getCapability('context').getParent();
+                if (currentParent.getId() === parent.getId()) {
                     navigationService.setNavigation(parent);
                 }
             }
diff --git a/platform/commonUI/edit/test/actions/RemoveActionSpec.js b/platform/commonUI/edit/test/actions/RemoveActionSpec.js
index e0776c1712..e6b667d8b2 100644
--- a/platform/commonUI/edit/test/actions/RemoveActionSpec.js
+++ b/platform/commonUI/edit/test/actions/RemoveActionSpec.js
@@ -65,6 +65,9 @@ define(
                     },
                     useCapability: function (k, v) {
                         return capabilities[k].invoke(v);
+                    },
+                    getId: function () {
+                        return "test";
                     }
                 };
                 mockContext = jasmine.createSpyObj("context", [ "getParent" ]);
@@ -80,13 +83,14 @@ define(
                         "removeListener"
                     ]
                 );
+                mockNavigationService.getNavigation.andReturn(mockDomainObject);
+                
                 
                 mockDomainObject.getId.andReturn("test");
                 mockDomainObject.getCapability.andReturn(mockContext);
                 mockContext.getParent.andReturn(mockParent);
                 mockType.hasFeature.andReturn(true);
 
-
                 capabilities = {
                     mutation: mockMutation,
                     persistence: mockPersistence,

From 906354764b5798e429310f4aa85a6b09617c7676 Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Wed, 29 Jul 2015 15:06:39 -0700
Subject: [PATCH 122/209] [Mobile] Tests

Has way to make isMobile call
true or false for mobile/nonmobile
devices.
---
 .../test/actions/ContextMenuActionSpec.js     | 44 ++++++++++++++++++-
 .../test/gestures/ContextMenuGestureSpec.js   | 13 ++++++
 2 files changed, 55 insertions(+), 2 deletions(-)

diff --git a/platform/representation/test/actions/ContextMenuActionSpec.js b/platform/representation/test/actions/ContextMenuActionSpec.js
index 8d94a30766..58ba276c80 100644
--- a/platform/representation/test/actions/ContextMenuActionSpec.js
+++ b/platform/representation/test/actions/ContextMenuActionSpec.js
@@ -49,6 +49,8 @@ define(
                 mockDomainObject,
                 mockEvent,
                 mockActionContext,
+                mockNavigator,
+                mockStopPropagation,
                 action;
 
             beforeEach(function () {
@@ -63,7 +65,7 @@ define(
                 mockScope = {};
                 mockElement = jasmine.createSpyObj("element", JQLITE_FUNCTIONS);
                 mockDomainObject = jasmine.createSpyObj("domainObject", DOMAIN_OBJECT_METHODS);
-                mockEvent = jasmine.createSpyObj("event", ["preventDefault"]);
+                mockEvent = jasmine.createSpyObj("event", ["preventDefault", "stopPropagation"]);
                 mockEvent.pageX = 0;
                 mockEvent.pageY = 0;
 
@@ -73,7 +75,7 @@ define(
                 mockRootScope.$new.andReturn(mockScope);
                 
                 mockActionContext = {key: 'menu', domainObject: mockDomainObject, event: mockEvent};
-
+                
                 action = new ContextMenuAction(
                     mockCompile,
                     mockDocument,
@@ -138,6 +140,44 @@ define(
                 // Listener should have been detached from body
                 expect(mockBody.off).toHaveBeenCalled();
             });
+            
+            it("keeps a menu when menu is clicked", function () {
+                // Show the menu
+                mockEvent
+                action.perform();
+                
+                // Find and fire body's mousedown listener
+                mockMenu.on.calls.forEach(function (call) {
+                    if (call.args[0] === 'mousedown') {
+//                        call.args[1]();
+                    }
+                });
+
+                // Menu should have been removed
+                expect(mockMenu.remove).not.toHaveBeenCalled();
+
+                // Listener should have been detached from body
+                expect(mockBody.off).not.toHaveBeenCalled();
+            });
+            
+            it("mobile", function () {
+                mockQueryService.isMobile.andReturn(true);
+                action = new ContextMenuAction(
+                    mockCompile,
+                    mockDocument,
+                    mockWindow,
+                    mockRootScope,
+                    mockQueryService,
+                    mockActionContext
+                );
+                action.perform();
+                
+                mockMenu.on.calls.forEach(function (call) {
+                    if (call.args[0] === 'touchstart') {
+//                        call.args[1]();
+                    }
+                });
+            });
         });
     }
 );
\ No newline at end of file
diff --git a/platform/representation/test/gestures/ContextMenuGestureSpec.js b/platform/representation/test/gestures/ContextMenuGestureSpec.js
index ec687e3983..a9a5986577 100644
--- a/platform/representation/test/gestures/ContextMenuGestureSpec.js
+++ b/platform/representation/test/gestures/ContextMenuGestureSpec.js
@@ -75,6 +75,19 @@ define(
                     mockDomainObject.calls
                 );
             });
+            
+            it("mobile", function () {
+                mockQueryService.isMobile.andReturn(true);
+                gesture = new ContextMenuGesture(mockTimeout, mockQueryService, mockElement, mockDomainObject);
+                
+                // Capture the contextmenu callback
+                fireGesture =  mockElement.on.mostRecentCall.args[1];
+                
+                expect(mockElement.on).toHaveBeenCalledWith(
+                    "touchstart",
+                    jasmine.any(Function)
+                );
+            });
         });
     }
 );
\ No newline at end of file

From c333a2e70ab2c1d08461c27b4f9d8eb1b214f82e Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Wed, 29 Jul 2015 16:31:38 -0700
Subject: [PATCH 123/209] [Mobile] Test

Repeat of test variable deleted.
---
 platform/representation/test/gestures/ContextMenuGestureSpec.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/platform/representation/test/gestures/ContextMenuGestureSpec.js b/platform/representation/test/gestures/ContextMenuGestureSpec.js
index a9a5986577..b3b7e8de8c 100644
--- a/platform/representation/test/gestures/ContextMenuGestureSpec.js
+++ b/platform/representation/test/gestures/ContextMenuGestureSpec.js
@@ -49,7 +49,6 @@ define(
                 mockQueryService = jasmine.createSpyObj("queryService", ["isMobile"]);
                 mockDomainObject = jasmine.createSpyObj("domainObject", DOMAIN_OBJECT_METHODS);
                 mockEvent = jasmine.createSpyObj("event", ["preventDefault"]);
-                mockQueryService = jasmine.createSpyObj("queryService", ["isMobile"]);
                 
                 gesture = new ContextMenuGesture(mockTimeout, mockQueryService, mockElement, mockDomainObject);
 

From 2d1aa65d63f399c9aec0ce186a832f7c30d8a093 Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Thu, 30 Jul 2015 12:50:39 -0700
Subject: [PATCH 124/209] [Mobile] Test

BrowseController test adjusted to
repeat less code.
---
 .../browse/test/BrowseControllerSpec.js       | 54 ++++++-------------
 1 file changed, 16 insertions(+), 38 deletions(-)

diff --git a/platform/commonUI/browse/test/BrowseControllerSpec.js b/platform/commonUI/browse/test/BrowseControllerSpec.js
index a4be906b1d..722b7b4132 100644
--- a/platform/commonUI/browse/test/BrowseControllerSpec.js
+++ b/platform/commonUI/browse/test/BrowseControllerSpec.js
@@ -39,6 +39,9 @@ define(
                 mockUrlService,
                 mockDomainObject,
                 mockNextObject,
+                mockParentContext,
+                mockParent,
+                mockGrandparent,
                 controller;
 
             function mockPromise(value) {
@@ -88,6 +91,17 @@ define(
                     "nextObject",
                     [ "getId", "getCapability", "getModel", "useCapability" ]
                 );
+                
+
+                mockParentContext = jasmine.createSpyObj('context', ['getParent']);
+                mockParent  = jasmine.createSpyObj(
+                    "domainObject",
+                    [ "getId", "getCapability", "getModel", "useCapability" ]
+                );
+                mockGrandparent  = jasmine.createSpyObj(
+                    "domainObject",
+                    [ "getId", "getCapability", "getModel", "useCapability" ]
+                );
 
                 mockObjectService.getObjects.andReturn(mockPromise({
                     ROOT: mockRootObject
@@ -246,25 +260,7 @@ define(
             });
             
             it("checks if the user is current navigated to the root", function () {
-                var mockContext = jasmine.createSpyObj('context', ['getParent']),
-                    mockParentContext = jasmine.createSpyObj('context', ['getParent']),
-                    mockParent  = jasmine.createSpyObj(
-                        "domainObject",
-                        [ "getId", "getCapability", "getModel", "useCapability" ]
-                    ),
-                    mockGrandparent  = jasmine.createSpyObj(
-                        "domainObject",
-                        [ "getId", "getCapability", "getModel", "useCapability" ]
-                    );
-                mockNavigationService = jasmine.createSpyObj(
-                    "navigationService",
-                    [
-                        "getNavigation",
-                        "setNavigation",
-                        "addListener",
-                        "removeListener"
-                    ]
-                );
+                var mockContext = jasmine.createSpyObj('context', ['getParent']);
                 
                 mockRoute.current.params.ids = "ROOT/mine";
                 mockParent.getId.andReturn("ROOT");
@@ -308,25 +304,7 @@ define(
             // lets the html code know the back
             // arrow navigation needs to be done
             it("calls the backArrow function", function () {
-                var mockContext = jasmine.createSpyObj('context', ['getParent']),
-                    mockParentContext = jasmine.createSpyObj('context', ['getParent']),
-                    mockParent  = jasmine.createSpyObj(
-                        "domainObject",
-                        [ "getId", "getCapability", "getModel", "useCapability" ]
-                    ),
-                    mockGrandparent  = jasmine.createSpyObj(
-                        "domainObject",
-                        [ "getId", "getCapability", "getModel", "useCapability" ]
-                    );
-                mockNavigationService = jasmine.createSpyObj(
-                    "navigationService",
-                    [
-                        "getNavigation",
-                        "setNavigation",
-                        "addListener",
-                        "removeListener"
-                    ]
-                );
+                var mockContext = jasmine.createSpyObj('context', ['getParent']);
                 
                 mockRoute.current.params.ids = "mine/junk";
                 mockParent.getId.andReturn("mine");

From 16248666567ab58d7a2e74eb5829ae17e30c116a Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Thu, 30 Jul 2015 13:27:56 -0700
Subject: [PATCH 125/209] [Mobile/Bug] RemoveAction

When removing object you have
openned, now compares the currentObj
id with the removed obj id, resulting
in navigating to parent if they are the
same.
---
 .../commonUI/edit/src/actions/RemoveAction.js | 24 +++++++++----------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/platform/commonUI/edit/src/actions/RemoveAction.js b/platform/commonUI/edit/src/actions/RemoveAction.js
index 8836af0831..9e0e723200 100644
--- a/platform/commonUI/edit/src/actions/RemoveAction.js
+++ b/platform/commonUI/edit/src/actions/RemoveAction.js
@@ -69,10 +69,10 @@ define(
                 return persistence && persistence.persist();
             }
 
-            function checkCurrentObjectNavigation(parent) {
-                var currentParent = navigationService.getNavigation()
-                                    .getCapability('context').getParent();
-                if (currentParent.getId() === parent.getId()) {
+            // Checks current object with object being removed
+            function checkCurrentObjectNavigation(object, parent) {
+                var currentObj = navigationService.getNavigation();
+                if (currentObj.getId() === object.getId()) {
                     navigationService.setNavigation(parent);
                 }
             }
@@ -80,14 +80,14 @@ define(
             /**
              * Remove the object from its parent, as identified by its context
              * capability.
-             * @param {ContextCapability} contextCapability the "context" capability
-             *        of the domain object being removed.
+             * @param {object} domain object being removed contextCapability
+                      gotten from the "context" capability of this object
              */
-            function removeFromContext(contextCapability) {
-                var parent = contextCapability.getParent();
-                // Goes to parent if deleting currently
-                // opened object
-                checkCurrentObjectNavigation(parent);
+            function removeFromContext(object) {
+                var contextCapability = object.getCapability('context'),
+                    parent = contextCapability.getParent();
+                // Navigates to parent if deleting current object
+                checkCurrentObjectNavigation(object, parent);
                 $q.when(
                     parent.useCapability('mutation', doMutate)
                 ).then(function () {
@@ -102,7 +102,7 @@ define(
                  *         fulfilled when the action has completed.
                  */
                 perform: function () {
-                    return $q.when(object.getCapability('context'))
+                    return $q.when(object)
                         .then(removeFromContext);
                 }
             };

From 495cd06ed5b762ba4fceca52466b7de83188125f Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Thu, 30 Jul 2015 13:30:03 -0700
Subject: [PATCH 126/209] [Mobile] Tests

adjusted test to fill empty
functions.
---
 platform/representation/test/actions/ContextMenuActionSpec.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/platform/representation/test/actions/ContextMenuActionSpec.js b/platform/representation/test/actions/ContextMenuActionSpec.js
index 58ba276c80..f1b700c879 100644
--- a/platform/representation/test/actions/ContextMenuActionSpec.js
+++ b/platform/representation/test/actions/ContextMenuActionSpec.js
@@ -149,7 +149,7 @@ define(
                 // Find and fire body's mousedown listener
                 mockMenu.on.calls.forEach(function (call) {
                     if (call.args[0] === 'mousedown') {
-//                        call.args[1]();
+                        call.args[1]();
                     }
                 });
 
@@ -174,7 +174,7 @@ define(
                 
                 mockMenu.on.calls.forEach(function (call) {
                     if (call.args[0] === 'touchstart') {
-//                        call.args[1]();
+                        call.args[1]();
                     }
                 });
             });

From ddce0f371d0df68036d7e8192cb4f5d93816a335 Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Thu, 30 Jul 2015 13:32:24 -0700
Subject: [PATCH 127/209] [Mobile] Test

Removed extra mockEvent from test.
---
 platform/representation/test/actions/ContextMenuActionSpec.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/platform/representation/test/actions/ContextMenuActionSpec.js b/platform/representation/test/actions/ContextMenuActionSpec.js
index f1b700c879..af03e00399 100644
--- a/platform/representation/test/actions/ContextMenuActionSpec.js
+++ b/platform/representation/test/actions/ContextMenuActionSpec.js
@@ -143,7 +143,6 @@ define(
             
             it("keeps a menu when menu is clicked", function () {
                 // Show the menu
-                mockEvent
                 action.perform();
                 
                 // Find and fire body's mousedown listener

From 85658d3d1f4387d142a1c42b061ec0d5df1940b0 Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Thu, 30 Jul 2015 13:33:59 -0700
Subject: [PATCH 128/209] [Mobile] Tests

Removed tests causing incomplete
build.
---
 .../test/actions/ContextMenuActionSpec.js     | 20 +++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/platform/representation/test/actions/ContextMenuActionSpec.js b/platform/representation/test/actions/ContextMenuActionSpec.js
index af03e00399..c1c6dc51ca 100644
--- a/platform/representation/test/actions/ContextMenuActionSpec.js
+++ b/platform/representation/test/actions/ContextMenuActionSpec.js
@@ -146,11 +146,11 @@ define(
                 action.perform();
                 
                 // Find and fire body's mousedown listener
-                mockMenu.on.calls.forEach(function (call) {
-                    if (call.args[0] === 'mousedown') {
-                        call.args[1]();
-                    }
-                });
+//                mockMenu.on.calls.forEach(function (call) {
+//                    if (call.args[0] === 'mousedown') {
+//                        call.args[1]();
+//                    }
+//                });
 
                 // Menu should have been removed
                 expect(mockMenu.remove).not.toHaveBeenCalled();
@@ -171,11 +171,11 @@ define(
                 );
                 action.perform();
                 
-                mockMenu.on.calls.forEach(function (call) {
-                    if (call.args[0] === 'touchstart') {
-                        call.args[1]();
-                    }
-                });
+//                mockMenu.on.calls.forEach(function (call) {
+//                    if (call.args[0] === 'touchstart') {
+//                        call.args[1]();
+//                    }
+//                });
             });
         });
     }

From 25e8bb44d209bf36c42914589e8ebb01c607c0f0 Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Thu, 30 Jul 2015 14:10:43 -0700
Subject: [PATCH 129/209] [Mobile] Item Height

Adjusted item height in
folder/layout list to be
automatically same as the
list object, not flowing over.
Applied to both phones and tablets.
---
 platform/commonUI/general/res/css/items.css          | 12 ++++++------
 platform/commonUI/general/res/sass/mobile/_item.scss |  2 +-
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/platform/commonUI/general/res/css/items.css b/platform/commonUI/general/res/css/items.css
index ce8878b4c3..85e93a1611 100644
--- a/platform/commonUI/general/res/css/items.css
+++ b/platform/commonUI/general/res/css/items.css
@@ -376,11 +376,12 @@
     font-size: 30px;
     top: 0px;
     left: 0px;
-    text-align: left; }
-  /* line 47, ../sass/mobile/_item.scss */
+    text-align: left;
+    height: auto; }
+  /* line 48, ../sass/mobile/_item.scss */
   .items-holder .item.grid-item .item-main .item-open {
     display: none; }
-  /* line 51, ../sass/mobile/_item.scss */
+  /* line 52, ../sass/mobile/_item.scss */
   .items-holder .item.grid-item .title, .items-holder .item.grid-item .details {
     margin-left: 30px; } }
 @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) {
@@ -388,10 +389,9 @@
   .items-holder .item.grid-item {
     width: 100%;
     height: 50px; }
-    /* line 61, ../sass/mobile/_item.scss */
+    /* line 62, ../sass/mobile/_item.scss */
     .items-holder .item.grid-item .item-main .item-type {
-      line-height: 40px;
-      height: auto; }
+      line-height: 40px; }
     /* line 66, ../sass/mobile/_item.scss */
     .items-holder .item.grid-item .title {
       margin-right: 10px;
diff --git a/platform/commonUI/general/res/sass/mobile/_item.scss b/platform/commonUI/general/res/sass/mobile/_item.scss
index 9090f8604a..15d792a576 100644
--- a/platform/commonUI/general/res/sass/mobile/_item.scss
+++ b/platform/commonUI/general/res/sass/mobile/_item.scss
@@ -43,6 +43,7 @@
                         top: 0px;
                         left: 0px;
                         text-align: left;
+                        height: auto
                     }
                     .item-open {
                        display: none;
@@ -60,7 +61,6 @@
                 .item-main {
                     .item-type {
                         line-height: $phone-itemHeight * .8;
-                        height: auto;
                     }
                 }
                 .title {

From 560a2e035e9118b9e8c09678da16e63e3b8e7ace Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Fri, 31 Jul 2015 11:13:52 -0700
Subject: [PATCH 130/209] [Mobile] Info Button

Added info button to grid/list items
on mobile. When the button is pressed,
info bubble appears for 750ms or the
same infobutton is pressed to dismiss
immediately.
---
 .../browse/res/templates/items/grid-item.html |  9 ++-
 platform/commonUI/general/res/css/items.css   | 38 +++++++---
 .../general/res/sass/mobile/_item.scss        | 21 +++++-
 platform/commonUI/inspect/bundle.json         | 15 +++-
 .../inspect/res/templates/info-button.html    | 25 +++++++
 .../inspect/src/controllers/InfoController.js | 69 +++++++++++++++++++
 6 files changed, 162 insertions(+), 15 deletions(-)
 create mode 100644 platform/commonUI/inspect/res/templates/info-button.html
 create mode 100644 platform/commonUI/inspect/src/controllers/InfoController.js

diff --git a/platform/commonUI/browse/res/templates/items/grid-item.html b/platform/commonUI/browse/res/templates/items/grid-item.html
index e64afd4a9f..2a1cc38f00 100644
--- a/platform/commonUI/browse/res/templates/items/grid-item.html
+++ b/platform/commonUI/browse/res/templates/items/grid-item.html
@@ -20,8 +20,8 @@
  at runtime from the About dialog for additional information.
 -->
 <!-- For selected, add class 'selected' to outer div -->
-<div class='item grid-item' ng-click='action.perform("navigate")'>
-    <div class="contents abs">
+<div class='item grid-item'>
+    <div class="contents abs mobile-grid-nav" ng-click='action.perform("navigate")'>
         <div class='top-bar bar abs'>
             <div class='left abs'>
                 <mct-include key="_checkbox"></mct-include>
@@ -44,4 +44,7 @@
             </div>
         </div>
     </div>
-</div>
\ No newline at end of file
+    <div class="contents abs mobile-info">
+        <mct-representation class="contents abs btn s-very-subtle desktop-hide" key="'info-button'" mct-object="domainObject"></mct-representation>
+    </div>
+</div>
diff --git a/platform/commonUI/general/res/css/items.css b/platform/commonUI/general/res/css/items.css
index 85e93a1611..bf9ca44a5f 100644
--- a/platform/commonUI/general/res/css/items.css
+++ b/platform/commonUI/general/res/css/items.css
@@ -367,21 +367,33 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 @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 35, ../sass/mobile/_item.scss */
+  /* line 34, ../sass/mobile/_item.scss */
+  .items-holder .item.grid-item .mobile-grid-nav {
+    top: 0px;
+    bottom: 0px;
+    right: 50px; }
+  /* line 39, ../sass/mobile/_item.scss */
+  .items-holder .item.grid-item .mobile-info {
+    text-align: center;
+    width: 50px;
+    right: 0px;
+    left: auto;
+    font-size: 1.5em; }
+  /* line 47, ../sass/mobile/_item.scss */
   .items-holder .item.grid-item .bar.bottom-bar.abs {
     top: 0px;
     height: auto; }
-  /* line 41, ../sass/mobile/_item.scss */
+  /* line 54, ../sass/mobile/_item.scss */
   .items-holder .item.grid-item .item-main .item-type {
     font-size: 30px;
     top: 0px;
     left: 0px;
     text-align: left;
     height: auto; }
-  /* line 48, ../sass/mobile/_item.scss */
+  /* line 61, ../sass/mobile/_item.scss */
   .items-holder .item.grid-item .item-main .item-open {
     display: none; }
-  /* line 52, ../sass/mobile/_item.scss */
+  /* line 65, ../sass/mobile/_item.scss */
   .items-holder .item.grid-item .title, .items-holder .item.grid-item .details {
     margin-left: 30px; } }
 @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) {
@@ -389,14 +401,17 @@
   .items-holder .item.grid-item {
     width: 100%;
     height: 50px; }
-    /* line 62, ../sass/mobile/_item.scss */
+    /* line 74, ../sass/mobile/_item.scss */
+    .items-holder .item.grid-item .mobile-info {
+      line-height: 25px; }
+    /* line 78, ../sass/mobile/_item.scss */
     .items-holder .item.grid-item .item-main .item-type {
       line-height: 40px; }
-    /* line 66, ../sass/mobile/_item.scss */
+    /* line 82, ../sass/mobile/_item.scss */
     .items-holder .item.grid-item .title {
       margin-right: 10px;
       line-height: 25px; }
-    /* line 70, ../sass/mobile/_item.scss */
+    /* line 86, ../sass/mobile/_item.scss */
     .items-holder .item.grid-item .details {
       margin-right: 10px;
       line-height: 0px; } }
@@ -405,15 +420,18 @@
   .items-holder .item.grid-item {
     width: 100%;
     height: 66.66667px; }
-    /* line 81, ../sass/mobile/_item.scss */
+    /* line 96, ../sass/mobile/_item.scss */
+    .items-holder .item.grid-item .mobile-info {
+      line-height: 38px; }
+    /* line 100, ../sass/mobile/_item.scss */
     .items-holder .item.grid-item .item-main .item-type {
       font-size: 30px;
       line-height: 50px; }
-    /* line 86, ../sass/mobile/_item.scss */
+    /* line 105, ../sass/mobile/_item.scss */
     .items-holder .item.grid-item .title {
       margin-right: 10px;
       line-height: 38px; }
-    /* line 90, ../sass/mobile/_item.scss */
+    /* line 109, ../sass/mobile/_item.scss */
     .items-holder .item.grid-item .details {
       margin-right: 10px;
       line-height: 0px; } }
diff --git a/platform/commonUI/general/res/sass/mobile/_item.scss b/platform/commonUI/general/res/sass/mobile/_item.scss
index 15d792a576..d5a5a1a45a 100644
--- a/platform/commonUI/general/res/sass/mobile/_item.scss
+++ b/platform/commonUI/general/res/sass/mobile/_item.scss
@@ -31,11 +31,24 @@
             $dHei: $ueBrowseGridItemLg;
             @include phoneandtablet {
                 $dWid: 100%;
+                .mobile-grid-nav {
+                    top: 0px;
+                    bottom: 0px;
+                    right: 50px;
+                }
+                .mobile-info {
+                    text-align: center;
+                    width: 50px;
+                    right: 0px;
+                    left: auto;
+                    font-size: 1.5em;
+                }
                 .bar {
                     &.bottom-bar.abs {
                         top: 0px;
                         height: auto;
                     }
+                    
                 }
                 .item-main {
                     .item-type {
@@ -51,13 +64,16 @@
                 }
                 .title, .details {
                     margin-left: $mobile-listIcon;
-                }             
+                }
             }
 
             @include phone {
                 $dHei: $phone-itemHeight;
                 width: $dWid;
                 height: $dHei;
+                .mobile-info {
+                    line-height: $phone-itemHeight * .5;
+                }
                 .item-main {
                     .item-type {
                         line-height: $phone-itemHeight * .8;
@@ -77,6 +93,9 @@
                 $dHei: $tablet-itemHeight;
                 width: $dWid;
                 height: $dHei;
+                .mobile-info {
+                    line-height: $tablet-itemHeight * .57;
+                }
                 .item-main {
                     .item-type {
                         font-size: $mobile-listIcon;
diff --git a/platform/commonUI/inspect/bundle.json b/platform/commonUI/inspect/bundle.json
index 7a2123486b..f629272e99 100644
--- a/platform/commonUI/inspect/bundle.json
+++ b/platform/commonUI/inspect/bundle.json
@@ -9,6 +9,13 @@
                 "key": "info-bubble",
                 "templateUrl": "info-bubble.html"
             }
+        ],      
+        "controllers": [
+            {
+                "key": "InfoController",
+                "implementation": "controllers/InfoController.js",
+                "depends": [ "$scope", "$timeout", "infoService" ]
+            }
         ],
         "containers": [
             {
@@ -41,12 +48,18 @@
                     "$rootScope"
                 ]
             }
-        ],
+        ],  
         "constants": [
             {
                 "key": "INFO_HOVER_DELAY",
                 "value": 2000
             }
+        ],
+        "representations": [
+            {
+                "key": "info-button",
+                "templateUrl": "templates/info-button.html"
+            }
         ]
     }
 }
\ No newline at end of file
diff --git a/platform/commonUI/inspect/res/templates/info-button.html b/platform/commonUI/inspect/res/templates/info-button.html
new file mode 100644
index 0000000000..e602b2c0b1
--- /dev/null
+++ b/platform/commonUI/inspect/res/templates/info-button.html
@@ -0,0 +1,25 @@
+<!--
+ Open MCT Web, Copyright (c) 2014-2015, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT Web includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+
+<div ng-controller="InfoController" ng-click='tryToDis($event)'>
+    <a class='ui-symbol icon mobile-info'>i</a>
+</div>
diff --git a/platform/commonUI/inspect/src/controllers/InfoController.js b/platform/commonUI/inspect/src/controllers/InfoController.js
new file mode 100644
index 0000000000..464d0ba6ac
--- /dev/null
+++ b/platform/commonUI/inspect/src/controllers/InfoController.js
@@ -0,0 +1,69 @@
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+/*global define,Promise*/
+
+/**
+ * Module defining InfoController.
+ */
+define(
+    [],
+    function () {
+        "use strict";
+        function InfoController($scope, $timeout, infoService) {
+            var touchPosition,
+                bubble;
+            function trackPosition(event) {
+                // Record mouse position, so bubble can be shown at latest
+                // mouse position (not just where the mouse entered)
+                touchPosition = [ event.pageX, event.pageY ];
+            }
+            
+            function display(event) {
+                var domainObject = $scope.domainObject;
+                console.log(domainObject.getId());
+                trackPosition(event);
+                
+                if(!bubble) {
+                    bubble = infoService.display(
+                        "info-table",
+                        domainObject.getModel().name,
+                        domainObject.useCapability('metadata'),
+                        touchPosition
+                    );
+                } else {
+                    bubble();
+                    bubble = undefined;
+                }
+                
+                $timeout(function () {
+                // If a bubble is showing, dismiss it after timeout
+                    if (bubble) {
+                        bubble();
+                        bubble = undefined;
+                    }
+                }, 750);
+            }
+            $scope.tryToDis = display;
+        }
+        return InfoController;
+    }
+);
\ No newline at end of file

From 9b922913a06addda902ad44f8c54e7d0ffe5ae7d Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Tue, 4 Aug 2015 09:59:08 -0700
Subject: [PATCH 131/209] [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.
---
 .../browse/res/templates/back-arrow.html      |   2 +-
 platform/commonUI/general/res/css/items.css   |   2 +-
 .../general/res/css/theme-espresso.css        |  80 +++++++-----
 platform/commonUI/general/res/css/tree.css    |  10 +-
 platform/commonUI/general/res/sass/_main.scss |   1 +
 .../general/res/sass/helpers/_bubbles.scss    |  35 ++++--
 .../general/res/sass/mobile/_item.scss        |   2 +-
 .../general/res/sass/mobile/_mixins.scss      |  13 +-
 .../general/res/sass/mobile/_tree.scss        |   7 +-
 .../res/sass/mobile/overlay/_overlay.scss     |  11 ++
 .../general/res/templates/tree-node.html      |   2 +-
 .../general/src/services/QueryService.js      |  19 ++-
 platform/commonUI/inspect/bundle.json         |  22 ++--
 .../inspect/res/templates/info-button.html    |   3 +-
 .../inspect/src/controllers/InfoController.js |  69 -----------
 .../inspect/src/gestures/InfoButtonGesture.js | 116 ++++++++++++++++++
 .../inspect/src/services/InfoService.js       |  32 +++--
 17 files changed, 284 insertions(+), 142 deletions(-)
 create mode 100644 platform/commonUI/general/res/sass/mobile/overlay/_overlay.scss
 delete mode 100644 platform/commonUI/inspect/src/controllers/InfoController.js
 create mode 100644 platform/commonUI/inspect/src/gestures/InfoButtonGesture.js

diff --git a/platform/commonUI/browse/res/templates/back-arrow.html b/platform/commonUI/browse/res/templates/back-arrow.html
index c718bed951..15775fb632 100644
--- a/platform/commonUI/browse/res/templates/back-arrow.html
+++ b/platform/commonUI/browse/res/templates/back-arrow.html
@@ -24,5 +24,5 @@
 <span ng-controller="BrowseController"
       ng-click='backArrow()'
       ng-class="checkRoot(); atRoot ? 'mobile-back-hide' : 'mobile-back-unhide'">
-    <a class='type-icon icon ui-symbol'>&lt;</a>
+    <a class='type-icon icon ui-symbol'>{</a>
 </span>
diff --git a/platform/commonUI/general/res/css/items.css b/platform/commonUI/general/res/css/items.css
index bf9ca44a5f..3e650d8156 100644
--- a/platform/commonUI/general/res/css/items.css
+++ b/platform/commonUI/general/res/css/items.css
@@ -371,7 +371,7 @@
   .items-holder .item.grid-item .mobile-grid-nav {
     top: 0px;
     bottom: 0px;
-    right: 50px; }
+    right: 55px; }
   /* line 39, ../sass/mobile/_item.scss */
   .items-holder .item.grid-item .mobile-info {
     text-align: center;
diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index e894e4d472..67708bdcee 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -4432,6 +4432,17 @@ input[type="text"] {
   left: 5px;
   overflow: auto; }
 
+@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 6, ../sass/mobile/overlay/_overlay.scss */
+  .overlay > .holder {
+    -moz-border-radius: 0;
+    -webkit-border-radius: 0;
+    border-radius: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0; } }
+
 /*****************************************************************************
  * Open MCT Web, Copyright (c) 2014-2015, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
@@ -4757,33 +4768,40 @@ input[type="text"] {
     margin-left: 20px; }
     /* line 80, ../sass/helpers/_bubbles.scss */
     .l-infobubble-wrapper.arw-left .l-infobubble::before {
-      right: 100%;
-      width: 0;
-      height: 0;
-      border-top: 6.66667px solid transparent;
-      border-bottom: 6.66667px solid transparent;
-      border-right: 10px solid #ddd; }
-  /* line 86, ../sass/helpers/_bubbles.scss */
-  .l-infobubble-wrapper.arw-right {
-    margin-right: 20px; }
-    /* line 88, ../sass/helpers/_bubbles.scss */
-    .l-infobubble-wrapper.arw-right .l-infobubble::before {
-      left: 100%;
-      width: 0;
-      height: 0;
-      border-top: 6.66667px solid transparent;
-      border-bottom: 6.66667px solid transparent;
-      border-left: 10px solid #ddd; }
-  /* line 95, ../sass/helpers/_bubbles.scss */
+      right: 100%; }
+      @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), screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
+        /* line 80, ../sass/helpers/_bubbles.scss */
+        .l-infobubble-wrapper.arw-left .l-infobubble::before {
+          width: 0;
+          height: 0;
+          border-top: 6.66667px solid transparent;
+          border-bottom: 6.66667px solid transparent;
+          border-right: 10px solid #ddd; } }
+  @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), screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
+    /* line 92, ../sass/helpers/_bubbles.scss */
+    .l-infobubble-wrapper.arw-right {
+      margin-right: 20px; } }
+  /* line 99, ../sass/helpers/_bubbles.scss */
+  .l-infobubble-wrapper.arw-right .l-infobubble::before {
+    left: 100%; }
+    @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), screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
+      /* line 99, ../sass/helpers/_bubbles.scss */
+      .l-infobubble-wrapper.arw-right .l-infobubble::before {
+        width: 0;
+        height: 0;
+        border-top: 6.66667px solid transparent;
+        border-bottom: 6.66667px solid transparent;
+        border-left: 10px solid #ddd; } }
+  /* line 112, ../sass/helpers/_bubbles.scss */
   .l-infobubble-wrapper.arw-top .l-infobubble::before {
     top: 20px; }
-  /* line 101, ../sass/helpers/_bubbles.scss */
+  /* line 118, ../sass/helpers/_bubbles.scss */
   .l-infobubble-wrapper.arw-btm .l-infobubble::before {
     bottom: 20px; }
-  /* line 106, ../sass/helpers/_bubbles.scss */
+  /* line 123, ../sass/helpers/_bubbles.scss */
   .l-infobubble-wrapper.arw-down {
     margin-bottom: 10px; }
-    /* line 108, ../sass/helpers/_bubbles.scss */
+    /* line 125, ../sass/helpers/_bubbles.scss */
     .l-infobubble-wrapper.arw-down .l-infobubble::before {
       left: 50%;
       top: 100%;
@@ -4791,21 +4809,21 @@ input[type="text"] {
       border-left: 5px solid transparent;
       border-right: 5px solid transparent;
       border-top: 7.5px solid #ddd; }
-  /* line 117, ../sass/helpers/_bubbles.scss */
+  /* line 134, ../sass/helpers/_bubbles.scss */
   .l-infobubble-wrapper .arw {
     z-index: 2; }
-  /* line 120, ../sass/helpers/_bubbles.scss */
+  /* line 137, ../sass/helpers/_bubbles.scss */
   .l-infobubble-wrapper.arw-up .arw.arw-down, .l-infobubble-wrapper.arw-down .arw.arw-up {
     display: none; }
 
-/* line 127, ../sass/helpers/_bubbles.scss */
+/* line 144, ../sass/helpers/_bubbles.scss */
 .l-thumbsbubble-wrapper .arw-up {
   width: 0;
   height: 0;
   border-left: 6.66667px solid transparent;
   border-right: 6.66667px solid transparent;
   border-bottom: 10px solid #4d4d4d; }
-/* line 130, ../sass/helpers/_bubbles.scss */
+/* line 147, ../sass/helpers/_bubbles.scss */
 .l-thumbsbubble-wrapper .arw-down {
   width: 0;
   height: 0;
@@ -4813,7 +4831,7 @@ input[type="text"] {
   border-right: 6.66667px solid transparent;
   border-top: 10px solid #4d4d4d; }
 
-/* line 134, ../sass/helpers/_bubbles.scss */
+/* line 151, ../sass/helpers/_bubbles.scss */
 .s-infobubble {
   -moz-border-radius: 2px;
   -webkit-border-radius: 2px;
@@ -4824,22 +4842,22 @@ input[type="text"] {
   background: #ddd;
   color: #666;
   font-size: 0.8rem; }
-  /* line 141, ../sass/helpers/_bubbles.scss */
+  /* line 158, ../sass/helpers/_bubbles.scss */
   .s-infobubble .title {
     color: #333333;
     font-weight: bold; }
-  /* line 146, ../sass/helpers/_bubbles.scss */
+  /* line 163, ../sass/helpers/_bubbles.scss */
   .s-infobubble tr td {
     border-top: 1px solid #c4c4c4;
     font-size: 0.9em; }
-  /* line 150, ../sass/helpers/_bubbles.scss */
+  /* line 167, ../sass/helpers/_bubbles.scss */
   .s-infobubble tr:first-child td {
     border-top: none; }
-  /* line 154, ../sass/helpers/_bubbles.scss */
+  /* line 171, ../sass/helpers/_bubbles.scss */
   .s-infobubble .value {
     color: #333333; }
 
-/* line 159, ../sass/helpers/_bubbles.scss */
+/* line 176, ../sass/helpers/_bubbles.scss */
 .s-thumbsbubble {
   background: #4d4d4d;
   color: #b3b3b3; }
diff --git a/platform/commonUI/general/res/css/tree.css b/platform/commonUI/general/res/css/tree.css
index a0b8f7286d..dec304455c 100644
--- a/platform/commonUI/general/res/css/tree.css
+++ b/platform/commonUI/general/res/css/tree.css
@@ -344,14 +344,16 @@ ul.tree {
         right: 13px;
         font-size: 1.8em;
         right: 0px;
-        width: auto; }
-      /* line 44, ../sass/mobile/_tree.scss */
+        width: 35px;
+        text-align: center; }
+      /* line 45, ../sass/mobile/_tree.scss */
       ul.tree li span.tree-item .label {
         left: 3px;
+        right: 45px;
         font-size: 1.2em; }
-        /* line 51, ../sass/mobile/_tree.scss */
+        /* line 54, ../sass/mobile/_tree.scss */
         ul.tree li span.tree-item .label .title-label {
           right: 16.9px; }
-    /* line 60, ../sass/mobile/_tree.scss */
+    /* line 63, ../sass/mobile/_tree.scss */
     ul.tree ul.tree {
       margin-left: 7px; } }
diff --git a/platform/commonUI/general/res/sass/_main.scss b/platform/commonUI/general/res/sass/_main.scss
index 6d5c8a5b7d..fd641fac09 100644
--- a/platform/commonUI/general/res/sass/_main.scss
+++ b/platform/commonUI/general/res/sass/_main.scss
@@ -64,6 +64,7 @@
 @import "forms/filter";
 @import "plots/plots-main";
 @import "overlay/overlay";
+@import "mobile/overlay/overlay";
 @import "user-environ/frame";
 @import "user-environ/top-bar";
 @import "user-environ/bottom-bar";
diff --git a/platform/commonUI/general/res/sass/helpers/_bubbles.scss b/platform/commonUI/general/res/sass/helpers/_bubbles.scss
index 5b174ba6da..ef580f853a 100644
--- a/platform/commonUI/general/res/sass/helpers/_bubbles.scss
+++ b/platform/commonUI/general/res/sass/helpers/_bubbles.scss
@@ -79,15 +79,32 @@
 		margin-left: $bubbleArwSize*2;
 		.l-infobubble::before {
 			right: 100%;
-			@include triangle('left', $bubbleArwSize, 1.5, $colorInfoBubbleBg);
+            // NOTE: [MOBILE] REMOVES TRIANGLE
+            // Removes the triangle located on the info
+            // bubble for phones only, for tablets and
+            // desktops, triangle remains.
+            @include desktopandtablet {
+                @include triangle('left', $bubbleArwSize, 1.5, $colorInfoBubbleBg);
+            }
 		}
 	}
 
 	&.arw-right {
-		margin-right: $bubbleArwSize*2;
+        // NOTE: [MOBILE] REMOVES RIGHT MARGIN
+        // Removes right margin made for the 
+        // triangle on mobile
+        @include desktopandtablet {
+		  margin-right: $bubbleArwSize*2;
+        }
 		.l-infobubble::before {
 			left: 100%;
-			@include triangle('right', $bubbleArwSize, 1.5, $colorInfoBubbleBg);
+            // NOTE: [MOBILE] REMOVES TRIANGLE
+            // Removes the triangle located on the info
+            // bubble for phones only, for tablets and
+            // desktops, triangle remains.
+            @include desktopandtablet {
+                @include triangle('right', $bubbleArwSize, 1.5, $colorInfoBubbleBg);
+            }
 		}
 	}
 
@@ -124,12 +141,12 @@
 //************************************************* LOOK AND FEEL
 
 .l-thumbsbubble-wrapper {
-	.arw-up {
-		@include triangle('up', $bubbleArwSize, 1.5, $colorThumbsBubbleBg);
-	}
-	.arw-down {
-		@include triangle('down', $bubbleArwSize, 1.5, $colorThumbsBubbleBg);
-	}
+    .arw-up {
+        @include triangle('up', $bubbleArwSize, 1.5, $colorThumbsBubbleBg);
+    }
+    .arw-down {
+        @include triangle('down', $bubbleArwSize, 1.5, $colorThumbsBubbleBg);
+    }
 }
 .s-infobubble {
 	$emFg: darken($colorInfoBubbleFg, 20%);
diff --git a/platform/commonUI/general/res/sass/mobile/_item.scss b/platform/commonUI/general/res/sass/mobile/_item.scss
index d5a5a1a45a..8ce7576f1e 100644
--- a/platform/commonUI/general/res/sass/mobile/_item.scss
+++ b/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;
diff --git a/platform/commonUI/general/res/sass/mobile/_mixins.scss b/platform/commonUI/general/res/sass/mobile/_mixins.scss
index 23ce4cff2a..b4b0bd2c71 100644
--- a/platform/commonUI/general/res/sass/mobile/_mixins.scss
+++ b/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
     }
 }
diff --git a/platform/commonUI/general/res/sass/mobile/_tree.scss b/platform/commonUI/general/res/sass/mobile/_tree.scss
index fcdc70666e..d7f62f16b0 100644
--- a/platform/commonUI/general/res/sass/mobile/_tree.scss
+++ b/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;
-                    }                    
+                    }
                 }             
             }
         }
diff --git a/platform/commonUI/general/res/sass/mobile/overlay/_overlay.scss b/platform/commonUI/general/res/sass/mobile/overlay/_overlay.scss
new file mode 100644
index 0000000000..ac99a36d17
--- /dev/null
+++ b/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;
+        }
+    }
+}
\ No newline at end of file
diff --git a/platform/commonUI/general/res/templates/tree-node.html b/platform/commonUI/general/res/templates/tree-node.html
index 6f791cfa75..7f54b97180 100644
--- a/platform/commonUI/general/res/templates/tree-node.html
+++ b/platform/commonUI/general/res/templates/tree-node.html
@@ -41,7 +41,7 @@
                           toggle.toggle(); treeNode.trackExpansion()"
 				ng-if="model.composition !== undefined || treeNode.checkMobile()"
 				>
-                {{treeNode.checkMobile() ? ">" : toggle.isActive() ? "v" : ">"}}
+                {{treeNode.checkMobile() ? "}" : toggle.isActive() ? "v" : ">"}}
             </span>
         </span>
         <span
diff --git a/platform/commonUI/general/src/services/QueryService.js b/platform/commonUI/general/src/services/QueryService.js
index 9d9b13989b..18ecea79c4 100644
--- a/platform/commonUI/general/src/services/QueryService.js
+++ b/platform/commonUI/general/src/services/QueryService.js
@@ -54,6 +54,17 @@ define(
                     return false;
                 }
             }
+            
+            // Checks if device is phone,
+            // phone is designated as only an
+            // iPhone device
+            function isPhone(ua) {
+                if (getDeviceUA(ua) == "iPhone") {
+                    return true;
+                } else {
+                    return false;
+                }
+            }
 
             // Returns the orientation of the device based on the
             // device's window dimensions
@@ -76,7 +87,13 @@ define(
                  * on a mobile or non-mobile device. (mobile: true,
                  * non-mobile: false)
                  */
-                isMobile: isMobile
+                isMobile: isMobile,
+                
+                /**
+                 * Returns the a boolean checking if the user is on
+                 * a phone device. (phone: true, non-phone: false)
+                 */
+                isPhone: isPhone
             };
         }
 
diff --git a/platform/commonUI/inspect/bundle.json b/platform/commonUI/inspect/bundle.json
index f629272e99..7168b638e0 100644
--- a/platform/commonUI/inspect/bundle.json
+++ b/platform/commonUI/inspect/bundle.json
@@ -9,13 +9,6 @@
                 "key": "info-bubble",
                 "templateUrl": "info-bubble.html"
             }
-        ],      
-        "controllers": [
-            {
-                "key": "InfoController",
-                "implementation": "controllers/InfoController.js",
-                "depends": [ "$scope", "$timeout", "infoService" ]
-            }
         ],
         "containers": [
             {
@@ -35,6 +28,15 @@
                     "infoService",
                     "INFO_HOVER_DELAY"
                 ]
+            },
+            {
+                "key": "infobutton",
+                "implementation": "gestures/InfoButtonGesture.js",
+                "depends": [
+                    "$document",
+                    "queryService",
+                    "infoService"
+                ]
             }
         ],
         "services": [
@@ -45,7 +47,8 @@
                     "$compile",
                     "$document",
                     "$window",
-                    "$rootScope"
+                    "$rootScope",
+                    "queryService"
                 ]
             }
         ],  
@@ -58,7 +61,8 @@
         "representations": [
             {
                 "key": "info-button",
-                "templateUrl": "templates/info-button.html"
+                "templateUrl": "templates/info-button.html",
+                "gestures": [ "infobutton" ]
             }
         ]
     }
diff --git a/platform/commonUI/inspect/res/templates/info-button.html b/platform/commonUI/inspect/res/templates/info-button.html
index e602b2c0b1..bfc43a8fa4 100644
--- a/platform/commonUI/inspect/res/templates/info-button.html
+++ b/platform/commonUI/inspect/res/templates/info-button.html
@@ -20,6 +20,7 @@
  at runtime from the About dialog for additional information.
 -->
 
-<div ng-controller="InfoController" ng-click='tryToDis($event)'>
+<!--The icon for the info button appearing in a grid item (list in folder)-->
+<div>
     <a class='ui-symbol icon mobile-info'>i</a>
 </div>
diff --git a/platform/commonUI/inspect/src/controllers/InfoController.js b/platform/commonUI/inspect/src/controllers/InfoController.js
deleted file mode 100644
index 464d0ba6ac..0000000000
--- a/platform/commonUI/inspect/src/controllers/InfoController.js
+++ /dev/null
@@ -1,69 +0,0 @@
-/*****************************************************************************
- * Open MCT Web, Copyright (c) 2014-2015, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT Web is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT Web includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-/*global define,Promise*/
-
-/**
- * Module defining InfoController.
- */
-define(
-    [],
-    function () {
-        "use strict";
-        function InfoController($scope, $timeout, infoService) {
-            var touchPosition,
-                bubble;
-            function trackPosition(event) {
-                // Record mouse position, so bubble can be shown at latest
-                // mouse position (not just where the mouse entered)
-                touchPosition = [ event.pageX, event.pageY ];
-            }
-            
-            function display(event) {
-                var domainObject = $scope.domainObject;
-                console.log(domainObject.getId());
-                trackPosition(event);
-                
-                if(!bubble) {
-                    bubble = infoService.display(
-                        "info-table",
-                        domainObject.getModel().name,
-                        domainObject.useCapability('metadata'),
-                        touchPosition
-                    );
-                } else {
-                    bubble();
-                    bubble = undefined;
-                }
-                
-                $timeout(function () {
-                // If a bubble is showing, dismiss it after timeout
-                    if (bubble) {
-                        bubble();
-                        bubble = undefined;
-                    }
-                }, 750);
-            }
-            $scope.tryToDis = display;
-        }
-        return InfoController;
-    }
-);
\ No newline at end of file
diff --git a/platform/commonUI/inspect/src/gestures/InfoButtonGesture.js b/platform/commonUI/inspect/src/gestures/InfoButtonGesture.js
new file mode 100644
index 0000000000..04ab14ebe4
--- /dev/null
+++ b/platform/commonUI/inspect/src/gestures/InfoButtonGesture.js
@@ -0,0 +1,116 @@
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+/*global define*/
+
+define(
+    [],
+    function () {
+        "use strict";
+
+        /**
+         * The `info` gesture displays domain object metadata in a
+         * bubble on hover.
+         *
+         * @constructor
+         * @param $document Angular's `$document`
+         * @param {InfoService} infoService a service which shows info bubbles
+         * @param element jqLite-wrapped DOM element
+         * @param {DomainObject} domainObject the domain object for which to
+         *        show information
+         */
+        function InfoGestureButton($document, queryService, infoService, element, domainObject) {
+            var dismissBubble,
+                pendingBubble,
+                touchPosition,
+                scopeOff,
+                body = $document.find('body');
+
+            function trackPosition(event) {
+                // Record touch position, so bubble can be shown at latest
+                // touch position, also offset by 22px to left (accounts for
+                // a finger-sized touch on the info button)
+                touchPosition = [ event.clientX - 22, event.clientY ];
+            }
+
+            // Hides the bubble and detaches the
+            // body hidebubble listener
+            function hideBubble() {
+                // If a bubble is showing, dismiss it
+                if (dismissBubble) {
+                    dismissBubble();
+                    dismissBubble = undefined;
+                }
+                // Detaches body touch listener
+                body.off('touchstart', hideBubble);
+            }
+            
+            // Displays the bubble by tracking position of
+            // touch, using infoService to display the bubble,
+            // and then on any body touch the bubble is dismissed
+            function showBubble(event) {
+                trackPosition(event);
+
+                // Show the bubble, but on any touchstart on the
+                // body (anywhere) call hidebubble
+                pendingBubble =
+                    dismissBubble = infoService.display(
+                        "info-table",
+                        domainObject.getModel().name,
+                        domainObject.useCapability('metadata'),
+                        touchPosition
+                    );
+                body.on('touchstart', hideBubble);
+            }
+            
+            // Checks if you are on a mobile device, if the device is
+            // mobile (queryService.isMobile() = true), then
+            // the a click on something (info button) brings up 
+            // the bubble
+            if (queryService.isMobile(navigator.userAgent)) {
+                element.on('click', showBubble);
+            }
+
+            // Also make sure we dismiss bubble if representation is destroyed
+            // before the mouse actually leaves it
+            scopeOff = element.scope().$on('$destroy', hideBubble);
+
+            return {
+                /**
+                 * Detach any event handlers associated with this gesture.
+                 * @memberof InfoGesture
+                 * @method
+                 */
+                destroy: function () {
+                    // Dismiss any active bubble...
+                    hideBubble();
+                    // ...and detach listeners
+                    element.off('click', showBubble);
+                    scopeOff();
+                }
+            };
+        }
+
+        return InfoGestureButton;
+
+    }
+
+);
diff --git a/platform/commonUI/inspect/src/services/InfoService.js b/platform/commonUI/inspect/src/services/InfoService.js
index b67192ba30..4804137544 100644
--- a/platform/commonUI/inspect/src/services/InfoService.js
+++ b/platform/commonUI/inspect/src/services/InfoService.js
@@ -33,7 +33,7 @@ define(
          * Displays informative content ("info bubbles") for the user.
          * @constructor
          */
-        function InfoService($compile, $document, $window, $rootScope) {
+        function InfoService($compile, $document, $window, $rootScope, queryService) {
 
             function display(templateKey, title, content, position) {
                 var body = $document.find('body'),
@@ -54,19 +54,29 @@ define(
                 // Create the context menu
                 bubble = $compile(BUBBLE_TEMPLATE)(scope);
 
-                // Position the bubble
+                // Position the bubble:
+                // Phone: On a phone the bubble is specifically positioned
+                //  so that it takes up the width of the screen.
+                // Tablet/Desktop: On other devices with larger screens, the
+                //  info bubble positioned as normal (with triangle pointing 
+                //  to where clicked or pressed)
                 bubble.css('position', 'absolute');
-                if (goLeft) {
-                    bubble.css('right', (winDim[0] - position[0] + OFFSET[0]) + 'px');
+                if(queryService.isPhone(navigator.userAgent)) {                    
+                    bubble.css('right', 5 + 'px');
+                    bubble.css('left', 5 + 'px');
+                    bubble.css('top', 40 + 'px');
                 } else {
-                    bubble.css('left', position[0] + OFFSET[0] + 'px');
+                    if (goLeft) {
+                        bubble.css('right', (winDim[0] - position[0] + OFFSET[0]) + 'px');
+                    } else {
+                        bubble.css('left', position[0] + OFFSET[0] + 'px');
+                    }
+                    if (goUp) {
+                        bubble.css('bottom', (winDim[1] - position[1] + OFFSET[1]) + 'px');
+                    } else {
+                        bubble.css('top', position[1] + OFFSET[1] + 'px');
+                    }
                 }
-                if (goUp) {
-                    bubble.css('bottom', (winDim[1] - position[1] + OFFSET[1]) + 'px');
-                } else {
-                    bubble.css('top', position[1] + OFFSET[1] + 'px');
-                }
-
                 // Add the menu to the body
                 body.append(bubble);
 

From 3d524d7572455fb48d2fd7df5d0d846a743285ca Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Tue, 4 Aug 2015 10:11:25 -0700
Subject: [PATCH 132/209] [Mobile] AgentService

Replaced name queryService with agentService.
---
 platform/commonUI/general/bundle.json            |  6 +++---
 .../src/controllers/TreeNodeController.js        |  4 ++--
 .../{QueryService.js => AgentService.js}         |  6 +++---
 .../test/controllers/TreeNodeControllerSpec.js   |  6 +++---
 .../{QueryServiceSpec.js => AgentServiceSpec.js} | 16 ++++++++--------
 platform/commonUI/general/test/suite.json        |  2 +-
 platform/commonUI/inspect/bundle.json            |  6 +++---
 .../inspect/src/gestures/InfoButtonGesture.js    |  6 +++---
 .../commonUI/inspect/src/gestures/InfoGesture.js |  6 +++---
 .../commonUI/inspect/src/services/InfoService.js |  4 ++--
 .../inspect/test/gestures/InfoGestureSpec.js     |  6 +++---
 platform/representation/bundle.json              |  4 ++--
 .../src/actions/ContextMenuAction.js             | 10 +++++-----
 .../src/gestures/ContextMenuGesture.js           |  6 +++---
 .../test/actions/ContextMenuActionSpec.js        | 10 +++++-----
 .../test/gestures/ContextMenuGestureSpec.js      | 10 +++++-----
 16 files changed, 54 insertions(+), 54 deletions(-)
 rename platform/commonUI/general/src/services/{QueryService.js => AgentService.js} (97%)
 rename platform/commonUI/general/test/services/{QueryServiceSpec.js => AgentServiceSpec.js} (87%)

diff --git a/platform/commonUI/general/bundle.json b/platform/commonUI/general/bundle.json
index 53486c3f0e..f4ceed6ba1 100644
--- a/platform/commonUI/general/bundle.json
+++ b/platform/commonUI/general/bundle.json
@@ -10,8 +10,8 @@
                 "depends": [ "$location" ]
             },
             {
-                "key": "queryService",
-                "implementation": "/services/QueryService.js",
+                "key": "agentService",
+                "implementation": "/services/AgentService.js",
                 "depends": [ "$window" ]
             }
         ],
@@ -65,7 +65,7 @@
             {
                 "key": "TreeNodeController",
                 "implementation": "controllers/TreeNodeController.js",
-                "depends": [ "$scope", "$timeout", "queryService" ]
+                "depends": [ "$scope", "$timeout", "agentService" ]
             },
             {
                 "key": "ActionGroupController",
diff --git a/platform/commonUI/general/src/controllers/TreeNodeController.js b/platform/commonUI/general/src/controllers/TreeNodeController.js
index 27ef3bfd49..c55c3e2b6b 100644
--- a/platform/commonUI/general/src/controllers/TreeNodeController.js
+++ b/platform/commonUI/general/src/controllers/TreeNodeController.js
@@ -50,7 +50,7 @@ define(
          * expand-to-show-navigated-object behavior.)
          * @constructor
          */
-        function TreeNodeController($scope, $timeout, queryService) {
+        function TreeNodeController($scope, $timeout, agentService) {
             var selectedObject = ($scope.ngModel || {}).selectedObject,
                 isSelected = false,
                 hasBeenExpanded = false;
@@ -88,7 +88,7 @@ define(
             }
             
             function checkMobile() {
-                return queryService.isMobile(navigator.userAgent);
+                return agentService.isMobile(navigator.userAgent);
             }
             
             // Consider the currently-navigated object and update
diff --git a/platform/commonUI/general/src/services/QueryService.js b/platform/commonUI/general/src/services/AgentService.js
similarity index 97%
rename from platform/commonUI/general/src/services/QueryService.js
rename to platform/commonUI/general/src/services/AgentService.js
index 18ecea79c4..307446c1dc 100644
--- a/platform/commonUI/general/src/services/QueryService.js
+++ b/platform/commonUI/general/src/services/AgentService.js
@@ -22,7 +22,7 @@
 /*global define,Promise*/
 
 /**
- * Module defining QueryService.
+ * Module defining AgentService.
  */
 
 define(
@@ -35,7 +35,7 @@ define(
          * info using a comparison between the userAgent and key
          * device names
          */
-        function QueryService($window) {
+        function AgentService($window) {
             
             // Gets the UA name if it is one of the following.
             // If it is not (a desktop for example) nothing is
@@ -97,6 +97,6 @@ define(
             };
         }
 
-        return QueryService;
+        return AgentService;
     }
 );
\ No newline at end of file
diff --git a/platform/commonUI/general/test/controllers/TreeNodeControllerSpec.js b/platform/commonUI/general/test/controllers/TreeNodeControllerSpec.js
index 2ce5c9f9fc..67e6cf7142 100644
--- a/platform/commonUI/general/test/controllers/TreeNodeControllerSpec.js
+++ b/platform/commonUI/general/test/controllers/TreeNodeControllerSpec.js
@@ -29,7 +29,7 @@ define(
         describe("The tree node controller", function () {
             var mockScope,
                 mockTimeout,
-                mockQueryService,
+                mockAgentService,
                 controller;
 
             function TestObject(id, context) {
@@ -44,8 +44,8 @@ define(
             beforeEach(function () {
                 mockScope = jasmine.createSpyObj("$scope", ["$watch", "$on"]);
                 mockTimeout = jasmine.createSpy("$timeout");
-                mockQueryService = jasmine.createSpyObj("queryService", ["isMobile"]);
-                controller = new TreeNodeController(mockScope, mockTimeout, mockQueryService);
+                mockAgentService = jasmine.createSpyObj("agentService", ["isMobile"]);
+                controller = new TreeNodeController(mockScope, mockTimeout, mockAgentService);
             });
 
             it("allows tracking of expansion state", function () {
diff --git a/platform/commonUI/general/test/services/QueryServiceSpec.js b/platform/commonUI/general/test/services/AgentServiceSpec.js
similarity index 87%
rename from platform/commonUI/general/test/services/QueryServiceSpec.js
rename to platform/commonUI/general/test/services/AgentServiceSpec.js
index 7caf551029..6207267da2 100644
--- a/platform/commonUI/general/test/services/QueryServiceSpec.js
+++ b/platform/commonUI/general/test/services/AgentServiceSpec.js
@@ -25,12 +25,12 @@
  * MCTRepresentationSpec. Created by vwoeltje on 11/6/14.
  */
 define(
-    ["../../src/services/QueryService"],
-    function (QueryService) {
+    ["../../src/services/AgentService"],
+    function (AgentService) {
         "use strict";
 
         describe("The url service", function () {
-            var queryService,
+            var agentService,
                 mockWindow,
                 mockNavigator;
 
@@ -47,24 +47,24 @@ define(
                     [ "userAgent" ]
                 );
                 
-                queryService = new QueryService(mockWindow);
+                agentService = new AgentService(mockWindow);
             });
             
             it("get current device user agent", function () {
                 mockNavigator.userAgent = "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/44.0.2403.89 Safari/537.36";
-                queryService.isMobile(mockNavigator.userAgent);
+                agentService.isMobile(mockNavigator.userAgent);
                 mockNavigator.userAgent = "Mozilla/5.0 (iPad; CPU OS 7_0 like Mac OS X) AppleWebKit/537.51.1 (KHTML, like Gecko) Version/7.0 Mobile/11A465 Safari/9537.53";
-                queryService.isMobile(mockNavigator.userAgent);
+                agentService.isMobile(mockNavigator.userAgent);
             });
             
             it("get orientation of the current device", function () {
                 mockWindow.outerWidth = 768;
                 mockWindow.outerHeight = 1024;
-                queryService.getOrientation();
+                agentService.getOrientation();
                 
                 mockWindow.outerWidth = 1024;
                 mockWindow.outerHeight = 768;
-                queryService.getOrientation();
+                agentService.getOrientation();
             });
         });
     }
diff --git a/platform/commonUI/general/test/suite.json b/platform/commonUI/general/test/suite.json
index 08240b6044..085c1795ba 100644
--- a/platform/commonUI/general/test/suite.json
+++ b/platform/commonUI/general/test/suite.json
@@ -13,7 +13,7 @@
     "directives/MCTDrag",
     "directives/MCTResize",
     "directives/MCTScroll",
-    "services/QueryService",
+    "services/AgentService",
     "services/UrlService",
     "StyleSheetLoader"
 ]
\ No newline at end of file
diff --git a/platform/commonUI/inspect/bundle.json b/platform/commonUI/inspect/bundle.json
index 7168b638e0..bafeb851ef 100644
--- a/platform/commonUI/inspect/bundle.json
+++ b/platform/commonUI/inspect/bundle.json
@@ -24,7 +24,7 @@
                 "implementation": "gestures/InfoGesture.js",
                 "depends": [
                     "$timeout",
-                    "queryService",
+                    "agentService",
                     "infoService",
                     "INFO_HOVER_DELAY"
                 ]
@@ -34,7 +34,7 @@
                 "implementation": "gestures/InfoButtonGesture.js",
                 "depends": [
                     "$document",
-                    "queryService",
+                    "agentService",
                     "infoService"
                 ]
             }
@@ -48,7 +48,7 @@
                     "$document",
                     "$window",
                     "$rootScope",
-                    "queryService"
+                    "agentService"
                 ]
             }
         ],  
diff --git a/platform/commonUI/inspect/src/gestures/InfoButtonGesture.js b/platform/commonUI/inspect/src/gestures/InfoButtonGesture.js
index 04ab14ebe4..679daabd51 100644
--- a/platform/commonUI/inspect/src/gestures/InfoButtonGesture.js
+++ b/platform/commonUI/inspect/src/gestures/InfoButtonGesture.js
@@ -37,7 +37,7 @@ define(
          * @param {DomainObject} domainObject the domain object for which to
          *        show information
          */
-        function InfoGestureButton($document, queryService, infoService, element, domainObject) {
+        function InfoGestureButton($document, agentService, infoService, element, domainObject) {
             var dismissBubble,
                 pendingBubble,
                 touchPosition,
@@ -82,10 +82,10 @@ define(
             }
             
             // Checks if you are on a mobile device, if the device is
-            // mobile (queryService.isMobile() = true), then
+            // mobile (agentService.isMobile() = true), then
             // the a click on something (info button) brings up 
             // the bubble
-            if (queryService.isMobile(navigator.userAgent)) {
+            if (agentService.isMobile(navigator.userAgent)) {
                 element.on('click', showBubble);
             }
 
diff --git a/platform/commonUI/inspect/src/gestures/InfoGesture.js b/platform/commonUI/inspect/src/gestures/InfoGesture.js
index 4792445f6b..6b6d77a3ed 100644
--- a/platform/commonUI/inspect/src/gestures/InfoGesture.js
+++ b/platform/commonUI/inspect/src/gestures/InfoGesture.js
@@ -38,7 +38,7 @@ define(
          * @param {DomainObject} domainObject the domain object for which to
          *        show information
          */
-        function InfoGesture($timeout, queryService, infoService, DELAY, element, domainObject) {
+        function InfoGesture($timeout, agentService, infoService, DELAY, element, domainObject) {
             var dismissBubble,
                 pendingBubble,
                 mousePosition,
@@ -93,9 +93,9 @@ define(
             }
             
             // Checks if you are on a mobile device, if the device is
-            // not mobile (queryService.isMobile() = false), then
+            // not mobile (agentService.isMobile() = false), then
             // the pendingBubble and therefore hovering is allowed
-            if (!queryService.isMobile(navigator.userAgent)) {
+            if (!agentService.isMobile(navigator.userAgent)) {
                 // Show bubble (on a timeout) on mouse over
                 element.on('mouseenter', showBubble);
             }
diff --git a/platform/commonUI/inspect/src/services/InfoService.js b/platform/commonUI/inspect/src/services/InfoService.js
index 4804137544..50d03cb38c 100644
--- a/platform/commonUI/inspect/src/services/InfoService.js
+++ b/platform/commonUI/inspect/src/services/InfoService.js
@@ -33,7 +33,7 @@ define(
          * Displays informative content ("info bubbles") for the user.
          * @constructor
          */
-        function InfoService($compile, $document, $window, $rootScope, queryService) {
+        function InfoService($compile, $document, $window, $rootScope, agentService) {
 
             function display(templateKey, title, content, position) {
                 var body = $document.find('body'),
@@ -61,7 +61,7 @@ define(
                 //  info bubble positioned as normal (with triangle pointing 
                 //  to where clicked or pressed)
                 bubble.css('position', 'absolute');
-                if(queryService.isPhone(navigator.userAgent)) {                    
+                if(agentService.isPhone(navigator.userAgent)) {                    
                     bubble.css('right', 5 + 'px');
                     bubble.css('left', 5 + 'px');
                     bubble.css('top', 40 + 'px');
diff --git a/platform/commonUI/inspect/test/gestures/InfoGestureSpec.js b/platform/commonUI/inspect/test/gestures/InfoGestureSpec.js
index a9a83eeb5a..28408a2a7c 100644
--- a/platform/commonUI/inspect/test/gestures/InfoGestureSpec.js
+++ b/platform/commonUI/inspect/test/gestures/InfoGestureSpec.js
@@ -28,7 +28,7 @@ define(
 
         describe("The info gesture", function () {
             var mockTimeout,
-                mockQueryService,
+                mockAgentService,
                 mockInfoService,
                 testDelay = 12321,
                 mockElement,
@@ -51,7 +51,7 @@ define(
             beforeEach(function () {
                 mockTimeout = jasmine.createSpy('$timeout');
                 mockTimeout.cancel = jasmine.createSpy('cancel');
-                mockQueryService = jasmine.createSpyObj('queryService', ['isMobile']);
+                mockAgentService = jasmine.createSpyObj('agentService', ['isMobile']);
                 mockInfoService = jasmine.createSpyObj(
                     'infoService',
                     [ 'display' ]
@@ -81,7 +81,7 @@ define(
 
                 gesture = new InfoGesture(
                     mockTimeout,
-                    mockQueryService,
+                    mockAgentService,
                     mockInfoService,
                     testDelay,
                     mockElement,
diff --git a/platform/representation/bundle.json b/platform/representation/bundle.json
index 3eeaf2d258..44656b0f4c 100644
--- a/platform/representation/bundle.json
+++ b/platform/representation/bundle.json
@@ -26,7 +26,7 @@
             {
                 "key": "menu",
                 "implementation": "gestures/ContextMenuGesture.js",
-                "depends": ["$timeout", "queryService"]
+                "depends": ["$timeout", "agentService"]
             }
         ],
         "components": [
@@ -54,7 +54,7 @@
             {
                 "key": "menu",
                 "implementation": "actions/ContextMenuAction.js",
-                "depends": [ "$compile", "$document", "$window", "$rootScope", "queryService" ]
+                "depends": [ "$compile", "$document", "$window", "$rootScope", "agentService" ]
             }
         ]
     }
diff --git a/platform/representation/src/actions/ContextMenuAction.js b/platform/representation/src/actions/ContextMenuAction.js
index 244d6a0b0d..65ee0b0d50 100644
--- a/platform/representation/src/actions/ContextMenuAction.js
+++ b/platform/representation/src/actions/ContextMenuAction.js
@@ -47,7 +47,7 @@ define(
          * @param actionContexr the context in which the action
          *                      should be performed
          */
-        function ContextMenuAction($compile, $document, $window, $rootScope, queryService, actionContext) {
+        function ContextMenuAction($compile, $document, $window, $rootScope, agentService, actionContext) {
             
             function perform() {
                 var winDim = [$window.innerWidth, $window.innerHeight],
@@ -95,11 +95,11 @@ define(
                 
                 // Stop propagation so that clicks on the menu do not close the menu
                 // Stop propagation so that touches on the menu do not close the menu
-                if (!queryService.isMobile(navigator.userAgent)) {
+                if (!agentService.isMobile(navigator.userAgent)) {
                     menu.on('mousedown', function (event) {
                         event.stopPropagation();
                     });
-                } else if (queryService.isMobile(navigator.userAgent)) {
+                } else if (agentService.isMobile(navigator.userAgent)) {
                     menu.on('touchstart', function (event) {
                         event.stopPropagation();
                     });
@@ -108,9 +108,9 @@ define(
                 // Dismiss the menu when body is clicked/touched elsewhere
                 // ('mousedown' because 'click' breaks left-click context menus)
                 // ('touchstart' because 'touch' breaks context menus up)
-                if (!queryService.isMobile(navigator.userAgent)) {
+                if (!agentService.isMobile(navigator.userAgent)) {
                     body.on('mousedown', dismiss);
-                } else if (queryService.isMobile(navigator.userAgent)) {
+                } else if (agentService.isMobile(navigator.userAgent)) {
                     body.on('touchstart', dismiss);
                 }
                 
diff --git a/platform/representation/src/gestures/ContextMenuGesture.js b/platform/representation/src/gestures/ContextMenuGesture.js
index 576c5eb66f..64449914c4 100644
--- a/platform/representation/src/gestures/ContextMenuGesture.js
+++ b/platform/representation/src/gestures/ContextMenuGesture.js
@@ -39,19 +39,19 @@ define(
          * @param {DomainObject} domainObject the object on which actions
          *                       in the context menu will be performed
          */
-        function ContextMenuGesture($timeout, queryService, element, domainObject) {
+        function ContextMenuGesture($timeout, agentService, element, domainObject) {
             var actionContext,
                 stop,
                 isPressing,
                 longTouchTime = 500;
             
             // When context menu event occurs, show object actions instead
-            if (!queryService.isMobile(navigator.userAgent)) {
+            if (!agentService.isMobile(navigator.userAgent)) {
                 element.on('contextmenu', function (event) {
                     actionContext = {key: 'menu', domainObject: domainObject, event: event};
                     stop = domainObject.getCapability('action').perform(actionContext);
                 });
-            } else if (queryService.isMobile(navigator.userAgent)) {
+            } else if (agentService.isMobile(navigator.userAgent)) {
                 // If on mobile device, then start timeout for the single touch event
                 // during the timeout 'isPressing' is true.
                 element.on('touchstart', function (event) {
diff --git a/platform/representation/test/actions/ContextMenuActionSpec.js b/platform/representation/test/actions/ContextMenuActionSpec.js
index c1c6dc51ca..01ea265f02 100644
--- a/platform/representation/test/actions/ContextMenuActionSpec.js
+++ b/platform/representation/test/actions/ContextMenuActionSpec.js
@@ -43,7 +43,7 @@ define(
                 mockBody,
                 mockWindow,
                 mockRootScope,
-                mockQueryService,
+                mockAgentService,
                 mockScope,
                 mockElement,
                 mockDomainObject,
@@ -61,7 +61,7 @@ define(
                 mockBody = jasmine.createSpyObj("body", JQLITE_FUNCTIONS);
                 mockWindow = { innerWidth: MENU_DIMENSIONS[0] * 4, innerHeight: MENU_DIMENSIONS[1] * 4 };
                 mockRootScope = jasmine.createSpyObj("$rootScope", ["$new"]);
-                mockQueryService = jasmine.createSpyObj("queryService", ["isMobile"]);
+                mockAgentService = jasmine.createSpyObj("agentService", ["isMobile"]);
                 mockScope = {};
                 mockElement = jasmine.createSpyObj("element", JQLITE_FUNCTIONS);
                 mockDomainObject = jasmine.createSpyObj("domainObject", DOMAIN_OBJECT_METHODS);
@@ -81,7 +81,7 @@ define(
                     mockDocument,
                     mockWindow,
                     mockRootScope,
-                    mockQueryService,
+                    mockAgentService,
                     mockActionContext
                 );
             });
@@ -160,13 +160,13 @@ define(
             });
             
             it("mobile", function () {
-                mockQueryService.isMobile.andReturn(true);
+                mockAgentService.isMobile.andReturn(true);
                 action = new ContextMenuAction(
                     mockCompile,
                     mockDocument,
                     mockWindow,
                     mockRootScope,
-                    mockQueryService,
+                    mockAgentService,
                     mockActionContext
                 );
                 action.perform();
diff --git a/platform/representation/test/gestures/ContextMenuGestureSpec.js b/platform/representation/test/gestures/ContextMenuGestureSpec.js
index b3b7e8de8c..031fdfc9e2 100644
--- a/platform/representation/test/gestures/ContextMenuGestureSpec.js
+++ b/platform/representation/test/gestures/ContextMenuGestureSpec.js
@@ -37,7 +37,7 @@ define(
         describe("The 'context menu' gesture", function () {
             var mockTimeout,
                 mockElement,
-                mockQueryService,
+                mockAgentService,
                 mockDomainObject,
                 mockEvent,
                 gesture,
@@ -46,11 +46,11 @@ define(
             beforeEach(function () {
                 mockElement = jasmine.createSpyObj("element", JQLITE_FUNCTIONS);
                 mockTimeout = jasmine.createSpy("$timeout");
-                mockQueryService = jasmine.createSpyObj("queryService", ["isMobile"]);
+                mockAgentService = jasmine.createSpyObj("agentService", ["isMobile"]);
                 mockDomainObject = jasmine.createSpyObj("domainObject", DOMAIN_OBJECT_METHODS);
                 mockEvent = jasmine.createSpyObj("event", ["preventDefault"]);
                 
-                gesture = new ContextMenuGesture(mockTimeout, mockQueryService, mockElement, mockDomainObject);
+                gesture = new ContextMenuGesture(mockTimeout, mockAgentService, mockElement, mockDomainObject);
 
                 // Capture the contextmenu callback
                 fireGesture =  mockElement.on.mostRecentCall.args[1];
@@ -76,8 +76,8 @@ define(
             });
             
             it("mobile", function () {
-                mockQueryService.isMobile.andReturn(true);
-                gesture = new ContextMenuGesture(mockTimeout, mockQueryService, mockElement, mockDomainObject);
+                mockAgentService.isMobile.andReturn(true);
+                gesture = new ContextMenuGesture(mockTimeout, mockAgentService, mockElement, mockDomainObject);
                 
                 // Capture the contextmenu callback
                 fireGesture =  mockElement.on.mostRecentCall.args[1];

From 66408eeec84e7139416592dea08b26386be24531 Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Tue, 4 Aug 2015 13:41:48 -0700
Subject: [PATCH 133/209] [Mobile] Gestures

Now to dismiss bubble, touch anywhere
the touch will not fire other gestures
(such as the pressing of another object).
---
 .../inspect/src/gestures/InfoButtonGesture.js | 27 ++++++++++++-------
 .../inspect/src/services/InfoService.js       | 11 ++++----
 2 files changed, 23 insertions(+), 15 deletions(-)

diff --git a/platform/commonUI/inspect/src/gestures/InfoButtonGesture.js b/platform/commonUI/inspect/src/gestures/InfoButtonGesture.js
index 679daabd51..d128392534 100644
--- a/platform/commonUI/inspect/src/gestures/InfoButtonGesture.js
+++ b/platform/commonUI/inspect/src/gestures/InfoButtonGesture.js
@@ -39,7 +39,6 @@ define(
          */
         function InfoGestureButton($document, agentService, infoService, element, domainObject) {
             var dismissBubble,
-                pendingBubble,
                 touchPosition,
                 scopeOff,
                 body = $document.find('body');
@@ -59,6 +58,7 @@ define(
                     dismissBubble();
                     dismissBubble = undefined;
                 }
+                
                 // Detaches body touch listener
                 body.off('touchstart', hideBubble);
             }
@@ -68,17 +68,24 @@ define(
             // and then on any body touch the bubble is dismissed
             function showBubble(event) {
                 trackPosition(event);
-
+                
                 // Show the bubble, but on any touchstart on the
                 // body (anywhere) call hidebubble
-                pendingBubble =
-                    dismissBubble = infoService.display(
-                        "info-table",
-                        domainObject.getModel().name,
-                        domainObject.useCapability('metadata'),
-                        touchPosition
-                    );
-                body.on('touchstart', hideBubble);
+                dismissBubble = infoService.display(
+                    "info-table",
+                    domainObject.getModel().name,
+                    domainObject.useCapability('metadata'),
+                    touchPosition
+                );
+                
+                // On any touch on the body, default body touches/events
+                // are prevented, the bubble is dismissed, and the touchstart
+                // body event is unbound, reallowing gestures
+                body.on('touchstart', function (event) {
+                    event.preventDefault();
+                    hideBubble();
+                    body.unbind('touchstart');
+                });
             }
             
             // Checks if you are on a mobile device, if the device is
diff --git a/platform/commonUI/inspect/src/services/InfoService.js b/platform/commonUI/inspect/src/services/InfoService.js
index 50d03cb38c..ab1a6a5d15 100644
--- a/platform/commonUI/inspect/src/services/InfoService.js
+++ b/platform/commonUI/inspect/src/services/InfoService.js
@@ -61,10 +61,11 @@ define(
                 //  info bubble positioned as normal (with triangle pointing 
                 //  to where clicked or pressed)
                 bubble.css('position', 'absolute');
-                if(agentService.isPhone(navigator.userAgent)) {                    
-                    bubble.css('right', 5 + 'px');
-                    bubble.css('left', 5 + 'px');
-                    bubble.css('top', 40 + 'px');
+                if (agentService.isPhone(navigator.userAgent)) {
+                    bubble.css('right', 0 + 'px');
+                    bubble.css('left', 0 + 'px');
+                    bubble.css('top', 'auto');
+                    bubble.css('bottom', 25 + 'px');
                 } else {
                     if (goLeft) {
                         bubble.css('right', (winDim[0] - position[0] + OFFSET[0]) + 'px');
@@ -79,7 +80,7 @@ define(
                 }
                 // Add the menu to the body
                 body.append(bubble);
-
+                
                 // Return a function to dismiss the bubble
                 return function () { bubble.remove(); };
             }

From 6b65ae77e7d1e980977d2ad110ca55f197234c6f Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Tue, 4 Aug 2015 16:48:41 -0700
Subject: [PATCH 134/209] [Mobile] Tests

Completed tests for AgentService,
InfoService, and ContextMenuAction.
ContextMenu and InfoButton Gesture
tests remain. Also resized info button
icon.
---
 platform/commonUI/general/res/css/items.css   |   2 +-
 .../general/res/sass/mobile/_item.scss        |   2 +-
 .../general/test/services/AgentServiceSpec.js |   3 +
 .../test/gestures/InfoButtonGestureSpec.js    | 102 ++++++++++++++++++
 .../inspect/test/services/InfoServiceSpec.js  |  17 ++-
 platform/commonUI/inspect/test/suite.json     |   1 +
 .../test/actions/ContextMenuActionSpec.js     |  29 +++--
 .../test/gestures/ContextMenuGestureSpec.js   |   9 +-
 8 files changed, 147 insertions(+), 18 deletions(-)
 create mode 100644 platform/commonUI/inspect/test/gestures/InfoButtonGestureSpec.js

diff --git a/platform/commonUI/general/res/css/items.css b/platform/commonUI/general/res/css/items.css
index 3e650d8156..d669127598 100644
--- a/platform/commonUI/general/res/css/items.css
+++ b/platform/commonUI/general/res/css/items.css
@@ -378,7 +378,7 @@
     width: 50px;
     right: 0px;
     left: auto;
-    font-size: 1.5em; }
+    font-size: 1.3em; }
   /* line 47, ../sass/mobile/_item.scss */
   .items-holder .item.grid-item .bar.bottom-bar.abs {
     top: 0px;
diff --git a/platform/commonUI/general/res/sass/mobile/_item.scss b/platform/commonUI/general/res/sass/mobile/_item.scss
index 8ce7576f1e..4db43b885b 100644
--- a/platform/commonUI/general/res/sass/mobile/_item.scss
+++ b/platform/commonUI/general/res/sass/mobile/_item.scss
@@ -41,7 +41,7 @@
                     width: 50px;
                     right: 0px;
                     left: auto;
-                    font-size: 1.5em;
+                    font-size: 1.3em;
                 }
                 .bar {
                     &.bottom-bar.abs {
diff --git a/platform/commonUI/general/test/services/AgentServiceSpec.js b/platform/commonUI/general/test/services/AgentServiceSpec.js
index 6207267da2..e0f689ddfc 100644
--- a/platform/commonUI/general/test/services/AgentServiceSpec.js
+++ b/platform/commonUI/general/test/services/AgentServiceSpec.js
@@ -53,8 +53,11 @@ define(
             it("get current device user agent", function () {
                 mockNavigator.userAgent = "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/44.0.2403.89 Safari/537.36";
                 agentService.isMobile(mockNavigator.userAgent);
+                agentService.isPhone(mockNavigator.userAgent);
                 mockNavigator.userAgent = "Mozilla/5.0 (iPad; CPU OS 7_0 like Mac OS X) AppleWebKit/537.51.1 (KHTML, like Gecko) Version/7.0 Mobile/11A465 Safari/9537.53";
                 agentService.isMobile(mockNavigator.userAgent);
+                mockNavigator.userAgent = "Mozilla/5.0 (iPhone; CPU iPhone OS 7_0 like Mac OS X; en-us) AppleWebKit/537.51.1 (KHTML, like Gecko) Version/7.0 Mobile/11A465 Safari/9537.53";
+                agentService.isPhone(mockNavigator.userAgent);
             });
             
             it("get orientation of the current device", function () {
diff --git a/platform/commonUI/inspect/test/gestures/InfoButtonGestureSpec.js b/platform/commonUI/inspect/test/gestures/InfoButtonGestureSpec.js
new file mode 100644
index 0000000000..7ccff88343
--- /dev/null
+++ b/platform/commonUI/inspect/test/gestures/InfoButtonGestureSpec.js
@@ -0,0 +1,102 @@
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+/*global define,Promise,describe,it,expect,beforeEach,waitsFor,jasmine*/
+
+define(
+    ['../../src/gestures/InfoButtonGesture'],
+    function (InfoButtonGesture) {
+        "use strict";
+
+        describe("The info button gesture", function () {
+            var mockDocument,
+                mockAgentService,
+                mockInfoService,
+                testDelay = 12321,
+                mockElement,
+                mockDomainObject,
+                mockScope,
+                mockOff,
+                testMetadata,
+                mockPromise,
+                mockHide,
+                gesture;
+
+            beforeEach(function () {
+                mockDocument = jasmine.createSpyObj('$document', ['find']);
+                mockAgentService = jasmine.createSpyObj('agentService', ['isMobile', 'isPhone']);
+                mockInfoService = jasmine.createSpyObj(
+                    'infoService',
+                    [ 'display' ]
+                );
+                mockElement = jasmine.createSpyObj(
+                    'element',
+                    [ 'on', 'off', 'scope', 'css' ]
+                );
+                mockDomainObject = jasmine.createSpyObj(
+                    'domainObject',
+                    [ 'getId', 'getCapability', 'useCapability', 'getModel' ]
+                );
+                mockDocument = jasmine.createSpyObj('$document', ['find']);
+                mockAgentService = jasmine.createSpyObj('agentService', ['isMobile']);
+                mockInfoService = jasmine.createSpyObj(
+                    'infoService',
+                    [ 'display' ]
+                );
+                mockElement = jasmine.createSpyObj(
+                    'element',
+                    [ 'on', 'off', 'scope', 'css' ]
+                );
+                mockDomainObject = jasmine.createSpyObj(
+                    'domainObject',
+                    [ 'getId', 'getCapability', 'useCapability', 'getModel' ]
+                );
+                
+                mockScope = jasmine.createSpyObj('$scope', [ '$on' ]);
+                mockOff = jasmine.createSpy('$off');
+                testMetadata = [ { name: "Test name", value: "Test value" } ];
+                mockHide = jasmine.createSpy('hide');
+
+                mockDomainObject.getModel.andReturn({ name: "Test Object" });
+                mockDomainObject.useCapability.andCallFake(function (c) {
+                    return (c === 'metadata') ? testMetadata : undefined;
+                });
+                mockElement.scope.andReturn(mockScope);
+                mockScope.$on.andReturn(mockOff);
+                mockInfoService.display.andReturn(mockHide);
+                mockAgentService.isMobile.andReturn(true);
+                gesture = new InfoButtonGesture(
+                    mockDocument,
+                    mockAgentService,
+                    mockInfoService,
+                    mockElement,
+                    mockDomainObject
+                );
+            });
+            
+            it("listens for click on the representation", function () {
+                expect(mockElement.on)
+                    .toHaveBeenCalledWith('click', jasmine.any(Function));
+            });
+
+        });
+    }
+);
diff --git a/platform/commonUI/inspect/test/services/InfoServiceSpec.js b/platform/commonUI/inspect/test/services/InfoServiceSpec.js
index 858427fe84..58adbbec51 100644
--- a/platform/commonUI/inspect/test/services/InfoServiceSpec.js
+++ b/platform/commonUI/inspect/test/services/InfoServiceSpec.js
@@ -31,6 +31,7 @@ define(
                 mockDocument,
                 testWindow,
                 mockRootScope,
+                mockAgentService,
                 mockCompiledTemplate,
                 testScope,
                 mockBody,
@@ -42,6 +43,7 @@ define(
                 mockDocument = jasmine.createSpyObj('$document', ['find']);
                 testWindow = { innerWidth: 1000, innerHeight: 100 };
                 mockRootScope = jasmine.createSpyObj('$rootScope', ['$new']);
+                mockAgentService = jasmine.createSpyObj('agentService', ['isMobile', 'isPhone']);
                 mockCompiledTemplate = jasmine.createSpy('template');
                 testScope = {};
                 mockBody = jasmine.createSpyObj('body', ['append']);
@@ -58,7 +60,8 @@ define(
                     mockCompile,
                     mockDocument,
                     testWindow,
-                    mockRootScope
+                    mockRootScope,
+                    mockAgentService
                 );
             });
 
@@ -124,6 +127,18 @@ define(
                         (40 + InfoConstants.BUBBLE_OFFSET[1]) + 'px'
                     );
                 });
+                
+                it("when on phone device, positioning is always on bottom", function () {
+                    mockAgentService.isPhone.andReturn(true);
+                    service = new InfoService(
+                        mockCompile,
+                        mockDocument,
+                        testWindow,
+                        mockRootScope,
+                        mockAgentService
+                    );
+                    service.display('', '', {}, [0, 0]);
+                });                
             });
 
         });
diff --git a/platform/commonUI/inspect/test/suite.json b/platform/commonUI/inspect/test/suite.json
index 82650e2dff..ca006fdaa7 100644
--- a/platform/commonUI/inspect/test/suite.json
+++ b/platform/commonUI/inspect/test/suite.json
@@ -1,4 +1,5 @@
 [
     "gestures/InfoGesture",
+    "gestures/InfoButtonGesture",
     "services/InfoService"
 ]
diff --git a/platform/representation/test/actions/ContextMenuActionSpec.js b/platform/representation/test/actions/ContextMenuActionSpec.js
index 01ea265f02..9f6c94b910 100644
--- a/platform/representation/test/actions/ContextMenuActionSpec.js
+++ b/platform/representation/test/actions/ContextMenuActionSpec.js
@@ -53,6 +53,14 @@ define(
                 mockStopPropagation,
                 action;
 
+            function fireEvent(evt, value) {
+                mockElement.on.calls.forEach(function (call) {
+                    if (call.args[0] === evt) {
+                        call.args[1](value);
+                    }
+                });
+            }
+            
             beforeEach(function () {
                 mockCompile = jasmine.createSpy("$compile");
                 mockCompiledTemplate = jasmine.createSpy("template");
@@ -144,13 +152,12 @@ define(
             it("keeps a menu when menu is clicked", function () {
                 // Show the menu
                 action.perform();
-                
                 // Find and fire body's mousedown listener
-//                mockMenu.on.calls.forEach(function (call) {
-//                    if (call.args[0] === 'mousedown') {
-//                        call.args[1]();
-//                    }
-//                });
+                mockMenu.on.calls.forEach(function (call) {
+                    if (call.args[0] === 'mousedown') {
+                        call.args[1](mockEvent);
+                    }
+                });
 
                 // Menu should have been removed
                 expect(mockMenu.remove).not.toHaveBeenCalled();
@@ -171,11 +178,11 @@ define(
                 );
                 action.perform();
                 
-//                mockMenu.on.calls.forEach(function (call) {
-//                    if (call.args[0] === 'touchstart') {
-//                        call.args[1]();
-//                    }
-//                });
+                mockMenu.on.calls.forEach(function (call) {
+                    if (call.args[0] === 'touchstart') {
+                        call.args[1](mockEvent);
+                    }
+                });
             });
         });
     }
diff --git a/platform/representation/test/gestures/ContextMenuGestureSpec.js b/platform/representation/test/gestures/ContextMenuGestureSpec.js
index 031fdfc9e2..8d6b685762 100644
--- a/platform/representation/test/gestures/ContextMenuGestureSpec.js
+++ b/platform/representation/test/gestures/ContextMenuGestureSpec.js
@@ -82,10 +82,11 @@ define(
                 // Capture the contextmenu callback
                 fireGesture =  mockElement.on.mostRecentCall.args[1];
                 
-                expect(mockElement.on).toHaveBeenCalledWith(
-                    "touchstart",
-                    jasmine.any(Function)
-                );
+                mockMenu.on.calls.forEach(function (call) {
+                    if (call.args[0] === 'touchstart') {
+                        call.args[1](mockEvent);
+                    }
+                });
             });
         });
     }

From f46a0853b97f9c8a3b05939dcbf76ccada73edaa Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Tue, 4 Aug 2015 16:58:37 -0700
Subject: [PATCH 135/209] [Mobile] Tests

Removed mockMenu from ContextMenuGestureSpec.
---
 .../representation/test/gestures/ContextMenuGestureSpec.js  | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/platform/representation/test/gestures/ContextMenuGestureSpec.js b/platform/representation/test/gestures/ContextMenuGestureSpec.js
index 8d6b685762..d3e5243b3b 100644
--- a/platform/representation/test/gestures/ContextMenuGestureSpec.js
+++ b/platform/representation/test/gestures/ContextMenuGestureSpec.js
@@ -81,12 +81,6 @@ define(
                 
                 // Capture the contextmenu callback
                 fireGesture =  mockElement.on.mostRecentCall.args[1];
-                
-                mockMenu.on.calls.forEach(function (call) {
-                    if (call.args[0] === 'touchstart') {
-                        call.args[1](mockEvent);
-                    }
-                });
             });
         });
     }

From 0b635afcf7a71eec660919fc1a6e996241b8f8e6 Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Wed, 5 Aug 2015 12:14:16 -0700
Subject: [PATCH 136/209] [Mobile] Tests

ContextMenu and InfoButton Gesture
tests remain.
---
 .../test/gestures/InfoButtonGestureSpec.js    | 24 +++++++++++++++----
 .../inspect/test/services/InfoServiceSpec.js  |  2 +-
 .../test/actions/ContextMenuActionSpec.js     |  2 +-
 3 files changed, 21 insertions(+), 7 deletions(-)

diff --git a/platform/commonUI/inspect/test/gestures/InfoButtonGestureSpec.js b/platform/commonUI/inspect/test/gestures/InfoButtonGestureSpec.js
index 7ccff88343..a388ef3d6c 100644
--- a/platform/commonUI/inspect/test/gestures/InfoButtonGestureSpec.js
+++ b/platform/commonUI/inspect/test/gestures/InfoButtonGestureSpec.js
@@ -27,12 +27,14 @@ define(
         "use strict";
 
         describe("The info button gesture", function () {
-            var mockDocument,
+            var mockTimeout,
+                mockDocument,
                 mockAgentService,
                 mockInfoService,
                 testDelay = 12321,
                 mockElement,
                 mockDomainObject,
+                mockEvent,
                 mockScope,
                 mockOff,
                 testMetadata,
@@ -40,7 +42,16 @@ define(
                 mockHide,
                 gesture;
 
+            function fireEvent(evt, value) {
+                mockElement.on.calls.forEach(function (call) {
+                    if (call.args[0] === evt) {
+                        call.args[1](value);
+                    }
+                });
+            }
+            
             beforeEach(function () {
+                mockTimeout = jasmine.createSpy('$timeout');
                 mockDocument = jasmine.createSpyObj('$document', ['find']);
                 mockAgentService = jasmine.createSpyObj('agentService', ['isMobile', 'isPhone']);
                 mockInfoService = jasmine.createSpyObj(
@@ -63,13 +74,15 @@ define(
                 );
                 mockElement = jasmine.createSpyObj(
                     'element',
-                    [ 'on', 'off', 'scope', 'css' ]
+                    [ 'on', 'off', 'scope', 'css', 'click' ]
                 );
                 mockDomainObject = jasmine.createSpyObj(
                     'domainObject',
                     [ 'getId', 'getCapability', 'useCapability', 'getModel' ]
                 );
-                
+                mockEvent = jasmine.createSpyObj("event", ["preventDefault", "stopPropagation"]);
+                mockEvent.pageX = 0;
+                mockEvent.pageY = 0;
                 mockScope = jasmine.createSpyObj('$scope', [ '$on' ]);
                 mockOff = jasmine.createSpy('$off');
                 testMetadata = [ { name: "Test name", value: "Test value" } ];
@@ -92,11 +105,12 @@ define(
                 );
             });
             
-            it("listens for click on the representation", function () {
+            it("expect click on the representation", function () {
                 expect(mockElement.on)
                     .toHaveBeenCalledWith('click', jasmine.any(Function));
+                
             });
-
+            
         });
     }
 );
diff --git a/platform/commonUI/inspect/test/services/InfoServiceSpec.js b/platform/commonUI/inspect/test/services/InfoServiceSpec.js
index 58adbbec51..e878afb268 100644
--- a/platform/commonUI/inspect/test/services/InfoServiceSpec.js
+++ b/platform/commonUI/inspect/test/services/InfoServiceSpec.js
@@ -138,7 +138,7 @@ define(
                         mockAgentService
                     );
                     service.display('', '', {}, [0, 0]);
-                });                
+                });
             });
 
         });
diff --git a/platform/representation/test/actions/ContextMenuActionSpec.js b/platform/representation/test/actions/ContextMenuActionSpec.js
index 9f6c94b910..8e1ac5768a 100644
--- a/platform/representation/test/actions/ContextMenuActionSpec.js
+++ b/platform/representation/test/actions/ContextMenuActionSpec.js
@@ -166,7 +166,7 @@ define(
                 expect(mockBody.off).not.toHaveBeenCalled();
             });
             
-            it("mobile", function () {
+            it("keeps a menu when menu is clicked on mobile", function () {
                 mockAgentService.isMobile.andReturn(true);
                 action = new ContextMenuAction(
                     mockCompile,

From 0a39984c4fbec0807b77663fe44901c536acd691 Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Wed, 5 Aug 2015 12:26:09 -0700
Subject: [PATCH 137/209] [Mobile] Clean Up

Fixed InfoService having 0 in
wrong spot. Also correctly compared
the UserAgent device to iPhone for
isMobile function in AgentService.
---
 platform/commonUI/general/src/services/AgentService.js | 2 +-
 platform/commonUI/inspect/src/services/InfoService.js  | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/platform/commonUI/general/src/services/AgentService.js b/platform/commonUI/general/src/services/AgentService.js
index 307446c1dc..0d43cfdfa6 100644
--- a/platform/commonUI/general/src/services/AgentService.js
+++ b/platform/commonUI/general/src/services/AgentService.js
@@ -59,7 +59,7 @@ define(
             // phone is designated as only an
             // iPhone device
             function isPhone(ua) {
-                if (getDeviceUA(ua) == "iPhone") {
+                if (getDeviceUA(ua)[0] === "iPhone") {
                     return true;
                 } else {
                     return false;
diff --git a/platform/commonUI/inspect/src/services/InfoService.js b/platform/commonUI/inspect/src/services/InfoService.js
index ab1a6a5d15..a7c1c19a1e 100644
--- a/platform/commonUI/inspect/src/services/InfoService.js
+++ b/platform/commonUI/inspect/src/services/InfoService.js
@@ -62,10 +62,10 @@ define(
                 //  to where clicked or pressed)
                 bubble.css('position', 'absolute');
                 if (agentService.isPhone(navigator.userAgent)) {
-                    bubble.css('right', 0 + 'px');
-                    bubble.css('left', 0 + 'px');
+                    bubble.css('right', '0px');
+                    bubble.css('left', '0px');
                     bubble.css('top', 'auto');
-                    bubble.css('bottom', 25 + 'px');
+                    bubble.css('bottom', '25px');
                 } else {
                     if (goLeft) {
                         bubble.css('right', (winDim[0] - position[0] + OFFSET[0]) + 'px');

From dcd7d61c9aa907857fe594351d126bc0215f2928 Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Thu, 6 Aug 2015 13:43:56 -0700
Subject: [PATCH 138/209] [Mobile] Tests

Completed ContextMenu and InfoButton
Gesture tests where elements/body
touch events occur.
---
 .../test/gestures/InfoButtonGestureSpec.js    | 81 +++++++++++++------
 .../test/gestures/ContextMenuGestureSpec.js   | 54 +++++++++++--
 2 files changed, 103 insertions(+), 32 deletions(-)

diff --git a/platform/commonUI/inspect/test/gestures/InfoButtonGestureSpec.js b/platform/commonUI/inspect/test/gestures/InfoButtonGestureSpec.js
index a388ef3d6c..036a77685b 100644
--- a/platform/commonUI/inspect/test/gestures/InfoButtonGestureSpec.js
+++ b/platform/commonUI/inspect/test/gestures/InfoButtonGestureSpec.js
@@ -29,9 +29,9 @@ define(
         describe("The info button gesture", function () {
             var mockTimeout,
                 mockDocument,
+                mockBody,
                 mockAgentService,
                 mockInfoService,
-                testDelay = 12321,
                 mockElement,
                 mockDomainObject,
                 mockEvent,
@@ -40,19 +40,15 @@ define(
                 testMetadata,
                 mockPromise,
                 mockHide,
-                gesture;
-
-            function fireEvent(evt, value) {
-                mockElement.on.calls.forEach(function (call) {
-                    if (call.args[0] === evt) {
-                        call.args[1](value);
-                    }
-                });
-            }
+                gesture,
+                fireGesture,
+                fireDismissGesture;
             
             beforeEach(function () {
                 mockTimeout = jasmine.createSpy('$timeout');
                 mockDocument = jasmine.createSpyObj('$document', ['find']);
+                mockBody = jasmine.createSpyObj('body', [ 'on', 'off', 'scope', 'css', 'unbind' ]);
+                mockDocument.find.andReturn(mockBody);
                 mockAgentService = jasmine.createSpyObj('agentService', ['isMobile', 'isPhone']);
                 mockInfoService = jasmine.createSpyObj(
                     'infoService',
@@ -66,20 +62,7 @@ define(
                     'domainObject',
                     [ 'getId', 'getCapability', 'useCapability', 'getModel' ]
                 );
-                mockDocument = jasmine.createSpyObj('$document', ['find']);
-                mockAgentService = jasmine.createSpyObj('agentService', ['isMobile']);
-                mockInfoService = jasmine.createSpyObj(
-                    'infoService',
-                    [ 'display' ]
-                );
-                mockElement = jasmine.createSpyObj(
-                    'element',
-                    [ 'on', 'off', 'scope', 'css', 'click' ]
-                );
-                mockDomainObject = jasmine.createSpyObj(
-                    'domainObject',
-                    [ 'getId', 'getCapability', 'useCapability', 'getModel' ]
-                );
+                
                 mockEvent = jasmine.createSpyObj("event", ["preventDefault", "stopPropagation"]);
                 mockEvent.pageX = 0;
                 mockEvent.pageY = 0;
@@ -103,12 +86,58 @@ define(
                     mockElement,
                     mockDomainObject
                 );
+                fireGesture =  mockElement.on.mostRecentCall.args[1];
             });
             
             it("expect click on the representation", function () {
-                expect(mockElement.on)
-                    .toHaveBeenCalledWith('click', jasmine.any(Function));
+                // Fires a click call on element and then
+                // expects the click to have happened
+                fireGesture(mockEvent);
+                expect(mockElement.on).toHaveBeenCalledWith(
+                    "click",
+                    jasmine.any(Function)
+                );
+            });
+            
+            it("expect click then dismiss on the representation", function () {
+                // Fire the click and then expect the click
+                fireGesture(mockEvent);
+                expect(mockElement.on).toHaveBeenCalledWith(
+                    "click",
+                    jasmine.any(Function)
+                );
                 
+                // Get the touch start on the body
+                // and fire the dismiss gesture
+                fireDismissGesture =  mockBody.on.mostRecentCall.args[1];
+                fireDismissGesture(mockEvent);
+                // Expect Body to have been touched, event.preventDefault()
+                // to be called, then the mockBody listener to be detached
+                // lastly unbind the touchstart used to dismiss so other 
+                // events can be called
+                expect(mockBody.on).toHaveBeenCalledWith(
+                    "touchstart",
+                    jasmine.any(Function)
+                );
+                expect(mockEvent.preventDefault).toHaveBeenCalled();
+                expect(mockBody.off).toHaveBeenCalledWith(
+                    "touchstart",
+                    jasmine.any(Function)
+                );
+                expect(mockBody.unbind).toHaveBeenCalledWith(
+                    'touchstart'
+                );
+            });
+            
+            it("detaches a callback for info bubble events when destroyed", function () {
+                expect(mockElement.off).not.toHaveBeenCalled();
+
+                gesture.destroy();
+
+                expect(mockElement.off).toHaveBeenCalledWith(
+                    "click",
+                    jasmine.any(Function)
+                );
             });
             
         });
diff --git a/platform/representation/test/gestures/ContextMenuGestureSpec.js b/platform/representation/test/gestures/ContextMenuGestureSpec.js
index d3e5243b3b..6938dee33d 100644
--- a/platform/representation/test/gestures/ContextMenuGestureSpec.js
+++ b/platform/representation/test/gestures/ContextMenuGestureSpec.js
@@ -31,7 +31,7 @@ define(
         "use strict";
 
         var JQLITE_FUNCTIONS = [ "on", "off", "find", "append", "remove" ],
-            DOMAIN_OBJECT_METHODS = [ "getId", "getModel", "getCapability", "hasCapability", "useCapability" ];
+            DOMAIN_OBJECT_METHODS = [ "getId", "getModel", "getCapability", "hasCapability", "useCapability"];
 
 
         describe("The 'context menu' gesture", function () {
@@ -40,15 +40,35 @@ define(
                 mockAgentService,
                 mockDomainObject,
                 mockEvent,
+                mockTouchEvent,
+                mockContextMenuAction,
+                mockActionContext,
+                mockTouch,
                 gesture,
-                fireGesture;
+                fireGesture,
+                fireTouchStartGesture,
+                fireTouchEndGesture;
 
             beforeEach(function () {
-                mockElement = jasmine.createSpyObj("element", JQLITE_FUNCTIONS);
                 mockTimeout = jasmine.createSpy("$timeout");
+                mockElement = jasmine.createSpyObj("element", JQLITE_FUNCTIONS);
                 mockAgentService = jasmine.createSpyObj("agentService", ["isMobile"]);
                 mockDomainObject = jasmine.createSpyObj("domainObject", DOMAIN_OBJECT_METHODS);
                 mockEvent = jasmine.createSpyObj("event", ["preventDefault"]);
+                mockContextMenuAction = jasmine.createSpyObj(
+                    "action",
+                    [ "perform", "getActions" ]
+                );
+                mockActionContext = jasmine.createSpyObj(
+                    "actionContext",
+                    [ "" ]
+                );
+                
+                mockActionContext = {domainObject: mockDomainObject, event: mockEvent};
+                mockDomainObject.getCapability.andReturn(mockContextMenuAction);
+                mockContextMenuAction.perform.andReturn(jasmine.any(Function));
+                mockAgentService.isMobile.andReturn(false);
+                
                 
                 gesture = new ContextMenuGesture(mockTimeout, mockAgentService, mockElement, mockDomainObject);
 
@@ -57,6 +77,8 @@ define(
             });
 
             it("attaches a callback for context menu events", function () {
+                // Fire a click and expect it to happen
+                fireGesture();
                 expect(mockElement.on).toHaveBeenCalledWith(
                     "contextmenu",
                     jasmine.any(Function)
@@ -75,12 +97,32 @@ define(
                 );
             });
             
-            it("mobile", function () {
+            it("attaches a callback for context menu events on mobile", function () {
+                // Mock touch event and set to mobile device
+                mockTouchEvent = jasmine.createSpyObj("event", ["preventDefault", "touches"]);
+                mockTouch = jasmine.createSpyObj("touch", ["length"]);
+                mockTouch.length = 1;
+                mockTouchEvent.touches.andReturn(mockTouch);
                 mockAgentService.isMobile.andReturn(true);
+                
+                // Then create new (mobile) gesture
                 gesture = new ContextMenuGesture(mockTimeout, mockAgentService, mockElement, mockDomainObject);
                 
-                // Capture the contextmenu callback
-                fireGesture =  mockElement.on.mostRecentCall.args[1];
+                // Set calls for the touchstart and touchend gestures
+                fireTouchStartGesture = mockElement.on.calls[1].args[1];
+                fireTouchEndGesture =  mockElement.on.mostRecentCall.args[1];
+                
+                // Fire touchstart and expect touch start to begin
+                fireTouchStartGesture(mockTouchEvent);
+                expect(mockElement.on).toHaveBeenCalledWith(
+                    "touchstart",
+                    jasmine.any(Function)
+                );
+                
+                // Expect timeout to begin and then fireTouchEnd
+                expect(mockTimeout).toHaveBeenCalled();
+                mockTimeout.mostRecentCall.args[0]();
+                fireTouchEndGesture(mockTouchEvent);
             });
         });
     }

From 7ca15a9de2343463bef6b3870da3d3997d1eeaee Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Thu, 6 Aug 2015 14:11:59 -0700
Subject: [PATCH 139/209] [Mobile] Representation

Edited grid item to center
shared button.
---
 .../browse/res/templates/items/grid-item.html |  4 ++--
 platform/commonUI/general/res/css/items.css   | 20 ++++++++++++-------
 .../general/res/sass/mobile/_item.scss        |  7 +++++++
 3 files changed, 22 insertions(+), 9 deletions(-)

diff --git a/platform/commonUI/browse/res/templates/items/grid-item.html b/platform/commonUI/browse/res/templates/items/grid-item.html
index 2a1cc38f00..175a47e055 100644
--- a/platform/commonUI/browse/res/templates/items/grid-item.html
+++ b/platform/commonUI/browse/res/templates/items/grid-item.html
@@ -26,7 +26,7 @@
             <div class='left abs'>
                 <mct-include key="_checkbox"></mct-include>
             </div>
-            <div class='right abs'>
+            <div class='right abs mobile-right'>
                 <div class='ui-symbol icon alert hidden' onclick="alert('Not yet functional. When this is visible, it means that this object needs to be updated. Clicking will allow that action via a dialog.');">!</div>
                 <div class='ui-symbol icon profile' title="Shared">P</div>
             </div>
@@ -44,7 +44,7 @@
             </div>
         </div>
     </div>
-    <div class="contents abs mobile-info">
+    <div class="contents abs mobile-info desktop-hide">
         <mct-representation class="contents abs btn s-very-subtle desktop-hide" key="'info-button'" mct-object="domainObject"></mct-representation>
     </div>
 </div>
diff --git a/platform/commonUI/general/res/css/items.css b/platform/commonUI/general/res/css/items.css
index d669127598..3457e4f0b3 100644
--- a/platform/commonUI/general/res/css/items.css
+++ b/platform/commonUI/general/res/css/items.css
@@ -402,16 +402,19 @@
     width: 100%;
     height: 50px; }
     /* line 74, ../sass/mobile/_item.scss */
+    .items-holder .item.grid-item .mobile-right {
+      top: 100%; }
+    /* line 77, ../sass/mobile/_item.scss */
     .items-holder .item.grid-item .mobile-info {
       line-height: 25px; }
-    /* line 78, ../sass/mobile/_item.scss */
+    /* line 81, ../sass/mobile/_item.scss */
     .items-holder .item.grid-item .item-main .item-type {
       line-height: 40px; }
-    /* line 82, ../sass/mobile/_item.scss */
+    /* line 85, ../sass/mobile/_item.scss */
     .items-holder .item.grid-item .title {
       margin-right: 10px;
       line-height: 25px; }
-    /* line 86, ../sass/mobile/_item.scss */
+    /* line 89, ../sass/mobile/_item.scss */
     .items-holder .item.grid-item .details {
       margin-right: 10px;
       line-height: 0px; } }
@@ -420,18 +423,21 @@
   .items-holder .item.grid-item {
     width: 100%;
     height: 66.66667px; }
-    /* line 96, ../sass/mobile/_item.scss */
+    /* line 99, ../sass/mobile/_item.scss */
+    .items-holder .item.grid-item .mobile-right {
+      top: 100%; }
+    /* line 103, ../sass/mobile/_item.scss */
     .items-holder .item.grid-item .mobile-info {
       line-height: 38px; }
-    /* line 100, ../sass/mobile/_item.scss */
+    /* line 107, ../sass/mobile/_item.scss */
     .items-holder .item.grid-item .item-main .item-type {
       font-size: 30px;
       line-height: 50px; }
-    /* line 105, ../sass/mobile/_item.scss */
+    /* line 112, ../sass/mobile/_item.scss */
     .items-holder .item.grid-item .title {
       margin-right: 10px;
       line-height: 38px; }
-    /* line 109, ../sass/mobile/_item.scss */
+    /* line 116, ../sass/mobile/_item.scss */
     .items-holder .item.grid-item .details {
       margin-right: 10px;
       line-height: 0px; } }
diff --git a/platform/commonUI/general/res/sass/mobile/_item.scss b/platform/commonUI/general/res/sass/mobile/_item.scss
index 4db43b885b..88f08cb343 100644
--- a/platform/commonUI/general/res/sass/mobile/_item.scss
+++ b/platform/commonUI/general/res/sass/mobile/_item.scss
@@ -71,6 +71,9 @@
                 $dHei: $phone-itemHeight;
                 width: $dWid;
                 height: $dHei;
+                .mobile-right {
+                    top: 100%;
+                }
                 .mobile-info {
                     line-height: $phone-itemHeight * .5;
                 }
@@ -93,6 +96,10 @@
                 $dHei: $tablet-itemHeight;
                 width: $dWid;
                 height: $dHei;
+                .mobile-right {
+                    top: 100%;
+                }
+                
                 .mobile-info {
                     line-height: $tablet-itemHeight * .57;
                 }

From 3484b315cf09d1eeed586080772efbbb0d5363e2 Mon Sep 17 00:00:00 2001
From: Charles Hacskaylo <charles.f.hacskaylo@nasa.gov>
Date: Thu, 20 Aug 2015 16:09:35 -0700
Subject: [PATCH 140/209] [Mobile] Sanding of mobile styles, cherry-pick to
 master

open #74
CSS and markup changes for mobile
that are good for master now;
---
 .../browse/res/templates/items/grid-item.html |  23 +-
 platform/commonUI/general/res/css/forms.css   |   6 +-
 platform/commonUI/general/res/css/items.css   | 197 +++++----
 .../general/res/css/theme-espresso.css        | 158 ++++---
 platform/commonUI/general/res/css/tree.css    |  58 ++-
 .../general/res/fonts/symbols/wtdsymbols.eot  | Bin 11016 -> 11268 bytes
 .../general/res/fonts/symbols/wtdsymbols.svg  |   2 +
 .../general/res/fonts/symbols/wtdsymbols.ttf  | Bin 10840 -> 11092 bytes
 .../general/res/fonts/symbols/wtdsymbols.woff | Bin 10916 -> 11168 bytes
 .../commonUI/general/res/sass/_constants.scss |   1 +
 .../commonUI/general/res/sass/_icons.scss     |   8 +-
 .../commonUI/general/res/sass/_mixins.scss    | 401 +++++++++---------
 .../general/res/sass/controls/_controls.scss  |   1 -
 .../general/res/sass/items/_item.scss         |  24 +-
 .../commonUI/general/res/sass/tree/_tree.scss |  12 +-
 15 files changed, 448 insertions(+), 443 deletions(-)

diff --git a/platform/commonUI/browse/res/templates/items/grid-item.html b/platform/commonUI/browse/res/templates/items/grid-item.html
index d27d088ee1..246a7b54b4 100644
--- a/platform/commonUI/browse/res/templates/items/grid-item.html
+++ b/platform/commonUI/browse/res/templates/items/grid-item.html
@@ -20,26 +20,21 @@
  at runtime from the About dialog for additional information.
 -->
 <!-- For selected, add class 'selected' to outer div -->
-<div class='item grid-item'>
-    <div class="contents abs mobile-grid-nav" ng-click='action.perform("navigate")'>
+<div class='item grid-item' ng-click='action.perform("navigate")'>
+    <div class='contents abs'>
         <div class='top-bar bar abs'>
-            <div class='left abs'>
-                <mct-include key="_checkbox"></mct-include>
-            </div>
-            <div class='right abs mobile-right'>
-                <div class='ui-symbol icon alert hidden' onclick="alert('Not yet functional. When this is visible, it means that this object needs to be updated. Clicking will allow that action via a dialog.');">!</div>
-                <div class='ui-symbol icon profile' title="Shared">P</div>
-            </div>
+            <div class='ui-symbol profile' title='Shared'>&#x4f;</div>
+            <!--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'>
                 {{type.getGlyph()}}
                 <span
-                    class="ui-symbol icon l-icon-link" title="This object is a link"
+                    class="ui-symbol l-icon-link" title="This object is a link"
                     ng-show="location.isLink()"
                     ></span>
             </div>
-            <div class='ui-symbol icon abs item-open'>}</div>
+            <div class='ui-symbol abs item-open'>}</div>
         </div>
         <div class='bottom-bar bar abs'>
             <div class='title'>{{model.name}}</div>
@@ -47,10 +42,10 @@
                 <span ng-show="model.composition !== undefined">
                     {{model.composition.length}} Items
                 </span>
+                <span ng-show="model.composition == undefined">
+                    {{model.name}}
+                </span>
             </div>
         </div>
     </div>
-    <div class="contents abs mobile-info desktop-hide">
-        <mct-representation class="contents abs btn s-very-subtle desktop-hide" key="'info-button'" mct-object="domainObject"></mct-representation>
-    </div>
 </div>
diff --git a/platform/commonUI/general/res/css/forms.css b/platform/commonUI/general/res/css/forms.css
index 7b9fa40b87..34a14c0107 100644
--- a/platform/commonUI/general/res/css/forms.css
+++ b/platform/commonUI/general/res/css/forms.css
@@ -433,7 +433,7 @@ input[type="text"] {
   margin: 0 0 2px 2px;
   overflow: hidden;
   position: relative; }
-  /* line 163, ../sass/_mixins.scss */
+  /* line 167, ../sass/_mixins.scss */
   .form-control.select:not(.disabled):hover {
     background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzYzNjM2MyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzU3NTc1NyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
     background-size: 100%;
@@ -442,10 +442,10 @@ input[type="text"] {
     background-image: -webkit-linear-gradient(#636363, #575757);
     background-image: linear-gradient(#636363, #575757);
     color: #bdbdbd; }
-    /* line 166, ../sass/_mixins.scss */
+    /* line 170, ../sass/_mixins.scss */
     .form-control.select:not(.disabled):hover.btn-menu .invoke-menu {
       color: #878787; }
-  /* line 171, ../sass/_mixins.scss */
+  /* line 175, ../sass/_mixins.scss */
   .form-control.select.btn-menu .invoke-menu {
     color: #757575; }
   /* line 29, ../sass/forms/_selects.scss */
diff --git a/platform/commonUI/general/res/css/items.css b/platform/commonUI/general/res/css/items.css
index 620ed931bc..af2c481a59 100644
--- a/platform/commonUI/general/res/css/items.css
+++ b/platform/commonUI/general/res/css/items.css
@@ -185,7 +185,7 @@
     margin-bottom: 3px;
     margin-right: 3px;
     position: relative; }
-    /* line 163, ../sass/_mixins.scss */
+    /* line 167, ../sass/_mixins.scss */
     .items-holder .item.grid-item:not(.disabled):hover {
       background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzcwNzA3MCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzYzNjM2MyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
       background-size: 100%;
@@ -194,15 +194,15 @@
       background-image: -webkit-linear-gradient(#707070, #636363);
       background-image: linear-gradient(#707070, #636363);
       color: #bdbdbd; }
-      /* line 166, ../sass/_mixins.scss */
+      /* line 170, ../sass/_mixins.scss */
       .items-holder .item.grid-item:not(.disabled):hover.btn-menu .invoke-menu {
         color: #949494; }
-    /* line 171, ../sass/_mixins.scss */
+    /* line 175, ../sass/_mixins.scss */
     .items-holder .item.grid-item.btn-menu .invoke-menu {
       color: #828282; }
     /* line 46, ../sass/items/_item.scss */
     .items-holder .item.grid-item:hover .item-main .item-type {
-      color: #0099cc !important; }
+      color: deepskyblue !important; }
       /* line 48, ../sass/items/_item.scss */
       .items-holder .item.grid-item:hover .item-main .item-type .l-icon-link {
         color: #49dedb; }
@@ -211,35 +211,35 @@
       opacity: 1; }
     /* line 57, ../sass/items/_item.scss */
     .items-holder .item.grid-item .contents {
-      top: 5px;
-      right: 5px;
-      bottom: 5px;
-      left: 5px; }
-    /* line 61, ../sass/items/_item.scss */
+      top: 10px;
+      right: 10px;
+      bottom: 10px;
+      left: 10px; }
+    /* line 63, ../sass/items/_item.scss */
     .items-holder .item.grid-item .bar.top-bar.abs {
       bottom: auto;
       height: 20px;
       line-height: 20px;
+      text-align: right;
       z-index: 5; }
-      /* line 66, ../sass/items/_item.scss */
+      /* line 69, ../sass/items/_item.scss */
       .items-holder .item.grid-item .bar.top-bar.abs .left, .items-holder .item.grid-item .bar.top-bar.abs .right {
         width: auto; }
-        /* line 68, ../sass/items/_item.scss */
+        /* line 71, ../sass/items/_item.scss */
         .items-holder .item.grid-item .bar.top-bar.abs .left .icon, .items-holder .item.grid-item .bar.top-bar.abs .right .icon {
           margin-left: 3px; }
-          /* line 70, ../sass/items/_item.scss */
+          /* line 73, ../sass/items/_item.scss */
           .items-holder .item.grid-item .bar.top-bar.abs .left .icon.l-icon-link, .items-holder .item.grid-item .bar.top-bar.abs .right .icon.l-icon-link {
             color: #49dedb; }
-    /* line 76, ../sass/items/_item.scss */
+    /* line 79, ../sass/items/_item.scss */
     .items-holder .item.grid-item .bar.bottom-bar.abs {
       top: auto;
-      height: 30px;
-      padding: 5px; }
-    /* line 82, ../sass/items/_item.scss */
+      height: 30px; }
+    /* line 84, ../sass/items/_item.scss */
     .items-holder .item.grid-item .item-main {
       line-height: 160px;
       z-index: 1; }
-      /* line 88, ../sass/items/_item.scss */
+      /* line 90, ../sass/items/_item.scss */
       .items-holder .item.grid-item .item-main .item-type {
         overflow: false;
         position: absolute;
@@ -249,24 +249,23 @@
         left: 40px;
         width: auto;
         height: auto;
-        color: #737373;
         text-align: center;
         font-size: 96.9px;
         line-height: 102px;
         bottom: auto;
         height: 102px;
         top: 30px; }
-        /* line 100, ../sass/items/_item.scss */
+        /* line 102, ../sass/items/_item.scss */
         .items-holder .item.grid-item .item-main .item-type .l-icon-link {
-          color: #1a8e8b;
-          height: 36px;
-          line-height: 36px;
+          color: #49dedb;
+          height: auto;
+          line-height: 100%;
           position: absolute;
-          font-size: 32px;
+          font-size: 0.3em;
           left: 0px;
           bottom: 10px;
           z-index: 2; }
-      /* line 112, ../sass/items/_item.scss */
+      /* line 115, ../sass/items/_item.scss */
       .items-holder .item.grid-item .item-main .item-open {
         -moz-transition-property: "opacity";
         -o-transition-property: "opacity";
@@ -286,13 +285,13 @@
         width: 50px;
         pointer-events: none;
         text-align: right; }
-    /* line 124, ../sass/items/_item.scss */
+    /* line 127, ../sass/items/_item.scss */
     .items-holder .item.grid-item .title {
       text-shadow: rgba(0, 0, 0, 0.1) 0 1px 2px;
-      color: #cccccc;
       overflow: hidden;
+      text-overflow: ellipsis;
       white-space: nowrap;
-      text-overflow: ellipsis; }
+      color: #cccccc; }
     /* line 132, ../sass/items/_item.scss */
     .items-holder .item.grid-item .details {
       font-size: 0.8em; }
@@ -318,7 +317,7 @@
       color: #999;
       display: inline-block;
       color: #80dfff; }
-      /* line 163, ../sass/_mixins.scss */
+      /* line 167, ../sass/_mixins.scss */
       .items-holder .item.grid-item.selected:not(.disabled):hover {
         background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzJlY2JmZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzE0YzRmZiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
         background-size: 100%;
@@ -327,10 +326,10 @@
         background-image: -webkit-linear-gradient(#2ecbff, #14c4ff);
         background-image: linear-gradient(#2ecbff, #14c4ff);
         color: #bdbdbd; }
-        /* line 166, ../sass/_mixins.scss */
+        /* line 170, ../sass/_mixins.scss */
         .items-holder .item.grid-item.selected:not(.disabled):hover.btn-menu .invoke-menu {
           color: #75ddff; }
-      /* line 171, ../sass/_mixins.scss */
+      /* line 175, ../sass/_mixins.scss */
       .items-holder .item.grid-item.selected.btn-menu .invoke-menu {
         color: #52d4ff; }
       /* line 140, ../sass/items/_item.scss */
@@ -368,82 +367,82 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 @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 34, ../sass/mobile/_item.scss */
-  .items-holder .item.grid-item .mobile-grid-nav {
-    top: 0px;
-    bottom: 0px;
-    right: 55px; }
-  /* line 39, ../sass/mobile/_item.scss */
-  .items-holder .item.grid-item .mobile-info {
-    text-align: center;
-    width: 50px;
-    right: 0px;
-    left: auto;
-    font-size: 1.3em; }
-  /* line 47, ../sass/mobile/_item.scss */
-  .items-holder .item.grid-item .bar.bottom-bar.abs {
-    top: 0px;
-    height: auto; }
-  /* line 54, ../sass/mobile/_item.scss */
-  .items-holder .item.grid-item .item-main .item-type {
-    font-size: 30px;
-    top: 0px;
-    left: 0px;
-    text-align: left;
-    height: auto; }
-  /* line 61, ../sass/mobile/_item.scss */
-  .items-holder .item.grid-item .item-main .item-open {
-    display: none; }
-  /* line 65, ../sass/mobile/_item.scss */
-  .items-holder .item.grid-item .title, .items-holder .item.grid-item .details {
-    margin-left: 30px; } }
+  /* line 29, ../sass/mobile/_item.scss */
+  .items-holder .item.grid-item {
+    width: 100%; }
+    /* line 33, ../sass/mobile/_item.scss */
+    .items-holder .item.grid-item > .contents {
+      top: 0px;
+      right: 10px;
+      bottom: 0px;
+      left: 10px; }
+    /* line 37, ../sass/mobile/_item.scss */
+    .items-holder .item.grid-item .bar.top-bar {
+      bottom: 0 !important;
+      left: auto !important;
+      right: 20px !important;
+      width: 40px !important;
+      height: auto !important;
+      text-align: right; }
+    /* line 44, ../sass/mobile/_item.scss */
+    .items-holder .item.grid-item .bar.bottom-bar {
+      left: 40px;
+      right: 60px; }
+    /* line 52, ../sass/mobile/_item.scss */
+    .items-holder .item.grid-item .item-main .item-type {
+      font-size: 30px;
+      right: auto;
+      bottom: auto;
+      left: 0;
+      line-height: 100%;
+      text-align: left;
+      width: 30px; }
+      /* line 61, ../sass/mobile/_item.scss */
+      .items-holder .item.grid-item .item-main .item-type .l-icon-link {
+        bottom: 0; }
+    /* line 65, ../sass/mobile/_item.scss */
+    .items-holder .item.grid-item .item-main .item-open {
+      display: block;
+      opacity: 1;
+      font-size: 1em;
+      width: auto; } }
 @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 29, ../sass/mobile/_item.scss */
   .items-holder .item.grid-item {
-    width: 100%;
     height: 50px; }
-    /* line 74, ../sass/mobile/_item.scss */
-    .items-holder .item.grid-item .mobile-right {
-      top: 100%; }
-    /* line 77, ../sass/mobile/_item.scss */
-    .items-holder .item.grid-item .mobile-info {
-      line-height: 25px; }
-    /* line 81, ../sass/mobile/_item.scss */
+    /* line 78, ../sass/mobile/_item.scss */
+    .items-holder .item.grid-item .bar.top-bar {
+      line-height: 50px !important; }
+    /* line 82, ../sass/mobile/_item.scss */
+    .items-holder .item.grid-item .bar.bottom-bar {
+      top: 7px !important;
+      bottom: auto;
+      height: 35px; }
+    /* line 87, ../sass/mobile/_item.scss */
     .items-holder .item.grid-item .item-main .item-type {
-      line-height: 40px; }
-    /* line 85, ../sass/mobile/_item.scss */
-    .items-holder .item.grid-item .title {
-      margin-right: 10px;
-      line-height: 25px; }
-    /* line 89, ../sass/mobile/_item.scss */
-    .items-holder .item.grid-item .details {
-      margin-right: 10px;
-      line-height: 0px; } }
+      top: 10px !important;
+      bottom: auto;
+      height: 30px; }
+    /* line 90, ../sass/mobile/_item.scss */
+    .items-holder .item.grid-item .item-main .item-open {
+      line-height: 50px; } }
 @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 29, ../sass/mobile/_item.scss */
   .items-holder .item.grid-item {
-    width: 100%;
-    height: 66.66667px; }
-    /* line 99, ../sass/mobile/_item.scss */
-    .items-holder .item.grid-item .mobile-right {
-      top: 100%; }
-    /* line 103, ../sass/mobile/_item.scss */
-    .items-holder .item.grid-item .mobile-info {
-      line-height: 38px; }
-    /* line 107, ../sass/mobile/_item.scss */
+    height: 66px; }
+    /* line 100, ../sass/mobile/_item.scss */
+    .items-holder .item.grid-item .bar.top-bar {
+      line-height: 66px !important; }
+    /* line 104, ../sass/mobile/_item.scss */
+    .items-holder .item.grid-item .bar.bottom-bar {
+      top: 15px !important;
+      bottom: auto;
+      height: 35px; }
+    /* line 109, ../sass/mobile/_item.scss */
     .items-holder .item.grid-item .item-main .item-type {
-      font-size: 30px;
-      line-height: 50px; }
+      top: 18px !important;
+      bottom: auto;
+      height: 30px; }
     /* line 112, ../sass/mobile/_item.scss */
-    .items-holder .item.grid-item .title {
-      margin-right: 10px;
-      line-height: 38px; }
-    /* line 116, ../sass/mobile/_item.scss */
-    .items-holder .item.grid-item .details {
-      margin-right: 10px;
-      line-height: 0px; } }
-@media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-  /* line 29, ../sass/mobile/_item.scss */
-  .items-holder .item.grid-item {
-    width: 200px;
-    height: 200px; } }
+    .items-holder .item.grid-item .item-main .item-open {
+      line-height: 66px; } }
diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index c38a68b58f..c0444d9990 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -1292,7 +1292,7 @@ mct-container {
     font-size: 1.65em; }
 
 /* line 48, ../sass/_icons.scss */
-.bar .icon {
+.bar .ui-symbol {
   display: inline-block; }
 
 /* line 52, ../sass/_icons.scss */
@@ -1311,10 +1311,6 @@ mct-container {
 .super-menu.menu .type-icon {
   position: absolute; }
 
-/* line 68, ../sass/_icons.scss */
-.tree-item .type-icon {
-  font-size: 16px; }
-
 /* line 72, ../sass/_icons.scss */
 .l-icon-link:before {
   content: "\f4"; }
@@ -1769,7 +1765,7 @@ table {
     color: #999;
     display: inline-block;
     color: #ccf2ff; }
-    /* line 163, ../sass/_mixins.scss */
+    /* line 167, ../sass/_mixins.scss */
     .btn.major:not(.disabled):hover,
     .s-btn.major:not(.disabled):hover,
     .major.icon-btn:not(.disabled):hover,
@@ -1781,13 +1777,13 @@ table {
       background-image: -webkit-linear-gradient(#2ecbff, #14c4ff);
       background-image: linear-gradient(#2ecbff, #14c4ff);
       color: #bdbdbd; }
-      /* line 166, ../sass/_mixins.scss */
+      /* line 170, ../sass/_mixins.scss */
       .btn.major:not(.disabled):hover.btn-menu .invoke-menu,
       .s-btn.major:not(.disabled):hover.btn-menu .invoke-menu,
       .major.icon-btn:not(.disabled):hover.btn-menu .invoke-menu,
       .major.s-icon-btn:not(.disabled):hover.btn-menu .invoke-menu {
         color: #75ddff; }
-    /* line 171, ../sass/_mixins.scss */
+    /* line 175, ../sass/_mixins.scss */
     .btn.major.btn-menu .invoke-menu,
     .s-btn.major.btn-menu .invoke-menu,
     .major.btn-menu.icon-btn .invoke-menu,
@@ -1817,7 +1813,7 @@ table {
       border-top: 1px solid #2ecbff;
       color: #ccf2ff;
       display: inline-block; }
-      /* line 163, ../sass/_mixins.scss */
+      /* line 167, ../sass/_mixins.scss */
       .btn.major:hover:not(.disabled):hover,
       .s-btn.major:hover:not(.disabled):hover,
       .major.icon-btn:hover:not(.disabled):hover,
@@ -1829,13 +1825,13 @@ table {
         background-image: -webkit-linear-gradient(#47d1ff, #2ecbff);
         background-image: linear-gradient(#47d1ff, #2ecbff);
         color: white; }
-        /* line 166, ../sass/_mixins.scss */
+        /* line 170, ../sass/_mixins.scss */
         .btn.major:hover:not(.disabled):hover.btn-menu .invoke-menu,
         .s-btn.major:hover:not(.disabled):hover.btn-menu .invoke-menu,
         .major.icon-btn:hover:not(.disabled):hover.btn-menu .invoke-menu,
         .major.s-icon-btn:hover:not(.disabled):hover.btn-menu .invoke-menu {
           color: #8fe3ff; }
-      /* line 171, ../sass/_mixins.scss */
+      /* line 175, ../sass/_mixins.scss */
       .btn.major:hover.btn-menu .invoke-menu,
       .s-btn.major:hover.btn-menu .invoke-menu,
       .major.icon-btn:hover.btn-menu .invoke-menu,
@@ -1871,7 +1867,7 @@ table {
     border-top: 1px solid #8a8a8a;
     color: #cccccc;
     display: inline-block; }
-    /* line 163, ../sass/_mixins.scss */
+    /* line 167, ../sass/_mixins.scss */
     .btn.subtle:not(.disabled):hover,
     .s-btn.subtle:not(.disabled):hover,
     .subtle.icon-btn:not(.disabled):hover,
@@ -1883,13 +1879,13 @@ table {
       background-image: -webkit-linear-gradient(#969696, #8a8a8a);
       background-image: linear-gradient(#969696, #8a8a8a);
       color: #f0f0f0; }
-      /* line 166, ../sass/_mixins.scss */
+      /* line 170, ../sass/_mixins.scss */
       .btn.subtle:not(.disabled):hover.btn-menu .invoke-menu,
       .s-btn.subtle:not(.disabled):hover.btn-menu .invoke-menu,
       .subtle.icon-btn:not(.disabled):hover.btn-menu .invoke-menu,
       .subtle.s-icon-btn:not(.disabled):hover.btn-menu .invoke-menu {
         color: #bababa; }
-    /* line 171, ../sass/_mixins.scss */
+    /* line 175, ../sass/_mixins.scss */
     .btn.subtle.btn-menu .invoke-menu,
     .s-btn.subtle.btn-menu .invoke-menu,
     .subtle.btn-menu.icon-btn .invoke-menu,
@@ -1922,7 +1918,7 @@ table {
     border-top: 1px solid #575757;
     color: #999;
     display: inline-block; }
-    /* line 163, ../sass/_mixins.scss */
+    /* line 167, ../sass/_mixins.scss */
     .btn.very-subtle:not(.disabled):hover, .btn.s-very-subtle:not(.disabled):hover,
     .s-btn.very-subtle:not(.disabled):hover,
     .very-subtle.icon-btn:not(.disabled):hover,
@@ -1937,7 +1933,7 @@ table {
       background-image: -webkit-linear-gradient(#636363, #575757);
       background-image: linear-gradient(#636363, #575757);
       color: #bdbdbd; }
-      /* line 166, ../sass/_mixins.scss */
+      /* line 170, ../sass/_mixins.scss */
       .btn.very-subtle:not(.disabled):hover.btn-menu .invoke-menu, .btn.s-very-subtle:not(.disabled):hover.btn-menu .invoke-menu,
       .s-btn.very-subtle:not(.disabled):hover.btn-menu .invoke-menu,
       .very-subtle.icon-btn:not(.disabled):hover.btn-menu .invoke-menu,
@@ -1946,7 +1942,7 @@ table {
       .s-very-subtle.icon-btn:not(.disabled):hover.btn-menu .invoke-menu,
       .s-very-subtle.s-icon-btn:not(.disabled):hover.btn-menu .invoke-menu {
         color: #878787; }
-    /* line 171, ../sass/_mixins.scss */
+    /* line 175, ../sass/_mixins.scss */
     .btn.very-subtle.btn-menu .invoke-menu, .btn.s-very-subtle.btn-menu .invoke-menu,
     .s-btn.very-subtle.btn-menu .invoke-menu,
     .very-subtle.btn-menu.icon-btn .invoke-menu,
@@ -1982,7 +1978,7 @@ table {
       border-top: 1px solid #fe9510;
       color: #fff;
       display: inline-block; }
-      /* line 163, ../sass/_mixins.scss */
+      /* line 167, ../sass/_mixins.scss */
       .btn.very-subtle.paused:not(.disabled):hover, .btn.s-very-subtle.paused:not(.disabled):hover,
       .s-btn.very-subtle.paused:not(.disabled):hover,
       .very-subtle.paused.icon-btn:not(.disabled):hover,
@@ -1997,7 +1993,7 @@ table {
         background-image: -webkit-linear-gradient(#fea029, #fe9510);
         background-image: linear-gradient(#fea029, #fe9510);
         color: white; }
-        /* line 166, ../sass/_mixins.scss */
+        /* line 170, ../sass/_mixins.scss */
         .btn.very-subtle.paused:not(.disabled):hover.btn-menu .invoke-menu, .btn.s-very-subtle.paused:not(.disabled):hover.btn-menu .invoke-menu,
         .s-btn.very-subtle.paused:not(.disabled):hover.btn-menu .invoke-menu,
         .very-subtle.paused.icon-btn:not(.disabled):hover.btn-menu .invoke-menu,
@@ -2006,7 +2002,7 @@ table {
         .s-very-subtle.paused.icon-btn:not(.disabled):hover.btn-menu .invoke-menu,
         .s-very-subtle.paused.s-icon-btn:not(.disabled):hover.btn-menu .invoke-menu {
           color: #fec070; }
-      /* line 171, ../sass/_mixins.scss */
+      /* line 175, ../sass/_mixins.scss */
       .btn.very-subtle.paused.btn-menu .invoke-menu, .btn.s-very-subtle.paused.btn-menu .invoke-menu,
       .s-btn.very-subtle.paused.btn-menu .invoke-menu,
       .very-subtle.paused.btn-menu.icon-btn .invoke-menu,
@@ -2351,13 +2347,13 @@ label.checkbox.custom {
   padding-left: 19px;
   position: relative;
   vertical-align: top; }
-  /* line 205, ../sass/controls/_controls.scss */
+  /* line 204, ../sass/controls/_controls.scss */
   label.checkbox.custom em {
     color: #999;
     display: inline-block;
     height: 14px;
     min-width: 14px; }
-    /* line 210, ../sass/controls/_controls.scss */
+    /* line 209, ../sass/controls/_controls.scss */
     label.checkbox.custom em:before {
       -moz-border-radius: 1.5px;
       -webkit-border-radius: 1.5px;
@@ -2376,51 +2372,51 @@ label.checkbox.custom {
       top: 0;
       position: absolute;
       text-align: center; }
-  /* line 228, ../sass/controls/_controls.scss */
+  /* line 227, ../sass/controls/_controls.scss */
   label.checkbox.custom.no-text {
     overflow: hidden;
     margin-right: 0;
     padding-left: 0;
     height: 14px;
     width: 14px; }
-    /* line 234, ../sass/controls/_controls.scss */
+    /* line 233, ../sass/controls/_controls.scss */
     label.checkbox.custom.no-text em {
       overflow: hidden; }
-  /* line 238, ../sass/controls/_controls.scss */
+  /* line 237, ../sass/controls/_controls.scss */
   label.checkbox.custom input {
     display: none; }
-    /* line 240, ../sass/controls/_controls.scss */
+    /* line 239, ../sass/controls/_controls.scss */
     label.checkbox.custom input:checked ~ em:before {
       background: #0099cc;
       color: #ccf2ff;
       content: "2"; }
 
-/* line 248, ../sass/controls/_controls.scss */
+/* line 247, ../sass/controls/_controls.scss */
 .input-labeled {
   margin-left: 5px; }
-  /* line 250, ../sass/controls/_controls.scss */
+  /* line 249, ../sass/controls/_controls.scss */
   .input-labeled label {
     display: inline-block;
     margin-right: 3px; }
-  /* line 254, ../sass/controls/_controls.scss */
+  /* line 253, ../sass/controls/_controls.scss */
   .input-labeled.inline {
     display: inline-block; }
-  /* line 257, ../sass/controls/_controls.scss */
+  /* line 256, ../sass/controls/_controls.scss */
   .input-labeled:first-child {
     margin-left: 0; }
 
-/* line 262, ../sass/controls/_controls.scss */
+/* line 261, ../sass/controls/_controls.scss */
 .btn-menu label.checkbox.custom {
   margin-left: 5px; }
 
-/* line 267, ../sass/controls/_controls.scss */
+/* line 266, ../sass/controls/_controls.scss */
 .item .checkbox.checked label {
   -moz-box-shadow: none;
   -webkit-box-shadow: none;
   box-shadow: none;
   border-bottom: none; }
 
-/* line 273, ../sass/controls/_controls.scss */
+/* line 272, ../sass/controls/_controls.scss */
 .btn-menu {
   background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzUyNTI1MiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzQ1NDU0NSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
   background-size: 100%;
@@ -2458,7 +2454,7 @@ label.checkbox.custom {
   			color: lighten($c, 10%);
   		}
   	}*/ }
-  /* line 163, ../sass/_mixins.scss */
+  /* line 167, ../sass/_mixins.scss */
   .btn-menu:not(.disabled):hover {
     background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzYzNjM2MyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzU3NTc1NyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
     background-size: 100%;
@@ -2467,37 +2463,37 @@ label.checkbox.custom {
     background-image: -webkit-linear-gradient(#636363, #575757);
     background-image: linear-gradient(#636363, #575757);
     color: #bdbdbd; }
-    /* line 166, ../sass/_mixins.scss */
+    /* line 170, ../sass/_mixins.scss */
     .btn-menu:not(.disabled):hover.btn-menu .invoke-menu {
       color: #878787; }
-  /* line 171, ../sass/_mixins.scss */
+  /* line 175, ../sass/_mixins.scss */
   .btn-menu.btn-menu .invoke-menu {
     color: #757575; }
-  /* line 285, ../sass/controls/_controls.scss */
+  /* line 284, ../sass/controls/_controls.scss */
   .btn-menu:not(.disabled):hover {
     color: #cccccc; }
-  /* line 310, ../sass/controls/_controls.scss */
+  /* line 309, ../sass/controls/_controls.scss */
   .btn-menu .name {
     margin-left: 5px; }
-  /* line 313, ../sass/controls/_controls.scss */
+  /* line 312, ../sass/controls/_controls.scss */
   .btn-menu .menu {
     position: absolute;
     left: 0;
     text-align: left; }
-    /* line 318, ../sass/controls/_controls.scss */
+    /* line 317, ../sass/controls/_controls.scss */
     .btn-menu .menu .ui-symbol.icon {
       width: 12px; }
 
-/* line 324, ../sass/controls/_controls.scss */
+/* line 323, ../sass/controls/_controls.scss */
 .top-bar .btn-menu {
   height: 25px;
   line-height: 25px;
   padding-right: 10px; }
-  /* line 332, ../sass/controls/_controls.scss */
+  /* line 331, ../sass/controls/_controls.scss */
   .top-bar .btn-menu.browse-btn {
     margin-right: 5px;
     padding-left: 25px; }
-    /* line 335, ../sass/controls/_controls.scss */
+    /* line 334, ../sass/controls/_controls.scss */
     .top-bar .btn-menu.browse-btn .badge {
       -moz-border-radius: 4.5px;
       -webkit-border-radius: 4.5px;
@@ -2513,14 +2509,14 @@ label.checkbox.custom {
       width: 15px;
       height: auto; }
 
-/* line 351, ../sass/controls/_controls.scss */
+/* line 350, ../sass/controls/_controls.scss */
 .context-available {
   color: #0099cc; }
-  /* line 355, ../sass/controls/_controls.scss */
+  /* line 354, ../sass/controls/_controls.scss */
   .context-available:hover {
     color: deepskyblue; }
 
-/* line 360, ../sass/controls/_controls.scss */
+/* line 359, ../sass/controls/_controls.scss */
 .view-switcher {
   -moz-transition-property: visibility, opacity, background-color, border-color;
   -o-transition-property: visibility, opacity, background-color, border-color;
@@ -2536,37 +2532,37 @@ label.checkbox.custom {
   transition-timing-function: ease-in-out; }
 
 /******************************************************** OBJECT-HEADER */
-/* line 365, ../sass/controls/_controls.scss */
+/* line 364, ../sass/controls/_controls.scss */
 .object-header {
   display: inline-block;
   font-size: 1em; }
-  /* line 369, ../sass/controls/_controls.scss */
+  /* line 368, ../sass/controls/_controls.scss */
   .object-header .label .title-label {
     color: white; }
-  /* line 372, ../sass/controls/_controls.scss */
+  /* line 371, ../sass/controls/_controls.scss */
   .object-header .label .type-icon {
     font-size: 120%;
     margin-right: 5px;
     vertical-align: middle; }
-  /* line 377, ../sass/controls/_controls.scss */
+  /* line 376, ../sass/controls/_controls.scss */
   .object-header .label .context-available {
     opacity: 0;
     font-size: 0.8em; }
-  /* line 382, ../sass/controls/_controls.scss */
+  /* line 381, ../sass/controls/_controls.scss */
   .object-header .label:hover .context-available {
     opacity: 1; }
 
-/* line 391, ../sass/controls/_controls.scss */
+/* line 390, ../sass/controls/_controls.scss */
 .top-bar .object-header,
 .object-browse-bar .object-header {
   font-size: 1.1em; }
-  /* line 393, ../sass/controls/_controls.scss */
+  /* line 392, ../sass/controls/_controls.scss */
   .top-bar .object-header span,
   .object-browse-bar .object-header span {
     display: inline-block; }
 
 /******************************************************** SLIDERS */
-/* line 405, ../sass/controls/_controls.scss */
+/* line 404, ../sass/controls/_controls.scss */
 .slider .slot {
   -moz-border-radius: 2px;
   -webkit-border-radius: 2px;
@@ -2587,7 +2583,7 @@ label.checkbox.custom {
   right: 0;
   bottom: auto;
   left: 0; }
-/* line 416, ../sass/controls/_controls.scss */
+/* line 415, ../sass/controls/_controls.scss */
 .slider .knob {
   background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzUyNTI1MiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzQ1NDU0NSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
   background-size: 100%;
@@ -2616,7 +2612,7 @@ label.checkbox.custom {
   auto: 0;
   bottom: auto;
   left: auto; }
-  /* line 163, ../sass/_mixins.scss */
+  /* line 167, ../sass/_mixins.scss */
   .slider .knob:not(.disabled):hover {
     background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzYzNjM2MyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzU3NTc1NyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
     background-size: 100%;
@@ -2625,13 +2621,13 @@ label.checkbox.custom {
     background-image: -webkit-linear-gradient(#636363, #575757);
     background-image: linear-gradient(#636363, #575757);
     color: #bdbdbd; }
-    /* line 166, ../sass/_mixins.scss */
+    /* line 170, ../sass/_mixins.scss */
     .slider .knob:not(.disabled):hover.btn-menu .invoke-menu {
       color: #878787; }
-  /* line 171, ../sass/_mixins.scss */
+  /* line 175, ../sass/_mixins.scss */
   .slider .knob.btn-menu .invoke-menu {
     color: #757575; }
-  /* line 187, ../sass/_mixins.scss */
+  /* line 191, ../sass/_mixins.scss */
   .slider .knob:before {
     -moz-transition-property: "border-color";
     -o-transition-property: "border-color";
@@ -2655,7 +2651,7 @@ label.checkbox.custom {
     left: 2px;
     bottom: 5px;
     top: 5px; }
-  /* line 209, ../sass/_mixins.scss */
+  /* line 213, ../sass/_mixins.scss */
   .slider .knob:not(.disabled):hover:before {
     -moz-transition-property: "border-color";
     -o-transition-property: "border-color";
@@ -2670,12 +2666,12 @@ label.checkbox.custom {
     -webkit-transition-timing-function: ease-in-out;
     transition-timing-function: ease-in-out;
     border-color: #0099cc; }
-  /* line 427, ../sass/controls/_controls.scss */
+  /* line 426, ../sass/controls/_controls.scss */
   .slider .knob:before {
     top: 1px;
     bottom: 3px;
     left: 5px; }
-/* line 434, ../sass/controls/_controls.scss */
+/* line 433, ../sass/controls/_controls.scss */
 .slider .range {
   background: rgba(0, 153, 204, 0.6);
   cursor: ew-resize;
@@ -2686,12 +2682,12 @@ label.checkbox.custom {
   left: auto;
   height: auto;
   width: auto; }
-  /* line 444, ../sass/controls/_controls.scss */
+  /* line 443, ../sass/controls/_controls.scss */
   .slider .range:hover {
     background: rgba(0, 153, 204, 0.7); }
 
 /******************************************************** BROWSER ELEMENTS */
-/* line 452, ../sass/controls/_controls.scss */
+/* line 451, ../sass/controls/_controls.scss */
 ::-webkit-scrollbar {
   -moz-border-radius: 2px;
   -webkit-border-radius: 2px;
@@ -2708,7 +2704,7 @@ label.checkbox.custom {
   height: 10px;
   width: 10px; }
 
-/* line 458, ../sass/controls/_controls.scss */
+/* line 457, ../sass/controls/_controls.scss */
 ::-webkit-scrollbar-thumb {
   background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzY2NjY2NiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzU5NTk1OSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
   background-size: 100%;
@@ -2726,7 +2722,7 @@ label.checkbox.custom {
   -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
   box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
   border-top: 1px solid gray; }
-  /* line 465, ../sass/controls/_controls.scss */
+  /* line 464, ../sass/controls/_controls.scss */
   ::-webkit-scrollbar-thumb:hover {
     background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzgwODA4MCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzczNzM3MyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
     background-size: 100%;
@@ -2735,7 +2731,7 @@ label.checkbox.custom {
     background-image: -webkit-linear-gradient(#808080, #737373 20px);
     background-image: linear-gradient(#808080, #737373 20px); }
 
-/* line 470, ../sass/controls/_controls.scss */
+/* line 469, ../sass/controls/_controls.scss */
 ::-webkit-scrollbar-corner {
   background: rgba(0, 0, 0, 0.4); }
 
@@ -2827,14 +2823,14 @@ label.checkbox.custom {
     padding: 3px 0;
     position: absolute;
     z-index: 10; }
-    /* line 171, ../sass/_mixins.scss */
+    /* line 175, ../sass/_mixins.scss */
     .menu-element .menu.btn-menu .invoke-menu {
       color: #828282; }
     /* line 37, ../sass/controls/_menus.scss */
     .menu-element .menu ul {
       margin: 0;
       padding: 0; }
-      /* line 309, ../sass/_mixins.scss */
+      /* line 314, ../sass/_mixins.scss */
       .menu-element .menu ul li {
         list-style-type: none;
         margin: 0;
@@ -2885,7 +2881,7 @@ label.checkbox.custom {
     border-top: 1px solid #919191;
     color: #999;
     display: inline-block; }
-    /* line 171, ../sass/_mixins.scss */
+    /* line 175, ../sass/_mixins.scss */
     .menu-element .context-menu.btn-menu .invoke-menu,
     .menu-element .super-menu.btn-menu .invoke-menu {
       color: #b0b0b0; }
@@ -3711,7 +3707,7 @@ input[type="text"] {
   color: #cccccc;
   outline: none;
   padding: 0 3px; }
-  /* line 275, ../sass/_mixins.scss */
+  /* line 280, ../sass/_mixins.scss */
   input[type="text"].error {
     background: rgba(255, 0, 0, 0.5); }
   /* line 29, ../sass/forms/_text-input.scss */
@@ -3765,7 +3761,7 @@ input[type="text"] {
   margin: 0 0 2px 2px;
   overflow: hidden;
   position: relative; }
-  /* line 163, ../sass/_mixins.scss */
+  /* line 167, ../sass/_mixins.scss */
   .form-control.select:not(.disabled):hover {
     background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzYzNjM2MyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzU3NTc1NyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
     background-size: 100%;
@@ -3774,10 +3770,10 @@ input[type="text"] {
     background-image: -webkit-linear-gradient(#636363, #575757);
     background-image: linear-gradient(#636363, #575757);
     color: #bdbdbd; }
-    /* line 166, ../sass/_mixins.scss */
+    /* line 170, ../sass/_mixins.scss */
     .form-control.select:not(.disabled):hover.btn-menu .invoke-menu {
       color: #878787; }
-  /* line 171, ../sass/_mixins.scss */
+  /* line 175, ../sass/_mixins.scss */
   .form-control.select.btn-menu .invoke-menu {
     color: #757575; }
   /* line 29, ../sass/forms/_selects.scss */
@@ -3856,7 +3852,7 @@ input[type="text"] {
   max-height: 400px;
   overflow: auto;
   padding: 5px; }
-  /* line 275, ../sass/_mixins.scss */
+  /* line 280, ../sass/_mixins.scss */
   .channel-selector .treeview.error {
     background: rgba(255, 0, 0, 0.5); }
 /* line 36, ../sass/forms/_channel-selector.scss */
@@ -3956,7 +3952,7 @@ input[type="text"] {
   padding: 0 3px;
   background: #3b3b3b;
   border-bottom: 1px solid #4d4d4d; }
-  /* line 275, ../sass/_mixins.scss */
+  /* line 280, ../sass/_mixins.scss */
   .filter input.filter.error,
   .filter input.t-filter-input.error,
   .t-filter input.filter.error,
@@ -4394,7 +4390,7 @@ input[type="text"] {
   bottom: 15%;
   left: 15%;
   z-index: 101; }
-  /* line 171, ../sass/_mixins.scss */
+  /* line 175, ../sass/_mixins.scss */
   .overlay > .holder.btn-menu .invoke-menu {
     color: #757575; }
   /* line 45, ../sass/overlay/_overlay.scss */
@@ -4919,7 +4915,7 @@ input[type="text"] {
     right: 0;
     width: auto;
     height: 5px; }
-    /* line 187, ../sass/_mixins.scss */
+    /* line 191, ../sass/_mixins.scss */
     .split-layout.horizontal > .splitter:before {
       -moz-transition-property: "border-color";
       -o-transition-property: "border-color";
@@ -4943,7 +4939,7 @@ input[type="text"] {
       top: 2px;
       left: 5px;
       right: 5px; }
-    /* line 209, ../sass/_mixins.scss */
+    /* line 213, ../sass/_mixins.scss */
     .split-layout.horizontal > .splitter:not(.disabled):hover:before {
       -moz-transition-property: "border-color";
       -o-transition-property: "border-color";
@@ -4973,7 +4969,7 @@ input[type="text"] {
   bottom: 0;
   cursor: col-resize;
   width: 5px; }
-  /* line 187, ../sass/_mixins.scss */
+  /* line 191, ../sass/_mixins.scss */
   .split-layout.vertical > .splitter:before {
     -moz-transition-property: "border-color";
     -o-transition-property: "border-color";
@@ -4997,7 +4993,7 @@ input[type="text"] {
     left: 2px;
     bottom: 5px;
     top: 5px; }
-  /* line 209, ../sass/_mixins.scss */
+  /* line 213, ../sass/_mixins.scss */
   .split-layout.vertical > .splitter:not(.disabled):hover:before {
     -moz-transition-property: "border-color";
     -o-transition-property: "border-color";
diff --git a/platform/commonUI/general/res/css/tree.css b/platform/commonUI/general/res/css/tree.css
index b80e1ff5f9..e6387a1cbe 100644
--- a/platform/commonUI/general/res/css/tree.css
+++ b/platform/commonUI/general/res/css/tree.css
@@ -152,7 +152,7 @@
 ul.tree {
   margin: 0;
   padding: 0; }
-  /* line 309, ../sass/_mixins.scss */
+  /* line 314, ../sass/_mixins.scss */
   ul.tree li {
     list-style-type: none;
     margin: 0;
@@ -200,25 +200,23 @@ ul.tree {
         left: 15px; }
         /* line 60, ../sass/tree/_tree.scss */
         ul.tree li span.tree-item .label .type-icon {
-          overflow: false;
-          position: absolute;
-          top: 0;
-          right: 0;
-          bottom: 0;
-          left: 0;
-          width: auto;
-          height: auto;
           text-shadow: rgba(0, 0, 0, 0.6) 0 1px 2px;
+          font-size: 16px;
           color: #0099cc;
           left: 5px;
+          position: absolute;
+          top: 4px !important;
+          bottom: auto;
+          height: 16px;
+          line-height: 100%;
           right: auto;
-          width: 1em; }
-          /* line 68, ../sass/tree/_tree.scss */
+          width: 16px; }
+          /* line 73, ../sass/tree/_tree.scss */
           ul.tree li span.tree-item .label .type-icon .icon.l-icon-link, ul.tree li span.tree-item .label .type-icon .icon.l-icon-alert {
             text-shadow: black 0 1px 2px;
             position: absolute;
             z-index: 2; }
-          /* line 74, ../sass/tree/_tree.scss */
+          /* line 79, ../sass/tree/_tree.scss */
           ul.tree li span.tree-item .label .type-icon .icon.l-icon-alert {
             color: #ff3c00;
             font-size: 8px;
@@ -227,7 +225,7 @@ ul.tree {
             width: 8px;
             top: 1px;
             right: -2px; }
-          /* line 80, ../sass/tree/_tree.scss */
+          /* line 85, ../sass/tree/_tree.scss */
           ul.tree li span.tree-item .label .type-icon .icon.l-icon-link {
             color: #49dedb;
             font-size: 8px;
@@ -235,8 +233,8 @@ ul.tree {
             height: 8px;
             width: 8px;
             left: -3px;
-            bottom: 5px; }
-        /* line 89, ../sass/tree/_tree.scss */
+            bottom: 0px; }
+        /* line 93, ../sass/tree/_tree.scss */
         ul.tree li span.tree-item .label .title-label {
           overflow: hidden;
           position: absolute;
@@ -251,53 +249,53 @@ ul.tree {
           overflow: hidden;
           text-overflow: ellipsis;
           white-space: nowrap; }
-      /* line 100, ../sass/tree/_tree.scss */
+      /* line 104, ../sass/tree/_tree.scss */
       ul.tree li span.tree-item.loading {
         pointer-events: none; }
-        /* line 102, ../sass/tree/_tree.scss */
+        /* line 106, ../sass/tree/_tree.scss */
         ul.tree li span.tree-item.loading .label {
           opacity: 0.5; }
-          /* line 104, ../sass/tree/_tree.scss */
+          /* line 108, ../sass/tree/_tree.scss */
           ul.tree li span.tree-item.loading .label .title-label {
             font-style: italic; }
-        /* line 108, ../sass/tree/_tree.scss */
+        /* line 112, ../sass/tree/_tree.scss */
         ul.tree li span.tree-item.loading .wait-spinner {
           margin-left: 14px; }
-      /* line 113, ../sass/tree/_tree.scss */
+      /* line 117, ../sass/tree/_tree.scss */
       ul.tree li span.tree-item.selected {
         background: #005177;
         color: #fff; }
-        /* line 117, ../sass/tree/_tree.scss */
+        /* line 121, ../sass/tree/_tree.scss */
         ul.tree li span.tree-item.selected .view-control {
           color: #0099cc; }
-        /* line 120, ../sass/tree/_tree.scss */
+        /* line 124, ../sass/tree/_tree.scss */
         ul.tree li span.tree-item.selected .label .type-icon {
           color: #fff; }
       @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-        /* line 128, ../sass/tree/_tree.scss */
+        /* line 132, ../sass/tree/_tree.scss */
         ul.tree li span.tree-item:not(.selected):hover {
           background: #404040;
           color: #cccccc; }
-          /* line 131, ../sass/tree/_tree.scss */
+          /* line 135, ../sass/tree/_tree.scss */
           ul.tree li span.tree-item:not(.selected):hover .context-trigger {
             display: block; }
-          /* line 134, ../sass/tree/_tree.scss */
+          /* line 138, ../sass/tree/_tree.scss */
           ul.tree li span.tree-item:not(.selected):hover .icon {
             color: #33ccff; } }
-      /* line 141, ../sass/tree/_tree.scss */
+      /* line 145, ../sass/tree/_tree.scss */
       ul.tree li span.tree-item:not(.loading) {
         cursor: pointer; }
-      /* line 145, ../sass/tree/_tree.scss */
+      /* line 149, ../sass/tree/_tree.scss */
       ul.tree li span.tree-item .context-trigger {
         top: -1px;
         position: absolute;
         right: 3px; }
-        /* line 151, ../sass/tree/_tree.scss */
+        /* line 155, ../sass/tree/_tree.scss */
         ul.tree li span.tree-item .context-trigger .invoke-menu {
           font-size: 0.75em;
           height: 0.9rem;
           line-height: 0.9rem; }
-  /* line 160, ../sass/tree/_tree.scss */
+  /* line 164, ../sass/tree/_tree.scss */
   ul.tree ul.tree {
     margin-left: 15px; }
 
@@ -327,7 +325,7 @@ ul.tree {
   ul.tree {
     margin: 0;
     padding: 0; }
-    /* line 309, ../sass/_mixins.scss */
+    /* line 314, ../sass/_mixins.scss */
     ul.tree li {
       list-style-type: none;
       margin: 0;
diff --git a/platform/commonUI/general/res/fonts/symbols/wtdsymbols.eot b/platform/commonUI/general/res/fonts/symbols/wtdsymbols.eot
index 2f4f938076289ee0821dad90fe6140302391fa27..aaab92d345f6ad0d43369f6c3405c70236496808 100755
GIT binary patch
delta 510
zcmeAOYl&cE(P3Z+(Voa=#=^d-@AX87iS?)6A7@}-lmTL!^u*!<1_lNJ1_q`GAkC4U
zQ<-*o<Li4segXr7%7%>8#1wYX^G_KV)PZUk%rbxi><3sxfqV}jUnL{Aq{4}vMHtA>
z0h$+(lb@Ve`?@5Efk9&rP<~ZzVnqQ%5<@uygJuShuaK9Rn<^oH<!u~LpaZC3RY87n
z2?H}wib30Cat7l`MvlowOx?_`Qi7WgFa;~ui!dkxl_~KtiHgWE85`L#nVRS^DKoOG
zv#Xn{n~R%^vx_q^WbN(_2<YCO1)~`q8V($QBjy9hav(K-QRIPk10C@H01E^20S1tL
zzyO2Um<G2})JRNJgiTpV&D6xqSXj~2*i_k6QP5Zv({@vDZ&MIH@UNkvfziPM)BXmC
z0#k3GLmC?XGc-)*P`e=Wx^EMEJipCX25uHmcraZ2eRLCyp8Q44oH1mxj=DP|Bg5nz
ljn$G{1iuJz34tPw5r{(=N*Q=TiW!(DUt|*AY_EBe5dbtqmJa{`

delta 259
zcmZpP=m=xu&}LwW(3;3*#xhgzoYF*xiS@_cA7x-*lmTL!^u*!<1_lNJ1_q`GAkC4U
zQ<)ajeP=3=pTNMNd>|t=F@>GawUB{9O#vuxmH`xCKfodk<b%|!WaO4qSh0ioH9+$`
za`KZCv+I-87#P%#0OgnECRP+MBrudSFlgie`3iZ7xv3KJSKh_}1$uxQRu$wImoP8`
zr5Lm<CTB37WMrFc#MI5~EXBY108_B?WM=iFGD_zJXU6l}d}ZKf0V!m-_=BMWMo)gC
gZq69ASw_R1adNii67ETY4}emPKpeDLPU{&X06?xmBme*a

diff --git a/platform/commonUI/general/res/fonts/symbols/wtdsymbols.svg b/platform/commonUI/general/res/fonts/symbols/wtdsymbols.svg
index d31a879fc3..a6f2bae8ea 100755
--- a/platform/commonUI/general/res/fonts/symbols/wtdsymbols.svg
+++ b/platform/commonUI/general/res/fonts/symbols/wtdsymbols.svg
@@ -83,6 +83,8 @@
 <glyph unicode="&#xe604;" glyph-name="icon-tabular" d="M0 896v-192h448v256h-384c-35.2 0-64-28.8-64-64zM960 960h-384v-256h448v192c0 35.2-28.8 64-64 64zM576 576h448v-256h-448v256zM0 576h448v-256h-448v256zM0 0c0-35.2 28.8-64 64-64h384v256h-448v-192zM576-64h384c35.2 0 64 28.8 64 64v192h-448v-256z" />
 <glyph unicode="&#xe605;" glyph-name="icon-calendar" d="M896 960h-768c-70.4 0-128-57.6-128-128v-768c0-70.4 57.6-128 128-128h768c70.4 0 128 57.6 128 128v768c0 70.4-57.6 128-128 128zM640 512h-256v192h256v-192zM384 448h256v-192h-256v192zM320 256h-256v192h256v-192zM320 704v-192h-256v192h256zM128 0c-17 0-33 6.6-45.2 18.8s-18.8 28.2-18.8 45.2v128h256v-192h-192zM384 0v192h256v-192h-256zM960 64c0-17-6.6-33-18.8-45.2s-28.2-18.8-45.2-18.8h-192v192h256v-128zM960 256h-256v192h256v-192zM960 512h-256v192h256v-192z" />
 <glyph unicode="&#xe606;" glyph-name="icon-paint-bucket" d="M896 320c0 0-130-188-128-256 2-70.6 57.4-128 128-128s126 57.4 128 128c2 68-128 256-128 256zM449 831l0.2 64.8c0 35.4-28.4 64-63.8 64.2 0 0-0.2 0-0.2 0-35.2 0-63.8-28.6-64-63.8l-0.6-190.8-294-292.6c-50-50-12.4-215.2 112.4-340s290-162.4 340-112.4l417 423.6-447 447zM384 320c-70.6 0-128 57.4-128 128 0 47.4 25.8 89 64.4 111l-0.4-110.8c0-35.4 28.4-64 63.8-64.2 0 0 0.2 0 0.2 0 35.2 0 63.8 28.6 64 63.8l0.4 110.8c38-22.2 63.6-63.4 63.6-110.6 0-70.6-57.4-128-128-128z" />
+<glyph unicode="&#xe607;" glyph-name="icon-x-in-circle-heavy" d="M512 960c-282.8 0-512-229.2-512-512s229.2-512 512-512 512 229.2 512 512-229.2 512-512 512zM832 256l-128-128-192 192-192-192-128 128 192 192-192 192 128 128 192-192 192 192 128-128-192-192 192-192z" />
+<glyph unicode="&#xe608;" glyph-name="icon-info" d="M512 960c-282.8 0-512-229.2-512-512s229.2-512 512-512 512 229.2 512 512-229.2 512-512 512zM512 832c70.6 0 128-57.4 128-128s-57.4-128-128-128c-70.6 0-128 57.4-128 128s57.4 128 128 128zM704 128h-384v128h128v128h-128v128h320v-256h64v-128z" />
 <glyph unicode="&#xe60d;" glyph-name="icon-arrows-right-left" d="M1024 448l-448-512v1024zM448 960l-448-512 448-512z" />
 <glyph unicode="&#xe642;" glyph-name="icon-x" d="M384 448l-365.332-365.332c-24.89-24.89-24.89-65.62 0-90.51l37.49-37.49c24.89-24.89 65.62-24.89 90.51 0 0 0 365.332 365.332 365.332 365.332l365.332-365.332c24.89-24.89 65.62-24.89 90.51 0l37.49 37.49c24.89 24.89 24.89 65.62 0 90.51l-365.332 365.332c0 0 365.332 365.332 365.332 365.332 24.89 24.89 24.89 65.62 0 90.51l-37.49 37.49c-24.89 24.89-65.62 24.89-90.51 0 0 0-365.332-365.332-365.332-365.332l-365.332 365.332c-24.89 24.89-65.62 24.89-90.51 0l-37.49-37.49c-24.89-24.89-24.89-65.62 0-90.51 0 0 365.332-365.332 365.332-365.332z" />
 </font></defs></svg>
\ No newline at end of file
diff --git a/platform/commonUI/general/res/fonts/symbols/wtdsymbols.ttf b/platform/commonUI/general/res/fonts/symbols/wtdsymbols.ttf
index 37af03fa794efb79373c205f3fe8cea1d2a76f7c..f6cf40ef12a279d8cdaa2add220a6bd2e683761c 100755
GIT binary patch
delta 493
zcmcZ+awTknV*RQ2#~BzHWq{ZwJ+Ziefq_AQfq^LkNOPp;RHj|t`1&4@pTNMNvLPci
zF@;_9{8I)7b)XssvkagB`vDeFAm0PXSINjNsc>Rv5eD*efaV3{<R>TAzAg!3V9?kD
zlwXybSW&=`#8A$_pqT;WE952Srb@_Pc^d~5=m2V1Rghm?!oUoaV$e33xZ@-v$K)o)
zZe~|0!Oa3p!OHa_42nQiN_<SBB63W|Ms`f5CVEWDjO^;{>gMX^;^yM);!F%#ySoDd
zx_4*6Xhw&I0|(%U`2eyUNX=gqd7#xm`~M$cVPHPM0J2X9VPhKHN>L**Q4uy}B{fqM
zGh<;zQ)5$QQ$;~zQB2!Sy}eCA_`tu0h6Y9l2Tc1LAPP*qfevYC_|MQVIYRY<%<H~Q
z?D70IUm3VrK*7Oq@%Pb9FnY3!nmJ?0<{CA3Mn;Cod(>A;ZV~(<#3clZGe#f|VJKzb
S1u14=nyknqyt!ZFBqIQg)shMT

delta 242
zcmcZ-b|YkhV*RoAM;RCxWq{ZwJ+Ziefq_AQfq^LkNOPp;RHg-W-<b;JConK5AIL~e
zOkwA9Eo5L&Qvk}FWdH@(53mRW`5^Tw8M!4DR_tJY4bVJ~oc!d(?D`}%1_t#bK>204
zi4_G52@K^73>rB=zCvDNZmNX*mA7#~fgYfSRR#IQB@E0!DF!Wzi91d*vQ2Jc>}GbB
z;@>R56s$ZsSna5c(mBDI@%%Pl8Ms+M>KHEmV5or6lTFmk8G|<GsJk;x-mS5Ody?P-
PpcEqz2W`&Ne8va>^n5;H

diff --git a/platform/commonUI/general/res/fonts/symbols/wtdsymbols.woff b/platform/commonUI/general/res/fonts/symbols/wtdsymbols.woff
index c93e44215ce309336ac305b4a5b954dad544db38..aaf58a7f76fe5205d1dd0645d2cea7f03cb85da2 100755
GIT binary patch
delta 560
zcmZ1yx*%Mv+~3WOfsp|Sv==aNgXs_krpbv+ViR>#>rcHuo}O4-z`($?1SrJ;#RBO$
zm1#h+H4F?Y8$kH-#@F{UQWH}c7}R5cYRo{GUG)6Z44@!TYzmOC0>bPESVS{&ODce3
zI~W)k13=h`okch&KN+Y_6J-7>5Uzb)5|o=*QJ@19+yWF(0OKTv^1Q^{RG`=uphloV
z##QoH-o_Q=7ncBC-!SpdMMjRv=NP-$U8MvWm>C#>o^aW`go#_ZUW7prs9K4SNmN9R
z$=Jw_$<#!TNtuydon75r-CW#UoL!uWA!~PcKtT8IEEvt`&~V@Y95Ek2mIJBziy{wn
zAu|KR{{t)x%m)}i_5s}vv#}m-rKpjZs0f>~lA5WBnX#~<sj;cDsiL5<D5mYE-rlAl
zeBfV0Lj$9O1E&2A5Cx{*K!-Fm{AXxjV1he<iGh`Yfs;{CnUj%);os!Fs@r8=_ibX2
z=ePOFz|8`5D+9yD-$ysW=*bh*%o#&ApHOpWWMr7kp|P5Oi{KX_E};mZ0!APX*}PBV
G86yBHou5Ad

delta 298
zcmZ1wz9dwv+~3WOfsp|Sw3aY%gXstcrpbv+ViR>#>yN!Znx0r(z`($?1SrJ;#RBO$
zm1#h+H4F^O2S7Ne`_9yi)Wj492DKcZ8Z!`P=W{L0015)dKzda`nEe2Ya7J!P1yJk+
z0|TQ62wSnU2<PM{1J!8=0M#r5;q3Y(wcNyt0v({>4xoSn7$-24=OyN*0>y3sHLe0-
z`73YZ3i69ffUa+u_~#-c+vIbM-R#a%{0z(tj6hGgY+k~|tvq?Y+EE#$bAmJD`E9;3
waI*kSV_>-Wg8}Fc2tBz$-JCIK^A2@)#>woOOSmTqJ^;#qLM3SPF3o3*0JF<U1ONa4

diff --git a/platform/commonUI/general/res/sass/_constants.scss b/platform/commonUI/general/res/sass/_constants.scss
index 22518172da..aba4c8950d 100644
--- a/platform/commonUI/general/res/sass/_constants.scss
+++ b/platform/commonUI/general/res/sass/_constants.scss
@@ -147,6 +147,7 @@ $formLabelW: 20%;
 $formInputH: 22px;
 $formRowCtrlsH: 14px;
 $menuLineH: 1.5rem;
+$menuLineHPx: 24px;
 $scrollbarTrackSize: 10px;
 $scrollbarTrackColorBg: rgba(#000, 0.4);
 $btnStdH: 25px;
diff --git a/platform/commonUI/general/res/sass/_icons.scss b/platform/commonUI/general/res/sass/_icons.scss
index e37aaba143..9c71b49331 100644
--- a/platform/commonUI/general/res/sass/_icons.scss
+++ b/platform/commonUI/general/res/sass/_icons.scss
@@ -45,7 +45,7 @@
 	}
 }
 
-.bar .icon {
+.bar .ui-symbol {
 	display: inline-block;
 }
 
@@ -65,9 +65,9 @@
 	position: absolute;
 }
 
-.tree-item .type-icon {
-	font-size: 16px; // 16px is crisp size
-}
+//.tree-item .type-icon {
+//	font-size: 16px; // 16px is crisp size
+//}
 
 .l-icon-link:before {
 	content: "\f4";
diff --git a/platform/commonUI/general/res/sass/_mixins.scss b/platform/commonUI/general/res/sass/_mixins.scss
index 4f2c1901af..c047c9582e 100644
--- a/platform/commonUI/general/res/sass/_mixins.scss
+++ b/platform/commonUI/general/res/sass/_mixins.scss
@@ -23,154 +23,158 @@
 @mixin absPosDefault($offset: 0px, $overflowHidden: hidden) {
     overflow: $overflowHidden;
     position: absolute;
-    top: $offset; right: $offset; bottom: $offset; left: $offset;
-    width: auto; height: auto;
+    top: $offset;
+    right: $offset;
+    bottom: $offset;
+    left: $offset;
+    width: auto;
+    height: auto;
 }
 
 @mixin ancillaryIcon($d, $c) {
-	// Used for small icons used in combination with larger icons,
-	// like the link and alert icons in tree items.
-	color: $c;
-	font-size: $d;
-	line-height: $d;
-	height: $d;
-	width: $d;
+    // Used for small icons used in combination with larger icons,
+    // like the link and alert icons in tree items.
+    color: $c;
+    font-size: $d;
+    line-height: $d;
+    height: $d;
+    width: $d;
 }
 
 @mixin trans-prop-nice($props, $t: 500ms) {
-	@if $t == 0 {
-		@include transition-property(none);
-	} @else {
-		@include transition-property($props);
-		@include transition-duration($t);
-		@include transition-timing-function(ease-in-out);
-	}
+    @if $t == 0 {
+        @include transition-property(none);
+    } @else {
+        @include transition-property($props);
+        @include transition-duration($t);
+        @include transition-timing-function(ease-in-out);
+    }
 }
 
 @mixin trans-prop-nice-fade($t: 0.5s) {
-	@if $t == 0 {
-		@include transition-property(none);
-	} @else {
-		@include transition-property(visibility, opacity, background-color, border-color);
-		@include transition-duration($t);
-		@include transition-timing-function(ease-in-out);
-	}
+    @if $t == 0 {
+        @include transition-property(none);
+    } @else {
+        @include transition-property(visibility, opacity, background-color, border-color);
+        @include transition-duration($t);
+        @include transition-timing-function(ease-in-out);
+    }
 }
 
 @mixin trans-prop-nice-resize-h($t: 0.5s) {
-	@include transition-property(height, bottom, top);
-	@include transition-duration($t);
-	@include transition-timing-function(ease-in-out);
+    @include transition-property(height, bottom, top);
+    @include transition-duration($t);
+    @include transition-timing-function(ease-in-out);
 }
 
 @mixin trans-prop-nice-resize-w($t: 0.5s) {
-	@include transition-property(width, left, right);
-	@include transition-duration($t);
-	@include transition-timing-function(ease-in-out);
+    @include transition-property(width, left, right);
+    @include transition-duration($t);
+    @include transition-timing-function(ease-in-out);
 }
 
 @mixin triangle-right($size, $color) {
-	$size: $size/2;
-	$ratio: 1;
-	width: 0;
-	height: 0;
-	border-top: $size/$ratio solid transparent;
-	border-left: $size solid $color;
-	border-bottom: $size/$ratio solid transparent;
+    $size: $size/2;
+    $ratio: 1;
+    width: 0;
+    height: 0;
+    border-top: $size/$ratio solid transparent;
+    border-left: $size solid $color;
+    border-bottom: $size/$ratio solid transparent;
 }
 
 @mixin triangle-down($size, $color) {
-	$size: $size/2;
-	$ratio: 1;
-	width: 0;
-	height: 0;
-	border-left: $size/$ratio solid transparent;
-	border-top: $size solid $color;
-	border-right: $size/$ratio solid transparent;
+    $size: $size/2;
+    $ratio: 1;
+    width: 0;
+    height: 0;
+    border-left: $size/$ratio solid transparent;
+    border-top: $size solid $color;
+    border-right: $size/$ratio solid transparent;
 }
 
 @mixin triangle($dir: "left", $size: 5px, $ratio: 1, $color: red) {
-	//$size: $size*2;
-	width: 0;
-	height: 0;
-	$slopedB: $size/$ratio solid transparent;
-	$straightB: $size solid $color;
-	@if $dir == "up" {
-		border-left: $slopedB;
-		border-right: $slopedB;
-		border-bottom: $straightB;
-	} @else if $dir == "right" {
-		border-top: $slopedB;
-		border-bottom: $slopedB;
-		border-left: $straightB;
-	} @else if $dir == "down"  {
-		border-left: $slopedB;
-		border-right: $slopedB;
-		border-top: $straightB;
-	} @else {
-		border-top: $slopedB;
-		border-bottom: $slopedB;
-		border-right: $straightB;
-	}
+    //$size: $size*2;
+    width: 0;
+    height: 0;
+    $slopedB: $size/$ratio solid transparent;
+    $straightB: $size solid $color;
+    @if $dir == "up" {
+        border-left: $slopedB;
+        border-right: $slopedB;
+        border-bottom: $straightB;
+    } @else if $dir == "right" {
+        border-top: $slopedB;
+        border-bottom: $slopedB;
+        border-left: $straightB;
+    } @else if $dir == "down" {
+        border-left: $slopedB;
+        border-right: $slopedB;
+        border-top: $straightB;
+    } @else {
+        border-top: $slopedB;
+        border-bottom: $slopedB;
+        border-right: $straightB;
+    }
 }
 
 @mixin bgDiagonalStripes($c: yellow, $a: 0.1, $d: 40px) {
-	@include background-image(linear-gradient(-45deg,
-		rgba($c, $a) 25%, transparent 25%,
-		transparent 50%, rgba($c, $a) 50%,
-		rgba($c, $a) 75%, transparent 75%,
-		transparent 100%
-	));
-	background-repeat: repeat;
-	background-size: $d $d;
+    @include background-image(linear-gradient(-45deg,
+        rgba($c, $a) 25%, transparent 25%,
+        transparent 50%, rgba($c, $a) 50%,
+        rgba($c, $a) 75%, transparent 75%,
+        transparent 100%
+    ));
+    background-repeat: repeat;
+    background-size: $d $d;
 }
 
 @mixin bgTicks($c: $colorBodyFg, $repeatDir: 'x') {
-	$deg: 90deg;
-	@if ($repeatDir != 'x') {
-		$deg: 0deg;
-		$repeatDir: repeat-y;
-	} @else {
-		$repeatDir: repeat-x;
-	}
+    $deg: 90deg;
+    @if ($repeatDir != 'x') {
+        $deg: 0deg;
+        $repeatDir: repeat-y;
+    } @else {
+        $repeatDir: repeat-x;
+    }
 
-	@include background-image(linear-gradient($deg,
-		$c 1px, transparent 1px,
-		transparent 100%
-	));
-	background-repeat: $repeatDir;
+    @include background-image(linear-gradient($deg,
+        $c 1px, transparent 1px,
+        transparent 100%
+    ));
+    background-repeat: $repeatDir;
 }
 
 @mixin containerSubtle($bg: $colorBodyBg, $fg: $colorBodyFg, $hover: false) {
-	$ltnRatio: 7%;
-	$gradRatio: 5%;
-	$hovRatio: 7%;
-	$bgBase: lighten($bg, $ltnRatio);
-	$fgBase: lighten($fg, $ltnRatio);
-	$gradC1: lighten($bgBase, $gradRatio);
-	$gradC2: $bgBase;
-	$cInvokeBase: lighten($gradC1, $ltnRatio*2);
+    $ltnRatio: 7%;
+    $gradRatio: 5%;
+    $hovRatio: 7%;
+    $bgBase: lighten($bg, $ltnRatio);
+    $fgBase: lighten($fg, $ltnRatio);
+    $gradC1: lighten($bgBase, $gradRatio);
+    $gradC2: $bgBase;
+    $cInvokeBase: lighten($gradC1, $ltnRatio*2);
 
-	@include background-image(linear-gradient($gradC1, $gradC2));
-	@include border-radius($controlCr);
-	@include box-sizing(border-box);
-	@include boxShdwSubtle();
-	border: none;
-	border-top: 1px solid lighten($gradC1, 2%);
-	color: $fg;
-	display: inline-block;
-	@if $hover == true {
-		&:not(.disabled):hover {
-			@include background-image(linear-gradient(lighten($gradC1, $hovRatio), lighten($gradC2, $hovRatio)));
-			color: lighten($fgBase, $hovRatio);
-			&.btn-menu .invoke-menu {
-				color: lighten($cInvokeBase, $hovRatio);
-			}
-		}
-	}
-	&.btn-menu .invoke-menu {
-		color: $cInvokeBase;
-	}
+    @include background-image(linear-gradient($gradC1, $gradC2));
+    @include border-radius($controlCr);
+    @include box-sizing(border-box);
+    @include boxShdwSubtle();
+    border: none;
+    border-top: 1px solid lighten($gradC1, 2%);
+    color: $fg;
+    display: inline-block;
+    @if $hover == true {
+        &:not(.disabled):hover {
+            @include background-image(linear-gradient(lighten($gradC1, $hovRatio), lighten($gradC2, $hovRatio)));
+            color: lighten($fgBase, $hovRatio);
+            &.btn-menu .invoke-menu {
+                color: lighten($cInvokeBase, $hovRatio);
+            }
+        }
+    }
+    &.btn-menu .invoke-menu {
+        color: $cInvokeBase;
+    }
 }
 
 @mixin sliderTrack($bg: $scrollbarTrackColorBg) {
@@ -184,45 +188,45 @@
 }
 
 @mixin controlGrippy($b, $direction: horizontal, $w: 1px, $style: dotted) {
-	&:before {
-		@include trans-prop-nice("border-color",0.75s);
-		content: '';
-		display: block;
-		height: auto;
-		pointer-events: none;
-		position: absolute;
-		z-index: 2;
+    &:before {
+        @include trans-prop-nice("border-color", 0.75s);
+        content: '';
+        display: block;
+        height: auto;
+        pointer-events: none;
+        position: absolute;
+        z-index: 2;
 
-		@if $direction == "horizontal" {
-			border-top: $w $style darken($b, 15%);
-			top: 2px;
-			left: 5px;
-			right: 5px;
+        @if $direction == "horizontal" {
+            border-top: $w $style darken($b, 15%);
+            top: 2px;
+            left: 5px;
+            right: 5px;
 
-		} @else if $direction == "vertical" {
-			border-left: $w $style darken($b, 15%);
-			left: 2px;
-			bottom: 5px;
-			top: 5px;
-		}
-	}
-	&:not(.disabled):hover:before {
-		@include trans-prop-nice("border-color",50ms);
-		border-color: $colorKey;
-	}
+        } @else if $direction == "vertical" {
+            border-left: $w $style darken($b, 15%);
+            left: 2px;
+            bottom: 5px;
+            top: 5px;
+        }
+    }
+    &:not(.disabled):hover:before {
+        @include trans-prop-nice("border-color", 50ms);
+        border-color: $colorKey;
+    }
 }
 
 @mixin btnSubtle($bg: $colorBodyBg, $fg: $colorBodyFg) {
-	@include containerSubtle($bg, $fg, true);
+    @include containerSubtle($bg, $fg, true);
 }
 
 @mixin btnNoticeable($bg: $colorBodyBg, $fg: $colorBodyFg) {
-	// No longer should be used; use btnSubtle instead
-	//@include containerSubtle($bg, $fg, true);
-	//@include background-image(linear-gradient(lighten($bg, 20%), $bg));
-/*	&:not(.disabled):hover {
-		@include background-image(linear-gradient(lighten($bg, 30%), lighten($bg, 10%)));
-	}*/
+    // No longer should be used; use btnSubtle instead
+    //@include containerSubtle($bg, $fg, true);
+    //@include background-image(linear-gradient(lighten($bg, 20%), $bg));
+    /*	&:not(.disabled):hover {
+            @include background-image(linear-gradient(lighten($bg, 30%), lighten($bg, 10%)));
+        }*/
 }
 
 @mixin boxIncised($sVal: 0.6) {
@@ -238,59 +242,60 @@
 }
 
 @mixin boxShdwLarge($sVal: 0.7) {
-	@include box-shadow(rgba(black, $sVal) 0 3px 10px);
+    @include box-shadow(rgba(black, $sVal) 0 3px 10px);
 }
 
 @mixin outerGlow($color: #fff, $sVal: 0.3) {
-	@include box-shadow(rgba($color, $sVal) 0 0 30px);
+    @include box-shadow(rgba($color, $sVal) 0 0 30px);
 }
 
 @mixin linearGlow($deg: 0, $c: red, $a: 0.4) {
-    @include background-image(linear-gradient($deg, rgba($c,0), rgba($c, $a) 100%));
+    @include background-image(linear-gradient($deg, rgba($c, 0), rgba($c, $a) 100%));
 }
 
 @mixin subtleGrad($deg: 0, $c: red, $a0: 0.2, $a1: 0.3) {
-	@include background-image(linear-gradient($deg, rgba($c,$a0), rgba($c, $a1) 100%));
+    @include background-image(linear-gradient($deg, rgba($c, $a0), rgba($c, $a1) 100%));
 }
 
 @mixin txtShdwSubtle($sVal: 0.1) {
-	@include text-shadow(rgba(black, $sVal) 0 1px 2px);
+    @include text-shadow(rgba(black, $sVal) 0 1px 2px);
 }
+
 @mixin txtShdwLarge($sVal: 0.7) {
-	@include text-shadow(rgba(black, $sVal) 0 3px 7px);
+    @include text-shadow(rgba(black, $sVal) 0 3px 7px);
 }
 
 /*********************************************** FORM ELEMENTS */
 @mixin input-base($bg: $colorBodyBg, $fg: $colorBodyFg) {
-	@include appearance(none);
-	@include border-radius($controlCr);
-	@include box-sizing(border-box);
-	@include box-shadow(inset rgba(black, 0.65) 0 1px 4px);
-	//	background: lighten($bg, 20%);
-	background: rgba(#fff, 0.1);
-	border: none;
-	//border-bottom: 1px solid rgba(#fff, 0.1);
-	color: lighten($fg, 20%);
-	outline: none;
-	&.error {
-		background: rgba(red, 0.5);
-	}
+    @include appearance(none);
+    @include border-radius($controlCr);
+    @include box-sizing(border-box);
+    @include box-shadow(inset rgba(black, 0.65) 0 1px 4px);
+    //	background: lighten($bg, 20%);
+    background: rgba(#fff, 0.1);
+    border: none;
+    //border-bottom: 1px solid rgba(#fff, 0.1);
+    color: lighten($fg, 20%);
+    outline: none;
+    &.error {
+        background: rgba(red, 0.5);
+    }
 }
 
 @mixin nice-input($bg: $colorBodyBg, $fg: $colorBodyFg) {
-	@include input-base($bg, $fg);
-	padding: 0 $interiorMarginSm;
+    @include input-base($bg, $fg);
+    padding: 0 $interiorMarginSm;
 }
 
 @mixin nice-textarea($bg: $colorBodyBg, $fg: $colorBodyFg) {
-	@include input-base($bg, $fg);
-	padding: $interiorMargin;
+    @include input-base($bg, $fg);
+    padding: $interiorMargin;
 }
 
 @mixin subdued-input($bg: $colorBodyBg, $fg: $colorBodyFg) {
-	@include nice-input($bg, $fg);
-	background: lighten($bg, 3%);
-	border-bottom: 1px solid lighten($bg, 10%);
+    @include nice-input($bg, $fg);
+    background: lighten($bg, 3%);
+    border-bottom: 1px solid lighten($bg, 10%);
 }
 
 /*
@@ -308,24 +313,30 @@
     padding: 0;
     li {
         list-style-type: none;
-        margin:0;
+        margin: 0;
         padding: 0;
     }
 }
 
-@mixin vertical-align {
-	/* This doesn't work on an element inside an element with absolute positioning that has height: auto */
-	position: relative;
-	top: 50%;
-	-webkit-transform: translateY(-50%);
-	-ms-transform: translateY(-50%);
-	transform: translateY(-50%);
+@mixin verticalCenter {
+    /* This doesn't work on an element inside an element with absolute positioning that has height: auto */
+    //position: relative;
+    top: 50%;
+    -webkit-transform: translateY(-50%);
+    -ms-transform: translateY(-50%);
+    transform: translateY(-50%);
+}
+
+@mixin verticalCenterBlock($holderH, $itemH) {
+    top: floor(($holderH - $itemH) / 2) !important;
+    bottom: auto;
+    height: $itemH;
 }
 
 @mixin ellipsize() {
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
 }
 
 @mixin scrollH($showBar: auto) {
@@ -339,21 +350,21 @@
 }
 
 @mixin wait-spinner($b: 5px, $c: $colorAlt1) {
-	display: block;
-	position: absolute;
-	-webkit-animation: rotation .6s infinite linear;
-	-moz-animation: rotation .6s infinite linear;
-	-o-animation: rotation .6s infinite linear;
-	animation: rotation .6s infinite linear;
-	border-color: rgba($c, 0.25);
-	border-top-color: rgba($c, 1.0);
-	border-style: solid;
-	border-width: $b;
-	border-radius: 100%;
+    display: block;
+    position: absolute;
+    -webkit-animation: rotation .6s infinite linear;
+    -moz-animation: rotation .6s infinite linear;
+    -o-animation: rotation .6s infinite linear;
+    animation: rotation .6s infinite linear;
+    border-color: rgba($c, 0.25);
+    border-top-color: rgba($c, 1.0);
+    border-style: solid;
+    border-width: $b;
+    border-radius: 100%;
 }
 
 @mixin test($c: #ffcc00, $a: 0.2) {
-	background-color: rgba($c, $a);
+    background-color: rgba($c, $a);
 }
 
 @mixin testObj($w: 2000px, $h: 1000px, $c: black, $a: 0.1) {
@@ -374,6 +385,6 @@
 }
 
 @mixin s-stale($a: 0.5) {
-	color: rgba($colorTelemFresh, $a) !important;
-	font-style: italic;
+    color: rgba($colorTelemFresh, $a) !important;
+    font-style: italic;
 }
\ No newline at end of file
diff --git a/platform/commonUI/general/res/sass/controls/_controls.scss b/platform/commonUI/general/res/sass/controls/_controls.scss
index 3f15a69491..ce91bbe16d 100644
--- a/platform/commonUI/general/res/sass/controls/_controls.scss
+++ b/platform/commonUI/general/res/sass/controls/_controls.scss
@@ -194,7 +194,6 @@
 label.checkbox.custom {
 	$bg: lighten($colorBodyBg, $ltGamma);
 	$d: $formRowCtrlsH;
-	//	@include vertical-align();
 	cursor: pointer;
 	display: inline-block;
 	line-height: $d;
diff --git a/platform/commonUI/general/res/sass/items/_item.scss b/platform/commonUI/general/res/sass/items/_item.scss
index 86592f77de..836f5d754c 100644
--- a/platform/commonUI/general/res/sass/items/_item.scss
+++ b/platform/commonUI/general/res/sass/items/_item.scss
@@ -44,7 +44,7 @@
             position: relative;
             &:hover .item-main {
 	            .item-type {
-		            color: $colorKey !important;
+		            color: lighten($colorKey, 10%) !important;
                     .l-icon-link {
                         color: $colorIconLink;
                     }
@@ -55,13 +55,16 @@
 	            }
             }
 	        .contents {
-		        top: $interiorMargin; right: $interiorMargin; bottom: $interiorMargin; left: $interiorMargin;
+                //@include test(red);
+                $m: $interiorMarginLg;
+		        top: $m; right: $m; bottom: $m; left: $m;
 	        }
             .bar {
                 &.top-bar.abs {
                     bottom: auto;
                     height: $ueBrowseGridItemTopBarH;
                     line-height: $ueBrowseGridItemTopBarH;
+                    text-align: right;
 	                z-index: 5;
 	                .left, .right {
 		                width: auto;
@@ -76,7 +79,6 @@
                 &.bottom-bar.abs {
                     top: auto;
                     height: $ueBrowseGridItemBottomBarH;
-	                padding: $interiorMargin;
                 }
             }
             .item-main {
@@ -89,7 +91,7 @@
                     //@include trans-prop-nice("color", $transTime);
                     @include absPosDefault($iconMargin, false);
                     //@include test(red);
-                    color: $colorItemFg;
+                    //color: $colorItemFg;
                     text-align: center;
                     font-size: $iconD * 0.95; //6em;
                     line-height: $iconD;
@@ -99,11 +101,12 @@
                     //line-height: $lh;
                     .l-icon-link {
                         // When the link icon is in the item-type icon holder
-                        color: darken($colorIconLink, 25%);
-                        height: 36px;
-                        line-height: 36px;
+                        //color: darken($colorIconLink, 25%);
+                        color: $colorIconLink;
+                        height: auto;
+                        line-height: 100%;
                         position: absolute;
-                        font-size: 32px;
+                        font-size: 0.3em;
                         left: 0px;
                         bottom: 10px;
                         z-index: 2;
@@ -123,11 +126,8 @@
             }
             .title {
 	            @include txtShdwSubtle();
+                @include ellipsize();
                 color: lighten($colorBodyFg, 20%);
-	            overflow: hidden;
-	            white-space: nowrap;
-	            text-overflow: ellipsis;
-//                font-weight: bold;
             }
             .details {
                 font-size: 0.8em;
diff --git a/platform/commonUI/general/res/sass/tree/_tree.scss b/platform/commonUI/general/res/sass/tree/_tree.scss
index def2526c61..168daad4bf 100644
--- a/platform/commonUI/general/res/sass/tree/_tree.scss
+++ b/platform/commonUI/general/res/sass/tree/_tree.scss
@@ -58,11 +58,16 @@ ul.tree {
 				left: $runningItemW;
 
 				.type-icon {
-					@include absPosDefault(0, false);
+					//@include absPosDefault(0, false);
+					$d: 16px; // 16px is crisp size
 					@include txtShdwSubtle(0.6);
+					font-size: $d;
 					color: $colorItemTreeIcon;
 					left: $interiorMargin;
-                    right: auto; width: 1em;
+					position: absolute;
+					@include verticalCenterBlock($menuLineHPx, $d);
+					line-height: 100%;
+                    right: auto; width: $d;
 
 					.icon {
 						&.l-icon-link,
@@ -81,8 +86,7 @@ ul.tree {
 							$d: 8px;
 							@include ancillaryIcon($d, $colorIconLink);
 							left: -3px;
-							bottom: 5px;
-
+							bottom: 0px;
 						}
 					}
 				}

From 67592def9029bfaf4606ac5d15b1b7403083ce34 Mon Sep 17 00:00:00 2001
From: Charles Hacskaylo <charles.f.hacskaylo@nasa.gov>
Date: Thu, 20 Aug 2015 16:11:45 -0700
Subject: [PATCH 141/209] [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 @@
     <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'>
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()}"
 	        >
-            <mct-representation                                
+            <mct-representation
                 key="'label'"
 				mct-object="domainObject"
 				ng-model="ngModel"
-				ng-click="!treeNode.checkMobile() ? ngModel.selectedObject = domainObject :
-                          toggle.toggle(); treeNode.trackExpansion()"
+				ng-click="!treeNode.checkMobile() || model.composition == undefined ?
+				ngModel.selectedObject = domainObject : toggle.toggle(); treeNode.trackExpansion()"
 				>
             </mct-representation>
             <span
diff --git a/platform/commonUI/inspect/res/templates/info-button.html b/platform/commonUI/inspect/res/templates/info-button.html
index bfc43a8fa4..f41d48262b 100644
--- a/platform/commonUI/inspect/res/templates/info-button.html
+++ b/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'>i</a>
-</div>
+<a class='ui-symbol icon mobile-info'>&#xe608;</a>
+
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(

From da8eb334e3766d2f0fb1be2d2339ec910bb7edae Mon Sep 17 00:00:00 2001
From: Charles Hacskaylo <charles.f.hacskaylo@nasa.gov>
Date: Thu, 20 Aug 2015 18:36:44 -0700
Subject: [PATCH 142/209] [Mobile] Sanding of mobile styles continues, in
 progress

open #74
CSS and markup changes for split pane holders;
drop shadow added to tree area;
Tree item cleanups;
This or earlier commit broke treeview nav action;
TO-DO: fix treeview nav action to hide menu;
---
 .../commonUI/browse/res/templates/browse.html |  23 ++--
 .../res/templates/browse/object-header.html   |   4 +-
 platform/commonUI/general/res/css/items.css   |  18 +--
 .../general/res/css/theme-espresso.css        | 105 ++++++++++-------
 platform/commonUI/general/res/css/tree.css    | 109 ++++++++----------
 .../commonUI/general/res/sass/_constants.scss |   1 +
 .../commonUI/general/res/sass/_mixins.scss    |   2 +-
 .../general/res/sass/items/_item.scss         |   4 +-
 .../general/res/sass/mobile/_constants.scss   |  10 +-
 .../general/res/sass/mobile/_layout.scss      |  58 ++++++----
 .../general/res/sass/mobile/_tree.scss        |  27 +++--
 .../res/sass/mobile/controls/_menus.scss      |   2 +-
 .../commonUI/general/res/sass/tree/_tree.scss |   3 +-
 13 files changed, 202 insertions(+), 164 deletions(-)

diff --git a/platform/commonUI/browse/res/templates/browse.html b/platform/commonUI/browse/res/templates/browse.html
index 2aadc0234e..ce7cb41cb1 100644
--- a/platform/commonUI/browse/res/templates/browse.html
+++ b/platform/commonUI/browse/res/templates/browse.html
@@ -20,30 +20,31 @@
  at runtime from the About dialog for additional information.
 -->
 
-<div content="jquery-wrapper" class="abs holder-all browse-mode" ng-controller="BrowseController">
+<div class="abs holder-all browse-mode" ng-controller="BrowseController">
     <mct-include key="'topbar-browse'"></mct-include>
     <div class="holder browse-area s-browse-area abs browse-wrapper" ng-class="treeClass ? 'browse-showtree' : 'browse-hidetree'">
         <mct-split-pane class='contents abs' anchor='left'>
             <div class='split-pane-component treeview pane mobile-pane left-menu desktop-browse'>
-                <div class='holder tree-holder abs mobile-tree-holder'>
-                    <mct-representation key="'tree'"
-                                        mct-object="domainObject"
-                                        ng-model="treeModel">
-                    </mct-representation>
-                </div>
+                <div class="holder abs l-mobile">
+                    <div class='tree-holder abs mobile-tree-holder'>
+                        <mct-representation key="'tree'"
+                                            mct-object="domainObject"
+                                            ng-model="treeModel">
+                        </mct-representation>
+                    </div>
                     <mct-representation key="'create-button'" mct-object="navigatedObject">
                     </mct-representation>
+                </div>
             </div>
 
             <mct-splitter class="mobile-hide"></mct-splitter>
                     <div class='split-pane-component items pane mobile-pane right-repr'>
-                        <div class='holder abs' id='content-area'>
+                        <div class='holder abs l-mobile' id='content-area'>
                             <mct-representation mct-object="navigatedObject" key="'browse-object'">
                             </mct-representation>
                         </div>
-                    <div class="left s-very-subtle key-properties ui-symbol mobile-menu-icon button-pos" 
-                        ng-click="treeSlide()">m</div>                        
-                    </div>   
+                    <div class="left key-properties ui-symbol icon mobile-menu-icon" ng-click="treeSlide()">m</div>
+                    </div>
         </mct-split-pane>
     </div>
     <mct-include key="'bottombar'"></mct-include>
diff --git a/platform/commonUI/browse/res/templates/browse/object-header.html b/platform/commonUI/browse/res/templates/browse/object-header.html
index 84cc087bbc..72f7b3e57f 100644
--- a/platform/commonUI/browse/res/templates/browse/object-header.html
+++ b/platform/commonUI/browse/res/templates/browse/object-header.html
@@ -22,9 +22,9 @@
 <div class='object-header object-header-mobile'>
     <span class="label s-label">
         <mct-representation class="desktop-hide" key="'back-arrow'"></mct-representation>
-        <span class='type-icon icon ui-symbol'>{{type.getGlyph()}}</span>
+        <span class='type-icon ui-symbol'>{{type.getGlyph()}}</span>
         <span ng-if="parameters.mode" class='action'>{{parameters.mode}}</span>
-        <span class='type-name mobile-important-hide'>{{type.getName()}}</span>
+        <!--span class='type-name mobile-important-hide'>{{type.getName()}}</span-->
         <span class='title-label'>{{model.name}}</span>
         <mct-representation key="'menu-arrow'" mct-object='domainObject'></mct-representation>
     </span>
diff --git a/platform/commonUI/general/res/css/items.css b/platform/commonUI/general/res/css/items.css
index af2c481a59..9ea92fa707 100644
--- a/platform/commonUI/general/res/css/items.css
+++ b/platform/commonUI/general/res/css/items.css
@@ -216,23 +216,23 @@
       bottom: 10px;
       left: 10px; }
     /* line 63, ../sass/items/_item.scss */
-    .items-holder .item.grid-item .bar.top-bar.abs {
+    .items-holder .item.grid-item .bar.top-bar {
       bottom: auto;
       height: 20px;
       line-height: 20px;
       text-align: right;
       z-index: 5; }
       /* line 69, ../sass/items/_item.scss */
-      .items-holder .item.grid-item .bar.top-bar.abs .left, .items-holder .item.grid-item .bar.top-bar.abs .right {
+      .items-holder .item.grid-item .bar.top-bar .left, .items-holder .item.grid-item .bar.top-bar .right {
         width: auto; }
         /* line 71, ../sass/items/_item.scss */
-        .items-holder .item.grid-item .bar.top-bar.abs .left .icon, .items-holder .item.grid-item .bar.top-bar.abs .right .icon {
+        .items-holder .item.grid-item .bar.top-bar .left .icon, .items-holder .item.grid-item .bar.top-bar .right .icon {
           margin-left: 3px; }
           /* line 73, ../sass/items/_item.scss */
-          .items-holder .item.grid-item .bar.top-bar.abs .left .icon.l-icon-link, .items-holder .item.grid-item .bar.top-bar.abs .right .icon.l-icon-link {
+          .items-holder .item.grid-item .bar.top-bar .left .icon.l-icon-link, .items-holder .item.grid-item .bar.top-bar .right .icon.l-icon-link {
             color: #49dedb; }
     /* line 79, ../sass/items/_item.scss */
-    .items-holder .item.grid-item .bar.bottom-bar.abs {
+    .items-holder .item.grid-item .bar.bottom-bar {
       top: auto;
       height: 30px; }
     /* line 84, ../sass/items/_item.scss */
@@ -415,12 +415,12 @@
       line-height: 50px !important; }
     /* line 82, ../sass/mobile/_item.scss */
     .items-holder .item.grid-item .bar.bottom-bar {
-      top: 7px !important;
+      top: 7px;
       bottom: auto;
       height: 35px; }
     /* line 87, ../sass/mobile/_item.scss */
     .items-holder .item.grid-item .item-main .item-type {
-      top: 10px !important;
+      top: 10px;
       bottom: auto;
       height: 30px; }
     /* line 90, ../sass/mobile/_item.scss */
@@ -435,12 +435,12 @@
       line-height: 66px !important; }
     /* line 104, ../sass/mobile/_item.scss */
     .items-holder .item.grid-item .bar.bottom-bar {
-      top: 15px !important;
+      top: 15px;
       bottom: auto;
       height: 35px; }
     /* line 109, ../sass/mobile/_item.scss */
     .items-holder .item.grid-item .item-main .item-type {
-      top: 18px !important;
+      top: 18px;
       bottom: auto;
       height: 30px; }
     /* line 112, ../sass/mobile/_item.scss */
diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index c0444d9990..27b5a11ad6 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -759,27 +759,45 @@ mct-container {
   .browse-wrapper,
   .mobile-pane {
     position: absolute;
-    left: 0;
-    top: 0;
+    top: 0 !important;
     right: 0;
-    white-space: nowrap; } }
+    bottom: 0;
+    left: 0; } }
+
+@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 35, ../sass/mobile/_layout.scss */
+  .user-environ .browse-area,
+  .user-environ .edit-area,
+  .user-environ .editor {
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 25px; } }
+
+@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 44, ../sass/mobile/_layout.scss */
+  .holder.l-mobile {
+    top: 10px !important;
+    right: 10px !important;
+    bottom: 10px !important;
+    left: 10px !important; } }
 
 @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 56, ../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 49, ../sass/mobile/_layout.scss */
+  /* line 67, ../sass/mobile/_layout.scss */
   .browse-hidetree {
     -moz-user-select: -moz-none;
     -ms-user-select: none;
     -webkit-user-select: none;
     user-select: 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), 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 60, ../sass/mobile/_layout.scss */
+  /* line 78, ../sass/mobile/_layout.scss */
   .browse-hidetree .mobile-pane.left-menu {
     -moz-transition-property: opacity;
     -o-transition-property: opacity;
@@ -799,7 +817,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 73, ../sass/mobile/_layout.scss */
+  /* line 91, ../sass/mobile/_layout.scss */
   .browse-hidetree .mobile-pane.right-repr {
     -moz-transition-duration: 0.35s;
     -o-transition-duration: 0.35s;
@@ -810,19 +828,19 @@ mct-container {
     left: auto !important;
     width: 100% !important; } }
 
-/* line 82, ../sass/mobile/_layout.scss */
+/* line 100, ../sass/mobile/_layout.scss */
 .mobile-tree-holder {
   top: 30px; }
 
 @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 91, ../sass/mobile/_layout.scss */
+  /* line 109, ../sass/mobile/_layout.scss */
   .browse-showtree {
     -moz-user-select: -moz-none;
     -ms-user-select: none;
     -webkit-user-select: none;
     user-select: 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), 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 102, ../sass/mobile/_layout.scss */
+  /* line 120, ../sass/mobile/_layout.scss */
   .browse-showtree .mobile-pane.left-menu {
     -moz-transition-property: opacity;
     -o-transition-property: opacity;
@@ -836,27 +854,32 @@ mct-container {
     -o-transition-timing-function: ease-in-out;
     -webkit-transition-timing-function: ease-in-out;
     transition-timing-function: ease-in-out;
+    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuNSIgeDI9IjEuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSI5OCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC4wIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuMyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
+    background-size: 100%;
+    background-image: -moz-linear-gradient(0deg, rgba(0, 0, 0, 0) 98%, rgba(0, 0, 0, 0.3) 100%);
+    background-image: -webkit-linear-gradient(0deg, rgba(0, 0, 0, 0) 98%, rgba(0, 0, 0, 0.3) 100%);
+    background-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 98%, rgba(0, 0, 0, 0.3) 100%);
     opacity: 1;
     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 102, ../sass/mobile/_layout.scss */
+  /* line 120, ../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 102, ../sass/mobile/_layout.scss */
+  /* line 120, ../sass/mobile/_layout.scss */
   .browse-showtree .mobile-pane.left-menu {
-    right: 66% !important; } }
+    right: 60% !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 102, ../sass/mobile/_layout.scss */
+  /* line 120, ../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 102, ../sass/mobile/_layout.scss */
+  /* line 120, ../sass/mobile/_layout.scss */
   .browse-showtree .mobile-pane.left-menu {
-    right: 78% !important; } }
+    right: 70% !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 126, ../sass/mobile/_layout.scss */
+  /* line 144, ../sass/mobile/_layout.scss */
   .browse-showtree .mobile-pane.right-repr {
     -moz-transition-duration: 0.35s;
     -o-transition-duration: 0.35s;
@@ -866,53 +889,56 @@ 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 126, ../sass/mobile/_layout.scss */
+  /* line 144, ../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 126, ../sass/mobile/_layout.scss */
+  /* line 144, ../sass/mobile/_layout.scss */
   .browse-showtree .mobile-pane.right-repr {
-    width: 66% !important; } }
+    width: 60% !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 126, ../sass/mobile/_layout.scss */
+  /* line 144, ../sass/mobile/_layout.scss */
   .browse-showtree .mobile-pane.right-repr {
+    background-color: rgba(0, 128, 0, 0.2);
     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 126, ../sass/mobile/_layout.scss */
+  /* line 144, ../sass/mobile/_layout.scss */
   .browse-showtree .mobile-pane.right-repr {
-    width: 78% !important; } }
+    background-color: rgba(255, 165, 0, 0.2);
+    width: 70% !important; } }
+
+/* line 168, ../sass/mobile/_layout.scss */
+.mobile-menu-icon {
+  position: absolute;
+  top: 10px;
+  left: 10px; }
 
 @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 149, ../sass/mobile/_layout.scss */
-  .button-pos {
-    position: absolute; } }
-
-@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 158, ../sass/mobile/_layout.scss */
+  /* line 176, ../sass/mobile/_layout.scss */
   .object-header {
     position: relative;
     left: 44px; }
-    /* line 163, ../sass/mobile/_layout.scss */
+    /* line 181, ../sass/mobile/_layout.scss */
     .object-header .label .context-available {
       opacity: 1 !important; } }
 
 @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-  /* line 170, ../sass/mobile/_layout.scss */
+  /* line 188, ../sass/mobile/_layout.scss */
   .desktop-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), 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 177, ../sass/mobile/_layout.scss */
+  /* line 195, ../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), 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 183, ../sass/mobile/_layout.scss */
+  /* line 201, ../sass/mobile/_layout.scss */
   .mobile-important-hide {
     display: none !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 189, ../sass/mobile/_layout.scss */
+  /* line 207, ../sass/mobile/_layout.scss */
   .mobile-back-hide {
     pointer-events: none;
     -moz-transition-property: opacity;
@@ -930,7 +956,7 @@ mct-container {
     opacity: 0; } }
 
 @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 198, ../sass/mobile/_layout.scss */
+  /* line 216, ../sass/mobile/_layout.scss */
   .mobile-back-unhide {
     pointer-events: all;
     -moz-transition-property: opacity;
@@ -948,17 +974,17 @@ mct-container {
     opacity: 1; } }
 
 @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 207, ../sass/mobile/_layout.scss */
+  /* line 225, ../sass/mobile/_layout.scss */
   .phone-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), 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 213, ../sass/mobile/_layout.scss */
+  /* line 231, ../sass/mobile/_layout.scss */
   .tree-holder {
     overflow-x: hidden !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 218, ../sass/mobile/_layout.scss */
+  /* line 236, ../sass/mobile/_layout.scss */
   .mobile-disable-select {
     -moz-user-select: -moz-none;
     -ms-user-select: none;
@@ -3026,8 +3052,7 @@ label.checkbox.custom {
   @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 25, ../sass/mobile/controls/_menus.scss */
     .mobile-menu-icon {
-      font-size: 21px;
-      padding-top: 1px; } }
+      font-size: 21px; } }
   @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
     /* line 25, ../sass/mobile/controls/_menus.scss */
     .mobile-menu-icon {
diff --git a/platform/commonUI/general/res/css/tree.css b/platform/commonUI/general/res/css/tree.css
index e6387a1cbe..6ddab967f0 100644
--- a/platform/commonUI/general/res/css/tree.css
+++ b/platform/commonUI/general/res/css/tree.css
@@ -163,6 +163,9 @@ ul.tree {
     position: relative; }
     /* line 28, ../sass/tree/_tree.scss */
     ul.tree li span.tree-item {
+      -moz-box-sizing: border-box;
+      -webkit-box-sizing: border-box;
+      box-sizing: border-box;
       -moz-border-radius: 2px;
       -webkit-border-radius: 2px;
       border-radius: 2px;
@@ -176,17 +179,17 @@ ul.tree {
       line-height: 1.5rem;
       margin-bottom: 3px;
       position: relative; }
-      /* line 39, ../sass/tree/_tree.scss */
+      /* line 40, ../sass/tree/_tree.scss */
       ul.tree li span.tree-item .view-control {
         display: inline-block;
         margin-left: 5px;
         font-size: 0.75em;
         width: 10px; }
         @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-          /* line 47, ../sass/tree/_tree.scss */
+          /* line 48, ../sass/tree/_tree.scss */
           ul.tree li span.tree-item .view-control:hover {
             color: #ffc700; } }
-      /* line 53, ../sass/tree/_tree.scss */
+      /* line 54, ../sass/tree/_tree.scss */
       ul.tree li span.tree-item .label {
         display: block;
         overflow: hidden;
@@ -198,25 +201,25 @@ ul.tree {
         width: auto;
         height: auto;
         left: 15px; }
-        /* line 60, ../sass/tree/_tree.scss */
+        /* line 61, ../sass/tree/_tree.scss */
         ul.tree li span.tree-item .label .type-icon {
           text-shadow: rgba(0, 0, 0, 0.6) 0 1px 2px;
           font-size: 16px;
           color: #0099cc;
           left: 5px;
           position: absolute;
-          top: 4px !important;
+          top: 4px;
           bottom: auto;
           height: 16px;
           line-height: 100%;
           right: auto;
           width: 16px; }
-          /* line 73, ../sass/tree/_tree.scss */
+          /* line 74, ../sass/tree/_tree.scss */
           ul.tree li span.tree-item .label .type-icon .icon.l-icon-link, ul.tree li span.tree-item .label .type-icon .icon.l-icon-alert {
             text-shadow: black 0 1px 2px;
             position: absolute;
             z-index: 2; }
-          /* line 79, ../sass/tree/_tree.scss */
+          /* line 80, ../sass/tree/_tree.scss */
           ul.tree li span.tree-item .label .type-icon .icon.l-icon-alert {
             color: #ff3c00;
             font-size: 8px;
@@ -225,7 +228,7 @@ ul.tree {
             width: 8px;
             top: 1px;
             right: -2px; }
-          /* line 85, ../sass/tree/_tree.scss */
+          /* line 86, ../sass/tree/_tree.scss */
           ul.tree li span.tree-item .label .type-icon .icon.l-icon-link {
             color: #49dedb;
             font-size: 8px;
@@ -234,7 +237,7 @@ ul.tree {
             width: 8px;
             left: -3px;
             bottom: 0px; }
-        /* line 93, ../sass/tree/_tree.scss */
+        /* line 94, ../sass/tree/_tree.scss */
         ul.tree li span.tree-item .label .title-label {
           overflow: hidden;
           position: absolute;
@@ -249,53 +252,53 @@ ul.tree {
           overflow: hidden;
           text-overflow: ellipsis;
           white-space: nowrap; }
-      /* line 104, ../sass/tree/_tree.scss */
+      /* line 105, ../sass/tree/_tree.scss */
       ul.tree li span.tree-item.loading {
         pointer-events: none; }
-        /* line 106, ../sass/tree/_tree.scss */
+        /* line 107, ../sass/tree/_tree.scss */
         ul.tree li span.tree-item.loading .label {
           opacity: 0.5; }
-          /* line 108, ../sass/tree/_tree.scss */
+          /* line 109, ../sass/tree/_tree.scss */
           ul.tree li span.tree-item.loading .label .title-label {
             font-style: italic; }
-        /* line 112, ../sass/tree/_tree.scss */
+        /* line 113, ../sass/tree/_tree.scss */
         ul.tree li span.tree-item.loading .wait-spinner {
           margin-left: 14px; }
-      /* line 117, ../sass/tree/_tree.scss */
+      /* line 118, ../sass/tree/_tree.scss */
       ul.tree li span.tree-item.selected {
         background: #005177;
         color: #fff; }
-        /* line 121, ../sass/tree/_tree.scss */
+        /* line 122, ../sass/tree/_tree.scss */
         ul.tree li span.tree-item.selected .view-control {
           color: #0099cc; }
-        /* line 124, ../sass/tree/_tree.scss */
+        /* line 125, ../sass/tree/_tree.scss */
         ul.tree li span.tree-item.selected .label .type-icon {
           color: #fff; }
       @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-        /* line 132, ../sass/tree/_tree.scss */
+        /* line 133, ../sass/tree/_tree.scss */
         ul.tree li span.tree-item:not(.selected):hover {
           background: #404040;
           color: #cccccc; }
-          /* line 135, ../sass/tree/_tree.scss */
+          /* line 136, ../sass/tree/_tree.scss */
           ul.tree li span.tree-item:not(.selected):hover .context-trigger {
             display: block; }
-          /* line 138, ../sass/tree/_tree.scss */
+          /* line 139, ../sass/tree/_tree.scss */
           ul.tree li span.tree-item:not(.selected):hover .icon {
             color: #33ccff; } }
-      /* line 145, ../sass/tree/_tree.scss */
+      /* line 146, ../sass/tree/_tree.scss */
       ul.tree li span.tree-item:not(.loading) {
         cursor: pointer; }
-      /* line 149, ../sass/tree/_tree.scss */
+      /* line 150, ../sass/tree/_tree.scss */
       ul.tree li span.tree-item .context-trigger {
         top: -1px;
         position: absolute;
         right: 3px; }
-        /* line 155, ../sass/tree/_tree.scss */
+        /* line 156, ../sass/tree/_tree.scss */
         ul.tree li span.tree-item .context-trigger .invoke-menu {
           font-size: 0.75em;
           height: 0.9rem;
           line-height: 0.9rem; }
-  /* line 164, ../sass/tree/_tree.scss */
+  /* line 165, ../sass/tree/_tree.scss */
   ul.tree ul.tree {
     margin-left: 15px; }
 
@@ -321,38 +324,28 @@ ul.tree {
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 @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 24, ../sass/mobile/_tree.scss */
-  ul.tree {
-    margin: 0;
-    padding: 0; }
-    /* line 314, ../sass/_mixins.scss */
-    ul.tree li {
-      list-style-type: none;
-      margin: 0;
-      padding: 0; }
-    /* line 29, ../sass/mobile/_tree.scss */
-    ul.tree li span.tree-item {
-      height: 38px;
-      line-height: 38px;
-      padding-top: 3px;
-      padding-bottom: 3px;
-      margin-bottom: 0px; }
-      /* line 36, ../sass/mobile/_tree.scss */
-      ul.tree li span.tree-item .view-control {
-        position: absolute;
-        right: 13px;
-        font-size: 1.8em;
-        right: 0px;
-        width: 35px;
-        text-align: center; }
-      /* line 45, ../sass/mobile/_tree.scss */
-      ul.tree li span.tree-item .label {
-        left: 3px;
-        right: 45px;
-        font-size: 1.2em; }
-        /* line 54, ../sass/mobile/_tree.scss */
-        ul.tree li span.tree-item .label .title-label {
-          right: 16.9px; }
-    /* line 63, ../sass/mobile/_tree.scss */
-    ul.tree ul.tree {
-      margin-left: 7px; } }
+  /* line 30, ../sass/mobile/_tree.scss */
+  ul.tree li span.tree-item {
+    height: 35px;
+    line-height: 35px;
+    margin-bottom: 0px; }
+    /* line 35, ../sass/mobile/_tree.scss */
+    ul.tree li span.tree-item .view-control {
+      position: absolute;
+      font-size: 1.1em;
+      right: 0px;
+      width: 30px;
+      text-align: center; }
+    /* line 44, ../sass/mobile/_tree.scss */
+    ul.tree li span.tree-item .label {
+      left: 0;
+      right: 35px;
+      font-size: 1.2em; }
+      /* line 51, ../sass/mobile/_tree.scss */
+      ul.tree li span.tree-item .label .type-icon {
+        top: 9px;
+        bottom: auto;
+        height: 16px; }
+  /* line 62, ../sass/mobile/_tree.scss */
+  ul.tree ul.tree {
+    margin-left: 20px; } }
diff --git a/platform/commonUI/general/res/sass/_constants.scss b/platform/commonUI/general/res/sass/_constants.scss
index aba4c8950d..d1f826443c 100644
--- a/platform/commonUI/general/res/sass/_constants.scss
+++ b/platform/commonUI/general/res/sass/_constants.scss
@@ -110,6 +110,7 @@ $ueBrowseGridItemBottomBarH: 30px;
 $itemPadLR: 5px;
 // Tree
 $treeVCW: 10px;
+$treeTypeIconH: 16px;
 $treeTypeIconW: 20px;
 $treeContextTriggerW: 20px;
 $colorItemTreeIcon: $colorKey;
diff --git a/platform/commonUI/general/res/sass/_mixins.scss b/platform/commonUI/general/res/sass/_mixins.scss
index c047c9582e..f605476c66 100644
--- a/platform/commonUI/general/res/sass/_mixins.scss
+++ b/platform/commonUI/general/res/sass/_mixins.scss
@@ -328,7 +328,7 @@
 }
 
 @mixin verticalCenterBlock($holderH, $itemH) {
-    top: floor(($holderH - $itemH) / 2) !important;
+    top: floor(($holderH - $itemH) / 2);
     bottom: auto;
     height: $itemH;
 }
diff --git a/platform/commonUI/general/res/sass/items/_item.scss b/platform/commonUI/general/res/sass/items/_item.scss
index 836f5d754c..d9c9d8613b 100644
--- a/platform/commonUI/general/res/sass/items/_item.scss
+++ b/platform/commonUI/general/res/sass/items/_item.scss
@@ -60,7 +60,7 @@
 		        top: $m; right: $m; bottom: $m; left: $m;
 	        }
             .bar {
-                &.top-bar.abs {
+                &.top-bar {
                     bottom: auto;
                     height: $ueBrowseGridItemTopBarH;
                     line-height: $ueBrowseGridItemTopBarH;
@@ -76,7 +76,7 @@
 		                }
 	                }
                 }
-                &.bottom-bar.abs {
+                &.bottom-bar {
                     top: auto;
                     height: $ueBrowseGridItemBottomBarH;
                 }
diff --git a/platform/commonUI/general/res/sass/mobile/_constants.scss b/platform/commonUI/general/res/sass/mobile/_constants.scss
index d69084086e..9d7357126e 100644
--- a/platform/commonUI/general/res/sass/mobile/_constants.scss
+++ b/platform/commonUI/general/res/sass/mobile/_constants.scss
@@ -29,10 +29,10 @@ $phoneItemH: floor($ueBrowseGridItemLg/4);
 $tabletItemH: floor($ueBrowseGridItemLg/3);
 
 /************************** MOBILE TREE MENU DIMENSIONS */
-$mobile-treeHeight: 38px;
+$mobileTreeItemH: 35px;
 $mobile-startingTreeLeft: 3px;
-$mobile-runningTreeLeft: 7px;
-$mobile-treeRight: 13px;
+$mobileTreeItemIndent: 20px;
+$mobileTreeRightArrowW: 30px;
 
 /************************** WINDOW DIMENSIONS FOR RWD */
 $phoMaxW: 514px;
@@ -82,7 +82,7 @@ $desktopLandscape: "screen and #{$desktopLandscapeCheck}";
 
 /************************** DEVICE PARAMETERS FOR MENUS/REPRESENTATIONS */
 $phoneRepSizePortrait: 19px;
-$phoneRepSizeLandscape: 66%;
+$phoneRepSizeLandscape: 60%;
 $tabletRepSizePortrait: 500px;
-$tabletRepSizeLandscape: 78%;
+$tabletRepSizeLandscape: 70%;
 $desktopMenuSize: 25%;
diff --git a/platform/commonUI/general/res/sass/mobile/_layout.scss b/platform/commonUI/general/res/sass/mobile/_layout.scss
index 3f4fc062d3..9609ed1fdd 100644
--- a/platform/commonUI/general/res/sass/mobile/_layout.scss
+++ b/platform/commonUI/general/res/sass/mobile/_layout.scss
@@ -27,9 +27,27 @@
 .mobile-pane {
     @include phoneandtablet {
         position: absolute;
-        left: 0; top: 0;
-        right: 0;
-        white-space: nowrap;
+        top: 0 !important; right: 0; bottom: 0; left: 0;
+        //white-space: nowrap; // CH CO
+    }
+}
+
+.user-environ .browse-area,
+.user-environ .edit-area,
+.user-environ .editor {
+    @include phoneandtablet {
+        //@include test(red);
+        top: 0; left: 0; right: 0; bottom: $ueFooterH;
+    }
+}
+
+.holder.l-mobile {
+    @include phoneandtablet {
+        //@include test();
+        top: $bodyMargin !important;
+        right: $bodyMargin !important;
+        bottom: $bodyMargin !important;
+        left: $bodyMargin !important;
     }
 }
 
@@ -39,8 +57,8 @@
     @include desktop {
         min-width: 150px;
         max-width: 800px;
-        width: $desktopMenuSize;   
-    }   
+        width: $desktopMenuSize;
+    }
 }
 
 // When the tree is hidden, these are the
@@ -56,7 +74,7 @@
         @include user-select(none);
     }
     // Sets the left tree menu when the tree
-    // is hidden. 
+    // is hidden.
     .mobile-pane.left-menu {
         @include phoneandtablet {
             @include trans-prop-nice(opacity, .4s);
@@ -64,19 +82,19 @@
             right: 100% !important;
             width: auto !important;
             overflow-y: hidden;
-            overflow-x: hidden;       
+            overflow-x: hidden;
         }
     }
 
     // Sets the right represenation when
-    // the tree is hidden. 
-    .mobile-pane.right-repr {       
-        @include phoneandtablet {         
+    // the tree is hidden.
+    .mobile-pane.right-repr {
+        @include phoneandtablet {
             @include slMenuTransitions;
             left: auto !important;
             width: 100% !important;
         }
-    }    
+    }
 }
 
 .mobile-tree-holder {
@@ -86,7 +104,7 @@
 // When the tree is shown, these are
 // the classes used for the left menu
 // and the right menu (for each device &
-// orientation combination, separate 
+// orientation combination, separate
 // parameters are used)
 .browse-showtree {
     // NOTE: DISABLED SELECTION
@@ -98,10 +116,11 @@
         @include user-select(none);
     }
     // Sets the left tree menu when the tree
-    // is shown.     
+    // is shown.
     .mobile-pane.left-menu {
         @include phoneandtablet {
             @include trans-prop-nice(opacity, .4s);
+            @include background-image(linear-gradient(90deg, rgba(black, 0) 98%, rgba(black, 0.3) 100%));
             opacity: 1;
             display: block !important;
             width: auto !important;
@@ -121,8 +140,7 @@
             right: $tabletRepSizeLandscape !important;
         }
     }
-    // Sets the right represenation when
-    // the tree is shown.     
+    // Sets the right representation when the tree is shown.
     .mobile-pane.right-repr {
         @include phoneandtablet {
             @include slMenuTransitions;
@@ -137,19 +155,19 @@
             width: $phoneRepSizeLandscape !important;
         }
         @include tabletPortrait {
+            //@include test(green);
             width: $tabletRepSizePortrait !important;
         }
         @include tabletLandscape {
+            //@include test(orange);
             width: $tabletRepSizeLandscape !important;
         }
     }
 }
 
-// Button position is set as absolute with transitions
-.button-pos {
-    @include phoneandtablet {
-        position: absolute;
-    }
+.mobile-menu-icon {
+    position: absolute;
+    top: $bodyMargin; left: $bodyMargin;
 }
 
 // Object header must be moved
diff --git a/platform/commonUI/general/res/sass/mobile/_tree.scss b/platform/commonUI/general/res/sass/mobile/_tree.scss
index d7f62f16b0..6918b8f217 100644
--- a/platform/commonUI/general/res/sass/mobile/_tree.scss
+++ b/platform/commonUI/general/res/sass/mobile/_tree.scss
@@ -24,21 +24,20 @@
 ul.tree {
     // Only applies to phones and tablets
     @include phoneandtablet {
-        @include menuUlReset();
+        //@include menuUlReset();
         li {
+            //border-top: 1px solid $colorInteriorBorder; // TEMP
             span.tree-item {
                 // Adds some space to the top of each tree item
-                height: $mobile-treeHeight;
-                line-height: $mobile-treeHeight;
-                padding-top: $interiorMarginSm;
-                padding-bottom: $interiorMarginSm;
+                height: $mobileTreeItemH;
+                line-height: $mobileTreeItemH;
                 margin-bottom: 0px;
                 .view-control {
+                    //@include test(red);
                     position: absolute;
-                    right: $mobile-treeRight;
-                    font-size: 1.8em;
+                    font-size: 1.1em;
                     right: 0px;
-                    width: 35px;
+                    width: $mobileTreeRightArrowW;
                     text-align: center;
                 }                   
 
@@ -46,13 +45,13 @@ ul.tree {
                     // Designates the starting left margin
                     // (indentation) of 'My Items'
                     // Also adds right space for selection button
-                    left: $mobile-startingTreeLeft;
-                    right: 45px;
+                    left: 0;
+                    right: $mobileTreeRightArrowW + $interiorMargin; // Allows tree item name to stop prior to the arrow
                     font-size: 1.2em;
-                    // Allows tree item name to stop prior
-                    // to the arrow
+                    .type-icon {
+                        @include verticalCenterBlock($mobileTreeItemH, $treeTypeIconH);
+                    }
                     .title-label {
-                        right: $mobile-treeRight * 1.3;
                     }
                 }             
             }
@@ -61,7 +60,7 @@ ul.tree {
         // Sets the margin on the left, which causes the
         // running indentation after each folder is made
         ul.tree {
-            margin-left: $mobile-runningTreeLeft;
+            margin-left: $mobileTreeItemIndent;
         }
     }
 }
diff --git a/platform/commonUI/general/res/sass/mobile/controls/_menus.scss b/platform/commonUI/general/res/sass/mobile/controls/_menus.scss
index 40aef796ee..d738f63d4a 100644
--- a/platform/commonUI/general/res/sass/mobile/controls/_menus.scss
+++ b/platform/commonUI/general/res/sass/mobile/controls/_menus.scss
@@ -26,7 +26,7 @@
     display: inline-block;
     @include phoneandtablet {
         font-size: 21px;
-        padding-top: $imageThumbPad;
+        //padding-top: $imageThumbPad;
     }
     @include desktop {
         display: none;
diff --git a/platform/commonUI/general/res/sass/tree/_tree.scss b/platform/commonUI/general/res/sass/tree/_tree.scss
index 168daad4bf..cb0b0f1a72 100644
--- a/platform/commonUI/general/res/sass/tree/_tree.scss
+++ b/platform/commonUI/general/res/sass/tree/_tree.scss
@@ -27,6 +27,7 @@ ul.tree {
 		position: relative;
 		span.tree-item {
 			$runningItemW: 0;
+			@include box-sizing(border-box);
 			@include border-radius($basicCr);
 			@include single-transition(background-color, 0.25s);
 			display: block;
@@ -59,7 +60,7 @@ ul.tree {
 
 				.type-icon {
 					//@include absPosDefault(0, false);
-					$d: 16px; // 16px is crisp size
+					$d: $treeTypeIconH; // 16px is crisp size
 					@include txtShdwSubtle(0.6);
 					font-size: $d;
 					color: $colorItemTreeIcon;

From ee608cc4a4c842595eabb6aaacb91576a063c3ca Mon Sep 17 00:00:00 2001
From: Charles Hacskaylo <charles.f.hacskaylo@nasa.gov>
Date: Fri, 21 Aug 2015 15:09:23 -0700
Subject: [PATCH 143/209] [Mobile] IN PROGRESS: General fixes, spurred by
 mobile, for object-header

open #74
Attempting to layout using flex - not working;
See http://jsfiddle.net/charlesh88/cpf9zjts/9/ for working example;
New _flex.scss added;
This commit is changed elements that are mostly solid;
---
 .../browse/res/templates/back-arrow.html      |   2 +-
 .../browse/res/templates/browse-object.html   |   1 +
 .../res/templates/browse/object-header.html   |  11 +-
 .../general/res/css/theme-espresso.css        | 163 +++++++++++-------
 .../commonUI/general/res/sass/_global.scss    |   6 -
 platform/commonUI/general/res/sass/_main.scss |   1 +
 .../commonUI/general/res/sass/_mixins.scss    |   4 +
 .../general/res/sass/controls/_controls.scss  |  52 ++++--
 .../res/sass/user-environ/_layout.scss        |   6 +
 .../res/sass/user-environ/_top-bar.scss       |   5 -
 .../features/layout/res/templates/frame.html  |   5 +-
 11 files changed, 151 insertions(+), 105 deletions(-)

diff --git a/platform/commonUI/browse/res/templates/back-arrow.html b/platform/commonUI/browse/res/templates/back-arrow.html
index 15775fb632..086075c692 100644
--- a/platform/commonUI/browse/res/templates/back-arrow.html
+++ b/platform/commonUI/browse/res/templates/back-arrow.html
@@ -23,6 +23,6 @@
 <!-- Back Arrow Icon used on mobile-->
 <span ng-controller="BrowseController"
       ng-click='backArrow()'
-      ng-class="checkRoot(); atRoot ? 'mobile-back-hide' : 'mobile-back-unhide'">
+      ng-class="checkRoot(); atRoot ? 'hidden' : ''">
     <a class='type-icon icon ui-symbol'>{</a>
 </span>
diff --git a/platform/commonUI/browse/res/templates/browse-object.html b/platform/commonUI/browse/res/templates/browse-object.html
index 1f69f45b0a..fd26dfd2a9 100644
--- a/platform/commonUI/browse/res/templates/browse-object.html
+++ b/platform/commonUI/browse/res/templates/browse-object.html
@@ -22,6 +22,7 @@
 <span ng-controller="BrowseObjectController">
     <div class="object-browse-bar bar abs">
         <div class="items-select left abs">
+            <mct-representation key="'back-arrow'"></mct-representation>
             <mct-representation key="'object-header'" mct-object="domainObject">
             </mct-representation>
         </div>
diff --git a/platform/commonUI/browse/res/templates/browse/object-header.html b/platform/commonUI/browse/res/templates/browse/object-header.html
index 72f7b3e57f..5511725c80 100644
--- a/platform/commonUI/browse/res/templates/browse/object-header.html
+++ b/platform/commonUI/browse/res/templates/browse/object-header.html
@@ -20,12 +20,11 @@
  at runtime from the About dialog for additional information.
 -->
 <div class='object-header object-header-mobile'>
-    <span class="label s-label">
-        <mct-representation class="desktop-hide" key="'back-arrow'"></mct-representation>
-        <span class='type-icon ui-symbol'>{{type.getGlyph()}}</span>
-        <span ng-if="parameters.mode" class='action'>{{parameters.mode}}</span>
-        <!--span class='type-name mobile-important-hide'>{{type.getName()}}</span-->
-        <span class='title-label'>{{model.name}}</span>
+    <span class='type-icon ui-symbol'>{{type.getGlyph()}}</span>
+    <span ng-if="parameters.mode" class='action'>{{parameters.mode}}</span>
+    <!--span class='type-name mobile-important-hide'>{{type.getName()}}</span-->
+    <span class='title-label'>
+        {{model.name}}
         <mct-representation key="'menu-arrow'" mct-object='domainObject'></mct-representation>
     </span>
 </div>
diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index 27b5a11ad6..c842eaf8ec 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -386,16 +386,10 @@ p {
   margin-bottom: 10px; }
 
 /* line 74, ../sass/_global.scss */
-span {
-  /* 618 DEBUG
-  box-sizing: border-box;
-  */ }
-
-/* line 80, ../sass/_global.scss */
 mct-container {
   display: block; }
 
-/* line 84, ../sass/_global.scss */
+/* line 78, ../sass/_global.scss */
 .abs, .btn-menu span.l-click-area {
   position: absolute;
   top: 0;
@@ -405,51 +399,51 @@ mct-container {
   height: auto;
   width: auto; }
 
-/* line 94, ../sass/_global.scss */
+/* line 88, ../sass/_global.scss */
 .code, .codehilite {
   font-family: "Lucida Console", monospace;
   font-size: 0.7em;
   line-height: 150%;
   white-space: pre; }
 
-/* line 101, ../sass/_global.scss */
+/* line 95, ../sass/_global.scss */
 .codehilite {
   background-color: rgba(255, 255, 255, 0.1);
   padding: 1em; }
 
-/* line 107, ../sass/_global.scss */
+/* line 101, ../sass/_global.scss */
 .align-right {
   text-align: right; }
 
-/* line 111, ../sass/_global.scss */
+/* line 105, ../sass/_global.scss */
 .centered {
   text-align: center; }
 
-/* line 115, ../sass/_global.scss */
+/* line 109, ../sass/_global.scss */
 .no-margin {
   margin: 0; }
 
-/* line 119, ../sass/_global.scss */
+/* line 113, ../sass/_global.scss */
 .colorKey {
   color: #0099cc; }
 
-/* line 123, ../sass/_global.scss */
+/* line 117, ../sass/_global.scss */
 .ds {
   -moz-box-shadow: rgba(0, 0, 0, 0.7) 0 4px 10px 2px;
   -webkit-box-shadow: rgba(0, 0, 0, 0.7) 0 4px 10px 2px;
   box-shadow: rgba(0, 0, 0, 0.7) 0 4px 10px 2px; }
 
-/* line 127, ../sass/_global.scss */
+/* line 121, ../sass/_global.scss */
 .hide,
 .hidden {
   display: none !important; }
 
-/* line 133, ../sass/_global.scss */
+/* line 127, ../sass/_global.scss */
 .paused:not(.s-btn):not(.icon-btn) {
   border-color: #c56f01 !important;
   color: #c56f01 !important; }
 
-/* line 139, ../sass/_global.scss */
+/* line 133, ../sass/_global.scss */
 .sep {
   color: rgba(255, 255, 255, 0.2); }
 
@@ -702,34 +696,34 @@ mct-container {
   .pane.items .object-browse-bar .btn-menu span.right.l-click-area,
   .btn-menu .pane.items .object-browse-bar span.right.l-click-area {
     top: auto; }
-  /* line 245, ../sass/user-environ/_layout.scss */
+  /* line 251, ../sass/user-environ/_layout.scss */
   .pane.items .object-holder {
     top: 34px; }
-  /* line 249, ../sass/user-environ/_layout.scss */
+  /* line 255, ../sass/user-environ/_layout.scss */
   .pane .object-holder {
     overflow: auto; }
 
-/* line 257, ../sass/user-environ/_layout.scss */
+/* line 263, ../sass/user-environ/_layout.scss */
 .split-layout.horizontal > .pane {
   margin-top: 5px; }
-  /* line 260, ../sass/user-environ/_layout.scss */
+  /* line 266, ../sass/user-environ/_layout.scss */
   .split-layout.horizontal > .pane:first-child {
     margin-top: 0; }
-/* line 267, ../sass/user-environ/_layout.scss */
+/* line 273, ../sass/user-environ/_layout.scss */
 .split-layout.vertical > .pane {
   margin-left: 5px; }
-  /* line 270, ../sass/user-environ/_layout.scss */
+  /* line 276, ../sass/user-environ/_layout.scss */
   .split-layout.vertical > .pane > .holder {
     left: 0;
     right: 0; }
-  /* line 274, ../sass/user-environ/_layout.scss */
+  /* line 280, ../sass/user-environ/_layout.scss */
   .split-layout.vertical > .pane:first-child {
     margin-left: 0; }
-    /* line 276, ../sass/user-environ/_layout.scss */
+    /* line 282, ../sass/user-environ/_layout.scss */
     .split-layout.vertical > .pane:first-child .holder {
       right: 3px; }
 
-/* line 285, ../sass/user-environ/_layout.scss */
+/* line 291, ../sass/user-environ/_layout.scss */
 .vscroll {
   overflow-y: auto; }
 
@@ -899,12 +893,10 @@ mct-container {
 @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 144, ../sass/mobile/_layout.scss */
   .browse-showtree .mobile-pane.right-repr {
-    background-color: rgba(0, 128, 0, 0.2);
     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 144, ../sass/mobile/_layout.scss */
   .browse-showtree .mobile-pane.right-repr {
-    background-color: rgba(255, 165, 0, 0.2);
     width: 70% !important; } }
 
 /* line 168, ../sass/mobile/_layout.scss */
@@ -2560,35 +2552,49 @@ label.checkbox.custom {
 /******************************************************** OBJECT-HEADER */
 /* line 364, ../sass/controls/_controls.scss */
 .object-header {
-  display: inline-block;
-  font-size: 1em; }
-  /* line 368, ../sass/controls/_controls.scss */
-  .object-header .label .title-label {
-    color: white; }
-  /* line 371, ../sass/controls/_controls.scss */
-  .object-header .label .type-icon {
-    font-size: 120%;
-    margin-right: 5px;
+  font-size: 1em;
+  line-height: 120%; }
+  /* line 373, ../sass/controls/_controls.scss */
+  .object-header .title-label,
+  .object-header .type-icon,
+  .object-header .context-available {
+    border: 1px dotted rgba(102, 102, 255, 0.75);
     vertical-align: middle; }
-  /* line 376, ../sass/controls/_controls.scss */
-  .object-header .label .context-available {
+  /* line 379, ../sass/controls/_controls.scss */
+  .object-header > .type-icon {
+    font-size: 120%; }
+  /* line 383, ../sass/controls/_controls.scss */
+  .object-header .title-label {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    color: white;
+    padding-right: 0.75em;
+    position: relative; }
+  /* line 390, ../sass/controls/_controls.scss */
+  .object-header .context-available {
+    -moz-transition-property: opacity;
+    -o-transition-property: opacity;
+    -webkit-transition-property: opacity;
+    transition-property: opacity;
+    -moz-transition-duration: 0.25s;
+    -o-transition-duration: 0.25s;
+    -webkit-transition-duration: 0.25s;
+    transition-duration: 0.25s;
+    -moz-transition-timing-function: ease-in-out;
+    -o-transition-timing-function: ease-in-out;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-timing-function: ease-in-out;
     opacity: 0;
-    font-size: 0.8em; }
-  /* line 381, ../sass/controls/_controls.scss */
-  .object-header .label:hover .context-available {
+    font-size: 0.7em;
+    position: absolute;
+    right: 0; }
+  /* line 398, ../sass/controls/_controls.scss */
+  .object-header:hover .context-available {
     opacity: 1; }
 
-/* line 390, ../sass/controls/_controls.scss */
-.top-bar .object-header,
-.object-browse-bar .object-header {
-  font-size: 1.1em; }
-  /* line 392, ../sass/controls/_controls.scss */
-  .top-bar .object-header span,
-  .object-browse-bar .object-header span {
-    display: inline-block; }
-
 /******************************************************** SLIDERS */
-/* line 404, ../sass/controls/_controls.scss */
+/* line 420, ../sass/controls/_controls.scss */
 .slider .slot {
   -moz-border-radius: 2px;
   -webkit-border-radius: 2px;
@@ -2609,7 +2615,7 @@ label.checkbox.custom {
   right: 0;
   bottom: auto;
   left: 0; }
-/* line 415, ../sass/controls/_controls.scss */
+/* line 431, ../sass/controls/_controls.scss */
 .slider .knob {
   background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzUyNTI1MiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzQ1NDU0NSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
   background-size: 100%;
@@ -2692,12 +2698,12 @@ label.checkbox.custom {
     -webkit-transition-timing-function: ease-in-out;
     transition-timing-function: ease-in-out;
     border-color: #0099cc; }
-  /* line 426, ../sass/controls/_controls.scss */
+  /* line 442, ../sass/controls/_controls.scss */
   .slider .knob:before {
     top: 1px;
     bottom: 3px;
     left: 5px; }
-/* line 433, ../sass/controls/_controls.scss */
+/* line 449, ../sass/controls/_controls.scss */
 .slider .range {
   background: rgba(0, 153, 204, 0.6);
   cursor: ew-resize;
@@ -2708,12 +2714,12 @@ label.checkbox.custom {
   left: auto;
   height: auto;
   width: auto; }
-  /* line 443, ../sass/controls/_controls.scss */
+  /* line 459, ../sass/controls/_controls.scss */
   .slider .range:hover {
     background: rgba(0, 153, 204, 0.7); }
 
 /******************************************************** BROWSER ELEMENTS */
-/* line 451, ../sass/controls/_controls.scss */
+/* line 467, ../sass/controls/_controls.scss */
 ::-webkit-scrollbar {
   -moz-border-radius: 2px;
   -webkit-border-radius: 2px;
@@ -2730,7 +2736,7 @@ label.checkbox.custom {
   height: 10px;
   width: 10px; }
 
-/* line 457, ../sass/controls/_controls.scss */
+/* line 473, ../sass/controls/_controls.scss */
 ::-webkit-scrollbar-thumb {
   background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzY2NjY2NiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzU5NTk1OSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
   background-size: 100%;
@@ -2748,7 +2754,7 @@ label.checkbox.custom {
   -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
   box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
   border-top: 1px solid gray; }
-  /* line 464, ../sass/controls/_controls.scss */
+  /* line 480, ../sass/controls/_controls.scss */
   ::-webkit-scrollbar-thumb:hover {
     background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzgwODA4MCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzczNzM3MyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
     background-size: 100%;
@@ -2757,7 +2763,7 @@ label.checkbox.custom {
     background-image: -webkit-linear-gradient(#808080, #737373 20px);
     background-image: linear-gradient(#808080, #737373 20px); }
 
-/* line 469, ../sass/controls/_controls.scss */
+/* line 485, ../sass/controls/_controls.scss */
 ::-webkit-scrollbar-corner {
   background: rgba(0, 0, 0, 0.4); }
 
@@ -3488,6 +3494,31 @@ label.checkbox.custom {
   font-size: 0.65em;
   vertical-align: top; }
 
+/* line 2, ../sass/_flex.scss */
+.l-flex.l-flex-justify {
+  justify-content: space-between; }
+/* line 5, ../sass/_flex.scss */
+.l-flex .l-flex-row, .l-flex.l-flex-row {
+  display: flex;
+  flex-flow: row nowrap; }
+/* line 16, ../sass/_flex.scss */
+.l-flex .l-flex-max {
+  flex: 1 0 !important; }
+/* line 20, ../sass/_flex.scss */
+.l-flex .flex-ignore {
+  display: flex;
+  flex-flow: row nowrap;
+  flex: 0 1 auto; }
+
+/* line 28, ../sass/_flex.scss */
+.object-browse-bar.bar > div.abs {
+  background-color: rgba(0, 128, 0, 0.2); }
+
+/* line 33, ../sass/_flex.scss */
+.l-flex-row .title-label {
+  background-color: rgba(0, 0, 255, 0.2);
+  flex: 1 0 !important; }
+
 /*****************************************************************************
  * Open MCT Web, Copyright (c) 2014-2015, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
@@ -4544,7 +4575,7 @@ input[type="text"] {
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-/* line 27, ../sass/user-environ/_top-bar.scss */
+/* line 23, ../sass/user-environ/_top-bar.scss */
 .top-bar.browse, .top-bar.edit {
   border-bottom: 1px solid #4d4d4d;
   top: 10px;
@@ -4552,22 +4583,22 @@ input[type="text"] {
   bottom: auto;
   left: 10px;
   height: 30px; }
-/* line 37, ../sass/user-environ/_top-bar.scss */
+/* line 33, ../sass/user-environ/_top-bar.scss */
 .top-bar .title {
   color: #fff; }
-/* line 42, ../sass/user-environ/_top-bar.scss */
+/* line 37, ../sass/user-environ/_top-bar.scss */
 .top-bar .buttons-main {
   font-size: 0.8em;
   left: auto;
   text-align: right; }
-  /* line 47, ../sass/user-environ/_top-bar.scss */
+  /* line 42, ../sass/user-environ/_top-bar.scss */
   .top-bar .buttons-main .btn {
     margin-left: 5px; }
 
-/* line 55, ../sass/user-environ/_top-bar.scss */
+/* line 50, ../sass/user-environ/_top-bar.scss */
 .edit-mode .top-bar .buttons-main {
   white-space: nowrap; }
-  /* line 59, ../sass/user-environ/_top-bar.scss */
+  /* line 54, ../sass/user-environ/_top-bar.scss */
   .edit-mode .top-bar .buttons-main.abs, .edit-mode .top-bar .btn-menu span.buttons-main.l-click-area, .btn-menu .edit-mode .top-bar span.buttons-main.l-click-area {
     bottom: auto;
     left: auto; }
diff --git a/platform/commonUI/general/res/sass/_global.scss b/platform/commonUI/general/res/sass/_global.scss
index 94fe8e151c..a6b8ff63c8 100644
--- a/platform/commonUI/general/res/sass/_global.scss
+++ b/platform/commonUI/general/res/sass/_global.scss
@@ -71,12 +71,6 @@ p {
 	margin-bottom: $interiorMarginLg;
 }
 
-span {
-	/* 618 DEBUG
-	box-sizing: border-box;
-	*/
-}
-
 mct-container {
 	display: block;
 }
diff --git a/platform/commonUI/general/res/sass/_main.scss b/platform/commonUI/general/res/sass/_main.scss
index 8803074f63..d75de0c0c9 100644
--- a/platform/commonUI/general/res/sass/_main.scss
+++ b/platform/commonUI/general/res/sass/_main.scss
@@ -53,6 +53,7 @@
 @import "edit/editor";
 @import "features/imagery";
 @import "features/time-display";
+@import "flex";
 @import "forms/elems";
 @import "forms/validation";
 @import "forms/text-input";
diff --git a/platform/commonUI/general/res/sass/_mixins.scss b/platform/commonUI/general/res/sass/_mixins.scss
index f605476c66..a42a2f480d 100644
--- a/platform/commonUI/general/res/sass/_mixins.scss
+++ b/platform/commonUI/general/res/sass/_mixins.scss
@@ -367,6 +367,10 @@
     background-color: rgba($c, $a);
 }
 
+@mixin tmpBorder($c: #ffcc00, $a: 0.75) {
+    border: 1px dotted rgba($c, $a);
+}
+
 @mixin testObj($w: 2000px, $h: 1000px, $c: black, $a: 0.1) {
     &:after {
         @include box-sizing(border-box);
diff --git a/platform/commonUI/general/res/sass/controls/_controls.scss b/platform/commonUI/general/res/sass/controls/_controls.scss
index ce91bbe16d..fe6aa3b86b 100644
--- a/platform/commonUI/general/res/sass/controls/_controls.scss
+++ b/platform/commonUI/general/res/sass/controls/_controls.scss
@@ -362,25 +362,41 @@ label.checkbox.custom {
 
 /******************************************************** OBJECT-HEADER */
 .object-header {
-	display: inline-block;
+	//@include test();
 	font-size: 1em;
+	line-height: 120%;
 	.label {
-		.title-label {
-			color: lighten($colorBodyFg, 40%);
-		}
-		.type-icon {
-			font-size: 120%;
-			margin-right: $interiorMargin;
-			vertical-align: middle;
-		}
+		//display: flex;
+		//flex-direction: row;
+	}
+
+	.title-label,
+	.type-icon,
+	.context-available {
+		@include tmpBorder(#6666ff);
+		vertical-align: middle;
+	}
+	> .type-icon {
+		font-size: 120%;
+	}
+
+	.title-label {
+		@include ellipsize();
+		color: lighten($colorBodyFg, 40%);
+		padding-right: 0.75em; // For context arrow. Done with em's so pad is relative to the scale of the text.
+		position: relative;
+	}
+
+	.context-available {
+		@include trans-prop-nice(opacity, 0.25s);
+		opacity: 0;
+		font-size: 0.7em;
+		position: absolute;
+		right: 0;
+	}
+	&:hover {
 		.context-available {
-			opacity: 0;
-			font-size: 0.8em;
-		}
-		&:hover {
-			.context-available {
-				opacity: 1;
-			}
+			opacity: 1;
 		}
 	}
 }
@@ -388,9 +404,9 @@ label.checkbox.custom {
 .top-bar,
 .object-browse-bar {
 	.object-header {
-		font-size: 1.1em;
+		//font-size: 1.1em;
 		span {
-			display: inline-block;
+			//display: inline-block;
 		}
 	}
 }
diff --git a/platform/commonUI/general/res/sass/user-environ/_layout.scss b/platform/commonUI/general/res/sass/user-environ/_layout.scss
index c4f0c99b16..81faab4452 100644
--- a/platform/commonUI/general/res/sass/user-environ/_layout.scss
+++ b/platform/commonUI/general/res/sass/user-environ/_layout.scss
@@ -241,6 +241,12 @@
 	        .right.abs {
 		        top: auto;
 	        }
+            //.left.abs {
+            //    @include tmpBorder(green);
+            //}
+            //.right.abs {
+            //    @include tmpBorder(red);
+            //}
         }
         .object-holder {
             top: $ueTopBarH + $interiorMarginLg;
diff --git a/platform/commonUI/general/res/sass/user-environ/_top-bar.scss b/platform/commonUI/general/res/sass/user-environ/_top-bar.scss
index e2ee1f105c..19488e9c10 100644
--- a/platform/commonUI/general/res/sass/user-environ/_top-bar.scss
+++ b/platform/commonUI/general/res/sass/user-environ/_top-bar.scss
@@ -20,10 +20,6 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 .top-bar {
-//	$h: $ueTopBarH - 5px;
-//	background: rgba(#ff0000, 0.2);
-//	line-height: $ueTopBarBtnH;
-
     &.browse,
     &.edit {
 	    border-bottom: 1px solid $colorInteriorBorder;
@@ -36,7 +32,6 @@
 	
 	.title {
 		color: #fff;
-//		font-weight: bold;
 	}
 	
 	.buttons-main {
diff --git a/platform/features/layout/res/templates/frame.html b/platform/features/layout/res/templates/frame.html
index df4e3390ad..fccdf813bd 100644
--- a/platform/features/layout/res/templates/frame.html
+++ b/platform/features/layout/res/templates/frame.html
@@ -21,9 +21,8 @@
 -->
 <div class="frame frame-template abs">
     <div class="bar abs object-header object-top-bar">
-        <div class="title left abs">
-            <mct-representation key="'node'"
-                                mct-object="domainObject">
+        <div class="left abs">
+            <mct-representation key="'object-header'" mct-object="domainObject">
             </mct-representation>
         </div>
         <div class="btn-bar right abs">

From 039d692e4cef52acee4432ca76d9af8f57e34516 Mon Sep 17 00:00:00 2001
From: Charles Hacskaylo <charles.f.hacskaylo@nasa.gov>
Date: Fri, 21 Aug 2015 15:10:19 -0700
Subject: [PATCH 144/209] Forgot to add new .scss file

open #74
---
 platform/commonUI/general/res/sass/_flex.scss | 37 +++++++++++++++++++
 1 file changed, 37 insertions(+)
 create mode 100644 platform/commonUI/general/res/sass/_flex.scss

diff --git a/platform/commonUI/general/res/sass/_flex.scss b/platform/commonUI/general/res/sass/_flex.scss
new file mode 100644
index 0000000000..61e8007676
--- /dev/null
+++ b/platform/commonUI/general/res/sass/_flex.scss
@@ -0,0 +1,37 @@
+.l-flex {
+    &.l-flex-justify {
+        justify-content: space-between;
+    }
+    .l-flex-row,
+    &.l-flex-row {
+        display: flex;
+        flex-flow: row nowrap;
+        div, span {
+            //@include tmpBorder();
+        }
+        > div, > span {
+            //flex: 1 1 0;
+        }
+    }
+    .l-flex-max {
+        flex: 1 0 !important;
+    }
+
+    .flex-ignore {
+        display: flex;
+        flex-flow: row nowrap;
+        flex: 0 1 auto;
+    }
+}
+
+// TEMP, move out of here once working
+.object-browse-bar.bar > div.abs {
+    @include test(green);
+}
+
+
+.l-flex-row .title-label {
+    @include test(blue);
+    flex: 1 0 !important;
+}
+

From e96d3e3738fa3fe3ff05ac062aba762b0a4ead4b Mon Sep 17 00:00:00 2001
From: Charles Hacskaylo <charles.f.hacskaylo@nasa.gov>
Date: Mon, 24 Aug 2015 12:22:08 -0700
Subject: [PATCH 145/209] [Mobile] IN PROGRESS: Significant redo of
 object-header

open #74
Added .bar .l-flex using display: flex in object header;
---
 .../browse/res/templates/back-arrow.html      |   8 +-
 .../browse/res/templates/browse-object.html   |   8 +-
 .../res/templates/browse/object-header.html   |   7 +-
 .../general/res/css/theme-espresso.css        | 209 +++++++++---------
 platform/commonUI/general/res/sass/_main.scss |   2 +-
 .../general/res/sass/controls/_controls.scss  |  35 +--
 .../res/sass/user-environ/_layout.scss        |  32 ++-
 .../res/sass/user-environ/_object-browse.scss |  12 +-
 .../features/layout/res/templates/frame.html  |   6 +-
 9 files changed, 171 insertions(+), 148 deletions(-)

diff --git a/platform/commonUI/browse/res/templates/back-arrow.html b/platform/commonUI/browse/res/templates/back-arrow.html
index 086075c692..c73b4cbdb2 100644
--- a/platform/commonUI/browse/res/templates/back-arrow.html
+++ b/platform/commonUI/browse/res/templates/back-arrow.html
@@ -21,8 +21,8 @@
 -->
 
 <!-- Back Arrow Icon used on mobile-->
-<span ng-controller="BrowseController"
+<a ng-controller="BrowseController"
+      class='type-icon icon ui-symbol s-back'
       ng-click='backArrow()'
-      ng-class="checkRoot(); atRoot ? 'hidden' : ''">
-    <a class='type-icon icon ui-symbol'>{</a>
-</span>
+      ng-class="checkRoot(); atRoot ? 'hidden' : ''">{
+</a>
diff --git a/platform/commonUI/browse/res/templates/browse-object.html b/platform/commonUI/browse/res/templates/browse-object.html
index fd26dfd2a9..90b3c11504 100644
--- a/platform/commonUI/browse/res/templates/browse-object.html
+++ b/platform/commonUI/browse/res/templates/browse-object.html
@@ -20,14 +20,14 @@
  at runtime from the About dialog for additional information.
 -->
 <span ng-controller="BrowseObjectController">
-    <div class="object-browse-bar bar abs">
-        <div class="items-select left abs">
-            <mct-representation key="'back-arrow'"></mct-representation>
+    <div class="object-browse-bar bar l-flex">
+        <div class="items-select left">
+            <mct-representation key="'back-arrow'" class="l-back"></mct-representation>
             <mct-representation key="'object-header'" mct-object="domainObject">
             </mct-representation>
         </div>
         <!-- Temporarily, on mobile, the button bar is hidden-->
-        <div class="btn-bar right abs mobile-hide">
+        <div class="btn-bar right mobile-hide">
             <mct-representation key="'action-group'"
                                 mct-object="domainObject"
                                 parameters="{ category: 'view-control' }">
diff --git a/platform/commonUI/browse/res/templates/browse/object-header.html b/platform/commonUI/browse/res/templates/browse/object-header.html
index 5511725c80..f1667f5816 100644
--- a/platform/commonUI/browse/res/templates/browse/object-header.html
+++ b/platform/commonUI/browse/res/templates/browse/object-header.html
@@ -21,10 +21,11 @@
 -->
 <div class='object-header object-header-mobile'>
     <span class='type-icon ui-symbol'>{{type.getGlyph()}}</span>
-    <span ng-if="parameters.mode" class='action'>{{parameters.mode}}</span>
+
     <!--span class='type-name mobile-important-hide'>{{type.getName()}}</span-->
-    <span class='title-label'>
-        {{model.name}}
+    <span class="l-elem-wrapper">
+        <span ng-if="parameters.mode" class='action'>{{parameters.mode}}</span>
+        <span class='title-label'>{{model.name}}</span>
         <mct-representation key="'menu-arrow'" mct-object='domainObject'></mct-representation>
     </span>
 </div>
diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index c842eaf8ec..6d3f9a5442 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -542,23 +542,34 @@ mct-container {
 .bar.abs, .btn-menu span.bar.l-click-area {
   text-wrap: none;
   white-space: nowrap; }
-/* line 74, ../sass/user-environ/_layout.scss */
-.bar.left,
-.bar .left {
-  width: 45% !important;
-  right: auto !important; }
-/* line 79, ../sass/user-environ/_layout.scss */
-.bar.right,
-.bar .right {
-  width: 45% !important;
-  left: auto !important;
-  text-align: right; }
-  /* line 84, ../sass/user-environ/_layout.scss */
-  .bar.right .icon.major,
-  .bar .right .icon.major {
-    margin-left: 15px; }
+  /* line 73, ../sass/user-environ/_layout.scss */
+  .bar.abs.left, .btn-menu span.bar.left.l-click-area,
+  .bar.abs .left,
+  .btn-menu span.bar.l-click-area .left {
+    width: 45%;
+    right: auto; }
+  /* line 78, ../sass/user-environ/_layout.scss */
+  .bar.abs.right, .btn-menu span.bar.right.l-click-area,
+  .bar.abs .right,
+  .btn-menu span.bar.l-click-area .right {
+    width: 45%;
+    left: auto;
+    text-align: right; }
+    /* line 83, ../sass/user-environ/_layout.scss */
+    .bar.abs.right .icon.major, .btn-menu span.bar.right.l-click-area .icon.major,
+    .bar.abs .right .icon.major,
+    .btn-menu span.bar.l-click-area .right .icon.major {
+      margin-left: 15px; }
+/* line 88, ../sass/user-environ/_layout.scss */
+.bar.l-flex {
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: stretch; }
+  /* line 92, ../sass/user-environ/_layout.scss */
+  .bar.l-flex .left {
+    flex: 1 1 auto; }
 
-/* line 91, ../sass/user-environ/_layout.scss */
+/* line 99, ../sass/user-environ/_layout.scss */
 .user-environ .browse-area,
 .user-environ .edit-area,
 .user-environ .editor {
@@ -566,23 +577,23 @@ mct-container {
   right: 10px;
   bottom: 35px;
   left: 10px; }
-/* line 102, ../sass/user-environ/_layout.scss */
+/* line 110, ../sass/user-environ/_layout.scss */
 .user-environ .browse-area > .contents,
 .user-environ .edit-area > .contents {
   left: 0;
   right: 0; }
-/* line 108, ../sass/user-environ/_layout.scss */
+/* line 116, ../sass/user-environ/_layout.scss */
 .user-environ .edit-area {
   top: 45px; }
-  /* line 111, ../sass/user-environ/_layout.scss */
+  /* line 119, ../sass/user-environ/_layout.scss */
   .user-environ .edit-area .tool-bar {
     bottom: auto;
     height: 30px;
     line-height: 25px; }
-  /* line 116, ../sass/user-environ/_layout.scss */
+  /* line 124, ../sass/user-environ/_layout.scss */
   .user-environ .edit-area .work-area {
     top: 40px; }
-/* line 121, ../sass/user-environ/_layout.scss */
+/* line 129, ../sass/user-environ/_layout.scss */
 .user-environ .bottom-bar {
   overflow: hidden;
   position: absolute;
@@ -594,20 +605,20 @@ mct-container {
   height: auto;
   top: auto;
   height: 25px; }
-  /* line 126, ../sass/user-environ/_layout.scss */
+  /* line 134, ../sass/user-environ/_layout.scss */
   .user-environ .bottom-bar .status-holder {
     z-index: 1; }
-  /* line 130, ../sass/user-environ/_layout.scss */
+  /* line 138, ../sass/user-environ/_layout.scss */
   .user-environ .bottom-bar .app-logo {
     left: auto;
     width: 105px;
     z-index: 2; }
 
-/* line 138, ../sass/user-environ/_layout.scss */
+/* line 146, ../sass/user-environ/_layout.scss */
 .cols {
   overflow: hidden;
   *zoom: 1; }
-  /* line 140, ../sass/user-environ/_layout.scss */
+  /* line 148, ../sass/user-environ/_layout.scss */
   .cols .col {
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
@@ -618,112 +629,112 @@ mct-container {
     margin-left: 1.5%;
     padding-left: 5px;
     position: relative; }
-    /* line 148, ../sass/user-environ/_layout.scss */
+    /* line 156, ../sass/user-environ/_layout.scss */
     .cols .col:first-child {
       margin-left: 0;
       padding-left: 0; }
-  /* line 155, ../sass/user-environ/_layout.scss */
+  /* line 163, ../sass/user-environ/_layout.scss */
   .cols.cols-2 .col-1 {
     min-width: 250px;
     width: 48.5%; }
-  /* line 161, ../sass/user-environ/_layout.scss */
+  /* line 169, ../sass/user-environ/_layout.scss */
   .cols.cols-2-ff .col-100px {
     width: 100px; }
-  /* line 168, ../sass/user-environ/_layout.scss */
+  /* line 176, ../sass/user-environ/_layout.scss */
   .cols.cols-6 .col-1 {
     min-width: 83.33333px;
     width: 15.16667%; }
-  /* line 174, ../sass/user-environ/_layout.scss */
+  /* line 182, ../sass/user-environ/_layout.scss */
   .cols.cols-16 .col-1 {
     min-width: 31.25px;
     width: 4.75%; }
-  /* line 177, ../sass/user-environ/_layout.scss */
+  /* line 185, ../sass/user-environ/_layout.scss */
   .cols.cols-16 .col-2 {
     min-width: 62.5px;
     width: 11%; }
-  /* line 180, ../sass/user-environ/_layout.scss */
+  /* line 188, ../sass/user-environ/_layout.scss */
   .cols.cols-16 .col-7 {
     min-width: 218.75px;
     width: 42.25%; }
-  /* line 186, ../sass/user-environ/_layout.scss */
+  /* line 194, ../sass/user-environ/_layout.scss */
   .cols.cols-32 .col-2 {
     min-width: 31.25px;
     width: 4.75%; }
-  /* line 189, ../sass/user-environ/_layout.scss */
+  /* line 197, ../sass/user-environ/_layout.scss */
   .cols.cols-32 .col-15 {
     min-width: 234.375px;
     width: 45.375%; }
-  /* line 193, ../sass/user-environ/_layout.scss */
+  /* line 201, ../sass/user-environ/_layout.scss */
   .cols .l-row {
     overflow: hidden;
     *zoom: 1;
     padding: 5px 0; }
 
-/* line 201, ../sass/user-environ/_layout.scss */
+/* line 209, ../sass/user-environ/_layout.scss */
 .browse-mode .split-layout .split-pane-component.pane.left {
   min-width: 150px;
   max-width: 50%; }
 
-/* line 210, ../sass/user-environ/_layout.scss */
+/* line 218, ../sass/user-environ/_layout.scss */
 .edit-mode .split-layout .split-pane-component.pane.right {
   min-width: 150px;
   max-width: 50%; }
-  /* line 213, ../sass/user-environ/_layout.scss */
+  /* line 221, ../sass/user-environ/_layout.scss */
   .edit-mode .split-layout .split-pane-component.pane.right .split-pane-component.pane.bottom {
     min-height: 50px;
     max-height: 80%; }
 
-/* line 221, ../sass/user-environ/_layout.scss */
+/* line 229, ../sass/user-environ/_layout.scss */
 .pane {
   position: absolute; }
-  /* line 224, ../sass/user-environ/_layout.scss */
+  /* line 232, ../sass/user-environ/_layout.scss */
   .pane.treeview.left .create-btn-holder {
     bottom: auto;
     top: 0;
     height: 24px; }
-    /* line 227, ../sass/user-environ/_layout.scss */
+    /* line 235, ../sass/user-environ/_layout.scss */
     .pane.treeview.left .create-btn-holder .wrapper.menu-element {
       position: absolute;
       bottom: 5px; }
-  /* line 232, ../sass/user-environ/_layout.scss */
+  /* line 240, ../sass/user-environ/_layout.scss */
   .pane.treeview.left .tree-holder {
     overflow: auto;
     top: 34px;
     padding-right: 5px; }
-  /* line 240, ../sass/user-environ/_layout.scss */
+  /* line 248, ../sass/user-environ/_layout.scss */
   .pane.items .object-browse-bar .left.abs, .pane.items .object-browse-bar .btn-menu span.left.l-click-area, .btn-menu .pane.items .object-browse-bar span.left.l-click-area,
   .pane.items .object-browse-bar .right.abs,
   .pane.items .object-browse-bar .btn-menu span.right.l-click-area,
   .btn-menu .pane.items .object-browse-bar span.right.l-click-area {
     top: auto; }
-  /* line 251, ../sass/user-environ/_layout.scss */
+  /* line 259, ../sass/user-environ/_layout.scss */
   .pane.items .object-holder {
     top: 34px; }
-  /* line 255, ../sass/user-environ/_layout.scss */
+  /* line 263, ../sass/user-environ/_layout.scss */
   .pane .object-holder {
     overflow: auto; }
 
-/* line 263, ../sass/user-environ/_layout.scss */
+/* line 271, ../sass/user-environ/_layout.scss */
 .split-layout.horizontal > .pane {
   margin-top: 5px; }
-  /* line 266, ../sass/user-environ/_layout.scss */
+  /* line 274, ../sass/user-environ/_layout.scss */
   .split-layout.horizontal > .pane:first-child {
     margin-top: 0; }
-/* line 273, ../sass/user-environ/_layout.scss */
+/* line 281, ../sass/user-environ/_layout.scss */
 .split-layout.vertical > .pane {
   margin-left: 5px; }
-  /* line 276, ../sass/user-environ/_layout.scss */
+  /* line 284, ../sass/user-environ/_layout.scss */
   .split-layout.vertical > .pane > .holder {
     left: 0;
     right: 0; }
-  /* line 280, ../sass/user-environ/_layout.scss */
+  /* line 288, ../sass/user-environ/_layout.scss */
   .split-layout.vertical > .pane:first-child {
     margin-left: 0; }
-    /* line 282, ../sass/user-environ/_layout.scss */
+    /* line 290, ../sass/user-environ/_layout.scss */
     .split-layout.vertical > .pane:first-child .holder {
       right: 3px; }
 
-/* line 291, ../sass/user-environ/_layout.scss */
+/* line 299, ../sass/user-environ/_layout.scss */
 .vscroll {
   overflow-y: auto; }
 
@@ -2552,26 +2563,33 @@ label.checkbox.custom {
 /******************************************************** OBJECT-HEADER */
 /* line 364, ../sass/controls/_controls.scss */
 .object-header {
-  font-size: 1em;
-  line-height: 120%; }
+  font-size: 1em; }
   /* line 373, ../sass/controls/_controls.scss */
   .object-header .title-label,
   .object-header .type-icon,
   .object-header .context-available {
-    border: 1px dotted rgba(102, 102, 255, 0.75);
     vertical-align: middle; }
   /* line 379, ../sass/controls/_controls.scss */
   .object-header > .type-icon {
-    font-size: 120%; }
-  /* line 383, ../sass/controls/_controls.scss */
+    font-size: 120%;
+    float: left;
+    margin-right: 5px; }
+  /* line 386, ../sass/controls/_controls.scss */
+  .object-header .l-elem-wrapper {
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: flex-start; }
+  /* line 392, ../sass/controls/_controls.scss */
+  .object-header .action {
+    margin-right: 5px; }
+  /* line 396, ../sass/controls/_controls.scss */
   .object-header .title-label {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
     color: white;
-    padding-right: 0.75em;
-    position: relative; }
-  /* line 390, ../sass/controls/_controls.scss */
+    padding-right: 0.35em; }
+  /* line 403, ../sass/controls/_controls.scss */
   .object-header .context-available {
     -moz-transition-property: opacity;
     -o-transition-property: opacity;
@@ -2586,15 +2604,13 @@ label.checkbox.custom {
     -webkit-transition-timing-function: ease-in-out;
     transition-timing-function: ease-in-out;
     opacity: 0;
-    font-size: 0.7em;
-    position: absolute;
-    right: 0; }
-  /* line 398, ../sass/controls/_controls.scss */
+    font-size: 0.7em; }
+  /* line 411, ../sass/controls/_controls.scss */
   .object-header:hover .context-available {
     opacity: 1; }
 
 /******************************************************** SLIDERS */
-/* line 420, ../sass/controls/_controls.scss */
+/* line 423, ../sass/controls/_controls.scss */
 .slider .slot {
   -moz-border-radius: 2px;
   -webkit-border-radius: 2px;
@@ -2615,7 +2631,7 @@ label.checkbox.custom {
   right: 0;
   bottom: auto;
   left: 0; }
-/* line 431, ../sass/controls/_controls.scss */
+/* line 434, ../sass/controls/_controls.scss */
 .slider .knob {
   background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzUyNTI1MiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzQ1NDU0NSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
   background-size: 100%;
@@ -2698,12 +2714,12 @@ label.checkbox.custom {
     -webkit-transition-timing-function: ease-in-out;
     transition-timing-function: ease-in-out;
     border-color: #0099cc; }
-  /* line 442, ../sass/controls/_controls.scss */
+  /* line 445, ../sass/controls/_controls.scss */
   .slider .knob:before {
     top: 1px;
     bottom: 3px;
     left: 5px; }
-/* line 449, ../sass/controls/_controls.scss */
+/* line 452, ../sass/controls/_controls.scss */
 .slider .range {
   background: rgba(0, 153, 204, 0.6);
   cursor: ew-resize;
@@ -2714,12 +2730,12 @@ label.checkbox.custom {
   left: auto;
   height: auto;
   width: auto; }
-  /* line 459, ../sass/controls/_controls.scss */
+  /* line 462, ../sass/controls/_controls.scss */
   .slider .range:hover {
     background: rgba(0, 153, 204, 0.7); }
 
 /******************************************************** BROWSER ELEMENTS */
-/* line 467, ../sass/controls/_controls.scss */
+/* line 470, ../sass/controls/_controls.scss */
 ::-webkit-scrollbar {
   -moz-border-radius: 2px;
   -webkit-border-radius: 2px;
@@ -2736,7 +2752,7 @@ label.checkbox.custom {
   height: 10px;
   width: 10px; }
 
-/* line 473, ../sass/controls/_controls.scss */
+/* line 476, ../sass/controls/_controls.scss */
 ::-webkit-scrollbar-thumb {
   background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzY2NjY2NiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzU5NTk1OSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
   background-size: 100%;
@@ -2754,7 +2770,7 @@ label.checkbox.custom {
   -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
   box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
   border-top: 1px solid gray; }
-  /* line 480, ../sass/controls/_controls.scss */
+  /* line 483, ../sass/controls/_controls.scss */
   ::-webkit-scrollbar-thumb:hover {
     background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzgwODA4MCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzczNzM3MyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
     background-size: 100%;
@@ -2763,7 +2779,7 @@ label.checkbox.custom {
     background-image: -webkit-linear-gradient(#808080, #737373 20px);
     background-image: linear-gradient(#808080, #737373 20px); }
 
-/* line 485, ../sass/controls/_controls.scss */
+/* line 488, ../sass/controls/_controls.scss */
 ::-webkit-scrollbar-corner {
   background: rgba(0, 0, 0, 0.4); }
 
@@ -3494,31 +3510,6 @@ label.checkbox.custom {
   font-size: 0.65em;
   vertical-align: top; }
 
-/* line 2, ../sass/_flex.scss */
-.l-flex.l-flex-justify {
-  justify-content: space-between; }
-/* line 5, ../sass/_flex.scss */
-.l-flex .l-flex-row, .l-flex.l-flex-row {
-  display: flex;
-  flex-flow: row nowrap; }
-/* line 16, ../sass/_flex.scss */
-.l-flex .l-flex-max {
-  flex: 1 0 !important; }
-/* line 20, ../sass/_flex.scss */
-.l-flex .flex-ignore {
-  display: flex;
-  flex-flow: row nowrap;
-  flex: 0 1 auto; }
-
-/* line 28, ../sass/_flex.scss */
-.object-browse-bar.bar > div.abs {
-  background-color: rgba(0, 128, 0, 0.2); }
-
-/* line 33, ../sass/_flex.scss */
-.l-flex-row .title-label {
-  background-color: rgba(0, 0, 255, 0.2);
-  flex: 1 0 !important; }
-
 /*****************************************************************************
  * Open MCT Web, Copyright (c) 2014-2015, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
@@ -4706,11 +4697,25 @@ input[type="text"] {
  *****************************************************************************/
 /* line 22, ../sass/user-environ/_object-browse.scss */
 .object-browse-bar {
+  overflow: hidden;
+  position: absolute;
+  top: 0px;
+  right: 0px;
+  bottom: 0px;
+  left: 0px;
+  width: auto;
+  height: auto;
   height: 24px;
-  line-height: 24px; }
-  /* line 26, ../sass/user-environ/_object-browse.scss */
-  .object-browse-bar .items-select .btn-menu {
-    margin-right: 15px; }
+  line-height: 24px;
+  white-space: nowrap; }
+  /* line 28, ../sass/user-environ/_object-browse.scss */
+  .object-browse-bar .left {
+    padding-right: 5px; }
+    /* line 30, ../sass/user-environ/_object-browse.scss */
+    .object-browse-bar .left .l-back {
+      display: inline-block;
+      float: left;
+      margin-right: 10px; }
 
 /*****************************************************************************
  * Open MCT Web, Copyright (c) 2014-2015, United States Government
diff --git a/platform/commonUI/general/res/sass/_main.scss b/platform/commonUI/general/res/sass/_main.scss
index d75de0c0c9..1073f325cc 100644
--- a/platform/commonUI/general/res/sass/_main.scss
+++ b/platform/commonUI/general/res/sass/_main.scss
@@ -53,7 +53,7 @@
 @import "edit/editor";
 @import "features/imagery";
 @import "features/time-display";
-@import "flex";
+//@import "flex";
 @import "forms/elems";
 @import "forms/validation";
 @import "forms/text-input";
diff --git a/platform/commonUI/general/res/sass/controls/_controls.scss b/platform/commonUI/general/res/sass/controls/_controls.scss
index fe6aa3b86b..61aabb1fa3 100644
--- a/platform/commonUI/general/res/sass/controls/_controls.scss
+++ b/platform/commonUI/general/res/sass/controls/_controls.scss
@@ -364,7 +364,7 @@ label.checkbox.custom {
 .object-header {
 	//@include test();
 	font-size: 1em;
-	line-height: 120%;
+	//line-height: 120%;
 	.label {
 		//display: flex;
 		//flex-direction: row;
@@ -373,26 +373,39 @@ label.checkbox.custom {
 	.title-label,
 	.type-icon,
 	.context-available {
-		@include tmpBorder(#6666ff);
+		//@include tmpBorder(#6666ff);
 		vertical-align: middle;
 	}
 	> .type-icon {
 		font-size: 120%;
+		float: left;
+		margin-right: $interiorMargin;
+	}
+
+
+	.l-elem-wrapper {
+		display: flex;
+		flex-flow: row nowrap;
+		justify-content: flex-start;
+	}
+
+	.action {
+		margin-right: $interiorMargin;
 	}
 
 	.title-label {
 		@include ellipsize();
 		color: lighten($colorBodyFg, 40%);
-		padding-right: 0.75em; // For context arrow. Done with em's so pad is relative to the scale of the text.
-		position: relative;
+		padding-right: 0.35em; // For context arrow. Done with em's so pad is relative to the scale of the text.
+		//position: relative;
 	}
 
 	.context-available {
 		@include trans-prop-nice(opacity, 0.25s);
 		opacity: 0;
 		font-size: 0.7em;
-		position: absolute;
-		right: 0;
+		//position: absolute;
+		//right: 0;
 	}
 	&:hover {
 		.context-available {
@@ -401,16 +414,6 @@ label.checkbox.custom {
 	}
 }
 
-.top-bar,
-.object-browse-bar {
-	.object-header {
-		//font-size: 1.1em;
-		span {
-			//display: inline-block;
-		}
-	}
-}
-
 /******************************************************** SLIDERS */
 
 .slider {
diff --git a/platform/commonUI/general/res/sass/user-environ/_layout.scss b/platform/commonUI/general/res/sass/user-environ/_layout.scss
index 81faab4452..7bca0d480b 100644
--- a/platform/commonUI/general/res/sass/user-environ/_layout.scss
+++ b/platform/commonUI/general/res/sass/user-environ/_layout.scss
@@ -70,19 +70,27 @@
     &.abs {
 	    text-wrap: none;
 	    white-space: nowrap;
+        &.left,
+        .left {
+            width: 45%;
+            right: auto;
+        }
+        &.right,
+        .right {
+            width: 45%;
+            left: auto;
+            text-align: right;
+            .icon.major {
+                margin-left: $interiorMargin * 3;
+            }
+        }
     }
-    &.left,
-    .left {
-        width: 45% !important;
-        right: auto !important;
-    }
-    &.right,
-    .right {
-        width: 45% !important;
-        left: auto !important;
-        text-align: right;
-        .icon.major {
-            margin-left: $interiorMargin * 3;
+    &.l-flex {
+        display: flex;
+        flex-flow: row nowrap;
+        align-items: stretch;
+        .left {
+            flex: 1 1 auto;
         }
     }
 }
diff --git a/platform/commonUI/general/res/sass/user-environ/_object-browse.scss b/platform/commonUI/general/res/sass/user-environ/_object-browse.scss
index 3ab3f8c5f7..fc1065acec 100644
--- a/platform/commonUI/general/res/sass/user-environ/_object-browse.scss
+++ b/platform/commonUI/general/res/sass/user-environ/_object-browse.scss
@@ -20,11 +20,17 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 .object-browse-bar {
+    @include absPosDefault();
     height: $ueTopBarH;
     line-height: $ueTopBarH;
-    .items-select {
-        .btn-menu {
-            margin-right: $interiorMargin * 3;
+    white-space: nowrap;
+
+    .left {
+        padding-right: $interiorMargin;
+        .l-back {
+            display: inline-block;
+            float: left;
+            margin-right: $interiorMarginLg;
         }
     }
 }
\ No newline at end of file
diff --git a/platform/features/layout/res/templates/frame.html b/platform/features/layout/res/templates/frame.html
index fccdf813bd..0643f1645b 100644
--- a/platform/features/layout/res/templates/frame.html
+++ b/platform/features/layout/res/templates/frame.html
@@ -20,12 +20,12 @@
  at runtime from the About dialog for additional information.
 -->
 <div class="frame frame-template abs">
-    <div class="bar abs object-header object-top-bar">
-        <div class="left abs">
+    <div class="bar abs l-flex object-header object-top-bar">
+        <div class="left">
             <mct-representation key="'object-header'" mct-object="domainObject">
             </mct-representation>
         </div>
-        <div class="btn-bar right abs">
+        <div class="btn-bar right">
             <mct-representation key="'switcher'"
                                 ng-model="representation"
                                 mct-object="domainObject">

From 44ed4e0e0d8032900c6601e1565253b61f031a0b Mon Sep 17 00:00:00 2001
From: Charles Hacskaylo <charles.f.hacskaylo@nasa.gov>
Date: Mon, 24 Aug 2015 12:39:50 -0700
Subject: [PATCH 146/209] [Mobile] IN PROGRESS: Minor tweak for line-height in
 top-bar

open #74
---
 .../browse/res/templates/browse/object-header.html  |  1 -
 .../commonUI/general/res/css/theme-espresso.css     | 13 +++++++------
 .../general/res/sass/user-environ/_top-bar.scss     |  4 +---
 3 files changed, 8 insertions(+), 10 deletions(-)

diff --git a/platform/commonUI/browse/res/templates/browse/object-header.html b/platform/commonUI/browse/res/templates/browse/object-header.html
index f1667f5816..a9652631d9 100644
--- a/platform/commonUI/browse/res/templates/browse/object-header.html
+++ b/platform/commonUI/browse/res/templates/browse/object-header.html
@@ -21,7 +21,6 @@
 -->
 <div class='object-header object-header-mobile'>
     <span class='type-icon ui-symbol'>{{type.getGlyph()}}</span>
-
     <!--span class='type-name mobile-important-hide'>{{type.getName()}}</span-->
     <span class="l-elem-wrapper">
         <span ng-if="parameters.mode" class='action'>{{parameters.mode}}</span>
diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index 6d3f9a5442..9605e2ee4e 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -4573,23 +4573,24 @@ input[type="text"] {
   right: 10px;
   bottom: auto;
   left: 10px;
-  height: 30px; }
-/* line 33, ../sass/user-environ/_top-bar.scss */
+  height: 30px;
+  line-height: 24px; }
+/* line 31, ../sass/user-environ/_top-bar.scss */
 .top-bar .title {
   color: #fff; }
-/* line 37, ../sass/user-environ/_top-bar.scss */
+/* line 35, ../sass/user-environ/_top-bar.scss */
 .top-bar .buttons-main {
   font-size: 0.8em;
   left: auto;
   text-align: right; }
-  /* line 42, ../sass/user-environ/_top-bar.scss */
+  /* line 40, ../sass/user-environ/_top-bar.scss */
   .top-bar .buttons-main .btn {
     margin-left: 5px; }
 
-/* line 50, ../sass/user-environ/_top-bar.scss */
+/* line 48, ../sass/user-environ/_top-bar.scss */
 .edit-mode .top-bar .buttons-main {
   white-space: nowrap; }
-  /* line 54, ../sass/user-environ/_top-bar.scss */
+  /* line 52, ../sass/user-environ/_top-bar.scss */
   .edit-mode .top-bar .buttons-main.abs, .edit-mode .top-bar .btn-menu span.buttons-main.l-click-area, .btn-menu .edit-mode .top-bar span.buttons-main.l-click-area {
     bottom: auto;
     left: auto; }
diff --git a/platform/commonUI/general/res/sass/user-environ/_top-bar.scss b/platform/commonUI/general/res/sass/user-environ/_top-bar.scss
index 19488e9c10..638edab9ec 100644
--- a/platform/commonUI/general/res/sass/user-environ/_top-bar.scss
+++ b/platform/commonUI/general/res/sass/user-environ/_top-bar.scss
@@ -25,11 +25,9 @@
 	    border-bottom: 1px solid $colorInteriorBorder;
         top: $bodyMargin; right: $bodyMargin; bottom: auto; left: $bodyMargin;
         height: $ueTopBarEditH;
+		line-height: $ueTopBarH;
     }
 	
-	.action {
-	}
-	
 	.title {
 		color: #fff;
 	}

From 76c4b96683ea5dd2e55da3c65813fff8ac3a284c Mon Sep 17 00:00:00 2001
From: Charles Hacskaylo <charles.f.hacskaylo@nasa.gov>
Date: Mon, 24 Aug 2015 15:24:35 -0700
Subject: [PATCH 147/209] [Mobile] IN PROGRESS: Menu hide/show fixes; font-size
 tweaking

open #74
Changed .right-repr to use translateX in phone portrait mode;
font-size tweaking;
Refactored css organization in mobile/_layout.scss;
---
 .../commonUI/browse/res/templates/browse.html |  15 +-
 .../general/res/css/theme-espresso.css        | 162 +++++++++---------
 platform/commonUI/general/res/css/tree.css    |  12 +-
 platform/commonUI/general/res/sass/_main.scss |   2 +-
 .../commonUI/general/res/sass/_mixins.scss    |   1 +
 .../general/res/sass/mobile/_constants.scss   |   2 +-
 .../general/res/sass/mobile/_layout.scss      |  82 +++++----
 .../general/res/sass/mobile/_tree.scss        |  13 +-
 .../res/sass/mobile/controls/_menus.scss      |   2 +-
 .../res/sass/user-environ/_object-browse.scss |   1 +
 10 files changed, 158 insertions(+), 134 deletions(-)

diff --git a/platform/commonUI/browse/res/templates/browse.html b/platform/commonUI/browse/res/templates/browse.html
index ce7cb41cb1..8bb6b7fa8e 100644
--- a/platform/commonUI/browse/res/templates/browse.html
+++ b/platform/commonUI/browse/res/templates/browse.html
@@ -38,13 +38,14 @@
             </div>
 
             <mct-splitter class="mobile-hide"></mct-splitter>
-                    <div class='split-pane-component items pane mobile-pane right-repr'>
-                        <div class='holder abs l-mobile' id='content-area'>
-                            <mct-representation mct-object="navigatedObject" key="'browse-object'">
-                            </mct-representation>
-                        </div>
-                    <div class="left key-properties ui-symbol icon mobile-menu-icon" ng-click="treeSlide()">m</div>
-                    </div>
+
+            <div class='split-pane-component items pane mobile-pane right-repr'>
+                <div class='holder abs l-mobile' id='content-area'>
+                    <mct-representation mct-object="navigatedObject" key="'browse-object'">
+                    </mct-representation>
+                </div>
+                <div class="key-properties ui-symbol icon mobile-menu-icon desktop-hide" ng-click="treeSlide()">m</div>
+            </div>
         </mct-split-pane>
     </div>
     <mct-include key="'bottombar'"></mct-include>
diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index 9605e2ee4e..1ead13f014 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -870,7 +870,7 @@ mct-container {
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) {
   /* line 120, ../sass/mobile/_layout.scss */
   .browse-showtree .mobile-pane.left-menu {
-    right: 19px !important; } }
+    right: 10% !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 120, ../sass/mobile/_layout.scss */
   .browse-showtree .mobile-pane.left-menu {
@@ -896,7 +896,8 @@ mct-container {
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) {
   /* line 144, ../sass/mobile/_layout.scss */
   .browse-showtree .mobile-pane.right-repr {
-    width: 19px !important; } }
+    left: 0 !important;
+    transform: translateX(90%); } }
 @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 144, ../sass/mobile/_layout.scss */
   .browse-showtree .mobile-pane.right-repr {
@@ -910,38 +911,39 @@ mct-container {
   .browse-showtree .mobile-pane.right-repr {
     width: 70% !important; } }
 
-/* line 168, ../sass/mobile/_layout.scss */
-.mobile-menu-icon {
-  position: absolute;
-  top: 10px;
-  left: 10px; }
-
 @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 176, ../sass/mobile/_layout.scss */
-  .object-header {
-    position: relative;
-    left: 44px; }
-    /* line 181, ../sass/mobile/_layout.scss */
-    .object-header .label .context-available {
-      opacity: 1 !important; } }
+  /* line 171, ../sass/mobile/_layout.scss */
+  .mobile-menu-icon {
+    font-size: 110%;
+    position: absolute;
+    top: 12px;
+    left: 10px; }
+
+  /* line 178, ../sass/mobile/_layout.scss */
+  .object-browse-bar {
+    display: block !important;
+    left: 35px !important; }
+    /* line 183, ../sass/mobile/_layout.scss */
+    .object-browse-bar .context-available {
+      opacity: 1 !important; }
 
-@media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
   /* line 188, ../sass/mobile/_layout.scss */
-  .desktop-hide {
-    display: none; } }
+  .tree-holder {
+    overflow-x: hidden !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 195, ../sass/mobile/_layout.scss */
-  .mobile-hide {
-    display: none; } }
+  /* line 192, ../sass/mobile/_layout.scss */
+  .mobile-disable-select {
+    -moz-user-select: -moz-none;
+    -ms-user-select: none;
+    -webkit-user-select: none;
+    user-select: 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), 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 201, ../sass/mobile/_layout.scss */
-  .mobile-important-hide {
-    display: none !important; } }
+  /* line 197, ../sass/mobile/_layout.scss */
+  .mobile-hide,
+  .mobile-hide-important {
+    display: none !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 207, ../sass/mobile/_layout.scss */
+  /* line 202, ../sass/mobile/_layout.scss */
   .mobile-back-hide {
     pointer-events: none;
     -moz-transition-property: opacity;
@@ -956,10 +958,9 @@ mct-container {
     -o-transition-timing-function: ease-in-out;
     -webkit-transition-timing-function: ease-in-out;
     transition-timing-function: ease-in-out;
-    opacity: 0; } }
+    opacity: 0; }
 
-@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 216, ../sass/mobile/_layout.scss */
+  /* line 207, ../sass/mobile/_layout.scss */
   .mobile-back-unhide {
     pointer-events: all;
     -moz-transition-property: opacity;
@@ -975,25 +976,54 @@ mct-container {
     -webkit-transition-timing-function: ease-in-out;
     transition-timing-function: ease-in-out;
     opacity: 1; } }
-
-@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 225, ../sass/mobile/_layout.scss */
-  .phone-hide {
+@media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
+  /* line 214, ../sass/mobile/_layout.scss */
+  .desktop-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), 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 231, ../sass/mobile/_layout.scss */
-  .tree-holder {
-    overflow-x: hidden !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 236, ../sass/mobile/_layout.scss */
-  .mobile-disable-select {
-    -moz-user-select: -moz-none;
-    -ms-user-select: none;
-    -webkit-user-select: none;
-    user-select: none; } }
+.mobile-back-hide {
+    @include phoneandtablet {
+        pointer-events: none;
+        @include trans-prop-nice(opacity, .4s);
+        opacity: 0;
+    }
+}
 
+
+// Hides objects on phone and tablet
+.mobile-back-unhide {
+    @include phoneandtablet {
+        pointer-events: all;
+        @include trans-prop-nice(opacity, .4s);
+        opacity: 1;
+    }
+}
+
+
+// Hides objects only on the phone
+.phone-hide {
+    @include phone {
+        display: none;
+    }
+}
+
+.tree-holder {
+    @include phoneandtablet {
+        .tree-holder {
+            overflow-x: hidden !important;
+        }
+    }
+}
+.mobile-disable-select {
+    @include phoneandtablet {
+        .mobile-disable-select {
+            @include user-select(none);
+        }
+    }
+}
+*/
 /*****************************************************************************
 * Open MCT Web, Copyright (c) 2014-2015, United States Government
 * as represented by the Administrator of the National Aeronautics and Space
@@ -3047,39 +3077,6 @@ label.checkbox.custom {
   right: 0;
   width: auto; }
 
-/*****************************************************************************
- * Open MCT Web, Copyright (c) 2014-2015, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT Web is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT Web includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-/* line 25, ../sass/mobile/controls/_menus.scss */
-.mobile-menu-icon {
-  display: inline-block; }
-  @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 25, ../sass/mobile/controls/_menus.scss */
-    .mobile-menu-icon {
-      font-size: 21px; } }
-  @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-    /* line 25, ../sass/mobile/controls/_menus.scss */
-    .mobile-menu-icon {
-      display: none; } }
-
 /* line 1, ../sass/controls/_time-controller.scss */
 .l-time-controller {
   position: relative;
@@ -4706,13 +4703,16 @@ input[type="text"] {
   left: 0px;
   width: auto;
   height: auto;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
   height: 24px;
   line-height: 24px;
   white-space: nowrap; }
-  /* line 28, ../sass/user-environ/_object-browse.scss */
+  /* line 29, ../sass/user-environ/_object-browse.scss */
   .object-browse-bar .left {
     padding-right: 5px; }
-    /* line 30, ../sass/user-environ/_object-browse.scss */
+    /* line 31, ../sass/user-environ/_object-browse.scss */
     .object-browse-bar .left .l-back {
       display: inline-block;
       float: left;
diff --git a/platform/commonUI/general/res/css/tree.css b/platform/commonUI/general/res/css/tree.css
index 6ddab967f0..0566559e1b 100644
--- a/platform/commonUI/general/res/css/tree.css
+++ b/platform/commonUI/general/res/css/tree.css
@@ -324,28 +324,28 @@ ul.tree {
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 @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 30, ../sass/mobile/_tree.scss */
+  /* line 28, ../sass/mobile/_tree.scss */
   ul.tree li span.tree-item {
     height: 35px;
     line-height: 35px;
     margin-bottom: 0px; }
-    /* line 35, ../sass/mobile/_tree.scss */
+    /* line 33, ../sass/mobile/_tree.scss */
     ul.tree li span.tree-item .view-control {
       position: absolute;
       font-size: 1.1em;
       right: 0px;
       width: 30px;
       text-align: center; }
-    /* line 44, ../sass/mobile/_tree.scss */
+    /* line 42, ../sass/mobile/_tree.scss */
     ul.tree li span.tree-item .label {
       left: 0;
       right: 35px;
-      font-size: 1.2em; }
-      /* line 51, ../sass/mobile/_tree.scss */
+      font-size: 1.1em; }
+      /* line 50, ../sass/mobile/_tree.scss */
       ul.tree li span.tree-item .label .type-icon {
         top: 9px;
         bottom: auto;
         height: 16px; }
-  /* line 62, ../sass/mobile/_tree.scss */
+  /* line 61, ../sass/mobile/_tree.scss */
   ul.tree ul.tree {
     margin-left: 20px; } }
diff --git a/platform/commonUI/general/res/sass/_main.scss b/platform/commonUI/general/res/sass/_main.scss
index 1073f325cc..18dc5aa1e1 100644
--- a/platform/commonUI/general/res/sass/_main.scss
+++ b/platform/commonUI/general/res/sass/_main.scss
@@ -48,7 +48,7 @@
 @import "controls/controls";
 @import "controls/lists";
 @import "controls/menus";
-@import "mobile/controls/menus";
+//@import "mobile/controls/menus";
 @import "controls/time-controller";
 @import "edit/editor";
 @import "features/imagery";
diff --git a/platform/commonUI/general/res/sass/_mixins.scss b/platform/commonUI/general/res/sass/_mixins.scss
index a42a2f480d..bc97b6a521 100644
--- a/platform/commonUI/general/res/sass/_mixins.scss
+++ b/platform/commonUI/general/res/sass/_mixins.scss
@@ -368,6 +368,7 @@
 }
 
 @mixin tmpBorder($c: #ffcc00, $a: 0.75) {
+    @inlude box-sizing(border-box);
     border: 1px dotted rgba($c, $a);
 }
 
diff --git a/platform/commonUI/general/res/sass/mobile/_constants.scss b/platform/commonUI/general/res/sass/mobile/_constants.scss
index 9d7357126e..aedd4c3abd 100644
--- a/platform/commonUI/general/res/sass/mobile/_constants.scss
+++ b/platform/commonUI/general/res/sass/mobile/_constants.scss
@@ -81,7 +81,7 @@ $desktopPortrait: "screen and #{$desktopPortraitCheck}";
 $desktopLandscape: "screen and #{$desktopLandscapeCheck}";
 
 /************************** DEVICE PARAMETERS FOR MENUS/REPRESENTATIONS */
-$phoneRepSizePortrait: 19px;
+$phoneRepSizePortrait: 10%;
 $phoneRepSizeLandscape: 60%;
 $tabletRepSizePortrait: 500px;
 $tabletRepSizeLandscape: 70%;
diff --git a/platform/commonUI/general/res/sass/mobile/_layout.scss b/platform/commonUI/general/res/sass/mobile/_layout.scss
index 9609ed1fdd..e13334ec61 100644
--- a/platform/commonUI/general/res/sass/mobile/_layout.scss
+++ b/platform/commonUI/general/res/sass/mobile/_layout.scss
@@ -149,7 +149,9 @@
         // On both phones and tablets, the width of
         // the right pane is specified
         @include phonePortrait {
-            width: $phoneRepSizePortrait !important;
+            //width: $phoneRepSizePortrait !important;
+            left: 0 !important;
+            transform: translateX(100% - $phoneRepSizePortrait);
         }
         @include phoneLandscape {
             width: $phoneRepSizeLandscape !important;
@@ -165,24 +167,48 @@
     }
 }
 
-.mobile-menu-icon {
-    position: absolute;
-    top: $bodyMargin; left: $bodyMargin;
-}
+@include phoneandtablet {
+    .mobile-menu-icon {
+        font-size: 110%;
+        position: absolute;
+        top: $bodyMargin + 2;
+        left: $bodyMargin;
+    }
 
-// Object header must be moved
-// over to make space for the 
-// hamburger icon
-.object-header {
-    @include phoneandtablet {
-        position: relative;
-        left: 44px;        
-        .label {
-            .context-available {
-                opacity: 1 !important;
-            }
+    .object-browse-bar {
+        //@include test();
+        display: block !important;
+        //font-size: 0.95em;
+        left: 35px !important;
+        .context-available {
+            opacity: 1 !important;
         }
     }
+
+    .tree-holder {
+        overflow-x: hidden !important;
+    }
+
+    .mobile-disable-select {
+        @include user-select(none);
+    }
+
+    // Hides objects on phone and tablet
+    .mobile-hide,
+    .mobile-hide-important {
+        display: none !important;
+    }
+
+    .mobile-back-hide {
+        pointer-events: none;
+        @include trans-prop-nice(opacity, .4s);
+        opacity: 0;
+    }
+    .mobile-back-unhide {
+        pointer-events: all;
+        @include trans-prop-nice(opacity, .4s);
+        opacity: 1;
+    }
 }
 
 .desktop-hide {
@@ -191,18 +217,7 @@
     }
 }
 
-// Hides objects on phone and tablet
-.mobile-hide {
-    @include phoneandtablet {
-        display: none;
-    }
-}
-
-.mobile-important-hide {
-    @include phoneandtablet {
-        display: none !important;
-    }
-}
+/*
 
 .mobile-back-hide {
     @include phoneandtablet {
@@ -212,6 +227,7 @@
     }
 }
 
+
 // Hides objects on phone and tablet
 .mobile-back-unhide {
     @include phoneandtablet {
@@ -221,6 +237,7 @@
     }
 }
 
+
 // Hides objects only on the phone
 .phone-hide {
     @include phone {
@@ -230,11 +247,16 @@
 
 .tree-holder {
     @include phoneandtablet {
-        overflow-x: hidden !important;
+        .tree-holder {
+            overflow-x: hidden !important;
+        }
     }
 }
 .mobile-disable-select {
     @include phoneandtablet {
-        @include user-select(none);
+        .mobile-disable-select {
+            @include user-select(none);
+        }
     }
 }
+*/
\ No newline at end of file
diff --git a/platform/commonUI/general/res/sass/mobile/_tree.scss b/platform/commonUI/general/res/sass/mobile/_tree.scss
index 6918b8f217..5cc0ac1b25 100644
--- a/platform/commonUI/general/res/sass/mobile/_tree.scss
+++ b/platform/commonUI/general/res/sass/mobile/_tree.scss
@@ -20,10 +20,8 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-
-ul.tree {
-    // Only applies to phones and tablets
-    @include phoneandtablet {
+@include phoneandtablet {
+    ul.tree {
         //@include menuUlReset();
         li {
             //border-top: 1px solid $colorInteriorBorder; // TEMP
@@ -39,7 +37,7 @@ ul.tree {
                     right: 0px;
                     width: $mobileTreeRightArrowW;
                     text-align: center;
-                }                   
+                }
 
                 .label {
                     // Designates the starting left margin
@@ -47,13 +45,14 @@ ul.tree {
                     // Also adds right space for selection button
                     left: 0;
                     right: $mobileTreeRightArrowW + $interiorMargin; // Allows tree item name to stop prior to the arrow
-                    font-size: 1.2em;
+                    font-size: 1.1em;
+                    //font-size: 1.2em; // CH CO
                     .type-icon {
                         @include verticalCenterBlock($mobileTreeItemH, $treeTypeIconH);
                     }
                     .title-label {
                     }
-                }             
+                }
             }
         }
 
diff --git a/platform/commonUI/general/res/sass/mobile/controls/_menus.scss b/platform/commonUI/general/res/sass/mobile/controls/_menus.scss
index d738f63d4a..e06fdb7979 100644
--- a/platform/commonUI/general/res/sass/mobile/controls/_menus.scss
+++ b/platform/commonUI/general/res/sass/mobile/controls/_menus.scss
@@ -30,5 +30,5 @@
     }
     @include desktop {
         display: none;
-    }       
+    }
 }
diff --git a/platform/commonUI/general/res/sass/user-environ/_object-browse.scss b/platform/commonUI/general/res/sass/user-environ/_object-browse.scss
index fc1065acec..3ec809343a 100644
--- a/platform/commonUI/general/res/sass/user-environ/_object-browse.scss
+++ b/platform/commonUI/general/res/sass/user-environ/_object-browse.scss
@@ -21,6 +21,7 @@
  *****************************************************************************/
 .object-browse-bar {
     @include absPosDefault();
+    @include box-sizing(border-box);
     height: $ueTopBarH;
     line-height: $ueTopBarH;
     white-space: nowrap;

From 6a2bdd103bf5e00e51137bc34e5b50f0a6518591 Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Mon, 24 Aug 2015 16:17:58 -0700
Subject: [PATCH 148/209] [Mobile] Hide Tree

On selecting a node in the tree, if the
user is on phone and in portrait, than
emit up to the browse controller to call
treeSlide(), which will hide the tree menu.
Also adjusted the agent service to properly
check for orientation using window.innerHeight/
Width. Also created function for the selection
of an object in BrowseController.
---
 platform/commonUI/browse/src/BrowseController.js    |  6 ++++++
 platform/commonUI/general/bundle.json               |  3 +--
 .../commonUI/general/res/templates/tree-node.html   |  5 ++---
 .../general/src/controllers/TreeNodeController.js   | 13 +++++++++++++
 .../commonUI/general/src/services/AgentService.js   |  6 +++---
 5 files changed, 25 insertions(+), 8 deletions(-)

diff --git a/platform/commonUI/browse/src/BrowseController.js b/platform/commonUI/browse/src/BrowseController.js
index c61260a400..65ac4467b8 100644
--- a/platform/commonUI/browse/src/BrowseController.js
+++ b/platform/commonUI/browse/src/BrowseController.js
@@ -187,6 +187,12 @@ define(
                 navigationService.removeListener(setNavigation);
             });
             
+            // If the user has selected an object (and is portrait
+            // on a phone), then hide the tree menu
+            $scope.$on("select-obj", function () {
+                $scope.treeSlide();
+            });
+            
             $scope.backArrow = navigateToParent;
             
             $scope.checkRoot = checkRoot;
diff --git a/platform/commonUI/general/bundle.json b/platform/commonUI/general/bundle.json
index f4ceed6ba1..7f5e2bfb86 100644
--- a/platform/commonUI/general/bundle.json
+++ b/platform/commonUI/general/bundle.json
@@ -11,8 +11,7 @@
             },
             {
                 "key": "agentService",
-                "implementation": "/services/AgentService.js",
-                "depends": [ "$window" ]
+                "implementation": "/services/AgentService.js"
             }
         ],
         "runs": [
diff --git a/platform/commonUI/general/res/templates/tree-node.html b/platform/commonUI/general/res/templates/tree-node.html
index 7f54b97180..9b094fe81d 100644
--- a/platform/commonUI/general/res/templates/tree-node.html
+++ b/platform/commonUI/general/res/templates/tree-node.html
@@ -29,15 +29,14 @@
                 key="'label'"
 				mct-object="domainObject"
 				ng-model="ngModel"
-				ng-click="!treeNode.checkMobile() ? ngModel.selectedObject = domainObject :
-                          toggle.toggle(); treeNode.trackExpansion()"
+				ng-click="!treeNode.checkMobile() ? treeNode.setObject(ngModel, domainObject) : toggle.toggle(); treeNode.trackExpansion()"
 				>
             </mct-representation>
             <span
 	            class='ui-symbol view-control'
                 mct-object="domainObject"
                 ng-model="ngModel"
-				ng-click="treeNode.checkMobile() ? ngModel.selectedObject = domainObject :
+				ng-click="treeNode.checkMobile() ? treeNode.setObject(ngModel, domainObject) :
                           toggle.toggle(); treeNode.trackExpansion()"
 				ng-if="model.composition !== undefined || treeNode.checkMobile()"
 				>
diff --git a/platform/commonUI/general/src/controllers/TreeNodeController.js b/platform/commonUI/general/src/controllers/TreeNodeController.js
index c55c3e2b6b..8d6becdfad 100644
--- a/platform/commonUI/general/src/controllers/TreeNodeController.js
+++ b/platform/commonUI/general/src/controllers/TreeNodeController.js
@@ -87,6 +87,17 @@ define(
                 }
             }
             
+            // Sets the selected object in the tree, to be the
+            // currently represented object. If the user is on phone
+            // and in portrait mode, than, hide the tree menu
+            function setObject(ngModel, domainObject) {
+                ngModel.selectedObject = domainObject;
+                if (agentService.getOrientation() === "portrait" &&
+                        agentService.isPhone(navigator.userAgent)) {
+                    $scope.$emit('select-obj');
+                }
+            }
+            
             function checkMobile() {
                 return agentService.isMobile(navigator.userAgent);
             }
@@ -157,6 +168,8 @@ define(
                 
                 checkMobile: checkMobile,
                 
+                setObject: setObject,
+                
                 /**
                  * Check if this not has ever been expanded.
                  * @returns true if it has been expanded
diff --git a/platform/commonUI/general/src/services/AgentService.js b/platform/commonUI/general/src/services/AgentService.js
index 0d43cfdfa6..fa790e966f 100644
--- a/platform/commonUI/general/src/services/AgentService.js
+++ b/platform/commonUI/general/src/services/AgentService.js
@@ -35,7 +35,7 @@ define(
          * info using a comparison between the userAgent and key
          * device names
          */
-        function AgentService($window) {
+        function AgentService() {
             
             // Gets the UA name if it is one of the following.
             // If it is not (a desktop for example) nothing is
@@ -69,9 +69,9 @@ define(
             // Returns the orientation of the device based on the
             // device's window dimensions
             function getOrientation() {
-                if ($window.outerWidth > $window.outerHeight) {
+                if (window.innerWidth > window.innerHeight) {
                     return "landscape";
-                } else if ($window.outerWidth < $window.outerHeight) {
+                } else if (window.innerWidth < window.innerHeight) {
                     return "portrait";
                 }
             }

From 69c6d4bd262bc0371df683b70bc6acb4203c375f Mon Sep 17 00:00:00 2001
From: Charles Hacskaylo <charles.f.hacskaylo@nasa.gov>
Date: Mon, 24 Aug 2015 16:31:38 -0700
Subject: [PATCH 149/209] [Mobile] IN PROGRESS: Tweaks to labels;

open #74
Cleaned up layout of bottom-bar;
Fixed class selector for ue-bottom-bar;
---
 platform/commonUI/general/res/css/items.css   | 24 +++++++++----------
 .../general/res/css/theme-espresso.css        |  6 ++---
 .../general/res/sass/items/_item.scss         |  3 ++-
 .../res/sass/user-environ/_layout.scss        |  2 +-
 4 files changed, 18 insertions(+), 17 deletions(-)

diff --git a/platform/commonUI/general/res/css/items.css b/platform/commonUI/general/res/css/items.css
index 9ea92fa707..cf77cbed9a 100644
--- a/platform/commonUI/general/res/css/items.css
+++ b/platform/commonUI/general/res/css/items.css
@@ -234,12 +234,12 @@
     /* line 79, ../sass/items/_item.scss */
     .items-holder .item.grid-item .bar.bottom-bar {
       top: auto;
-      height: 30px; }
-    /* line 84, ../sass/items/_item.scss */
+      line-height: 110%; }
+    /* line 85, ../sass/items/_item.scss */
     .items-holder .item.grid-item .item-main {
       line-height: 160px;
       z-index: 1; }
-      /* line 90, ../sass/items/_item.scss */
+      /* line 91, ../sass/items/_item.scss */
       .items-holder .item.grid-item .item-main .item-type {
         overflow: false;
         position: absolute;
@@ -255,7 +255,7 @@
         bottom: auto;
         height: 102px;
         top: 30px; }
-        /* line 102, ../sass/items/_item.scss */
+        /* line 103, ../sass/items/_item.scss */
         .items-holder .item.grid-item .item-main .item-type .l-icon-link {
           color: #49dedb;
           height: auto;
@@ -265,7 +265,7 @@
           left: 0px;
           bottom: 10px;
           z-index: 2; }
-      /* line 115, ../sass/items/_item.scss */
+      /* line 116, ../sass/items/_item.scss */
       .items-holder .item.grid-item .item-main .item-open {
         -moz-transition-property: "opacity";
         -o-transition-property: "opacity";
@@ -285,17 +285,17 @@
         width: 50px;
         pointer-events: none;
         text-align: right; }
-    /* line 127, ../sass/items/_item.scss */
+    /* line 128, ../sass/items/_item.scss */
     .items-holder .item.grid-item .title {
       text-shadow: rgba(0, 0, 0, 0.1) 0 1px 2px;
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
       color: #cccccc; }
-    /* line 132, ../sass/items/_item.scss */
+    /* line 133, ../sass/items/_item.scss */
     .items-holder .item.grid-item .details {
       font-size: 0.8em; }
-    /* line 135, ../sass/items/_item.scss */
+    /* line 136, ../sass/items/_item.scss */
     .items-holder .item.grid-item.selected {
       background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzBhYzJmZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwYjRmMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
       background-size: 100%;
@@ -332,16 +332,16 @@
       /* line 175, ../sass/_mixins.scss */
       .items-holder .item.grid-item.selected.btn-menu .invoke-menu {
         color: #52d4ff; }
-      /* line 140, ../sass/items/_item.scss */
+      /* line 141, ../sass/items/_item.scss */
       .items-holder .item.grid-item.selected .item-type, .items-holder .item.grid-item.selected .top-bar .icon:not(.alert) {
         color: #80dfff; }
-      /* line 141, ../sass/items/_item.scss */
+      /* line 142, ../sass/items/_item.scss */
       .items-holder .item.grid-item.selected .item-main .item-open {
         color: #80dfff; }
-      /* line 142, ../sass/items/_item.scss */
+      /* line 143, ../sass/items/_item.scss */
       .items-holder .item.grid-item.selected .title {
         color: white; }
-      /* line 144, ../sass/items/_item.scss */
+      /* line 145, ../sass/items/_item.scss */
       .items-holder .item.grid-item.selected:hover .item-main .item-type {
         color: white !important; }
 
diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index 1ead13f014..61044025cd 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -594,7 +594,7 @@ mct-container {
   .user-environ .edit-area .work-area {
     top: 40px; }
 /* line 129, ../sass/user-environ/_layout.scss */
-.user-environ .bottom-bar {
+.user-environ .ue-bottom-bar {
   overflow: hidden;
   position: absolute;
   top: 0;
@@ -606,10 +606,10 @@ mct-container {
   top: auto;
   height: 25px; }
   /* line 134, ../sass/user-environ/_layout.scss */
-  .user-environ .bottom-bar .status-holder {
+  .user-environ .ue-bottom-bar .status-holder {
     z-index: 1; }
   /* line 138, ../sass/user-environ/_layout.scss */
-  .user-environ .bottom-bar .app-logo {
+  .user-environ .ue-bottom-bar .app-logo {
     left: auto;
     width: 105px;
     z-index: 2; }
diff --git a/platform/commonUI/general/res/sass/items/_item.scss b/platform/commonUI/general/res/sass/items/_item.scss
index d9c9d8613b..c04568d8fa 100644
--- a/platform/commonUI/general/res/sass/items/_item.scss
+++ b/platform/commonUI/general/res/sass/items/_item.scss
@@ -78,7 +78,8 @@
                 }
                 &.bottom-bar {
                     top: auto;
-                    height: $ueBrowseGridItemBottomBarH;
+                    //height: $ueBrowseGridItemBottomBarH;
+                    line-height: 110%;
                 }
             }
             .item-main {
diff --git a/platform/commonUI/general/res/sass/user-environ/_layout.scss b/platform/commonUI/general/res/sass/user-environ/_layout.scss
index 7bca0d480b..9538a2bb74 100644
--- a/platform/commonUI/general/res/sass/user-environ/_layout.scss
+++ b/platform/commonUI/general/res/sass/user-environ/_layout.scss
@@ -126,7 +126,7 @@
 		}
 	}
 
-	.bottom-bar {
+	.ue-bottom-bar {
         //@include absPosDefault($bodyMargin);
 		@include absPosDefault(0);// New status bar design
 		top: auto;

From 5184e08a5b262aafd9e780b8b453c5c12d73e43d Mon Sep 17 00:00:00 2001
From: Charles Hacskaylo <charles.f.hacskaylo@nasa.gov>
Date: Mon, 24 Aug 2015 16:45:55 -0700
Subject: [PATCH 150/209] [Mobile] IN PROGRESS: Tweak to TypeImpl to return
 glyph for unknown types

open #74
Thanks Victor!;
---
 platform/core/bundle.json | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/platform/core/bundle.json b/platform/core/bundle.json
index 4b33f48f35..c8c56299f6 100644
--- a/platform/core/bundle.json
+++ b/platform/core/bundle.json
@@ -142,7 +142,10 @@
             {
                 "key": "unknown",
                 "name": "Unknown Type",
-                "glyph": "?"
+                "glyph": "\u003f"
+            },
+            {
+                "glyph": "\u003f"
             }
         ],
         "capabilities": [

From aca06c6007197ac6423c7c094dcc74da13af6bfa Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Mon, 24 Aug 2015 16:46:48 -0700
Subject: [PATCH 151/209] [Action] Remove Action Merged

Remove Action merged to allow removal of
parent or current selected object, then
navigation to lowest existing parent if
currently located in deleted object.
---
 .../commonUI/edit/src/actions/RemoveAction.js | 32 +++++++++++++------
 .../edit/test/actions/RemoveActionSpec.js     | 19 +++++++++--
 2 files changed, 40 insertions(+), 11 deletions(-)

diff --git a/platform/commonUI/edit/src/actions/RemoveAction.js b/platform/commonUI/edit/src/actions/RemoveAction.js
index 9e0e723200..e89ad3ed2d 100644
--- a/platform/commonUI/edit/src/actions/RemoveAction.js
+++ b/platform/commonUI/edit/src/actions/RemoveAction.js
@@ -41,7 +41,8 @@ define(
          * @memberof module:editor/actions/remove-action
          */
         function RemoveAction($q, navigationService, context) {
-            var object = (context || {}).domainObject;
+            var object = (context || {}).domainObject,
+                ROOT_ID = "ROOT";
 
             /**
              * Check whether an object ID matches the ID of the object being
@@ -68,12 +69,25 @@ define(
                 var persistence = domainObject.getCapability('persistence');
                 return persistence && persistence.persist();
             }
-
-            // Checks current object with object being removed
-            function checkCurrentObjectNavigation(object, parent) {
-                var currentObj = navigationService.getNavigation();
-                if (currentObj.getId() === object.getId()) {
-                    navigationService.setNavigation(parent);
+            
+            // Checks current object and ascendants of current
+            // object with object being removed, if the current
+            // object or any in the current object's path is being removed,
+            // navigate back to parent of removed object. 
+            function checkObjectNavigation(object, parentObject) {
+                // Traverse object starts at current location
+                var traverseObject = navigationService.getNavigation();
+                
+                // Stop at ROOT of folder path
+                while(traverseObject.getId() !== ROOT_ID) {
+                    // If traverse object is object being removed
+                    // navigate to parent of removed object
+                    if (traverseObject.getId() === object.getId()) {
+                        navigationService.setNavigation(parentObject);
+                        return;
+                    }
+                    // Traverses to parent
+                    traverseObject = traverseObject.getCapability('context').getParent();
                 }
             }
             
@@ -86,8 +100,8 @@ define(
             function removeFromContext(object) {
                 var contextCapability = object.getCapability('context'),
                     parent = contextCapability.getParent();
-                // Navigates to parent if deleting current object
-                checkCurrentObjectNavigation(object, parent);
+                // Navigates through/ascendant if deleting current object
+                checkObjectNavigation(object, parent)
                 $q.when(
                     parent.useCapability('mutation', doMutate)
                 ).then(function () {
diff --git a/platform/commonUI/edit/test/actions/RemoveActionSpec.js b/platform/commonUI/edit/test/actions/RemoveActionSpec.js
index e6b667d8b2..072094ed1d 100644
--- a/platform/commonUI/edit/test/actions/RemoveActionSpec.js
+++ b/platform/commonUI/edit/test/actions/RemoveActionSpec.js
@@ -31,6 +31,7 @@ define(
                 mockNavigationService,
                 mockDomainObject,
                 mockParent,
+                mockGrandparent,
                 mockContext,
                 mockMutation,
                 mockPersistence,
@@ -56,7 +57,7 @@ define(
                     [ "getId", "getCapability" ]
                 );
                 mockQ = { when: mockPromise };
-                mockParent = {
+                mockGrandparent = {
                     getModel: function () {
                         return model;
                     },
@@ -70,6 +71,20 @@ define(
                         return "test";
                     }
                 };
+                mockParent = {
+                    getModel: function () {
+                        return model;
+                    },
+                    getCapability: function (k) {
+                        return capabilities[k];
+                    },
+                    useCapability: function (k, v) {
+                        return capabilities[k].invoke(v);
+                    },
+                    getParent: function () {
+                        return mockGrandparent;
+                    }
+                };
                 mockContext = jasmine.createSpyObj("context", [ "getParent" ]);
                 mockMutation = jasmine.createSpyObj("mutation", [ "invoke" ]);
                 mockPersistence = jasmine.createSpyObj("persistence", [ "persist" ]);
@@ -97,7 +112,7 @@ define(
                     type: mockType
                 };
                 model = {
-                    composition: [ "a", "test", "b", "c" ]
+                    composition: [ "a", "b", "test", "c" ]
                 };
 
                 actionContext = { domainObject: mockDomainObject };

From 13b66cd215d5aa371a092e04ffcb2a750ef49c03 Mon Sep 17 00:00:00 2001
From: Charles Hacskaylo <charles.f.hacskaylo@nasa.gov>
Date: Mon, 24 Aug 2015 17:04:38 -0700
Subject: [PATCH 152/209] [Mobile] IN PROGRESS: Only display custom scrollbars
 in desktop mode

open #74
---
 .../general/res/css/theme-espresso.css        | 90 +++++++++----------
 .../general/res/sass/controls/_controls.scss  | 38 ++++----
 2 files changed, 65 insertions(+), 63 deletions(-)

diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index 61044025cd..67e258e908 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -2765,54 +2765,54 @@ label.checkbox.custom {
     background: rgba(0, 153, 204, 0.7); }
 
 /******************************************************** BROWSER ELEMENTS */
-/* line 470, ../sass/controls/_controls.scss */
-::-webkit-scrollbar {
-  -moz-border-radius: 2px;
-  -webkit-border-radius: 2px;
-  border-radius: 2px;
-  -moz-box-sizing: border-box;
-  -webkit-box-sizing: border-box;
-  box-sizing: border-box;
-  -moz-box-shadow: inset rgba(0, 0, 0, 0.7) 0 1px 5px;
-  -webkit-box-shadow: inset rgba(0, 0, 0, 0.7) 0 1px 5px;
-  box-shadow: inset rgba(0, 0, 0, 0.7) 0 1px 5px;
-  background-color: rgba(0, 0, 0, 0.4);
-  border-bottom: 1px solid rgba(77, 77, 77, 0.4);
-  border-right: 1px solid rgba(77, 77, 77, 0.4);
-  height: 10px;
-  width: 10px; }
+@media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
+  /* line 471, ../sass/controls/_controls.scss */
+  ::-webkit-scrollbar {
+    -moz-border-radius: 2px;
+    -webkit-border-radius: 2px;
+    border-radius: 2px;
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    -moz-box-shadow: inset rgba(0, 0, 0, 0.7) 0 1px 5px;
+    -webkit-box-shadow: inset rgba(0, 0, 0, 0.7) 0 1px 5px;
+    box-shadow: inset rgba(0, 0, 0, 0.7) 0 1px 5px;
+    background-color: rgba(0, 0, 0, 0.4);
+    border-bottom: 1px solid rgba(77, 77, 77, 0.4);
+    border-right: 1px solid rgba(77, 77, 77, 0.4);
+    height: 10px;
+    width: 10px; }
 
-/* line 476, ../sass/controls/_controls.scss */
-::-webkit-scrollbar-thumb {
-  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzY2NjY2NiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzU5NTk1OSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
-  background-size: 100%;
-  background-image: -webkit-gradient(linear, 50% 0%, 50% 20, color-stop(0%, #666666), color-stop(100%, #595959));
-  background-image: -moz-linear-gradient(#666666, #595959 20px);
-  background-image: -webkit-linear-gradient(#666666, #595959 20px);
-  background-image: linear-gradient(#666666, #595959 20px);
-  -moz-border-radius: 1px;
-  -webkit-border-radius: 1px;
-  border-radius: 1px;
-  -moz-box-sizing: border-box;
-  -webkit-box-sizing: border-box;
-  box-sizing: border-box;
-  -moz-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
-  -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
-  box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
-  border-top: 1px solid gray; }
-  /* line 483, ../sass/controls/_controls.scss */
-  ::-webkit-scrollbar-thumb:hover {
-    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzgwODA4MCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzczNzM3MyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
+  /* line 477, ../sass/controls/_controls.scss */
+  ::-webkit-scrollbar-thumb {
+    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzY2NjY2NiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzU5NTk1OSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
     background-size: 100%;
-    background-image: -webkit-gradient(linear, 50% 0%, 50% 20, color-stop(0%, #808080), color-stop(100%, #737373));
-    background-image: -moz-linear-gradient(#808080, #737373 20px);
-    background-image: -webkit-linear-gradient(#808080, #737373 20px);
-    background-image: linear-gradient(#808080, #737373 20px); }
-
-/* line 488, ../sass/controls/_controls.scss */
-::-webkit-scrollbar-corner {
-  background: rgba(0, 0, 0, 0.4); }
+    background-image: -webkit-gradient(linear, 50% 0%, 50% 20, color-stop(0%, #666666), color-stop(100%, #595959));
+    background-image: -moz-linear-gradient(#666666, #595959 20px);
+    background-image: -webkit-linear-gradient(#666666, #595959 20px);
+    background-image: linear-gradient(#666666, #595959 20px);
+    -moz-border-radius: 1px;
+    -webkit-border-radius: 1px;
+    border-radius: 1px;
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    -moz-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
+    -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
+    box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
+    border-top: 1px solid gray; }
+    /* line 484, ../sass/controls/_controls.scss */
+    ::-webkit-scrollbar-thumb:hover {
+      background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzgwODA4MCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzczNzM3MyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
+      background-size: 100%;
+      background-image: -webkit-gradient(linear, 50% 0%, 50% 20, color-stop(0%, #808080), color-stop(100%, #737373));
+      background-image: -moz-linear-gradient(#808080, #737373 20px);
+      background-image: -webkit-linear-gradient(#808080, #737373 20px);
+      background-image: linear-gradient(#808080, #737373 20px); }
 
+  /* line 489, ../sass/controls/_controls.scss */
+  ::-webkit-scrollbar-corner {
+    background: rgba(0, 0, 0, 0.4); } }
 /*****************************************************************************
  * Open MCT Web, Copyright (c) 2014-2015, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
diff --git a/platform/commonUI/general/res/sass/controls/_controls.scss b/platform/commonUI/general/res/sass/controls/_controls.scss
index 61aabb1fa3..b2a0352594 100644
--- a/platform/commonUI/general/res/sass/controls/_controls.scss
+++ b/platform/commonUI/general/res/sass/controls/_controls.scss
@@ -467,24 +467,26 @@ label.checkbox.custom {
 
 /******************************************************** BROWSER ELEMENTS */
 
-::-webkit-scrollbar {
-	@include sliderTrack();
-	height: $scrollbarTrackSize;
-	width: $scrollbarTrackSize;
-}
-
-::-webkit-scrollbar-thumb {
-	$bg: lighten($colorBodyBg, 10%);
-	@include background-image(linear-gradient(lighten($bg, 10%), lighten($bg, 5%) 20px));
-	@include border-radius(1px);
-	@include box-sizing(border-box);
-	@include boxShdwSubtle();
-	border-top: 1px solid lighten($bg, 20%);
-	&:hover {
-		@include background-image(linear-gradient(lighten($bg, 20%), lighten($bg, 15%) 20px));
+@include desktop {
+	::-webkit-scrollbar {
+		@include sliderTrack();
+		height: $scrollbarTrackSize;
+		width: $scrollbarTrackSize;
 	}
-}
 
-::-webkit-scrollbar-corner {
-	background: rgba(#000, 0.4);
+	::-webkit-scrollbar-thumb {
+		$bg: lighten($colorBodyBg, 10%);
+		@include background-image(linear-gradient(lighten($bg, 10%), lighten($bg, 5%) 20px));
+		@include border-radius(1px);
+		@include box-sizing(border-box);
+		@include boxShdwSubtle();
+		border-top: 1px solid lighten($bg, 20%);
+		&:hover {
+			@include background-image(linear-gradient(lighten($bg, 20%), lighten($bg, 15%) 20px));
+		}
+	}
+
+	::-webkit-scrollbar-corner {
+		background: rgba(#000, 0.4);
+	}
 }
\ No newline at end of file

From 7542c6d49ab05d2860a7f43c180919eb05666b5e Mon Sep 17 00:00:00 2001
From: Charles Hacskaylo <charles.f.hacskaylo@nasa.gov>
Date: Tue, 25 Aug 2015 09:41:38 -0700
Subject: [PATCH 153/209] [Mobile] IN PROGRESS: Cleanups on .btn for
 line-height, sizing, etc.

open #74
---
 .../general/res/css/theme-espresso.css        | 308 +++++++++---------
 .../general/res/sass/controls/_buttons.scss   |   3 +-
 .../general/res/sass/controls/_controls.scss  |  57 ++--
 .../general/res/sass/user-environ/_frame.scss |  18 +-
 .../res/sass/user-environ/_object-browse.scss |   3 +-
 .../res/templates/controls/switcher.html      |   2 +-
 6 files changed, 195 insertions(+), 196 deletions(-)

diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index 67e258e908..28337e74f6 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -1755,37 +1755,37 @@ table {
   -ms-user-select: none;
   -webkit-user-select: none;
   user-select: none;
-  line-height: 1.5em;
+  line-height: 150%;
   padding: 0 7.5px;
   text-decoration: none; }
-  /* line 32, ../sass/controls/_buttons.scss */
+  /* line 33, ../sass/controls/_buttons.scss */
   .btn.lg, .btn.create-btn,
   .l-btn.lg,
   .l-btn.create-btn {
     height: 24px;
     line-height: 22px;
     padding: 0 22.5px; }
-  /* line 41, ../sass/controls/_buttons.scss */
+  /* line 42, ../sass/controls/_buttons.scss */
   .btn.create-btn:before,
   .l-btn.create-btn:before {
     content: "+";
     font-family: symbolsfont;
     font-size: 0.8em; }
-  /* line 46, ../sass/controls/_buttons.scss */
+  /* line 47, ../sass/controls/_buttons.scss */
   .btn.create-btn .menu,
   .l-btn.create-btn .menu {
     margin-left: -7.5px; }
-  /* line 53, ../sass/controls/_buttons.scss */
+  /* line 54, ../sass/controls/_buttons.scss */
   .btn.sm,
   .l-btn.sm {
     padding: 0 5px; }
-  /* line 56, ../sass/controls/_buttons.scss */
+  /* line 57, ../sass/controls/_buttons.scss */
   .btn.vsm,
   .l-btn.vsm {
     padding: 0 2.5px; }
 
 /*********************************** STYLE STYLES */
-/* line 62, ../sass/controls/_buttons.scss */
+/* line 63, ../sass/controls/_buttons.scss */
 .btn,
 .s-btn,
 .icon-btn,
@@ -1799,7 +1799,7 @@ table {
   text-shadow: rgba(0, 0, 0, 0.3) 0 1px 1px;
   cursor: pointer;
   text-decoration: none; }
-  /* line 71, ../sass/controls/_buttons.scss */
+  /* line 72, ../sass/controls/_buttons.scss */
   .btn.major,
   .s-btn.major,
   .major.icon-btn,
@@ -1848,7 +1848,7 @@ table {
     .major.btn-menu.icon-btn .invoke-menu,
     .major.btn-menu.s-icon-btn .invoke-menu {
       color: #52d4ff; }
-    /* line 76, ../sass/controls/_buttons.scss */
+    /* line 77, ../sass/controls/_buttons.scss */
     .btn.major:hover,
     .s-btn.major:hover,
     .major.icon-btn:hover,
@@ -1896,13 +1896,13 @@ table {
       .major.icon-btn:hover.btn-menu .invoke-menu,
       .major.s-icon-btn:hover.btn-menu .invoke-menu {
         color: #6bdaff; }
-    /* line 80, ../sass/controls/_buttons.scss */
+    /* line 81, ../sass/controls/_buttons.scss */
     .btn.major .invoke-menu,
     .s-btn.major .invoke-menu,
     .major.icon-btn .invoke-menu,
     .major.s-icon-btn .invoke-menu {
       color: #ccf2ff; }
-  /* line 84, ../sass/controls/_buttons.scss */
+  /* line 85, ../sass/controls/_buttons.scss */
   .btn.subtle,
   .s-btn.subtle,
   .subtle.icon-btn,
@@ -1950,7 +1950,7 @@ table {
     .subtle.btn-menu.icon-btn .invoke-menu,
     .subtle.btn-menu.s-icon-btn .invoke-menu {
       color: #a8a8a8; }
-  /* line 87, ../sass/controls/_buttons.scss */
+  /* line 88, ../sass/controls/_buttons.scss */
   .btn.very-subtle, .btn.s-very-subtle,
   .s-btn.very-subtle,
   .very-subtle.icon-btn,
@@ -2010,7 +2010,7 @@ table {
     .s-very-subtle.btn-menu.icon-btn .invoke-menu,
     .s-very-subtle.btn-menu.s-icon-btn .invoke-menu {
       color: #757575; }
-    /* line 90, ../sass/controls/_buttons.scss */
+    /* line 91, ../sass/controls/_buttons.scss */
     .btn.very-subtle.paused, .btn.s-very-subtle.paused,
     .s-btn.very-subtle.paused,
     .very-subtle.paused.icon-btn,
@@ -2070,7 +2070,7 @@ table {
       .s-very-subtle.paused.btn-menu.icon-btn .invoke-menu,
       .s-very-subtle.paused.btn-menu.s-icon-btn .invoke-menu {
         color: #feb04d; }
-      /* line 92, ../sass/controls/_buttons.scss */
+      /* line 93, ../sass/controls/_buttons.scss */
       .btn.very-subtle.paused .icon:before, .btn.s-very-subtle.paused .icon:before,
       .s-btn.very-subtle.paused .icon:before,
       .very-subtle.paused.icon-btn .icon:before,
@@ -2080,31 +2080,31 @@ table {
       .s-very-subtle.paused.s-icon-btn .icon:before {
         content: "\0000EF"; }
 
-/* line 99, ../sass/controls/_buttons.scss */
+/* line 100, ../sass/controls/_buttons.scss */
 .icon-btn,
 .s-icon-btn {
   font-size: 1em; }
-  /* line 103, ../sass/controls/_buttons.scss */
+  /* line 104, ../sass/controls/_buttons.scss */
   .icon-btn .icon,
   .s-icon-btn .icon {
     color: #0099cc; }
-  /* line 107, ../sass/controls/_buttons.scss */
+  /* line 108, ../sass/controls/_buttons.scss */
   .icon-btn.paused .icon,
   .s-icon-btn.paused .icon {
     color: #fff; }
-  /* line 115, ../sass/controls/_buttons.scss */
+  /* line 116, ../sass/controls/_buttons.scss */
   .icon-btn:not(.disabled):not(.paused):hover .icon,
   .s-icon-btn:not(.disabled):not(.paused):hover .icon {
     color: #33ccff; }
-  /* line 122, ../sass/controls/_buttons.scss */
+  /* line 123, ../sass/controls/_buttons.scss */
   .icon-btn.labeled,
   .s-icon-btn.labeled {
     padding: 0 3.75px; }
-    /* line 127, ../sass/controls/_buttons.scss */
+    /* line 128, ../sass/controls/_buttons.scss */
     .icon-btn.labeled .title-label,
     .s-icon-btn.labeled .title-label {
       margin-left: 5px; }
-  /* line 132, ../sass/controls/_buttons.scss */
+  /* line 133, ../sass/controls/_buttons.scss */
   .icon-btn.pause-play,
   .s-icon-btn.pause-play {
     /*		&.paused {
@@ -2112,17 +2112,17 @@ table {
     				@include pulse(500ms);
     			}
     		}*/ }
-    /* line 138, ../sass/controls/_buttons.scss */
+    /* line 139, ../sass/controls/_buttons.scss */
     .icon-btn.pause-play .icon:before,
     .s-icon-btn.pause-play .icon:before {
       content: "\0000F1"; }
-  /* line 144, ../sass/controls/_buttons.scss */
+  /* line 145, ../sass/controls/_buttons.scss */
   .icon-btn.show-thumbs .icon:before,
   .s-icon-btn.show-thumbs .icon:before {
     content: "\000039"; }
 
 /*********************************** LAYOUT STYLES */
-/* line 151, ../sass/controls/_buttons.scss */
+/* line 152, ../sass/controls/_buttons.scss */
 span.btn,
 span.btn span,
 span.l-btn,
@@ -2315,11 +2315,20 @@ a.l-btn span {
     overflow-y: auto;
     overflow-x: hidden; }
 
-/* line 105, ../sass/controls/_controls.scss */
-.btn-bar .btn,
-.btn-bar .btn-set,
-.btn-bar .t-btn {
-  display: inline-block; }
+/* line 103, ../sass/controls/_controls.scss */
+.btn-bar {
+  /*	.btn,
+  	.btn-set,
+  	.t-btn {
+  		display: inline-block;
+  		//		margin-left: $interiorMargin;
+  	}
+  	.btn,
+  	.t-btn {
+  		&:first-child {
+  			//			margin-left: 0;
+  		}
+  	}*/ }
 
 /* line 119, ../sass/controls/_controls.scss */
 .l-composite-control {
@@ -2353,51 +2362,41 @@ a.l-btn span {
 .s-local-controls {
   font-size: 0.7rem; }
 
-/* line 156, ../sass/controls/_controls.scss */
+/*
 .btn-set {
-  display: inline-block;
-  position: relative; }
-  /* line 160, ../sass/controls/_controls.scss */
-  .btn-set .btn,
-  .btn-set .t-btn {
-    -moz-border-radius: 0;
-    -webkit-border-radius: 0;
-    border-radius: 0;
-    border-left: 1px solid #666666;
-    margin-left: 0; }
-    /* line 165, ../sass/controls/_controls.scss */
-    .btn-set .btn:first-child,
-    .btn-set .t-btn:first-child {
-      border-left: none;
-      -moz-border-radius-topleft: 3px;
-      -webkit-border-top-left-radius: 3px;
-      border-top-left-radius: 3px;
-      -moz-border-radius-bottomleft: 3px;
-      -webkit-border-bottom-left-radius: 3px;
-      border-bottom-left-radius: 3px; }
-    /* line 169, ../sass/controls/_controls.scss */
-    .btn-set .btn:last-child,
-    .btn-set .t-btn:last-child {
-      -moz-border-radius-topright: 3px;
-      -webkit-border-top-right-radius: 3px;
-      border-top-right-radius: 3px;
-      -moz-border-radius-bottomright: 3px;
-      -webkit-border-bottom-right-radius: 3px;
-      border-bottom-right-radius: 3px; }
-
-/* line 175, ../sass/controls/_controls.scss */
+	// Buttons that have a very tight conceptual grouping - no internal space between them.
+	display: inline-block;
+	position: relative;
+	.btn,
+	.t-btn {
+		@include border-radius(0);
+		border-left: 1px solid lighten($colorBodyBg, 20%);
+		margin-left: 0;
+		&:first-child {
+			border-left: none;
+			@include border-left-radius($controlCr);
+		}
+		&:last-child {
+			@include border-right-radius($controlCr);
+		}
+	}
+}
+*/
+/* line 177, ../sass/controls/_controls.scss */
 .object-browse-bar .btn,
 .object-browse-bar .t-btn,
+.object-browse-bar .view-switcher,
 .top-bar .buttons-main .btn,
 .top-bar .buttons-main .t-btn,
+.top-bar .view-switcher,
 .tool-bar .btn,
 .tool-bar .t-btn {
   display: inline-block;
   font-size: 11.25px;
-  height: 25px;
-  line-height: 22px; }
+  line-height: 200%;
+  vertical-align: top; }
 
-/* line 194, ../sass/controls/_controls.scss */
+/* line 192, ../sass/controls/_controls.scss */
 label.checkbox.custom {
   cursor: pointer;
   display: inline-block;
@@ -2406,13 +2405,13 @@ label.checkbox.custom {
   padding-left: 19px;
   position: relative;
   vertical-align: top; }
-  /* line 204, ../sass/controls/_controls.scss */
+  /* line 202, ../sass/controls/_controls.scss */
   label.checkbox.custom em {
     color: #999;
     display: inline-block;
     height: 14px;
     min-width: 14px; }
-    /* line 209, ../sass/controls/_controls.scss */
+    /* line 207, ../sass/controls/_controls.scss */
     label.checkbox.custom em:before {
       -moz-border-radius: 1.5px;
       -webkit-border-radius: 1.5px;
@@ -2431,51 +2430,51 @@ label.checkbox.custom {
       top: 0;
       position: absolute;
       text-align: center; }
-  /* line 227, ../sass/controls/_controls.scss */
+  /* line 225, ../sass/controls/_controls.scss */
   label.checkbox.custom.no-text {
     overflow: hidden;
     margin-right: 0;
     padding-left: 0;
     height: 14px;
     width: 14px; }
-    /* line 233, ../sass/controls/_controls.scss */
+    /* line 231, ../sass/controls/_controls.scss */
     label.checkbox.custom.no-text em {
       overflow: hidden; }
-  /* line 237, ../sass/controls/_controls.scss */
+  /* line 235, ../sass/controls/_controls.scss */
   label.checkbox.custom input {
     display: none; }
-    /* line 239, ../sass/controls/_controls.scss */
+    /* line 237, ../sass/controls/_controls.scss */
     label.checkbox.custom input:checked ~ em:before {
       background: #0099cc;
       color: #ccf2ff;
       content: "2"; }
 
-/* line 247, ../sass/controls/_controls.scss */
+/* line 245, ../sass/controls/_controls.scss */
 .input-labeled {
   margin-left: 5px; }
-  /* line 249, ../sass/controls/_controls.scss */
+  /* line 247, ../sass/controls/_controls.scss */
   .input-labeled label {
     display: inline-block;
     margin-right: 3px; }
-  /* line 253, ../sass/controls/_controls.scss */
+  /* line 251, ../sass/controls/_controls.scss */
   .input-labeled.inline {
     display: inline-block; }
-  /* line 256, ../sass/controls/_controls.scss */
+  /* line 254, ../sass/controls/_controls.scss */
   .input-labeled:first-child {
     margin-left: 0; }
 
-/* line 261, ../sass/controls/_controls.scss */
+/* line 259, ../sass/controls/_controls.scss */
 .btn-menu label.checkbox.custom {
   margin-left: 5px; }
 
-/* line 266, ../sass/controls/_controls.scss */
+/* line 264, ../sass/controls/_controls.scss */
 .item .checkbox.checked label {
   -moz-box-shadow: none;
   -webkit-box-shadow: none;
   box-shadow: none;
   border-bottom: none; }
 
-/* line 272, ../sass/controls/_controls.scss */
+/* line 270, ../sass/controls/_controls.scss */
 .btn-menu {
   background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzUyNTI1MiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzQ1NDU0NSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
   background-size: 100%;
@@ -2528,54 +2527,49 @@ label.checkbox.custom {
   /* line 175, ../sass/_mixins.scss */
   .btn-menu.btn-menu .invoke-menu {
     color: #757575; }
-  /* line 284, ../sass/controls/_controls.scss */
+  /* line 282, ../sass/controls/_controls.scss */
   .btn-menu:not(.disabled):hover {
     color: #cccccc; }
-  /* line 309, ../sass/controls/_controls.scss */
+  /* line 307, ../sass/controls/_controls.scss */
   .btn-menu .name {
     margin-left: 5px; }
-  /* line 312, ../sass/controls/_controls.scss */
+  /* line 310, ../sass/controls/_controls.scss */
   .btn-menu .menu {
     position: absolute;
     left: 0;
     text-align: left; }
-    /* line 317, ../sass/controls/_controls.scss */
+    /* line 315, ../sass/controls/_controls.scss */
     .btn-menu .menu .ui-symbol.icon {
       width: 12px; }
 
-/* line 323, ../sass/controls/_controls.scss */
-.top-bar .btn-menu {
-  height: 25px;
-  line-height: 25px;
-  padding-right: 10px; }
-  /* line 331, ../sass/controls/_controls.scss */
-  .top-bar .btn-menu.browse-btn {
-    margin-right: 5px;
-    padding-left: 25px; }
-    /* line 334, ../sass/controls/_controls.scss */
-    .top-bar .btn-menu.browse-btn .badge {
-      -moz-border-radius: 4.5px;
-      -webkit-border-radius: 4.5px;
-      border-radius: 4.5px;
-      display: block;
-      font-size: 1em;
-      line-height: 15px;
-      position: absolute;
-      top: 5px;
-      left: 5px;
-      bottom: 5px;
-      right: auto;
-      width: 15px;
-      height: auto; }
+/* line 329, ../sass/controls/_controls.scss */
+.top-bar .btn-menu.browse-btn {
+  margin-right: 5px;
+  padding-left: 25px; }
+  /* line 332, ../sass/controls/_controls.scss */
+  .top-bar .btn-menu.browse-btn .badge {
+    -moz-border-radius: 4.5px;
+    -webkit-border-radius: 4.5px;
+    border-radius: 4.5px;
+    display: block;
+    font-size: 1em;
+    line-height: 15px;
+    position: absolute;
+    top: 5px;
+    left: 5px;
+    bottom: 5px;
+    right: auto;
+    width: 15px;
+    height: auto; }
 
-/* line 350, ../sass/controls/_controls.scss */
+/* line 348, ../sass/controls/_controls.scss */
 .context-available {
   color: #0099cc; }
-  /* line 354, ../sass/controls/_controls.scss */
+  /* line 351, ../sass/controls/_controls.scss */
   .context-available:hover {
     color: deepskyblue; }
 
-/* line 359, ../sass/controls/_controls.scss */
+/* line 356, ../sass/controls/_controls.scss */
 .view-switcher {
   -moz-transition-property: visibility, opacity, background-color, border-color;
   -o-transition-property: visibility, opacity, background-color, border-color;
@@ -2594,53 +2588,51 @@ label.checkbox.custom {
 /* line 364, ../sass/controls/_controls.scss */
 .object-header {
   font-size: 1em; }
-  /* line 373, ../sass/controls/_controls.scss */
-  .object-header .title-label,
-  .object-header .type-icon,
-  .object-header .context-available {
-    vertical-align: middle; }
-  /* line 379, ../sass/controls/_controls.scss */
+  /* line 374, ../sass/controls/_controls.scss */
   .object-header > .type-icon {
     font-size: 120%;
     float: left;
     margin-right: 5px; }
-  /* line 386, ../sass/controls/_controls.scss */
+  /* line 380, ../sass/controls/_controls.scss */
   .object-header .l-elem-wrapper {
     display: flex;
     flex-flow: row nowrap;
     justify-content: flex-start; }
-  /* line 392, ../sass/controls/_controls.scss */
+  /* line 386, ../sass/controls/_controls.scss */
   .object-header .action {
     margin-right: 5px; }
-  /* line 396, ../sass/controls/_controls.scss */
+  /* line 390, ../sass/controls/_controls.scss */
   .object-header .title-label {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
     color: white;
     padding-right: 0.35em; }
-  /* line 403, ../sass/controls/_controls.scss */
+  /* line 397, ../sass/controls/_controls.scss */
   .object-header .context-available {
-    -moz-transition-property: opacity;
-    -o-transition-property: opacity;
-    -webkit-transition-property: opacity;
-    transition-property: opacity;
-    -moz-transition-duration: 0.25s;
-    -o-transition-duration: 0.25s;
-    -webkit-transition-duration: 0.25s;
-    transition-duration: 0.25s;
-    -moz-transition-timing-function: ease-in-out;
-    -o-transition-timing-function: ease-in-out;
-    -webkit-transition-timing-function: ease-in-out;
-    transition-timing-function: ease-in-out;
-    opacity: 0;
     font-size: 0.7em; }
-  /* line 411, ../sass/controls/_controls.scss */
-  .object-header:hover .context-available {
-    opacity: 1; }
+  @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
+    /* line 402, ../sass/controls/_controls.scss */
+    .object-header .context-available {
+      -moz-transition-property: opacity;
+      -o-transition-property: opacity;
+      -webkit-transition-property: opacity;
+      transition-property: opacity;
+      -moz-transition-duration: 0.25s;
+      -o-transition-duration: 0.25s;
+      -webkit-transition-duration: 0.25s;
+      transition-duration: 0.25s;
+      -moz-transition-timing-function: ease-in-out;
+      -o-transition-timing-function: ease-in-out;
+      -webkit-transition-timing-function: ease-in-out;
+      transition-timing-function: ease-in-out;
+      opacity: 0; }
+    /* line 407, ../sass/controls/_controls.scss */
+    .object-header:hover .context-available {
+      opacity: 1; } }
 
 /******************************************************** SLIDERS */
-/* line 423, ../sass/controls/_controls.scss */
+/* line 420, ../sass/controls/_controls.scss */
 .slider .slot {
   -moz-border-radius: 2px;
   -webkit-border-radius: 2px;
@@ -2661,7 +2653,7 @@ label.checkbox.custom {
   right: 0;
   bottom: auto;
   left: 0; }
-/* line 434, ../sass/controls/_controls.scss */
+/* line 431, ../sass/controls/_controls.scss */
 .slider .knob {
   background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzUyNTI1MiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzQ1NDU0NSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
   background-size: 100%;
@@ -2744,12 +2736,12 @@ label.checkbox.custom {
     -webkit-transition-timing-function: ease-in-out;
     transition-timing-function: ease-in-out;
     border-color: #0099cc; }
-  /* line 445, ../sass/controls/_controls.scss */
+  /* line 442, ../sass/controls/_controls.scss */
   .slider .knob:before {
     top: 1px;
     bottom: 3px;
     left: 5px; }
-/* line 452, ../sass/controls/_controls.scss */
+/* line 449, ../sass/controls/_controls.scss */
 .slider .range {
   background: rgba(0, 153, 204, 0.6);
   cursor: ew-resize;
@@ -2760,13 +2752,13 @@ label.checkbox.custom {
   left: auto;
   height: auto;
   width: auto; }
-  /* line 462, ../sass/controls/_controls.scss */
+  /* line 459, ../sass/controls/_controls.scss */
   .slider .range:hover {
     background: rgba(0, 153, 204, 0.7); }
 
 /******************************************************** BROWSER ELEMENTS */
 @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-  /* line 471, ../sass/controls/_controls.scss */
+  /* line 468, ../sass/controls/_controls.scss */
   ::-webkit-scrollbar {
     -moz-border-radius: 2px;
     -webkit-border-radius: 2px;
@@ -2783,7 +2775,7 @@ label.checkbox.custom {
     height: 10px;
     width: 10px; }
 
-  /* line 477, ../sass/controls/_controls.scss */
+  /* line 474, ../sass/controls/_controls.scss */
   ::-webkit-scrollbar-thumb {
     background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzY2NjY2NiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzU5NTk1OSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
     background-size: 100%;
@@ -2801,7 +2793,7 @@ label.checkbox.custom {
     -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
     box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
     border-top: 1px solid gray; }
-    /* line 484, ../sass/controls/_controls.scss */
+    /* line 481, ../sass/controls/_controls.scss */
     ::-webkit-scrollbar-thumb:hover {
       background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzgwODA4MCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzczNzM3MyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
       background-size: 100%;
@@ -2810,7 +2802,7 @@ label.checkbox.custom {
       background-image: -webkit-linear-gradient(#808080, #737373 20px);
       background-image: linear-gradient(#808080, #737373 20px); }
 
-  /* line 489, ../sass/controls/_controls.scss */
+  /* line 486, ../sass/controls/_controls.scss */
   ::-webkit-scrollbar-corner {
     background: rgba(0, 0, 0, 0.4); } }
 /*****************************************************************************
@@ -4531,14 +4523,18 @@ input[type="text"] {
   right: 5px;
   bottom: 5px;
   left: 5px; }
-/* line 53, ../sass/user-environ/_frame.scss */
+/* line 51, ../sass/user-environ/_frame.scss */
 .frame.frame-template .view-switcher {
-  opacity: 0;
+  line-height: 16px;
   z-index: 10; }
-/* line 57, ../sass/user-environ/_frame.scss */
-.frame.frame-template:hover .view-switcher {
-  opacity: 1; }
-/* line 65, ../sass/user-environ/_frame.scss */
+@media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
+  /* line 58, ../sass/user-environ/_frame.scss */
+  .frame.frame-template .view-switcher {
+    opacity: 0; }
+  /* line 61, ../sass/user-environ/_frame.scss */
+  .frame.frame-template:hover .view-switcher {
+    opacity: 1; } }
+/* line 69, ../sass/user-environ/_frame.scss */
 .frame .view-switcher .name {
   display: none; }
 
@@ -4695,12 +4691,12 @@ input[type="text"] {
  *****************************************************************************/
 /* line 22, ../sass/user-environ/_object-browse.scss */
 .object-browse-bar {
-  overflow: hidden;
+  overflow: visible;
   position: absolute;
-  top: 0px;
-  right: 0px;
-  bottom: 0px;
-  left: 0px;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
   width: auto;
   height: auto;
   -moz-box-sizing: border-box;
@@ -4709,10 +4705,10 @@ input[type="text"] {
   height: 24px;
   line-height: 24px;
   white-space: nowrap; }
-  /* line 29, ../sass/user-environ/_object-browse.scss */
+  /* line 30, ../sass/user-environ/_object-browse.scss */
   .object-browse-bar .left {
     padding-right: 5px; }
-    /* line 31, ../sass/user-environ/_object-browse.scss */
+    /* line 32, ../sass/user-environ/_object-browse.scss */
     .object-browse-bar .left .l-back {
       display: inline-block;
       float: left;
diff --git a/platform/commonUI/general/res/sass/controls/_buttons.scss b/platform/commonUI/general/res/sass/controls/_buttons.scss
index ab2285ab5c..fcb168466a 100644
--- a/platform/commonUI/general/res/sass/controls/_buttons.scss
+++ b/platform/commonUI/general/res/sass/controls/_buttons.scss
@@ -26,7 +26,8 @@ $pad: $interiorMargin * $baseRatio;
 .btn,
 .l-btn {
 	@include user-select(none);
-	line-height: 1.5em; // Was 1.25em
+	//line-height: 1.5em; // Was 1.25em
+	line-height: 150%;
 	padding: 0 $pad;
 	text-decoration: none;
 	&.lg,
diff --git a/platform/commonUI/general/res/sass/controls/_controls.scss b/platform/commonUI/general/res/sass/controls/_controls.scss
index b2a0352594..bcec870f95 100644
--- a/platform/commonUI/general/res/sass/controls/_controls.scss
+++ b/platform/commonUI/general/res/sass/controls/_controls.scss
@@ -102,7 +102,7 @@
 
 .btn-bar {
 	//	position: relative;
-	.btn,
+/*	.btn,
 	.btn-set,
 	.t-btn {
 		display: inline-block;
@@ -113,7 +113,7 @@
 		&:first-child {
 			//			margin-left: 0;
 		}
-	}
+	}*/
 }
 
 .l-composite-control {
@@ -153,6 +153,7 @@
 	font-size: 0.7rem;
 }
 
+/*
 .btn-set {
 	// Buttons that have a very tight conceptual grouping - no internal space between them.
 	display: inline-block;
@@ -171,24 +172,21 @@
 		}
 	}
 }
+*/
 
 .object-browse-bar .btn,
 .object-browse-bar .t-btn,
+.object-browse-bar .view-switcher,
 .top-bar .buttons-main .btn,
 .top-bar .buttons-main .t-btn,
+.top-bar .view-switcher,
 .tool-bar .btn,
 .tool-bar .t-btn {
 	$h: $btnToolbarH;
 	display: inline-block;
 	font-size: $h * $btnFontSizeToH;
-	height: $h;
-	line-height: $h - 3;
-	.icon:not(.invoke-menu) {
-		//		position: relative;
-		//		top: -0.04em;
-		//font-size: 150%;
-		//vertical-align: middle;
-	}
+	line-height: 200%;
+	vertical-align: top;
 }
 
 label.checkbox.custom {
@@ -325,9 +323,9 @@ label.checkbox.custom {
 	$p: 10px;
 	$badgeM: $interiorMargin;
 	$badgeD: $h - ($badgeM * 2);
-	height: $h;
-	line-height: $h;
-	padding-right: 10px;
+	//height: $h;
+	//line-height: $h;
+	//padding-right: 10px;
 	&.browse-btn {
 		margin-right: $interiorMargin;
 		padding-left: $badgeD + $badgeM * 2;
@@ -350,7 +348,6 @@ label.checkbox.custom {
 .context-available {
 	$c: $colorKey;
 	color: $c;
-	//padding: 0 5px;
 	&:hover {
 		color: lighten($c, 10%);
 	}
@@ -358,23 +355,21 @@ label.checkbox.custom {
 
 .view-switcher {
 	@include trans-prop-nice-fade($controlFadeMs);
+	.type-icon {
+		//vertical-align: top;
+	}
 }
 
 /******************************************************** OBJECT-HEADER */
 .object-header {
 	//@include test();
 	font-size: 1em;
-	//line-height: 120%;
-	.label {
-		//display: flex;
-		//flex-direction: row;
-	}
 
-	.title-label,
-	.type-icon,
-	.context-available {
+	> .title-label,
+	> .type-icon,
+	> .context-available {
 		//@include tmpBorder(#6666ff);
-		vertical-align: middle;
+		//vertical-align: middle;
 	}
 	> .type-icon {
 		font-size: 120%;
@@ -382,7 +377,6 @@ label.checkbox.custom {
 		margin-right: $interiorMargin;
 	}
 
-
 	.l-elem-wrapper {
 		display: flex;
 		flex-flow: row nowrap;
@@ -401,15 +395,18 @@ label.checkbox.custom {
 	}
 
 	.context-available {
-		@include trans-prop-nice(opacity, 0.25s);
-		opacity: 0;
 		font-size: 0.7em;
-		//position: absolute;
-		//right: 0;
 	}
-	&:hover {
+
+	@include desktop {
 		.context-available {
-			opacity: 1;
+			@include trans-prop-nice(opacity, 0.25s);
+			opacity: 0;
+		}
+		&:hover {
+			.context-available {
+				opacity: 1;
+			}
 		}
 	}
 }
diff --git a/platform/commonUI/general/res/sass/user-environ/_frame.scss b/platform/commonUI/general/res/sass/user-environ/_frame.scss
index 3fdc925b5b..567f2116a1 100644
--- a/platform/commonUI/general/res/sass/user-environ/_frame.scss
+++ b/platform/commonUI/general/res/sass/user-environ/_frame.scss
@@ -48,16 +48,20 @@
 		left: $myM;
 	}
 	&.frame-template {
-		// Hide the view switcher by default when it's in an element that's in a frame context
-		// Frame template is used because we need to target the lowest nested frame
 		.view-switcher {
-			opacity: 0;
+			line-height: 16px;
 			z-index: 10;
 		}
-		&:hover .view-switcher {
-			// Show the view switcher on frame hover
-			//display: inline-block !important;
-			opacity: 1;
+		// Hide the view switcher by default when it's in an element that's in a frame context
+		// Frame template is used because we need to target the lowest nested frame
+		@include desktop {
+			.view-switcher {
+				opacity: 0;
+			}
+			&:hover .view-switcher {
+				// Show the view switcher on frame hover
+				opacity: 1;
+			}
 		}
 	}
 	.view-switcher {
diff --git a/platform/commonUI/general/res/sass/user-environ/_object-browse.scss b/platform/commonUI/general/res/sass/user-environ/_object-browse.scss
index 3ec809343a..602a8adeae 100644
--- a/platform/commonUI/general/res/sass/user-environ/_object-browse.scss
+++ b/platform/commonUI/general/res/sass/user-environ/_object-browse.scss
@@ -20,7 +20,8 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 .object-browse-bar {
-    @include absPosDefault();
+    //@include test(blue);
+    @include absPosDefault(0, visible);
     @include box-sizing(border-box);
     height: $ueTopBarH;
     line-height: $ueTopBarH;
diff --git a/platform/commonUI/general/res/templates/controls/switcher.html b/platform/commonUI/general/res/templates/controls/switcher.html
index 3dec71ab6c..beaf497709 100644
--- a/platform/commonUI/general/res/templates/controls/switcher.html
+++ b/platform/commonUI/general/res/templates/controls/switcher.html
@@ -21,7 +21,7 @@
 -->
 <span ng-controller="ViewSwitcherController">
     <div
-	    class="view-switcher menu-element btn btn-menu dropdown click-invoke"
+	    class="view-switcher menu-element s-btn l-btn btn-menu dropdown click-invoke"
 	    ng-if="view.length > 1"
 	    ng-controller="ClickAwayController as toggle"
 	    >

From e1858bf0aebc9ead745d0d4166a693c5efff464b Mon Sep 17 00:00:00 2001
From: Charles Hacskaylo <charles.f.hacskaylo@nasa.gov>
Date: Tue, 25 Aug 2015 10:15:14 -0700
Subject: [PATCH 154/209] [Mobile] IN PROGRESS: Moved position of view-switcher

open #74
view-switcher in object browse and edit moved to precede
action buttons, with margin;
Re-located CSS for .btn, etc. from _controls.scss to _layout.scss;
Cleaned up line-spacing in object-header in .frame;
---
 .../browse/res/templates/browse-object.html   |  9 ++-
 .../general/res/css/theme-espresso.css        | 55 ++++++++++++-------
 .../general/res/sass/controls/_controls.scss  |  4 +-
 .../general/res/sass/user-environ/_frame.scss | 10 ++--
 .../res/sass/user-environ/_layout.scss        | 22 ++++++++
 .../res/sass/user-environ/_top-bar.scss       |  6 +-
 6 files changed, 71 insertions(+), 35 deletions(-)

diff --git a/platform/commonUI/browse/res/templates/browse-object.html b/platform/commonUI/browse/res/templates/browse-object.html
index 90b3c11504..fb1ae37740 100644
--- a/platform/commonUI/browse/res/templates/browse-object.html
+++ b/platform/commonUI/browse/res/templates/browse-object.html
@@ -28,15 +28,14 @@
         </div>
         <!-- Temporarily, on mobile, the button bar is hidden-->
         <div class="btn-bar right mobile-hide">
-            <mct-representation key="'action-group'"
-                                mct-object="domainObject"
-                                parameters="{ category: 'view-control' }">
-            </mct-representation>
-
             <mct-representation key="'switcher'"
                                 mct-object="domainObject"
                                 ng-model="representation">
             </mct-representation>
+            <mct-representation key="'action-group'"
+                                mct-object="domainObject"
+                                parameters="{ category: 'view-control' }">
+            </mct-representation>
         </div>
     </div>
 
diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index 28337e74f6..2854861951 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -735,6 +735,25 @@ mct-container {
       right: 3px; }
 
 /* line 299, ../sass/user-environ/_layout.scss */
+.object-browse-bar .btn,
+.object-browse-bar .t-btn,
+.object-browse-bar .view-switcher,
+.top-bar .buttons-main .btn,
+.top-bar .buttons-main .t-btn,
+.top-bar .view-switcher,
+.tool-bar .btn,
+.tool-bar .t-btn {
+  display: inline-block;
+  font-size: 11.25px;
+  line-height: 200%;
+  vertical-align: top; }
+
+/* line 316, ../sass/user-environ/_layout.scss */
+.object-browse-bar .view-switcher,
+.top-bar .view-switcher {
+  margin-right: 20px; }
+
+/* line 321, ../sass/user-environ/_layout.scss */
 .vscroll {
   overflow-y: auto; }
 
@@ -2382,8 +2401,7 @@ a.l-btn span {
 	}
 }
 */
-/* line 177, ../sass/controls/_controls.scss */
-.object-browse-bar .btn,
+/*.object-browse-bar .btn,
 .object-browse-bar .t-btn,
 .object-browse-bar .view-switcher,
 .top-bar .buttons-main .btn,
@@ -2391,11 +2409,12 @@ a.l-btn span {
 .top-bar .view-switcher,
 .tool-bar .btn,
 .tool-bar .t-btn {
-  display: inline-block;
-  font-size: 11.25px;
-  line-height: 200%;
-  vertical-align: top; }
-
+	$h: $btnToolbarH;
+	display: inline-block;
+	font-size: $h * $btnFontSizeToH;
+	line-height: 200%;
+	vertical-align: top;
+}*/
 /* line 192, ../sass/controls/_controls.scss */
 label.checkbox.custom {
   cursor: pointer;
@@ -4510,31 +4529,32 @@ input[type="text"] {
   /* line 28, ../sass/user-environ/_frame.scss */
   .frame.child-frame.panel:hover {
     border-color: #666666; }
-/* line 36, ../sass/user-environ/_frame.scss */
+/* line 32, ../sass/user-environ/_frame.scss */
 .frame > .object-header.abs, .btn-menu .frame > span.object-header.l-click-area {
   font-size: 0.75em;
-  height: 20px; }
-/* line 40, ../sass/user-environ/_frame.scss */
+  height: 16px;
+  line-height: 16px; }
+/* line 38, ../sass/user-environ/_frame.scss */
 .frame > .object-holder.abs, .btn-menu .frame > span.object-holder.l-click-area {
-  top: 23px; }
-/* line 43, ../sass/user-environ/_frame.scss */
+  top: 19px; }
+/* line 41, ../sass/user-environ/_frame.scss */
 .frame .contents {
   top: 5px;
   right: 5px;
   bottom: 5px;
   left: 5px; }
-/* line 51, ../sass/user-environ/_frame.scss */
+/* line 49, ../sass/user-environ/_frame.scss */
 .frame.frame-template .view-switcher {
   line-height: 16px;
   z-index: 10; }
 @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-  /* line 58, ../sass/user-environ/_frame.scss */
+  /* line 56, ../sass/user-environ/_frame.scss */
   .frame.frame-template .view-switcher {
     opacity: 0; }
-  /* line 61, ../sass/user-environ/_frame.scss */
+  /* line 59, ../sass/user-environ/_frame.scss */
   .frame.frame-template:hover .view-switcher {
     opacity: 1; } }
-/* line 69, ../sass/user-environ/_frame.scss */
+/* line 67, ../sass/user-environ/_frame.scss */
 .frame .view-switcher .name {
   display: none; }
 
@@ -4576,9 +4596,6 @@ input[type="text"] {
   font-size: 0.8em;
   left: auto;
   text-align: right; }
-  /* line 40, ../sass/user-environ/_top-bar.scss */
-  .top-bar .buttons-main .btn {
-    margin-left: 5px; }
 
 /* line 48, ../sass/user-environ/_top-bar.scss */
 .edit-mode .top-bar .buttons-main {
diff --git a/platform/commonUI/general/res/sass/controls/_controls.scss b/platform/commonUI/general/res/sass/controls/_controls.scss
index bcec870f95..4671d7d48a 100644
--- a/platform/commonUI/general/res/sass/controls/_controls.scss
+++ b/platform/commonUI/general/res/sass/controls/_controls.scss
@@ -174,7 +174,7 @@
 }
 */
 
-.object-browse-bar .btn,
+/*.object-browse-bar .btn,
 .object-browse-bar .t-btn,
 .object-browse-bar .view-switcher,
 .top-bar .buttons-main .btn,
@@ -187,7 +187,7 @@
 	font-size: $h * $btnFontSizeToH;
 	line-height: 200%;
 	vertical-align: top;
-}
+}*/
 
 label.checkbox.custom {
 	$bg: lighten($colorBodyBg, $ltGamma);
diff --git a/platform/commonUI/general/res/sass/user-environ/_frame.scss b/platform/commonUI/general/res/sass/user-environ/_frame.scss
index 567f2116a1..d67c0ccb9a 100644
--- a/platform/commonUI/general/res/sass/user-environ/_frame.scss
+++ b/platform/commonUI/general/res/sass/user-environ/_frame.scss
@@ -20,22 +20,20 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 .frame {
-	$ohH: 20px;
+	$ohH: 16px;
 	$bc: $colorInteriorBorder;
 	&.child-frame.panel {
 		background: $colorBodyBg;
 		border: 1px solid $bc;
 		&:hover {
 			border-color: lighten($bc, 10%);
-			//z-index: 2;
-		}
-		.contents {
-//			overflow: hidden;
 		}
 	}
 	>.object-header.abs {
+		//@include test(red);
 		font-size: 0.75em;
 		height: $ohH;
+		line-height: $ohH;
 	}
 	>.object-holder.abs {
 		top: $ohH + $interiorMarginSm;
@@ -49,7 +47,7 @@
 	}
 	&.frame-template {
 		.view-switcher {
-			line-height: 16px;
+			line-height: $ohH;
 			z-index: 10;
 		}
 		// Hide the view switcher by default when it's in an element that's in a frame context
diff --git a/platform/commonUI/general/res/sass/user-environ/_layout.scss b/platform/commonUI/general/res/sass/user-environ/_layout.scss
index 9538a2bb74..b06b00100c 100644
--- a/platform/commonUI/general/res/sass/user-environ/_layout.scss
+++ b/platform/commonUI/general/res/sass/user-environ/_layout.scss
@@ -296,6 +296,28 @@
 	}
 }
 
+.object-browse-bar .btn,
+.object-browse-bar .t-btn,
+.object-browse-bar .view-switcher,
+.top-bar .buttons-main .btn,
+.top-bar .buttons-main .t-btn,
+.top-bar .view-switcher,
+.tool-bar .btn,
+.tool-bar .t-btn {
+    $h: $btnToolbarH;
+    display: inline-block;
+    font-size: $h * $btnFontSizeToH;
+    line-height: 200%;
+    vertical-align: top;
+}
+
+.object-browse-bar,
+.top-bar {
+    .view-switcher {
+        margin-right: $interiorMarginLg * 2;
+    }
+}
+
 .vscroll {
     overflow-y: auto;
 }
diff --git a/platform/commonUI/general/res/sass/user-environ/_top-bar.scss b/platform/commonUI/general/res/sass/user-environ/_top-bar.scss
index 638edab9ec..7bb5ecd852 100644
--- a/platform/commonUI/general/res/sass/user-environ/_top-bar.scss
+++ b/platform/commonUI/general/res/sass/user-environ/_top-bar.scss
@@ -37,9 +37,9 @@
 		left: auto;
 		text-align: right;
 //		width: 200px;
-		.btn {
-			margin-left: $interiorMargin;
-		}
+//		.btn {
+//			margin-left: $interiorMargin;
+//		}
 	}
 }
 

From c71f1fe447133c93596e281e91181d0d9e577960 Mon Sep 17 00:00:00 2001
From: Charles Hacskaylo <charles.f.hacskaylo@nasa.gov>
Date: Tue, 25 Aug 2015 13:34:37 -0700
Subject: [PATCH 155/209] [Mobile] IN PROGRESS: Significant refactor in
 mobile/_layout.scss

open #74
Made view-switcher visible when browsing via mobile;
Fixed class in browse.html markup from left-menu to left;
Moved object-browse-bar, top-bar classes from _controls into _layout;
Renamed and simplified menu widths in mobile _constants;
Really significant refactor of mobiles/_layout;
Tweaks in user-environ/_layout;
TO-DO: figure out why object-browse-bar flex styles not
working in mobile;
---
 .../browse/res/templates/browse-object.html   |   7 +-
 .../commonUI/browse/res/templates/browse.html |   2 +-
 .../general/res/css/theme-espresso.css        | 321 ++++++------------
 .../general/res/sass/controls/_controls.scss  |   4 +-
 .../general/res/sass/mobile/_constants.scss   |   7 +-
 .../general/res/sass/mobile/_layout.scss      | 233 ++++---------
 .../res/sass/user-environ/_layout.scss        |   9 +-
 7 files changed, 188 insertions(+), 395 deletions(-)

diff --git a/platform/commonUI/browse/res/templates/browse-object.html b/platform/commonUI/browse/res/templates/browse-object.html
index fb1ae37740..80bb313d22 100644
--- a/platform/commonUI/browse/res/templates/browse-object.html
+++ b/platform/commonUI/browse/res/templates/browse-object.html
@@ -26,15 +26,16 @@
             <mct-representation key="'object-header'" mct-object="domainObject">
             </mct-representation>
         </div>
-        <!-- Temporarily, on mobile, the button bar is hidden-->
-        <div class="btn-bar right mobile-hide">
+        <div class="btn-bar right">
             <mct-representation key="'switcher'"
                                 mct-object="domainObject"
                                 ng-model="representation">
             </mct-representation>
+            <!-- Temporarily, on mobile, the action buttons are hidden-->
             <mct-representation key="'action-group'"
                                 mct-object="domainObject"
-                                parameters="{ category: 'view-control' }">
+                                parameters="{ category: 'view-control' }"
+                                class="mobile-hide">
             </mct-representation>
         </div>
     </div>
diff --git a/platform/commonUI/browse/res/templates/browse.html b/platform/commonUI/browse/res/templates/browse.html
index 8bb6b7fa8e..402cf7a197 100644
--- a/platform/commonUI/browse/res/templates/browse.html
+++ b/platform/commonUI/browse/res/templates/browse.html
@@ -24,7 +24,7 @@
     <mct-include key="'topbar-browse'"></mct-include>
     <div class="holder browse-area s-browse-area abs browse-wrapper" ng-class="treeClass ? 'browse-showtree' : 'browse-hidetree'">
         <mct-split-pane class='contents abs' anchor='left'>
-            <div class='split-pane-component treeview pane mobile-pane left-menu desktop-browse'>
+            <div class='split-pane-component treeview pane mobile-pane left desktop-browse'>
                 <div class="holder abs l-mobile">
                     <div class='tree-holder abs mobile-tree-holder'>
                         <mct-representation key="'tree'"
diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index 2854861951..b6af269225 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -563,10 +563,10 @@ mct-container {
 /* line 88, ../sass/user-environ/_layout.scss */
 .bar.l-flex {
   display: flex;
-  flex-flow: row nowrap;
-  align-items: stretch; }
-  /* line 92, ../sass/user-environ/_layout.scss */
+  flex-flow: row nowrap; }
+  /* line 91, ../sass/user-environ/_layout.scss */
   .bar.l-flex .left {
+    background-color: rgba(0, 128, 0, 0.2);
     flex: 1 1 auto; }
 
 /* line 99, ../sass/user-environ/_layout.scss */
@@ -673,68 +673,65 @@ mct-container {
 /* line 209, ../sass/user-environ/_layout.scss */
 .browse-mode .split-layout .split-pane-component.pane.left {
   min-width: 150px;
-  max-width: 50%; }
+  max-width: 800px;
+  width: 25%; }
 
-/* line 218, ../sass/user-environ/_layout.scss */
-.edit-mode .split-layout .split-pane-component.pane.right {
-  min-width: 150px;
-  max-width: 50%; }
-  /* line 221, ../sass/user-environ/_layout.scss */
-  .edit-mode .split-layout .split-pane-component.pane.right .split-pane-component.pane.bottom {
-    min-height: 50px;
-    max-height: 80%; }
+/* line 222, ../sass/user-environ/_layout.scss */
+.edit-mode .split-layout .split-pane-component.pane.right .split-pane-component.pane.bottom {
+  min-height: 50px;
+  max-height: 80%; }
 
-/* line 229, ../sass/user-environ/_layout.scss */
+/* line 230, ../sass/user-environ/_layout.scss */
 .pane {
   position: absolute; }
-  /* line 232, ../sass/user-environ/_layout.scss */
+  /* line 233, ../sass/user-environ/_layout.scss */
   .pane.treeview.left .create-btn-holder {
     bottom: auto;
     top: 0;
     height: 24px; }
-    /* line 235, ../sass/user-environ/_layout.scss */
+    /* line 236, ../sass/user-environ/_layout.scss */
     .pane.treeview.left .create-btn-holder .wrapper.menu-element {
       position: absolute;
       bottom: 5px; }
-  /* line 240, ../sass/user-environ/_layout.scss */
+  /* line 241, ../sass/user-environ/_layout.scss */
   .pane.treeview.left .tree-holder {
     overflow: auto;
     top: 34px;
     padding-right: 5px; }
-  /* line 248, ../sass/user-environ/_layout.scss */
+  /* line 249, ../sass/user-environ/_layout.scss */
   .pane.items .object-browse-bar .left.abs, .pane.items .object-browse-bar .btn-menu span.left.l-click-area, .btn-menu .pane.items .object-browse-bar span.left.l-click-area,
   .pane.items .object-browse-bar .right.abs,
   .pane.items .object-browse-bar .btn-menu span.right.l-click-area,
   .btn-menu .pane.items .object-browse-bar span.right.l-click-area {
     top: auto; }
-  /* line 259, ../sass/user-environ/_layout.scss */
+  /* line 260, ../sass/user-environ/_layout.scss */
   .pane.items .object-holder {
     top: 34px; }
-  /* line 263, ../sass/user-environ/_layout.scss */
+  /* line 264, ../sass/user-environ/_layout.scss */
   .pane .object-holder {
     overflow: auto; }
 
-/* line 271, ../sass/user-environ/_layout.scss */
+/* line 272, ../sass/user-environ/_layout.scss */
 .split-layout.horizontal > .pane {
   margin-top: 5px; }
-  /* line 274, ../sass/user-environ/_layout.scss */
+  /* line 275, ../sass/user-environ/_layout.scss */
   .split-layout.horizontal > .pane:first-child {
     margin-top: 0; }
-/* line 281, ../sass/user-environ/_layout.scss */
+/* line 282, ../sass/user-environ/_layout.scss */
 .split-layout.vertical > .pane {
   margin-left: 5px; }
-  /* line 284, ../sass/user-environ/_layout.scss */
+  /* line 285, ../sass/user-environ/_layout.scss */
   .split-layout.vertical > .pane > .holder {
     left: 0;
     right: 0; }
-  /* line 288, ../sass/user-environ/_layout.scss */
+  /* line 289, ../sass/user-environ/_layout.scss */
   .split-layout.vertical > .pane:first-child {
     margin-left: 0; }
-    /* line 290, ../sass/user-environ/_layout.scss */
+    /* line 291, ../sass/user-environ/_layout.scss */
     .split-layout.vertical > .pane:first-child .holder {
       right: 3px; }
 
-/* line 299, ../sass/user-environ/_layout.scss */
+/* line 300, ../sass/user-environ/_layout.scss */
 .object-browse-bar .btn,
 .object-browse-bar .t-btn,
 .object-browse-bar .view-switcher,
@@ -748,12 +745,12 @@ mct-container {
   line-height: 200%;
   vertical-align: top; }
 
-/* line 316, ../sass/user-environ/_layout.scss */
+/* line 317, ../sass/user-environ/_layout.scss */
 .object-browse-bar .view-switcher,
 .top-bar .view-switcher {
   margin-right: 20px; }
 
-/* line 321, ../sass/user-environ/_layout.scss */
+/* line 322, ../sass/user-environ/_layout.scss */
 .vscroll {
   overflow-y: auto; }
 
@@ -786,183 +783,115 @@ mct-container {
     top: 0 !important;
     right: 0;
     bottom: 0;
-    left: 0; } }
+    left: 0; }
 
-@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 35, ../sass/mobile/_layout.scss */
+  /* line 32, ../sass/mobile/_layout.scss */
+  .mobile-pane.right-repr {
+    -moz-transition-duration: 0.35s;
+    -o-transition-duration: 0.35s;
+    -webkit-transition-duration: 0.35s;
+    transition-duration: 0.35s;
+    transition-timing-function: ease;
+    backface-visibility: hidden;
+    margin-left: 0 !important; }
+
+  /* line 38, ../sass/mobile/_layout.scss */
   .user-environ .browse-area,
   .user-environ .edit-area,
   .user-environ .editor {
     top: 0;
     left: 0;
     right: 0;
-    bottom: 25px; } }
+    bottom: 25px; }
 
-@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 44, ../sass/mobile/_layout.scss */
   .holder.l-mobile {
     top: 10px !important;
     right: 10px !important;
     bottom: 10px !important;
-    left: 10px !important; } }
+    left: 10px !important; }
 
-@media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-  /* line 56, ../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 67, ../sass/mobile/_layout.scss */
+  /* line 54, ../sass/mobile/_layout.scss */
   .browse-hidetree {
     -moz-user-select: -moz-none;
     -ms-user-select: none;
     -webkit-user-select: none;
-    user-select: 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), 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 78, ../sass/mobile/_layout.scss */
-  .browse-hidetree .mobile-pane.left-menu {
-    -moz-transition-property: opacity;
-    -o-transition-property: opacity;
-    -webkit-transition-property: opacity;
-    transition-property: opacity;
-    -moz-transition-duration: 0.4s;
-    -o-transition-duration: 0.4s;
-    -webkit-transition-duration: 0.4s;
-    transition-duration: 0.4s;
-    -moz-transition-timing-function: ease-in-out;
-    -o-transition-timing-function: ease-in-out;
-    -webkit-transition-timing-function: ease-in-out;
-    transition-timing-function: ease-in-out;
-    opacity: 0;
-    right: 100% !important;
-    width: auto !important;
-    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 91, ../sass/mobile/_layout.scss */
-  .browse-hidetree .mobile-pane.right-repr {
-    -moz-transition-duration: 0.35s;
-    -o-transition-duration: 0.35s;
-    -webkit-transition-duration: 0.35s;
-    transition-duration: 0.35s;
-    transition-timing-function: ease;
-    backface-visibility: hidden;
-    left: auto !important;
-    width: 100% !important; } }
+    user-select: none; }
+    /* line 58, ../sass/mobile/_layout.scss */
+    .browse-hidetree .mobile-pane.left {
+      opacity: 0;
+      right: 100% !important;
+      width: auto !important;
+      overflow-y: hidden;
+      overflow-x: hidden; }
+    /* line 67, ../sass/mobile/_layout.scss */
+    .browse-hidetree .mobile-pane.right-repr {
+      left: 0 !important; }
 
-/* line 100, ../sass/mobile/_layout.scss */
-.mobile-tree-holder {
-  top: 30px; }
-
-@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 109, ../sass/mobile/_layout.scss */
+  /* line 74, ../sass/mobile/_layout.scss */
   .browse-showtree {
     -moz-user-select: -moz-none;
     -ms-user-select: none;
     -webkit-user-select: none;
-    user-select: 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), 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 120, ../sass/mobile/_layout.scss */
-  .browse-showtree .mobile-pane.left-menu {
-    -moz-transition-property: opacity;
-    -o-transition-property: opacity;
-    -webkit-transition-property: opacity;
-    transition-property: opacity;
-    -moz-transition-duration: 0.4s;
-    -o-transition-duration: 0.4s;
-    -webkit-transition-duration: 0.4s;
-    transition-duration: 0.4s;
-    -moz-transition-timing-function: ease-in-out;
-    -o-transition-timing-function: ease-in-out;
-    -webkit-transition-timing-function: ease-in-out;
-    transition-timing-function: ease-in-out;
-    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuNSIgeDI9IjEuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSI5OCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC4wIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuMyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
-    background-size: 100%;
-    background-image: -moz-linear-gradient(0deg, rgba(0, 0, 0, 0) 98%, rgba(0, 0, 0, 0.3) 100%);
-    background-image: -webkit-linear-gradient(0deg, rgba(0, 0, 0, 0) 98%, rgba(0, 0, 0, 0.3) 100%);
-    background-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 98%, rgba(0, 0, 0, 0.3) 100%);
-    opacity: 1;
-    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 120, ../sass/mobile/_layout.scss */
-  .browse-showtree .mobile-pane.left-menu {
-    right: 10% !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 120, ../sass/mobile/_layout.scss */
-  .browse-showtree .mobile-pane.left-menu {
-    right: 60% !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 120, ../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 120, ../sass/mobile/_layout.scss */
-  .browse-showtree .mobile-pane.left-menu {
-    right: 70% !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 144, ../sass/mobile/_layout.scss */
-  .browse-showtree .mobile-pane.right-repr {
-    -moz-transition-duration: 0.35s;
-    -o-transition-duration: 0.35s;
-    -webkit-transition-duration: 0.35s;
-    transition-duration: 0.35s;
-    transition-timing-function: ease;
-    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 144, ../sass/mobile/_layout.scss */
-  .browse-showtree .mobile-pane.right-repr {
-    left: 0 !important;
-    transform: translateX(90%); } }
-@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 144, ../sass/mobile/_layout.scss */
-  .browse-showtree .mobile-pane.right-repr {
-    width: 60% !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 144, ../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 144, ../sass/mobile/_layout.scss */
-  .browse-showtree .mobile-pane.right-repr {
-    width: 70% !important; } }
+    user-select: none; }
+    /* line 83, ../sass/mobile/_layout.scss */
+    .browse-showtree .mobile-pane.left {
+      -moz-transition-property: opacity;
+      -o-transition-property: opacity;
+      -webkit-transition-property: opacity;
+      transition-property: opacity;
+      -moz-transition-duration: 0.4s;
+      -o-transition-duration: 0.4s;
+      -webkit-transition-duration: 0.4s;
+      transition-duration: 0.4s;
+      -moz-transition-timing-function: ease-in-out;
+      -o-transition-timing-function: ease-in-out;
+      -webkit-transition-timing-function: ease-in-out;
+      transition-timing-function: ease-in-out;
+      background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuNSIgeDI9IjEuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSI5OCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC4wIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuMyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
+      background-size: 100%;
+      background-image: -moz-linear-gradient(0deg, rgba(0, 0, 0, 0) 98%, rgba(0, 0, 0, 0.3) 100%);
+      background-image: -webkit-linear-gradient(0deg, rgba(0, 0, 0, 0) 98%, rgba(0, 0, 0, 0.3) 100%);
+      background-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 98%, rgba(0, 0, 0, 0.3) 100%);
+      opacity: 1;
+      display: block !important;
+      right: auto !important;
+      width: 40% !important; }
+    /* line 93, ../sass/mobile/_layout.scss */
+    .browse-showtree .mobile-pane.right-repr {
+      left: 40% !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 171, ../sass/mobile/_layout.scss */
+  /* line 103, ../sass/mobile/_layout.scss */
   .mobile-menu-icon {
     font-size: 110%;
     position: absolute;
     top: 12px;
     left: 10px; }
 
-  /* line 178, ../sass/mobile/_layout.scss */
-  .object-browse-bar {
-    display: block !important;
-    left: 35px !important; }
-    /* line 183, ../sass/mobile/_layout.scss */
-    .object-browse-bar .context-available {
-      opacity: 1 !important; }
+  /* line 113, ../sass/mobile/_layout.scss */
+  .object-browse-bar .context-available {
+    opacity: 1 !important; }
+  /* line 116, ../sass/mobile/_layout.scss */
+  .object-browse-bar .view-switcher {
+    margin-right: 0 !important; }
 
-  /* line 188, ../sass/mobile/_layout.scss */
+  /* line 121, ../sass/mobile/_layout.scss */
   .tree-holder {
     overflow-x: hidden !important; }
 
-  /* line 192, ../sass/mobile/_layout.scss */
+  /* line 125, ../sass/mobile/_layout.scss */
   .mobile-disable-select {
     -moz-user-select: -moz-none;
     -ms-user-select: none;
     -webkit-user-select: none;
     user-select: none; }
 
-  /* line 197, ../sass/mobile/_layout.scss */
+  /* line 130, ../sass/mobile/_layout.scss */
   .mobile-hide,
   .mobile-hide-important {
     display: none !important; }
 
-  /* line 202, ../sass/mobile/_layout.scss */
+  /* line 135, ../sass/mobile/_layout.scss */
   .mobile-back-hide {
     pointer-events: none;
     -moz-transition-property: opacity;
@@ -979,7 +908,7 @@ mct-container {
     transition-timing-function: ease-in-out;
     opacity: 0; }
 
-  /* line 207, ../sass/mobile/_layout.scss */
+  /* line 140, ../sass/mobile/_layout.scss */
   .mobile-back-unhide {
     pointer-events: all;
     -moz-transition-property: opacity;
@@ -995,54 +924,18 @@ mct-container {
     -webkit-transition-timing-function: ease-in-out;
     transition-timing-function: ease-in-out;
     opacity: 1; } }
+@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) {
+  /* line 149, ../sass/mobile/_layout.scss */
+  .browse-showtree .mobile-pane.left {
+    width: 90% !important; }
+  /* line 152, ../sass/mobile/_layout.scss */
+  .browse-showtree .mobile-pane.right-repr {
+    left: 0 !important;
+    transform: translateX(90%); } }
 @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-  /* line 214, ../sass/mobile/_layout.scss */
+  /* line 160, ../sass/mobile/_layout.scss */
   .desktop-hide {
     display: none; } }
-
-/*
-
-.mobile-back-hide {
-    @include phoneandtablet {
-        pointer-events: none;
-        @include trans-prop-nice(opacity, .4s);
-        opacity: 0;
-    }
-}
-
-
-// Hides objects on phone and tablet
-.mobile-back-unhide {
-    @include phoneandtablet {
-        pointer-events: all;
-        @include trans-prop-nice(opacity, .4s);
-        opacity: 1;
-    }
-}
-
-
-// Hides objects only on the phone
-.phone-hide {
-    @include phone {
-        display: none;
-    }
-}
-
-.tree-holder {
-    @include phoneandtablet {
-        .tree-holder {
-            overflow-x: hidden !important;
-        }
-    }
-}
-.mobile-disable-select {
-    @include phoneandtablet {
-        .mobile-disable-select {
-            @include user-select(none);
-        }
-    }
-}
-*/
 /*****************************************************************************
 * Open MCT Web, Copyright (c) 2014-2015, United States Government
 * as represented by the Administrator of the National Aeronautics and Space
@@ -2401,7 +2294,8 @@ a.l-btn span {
 	}
 }
 */
-/*.object-browse-bar .btn,
+/* line 177, ../sass/controls/_controls.scss */
+.object-browse-bar .btn,
 .object-browse-bar .t-btn,
 .object-browse-bar .view-switcher,
 .top-bar .buttons-main .btn,
@@ -2409,12 +2303,11 @@ a.l-btn span {
 .top-bar .view-switcher,
 .tool-bar .btn,
 .tool-bar .t-btn {
-	$h: $btnToolbarH;
-	display: inline-block;
-	font-size: $h * $btnFontSizeToH;
-	line-height: 200%;
-	vertical-align: top;
-}*/
+  display: inline-block;
+  font-size: 11.25px;
+  line-height: 200%;
+  vertical-align: top; }
+
 /* line 192, ../sass/controls/_controls.scss */
 label.checkbox.custom {
   cursor: pointer;
diff --git a/platform/commonUI/general/res/sass/controls/_controls.scss b/platform/commonUI/general/res/sass/controls/_controls.scss
index 4671d7d48a..bcec870f95 100644
--- a/platform/commonUI/general/res/sass/controls/_controls.scss
+++ b/platform/commonUI/general/res/sass/controls/_controls.scss
@@ -174,7 +174,7 @@
 }
 */
 
-/*.object-browse-bar .btn,
+.object-browse-bar .btn,
 .object-browse-bar .t-btn,
 .object-browse-bar .view-switcher,
 .top-bar .buttons-main .btn,
@@ -187,7 +187,7 @@
 	font-size: $h * $btnFontSizeToH;
 	line-height: 200%;
 	vertical-align: top;
-}*/
+}
 
 label.checkbox.custom {
 	$bg: lighten($colorBodyBg, $ltGamma);
diff --git a/platform/commonUI/general/res/sass/mobile/_constants.scss b/platform/commonUI/general/res/sass/mobile/_constants.scss
index aedd4c3abd..737c06ac63 100644
--- a/platform/commonUI/general/res/sass/mobile/_constants.scss
+++ b/platform/commonUI/general/res/sass/mobile/_constants.scss
@@ -81,8 +81,5 @@ $desktopPortrait: "screen and #{$desktopPortraitCheck}";
 $desktopLandscape: "screen and #{$desktopLandscapeCheck}";
 
 /************************** DEVICE PARAMETERS FOR MENUS/REPRESENTATIONS */
-$phoneRepSizePortrait: 10%;
-$phoneRepSizeLandscape: 60%;
-$tabletRepSizePortrait: 500px;
-$tabletRepSizeLandscape: 70%;
-$desktopMenuSize: 25%;
+$proporMenuOnly: 90%;
+$proporMenuWithView: 40%;
diff --git a/platform/commonUI/general/res/sass/mobile/_layout.scss b/platform/commonUI/general/res/sass/mobile/_layout.scss
index e13334ec61..c073a65134 100644
--- a/platform/commonUI/general/res/sass/mobile/_layout.scss
+++ b/platform/commonUI/general/res/sass/mobile/_layout.scss
@@ -20,154 +20,86 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-// Wrapper of the entire 2 panes, only enacted on
-// phone and tablet. Also for the panes
-
-.browse-wrapper,
-.mobile-pane {
-    @include phoneandtablet {
+@include phoneandtablet {
+    // Wrapper of the entire 2 panes, only enacted on
+    // phone and tablet. Also for the panes
+    .browse-wrapper,
+    .mobile-pane {
         position: absolute;
         top: 0 !important; right: 0; bottom: 0; left: 0;
-        //white-space: nowrap; // CH CO
     }
-}
 
-.user-environ .browse-area,
-.user-environ .edit-area,
-.user-environ .editor {
-    @include phoneandtablet {
-        //@include test(red);
+    .mobile-pane.right-repr {
+        //@include test();
+        @include slMenuTransitions;
+        margin-left: 0 !important;
+    }
+
+    .user-environ .browse-area,
+    .user-environ .edit-area,
+    .user-environ .editor {
         top: 0; left: 0; right: 0; bottom: $ueFooterH;
     }
-}
 
-.holder.l-mobile {
-    @include phoneandtablet {
-        //@include test();
+    .holder.l-mobile {
         top: $bodyMargin !important;
         right: $bodyMargin !important;
         bottom: $bodyMargin !important;
         left: $bodyMargin !important;
     }
-}
 
-// Default views of the panels
-// if in desktop browser
-.desktop-browse {
-    @include desktop {
-        min-width: 150px;
-        max-width: 800px;
-        width: $desktopMenuSize;
-    }
-}
-
-// When the tree is hidden, these are the
-// classes used for the left menu and the
-// right representation.
-.browse-hidetree {
-    // NOTE: DISABLED SELECTION
-    // Selection disabled in both panes
-    // causing cut/copy/paste menu to
-    // not appear. Should me moved in
-    // future to properly work
-    @include phoneandtablet {
+    // When the tree is hidden, these are the
+    // classes used for the left menu and the
+    // right representation.
+    .browse-hidetree {
         @include user-select(none);
-    }
-    // Sets the left tree menu when the tree
-    // is hidden.
-    .mobile-pane.left-menu {
-        @include phoneandtablet {
-            @include trans-prop-nice(opacity, .4s);
+        // Sets the left tree menu when the tree
+        // is hidden.
+        .mobile-pane.left {
             opacity: 0;
             right: 100% !important;
             width: auto !important;
             overflow-y: hidden;
             overflow-x: hidden;
         }
-    }
-
-    // Sets the right represenation when
-    // the tree is hidden.
-    .mobile-pane.right-repr {
-        @include phoneandtablet {
-            @include slMenuTransitions;
-            left: auto !important;
-            width: 100% !important;
+        // Sets the right represenation when
+        // the tree is hidden.
+        .mobile-pane.right-repr {
+            //@include slMenuTransitions;
+            left: 0 !important;
+            //width: 100% !important;
         }
     }
-}
 
-.mobile-tree-holder {
-    top: 30px;
-}
-
-// When the tree is shown, these are
-// the classes used for the left menu
-// and the right menu (for each device &
-// orientation combination, separate
-// parameters are used)
-.browse-showtree {
-    // NOTE: DISABLED SELECTION
-    // Selection disabled in both panes
-    // causing cut/copy/paste menu to
-    // not appear. Should me moved in
-    // future to properly work
-    @include phoneandtablet {
+    .browse-showtree {
+        // NOTE: DISABLED SELECTION
+        // Selection disabled in both panes
+        // causing cut/copy/paste menu to
+        // not appear. Should me moved in
+        // future to properly work
         @include user-select(none);
-    }
-    // Sets the left tree menu when the tree
-    // is shown.
-    .mobile-pane.left-menu {
-        @include phoneandtablet {
+
+        // Sets the left tree menu when the tree is shown.
+        .mobile-pane.left {
             @include trans-prop-nice(opacity, .4s);
             @include background-image(linear-gradient(90deg, rgba(black, 0) 98%, rgba(black, 0.3) 100%));
             opacity: 1;
             display: block !important;
-            width: auto !important;
+            //width: auto !important; // CH CO
+            right: auto !important;
+            width: $proporMenuWithView !important;
         }
-        // On both phones and tablets, the amount of
-        // space allowed for the right pane is specified
-        @include phonePortrait {
-            right: $phoneRepSizePortrait !important;
-        }
-        @include phoneLandscape {
-            right: $phoneRepSizeLandscape !important;
-        }
-        @include tabletPortrait {
-            right: $tabletRepSizePortrait !important;
-        }
-        @include tabletLandscape {
-            right: $tabletRepSizeLandscape !important;
-        }
-    }
-    // Sets the right representation when the tree is shown.
-    .mobile-pane.right-repr {
-        @include phoneandtablet {
-            @include slMenuTransitions;
-            left: auto !important;
-        }
-        // On both phones and tablets, the width of
-        // the right pane is specified
-        @include phonePortrait {
-            //width: $phoneRepSizePortrait !important;
-            left: 0 !important;
-            transform: translateX(100% - $phoneRepSizePortrait);
-        }
-        @include phoneLandscape {
-            width: $phoneRepSizeLandscape !important;
-        }
-        @include tabletPortrait {
-            //@include test(green);
-            width: $tabletRepSizePortrait !important;
-        }
-        @include tabletLandscape {
-            //@include test(orange);
-            width: $tabletRepSizeLandscape !important;
-        }
-    }
-}
+        // Sets the right representation when the tree is shown.
+        .mobile-pane.right-repr {
+            //@include slMenuTransitions; CH MOVED
+            left: $proporMenuWithView !important;
+            //width: auto !important;
+
+            //left: 0 !important;
+            //transform: translateX($proporMenuWithView);
+        }
+    }
 
-@include phoneandtablet {
     .mobile-menu-icon {
         font-size: 110%;
         position: absolute;
@@ -177,12 +109,13 @@
 
     .object-browse-bar {
         //@include test();
-        display: block !important;
-        //font-size: 0.95em;
-        left: 35px !important;
+        //left: 35px !important; // TEMP
         .context-available {
             opacity: 1 !important;
         }
+        .view-switcher {
+            margin-right: 0 !important;
+        }
     }
 
     .tree-holder {
@@ -211,52 +144,20 @@
     }
 }
 
-.desktop-hide {
-    @include desktop {
-        display: none;
-    }
-}
-
-/*
-
-.mobile-back-hide {
-    @include phoneandtablet {
-        pointer-events: none;
-        @include trans-prop-nice(opacity, .4s);
-        opacity: 0;
-    }
-}
-
-
-// Hides objects on phone and tablet
-.mobile-back-unhide {
-    @include phoneandtablet {
-        pointer-events: all;
-        @include trans-prop-nice(opacity, .4s);
-        opacity: 1;
-    }
-}
-
-
-// Hides objects only on the phone
-.phone-hide {
-    @include phone {
-        display: none;
-    }
-}
-
-.tree-holder {
-    @include phoneandtablet {
-        .tree-holder {
-            overflow-x: hidden !important;
+@include phonePortrait {
+    .browse-showtree {
+        .mobile-pane.left {
+            width: $proporMenuOnly !important;
+        }
+        .mobile-pane.right-repr {
+            left: 0 !important;
+            transform: translateX($proporMenuOnly);
         }
     }
 }
-.mobile-disable-select {
-    @include phoneandtablet {
-        .mobile-disable-select {
-            @include user-select(none);
-        }
+
+@include desktop {
+    .desktop-hide {
+        display: none;
     }
-}
-*/
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/platform/commonUI/general/res/sass/user-environ/_layout.scss b/platform/commonUI/general/res/sass/user-environ/_layout.scss
index b06b00100c..1c87dc6d0e 100644
--- a/platform/commonUI/general/res/sass/user-environ/_layout.scss
+++ b/platform/commonUI/general/res/sass/user-environ/_layout.scss
@@ -88,8 +88,8 @@
     &.l-flex {
         display: flex;
         flex-flow: row nowrap;
-        align-items: stretch;
         .left {
+            @include test(green);
             flex: 1 1 auto;
         }
     }
@@ -208,7 +208,8 @@
     .split-layout {
         .split-pane-component.pane.left {
             min-width: 150px;
-            max-width: 50%;
+            max-width: 800px;
+            width: $ueBrowseLeftPaneW;
         }
     }
 }
@@ -216,8 +217,8 @@
 .edit-mode {
     .split-layout {
         .split-pane-component.pane.right {
-            min-width: 150px;
-            max-width: 50%;
+            //min-width: 150px;
+            //max-width: 50%;
             .split-pane-component.pane.bottom {
                 min-height: 50px;
                 max-height: 80%;

From fd5a911d501d8fb8e60b3475f95eadcbee941efb Mon Sep 17 00:00:00 2001
From: Charles Hacskaylo <charles.f.hacskaylo@nasa.gov>
Date: Tue, 25 Aug 2015 13:51:02 -0700
Subject: [PATCH 156/209] [Mobile] IN PROGRESS: Fixed object-browse-bar flex

open #74
Also set left position of .object-browse-bar;
---
 .../general/res/css/theme-espresso.css         | 18 ++++++++++--------
 .../general/res/sass/mobile/_constants.scss    |  1 -
 .../general/res/sass/mobile/_layout.scss       |  2 +-
 .../general/res/sass/user-environ/_layout.scss |  4 ++--
 4 files changed, 13 insertions(+), 12 deletions(-)

diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index b6af269225..f06a544a3d 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -566,8 +566,7 @@ mct-container {
   flex-flow: row nowrap; }
   /* line 91, ../sass/user-environ/_layout.scss */
   .bar.l-flex .left {
-    background-color: rgba(0, 128, 0, 0.2);
-    flex: 1 1 auto; }
+    flex: 1 1 0; }
 
 /* line 99, ../sass/user-environ/_layout.scss */
 .user-environ .browse-area,
@@ -868,12 +867,15 @@ mct-container {
     top: 12px;
     left: 10px; }
 
-  /* line 113, ../sass/mobile/_layout.scss */
-  .object-browse-bar .context-available {
-    opacity: 1 !important; }
-  /* line 116, ../sass/mobile/_layout.scss */
-  .object-browse-bar .view-switcher {
-    margin-right: 0 !important; }
+  /* line 110, ../sass/mobile/_layout.scss */
+  .object-browse-bar {
+    left: 30px !important; }
+    /* line 113, ../sass/mobile/_layout.scss */
+    .object-browse-bar .context-available {
+      opacity: 1 !important; }
+    /* line 116, ../sass/mobile/_layout.scss */
+    .object-browse-bar .view-switcher {
+      margin-right: 0 !important; }
 
   /* line 121, ../sass/mobile/_layout.scss */
   .tree-holder {
diff --git a/platform/commonUI/general/res/sass/mobile/_constants.scss b/platform/commonUI/general/res/sass/mobile/_constants.scss
index 737c06ac63..913d47c0e3 100644
--- a/platform/commonUI/general/res/sass/mobile/_constants.scss
+++ b/platform/commonUI/general/res/sass/mobile/_constants.scss
@@ -30,7 +30,6 @@ $tabletItemH: floor($ueBrowseGridItemLg/3);
 
 /************************** MOBILE TREE MENU DIMENSIONS */
 $mobileTreeItemH: 35px;
-$mobile-startingTreeLeft: 3px;
 $mobileTreeItemIndent: 20px;
 $mobileTreeRightArrowW: 30px;
 
diff --git a/platform/commonUI/general/res/sass/mobile/_layout.scss b/platform/commonUI/general/res/sass/mobile/_layout.scss
index c073a65134..008beef117 100644
--- a/platform/commonUI/general/res/sass/mobile/_layout.scss
+++ b/platform/commonUI/general/res/sass/mobile/_layout.scss
@@ -109,7 +109,7 @@
 
     .object-browse-bar {
         //@include test();
-        //left: 35px !important; // TEMP
+        left: 30px !important;
         .context-available {
             opacity: 1 !important;
         }
diff --git a/platform/commonUI/general/res/sass/user-environ/_layout.scss b/platform/commonUI/general/res/sass/user-environ/_layout.scss
index 1c87dc6d0e..e8960464f8 100644
--- a/platform/commonUI/general/res/sass/user-environ/_layout.scss
+++ b/platform/commonUI/general/res/sass/user-environ/_layout.scss
@@ -89,8 +89,8 @@
         display: flex;
         flex-flow: row nowrap;
         .left {
-            @include test(green);
-            flex: 1 1 auto;
+            //@include test(green);
+            flex: 1 1 0;
         }
     }
 }

From 07d0706cd1a611f97049828be73da009b5c3aaf7 Mon Sep 17 00:00:00 2001
From: Charles Hacskaylo <charles.f.hacskaylo@nasa.gov>
Date: Tue, 25 Aug 2015 14:17:34 -0700
Subject: [PATCH 157/209] [Mobile] IN PROGRESS:

open #74
Added name for "base" (unknown) type in core/bundle.json;
Fixes to grid-item .details element:
- ellipsize,
- type now displayed properly;
- number of items with correct plural syntax;
---
 .../browse/res/templates/items/grid-item.html |  6 +--
 platform/commonUI/general/res/css/items.css   | 13 +++---
 .../general/res/css/theme-espresso.css        | 44 +++++++++----------
 .../general/res/sass/items/_item.scss         |  1 +
 platform/core/bundle.json                     |  1 +
 5 files changed, 34 insertions(+), 31 deletions(-)

diff --git a/platform/commonUI/browse/res/templates/items/grid-item.html b/platform/commonUI/browse/res/templates/items/grid-item.html
index f1fd6dd5ee..647d8e26da 100644
--- a/platform/commonUI/browse/res/templates/items/grid-item.html
+++ b/platform/commonUI/browse/res/templates/items/grid-item.html
@@ -39,11 +39,9 @@
         <div class='bottom-bar bar abs'>
             <div class='title'>{{model.name}}</div>
             <div class='details'>
+                <span>{{type.getName()}}</span>
                 <span ng-show="model.composition !== undefined">
-                    {{model.composition.length}} Items
-                </span>
-                <span ng-show="model.composition == undefined">
-                    {{model.name}}
+                    - {{model.composition.length}} Item<span ng-show="model.composition.length > 1">s</span>
                 </span>
             </div>
         </div>
diff --git a/platform/commonUI/general/res/css/items.css b/platform/commonUI/general/res/css/items.css
index cf77cbed9a..a30f37c1c6 100644
--- a/platform/commonUI/general/res/css/items.css
+++ b/platform/commonUI/general/res/css/items.css
@@ -294,8 +294,11 @@
       color: #cccccc; }
     /* line 133, ../sass/items/_item.scss */
     .items-holder .item.grid-item .details {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
       font-size: 0.8em; }
-    /* line 136, ../sass/items/_item.scss */
+    /* line 137, ../sass/items/_item.scss */
     .items-holder .item.grid-item.selected {
       background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzBhYzJmZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwYjRmMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
       background-size: 100%;
@@ -332,16 +335,16 @@
       /* line 175, ../sass/_mixins.scss */
       .items-holder .item.grid-item.selected.btn-menu .invoke-menu {
         color: #52d4ff; }
-      /* line 141, ../sass/items/_item.scss */
+      /* line 142, ../sass/items/_item.scss */
       .items-holder .item.grid-item.selected .item-type, .items-holder .item.grid-item.selected .top-bar .icon:not(.alert) {
         color: #80dfff; }
-      /* line 142, ../sass/items/_item.scss */
+      /* line 143, ../sass/items/_item.scss */
       .items-holder .item.grid-item.selected .item-main .item-open {
         color: #80dfff; }
-      /* line 143, ../sass/items/_item.scss */
+      /* line 144, ../sass/items/_item.scss */
       .items-holder .item.grid-item.selected .title {
         color: white; }
-      /* line 145, ../sass/items/_item.scss */
+      /* line 146, ../sass/items/_item.scss */
       .items-holder .item.grid-item.selected:hover .item-main .item-type {
         color: white !important; }
 
diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index f06a544a3d..bdda60265b 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -775,7 +775,7 @@ mct-container {
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 @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 26, ../sass/mobile/_layout.scss */
+  /* line 30, ../sass/mobile/_layout.scss */
   .browse-wrapper,
   .mobile-pane {
     position: absolute;
@@ -784,7 +784,7 @@ mct-container {
     bottom: 0;
     left: 0; }
 
-  /* line 32, ../sass/mobile/_layout.scss */
+  /* line 36, ../sass/mobile/_layout.scss */
   .mobile-pane.right-repr {
     -moz-transition-duration: 0.35s;
     -o-transition-duration: 0.35s;
@@ -794,7 +794,7 @@ mct-container {
     backface-visibility: hidden;
     margin-left: 0 !important; }
 
-  /* line 38, ../sass/mobile/_layout.scss */
+  /* line 42, ../sass/mobile/_layout.scss */
   .user-environ .browse-area,
   .user-environ .edit-area,
   .user-environ .editor {
@@ -803,37 +803,37 @@ mct-container {
     right: 0;
     bottom: 25px; }
 
-  /* line 44, ../sass/mobile/_layout.scss */
+  /* line 48, ../sass/mobile/_layout.scss */
   .holder.l-mobile {
     top: 10px !important;
     right: 10px !important;
     bottom: 10px !important;
     left: 10px !important; }
 
-  /* line 54, ../sass/mobile/_layout.scss */
+  /* line 58, ../sass/mobile/_layout.scss */
   .browse-hidetree {
     -moz-user-select: -moz-none;
     -ms-user-select: none;
     -webkit-user-select: none;
     user-select: none; }
-    /* line 58, ../sass/mobile/_layout.scss */
+    /* line 62, ../sass/mobile/_layout.scss */
     .browse-hidetree .mobile-pane.left {
       opacity: 0;
       right: 100% !important;
       width: auto !important;
       overflow-y: hidden;
       overflow-x: hidden; }
-    /* line 67, ../sass/mobile/_layout.scss */
+    /* line 71, ../sass/mobile/_layout.scss */
     .browse-hidetree .mobile-pane.right-repr {
       left: 0 !important; }
 
-  /* line 74, ../sass/mobile/_layout.scss */
+  /* line 78, ../sass/mobile/_layout.scss */
   .browse-showtree {
     -moz-user-select: -moz-none;
     -ms-user-select: none;
     -webkit-user-select: none;
     user-select: none; }
-    /* line 83, ../sass/mobile/_layout.scss */
+    /* line 87, ../sass/mobile/_layout.scss */
     .browse-showtree .mobile-pane.left {
       -moz-transition-property: opacity;
       -o-transition-property: opacity;
@@ -856,44 +856,44 @@ mct-container {
       display: block !important;
       right: auto !important;
       width: 40% !important; }
-    /* line 93, ../sass/mobile/_layout.scss */
+    /* line 97, ../sass/mobile/_layout.scss */
     .browse-showtree .mobile-pane.right-repr {
       left: 40% !important; }
 
-  /* line 103, ../sass/mobile/_layout.scss */
+  /* line 107, ../sass/mobile/_layout.scss */
   .mobile-menu-icon {
     font-size: 110%;
     position: absolute;
     top: 12px;
     left: 10px; }
 
-  /* line 110, ../sass/mobile/_layout.scss */
+  /* line 114, ../sass/mobile/_layout.scss */
   .object-browse-bar {
     left: 30px !important; }
-    /* line 113, ../sass/mobile/_layout.scss */
+    /* line 117, ../sass/mobile/_layout.scss */
     .object-browse-bar .context-available {
       opacity: 1 !important; }
-    /* line 116, ../sass/mobile/_layout.scss */
+    /* line 120, ../sass/mobile/_layout.scss */
     .object-browse-bar .view-switcher {
       margin-right: 0 !important; }
 
-  /* line 121, ../sass/mobile/_layout.scss */
+  /* line 125, ../sass/mobile/_layout.scss */
   .tree-holder {
     overflow-x: hidden !important; }
 
-  /* line 125, ../sass/mobile/_layout.scss */
+  /* line 129, ../sass/mobile/_layout.scss */
   .mobile-disable-select {
     -moz-user-select: -moz-none;
     -ms-user-select: none;
     -webkit-user-select: none;
     user-select: none; }
 
-  /* line 130, ../sass/mobile/_layout.scss */
+  /* line 134, ../sass/mobile/_layout.scss */
   .mobile-hide,
   .mobile-hide-important {
     display: none !important; }
 
-  /* line 135, ../sass/mobile/_layout.scss */
+  /* line 139, ../sass/mobile/_layout.scss */
   .mobile-back-hide {
     pointer-events: none;
     -moz-transition-property: opacity;
@@ -910,7 +910,7 @@ mct-container {
     transition-timing-function: ease-in-out;
     opacity: 0; }
 
-  /* line 140, ../sass/mobile/_layout.scss */
+  /* line 144, ../sass/mobile/_layout.scss */
   .mobile-back-unhide {
     pointer-events: all;
     -moz-transition-property: opacity;
@@ -927,15 +927,15 @@ mct-container {
     transition-timing-function: ease-in-out;
     opacity: 1; } }
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) {
-  /* line 149, ../sass/mobile/_layout.scss */
+  /* line 153, ../sass/mobile/_layout.scss */
   .browse-showtree .mobile-pane.left {
     width: 90% !important; }
-  /* line 152, ../sass/mobile/_layout.scss */
+  /* line 156, ../sass/mobile/_layout.scss */
   .browse-showtree .mobile-pane.right-repr {
     left: 0 !important;
     transform: translateX(90%); } }
 @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-  /* line 160, ../sass/mobile/_layout.scss */
+  /* line 164, ../sass/mobile/_layout.scss */
   .desktop-hide {
     display: none; } }
 /*****************************************************************************
diff --git a/platform/commonUI/general/res/sass/items/_item.scss b/platform/commonUI/general/res/sass/items/_item.scss
index c04568d8fa..55c37b2884 100644
--- a/platform/commonUI/general/res/sass/items/_item.scss
+++ b/platform/commonUI/general/res/sass/items/_item.scss
@@ -131,6 +131,7 @@
                 color: lighten($colorBodyFg, 20%);
             }
             .details {
+                @include ellipsize();
                 font-size: 0.8em;
             }
 	        &.selected {
diff --git a/platform/core/bundle.json b/platform/core/bundle.json
index c8c56299f6..f5bf73b8fc 100644
--- a/platform/core/bundle.json
+++ b/platform/core/bundle.json
@@ -145,6 +145,7 @@
                 "glyph": "\u003f"
             },
             {
+                "name": "Unknown Type",
                 "glyph": "\u003f"
             }
         ],

From d80c359a8639ca573850da60b14a88cdff55f9fd Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Tue, 25 Aug 2015 14:20:36 -0700
Subject: [PATCH 158/209] [Mobile] Tests

Fixed BrowseControllerSpec test
to account for new  call. Now
expects destroy and select-obj calls.
---
 platform/commonUI/browse/test/BrowseControllerSpec.js | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/platform/commonUI/browse/test/BrowseControllerSpec.js b/platform/commonUI/browse/test/BrowseControllerSpec.js
index 722b7b4132..136b44cd30 100644
--- a/platform/commonUI/browse/test/BrowseControllerSpec.js
+++ b/platform/commonUI/browse/test/BrowseControllerSpec.js
@@ -164,7 +164,12 @@ define(
             // lets the html code know if the
             // tree menu is open.
             it("calls the treeSlide function", function () {
-                mockScope.treeSlide();
+                expect(mockScope.$on).toHaveBeenCalledWith(
+                    "select-obj",
+                    jasmine.any(Function)
+                );
+                
+                mockScope.$on.calls[1].args[1]();
             });
 
             it("releases its navigation listener when its scope is destroyed", function () {
@@ -172,7 +177,8 @@ define(
                     "$destroy",
                     jasmine.any(Function)
                 );
-                mockScope.$on.mostRecentCall.args[1]();
+                
+                mockScope.$on.calls[0].args[1]();
                 // Should remove the listener it added earlier
                 expect(mockNavigationService.removeListener).toHaveBeenCalledWith(
                     mockNavigationService.addListener.mostRecentCall.args[0]

From 9cd57614e4fc4f63bb968a2d3287ca1cf7f1d6d6 Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Tue, 25 Aug 2015 14:33:48 -0700
Subject: [PATCH 159/209] [Mobile] AgentService & Tests

Adjusted the getOrientation of agentService to
inject the window instead of calling for it in
agentService. Also adjusted treeNodeController
for this. Added tests for the agentService's
getOrientation function.
---
 .../general/src/controllers/TreeNodeController.js |  2 +-
 .../commonUI/general/src/services/AgentService.js |  9 +++++----
 .../general/test/services/AgentServiceSpec.js     | 15 +++++----------
 3 files changed, 11 insertions(+), 15 deletions(-)

diff --git a/platform/commonUI/general/src/controllers/TreeNodeController.js b/platform/commonUI/general/src/controllers/TreeNodeController.js
index 96f89ee2e0..0aba8fc246 100644
--- a/platform/commonUI/general/src/controllers/TreeNodeController.js
+++ b/platform/commonUI/general/src/controllers/TreeNodeController.js
@@ -182,7 +182,7 @@ define(
         // and in portrait mode, than, hide the tree menu
         TreeNodeController.prototype.setObject = function (ngModel, domainObject) {
             ngModel.selectedObject = domainObject;
-            if (this.agentService.getOrientation() === "portrait" &&
+            if (this.agentService.getOrientation(window.innerWidth, window.innerHeight) === "portrait" &&
                     this.agentService.isPhone(navigator.userAgent)) {
                 this.$scope.$emit('select-obj');
             }
diff --git a/platform/commonUI/general/src/services/AgentService.js b/platform/commonUI/general/src/services/AgentService.js
index fa790e966f..1c7c83c9c3 100644
--- a/platform/commonUI/general/src/services/AgentService.js
+++ b/platform/commonUI/general/src/services/AgentService.js
@@ -67,11 +67,12 @@ define(
             }
 
             // Returns the orientation of the device based on the
-            // device's window dimensions
-            function getOrientation() {
-                if (window.innerWidth > window.innerHeight) {
+            // device's window dimensions, pass in the innerWidth
+            // and innerheight of the current window
+            function getOrientation(innerWidth, innerHeight) {
+                if (innerWidth > innerHeight) {
                     return "landscape";
-                } else if (window.innerWidth < window.innerHeight) {
+                } else if (innerWidth < innerHeight) {
                     return "portrait";
                 }
             }
diff --git a/platform/commonUI/general/test/services/AgentServiceSpec.js b/platform/commonUI/general/test/services/AgentServiceSpec.js
index e0f689ddfc..e24cc8e7f7 100644
--- a/platform/commonUI/general/test/services/AgentServiceSpec.js
+++ b/platform/commonUI/general/test/services/AgentServiceSpec.js
@@ -38,8 +38,8 @@ define(
                 // Creates a mockLocation, used to 
                 // do the view search
                 mockWindow = jasmine.createSpyObj(
-                    "$window",
-                    [ "outerWidth", "outerHeight" ]
+                    "window",
+                    [ "innerWidth", "innerHeight" ]
                 );
                 
                 mockNavigator = jasmine.createSpyObj(
@@ -47,7 +47,7 @@ define(
                     [ "userAgent" ]
                 );
                 
-                agentService = new AgentService(mockWindow);
+                agentService = new AgentService();
             });
             
             it("get current device user agent", function () {
@@ -61,13 +61,8 @@ define(
             });
             
             it("get orientation of the current device", function () {
-                mockWindow.outerWidth = 768;
-                mockWindow.outerHeight = 1024;
-                agentService.getOrientation();
-                
-                mockWindow.outerWidth = 1024;
-                mockWindow.outerHeight = 768;
-                agentService.getOrientation();
+                agentService.getOrientation(1024, 768);
+                agentService.getOrientation(768, 1024);
             });
         });
     }

From 0fa330adff264cdba41b2e8b0af252e3227b5bea Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Tue, 25 Aug 2015 14:49:38 -0700
Subject: [PATCH 160/209] [Mobile] Tests

Adjusted TreeNodeControllerSpec to
test setObject prototype.
---
 .../controllers/TreeNodeControllerSpec.js     | 20 +++++++++++++++++--
 1 file changed, 18 insertions(+), 2 deletions(-)

diff --git a/platform/commonUI/general/test/controllers/TreeNodeControllerSpec.js b/platform/commonUI/general/test/controllers/TreeNodeControllerSpec.js
index 67e6cf7142..247120cdec 100644
--- a/platform/commonUI/general/test/controllers/TreeNodeControllerSpec.js
+++ b/platform/commonUI/general/test/controllers/TreeNodeControllerSpec.js
@@ -30,6 +30,8 @@ define(
             var mockScope,
                 mockTimeout,
                 mockAgentService,
+                mockNgModel,
+                mockDomainObject,
                 controller;
 
             function TestObject(id, context) {
@@ -42,9 +44,18 @@ define(
             }
 
             beforeEach(function () {
-                mockScope = jasmine.createSpyObj("$scope", ["$watch", "$on"]);
+                mockScope = jasmine.createSpyObj("$scope", ["$watch", "$on", "$emit"]);
                 mockTimeout = jasmine.createSpy("$timeout");
-                mockAgentService = jasmine.createSpyObj("agentService", ["isMobile"]);
+                mockAgentService = jasmine.createSpyObj("agentService", ["isMobile", "isPhone", "getOrientation"]);
+                mockNgModel = jasmine.createSpyObj("ngModel", ["selectedObject"]);
+                mockDomainObject = jasmine.createSpyObj(
+                    "domainObject",
+                    [ "getId", "getCapability", "getModel", "useCapability" ]
+                );
+                
+                mockAgentService.getOrientation.andReturn("portrait");
+                mockAgentService.isPhone.andReturn(true);
+                
                 controller = new TreeNodeController(mockScope, mockTimeout, mockAgentService);
             });
 
@@ -191,6 +202,11 @@ define(
                     controller.checkMobile();
                 }
             });
+            
+            it("allows a set object to emit select-obj", function () {
+                controller.setObject(mockNgModel, mockDomainObject);
+                expect(mockScope.$emit).toHaveBeenCalledWith('select-obj');
+            });
         });
     }
 );
\ No newline at end of file

From 39bd2928864273de4698f24359edadb344a0eb51 Mon Sep 17 00:00:00 2001
From: Charles Hacskaylo <charles.f.hacskaylo@nasa.gov>
Date: Wed, 26 Aug 2015 09:43:51 -0700
Subject: [PATCH 161/209] [Mobile] IN PROGRESS: Overlay and form cleanups

open #74
Widths and layout strategy fixed for label and
controls in form when appearing in mobile;
Overlay margins adjusted;
Cleaned up font size, line-height in tree items;
---
 platform/commonUI/general/res/css/forms.css   |  41 ++---
 platform/commonUI/general/res/css/items.css   |   1 +
 .../general/res/css/theme-espresso.css        | 157 ++++++++++--------
 platform/commonUI/general/res/css/tree.css    |  50 +++---
 .../commonUI/general/res/sass/_constants.scss |   1 +
 platform/commonUI/general/res/sass/_main.scss |   2 -
 .../general/res/sass/controls/_controls.scss  |   2 +-
 .../general/res/sass/forms/_elems.scss        |  15 +-
 .../general/res/sass/forms/_validation.scss   |   8 +-
 .../general/res/sass/mobile/_constants.scss   |   6 +-
 .../general/res/sass/mobile/_tree.scss        |   8 +-
 .../res/sass/mobile/overlay/_overlay.scss     |  44 ++++-
 .../commonUI/general/res/sass/tree/_tree.scss |   1 +
 13 files changed, 196 insertions(+), 140 deletions(-)

diff --git a/platform/commonUI/general/res/css/forms.css b/platform/commonUI/general/res/css/forms.css
index 34a14c0107..6e2aec574a 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.
  *****************************************************************************/
+/************************** STYLE */
 /************************** MOBILE REPRESENTATION ITEMS DIMENSIONS */
 /************************** MOBILE TREE MENU DIMENSIONS */
 /************************** WINDOW DIMENSIONS FOR RWD */
@@ -192,14 +193,14 @@
   box-sizing: border-box;
   overflow: hidden;
   *zoom: 1;
-  border-top: 1px solid #4d4d4d;
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
   margin-top: 5px;
   padding: 5px;
   position: relative; }
-  /* line 46, ../sass/forms/_elems.scss */
+  /* line 47, ../sass/forms/_elems.scss */
   .form .form-row.first {
     border-top: none; }
-  /* line 50, ../sass/forms/_elems.scss */
+  /* line 51, ../sass/forms/_elems.scss */
   .form .form-row .label,
   .form .form-row .controls {
     -moz-box-sizing: border-box;
@@ -207,45 +208,45 @@
     box-sizing: border-box;
     overflow: hidden;
     *zoom: 1;
-    box-sizing: border-box;
-    font-size: 0.75rem;
+    font-size: 0.8rem;
     line-height: 22px;
     min-height: 22px; }
-  /* line 61, ../sass/forms/_elems.scss */
+  /* line 60, ../sass/forms/_elems.scss */
   .form .form-row > .label {
     float: left;
+    min-width: 120px;
     position: relative;
     white-space: nowrap;
     width: 20%; }
-  /* line 69, ../sass/forms/_elems.scss */
+  /* line 70, ../sass/forms/_elems.scss */
   .form .form-row .value {
     color: #cccccc; }
-  /* line 73, ../sass/forms/_elems.scss */
+  /* line 74, ../sass/forms/_elems.scss */
   .form .form-row .controls {
     float: left;
     position: relative;
     width: 79.9%; }
-    /* line 80, ../sass/forms/_elems.scss */
+    /* line 81, ../sass/forms/_elems.scss */
     .form .form-row .controls .l-composite-control.l-checkbox {
       display: inline-block;
       line-height: 14px;
       margin-right: 5px; }
-    /* line 89, ../sass/forms/_elems.scss */
+    /* line 90, ../sass/forms/_elems.scss */
     .form .form-row .controls .l-med input[type="text"] {
       width: 200px; }
-    /* line 93, ../sass/forms/_elems.scss */
+    /* line 94, ../sass/forms/_elems.scss */
     .form .form-row .controls .l-small input[type="text"] {
       width: 50px; }
-    /* line 97, ../sass/forms/_elems.scss */
+    /* line 98, ../sass/forms/_elems.scss */
     .form .form-row .controls .l-numeric input[type="text"] {
       text-align: right; }
-    /* line 101, ../sass/forms/_elems.scss */
+    /* line 102, ../sass/forms/_elems.scss */
     .form .form-row .controls .select {
       margin-right: 5px; }
-  /* line 106, ../sass/forms/_elems.scss */
+  /* line 107, ../sass/forms/_elems.scss */
   .form .form-row .field-hints {
     color: #666666; }
-  /* line 110, ../sass/forms/_elems.scss */
+  /* line 111, ../sass/forms/_elems.scss */
   .form .form-row .selector-list {
     -moz-border-radius: 2px;
     -webkit-border-radius: 2px;
@@ -258,7 +259,7 @@
     position: relative;
     height: 150px;
     overflow: auto; }
-    /* line 121, ../sass/forms/_elems.scss */
+    /* line 122, ../sass/forms/_elems.scss */
     .form .form-row .selector-list .wrapper {
       overflow-y: auto;
       position: absolute;
@@ -267,24 +268,24 @@
       bottom: 5px;
       left: 5px; }
 
-/* line 135, ../sass/forms/_elems.scss */
+/* line 136, ../sass/forms/_elems.scss */
 label.form-control.checkbox input {
   margin-right: 5px;
   vertical-align: top; }
 
-/* line 141, ../sass/forms/_elems.scss */
+/* line 142, ../sass/forms/_elems.scss */
 .hint,
 .s-hint {
   font-size: 0.9em; }
 
-/* line 146, ../sass/forms/_elems.scss */
+/* line 147, ../sass/forms/_elems.scss */
 .l-result {
   display: inline-block;
   min-width: 32px;
   min-height: 32px;
   position: relative;
   vertical-align: top; }
-  /* line 153, ../sass/forms/_elems.scss */
+  /* line 154, ../sass/forms/_elems.scss */
   .l-result div.s-hint {
     -moz-border-radius: 2px;
     -webkit-border-radius: 2px;
diff --git a/platform/commonUI/general/res/css/items.css b/platform/commonUI/general/res/css/items.css
index a30f37c1c6..0c29bd9ebb 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.
  *****************************************************************************/
+/************************** STYLE */
 /************************** MOBILE REPRESENTATION ITEMS DIMENSIONS */
 /************************** MOBILE TREE MENU DIMENSIONS */
 /************************** WINDOW DIMENSIONS FOR RWD */
diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index bdda60265b..c503b222f4 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.
  *****************************************************************************/
+/************************** STYLE */
 /************************** MOBILE REPRESENTATION ITEMS DIMENSIONS */
 /************************** MOBILE TREE MENU DIMENSIONS */
 /************************** WINDOW DIMENSIONS FOR RWD */
@@ -775,17 +776,20 @@ mct-container {
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 @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 30, ../sass/mobile/_layout.scss */
+  /* line 26, ../sass/mobile/_layout.scss */
   .browse-wrapper,
-  .mobile-pane {
-    position: absolute;
+  .pane {
     top: 0 !important;
     right: 0;
     bottom: 0;
     left: 0; }
 
-  /* line 36, ../sass/mobile/_layout.scss */
-  .mobile-pane.right-repr {
+  /* line 31, ../sass/mobile/_layout.scss */
+  .pane.left {
+    background-color: #222; }
+
+  /* line 35, ../sass/mobile/_layout.scss */
+  .pane.right-repr {
     -moz-transition-duration: 0.35s;
     -o-transition-duration: 0.35s;
     -webkit-transition-duration: 0.35s;
@@ -794,7 +798,7 @@ mct-container {
     backface-visibility: hidden;
     margin-left: 0 !important; }
 
-  /* line 42, ../sass/mobile/_layout.scss */
+  /* line 41, ../sass/mobile/_layout.scss */
   .user-environ .browse-area,
   .user-environ .edit-area,
   .user-environ .editor {
@@ -803,38 +807,38 @@ mct-container {
     right: 0;
     bottom: 25px; }
 
-  /* line 48, ../sass/mobile/_layout.scss */
+  /* line 47, ../sass/mobile/_layout.scss */
   .holder.l-mobile {
     top: 10px !important;
     right: 10px !important;
     bottom: 10px !important;
     left: 10px !important; }
 
-  /* line 58, ../sass/mobile/_layout.scss */
+  /* line 57, ../sass/mobile/_layout.scss */
   .browse-hidetree {
     -moz-user-select: -moz-none;
     -ms-user-select: none;
     -webkit-user-select: none;
     user-select: none; }
-    /* line 62, ../sass/mobile/_layout.scss */
-    .browse-hidetree .mobile-pane.left {
+    /* line 61, ../sass/mobile/_layout.scss */
+    .browse-hidetree .pane.left {
       opacity: 0;
       right: 100% !important;
       width: auto !important;
       overflow-y: hidden;
       overflow-x: hidden; }
-    /* line 71, ../sass/mobile/_layout.scss */
-    .browse-hidetree .mobile-pane.right-repr {
+    /* line 70, ../sass/mobile/_layout.scss */
+    .browse-hidetree .pane.right-repr {
       left: 0 !important; }
 
-  /* line 78, ../sass/mobile/_layout.scss */
+  /* line 77, ../sass/mobile/_layout.scss */
   .browse-showtree {
     -moz-user-select: -moz-none;
     -ms-user-select: none;
     -webkit-user-select: none;
     user-select: none; }
-    /* line 87, ../sass/mobile/_layout.scss */
-    .browse-showtree .mobile-pane.left {
+    /* line 86, ../sass/mobile/_layout.scss */
+    .browse-showtree .pane.left {
       -moz-transition-property: opacity;
       -o-transition-property: opacity;
       -webkit-transition-property: opacity;
@@ -856,44 +860,44 @@ mct-container {
       display: block !important;
       right: auto !important;
       width: 40% !important; }
-    /* line 97, ../sass/mobile/_layout.scss */
-    .browse-showtree .mobile-pane.right-repr {
+    /* line 96, ../sass/mobile/_layout.scss */
+    .browse-showtree .pane.right-repr {
       left: 40% !important; }
 
-  /* line 107, ../sass/mobile/_layout.scss */
+  /* line 106, ../sass/mobile/_layout.scss */
   .mobile-menu-icon {
     font-size: 110%;
     position: absolute;
     top: 12px;
     left: 10px; }
 
-  /* line 114, ../sass/mobile/_layout.scss */
+  /* line 113, ../sass/mobile/_layout.scss */
   .object-browse-bar {
     left: 30px !important; }
-    /* line 117, ../sass/mobile/_layout.scss */
+    /* line 116, ../sass/mobile/_layout.scss */
     .object-browse-bar .context-available {
       opacity: 1 !important; }
-    /* line 120, ../sass/mobile/_layout.scss */
+    /* line 119, ../sass/mobile/_layout.scss */
     .object-browse-bar .view-switcher {
       margin-right: 0 !important; }
 
-  /* line 125, ../sass/mobile/_layout.scss */
+  /* line 124, ../sass/mobile/_layout.scss */
   .tree-holder {
     overflow-x: hidden !important; }
 
-  /* line 129, ../sass/mobile/_layout.scss */
+  /* line 128, ../sass/mobile/_layout.scss */
   .mobile-disable-select {
     -moz-user-select: -moz-none;
     -ms-user-select: none;
     -webkit-user-select: none;
     user-select: none; }
 
-  /* line 134, ../sass/mobile/_layout.scss */
+  /* line 133, ../sass/mobile/_layout.scss */
   .mobile-hide,
   .mobile-hide-important {
     display: none !important; }
 
-  /* line 139, ../sass/mobile/_layout.scss */
+  /* line 138, ../sass/mobile/_layout.scss */
   .mobile-back-hide {
     pointer-events: none;
     -moz-transition-property: opacity;
@@ -910,7 +914,7 @@ mct-container {
     transition-timing-function: ease-in-out;
     opacity: 0; }
 
-  /* line 144, ../sass/mobile/_layout.scss */
+  /* line 143, ../sass/mobile/_layout.scss */
   .mobile-back-unhide {
     pointer-events: all;
     -moz-transition-property: opacity;
@@ -927,15 +931,15 @@ mct-container {
     transition-timing-function: ease-in-out;
     opacity: 1; } }
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) {
-  /* line 153, ../sass/mobile/_layout.scss */
-  .browse-showtree .mobile-pane.left {
+  /* line 152, ../sass/mobile/_layout.scss */
+  .browse-showtree .pane.left {
     width: 90% !important; }
-  /* line 156, ../sass/mobile/_layout.scss */
-  .browse-showtree .mobile-pane.right-repr {
+  /* line 155, ../sass/mobile/_layout.scss */
+  .browse-showtree .pane.right-repr {
     left: 0 !important;
     transform: translateX(90%); } }
 @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-  /* line 164, ../sass/mobile/_layout.scss */
+  /* line 163, ../sass/mobile/_layout.scss */
   .desktop-hide {
     display: none; } }
 /*****************************************************************************
@@ -2318,7 +2322,7 @@ label.checkbox.custom {
   margin-right: 20px;
   padding-left: 19px;
   position: relative;
-  vertical-align: top; }
+  vertical-align: middle; }
   /* line 202, ../sass/controls/_controls.scss */
   label.checkbox.custom em {
     color: #999;
@@ -3457,14 +3461,14 @@ label.checkbox.custom {
   box-sizing: border-box;
   overflow: hidden;
   *zoom: 1;
-  border-top: 1px solid #4d4d4d;
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
   margin-top: 5px;
   padding: 5px;
   position: relative; }
-  /* line 46, ../sass/forms/_elems.scss */
+  /* line 47, ../sass/forms/_elems.scss */
   .form .form-row.first {
     border-top: none; }
-  /* line 50, ../sass/forms/_elems.scss */
+  /* line 51, ../sass/forms/_elems.scss */
   .form .form-row .label,
   .form .form-row .controls {
     -moz-box-sizing: border-box;
@@ -3472,45 +3476,45 @@ label.checkbox.custom {
     box-sizing: border-box;
     overflow: hidden;
     *zoom: 1;
-    box-sizing: border-box;
-    font-size: 0.75rem;
+    font-size: 0.8rem;
     line-height: 22px;
     min-height: 22px; }
-  /* line 61, ../sass/forms/_elems.scss */
+  /* line 60, ../sass/forms/_elems.scss */
   .form .form-row > .label {
     float: left;
+    min-width: 120px;
     position: relative;
     white-space: nowrap;
     width: 20%; }
-  /* line 69, ../sass/forms/_elems.scss */
+  /* line 70, ../sass/forms/_elems.scss */
   .form .form-row .value {
     color: #cccccc; }
-  /* line 73, ../sass/forms/_elems.scss */
+  /* line 74, ../sass/forms/_elems.scss */
   .form .form-row .controls {
     float: left;
     position: relative;
     width: 79.9%; }
-    /* line 80, ../sass/forms/_elems.scss */
+    /* line 81, ../sass/forms/_elems.scss */
     .form .form-row .controls .l-composite-control.l-checkbox {
       display: inline-block;
       line-height: 14px;
       margin-right: 5px; }
-    /* line 89, ../sass/forms/_elems.scss */
+    /* line 90, ../sass/forms/_elems.scss */
     .form .form-row .controls .l-med input[type="text"] {
       width: 200px; }
-    /* line 93, ../sass/forms/_elems.scss */
+    /* line 94, ../sass/forms/_elems.scss */
     .form .form-row .controls .l-small input[type="text"] {
       width: 50px; }
-    /* line 97, ../sass/forms/_elems.scss */
+    /* line 98, ../sass/forms/_elems.scss */
     .form .form-row .controls .l-numeric input[type="text"] {
       text-align: right; }
-    /* line 101, ../sass/forms/_elems.scss */
+    /* line 102, ../sass/forms/_elems.scss */
     .form .form-row .controls .select {
       margin-right: 5px; }
-  /* line 106, ../sass/forms/_elems.scss */
+  /* line 107, ../sass/forms/_elems.scss */
   .form .form-row .field-hints {
     color: #666666; }
-  /* line 110, ../sass/forms/_elems.scss */
+  /* line 111, ../sass/forms/_elems.scss */
   .form .form-row .selector-list {
     -moz-border-radius: 2px;
     -webkit-border-radius: 2px;
@@ -3523,7 +3527,7 @@ label.checkbox.custom {
     position: relative;
     height: 150px;
     overflow: auto; }
-    /* line 121, ../sass/forms/_elems.scss */
+    /* line 122, ../sass/forms/_elems.scss */
     .form .form-row .selector-list .wrapper {
       overflow-y: auto;
       position: absolute;
@@ -3532,24 +3536,24 @@ label.checkbox.custom {
       bottom: 5px;
       left: 5px; }
 
-/* line 135, ../sass/forms/_elems.scss */
+/* line 136, ../sass/forms/_elems.scss */
 label.form-control.checkbox input {
   margin-right: 5px;
   vertical-align: top; }
 
-/* line 141, ../sass/forms/_elems.scss */
+/* line 142, ../sass/forms/_elems.scss */
 .hint,
 .s-hint {
   font-size: 0.9em; }
 
-/* line 146, ../sass/forms/_elems.scss */
+/* line 147, ../sass/forms/_elems.scss */
 .l-result {
   display: inline-block;
   min-width: 32px;
   min-height: 32px;
   position: relative;
   vertical-align: top; }
-  /* line 153, ../sass/forms/_elems.scss */
+  /* line 154, ../sass/forms/_elems.scss */
   .l-result div.s-hint {
     -moz-border-radius: 2px;
     -webkit-border-radius: 2px;
@@ -3585,18 +3589,16 @@ label.form-control.checkbox input {
   padding-right: 25px; }
   /* line 26, ../sass/forms/_validation.scss */
   .validates > .label::after {
-    display: block;
-    position: absolute;
-    top: 0;
-    right: 10px;
-    bottom: 0;
-    left: auto;
-    height: auto;
-    width: 15px;
+    /*            display: block;
+                position: absolute;
+                top: 0;
+                right: $reqSymbolM;
+                bottom: 0;
+                left: auto;
+                height: auto;
+                width: $reqSymbolW;*/
     font-family: symbolsfont;
-    font-size: 0.7em;
-    text-align: right;
-    vertical-align: middle; }
+    font-size: 0.7em; }
 /* line 44, ../sass/forms/_validation.scss */
 .validates.invalid > .label::after, .validates.invalid.req > .label::after {
   color: #ff9900;
@@ -4386,7 +4388,7 @@ input[type="text"] {
   overflow: auto; }
 
 @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 6, ../sass/mobile/overlay/_overlay.scss */
+  /* line 4, ../sass/mobile/overlay/_overlay.scss */
   .overlay > .holder {
     -moz-border-radius: 0;
     -webkit-border-radius: 0;
@@ -4394,8 +4396,29 @@ input[type="text"] {
     top: 0;
     right: 0;
     bottom: 0;
-    left: 0; } }
-
+    left: 0; }
+    /* line 10, ../sass/mobile/overlay/_overlay.scss */
+    .overlay > .holder > .contents {
+      top: 10px;
+      right: 10px;
+      bottom: 10px;
+      left: 10px; }
+      /* line 16, ../sass/mobile/overlay/_overlay.scss */
+      .overlay > .holder > .contents .form.editor {
+        border: none; }
+        /* line 19, ../sass/mobile/overlay/_overlay.scss */
+        .overlay > .holder > .contents .form.editor .contents {
+          top: 0;
+          right: 0;
+          bottom: 0;
+          left: 0; } }
+@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 33, ../sass/mobile/overlay/_overlay.scss */
+  .overlay > .holder > .contents .form.editor .contents .form-row > .label,
+  .overlay > .holder > .contents .form.editor .contents .form-row > .controls {
+    display: block;
+    float: none;
+    width: 100%; } }
 /*****************************************************************************
  * Open MCT Web, Copyright (c) 2014-2015, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
@@ -4431,7 +4454,7 @@ input[type="text"] {
   line-height: 16px; }
 /* line 38, ../sass/user-environ/_frame.scss */
 .frame > .object-holder.abs, .btn-menu .frame > span.object-holder.l-click-area {
-  top: 19px; }
+  top: 21px; }
 /* line 41, ../sass/user-environ/_frame.scss */
 .frame .contents {
   top: 5px;
diff --git a/platform/commonUI/general/res/css/tree.css b/platform/commonUI/general/res/css/tree.css
index 0566559e1b..2ca3b73ab9 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.
  *****************************************************************************/
+/************************** STYLE */
 /************************** MOBILE REPRESENTATION ITEMS DIMENSIONS */
 /************************** MOBILE TREE MENU DIMENSIONS */
 /************************** WINDOW DIMENSIONS FOR RWD */
@@ -200,8 +201,9 @@ ul.tree {
         left: 0px;
         width: auto;
         height: auto;
+        line-height: 1.5rem;
         left: 15px; }
-        /* line 61, ../sass/tree/_tree.scss */
+        /* line 62, ../sass/tree/_tree.scss */
         ul.tree li span.tree-item .label .type-icon {
           text-shadow: rgba(0, 0, 0, 0.6) 0 1px 2px;
           font-size: 16px;
@@ -214,12 +216,12 @@ ul.tree {
           line-height: 100%;
           right: auto;
           width: 16px; }
-          /* line 74, ../sass/tree/_tree.scss */
+          /* line 75, ../sass/tree/_tree.scss */
           ul.tree li span.tree-item .label .type-icon .icon.l-icon-link, ul.tree li span.tree-item .label .type-icon .icon.l-icon-alert {
             text-shadow: black 0 1px 2px;
             position: absolute;
             z-index: 2; }
-          /* line 80, ../sass/tree/_tree.scss */
+          /* line 81, ../sass/tree/_tree.scss */
           ul.tree li span.tree-item .label .type-icon .icon.l-icon-alert {
             color: #ff3c00;
             font-size: 8px;
@@ -228,7 +230,7 @@ ul.tree {
             width: 8px;
             top: 1px;
             right: -2px; }
-          /* line 86, ../sass/tree/_tree.scss */
+          /* line 87, ../sass/tree/_tree.scss */
           ul.tree li span.tree-item .label .type-icon .icon.l-icon-link {
             color: #49dedb;
             font-size: 8px;
@@ -237,7 +239,7 @@ ul.tree {
             width: 8px;
             left: -3px;
             bottom: 0px; }
-        /* line 94, ../sass/tree/_tree.scss */
+        /* line 95, ../sass/tree/_tree.scss */
         ul.tree li span.tree-item .label .title-label {
           overflow: hidden;
           position: absolute;
@@ -252,53 +254,53 @@ ul.tree {
           overflow: hidden;
           text-overflow: ellipsis;
           white-space: nowrap; }
-      /* line 105, ../sass/tree/_tree.scss */
+      /* line 106, ../sass/tree/_tree.scss */
       ul.tree li span.tree-item.loading {
         pointer-events: none; }
-        /* line 107, ../sass/tree/_tree.scss */
+        /* line 108, ../sass/tree/_tree.scss */
         ul.tree li span.tree-item.loading .label {
           opacity: 0.5; }
-          /* line 109, ../sass/tree/_tree.scss */
+          /* line 110, ../sass/tree/_tree.scss */
           ul.tree li span.tree-item.loading .label .title-label {
             font-style: italic; }
-        /* line 113, ../sass/tree/_tree.scss */
+        /* line 114, ../sass/tree/_tree.scss */
         ul.tree li span.tree-item.loading .wait-spinner {
           margin-left: 14px; }
-      /* line 118, ../sass/tree/_tree.scss */
+      /* line 119, ../sass/tree/_tree.scss */
       ul.tree li span.tree-item.selected {
         background: #005177;
         color: #fff; }
-        /* line 122, ../sass/tree/_tree.scss */
+        /* line 123, ../sass/tree/_tree.scss */
         ul.tree li span.tree-item.selected .view-control {
           color: #0099cc; }
-        /* line 125, ../sass/tree/_tree.scss */
+        /* line 126, ../sass/tree/_tree.scss */
         ul.tree li span.tree-item.selected .label .type-icon {
           color: #fff; }
       @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-        /* line 133, ../sass/tree/_tree.scss */
+        /* line 134, ../sass/tree/_tree.scss */
         ul.tree li span.tree-item:not(.selected):hover {
           background: #404040;
           color: #cccccc; }
-          /* line 136, ../sass/tree/_tree.scss */
+          /* line 137, ../sass/tree/_tree.scss */
           ul.tree li span.tree-item:not(.selected):hover .context-trigger {
             display: block; }
-          /* line 139, ../sass/tree/_tree.scss */
+          /* line 140, ../sass/tree/_tree.scss */
           ul.tree li span.tree-item:not(.selected):hover .icon {
             color: #33ccff; } }
-      /* line 146, ../sass/tree/_tree.scss */
+      /* line 147, ../sass/tree/_tree.scss */
       ul.tree li span.tree-item:not(.loading) {
         cursor: pointer; }
-      /* line 150, ../sass/tree/_tree.scss */
+      /* line 151, ../sass/tree/_tree.scss */
       ul.tree li span.tree-item .context-trigger {
         top: -1px;
         position: absolute;
         right: 3px; }
-        /* line 156, ../sass/tree/_tree.scss */
+        /* line 157, ../sass/tree/_tree.scss */
         ul.tree li span.tree-item .context-trigger .invoke-menu {
           font-size: 0.75em;
           height: 0.9rem;
           line-height: 0.9rem; }
-  /* line 165, ../sass/tree/_tree.scss */
+  /* line 166, ../sass/tree/_tree.scss */
   ul.tree ul.tree {
     margin-left: 15px; }
 
@@ -329,23 +331,23 @@ ul.tree {
     height: 35px;
     line-height: 35px;
     margin-bottom: 0px; }
-    /* line 33, ../sass/mobile/_tree.scss */
+    /* line 32, ../sass/mobile/_tree.scss */
     ul.tree li span.tree-item .view-control {
       position: absolute;
       font-size: 1.1em;
       right: 0px;
       width: 30px;
       text-align: center; }
-    /* line 42, ../sass/mobile/_tree.scss */
+    /* line 41, ../sass/mobile/_tree.scss */
     ul.tree li span.tree-item .label {
       left: 0;
       right: 35px;
-      font-size: 1.1em; }
-      /* line 50, ../sass/mobile/_tree.scss */
+      line-height: 35px; }
+      /* line 46, ../sass/mobile/_tree.scss */
       ul.tree li span.tree-item .label .type-icon {
         top: 9px;
         bottom: auto;
         height: 16px; }
-  /* line 61, ../sass/mobile/_tree.scss */
+  /* line 57, ../sass/mobile/_tree.scss */
   ul.tree ul.tree {
     margin-left: 20px; } }
diff --git a/platform/commonUI/general/res/sass/_constants.scss b/platform/commonUI/general/res/sass/_constants.scss
index d1f826443c..bb10a83455 100644
--- a/platform/commonUI/general/res/sass/_constants.scss
+++ b/platform/commonUI/general/res/sass/_constants.scss
@@ -47,6 +47,7 @@ $colorPausedBg: #c56f01;
 $colorPausedFg: #fff;
 $colorCreateBtn: $colorKey;
 $colorGridLines: rgba(#fff, 0.05);
+$colorFormLines: rgba(#fff, 0.1);
 // Menu colors
 $colorMenuBg: lighten($colorBodyBg, 23%);
 $colorMenuFg: lighten($colorMenuBg, 70%);
diff --git a/platform/commonUI/general/res/sass/_main.scss b/platform/commonUI/general/res/sass/_main.scss
index 18dc5aa1e1..a388fcac35 100644
--- a/platform/commonUI/general/res/sass/_main.scss
+++ b/platform/commonUI/general/res/sass/_main.scss
@@ -48,12 +48,10 @@
 @import "controls/controls";
 @import "controls/lists";
 @import "controls/menus";
-//@import "mobile/controls/menus";
 @import "controls/time-controller";
 @import "edit/editor";
 @import "features/imagery";
 @import "features/time-display";
-//@import "flex";
 @import "forms/elems";
 @import "forms/validation";
 @import "forms/text-input";
diff --git a/platform/commonUI/general/res/sass/controls/_controls.scss b/platform/commonUI/general/res/sass/controls/_controls.scss
index bcec870f95..2e7a0e09d3 100644
--- a/platform/commonUI/general/res/sass/controls/_controls.scss
+++ b/platform/commonUI/general/res/sass/controls/_controls.scss
@@ -198,7 +198,7 @@ label.checkbox.custom {
 	margin-right: $interiorMargin * 4;
 	padding-left: $d + $interiorMargin;
 	position: relative;
-	vertical-align: top;
+	vertical-align: middle; // was top
 	em {
 		color: $colorBodyFg;
 		display: inline-block;
diff --git a/platform/commonUI/general/res/sass/forms/_elems.scss b/platform/commonUI/general/res/sass/forms/_elems.scss
index 9a2adab2e3..095e9fc582 100644
--- a/platform/commonUI/general/res/sass/forms/_elems.scss
+++ b/platform/commonUI/general/res/sass/forms/_elems.scss
@@ -21,7 +21,7 @@
  *****************************************************************************/
 .section-header {
 	@include border-radius(3px);
-	background: rgba(white, 0.1);
+	background: $colorFormLines;
 	font-size: 0.8em;
 	margin-top: $interiorMargin;
 	padding: $interiorMargin;
@@ -37,11 +37,12 @@
 	}
 
 	.form-row {
+		$m: $interiorMargin;
 		@include box-sizing(border-box);
 		@include clearfix;
-		border-top: 1px solid $colorInteriorBorder;
-		margin-top: $interiorMargin;
-		padding: $interiorMargin;
+		border-top: 1px solid $colorFormLines;
+		margin-top: $m;
+		padding: $m;
 		position: relative;
 		&.first {
 			border-top: none;
@@ -49,18 +50,18 @@
 
 		.label,
 		.controls {
-//			@include test(orange);
 			@include box-sizing(border-box);
 			@include clearfix;
-			box-sizing: border-box;
-			font-size: 0.75rem;
+			font-size: 0.8rem;
 			line-height: $formInputH;
             min-height: $formInputH;
 		}
 
 		>.label {
 			// Only style this way for immediate children of .form-row; prevents problems when .label is used in .controls section of a form
+			//@include test(orange, 0.05);
 			float: left;
+			min-width: 120px;
             position: relative;
 			white-space: nowrap;
 			width: $formLabelW;
diff --git a/platform/commonUI/general/res/sass/forms/_validation.scss b/platform/commonUI/general/res/sass/forms/_validation.scss
index eba95840c5..07f15cb660 100644
--- a/platform/commonUI/general/res/sass/forms/_validation.scss
+++ b/platform/commonUI/general/res/sass/forms/_validation.scss
@@ -25,18 +25,18 @@
         padding-right: $reqSymbolW + $reqSymbolM; // Keep room for validation element
         &::after {
             //            @include test(yellow, 0.3);
-            display: block;
+/*            display: block;
             position: absolute;
             top: 0;
             right: $reqSymbolM;
             bottom: 0;
             left: auto;
             height: auto;
-            width: $reqSymbolW;
+            width: $reqSymbolW;*/
             font-family: symbolsfont;
             font-size: $reqSymbolFontSize;
-            text-align: right;
-            vertical-align: middle;
+            //text-align: right;
+            //vertical-align: middle;
         }
     }
     &.invalid,
diff --git a/platform/commonUI/general/res/sass/mobile/_constants.scss b/platform/commonUI/general/res/sass/mobile/_constants.scss
index 913d47c0e3..f4fe4ceaad 100644
--- a/platform/commonUI/general/res/sass/mobile/_constants.scss
+++ b/platform/commonUI/general/res/sass/mobile/_constants.scss
@@ -20,11 +20,13 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
+/************************** STYLE */
+$colorMobilePaneLeft: #222;
+
 /************************** MOBILE REPRESENTATION ITEMS DIMENSIONS */
 $mobileListIconSize: 30px;
 $mobileTitleDescH: 35px;
-$mobile-listRight: 10px;
-
+$mobileOverlayMargin: 10px;
 $phoneItemH: floor($ueBrowseGridItemLg/4);
 $tabletItemH: floor($ueBrowseGridItemLg/3);
 
diff --git a/platform/commonUI/general/res/sass/mobile/_tree.scss b/platform/commonUI/general/res/sass/mobile/_tree.scss
index 5cc0ac1b25..03e8051a14 100644
--- a/platform/commonUI/general/res/sass/mobile/_tree.scss
+++ b/platform/commonUI/general/res/sass/mobile/_tree.scss
@@ -26,7 +26,6 @@
         li {
             //border-top: 1px solid $colorInteriorBorder; // TEMP
             span.tree-item {
-                // Adds some space to the top of each tree item
                 height: $mobileTreeItemH;
                 line-height: $mobileTreeItemH;
                 margin-bottom: 0px;
@@ -40,13 +39,10 @@
                 }
 
                 .label {
-                    // Designates the starting left margin
-                    // (indentation) of 'My Items'
-                    // Also adds right space for selection button
                     left: 0;
                     right: $mobileTreeRightArrowW + $interiorMargin; // Allows tree item name to stop prior to the arrow
-                    font-size: 1.1em;
-                    //font-size: 1.2em; // CH CO
+                    line-height: $mobileTreeItemH;
+                    //font-size: 1.1em; // CH CO
                     .type-icon {
                         @include verticalCenterBlock($mobileTreeItemH, $treeTypeIconH);
                     }
diff --git a/platform/commonUI/general/res/sass/mobile/overlay/_overlay.scss b/platform/commonUI/general/res/sass/mobile/overlay/_overlay.scss
index ac99a36d17..9bee6e6865 100644
--- a/platform/commonUI/general/res/sass/mobile/overlay/_overlay.scss
+++ b/platform/commonUI/general/res/sass/mobile/overlay/_overlay.scss
@@ -1,11 +1,41 @@
-.overlay {
-    @include phoneandtablet {
+@include phoneandtablet {
+    .overlay {
         $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;
+        > .holder {
+            @include border-radius($m);
+            top: $m;
+            right: $m;
+            bottom: $m;
+            left: $m;
+            > .contents {
+                top: $mobileOverlayMargin;
+                right: $mobileOverlayMargin;
+                bottom: $mobileOverlayMargin;
+                left: $mobileOverlayMargin;
+
+                .form.editor {
+                    border: none;
+
+                    .contents {
+                        top: 0;
+                        right: 0;
+                        bottom: 0;
+                        left: 0;
+                    }
+                }
+            }
+        }
+    }
+}
+
+@include phone {
+    .overlay > .holder > .contents .form.editor .contents .form-row {
+        > .label,
+        > .controls {
+            //@include test(blue);
+            display: block;
+            float: none;
+            width: 100%;
         }
     }
 }
\ No newline at end of file
diff --git a/platform/commonUI/general/res/sass/tree/_tree.scss b/platform/commonUI/general/res/sass/tree/_tree.scss
index cb0b0f1a72..cf1ad57a50 100644
--- a/platform/commonUI/general/res/sass/tree/_tree.scss
+++ b/platform/commonUI/general/res/sass/tree/_tree.scss
@@ -56,6 +56,7 @@ ul.tree {
 //				@include test(orange);
 				@include absPosDefault();
 				//left: $runningItemW + $interiorMargin; // Adding pad to left to make room for link icon
+				line-height: $menuLineH;
 				left: $runningItemW;
 
 				.type-icon {

From 793c99ac2fb7975babe98e71a8387b54890d8ea8 Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Wed, 26 Aug 2015 10:02:16 -0700
Subject: [PATCH 162/209] [Remove] Tests

RemoveActionSpec test complete, tests if
parent is object is removed. Also tests if
object not in object path is removed.
---
 .../edit/test/actions/RemoveActionSpec.js     | 91 +++++++++++++++----
 1 file changed, 71 insertions(+), 20 deletions(-)

diff --git a/platform/commonUI/edit/test/actions/RemoveActionSpec.js b/platform/commonUI/edit/test/actions/RemoveActionSpec.js
index 072094ed1d..0a93ffa180 100644
--- a/platform/commonUI/edit/test/actions/RemoveActionSpec.js
+++ b/platform/commonUI/edit/test/actions/RemoveActionSpec.js
@@ -31,8 +31,11 @@ define(
                 mockNavigationService,
                 mockDomainObject,
                 mockParent,
-                mockGrandparent,
+                mockChildObject,
+                mockGrandchildObject,
                 mockContext,
+                mockChildContext,
+                mockGrandchildContext,
                 mockMutation,
                 mockPersistence,
                 mockType,
@@ -56,21 +59,15 @@ define(
                     "domainObject",
                     [ "getId", "getCapability" ]
                 );
+                mockChildObject = jasmine.createSpyObj(
+                    "domainObject",
+                    [ "getId", "getCapability" ]
+                );
+                mockGrandchildObject = jasmine.createSpyObj(
+                    "domainObject",
+                    [ "getId", "getCapability" ]
+                );
                 mockQ = { when: mockPromise };
-                mockGrandparent = {
-                    getModel: function () {
-                        return model;
-                    },
-                    getCapability: function (k) {
-                        return capabilities[k];
-                    },
-                    useCapability: function (k, v) {
-                        return capabilities[k].invoke(v);
-                    },
-                    getId: function () {
-                        return "test";
-                    }
-                };
                 mockParent = {
                     getModel: function () {
                         return model;
@@ -80,12 +77,11 @@ define(
                     },
                     useCapability: function (k, v) {
                         return capabilities[k].invoke(v);
-                    },
-                    getParent: function () {
-                        return mockGrandparent;
                     }
                 };
                 mockContext = jasmine.createSpyObj("context", [ "getParent" ]);
+                mockChildContext = jasmine.createSpyObj("context", [ "getParent" ]);
+                mockGrandchildContext = jasmine.createSpyObj("context", [ "getParent" ]);
                 mockMutation = jasmine.createSpyObj("mutation", [ "invoke" ]);
                 mockPersistence = jasmine.createSpyObj("persistence", [ "persist" ]);
                 mockType = jasmine.createSpyObj("type", [ "hasFeature" ]);
@@ -112,7 +108,7 @@ define(
                     type: mockType
                 };
                 model = {
-                    composition: [ "a", "b", "test", "c" ]
+                    composition: [ "a", "test", "b" ]
                 };
 
                 actionContext = { domainObject: mockDomainObject };
@@ -152,11 +148,66 @@ define(
 
                 // Should have removed "test" - that was our
                 // mock domain object's id.
-                expect(result.composition).toEqual(["a", "b", "c"]);
+                expect(result.composition).toEqual(["a", "b"]);
 
                 // Finally, should have persisted
                 expect(mockPersistence.persist).toHaveBeenCalled();
             });
+            
+            it("removes parent of object currently navigated to", function () {
+                var mutator, result;
+                
+                // Navigates to child object
+                mockNavigationService.getNavigation.andReturn(mockChildObject);
+                
+                // Test is id of object being removed
+                // Child object has different id
+                mockDomainObject.getId.andReturn("test");
+                mockChildObject.getId.andReturn("not test");
+                
+                // Sets context for the child and domainObject
+                mockDomainObject.getCapability.andReturn(mockContext);
+                mockChildObject.getCapability.andReturn(mockChildContext);
+                
+                // Parents of child and domainObject are set
+                mockContext.getParent.andReturn(mockParent);
+                mockChildContext.getParent.andReturn(mockDomainObject);
+                
+                mockType.hasFeature.andReturn(true);
+                
+                action.perform();
+                
+                // Expects navigation to parent of domainObject (removed object)
+                expect(mockNavigationService.setNavigation).toHaveBeenCalledWith(mockParent);
+            });
+            
+            it("checks if removing object not in ascendent path (reaches ROOT)", function () {
+                // Navigates to grandchild of ROOT
+                mockNavigationService.getNavigation.andReturn(mockGrandchildObject);
+                
+                // domainObject (grandparent) is set as ROOT, child and grandchild
+                // are set objects not being removed
+                mockDomainObject.getId.andReturn("ROOT");
+                mockChildObject.getId.andReturn("not test");
+                mockGrandchildObject.getId.andReturn("not test");
+                
+                // Sets context for the grandchild, child, and domainObject
+                mockDomainObject.getCapability.andReturn(mockContext);
+                mockChildObject.getCapability.andReturn(mockChildContext);
+                mockGrandchildObject.getCapability.andReturn(mockGrandchildContext);
+                
+                // Parents of grandchild, child, and domainObject are set
+                mockContext.getParent.andReturn(mockParent);
+                mockChildContext.getParent.andReturn(mockDomainObject);
+                mockGrandchildContext.getParent.andReturn(mockChildObject);
+                
+                mockType.hasFeature.andReturn(true);
+                
+                action.perform();
+                
+                // Expects no navigation to occur
+                expect(mockNavigationService.setNavigation).not.toHaveBeenCalled();
+            });
 
         });
     }

From 89bfa54563d164cd9c5972d982f680b1a5f4e980 Mon Sep 17 00:00:00 2001
From: Charles Hacskaylo <charles.f.hacskaylo@nasa.gov>
Date: Wed, 26 Aug 2015 10:08:57 -0700
Subject: [PATCH 163/209] [Mobile] IN PROGRESS: Misc layout tweaks; treeview
 pane styling

open #74
Treeview pane darkened;
Spacing in frame tweaked;
#content-area in right pane hidden
when treeview expanded for
phone portrait only;
Removed mobile-pane and
desktop-browse classes from markup;
---
 .../commonUI/browse/res/templates/browse.html |  4 +-
 .../general/res/css/theme-espresso.css        | 62 +++++++++++--------
 .../general/res/sass/mobile/_layout.scss      | 31 ++++++----
 .../general/res/sass/user-environ/_frame.scss |  2 +-
 4 files changed, 59 insertions(+), 40 deletions(-)

diff --git a/platform/commonUI/browse/res/templates/browse.html b/platform/commonUI/browse/res/templates/browse.html
index 402cf7a197..811e9e8bd9 100644
--- a/platform/commonUI/browse/res/templates/browse.html
+++ b/platform/commonUI/browse/res/templates/browse.html
@@ -24,7 +24,7 @@
     <mct-include key="'topbar-browse'"></mct-include>
     <div class="holder browse-area s-browse-area abs browse-wrapper" ng-class="treeClass ? 'browse-showtree' : 'browse-hidetree'">
         <mct-split-pane class='contents abs' anchor='left'>
-            <div class='split-pane-component treeview pane mobile-pane left desktop-browse'>
+            <div class='split-pane-component treeview pane left'>
                 <div class="holder abs l-mobile">
                     <div class='tree-holder abs mobile-tree-holder'>
                         <mct-representation key="'tree'"
@@ -39,7 +39,7 @@
 
             <mct-splitter class="mobile-hide"></mct-splitter>
 
-            <div class='split-pane-component items pane mobile-pane right-repr'>
+            <div class='split-pane-component items pane right-repr'>
                 <div class='holder abs l-mobile' id='content-area'>
                     <mct-representation mct-object="navigatedObject" key="'browse-object'">
                     </mct-representation>
diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index c503b222f4..ec9f0aac32 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -785,7 +785,7 @@ mct-container {
     left: 0; }
 
   /* line 31, ../sass/mobile/_layout.scss */
-  .pane.left {
+  .pane.left.treeview {
     background-color: #222; }
 
   /* line 35, ../sass/mobile/_layout.scss */
@@ -797,8 +797,17 @@ mct-container {
     transition-timing-function: ease;
     backface-visibility: hidden;
     margin-left: 0 !important; }
+    /* line 39, ../sass/mobile/_layout.scss */
+    .pane.right-repr #content-area {
+      -moz-transition-duration: 0.35s;
+      -o-transition-duration: 0.35s;
+      -webkit-transition-duration: 0.35s;
+      transition-duration: 0.35s;
+      transition-timing-function: ease;
+      backface-visibility: hidden;
+      opacity: 1; }
 
-  /* line 41, ../sass/mobile/_layout.scss */
+  /* line 45, ../sass/mobile/_layout.scss */
   .user-environ .browse-area,
   .user-environ .edit-area,
   .user-environ .editor {
@@ -807,38 +816,38 @@ mct-container {
     right: 0;
     bottom: 25px; }
 
-  /* line 47, ../sass/mobile/_layout.scss */
+  /* line 51, ../sass/mobile/_layout.scss */
   .holder.l-mobile {
     top: 10px !important;
     right: 10px !important;
     bottom: 10px !important;
     left: 10px !important; }
 
-  /* line 57, ../sass/mobile/_layout.scss */
+  /* line 61, ../sass/mobile/_layout.scss */
   .browse-hidetree {
     -moz-user-select: -moz-none;
     -ms-user-select: none;
     -webkit-user-select: none;
     user-select: none; }
-    /* line 61, ../sass/mobile/_layout.scss */
-    .browse-hidetree .pane.left {
+    /* line 65, ../sass/mobile/_layout.scss */
+    .browse-hidetree .pane.left.treeview {
       opacity: 0;
       right: 100% !important;
       width: auto !important;
       overflow-y: hidden;
       overflow-x: hidden; }
-    /* line 70, ../sass/mobile/_layout.scss */
+    /* line 74, ../sass/mobile/_layout.scss */
     .browse-hidetree .pane.right-repr {
       left: 0 !important; }
 
-  /* line 77, ../sass/mobile/_layout.scss */
+  /* line 79, ../sass/mobile/_layout.scss */
   .browse-showtree {
     -moz-user-select: -moz-none;
     -ms-user-select: none;
     -webkit-user-select: none;
     user-select: none; }
-    /* line 86, ../sass/mobile/_layout.scss */
-    .browse-showtree .pane.left {
+    /* line 88, ../sass/mobile/_layout.scss */
+    .browse-showtree .pane.left.treeview {
       -moz-transition-property: opacity;
       -o-transition-property: opacity;
       -webkit-transition-property: opacity;
@@ -860,44 +869,44 @@ mct-container {
       display: block !important;
       right: auto !important;
       width: 40% !important; }
-    /* line 96, ../sass/mobile/_layout.scss */
+    /* line 98, ../sass/mobile/_layout.scss */
     .browse-showtree .pane.right-repr {
       left: 40% !important; }
 
-  /* line 106, ../sass/mobile/_layout.scss */
+  /* line 107, ../sass/mobile/_layout.scss */
   .mobile-menu-icon {
     font-size: 110%;
     position: absolute;
     top: 12px;
     left: 10px; }
 
-  /* line 113, ../sass/mobile/_layout.scss */
+  /* line 114, ../sass/mobile/_layout.scss */
   .object-browse-bar {
     left: 30px !important; }
-    /* line 116, ../sass/mobile/_layout.scss */
+    /* line 117, ../sass/mobile/_layout.scss */
     .object-browse-bar .context-available {
       opacity: 1 !important; }
-    /* line 119, ../sass/mobile/_layout.scss */
+    /* line 120, ../sass/mobile/_layout.scss */
     .object-browse-bar .view-switcher {
       margin-right: 0 !important; }
 
-  /* line 124, ../sass/mobile/_layout.scss */
+  /* line 125, ../sass/mobile/_layout.scss */
   .tree-holder {
     overflow-x: hidden !important; }
 
-  /* line 128, ../sass/mobile/_layout.scss */
+  /* line 129, ../sass/mobile/_layout.scss */
   .mobile-disable-select {
     -moz-user-select: -moz-none;
     -ms-user-select: none;
     -webkit-user-select: none;
     user-select: none; }
 
-  /* line 133, ../sass/mobile/_layout.scss */
+  /* line 134, ../sass/mobile/_layout.scss */
   .mobile-hide,
   .mobile-hide-important {
     display: none !important; }
 
-  /* line 138, ../sass/mobile/_layout.scss */
+  /* line 139, ../sass/mobile/_layout.scss */
   .mobile-back-hide {
     pointer-events: none;
     -moz-transition-property: opacity;
@@ -914,7 +923,7 @@ mct-container {
     transition-timing-function: ease-in-out;
     opacity: 0; }
 
-  /* line 143, ../sass/mobile/_layout.scss */
+  /* line 144, ../sass/mobile/_layout.scss */
   .mobile-back-unhide {
     pointer-events: all;
     -moz-transition-property: opacity;
@@ -931,15 +940,18 @@ mct-container {
     transition-timing-function: ease-in-out;
     opacity: 1; } }
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) {
-  /* line 152, ../sass/mobile/_layout.scss */
-  .browse-showtree .pane.left {
+  /* line 153, ../sass/mobile/_layout.scss */
+  .browse-showtree .pane.left.treeview {
     width: 90% !important; }
-  /* line 155, ../sass/mobile/_layout.scss */
+  /* line 156, ../sass/mobile/_layout.scss */
   .browse-showtree .pane.right-repr {
     left: 0 !important;
-    transform: translateX(90%); } }
+    transform: translateX(90%); }
+    /* line 159, ../sass/mobile/_layout.scss */
+    .browse-showtree .pane.right-repr #content-area {
+      opacity: 0; } }
 @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-  /* line 163, ../sass/mobile/_layout.scss */
+  /* line 167, ../sass/mobile/_layout.scss */
   .desktop-hide {
     display: none; } }
 /*****************************************************************************
diff --git a/platform/commonUI/general/res/sass/mobile/_layout.scss b/platform/commonUI/general/res/sass/mobile/_layout.scss
index 008beef117..aee784f537 100644
--- a/platform/commonUI/general/res/sass/mobile/_layout.scss
+++ b/platform/commonUI/general/res/sass/mobile/_layout.scss
@@ -24,15 +24,22 @@
     // Wrapper of the entire 2 panes, only enacted on
     // phone and tablet. Also for the panes
     .browse-wrapper,
-    .mobile-pane {
-        position: absolute;
+    .pane {
         top: 0 !important; right: 0; bottom: 0; left: 0;
     }
 
-    .mobile-pane.right-repr {
+    .pane.left.treeview {
+        background-color: $colorMobilePaneLeft;
+    }
+
+    .pane.right-repr {
         //@include test();
         @include slMenuTransitions;
         margin-left: 0 !important;
+        #content-area {
+            @include slMenuTransitions;
+            opacity: 1;
+        }
     }
 
     .user-environ .browse-area,
@@ -55,7 +62,7 @@
         @include user-select(none);
         // Sets the left tree menu when the tree
         // is hidden.
-        .mobile-pane.left {
+        .pane.left.treeview {
             opacity: 0;
             right: 100% !important;
             width: auto !important;
@@ -64,10 +71,8 @@
         }
         // Sets the right represenation when
         // the tree is hidden.
-        .mobile-pane.right-repr {
-            //@include slMenuTransitions;
+        .pane.right-repr {
             left: 0 !important;
-            //width: 100% !important;
         }
     }
 
@@ -80,7 +85,7 @@
         @include user-select(none);
 
         // Sets the left tree menu when the tree is shown.
-        .mobile-pane.left {
+        .pane.left.treeview {
             @include trans-prop-nice(opacity, .4s);
             @include background-image(linear-gradient(90deg, rgba(black, 0) 98%, rgba(black, 0.3) 100%));
             opacity: 1;
@@ -90,8 +95,7 @@
             width: $proporMenuWithView !important;
         }
         // Sets the right representation when the tree is shown.
-        .mobile-pane.right-repr {
-            //@include slMenuTransitions; CH MOVED
+        .pane.right-repr {
             left: $proporMenuWithView !important;
             //width: auto !important;
 
@@ -146,12 +150,15 @@
 
 @include phonePortrait {
     .browse-showtree {
-        .mobile-pane.left {
+        .pane.left.treeview {
             width: $proporMenuOnly !important;
         }
-        .mobile-pane.right-repr {
+        .pane.right-repr {
             left: 0 !important;
             transform: translateX($proporMenuOnly);
+            #content-area {
+                opacity: 0;
+            }
         }
     }
 }
diff --git a/platform/commonUI/general/res/sass/user-environ/_frame.scss b/platform/commonUI/general/res/sass/user-environ/_frame.scss
index d67c0ccb9a..f04071fa0e 100644
--- a/platform/commonUI/general/res/sass/user-environ/_frame.scss
+++ b/platform/commonUI/general/res/sass/user-environ/_frame.scss
@@ -36,7 +36,7 @@
 		line-height: $ohH;
 	}
 	>.object-holder.abs {
-		top: $ohH + $interiorMarginSm;
+		top: $ohH + $interiorMargin;
 	}
 	.contents {
 		$myM: $interiorMargin;

From 2542255342a9d3919a35e9934fb4619f19247819 Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Wed, 26 Aug 2015 10:16:22 -0700
Subject: [PATCH 164/209] [Mobile] AgentService call

window referred to in TreeNodeController added as
keyword to skip in top comment.
---
 platform/commonUI/general/src/controllers/TreeNodeController.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/platform/commonUI/general/src/controllers/TreeNodeController.js b/platform/commonUI/general/src/controllers/TreeNodeController.js
index 0aba8fc246..b25d58a025 100644
--- a/platform/commonUI/general/src/controllers/TreeNodeController.js
+++ b/platform/commonUI/general/src/controllers/TreeNodeController.js
@@ -19,7 +19,7 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-/*global define,Promise*/
+/*global define,Promise,window*/
 
 /**
  * Module defining TreeNodeController. Created by vwoeltje on 11/10/14.

From 9a3009f32746c621ce5b6b9e75c18953a5017ea1 Mon Sep 17 00:00:00 2001
From: Charles Hacskaylo <charles.f.hacskaylo@nasa.gov>
Date: Wed, 26 Aug 2015 10:50:14 -0700
Subject: [PATCH 165/209] [Mobile] IN PROGRESS: Styling on Create menu

open #74
---
 .../general/res/css/theme-espresso.css        | 34 +++++++++++++++++++
 platform/commonUI/general/res/sass/_main.scss |  1 +
 .../res/sass/mobile/controls/_menus.scss      | 29 ++++++++++------
 3 files changed, 54 insertions(+), 10 deletions(-)

diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index ec9f0aac32..75d2c7b754 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -2999,6 +2999,40 @@ label.checkbox.custom {
   right: 0;
   width: auto; }
 
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+@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 26, ../sass/mobile/controls/_menus.scss */
+  .menu-element .super-menu {
+    width: 250px;
+    height: 250px; }
+    /* line 32, ../sass/mobile/controls/_menus.scss */
+    .menu-element .super-menu .pane.left {
+      border-right: none;
+      padding-right: 0;
+      width: 100%; }
+    /* line 37, ../sass/mobile/controls/_menus.scss */
+    .menu-element .super-menu .pane.right {
+      display: none; } }
 /* line 1, ../sass/controls/_time-controller.scss */
 .l-time-controller {
   position: relative;
diff --git a/platform/commonUI/general/res/sass/_main.scss b/platform/commonUI/general/res/sass/_main.scss
index a388fcac35..8803074f63 100644
--- a/platform/commonUI/general/res/sass/_main.scss
+++ b/platform/commonUI/general/res/sass/_main.scss
@@ -48,6 +48,7 @@
 @import "controls/controls";
 @import "controls/lists";
 @import "controls/menus";
+@import "mobile/controls/menus";
 @import "controls/time-controller";
 @import "edit/editor";
 @import "features/imagery";
diff --git a/platform/commonUI/general/res/sass/mobile/controls/_menus.scss b/platform/commonUI/general/res/sass/mobile/controls/_menus.scss
index e06fdb7979..3c8ea79917 100644
--- a/platform/commonUI/general/res/sass/mobile/controls/_menus.scss
+++ b/platform/commonUI/general/res/sass/mobile/controls/_menus.scss
@@ -20,15 +20,24 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-// Mobile hamburger icon is
-// sized according to the device
-.mobile-menu-icon {
-    display: inline-block;
-    @include phoneandtablet {
-        font-size: 21px;
-        //padding-top: $imageThumbPad;
-    }
-    @include desktop {
-        display: none;
+// Override the Create menu for mobile
+@include phoneandtablet {
+    .menu-element {
+        .super-menu {
+            $d: 250px;
+            width: $d;
+            height: $d;
+
+            .pane {
+                &.left {
+                    border-right: none;
+                    padding-right: 0;
+                    width: 100%;
+                }
+                &.right {
+                    display: none;
+                }
+            }
+        }
     }
 }

From f80266b23f40d92d418b608147bce03bd8bb96e0 Mon Sep 17 00:00:00 2001
From: Charles Hacskaylo <charles.f.hacskaylo@nasa.gov>
Date: Wed, 26 Aug 2015 12:34:45 -0700
Subject: [PATCH 166/209] [Mobile] IN PROGRESS: Styling in forms, overlay and
 tree

open #74
.section-header and form-row styles changed in forms/_elems.scss;
significant changes to overlay in mobile: full-screen, close button, more;
tree hover bg changed to use rgba(#fff, 0.1);
removed "Hide title by default" in core/bundle.json;
---
 .../commonUI/dialog/res/templates/dialog.html |   2 +-
 .../dialog/res/templates/overlay.html         |   2 +-
 platform/commonUI/general/res/css/forms.css   |  59 +++++-----
 .../general/res/css/theme-espresso.css        | 103 +++++++++---------
 platform/commonUI/general/res/css/tree.css    |   2 +-
 .../commonUI/general/res/sass/_constants.scss |   6 +-
 .../general/res/sass/forms/_elems.scss        |  17 +--
 .../res/sass/mobile/overlay/_overlay.scss     |  10 ++
 .../general/res/sass/overlay/_overlay.scss    |  14 +--
 .../commonUI/general/res/sass/tree/_tree.scss |   2 +-
 platform/core/bundle.json                     |   6 -
 11 files changed, 113 insertions(+), 110 deletions(-)

diff --git a/platform/commonUI/dialog/res/templates/dialog.html b/platform/commonUI/dialog/res/templates/dialog.html
index 661ea36ff5..1bea0290e7 100644
--- a/platform/commonUI/dialog/res/templates/dialog.html
+++ b/platform/commonUI/dialog/res/templates/dialog.html
@@ -25,7 +25,7 @@
         All fields marked <span class="ui-symbol req">*</span> are required.
     </div>
 </div>
-<div class="abs form outline editor">
+<div class="abs form editor">
     <div class='abs contents l-dialog'>
         <mct-form ng-model="ngModel.value"
                   structure="ngModel.structure"
diff --git a/platform/commonUI/dialog/res/templates/overlay.html b/platform/commonUI/dialog/res/templates/overlay.html
index 2718f9d74d..df8bd9c160 100644
--- a/platform/commonUI/dialog/res/templates/overlay.html
+++ b/platform/commonUI/dialog/res/templates/overlay.html
@@ -25,7 +25,7 @@
         <a href=""
            ng-click="ngModel.cancel()"
            ng-if="ngModel.cancel"
-           class="btn normal ui-symbol close">
+           class="clk-icon icon ui-symbol close">
             x
         </a>
         <div class="abs contents" ng-transclude>
diff --git a/platform/commonUI/general/res/css/forms.css b/platform/commonUI/general/res/css/forms.css
index 6e2aec574a..a9ce755177 100644
--- a/platform/commonUI/general/res/css/forms.css
+++ b/platform/commonUI/general/res/css/forms.css
@@ -172,21 +172,20 @@
  *****************************************************************************/
 /* line 22, ../sass/forms/_elems.scss */
 .section-header {
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
+  -moz-border-radius: 2px;
+  -webkit-border-radius: 2px;
+  border-radius: 2px;
   background: rgba(255, 255, 255, 0.1);
+  color: #cccccc;
   font-size: 0.8em;
-  margin-top: 5px;
-  padding: 5px; }
-  /* line 28, ../sass/forms/_elems.scss */
-  .section-header:first-child {
-    margin-top: 0; }
+  padding: 5px 5px;
+  text-transform: uppercase; }
 
 /* line 35, ../sass/forms/_elems.scss */
 .form .form-section {
-  position: relative; }
-/* line 39, ../sass/forms/_elems.scss */
+  position: relative;
+  margin-bottom: 20px; }
+/* line 40, ../sass/forms/_elems.scss */
 .form .form-row {
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
@@ -195,12 +194,12 @@
   *zoom: 1;
   border-top: 1px solid rgba(255, 255, 255, 0.1);
   margin-top: 5px;
-  padding: 5px;
+  padding: 5px 5px;
   position: relative; }
-  /* line 47, ../sass/forms/_elems.scss */
+  /* line 48, ../sass/forms/_elems.scss */
   .form .form-row.first {
     border-top: none; }
-  /* line 51, ../sass/forms/_elems.scss */
+  /* line 52, ../sass/forms/_elems.scss */
   .form .form-row .label,
   .form .form-row .controls {
     -moz-box-sizing: border-box;
@@ -211,42 +210,42 @@
     font-size: 0.8rem;
     line-height: 22px;
     min-height: 22px; }
-  /* line 60, ../sass/forms/_elems.scss */
+  /* line 61, ../sass/forms/_elems.scss */
   .form .form-row > .label {
     float: left;
     min-width: 120px;
     position: relative;
     white-space: nowrap;
-    width: 20%; }
-  /* line 70, ../sass/forms/_elems.scss */
+    width: 30%; }
+  /* line 71, ../sass/forms/_elems.scss */
   .form .form-row .value {
     color: #cccccc; }
-  /* line 74, ../sass/forms/_elems.scss */
+  /* line 75, ../sass/forms/_elems.scss */
   .form .form-row .controls {
     float: left;
     position: relative;
-    width: 79.9%; }
-    /* line 81, ../sass/forms/_elems.scss */
+    width: 69.9%; }
+    /* line 82, ../sass/forms/_elems.scss */
     .form .form-row .controls .l-composite-control.l-checkbox {
       display: inline-block;
       line-height: 14px;
       margin-right: 5px; }
-    /* line 90, ../sass/forms/_elems.scss */
+    /* line 91, ../sass/forms/_elems.scss */
     .form .form-row .controls .l-med input[type="text"] {
       width: 200px; }
-    /* line 94, ../sass/forms/_elems.scss */
+    /* line 95, ../sass/forms/_elems.scss */
     .form .form-row .controls .l-small input[type="text"] {
       width: 50px; }
-    /* line 98, ../sass/forms/_elems.scss */
+    /* line 99, ../sass/forms/_elems.scss */
     .form .form-row .controls .l-numeric input[type="text"] {
       text-align: right; }
-    /* line 102, ../sass/forms/_elems.scss */
+    /* line 103, ../sass/forms/_elems.scss */
     .form .form-row .controls .select {
       margin-right: 5px; }
-  /* line 107, ../sass/forms/_elems.scss */
+  /* line 108, ../sass/forms/_elems.scss */
   .form .form-row .field-hints {
     color: #666666; }
-  /* line 111, ../sass/forms/_elems.scss */
+  /* line 112, ../sass/forms/_elems.scss */
   .form .form-row .selector-list {
     -moz-border-radius: 2px;
     -webkit-border-radius: 2px;
@@ -259,7 +258,7 @@
     position: relative;
     height: 150px;
     overflow: auto; }
-    /* line 122, ../sass/forms/_elems.scss */
+    /* line 123, ../sass/forms/_elems.scss */
     .form .form-row .selector-list .wrapper {
       overflow-y: auto;
       position: absolute;
@@ -268,24 +267,24 @@
       bottom: 5px;
       left: 5px; }
 
-/* line 136, ../sass/forms/_elems.scss */
+/* line 137, ../sass/forms/_elems.scss */
 label.form-control.checkbox input {
   margin-right: 5px;
   vertical-align: top; }
 
-/* line 142, ../sass/forms/_elems.scss */
+/* line 143, ../sass/forms/_elems.scss */
 .hint,
 .s-hint {
   font-size: 0.9em; }
 
-/* line 147, ../sass/forms/_elems.scss */
+/* line 148, ../sass/forms/_elems.scss */
 .l-result {
   display: inline-block;
   min-width: 32px;
   min-height: 32px;
   position: relative;
   vertical-align: top; }
-  /* line 154, ../sass/forms/_elems.scss */
+  /* line 155, ../sass/forms/_elems.scss */
   .l-result div.s-hint {
     -moz-border-radius: 2px;
     -webkit-border-radius: 2px;
diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index 75d2c7b754..289902281a 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -3486,21 +3486,20 @@ label.checkbox.custom {
  *****************************************************************************/
 /* line 22, ../sass/forms/_elems.scss */
 .section-header {
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
+  -moz-border-radius: 2px;
+  -webkit-border-radius: 2px;
+  border-radius: 2px;
   background: rgba(255, 255, 255, 0.1);
+  color: #cccccc;
   font-size: 0.8em;
-  margin-top: 5px;
-  padding: 5px; }
-  /* line 28, ../sass/forms/_elems.scss */
-  .section-header:first-child {
-    margin-top: 0; }
+  padding: 5px 5px;
+  text-transform: uppercase; }
 
 /* line 35, ../sass/forms/_elems.scss */
 .form .form-section {
-  position: relative; }
-/* line 39, ../sass/forms/_elems.scss */
+  position: relative;
+  margin-bottom: 20px; }
+/* line 40, ../sass/forms/_elems.scss */
 .form .form-row {
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
@@ -3509,12 +3508,12 @@ label.checkbox.custom {
   *zoom: 1;
   border-top: 1px solid rgba(255, 255, 255, 0.1);
   margin-top: 5px;
-  padding: 5px;
+  padding: 5px 5px;
   position: relative; }
-  /* line 47, ../sass/forms/_elems.scss */
+  /* line 48, ../sass/forms/_elems.scss */
   .form .form-row.first {
     border-top: none; }
-  /* line 51, ../sass/forms/_elems.scss */
+  /* line 52, ../sass/forms/_elems.scss */
   .form .form-row .label,
   .form .form-row .controls {
     -moz-box-sizing: border-box;
@@ -3525,42 +3524,42 @@ label.checkbox.custom {
     font-size: 0.8rem;
     line-height: 22px;
     min-height: 22px; }
-  /* line 60, ../sass/forms/_elems.scss */
+  /* line 61, ../sass/forms/_elems.scss */
   .form .form-row > .label {
     float: left;
     min-width: 120px;
     position: relative;
     white-space: nowrap;
-    width: 20%; }
-  /* line 70, ../sass/forms/_elems.scss */
+    width: 30%; }
+  /* line 71, ../sass/forms/_elems.scss */
   .form .form-row .value {
     color: #cccccc; }
-  /* line 74, ../sass/forms/_elems.scss */
+  /* line 75, ../sass/forms/_elems.scss */
   .form .form-row .controls {
     float: left;
     position: relative;
-    width: 79.9%; }
-    /* line 81, ../sass/forms/_elems.scss */
+    width: 69.9%; }
+    /* line 82, ../sass/forms/_elems.scss */
     .form .form-row .controls .l-composite-control.l-checkbox {
       display: inline-block;
       line-height: 14px;
       margin-right: 5px; }
-    /* line 90, ../sass/forms/_elems.scss */
+    /* line 91, ../sass/forms/_elems.scss */
     .form .form-row .controls .l-med input[type="text"] {
       width: 200px; }
-    /* line 94, ../sass/forms/_elems.scss */
+    /* line 95, ../sass/forms/_elems.scss */
     .form .form-row .controls .l-small input[type="text"] {
       width: 50px; }
-    /* line 98, ../sass/forms/_elems.scss */
+    /* line 99, ../sass/forms/_elems.scss */
     .form .form-row .controls .l-numeric input[type="text"] {
       text-align: right; }
-    /* line 102, ../sass/forms/_elems.scss */
+    /* line 103, ../sass/forms/_elems.scss */
     .form .form-row .controls .select {
       margin-right: 5px; }
-  /* line 107, ../sass/forms/_elems.scss */
+  /* line 108, ../sass/forms/_elems.scss */
   .form .form-row .field-hints {
     color: #666666; }
-  /* line 111, ../sass/forms/_elems.scss */
+  /* line 112, ../sass/forms/_elems.scss */
   .form .form-row .selector-list {
     -moz-border-radius: 2px;
     -webkit-border-radius: 2px;
@@ -3573,7 +3572,7 @@ label.checkbox.custom {
     position: relative;
     height: 150px;
     overflow: auto; }
-    /* line 122, ../sass/forms/_elems.scss */
+    /* line 123, ../sass/forms/_elems.scss */
     .form .form-row .selector-list .wrapper {
       overflow-y: auto;
       position: absolute;
@@ -3582,24 +3581,24 @@ label.checkbox.custom {
       bottom: 5px;
       left: 5px; }
 
-/* line 136, ../sass/forms/_elems.scss */
+/* line 137, ../sass/forms/_elems.scss */
 label.form-control.checkbox input {
   margin-right: 5px;
   vertical-align: top; }
 
-/* line 142, ../sass/forms/_elems.scss */
+/* line 143, ../sass/forms/_elems.scss */
 .hint,
 .s-hint {
   font-size: 0.9em; }
 
-/* line 147, ../sass/forms/_elems.scss */
+/* line 148, ../sass/forms/_elems.scss */
 .l-result {
   display: inline-block;
   min-width: 32px;
   min-height: 32px;
   position: relative;
   vertical-align: top; }
-  /* line 154, ../sass/forms/_elems.scss */
+  /* line 155, ../sass/forms/_elems.scss */
   .l-result div.s-hint {
     -moz-border-radius: 2px;
     -webkit-border-radius: 2px;
@@ -4346,19 +4345,14 @@ input[type="text"] {
   background: rgba(0, 0, 0, 0.7);
   z-index: 100; }
 /* line 27, ../sass/overlay/_overlay.scss */
-.overlay .btn.close {
-  -moz-border-radius: 4px;
-  -webkit-border-radius: 4px;
-  border-radius: 4px;
-  padding: 3px 6px;
+.overlay .clk-icon.close {
   position: absolute;
-  border: none;
-  top: 3px;
-  right: 3px;
+  top: 10px;
+  right: 10px;
   bottom: auto;
   left: auto;
   z-index: 100; }
-/* line 38, ../sass/overlay/_overlay.scss */
+/* line 32, ../sass/overlay/_overlay.scss */
 .overlay > .holder {
   background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzUyNTI1MiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzQ1NDU0NSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
   background-size: 100%;
@@ -4391,29 +4385,29 @@ input[type="text"] {
   /* line 175, ../sass/_mixins.scss */
   .overlay > .holder.btn-menu .invoke-menu {
     color: #757575; }
-  /* line 45, ../sass/overlay/_overlay.scss */
+  /* line 39, ../sass/overlay/_overlay.scss */
   .overlay > .holder > .contents {
     top: 25px;
     right: 25px;
     bottom: 25px;
     left: 25px; }
-/* line 50, ../sass/overlay/_overlay.scss */
+/* line 44, ../sass/overlay/_overlay.scss */
 .overlay .title {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  font-size: 1.3em;
+  font-size: 1.2em;
   margin-bottom: 5px; }
-/* line 56, ../sass/overlay/_overlay.scss */
+/* line 50, ../sass/overlay/_overlay.scss */
 .overlay .top-bar {
   height: 60px; }
-/* line 60, ../sass/overlay/_overlay.scss */
+/* line 54, ../sass/overlay/_overlay.scss */
 .overlay .editor {
   top: 70px;
   bottom: 50px;
   left: 0;
   right: 0; }
-/* line 66, ../sass/overlay/_overlay.scss */
+/* line 60, ../sass/overlay/_overlay.scss */
 .overlay .bottom-bar {
   top: auto;
   right: 0;
@@ -4422,10 +4416,10 @@ input[type="text"] {
   overflow: visible;
   height: 40px;
   text-align: right; }
-  /* line 72, ../sass/overlay/_overlay.scss */
+  /* line 66, ../sass/overlay/_overlay.scss */
   .overlay .bottom-bar .btn {
     margin-left: 10px; }
-/* line 76, ../sass/overlay/_overlay.scss */
+/* line 70, ../sass/overlay/_overlay.scss */
 .overlay .contents.l-dialog {
   top: 5px;
   right: 5px;
@@ -4435,6 +4429,10 @@ input[type="text"] {
 
 @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 4, ../sass/mobile/overlay/_overlay.scss */
+  .overlay .clk-icon.close {
+    top: 10px;
+    right: 10px; }
+  /* line 8, ../sass/mobile/overlay/_overlay.scss */
   .overlay > .holder {
     -moz-border-radius: 0;
     -webkit-border-radius: 0;
@@ -4443,23 +4441,26 @@ input[type="text"] {
     right: 0;
     bottom: 0;
     left: 0; }
-    /* line 10, ../sass/mobile/overlay/_overlay.scss */
+    /* line 14, ../sass/mobile/overlay/_overlay.scss */
     .overlay > .holder > .contents {
       top: 10px;
       right: 10px;
       bottom: 10px;
       left: 10px; }
-      /* line 16, ../sass/mobile/overlay/_overlay.scss */
+      /* line 21, ../sass/mobile/overlay/_overlay.scss */
+      .overlay > .holder > .contents .top-bar > .title {
+        margin-right: 1.2em; }
+      /* line 26, ../sass/mobile/overlay/_overlay.scss */
       .overlay > .holder > .contents .form.editor {
         border: none; }
-        /* line 19, ../sass/mobile/overlay/_overlay.scss */
+        /* line 29, ../sass/mobile/overlay/_overlay.scss */
         .overlay > .holder > .contents .form.editor .contents {
           top: 0;
           right: 0;
           bottom: 0;
           left: 0; } }
 @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 33, ../sass/mobile/overlay/_overlay.scss */
+  /* line 43, ../sass/mobile/overlay/_overlay.scss */
   .overlay > .holder > .contents .form.editor .contents .form-row > .label,
   .overlay > .holder > .contents .form.editor .contents .form-row > .controls {
     display: block;
diff --git a/platform/commonUI/general/res/css/tree.css b/platform/commonUI/general/res/css/tree.css
index 2ca3b73ab9..701433a525 100644
--- a/platform/commonUI/general/res/css/tree.css
+++ b/platform/commonUI/general/res/css/tree.css
@@ -279,7 +279,7 @@ ul.tree {
       @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
         /* line 134, ../sass/tree/_tree.scss */
         ul.tree li span.tree-item:not(.selected):hover {
-          background: #404040;
+          background: rgba(255, 255, 255, 0.1);
           color: #cccccc; }
           /* line 137, ../sass/tree/_tree.scss */
           ul.tree li span.tree-item:not(.selected):hover .context-trigger {
diff --git a/platform/commonUI/general/res/sass/_constants.scss b/platform/commonUI/general/res/sass/_constants.scss
index bb10a83455..83031d6b0e 100644
--- a/platform/commonUI/general/res/sass/_constants.scss
+++ b/platform/commonUI/general/res/sass/_constants.scss
@@ -48,6 +48,7 @@ $colorPausedFg: #fff;
 $colorCreateBtn: $colorKey;
 $colorGridLines: rgba(#fff, 0.05);
 $colorFormLines: rgba(#fff, 0.1);
+$colorFormSectionHeader: rgba(#000, 0.2);
 // Menu colors
 $colorMenuBg: lighten($colorBodyBg, 23%);
 $colorMenuFg: lighten($colorMenuBg, 70%);
@@ -104,6 +105,7 @@ $ueEditLeftPaneW: 75%;
 // Overlay
 $ovrTopBarH: 60px;
 $ovrFooterH: 40px;
+$overlayMargin: 25px;
 // Items
 $ueBrowseGridItemLg: 200px;
 $ueBrowseGridItemTopBarH: 20px;
@@ -145,9 +147,11 @@ $reqSymbolFontSize: 0.7em;
 
 /************************** CONTROLS */
 $controlDisabledOpacity: 0.3;
-$formLabelW: 20%;
+$formLabelW: 30%;
 $formInputH: 22px;
 $formRowCtrlsH: 14px;
+$formTBPad: $interiorMargin;
+$formLRPad: $interiorMargin;
 $menuLineH: 1.5rem;
 $menuLineHPx: 24px;
 $scrollbarTrackSize: 10px;
diff --git a/platform/commonUI/general/res/sass/forms/_elems.scss b/platform/commonUI/general/res/sass/forms/_elems.scss
index 095e9fc582..3971036983 100644
--- a/platform/commonUI/general/res/sass/forms/_elems.scss
+++ b/platform/commonUI/general/res/sass/forms/_elems.scss
@@ -20,20 +20,21 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 .section-header {
-	@include border-radius(3px);
-	background: $colorFormLines;
+	@include border-radius($basicCr);
+	background: rgba(#fff, 0.1);
+	$c: lighten($colorBodyFg, 20%);
+	//border-bottom: 1px solid rgba(#fff, 0.3);
+	color: $c;
 	font-size: 0.8em;
-	margin-top: $interiorMargin;
-	padding: $interiorMargin;
-	&:first-child {
-		margin-top: 0;
-	}
+	padding: $formTBPad $formLRPad;
+	text-transform: uppercase;
 }
 
 .form {
 //	@include test(orange);
 	.form-section {
 		position: relative;
+		margin-bottom: $interiorMarginLg * 2;
 	}
 
 	.form-row {
@@ -42,7 +43,7 @@
 		@include clearfix;
 		border-top: 1px solid $colorFormLines;
 		margin-top: $m;
-		padding: $m;
+		padding: $formTBPad $formLRPad;
 		position: relative;
 		&.first {
 			border-top: none;
diff --git a/platform/commonUI/general/res/sass/mobile/overlay/_overlay.scss b/platform/commonUI/general/res/sass/mobile/overlay/_overlay.scss
index 9bee6e6865..2c455a9941 100644
--- a/platform/commonUI/general/res/sass/mobile/overlay/_overlay.scss
+++ b/platform/commonUI/general/res/sass/mobile/overlay/_overlay.scss
@@ -1,6 +1,10 @@
 @include phoneandtablet {
     .overlay {
         $m: 0;
+        .clk-icon.close {
+            top: $mobileOverlayMargin; right: $mobileOverlayMargin;
+        }
+
         > .holder {
             @include border-radius($m);
             top: $m;
@@ -13,6 +17,12 @@
                 bottom: $mobileOverlayMargin;
                 left: $mobileOverlayMargin;
 
+                .top-bar {
+                    > .title {
+                        margin-right: 1.2em;
+                    }
+                }
+
                 .form.editor {
                     border: none;
 
diff --git a/platform/commonUI/general/res/sass/overlay/_overlay.scss b/platform/commonUI/general/res/sass/overlay/_overlay.scss
index 692db103e1..f5c9cd477f 100644
--- a/platform/commonUI/general/res/sass/overlay/_overlay.scss
+++ b/platform/commonUI/general/res/sass/overlay/_overlay.scss
@@ -24,16 +24,10 @@
 		background: $colorOvrBlocker;
 		z-index: 100;
 	}
-    .btn.close {
-	    @include border-radius($basicCr * 2);
-	    padding: 3px 6px;
+    .clk-icon.close {
         position: absolute;
-	    border: none;
-        top: $interiorMarginSm; right: $interiorMarginSm; bottom: auto; left: auto;
+        top: $interiorMarginLg; right: $interiorMarginLg; bottom: auto; left: auto;
 	    z-index: 100;
-    }
-    .editor {
-//        background: $colorBodyBg;
     }
 	>.holder {
 		$i: 15%;
@@ -43,13 +37,13 @@
 		top: $i; right: $i; bottom: $i; left: $i;
 		z-index: 101;
         >.contents {
-            $m: 25px;
+            $m: $overlayMargin;
             top: $m; right: $m; bottom: $m; left: $m;
         }
 	}
     .title {
 	    @include ellipsize();
-        font-size: 1.3em;
+        font-size: 1.2em;
 	    margin-bottom: $interiorMargin;
     }
     
diff --git a/platform/commonUI/general/res/sass/tree/_tree.scss b/platform/commonUI/general/res/sass/tree/_tree.scss
index cf1ad57a50..65ddab2a63 100644
--- a/platform/commonUI/general/res/sass/tree/_tree.scss
+++ b/platform/commonUI/general/res/sass/tree/_tree.scss
@@ -132,7 +132,7 @@ ul.tree {
                 // NOTE: [Mobile] Removed Hover on Mobile
                 @include desktop {
                     &:hover {
-                        background: lighten($colorBodyBg, 5%);
+                        background: rgba(#fff, 0.1); //lighten($colorBodyBg, 5%);
                         color: lighten($colorBodyFg, 20%);
                         .context-trigger {
                             display: block;
diff --git a/platform/core/bundle.json b/platform/core/bundle.json
index f5bf73b8fc..0643be2646 100644
--- a/platform/core/bundle.json
+++ b/platform/core/bundle.json
@@ -117,12 +117,6 @@
                         "pattern": "\\S+",
                         "required": true,
                         "cssclass": "l-med"
-                    },
-                    {
-                        "control": "checkbox",
-                        "name": "Display title by default",
-                        "key": "displayTitle",
-                        "property": [ "display", "title" ]
                     }
                 ]
             },

From b8b9721ddc961c92d2a9cf8e4f362f0e308d58c9 Mon Sep 17 00:00:00 2001
From: Charles Hacskaylo <charles.f.hacskaylo@nasa.gov>
Date: Wed, 26 Aug 2015 13:04:09 -0700
Subject: [PATCH 167/209] [Mobile] IN PROGRESS: Hide name in view-switcher in
 mobile

open #74
---
 .../general/res/css/theme-espresso.css        | 21 +++++++++++--------
 .../general/res/sass/mobile/_layout.scss      |  4 ++++
 2 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index 289902281a..0f33224f0d 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -889,24 +889,27 @@ mct-container {
     /* line 120, ../sass/mobile/_layout.scss */
     .object-browse-bar .view-switcher {
       margin-right: 0 !important; }
+      /* line 122, ../sass/mobile/_layout.scss */
+      .object-browse-bar .view-switcher .name {
+        display: none; }
 
-  /* line 125, ../sass/mobile/_layout.scss */
+  /* line 129, ../sass/mobile/_layout.scss */
   .tree-holder {
     overflow-x: hidden !important; }
 
-  /* line 129, ../sass/mobile/_layout.scss */
+  /* line 133, ../sass/mobile/_layout.scss */
   .mobile-disable-select {
     -moz-user-select: -moz-none;
     -ms-user-select: none;
     -webkit-user-select: none;
     user-select: none; }
 
-  /* line 134, ../sass/mobile/_layout.scss */
+  /* line 138, ../sass/mobile/_layout.scss */
   .mobile-hide,
   .mobile-hide-important {
     display: none !important; }
 
-  /* line 139, ../sass/mobile/_layout.scss */
+  /* line 143, ../sass/mobile/_layout.scss */
   .mobile-back-hide {
     pointer-events: none;
     -moz-transition-property: opacity;
@@ -923,7 +926,7 @@ mct-container {
     transition-timing-function: ease-in-out;
     opacity: 0; }
 
-  /* line 144, ../sass/mobile/_layout.scss */
+  /* line 148, ../sass/mobile/_layout.scss */
   .mobile-back-unhide {
     pointer-events: all;
     -moz-transition-property: opacity;
@@ -940,18 +943,18 @@ mct-container {
     transition-timing-function: ease-in-out;
     opacity: 1; } }
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) {
-  /* line 153, ../sass/mobile/_layout.scss */
+  /* line 157, ../sass/mobile/_layout.scss */
   .browse-showtree .pane.left.treeview {
     width: 90% !important; }
-  /* line 156, ../sass/mobile/_layout.scss */
+  /* line 160, ../sass/mobile/_layout.scss */
   .browse-showtree .pane.right-repr {
     left: 0 !important;
     transform: translateX(90%); }
-    /* line 159, ../sass/mobile/_layout.scss */
+    /* line 163, ../sass/mobile/_layout.scss */
     .browse-showtree .pane.right-repr #content-area {
       opacity: 0; } }
 @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-  /* line 167, ../sass/mobile/_layout.scss */
+  /* line 171, ../sass/mobile/_layout.scss */
   .desktop-hide {
     display: none; } }
 /*****************************************************************************
diff --git a/platform/commonUI/general/res/sass/mobile/_layout.scss b/platform/commonUI/general/res/sass/mobile/_layout.scss
index aee784f537..a6ffe688c4 100644
--- a/platform/commonUI/general/res/sass/mobile/_layout.scss
+++ b/platform/commonUI/general/res/sass/mobile/_layout.scss
@@ -119,6 +119,10 @@
         }
         .view-switcher {
             margin-right: 0 !important;
+            .name {
+                // Hide the name in mobile
+                display: none;
+            }
         }
     }
 

From a27083c28c690f2370a04330e025e4d4fdc1f89a Mon Sep 17 00:00:00 2001
From: Charles Hacskaylo <charlesh88@gmail.com>
Date: Wed, 26 Aug 2015 16:54:13 -0700
Subject: [PATCH 168/209] [Mobile] IN PROGRESS: tweaked padding in form-row

open #74
---
 platform/commonUI/general/res/css/forms.css   |  2 +-
 .../general/res/css/theme-espresso.css        | 20 +++++++++----------
 .../general/res/sass/forms/_elems.scss        |  2 +-
 3 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/platform/commonUI/general/res/css/forms.css b/platform/commonUI/general/res/css/forms.css
index a9ce755177..d5e363bcd9 100644
--- a/platform/commonUI/general/res/css/forms.css
+++ b/platform/commonUI/general/res/css/forms.css
@@ -194,7 +194,7 @@
   *zoom: 1;
   border-top: 1px solid rgba(255, 255, 255, 0.1);
   margin-top: 5px;
-  padding: 5px 5px;
+  padding: 5px 0;
   position: relative; }
   /* line 48, ../sass/forms/_elems.scss */
   .form .form-row.first {
diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index 0f33224f0d..80ba436f86 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -120,7 +120,7 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-/* line 5, ../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 5, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 html, body, div, span, applet, object, iframe,
 h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 a, abbr, acronym, address, big, cite, code,
@@ -141,38 +141,38 @@ time, mark, audio, video {
   font-size: 100%;
   vertical-align: baseline; }
 
-/* line 22, ../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 22, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 html {
   line-height: 1; }
 
-/* line 24, ../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 24, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 ol, ul {
   list-style: none; }
 
-/* line 26, ../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 26, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 table {
   border-collapse: collapse;
   border-spacing: 0; }
 
-/* line 28, ../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 28, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 caption, th, td {
   text-align: left;
   font-weight: normal;
   vertical-align: middle; }
 
-/* line 30, ../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 30, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 q, blockquote {
   quotes: none; }
-  /* line 103, ../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+  /* line 103, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
   q:before, q:after, blockquote:before, blockquote:after {
     content: "";
     content: none; }
 
-/* line 32, ../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 32, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 a img {
   border: none; }
 
-/* line 116, ../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 116, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
   display: block; }
 
@@ -3511,7 +3511,7 @@ label.checkbox.custom {
   *zoom: 1;
   border-top: 1px solid rgba(255, 255, 255, 0.1);
   margin-top: 5px;
-  padding: 5px 5px;
+  padding: 5px 0;
   position: relative; }
   /* line 48, ../sass/forms/_elems.scss */
   .form .form-row.first {
diff --git a/platform/commonUI/general/res/sass/forms/_elems.scss b/platform/commonUI/general/res/sass/forms/_elems.scss
index 3971036983..61825dfd2f 100644
--- a/platform/commonUI/general/res/sass/forms/_elems.scss
+++ b/platform/commonUI/general/res/sass/forms/_elems.scss
@@ -43,7 +43,7 @@
 		@include clearfix;
 		border-top: 1px solid $colorFormLines;
 		margin-top: $m;
-		padding: $formTBPad $formLRPad;
+		padding: $formTBPad 0;
 		position: relative;
 		&.first {
 			border-top: none;

From d33678276cc24712bc8f12bef9dd6b0cb41e094c Mon Sep 17 00:00:00 2001
From: Charles Hacskaylo <charlesh88@gmail.com>
Date: Wed, 26 Aug 2015 17:49:40 -0700
Subject: [PATCH 169/209] [Mobile] IN PROGRESS: Re-orgs after merge of Shivam's
 mobile branch

open #74
Re-applied changes to browse.html;
Added mobile/.../_search.scss;
Removed unused mobile/search/layout.scss;
Moved inclusion of search/_search.scss from tree.scss to main.scss;
---
 .../commonUI/browse/res/templates/browse.html |  34 +--
 .../general/res/css/theme-espresso.css        | 253 ++++++++++++++++++
 platform/commonUI/general/res/css/tree.css    | 246 -----------------
 platform/commonUI/general/res/sass/_main.scss |   2 +
 .../res/sass/mobile/search/_search.scss       |  13 +
 .../general/res/sass/search/_layout.scss      |  31 ---
 platform/commonUI/general/res/sass/tree.scss  |   1 -
 7 files changed, 286 insertions(+), 294 deletions(-)
 create mode 100644 platform/commonUI/general/res/sass/mobile/search/_search.scss
 delete mode 100644 platform/commonUI/general/res/sass/search/_layout.scss

diff --git a/platform/commonUI/browse/res/templates/browse.html b/platform/commonUI/browse/res/templates/browse.html
index 6e6db9d1a4..dd97bbea3f 100644
--- a/platform/commonUI/browse/res/templates/browse.html
+++ b/platform/commonUI/browse/res/templates/browse.html
@@ -25,22 +25,24 @@
     <div class="holder browse-area s-browse-area abs browse-wrapper" ng-class="treeClass ? 'browse-showtree' : 'browse-hidetree'">
         <mct-split-pane class='contents abs' anchor='left'>
             <div class='split-pane-component treeview pane left'>
-                <mct-representation key="'create-button'" mct-object="navigatedObject">
-                </mct-representation>
-                <div class='holder search-holder abs l-mobile'
-                     ng-class="{active: treeModel.search}">
-                    <mct-representation key="'search'"
-                                 mct-object="domainObject"
-                                 ng-model="treeModel">
-                    </mct-representation>
-                </div>
-                <div class='tree-holder abs mobile-tree-holder'
-                     ng-hide="treeModel.search">
-                    <mct-representation key="'tree'"
-                                        mct-object="domainObject"
-                                        ng-model="treeModel">
-                    </mct-representation>
-                </div>
+	            <div class="holder abs l-mobile">
+	                <mct-representation key="'create-button'" mct-object="navigatedObject">
+	                </mct-representation>
+	                <div class='holder search-holder abs'
+	                     ng-class="{active: treeModel.search}">
+	                    <mct-representation key="'search'"
+	                                 mct-object="domainObject"
+	                                 ng-model="treeModel">
+	                    </mct-representation>
+	                </div>
+	                <div class='tree-holder abs mobile-tree-holder'
+	                     ng-hide="treeModel.search">
+	                    <mct-representation key="'tree'"
+	                                        mct-object="domainObject"
+	                                        ng-model="treeModel">
+	                    </mct-representation>
+	                </div>
+	            </div>
             </div>
 
             <mct-splitter class="mobile-hide"></mct-splitter>
diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index 9007cbbe1d..12ed7b12aa 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -4350,6 +4350,259 @@ input[type="text"] {
   right: 0;
   left: 0; }
 
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+/* line 23, ../sass/search/_search.scss */
+.abs.search-holder, .btn-menu span.search-holder.l-click-area {
+  height: 25px;
+  bottom: 0;
+  top: 23px;
+  z-index: 5; }
+  /* line 27, ../sass/search/_search.scss */
+  .abs.search-holder.active, .btn-menu span.search-holder.active.l-click-area {
+    height: auto;
+    bottom: 0; }
+
+/* line 38, ../sass/search/_search.scss */
+.search {
+  display: flex;
+  flex-direction: column;
+  height: 100%; }
+  /* line 49, ../sass/search/_search.scss */
+  .search .search-bar {
+    font-size: 0.8em;
+    position: relative;
+    width: 100%; }
+    /* line 66, ../sass/search/_search.scss */
+    .search .search-bar .search-input {
+      height: 25px;
+      line-height: 25px;
+      padding-top: 0;
+      padding-bottom: 0; }
+    /* line 73, ../sass/search/_search.scss */
+    .search .search-bar .search-icon,
+    .search .search-bar .clear-icon,
+    .search .search-bar .menu-icon {
+      -moz-box-sizing: border-box;
+      -webkit-box-sizing: border-box;
+      box-sizing: border-box;
+      color: #737373;
+      height: 17px;
+      width: 17px;
+      line-height: 17px;
+      position: absolute;
+      text-align: center;
+      top: 4px; }
+    /* line 86, ../sass/search/_search.scss */
+    .search .search-bar .clear-icon,
+    .search .search-bar .menu-icon {
+      cursor: pointer;
+      transition: color .25s; }
+    /* line 93, ../sass/search/_search.scss */
+    .search .search-bar .search-input {
+      position: relative;
+      width: 100%;
+      padding-left: 22px !important;
+      padding-right: 44px !important; }
+      /* line 100, ../sass/search/_search.scss */
+      .search .search-bar .search-input input {
+        width: 100%; }
+    /* line 105, ../sass/search/_search.scss */
+    .search .search-bar .search-icon {
+      color: #737373;
+      left: 3px;
+      transition: visibility .15s, opacity .15s, color .2s;
+      pointer-events: none; }
+    /* line 125, ../sass/search/_search.scss */
+    .search .search-bar .search-input:hover + div.search-icon {
+      color: #a6a6a6; }
+    /* line 129, ../sass/search/_search.scss */
+    .search .search-bar .clear-icon {
+      right: 22px;
+      visibility: hidden;
+      opacity: 0;
+      transition: visibility .15s, opacity .15s, color .2s; }
+      /* line 138, ../sass/search/_search.scss */
+      .search .search-bar .clear-icon.content {
+        visibility: visible;
+        opacity: 1; }
+      /* line 143, ../sass/search/_search.scss */
+      .search .search-bar .clear-icon:hover {
+        color: #a6a6a6; }
+    /* line 148, ../sass/search/_search.scss */
+    .search .search-bar .menu-icon {
+      font-size: 0.8em;
+      padding-right: 4px;
+      right: 4px;
+      text-align: right; }
+      /* line 154, ../sass/search/_search.scss */
+      .search .search-bar .menu-icon:hover {
+        color: #a6a6a6; }
+    /* line 159, ../sass/search/_search.scss */
+    .search .search-bar .search-menu-holder {
+      float: right;
+      left: -20px;
+      z-index: 1;
+      transition: visibility .05s, opacity .05s; }
+      /* line 169, ../sass/search/_search.scss */
+      .search .search-bar .search-menu-holder.off {
+        visibility: hidden;
+        opacity: 0; }
+    /* line 176, ../sass/search/_search.scss */
+    .search .search-bar .menu-icon:hover + div.search-menu-holder {
+      visibility: visible; }
+    /* line 179, ../sass/search/_search.scss */
+    .search .search-bar div.search-menu-holder:hover {
+      visibility: visible; }
+  /* line 184, ../sass/search/_search.scss */
+  .search .active-filter-display {
+    -moz-border-radius: 2px;
+    -webkit-border-radius: 2px;
+    border-radius: 2px;
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    line-height: 130%;
+    padding: 5px 0;
+    padding-left: 1.4625em;
+    font-size: 0.65em;
+    margin-top: 3px; }
+    /* line 199, ../sass/search/_search.scss */
+    .search .active-filter-display .clear-filters-icon {
+      opacity: 0.4;
+      font-size: 0.8em;
+      position: absolute;
+      left: 1px;
+      cursor: pointer; }
+    /* line 210, ../sass/search/_search.scss */
+    .search .active-filter-display.off {
+      visibility: hidden;
+      opacity: 0;
+      height: 0;
+      margin: 0;
+      padding: 0;
+      border: 0; }
+  /* line 220, ../sass/search/_search.scss */
+  .search .search-scroll {
+    order: 3;
+    margin-top: 4px;
+    overflow-y: auto;
+    top: auto;
+    height: auto;
+    max-height: 100%;
+    position: relative; }
+    /* line 235, ../sass/search/_search.scss */
+    .search .search-scroll .results .search-result-item {
+      -moz-transition: background-color 0.25s;
+      -o-transition: background-color 0.25s;
+      -webkit-transition: background-color 0.25s;
+      transition: background-color 0.25s;
+      margin-bottom: 2px;
+      border-radius: 2px;
+      padding-top: 4px;
+      padding-bottom: 2px; }
+      /* line 249, ../sass/search/_search.scss */
+      .search .search-scroll .results .search-result-item .label {
+        margin-left: 6px; }
+        /* line 253, ../sass/search/_search.scss */
+        .search .search-scroll .results .search-result-item .label .title-label {
+          display: inline-block;
+          position: absolute;
+          left: 29px;
+          right: 5px;
+          font-size: .8em;
+          line-height: 17px;
+          width: auto;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap; }
+      /* line 275, ../sass/search/_search.scss */
+      .search .search-scroll .results .search-result-item.selected {
+        background: #005177;
+        color: #fff; }
+        /* line 279, ../sass/search/_search.scss */
+        .search .search-scroll .results .search-result-item.selected .view-control {
+          color: #0099cc; }
+        /* line 282, ../sass/search/_search.scss */
+        .search .search-scroll .results .search-result-item.selected .label .type-icon {
+          color: #fff; }
+      /* line 287, ../sass/search/_search.scss */
+      .search .search-scroll .results .search-result-item .label .type-icon .l-icon-link {
+        text-shadow: black 0 1px 2px;
+        z-index: 2;
+        color: #49dedb;
+        font-size: 8px;
+        line-height: 8px;
+        height: 8px;
+        width: 8px;
+        margin-left: -25px; }
+      /* line 296, ../sass/search/_search.scss */
+      .search .search-scroll .results .search-result-item:not(.selected):hover {
+        background: #404040;
+        color: #cccccc; }
+        /* line 299, ../sass/search/_search.scss */
+        .search .search-scroll .results .search-result-item:not(.selected):hover .context-trigger {
+          display: block; }
+        /* line 302, ../sass/search/_search.scss */
+        .search .search-scroll .results .search-result-item:not(.selected):hover .icon {
+          color: #33ccff; }
+    /* line 310, ../sass/search/_search.scss */
+    .search .search-scroll .load-icon {
+      position: relative; }
+      /* line 312, ../sass/search/_search.scss */
+      .search .search-scroll .load-icon.loading {
+        pointer-events: none;
+        margin-left: 6px; }
+        /* line 316, ../sass/search/_search.scss */
+        .search .search-scroll .load-icon.loading .title-label {
+          font-style: italic;
+          font-size: .9em;
+          opacity: 0.5;
+          margin-left: 26px;
+          line-height: 24px; }
+        /* line 326, ../sass/search/_search.scss */
+        .search .search-scroll .load-icon.loading .wait-spinner {
+          margin-left: 6px; }
+      /* line 331, ../sass/search/_search.scss */
+      .search .search-scroll .load-icon:not(.loading) {
+        cursor: pointer; }
+    /* line 336, ../sass/search/_search.scss */
+    .search .search-scroll .load-more-button {
+      margin-top: 5px 0;
+      font-size: 0.8em;
+      position: relative;
+      left: 50%;
+      margin-left: -45px;
+      text-align: center;
+      width: 90px;
+      white-space: nowrap; }
+
+@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 5, ../sass/mobile/search/_search.scss */
+  .search .search-bar .menu-icon {
+    display: none; }
+  /* line 8, ../sass/mobile/search/_search.scss */
+  .search .search-bar .clear-icon {
+    right: 5px; } }
 /*****************************************************************************
  * Open MCT Web, Copyright (c) 2014-2015, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
diff --git a/platform/commonUI/general/res/css/tree.css b/platform/commonUI/general/res/css/tree.css
index 9bf108bc36..701433a525 100644
--- a/platform/commonUI/general/res/css/tree.css
+++ b/platform/commonUI/general/res/css/tree.css
@@ -304,252 +304,6 @@ ul.tree {
   ul.tree ul.tree {
     margin-left: 15px; }
 
-/*****************************************************************************
- * Open MCT Web, Copyright (c) 2014-2015, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT Web is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT Web includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-/* line 23, ../sass/search/_search.scss */
-.abs.search-holder {
-  height: 25px;
-  bottom: 0;
-  top: 23px;
-  z-index: 5; }
-  /* line 27, ../sass/search/_search.scss */
-  .abs.search-holder.active {
-    height: auto;
-    bottom: 0; }
-
-/* line 38, ../sass/search/_search.scss */
-.search {
-  display: flex;
-  flex-direction: column;
-  height: 100%; }
-  /* line 49, ../sass/search/_search.scss */
-  .search .search-bar {
-    font-size: 0.8em;
-    position: relative;
-    width: 100%; }
-    /* line 66, ../sass/search/_search.scss */
-    .search .search-bar .search-input {
-      height: 25px;
-      line-height: 25px;
-      padding-top: 0;
-      padding-bottom: 0; }
-    /* line 73, ../sass/search/_search.scss */
-    .search .search-bar .search-icon,
-    .search .search-bar .clear-icon,
-    .search .search-bar .menu-icon {
-      -moz-box-sizing: border-box;
-      -webkit-box-sizing: border-box;
-      box-sizing: border-box;
-      color: #737373;
-      height: 17px;
-      width: 17px;
-      line-height: 17px;
-      position: absolute;
-      text-align: center;
-      top: 4px; }
-    /* line 86, ../sass/search/_search.scss */
-    .search .search-bar .clear-icon,
-    .search .search-bar .menu-icon {
-      cursor: pointer;
-      transition: color .25s; }
-    /* line 93, ../sass/search/_search.scss */
-    .search .search-bar .search-input {
-      position: relative;
-      width: 100%;
-      padding-left: 22px !important;
-      padding-right: 44px !important; }
-      /* line 100, ../sass/search/_search.scss */
-      .search .search-bar .search-input input {
-        width: 100%; }
-    /* line 105, ../sass/search/_search.scss */
-    .search .search-bar .search-icon {
-      color: #737373;
-      left: 3px;
-      transition: visibility .15s, opacity .15s, color .2s;
-      pointer-events: none; }
-    /* line 125, ../sass/search/_search.scss */
-    .search .search-bar .search-input:hover + div.search-icon {
-      color: #a6a6a6; }
-    /* line 129, ../sass/search/_search.scss */
-    .search .search-bar .clear-icon {
-      right: 22px;
-      visibility: hidden;
-      opacity: 0;
-      transition: visibility .15s, opacity .15s, color .2s; }
-      /* line 138, ../sass/search/_search.scss */
-      .search .search-bar .clear-icon.content {
-        visibility: visible;
-        opacity: 1; }
-      /* line 143, ../sass/search/_search.scss */
-      .search .search-bar .clear-icon:hover {
-        color: #a6a6a6; }
-    /* line 148, ../sass/search/_search.scss */
-    .search .search-bar .menu-icon {
-      font-size: 0.8em;
-      padding-right: 4px;
-      right: 4px;
-      text-align: right; }
-      /* line 154, ../sass/search/_search.scss */
-      .search .search-bar .menu-icon:hover {
-        color: #a6a6a6; }
-    /* line 159, ../sass/search/_search.scss */
-    .search .search-bar .search-menu-holder {
-      float: right;
-      left: -20px;
-      z-index: 1;
-      transition: visibility .05s, opacity .05s; }
-      /* line 169, ../sass/search/_search.scss */
-      .search .search-bar .search-menu-holder.off {
-        visibility: hidden;
-        opacity: 0; }
-    /* line 176, ../sass/search/_search.scss */
-    .search .search-bar .menu-icon:hover + div.search-menu-holder {
-      visibility: visible; }
-    /* line 179, ../sass/search/_search.scss */
-    .search .search-bar div.search-menu-holder:hover {
-      visibility: visible; }
-  /* line 184, ../sass/search/_search.scss */
-  .search .active-filter-display {
-    -moz-border-radius: 2px;
-    -webkit-border-radius: 2px;
-    border-radius: 2px;
-    -moz-box-sizing: border-box;
-    -webkit-box-sizing: border-box;
-    box-sizing: border-box;
-    line-height: 130%;
-    padding: 5px 0;
-    padding-left: 1.4625em;
-    font-size: 0.65em;
-    margin-top: 3px; }
-    /* line 199, ../sass/search/_search.scss */
-    .search .active-filter-display .clear-filters-icon {
-      opacity: 0.4;
-      font-size: 0.8em;
-      position: absolute;
-      left: 1px;
-      cursor: pointer; }
-    /* line 210, ../sass/search/_search.scss */
-    .search .active-filter-display.off {
-      visibility: hidden;
-      opacity: 0;
-      height: 0;
-      margin: 0;
-      padding: 0;
-      border: 0; }
-  /* line 220, ../sass/search/_search.scss */
-  .search .search-scroll {
-    order: 3;
-    margin-top: 4px;
-    overflow-y: auto;
-    top: auto;
-    height: auto;
-    max-height: 100%;
-    position: relative; }
-    /* line 235, ../sass/search/_search.scss */
-    .search .search-scroll .results .search-result-item {
-      -moz-transition: background-color 0.25s;
-      -o-transition: background-color 0.25s;
-      -webkit-transition: background-color 0.25s;
-      transition: background-color 0.25s;
-      margin-bottom: 2px;
-      border-radius: 2px;
-      padding-top: 4px;
-      padding-bottom: 2px; }
-      /* line 249, ../sass/search/_search.scss */
-      .search .search-scroll .results .search-result-item .label {
-        margin-left: 6px; }
-        /* line 253, ../sass/search/_search.scss */
-        .search .search-scroll .results .search-result-item .label .title-label {
-          display: inline-block;
-          position: absolute;
-          left: 29px;
-          right: 5px;
-          font-size: .8em;
-          line-height: 17px;
-          width: auto;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          white-space: nowrap; }
-      /* line 275, ../sass/search/_search.scss */
-      .search .search-scroll .results .search-result-item.selected {
-        background: #005177;
-        color: #fff; }
-        /* line 279, ../sass/search/_search.scss */
-        .search .search-scroll .results .search-result-item.selected .view-control {
-          color: #0099cc; }
-        /* line 282, ../sass/search/_search.scss */
-        .search .search-scroll .results .search-result-item.selected .label .type-icon {
-          color: #fff; }
-      /* line 287, ../sass/search/_search.scss */
-      .search .search-scroll .results .search-result-item .label .type-icon .l-icon-link {
-        text-shadow: black 0 1px 2px;
-        z-index: 2;
-        color: #49dedb;
-        font-size: 8px;
-        line-height: 8px;
-        height: 8px;
-        width: 8px;
-        margin-left: -25px; }
-      /* line 296, ../sass/search/_search.scss */
-      .search .search-scroll .results .search-result-item:not(.selected):hover {
-        background: #404040;
-        color: #cccccc; }
-        /* line 299, ../sass/search/_search.scss */
-        .search .search-scroll .results .search-result-item:not(.selected):hover .context-trigger {
-          display: block; }
-        /* line 302, ../sass/search/_search.scss */
-        .search .search-scroll .results .search-result-item:not(.selected):hover .icon {
-          color: #33ccff; }
-    /* line 310, ../sass/search/_search.scss */
-    .search .search-scroll .load-icon {
-      position: relative; }
-      /* line 312, ../sass/search/_search.scss */
-      .search .search-scroll .load-icon.loading {
-        pointer-events: none;
-        margin-left: 6px; }
-        /* line 316, ../sass/search/_search.scss */
-        .search .search-scroll .load-icon.loading .title-label {
-          font-style: italic;
-          font-size: .9em;
-          opacity: 0.5;
-          margin-left: 26px;
-          line-height: 24px; }
-        /* line 326, ../sass/search/_search.scss */
-        .search .search-scroll .load-icon.loading .wait-spinner {
-          margin-left: 6px; }
-      /* line 331, ../sass/search/_search.scss */
-      .search .search-scroll .load-icon:not(.loading) {
-        cursor: pointer; }
-    /* line 336, ../sass/search/_search.scss */
-    .search .search-scroll .load-more-button {
-      margin-top: 5px 0;
-      font-size: 0.8em;
-      position: relative;
-      left: 50%;
-      margin-left: -45px;
-      text-align: center;
-      width: 90px;
-      white-space: nowrap; }
-
 /*****************************************************************************
  * Open MCT Web, Copyright (c) 2014-2015, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
diff --git a/platform/commonUI/general/res/sass/_main.scss b/platform/commonUI/general/res/sass/_main.scss
index 1dda9770ce..eff854790b 100644
--- a/platform/commonUI/general/res/sass/_main.scss
+++ b/platform/commonUI/general/res/sass/_main.scss
@@ -61,6 +61,8 @@
 @import "forms/datetime";
 @import "forms/filter";
 @import "plots/plots-main";
+@import "search/search";
+@import "mobile/search/search";
 @import "overlay/overlay";
 @import "mobile/overlay/overlay";
 @import "user-environ/frame";
diff --git a/platform/commonUI/general/res/sass/mobile/search/_search.scss b/platform/commonUI/general/res/sass/mobile/search/_search.scss
new file mode 100644
index 0000000000..d37514a0a5
--- /dev/null
+++ b/platform/commonUI/general/res/sass/mobile/search/_search.scss
@@ -0,0 +1,13 @@
+@include phone {
+	.search {
+		.search-bar {
+			// Hide menu-icon and adjust spacing when in phone mode
+			.menu-icon {
+				display: none;
+			}
+			.clear-icon {
+				right: $interiorMargin;
+			}
+		}
+	}
+}
\ No newline at end of file
diff --git a/platform/commonUI/general/res/sass/search/_layout.scss b/platform/commonUI/general/res/sass/search/_layout.scss
deleted file mode 100644
index 03612d2d3c..0000000000
--- a/platform/commonUI/general/res/sass/search/_layout.scss
+++ /dev/null
@@ -1,31 +0,0 @@
-/*****************************************************************************
- * Open MCT Web, Copyright (c) 2014-2015, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT Web is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT Web includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-// Overrides some styling in user-environ/_layout.scss
-.pane {
-    &.treeview.left {
-	    .tree-holder {
-            // Want tree holder to start right below the search bar.
-		    top: 60px;
-	    }
-    }
-}
\ No newline at end of file
diff --git a/platform/commonUI/general/res/sass/tree.scss b/platform/commonUI/general/res/sass/tree.scss
index d4fea6e8b6..5a28f94641 100644
--- a/platform/commonUI/general/res/sass/tree.scss
+++ b/platform/commonUI/general/res/sass/tree.scss
@@ -30,5 +30,4 @@
 @import "mixins";
 @import "mobile/mixins";
 @import "tree/tree";
-@import "search/search";
 @import "mobile/tree";

From 6e172359b45b55f16f03936394da2810993eb719 Mon Sep 17 00:00:00 2001
From: Charles Hacskaylo <charlesh88@gmail.com>
Date: Wed, 26 Aug 2015 18:15:29 -0700
Subject: [PATCH 170/209] [Mobile] IN PROGRESS: Significant re-org of search
 results styling

open #74
Removed all styles for search-result-item
in search/_search.scss and significantly re-orged .tree-item in
_tree.scss and mobile/_tree.scss to control
search-result-item styles;
---
 .../general/res/css/theme-espresso.css        |  67 +---
 platform/commonUI/general/res/css/tree.css    | 334 ++++++++++--------
 .../general/res/sass/mobile/_tree.scss        |  56 ++-
 .../general/res/sass/search/_search.scss      |  77 ----
 .../commonUI/general/res/sass/tree/_tree.scss | 261 +++++++-------
 5 files changed, 349 insertions(+), 446 deletions(-)

diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index 12ed7b12aa..b34ca46897 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -4510,82 +4510,27 @@ input[type="text"] {
     height: auto;
     max-height: 100%;
     position: relative; }
-    /* line 235, ../sass/search/_search.scss */
-    .search .search-scroll .results .search-result-item {
-      -moz-transition: background-color 0.25s;
-      -o-transition: background-color 0.25s;
-      -webkit-transition: background-color 0.25s;
-      transition: background-color 0.25s;
-      margin-bottom: 2px;
-      border-radius: 2px;
-      padding-top: 4px;
-      padding-bottom: 2px; }
-      /* line 249, ../sass/search/_search.scss */
-      .search .search-scroll .results .search-result-item .label {
-        margin-left: 6px; }
-        /* line 253, ../sass/search/_search.scss */
-        .search .search-scroll .results .search-result-item .label .title-label {
-          display: inline-block;
-          position: absolute;
-          left: 29px;
-          right: 5px;
-          font-size: .8em;
-          line-height: 17px;
-          width: auto;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          white-space: nowrap; }
-      /* line 275, ../sass/search/_search.scss */
-      .search .search-scroll .results .search-result-item.selected {
-        background: #005177;
-        color: #fff; }
-        /* line 279, ../sass/search/_search.scss */
-        .search .search-scroll .results .search-result-item.selected .view-control {
-          color: #0099cc; }
-        /* line 282, ../sass/search/_search.scss */
-        .search .search-scroll .results .search-result-item.selected .label .type-icon {
-          color: #fff; }
-      /* line 287, ../sass/search/_search.scss */
-      .search .search-scroll .results .search-result-item .label .type-icon .l-icon-link {
-        text-shadow: black 0 1px 2px;
-        z-index: 2;
-        color: #49dedb;
-        font-size: 8px;
-        line-height: 8px;
-        height: 8px;
-        width: 8px;
-        margin-left: -25px; }
-      /* line 296, ../sass/search/_search.scss */
-      .search .search-scroll .results .search-result-item:not(.selected):hover {
-        background: #404040;
-        color: #cccccc; }
-        /* line 299, ../sass/search/_search.scss */
-        .search .search-scroll .results .search-result-item:not(.selected):hover .context-trigger {
-          display: block; }
-        /* line 302, ../sass/search/_search.scss */
-        .search .search-scroll .results .search-result-item:not(.selected):hover .icon {
-          color: #33ccff; }
-    /* line 310, ../sass/search/_search.scss */
+    /* line 233, ../sass/search/_search.scss */
     .search .search-scroll .load-icon {
       position: relative; }
-      /* line 312, ../sass/search/_search.scss */
+      /* line 235, ../sass/search/_search.scss */
       .search .search-scroll .load-icon.loading {
         pointer-events: none;
         margin-left: 6px; }
-        /* line 316, ../sass/search/_search.scss */
+        /* line 239, ../sass/search/_search.scss */
         .search .search-scroll .load-icon.loading .title-label {
           font-style: italic;
           font-size: .9em;
           opacity: 0.5;
           margin-left: 26px;
           line-height: 24px; }
-        /* line 326, ../sass/search/_search.scss */
+        /* line 249, ../sass/search/_search.scss */
         .search .search-scroll .load-icon.loading .wait-spinner {
           margin-left: 6px; }
-      /* line 331, ../sass/search/_search.scss */
+      /* line 254, ../sass/search/_search.scss */
       .search .search-scroll .load-icon:not(.loading) {
         cursor: pointer; }
-    /* line 336, ../sass/search/_search.scss */
+    /* line 259, ../sass/search/_search.scss */
     .search .search-scroll .load-more-button {
       margin-top: 5px 0;
       font-size: 0.8em;
diff --git a/platform/commonUI/general/res/css/tree.css b/platform/commonUI/general/res/css/tree.css
index 701433a525..770338d9f8 100644
--- a/platform/commonUI/general/res/css/tree.css
+++ b/platform/commonUI/general/res/css/tree.css
@@ -162,148 +162,175 @@ ul.tree {
   ul.tree li {
     display: block;
     position: relative; }
-    /* line 28, ../sass/tree/_tree.scss */
-    ul.tree li span.tree-item {
-      -moz-box-sizing: border-box;
-      -webkit-box-sizing: border-box;
-      box-sizing: border-box;
-      -moz-border-radius: 2px;
-      -webkit-border-radius: 2px;
-      border-radius: 2px;
-      -moz-transition: background-color 0.25s;
-      -o-transition: background-color 0.25s;
-      -webkit-transition: background-color 0.25s;
-      transition: background-color 0.25s;
-      display: block;
-      font-size: 0.8em;
-      height: 1.5rem;
-      line-height: 1.5rem;
-      margin-bottom: 3px;
-      position: relative; }
-      /* line 40, ../sass/tree/_tree.scss */
-      ul.tree li span.tree-item .view-control {
-        display: inline-block;
-        margin-left: 5px;
-        font-size: 0.75em;
-        width: 10px; }
-        @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-          /* line 48, ../sass/tree/_tree.scss */
-          ul.tree li span.tree-item .view-control:hover {
-            color: #ffc700; } }
-      /* line 54, ../sass/tree/_tree.scss */
-      ul.tree li span.tree-item .label {
-        display: block;
-        overflow: hidden;
-        position: absolute;
-        top: 0px;
-        right: 0px;
-        bottom: 0px;
-        left: 0px;
-        width: auto;
-        height: auto;
-        line-height: 1.5rem;
-        left: 15px; }
-        /* line 62, ../sass/tree/_tree.scss */
-        ul.tree li span.tree-item .label .type-icon {
-          text-shadow: rgba(0, 0, 0, 0.6) 0 1px 2px;
-          font-size: 16px;
-          color: #0099cc;
-          left: 5px;
-          position: absolute;
-          top: 4px;
-          bottom: auto;
-          height: 16px;
-          line-height: 100%;
-          right: auto;
-          width: 16px; }
-          /* line 75, ../sass/tree/_tree.scss */
-          ul.tree li span.tree-item .label .type-icon .icon.l-icon-link, ul.tree li span.tree-item .label .type-icon .icon.l-icon-alert {
-            text-shadow: black 0 1px 2px;
-            position: absolute;
-            z-index: 2; }
-          /* line 81, ../sass/tree/_tree.scss */
-          ul.tree li span.tree-item .label .type-icon .icon.l-icon-alert {
-            color: #ff3c00;
-            font-size: 8px;
-            line-height: 8px;
-            height: 8px;
-            width: 8px;
-            top: 1px;
-            right: -2px; }
-          /* line 87, ../sass/tree/_tree.scss */
-          ul.tree li span.tree-item .label .type-icon .icon.l-icon-link {
-            color: #49dedb;
-            font-size: 8px;
-            line-height: 8px;
-            height: 8px;
-            width: 8px;
-            left: -3px;
-            bottom: 0px; }
-        /* line 95, ../sass/tree/_tree.scss */
-        ul.tree li span.tree-item .label .title-label {
-          overflow: hidden;
-          position: absolute;
-          top: 0px;
-          right: 0px;
-          bottom: 0px;
-          left: 0px;
-          width: auto;
-          height: auto;
-          display: block;
-          left: 30px;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          white-space: nowrap; }
-      /* line 106, ../sass/tree/_tree.scss */
-      ul.tree li span.tree-item.loading {
-        pointer-events: none; }
-        /* line 108, ../sass/tree/_tree.scss */
-        ul.tree li span.tree-item.loading .label {
-          opacity: 0.5; }
-          /* line 110, ../sass/tree/_tree.scss */
-          ul.tree li span.tree-item.loading .label .title-label {
-            font-style: italic; }
-        /* line 114, ../sass/tree/_tree.scss */
-        ul.tree li span.tree-item.loading .wait-spinner {
-          margin-left: 14px; }
-      /* line 119, ../sass/tree/_tree.scss */
-      ul.tree li span.tree-item.selected {
-        background: #005177;
-        color: #fff; }
-        /* line 123, ../sass/tree/_tree.scss */
-        ul.tree li span.tree-item.selected .view-control {
-          color: #0099cc; }
-        /* line 126, ../sass/tree/_tree.scss */
-        ul.tree li span.tree-item.selected .label .type-icon {
-          color: #fff; }
-      @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-        /* line 134, ../sass/tree/_tree.scss */
-        ul.tree li span.tree-item:not(.selected):hover {
-          background: rgba(255, 255, 255, 0.1);
-          color: #cccccc; }
-          /* line 137, ../sass/tree/_tree.scss */
-          ul.tree li span.tree-item:not(.selected):hover .context-trigger {
-            display: block; }
-          /* line 140, ../sass/tree/_tree.scss */
-          ul.tree li span.tree-item:not(.selected):hover .icon {
-            color: #33ccff; } }
-      /* line 147, ../sass/tree/_tree.scss */
-      ul.tree li span.tree-item:not(.loading) {
-        cursor: pointer; }
-      /* line 151, ../sass/tree/_tree.scss */
-      ul.tree li span.tree-item .context-trigger {
-        top: -1px;
-        position: absolute;
-        right: 3px; }
-        /* line 157, ../sass/tree/_tree.scss */
-        ul.tree li span.tree-item .context-trigger .invoke-menu {
-          font-size: 0.75em;
-          height: 0.9rem;
-          line-height: 0.9rem; }
-  /* line 166, ../sass/tree/_tree.scss */
+  /* line 29, ../sass/tree/_tree.scss */
   ul.tree ul.tree {
     margin-left: 15px; }
 
+/* line 34, ../sass/tree/_tree.scss */
+.tree-item,
+.search-result-item {
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  -moz-border-radius: 2px;
+  -webkit-border-radius: 2px;
+  border-radius: 2px;
+  -moz-transition: background-color 0.25s;
+  -o-transition: background-color 0.25s;
+  -webkit-transition: background-color 0.25s;
+  transition: background-color 0.25s;
+  display: block;
+  font-size: 0.8em;
+  height: 1.5rem;
+  line-height: 1.5rem;
+  margin-bottom: 3px;
+  position: relative; }
+  /* line 47, ../sass/tree/_tree.scss */
+  .tree-item .view-control,
+  .search-result-item .view-control {
+    display: inline-block;
+    margin-left: 5px;
+    font-size: 0.75em;
+    width: 10px; }
+    @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
+      /* line 55, ../sass/tree/_tree.scss */
+      .tree-item .view-control:hover,
+      .search-result-item .view-control:hover {
+        color: #ffc700; } }
+  /* line 61, ../sass/tree/_tree.scss */
+  .tree-item .label,
+  .search-result-item .label {
+    display: block;
+    overflow: hidden;
+    position: absolute;
+    top: 0px;
+    right: 0px;
+    bottom: 0px;
+    left: 0px;
+    width: auto;
+    height: auto;
+    line-height: 1.5rem; }
+    /* line 69, ../sass/tree/_tree.scss */
+    .tree-item .label .type-icon,
+    .search-result-item .label .type-icon {
+      text-shadow: rgba(0, 0, 0, 0.6) 0 1px 2px;
+      font-size: 16px;
+      color: #0099cc;
+      left: 5px;
+      position: absolute;
+      top: 4px;
+      bottom: auto;
+      height: 16px;
+      line-height: 100%;
+      right: auto;
+      width: 16px; }
+      /* line 82, ../sass/tree/_tree.scss */
+      .tree-item .label .type-icon .icon.l-icon-link, .tree-item .label .type-icon .icon.l-icon-alert,
+      .search-result-item .label .type-icon .icon.l-icon-link,
+      .search-result-item .label .type-icon .icon.l-icon-alert {
+        text-shadow: black 0 1px 2px;
+        position: absolute;
+        z-index: 2; }
+      /* line 88, ../sass/tree/_tree.scss */
+      .tree-item .label .type-icon .icon.l-icon-alert,
+      .search-result-item .label .type-icon .icon.l-icon-alert {
+        color: #ff3c00;
+        font-size: 8px;
+        line-height: 8px;
+        height: 8px;
+        width: 8px;
+        top: 1px;
+        right: -2px; }
+      /* line 94, ../sass/tree/_tree.scss */
+      .tree-item .label .type-icon .icon.l-icon-link,
+      .search-result-item .label .type-icon .icon.l-icon-link {
+        color: #49dedb;
+        font-size: 8px;
+        line-height: 8px;
+        height: 8px;
+        width: 8px;
+        left: -3px;
+        bottom: 0px; }
+    /* line 102, ../sass/tree/_tree.scss */
+    .tree-item .label .title-label,
+    .search-result-item .label .title-label {
+      overflow: hidden;
+      position: absolute;
+      top: 0px;
+      right: 0px;
+      bottom: 0px;
+      left: 0px;
+      width: auto;
+      height: auto;
+      display: block;
+      left: 30px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap; }
+  /* line 113, ../sass/tree/_tree.scss */
+  .tree-item.loading,
+  .search-result-item.loading {
+    pointer-events: none; }
+    /* line 115, ../sass/tree/_tree.scss */
+    .tree-item.loading .label,
+    .search-result-item.loading .label {
+      opacity: 0.5; }
+      /* line 117, ../sass/tree/_tree.scss */
+      .tree-item.loading .label .title-label,
+      .search-result-item.loading .label .title-label {
+        font-style: italic; }
+    /* line 121, ../sass/tree/_tree.scss */
+    .tree-item.loading .wait-spinner,
+    .search-result-item.loading .wait-spinner {
+      margin-left: 14px; }
+  /* line 126, ../sass/tree/_tree.scss */
+  .tree-item.selected,
+  .search-result-item.selected {
+    background: #005177;
+    color: #fff; }
+    /* line 130, ../sass/tree/_tree.scss */
+    .tree-item.selected .view-control,
+    .search-result-item.selected .view-control {
+      color: #0099cc; }
+    /* line 133, ../sass/tree/_tree.scss */
+    .tree-item.selected .label .type-icon,
+    .search-result-item.selected .label .type-icon {
+      color: #fff; }
+  @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
+    /* line 141, ../sass/tree/_tree.scss */
+    .tree-item:not(.selected):hover,
+    .search-result-item:not(.selected):hover {
+      background: rgba(255, 255, 255, 0.1);
+      color: #cccccc; }
+      /* line 144, ../sass/tree/_tree.scss */
+      .tree-item:not(.selected):hover .context-trigger,
+      .search-result-item:not(.selected):hover .context-trigger {
+        display: block; }
+      /* line 147, ../sass/tree/_tree.scss */
+      .tree-item:not(.selected):hover .icon,
+      .search-result-item:not(.selected):hover .icon {
+        color: #33ccff; } }
+  /* line 154, ../sass/tree/_tree.scss */
+  .tree-item:not(.loading),
+  .search-result-item:not(.loading) {
+    cursor: pointer; }
+  /* line 158, ../sass/tree/_tree.scss */
+  .tree-item .context-trigger,
+  .search-result-item .context-trigger {
+    top: -1px;
+    position: absolute;
+    right: 3px; }
+    /* line 164, ../sass/tree/_tree.scss */
+    .tree-item .context-trigger .invoke-menu,
+    .search-result-item .context-trigger .invoke-menu {
+      font-size: 0.75em;
+      height: 0.9rem;
+      line-height: 0.9rem; }
+
+/* line 173, ../sass/tree/_tree.scss */
+.tree-item .label {
+  left: 15px; }
+
 /*****************************************************************************
  * Open MCT Web, Copyright (c) 2014-2015, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
@@ -326,28 +353,33 @@ ul.tree {
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 @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 28, ../sass/mobile/_tree.scss */
-  ul.tree li span.tree-item {
+  /* line 27, ../sass/mobile/_tree.scss */
+  ul.tree ul.tree {
+    margin-left: 20px; }
+
+  /* line 31, ../sass/mobile/_tree.scss */
+  .tree-item,
+  .search-result-item {
     height: 35px;
     line-height: 35px;
     margin-bottom: 0px; }
-    /* line 32, ../sass/mobile/_tree.scss */
-    ul.tree li span.tree-item .view-control {
+    /* line 36, ../sass/mobile/_tree.scss */
+    .tree-item .view-control,
+    .search-result-item .view-control {
       position: absolute;
       font-size: 1.1em;
       right: 0px;
       width: 30px;
       text-align: center; }
-    /* line 41, ../sass/mobile/_tree.scss */
-    ul.tree li span.tree-item .label {
+    /* line 45, ../sass/mobile/_tree.scss */
+    .tree-item .label,
+    .search-result-item .label {
       left: 0;
       right: 35px;
       line-height: 35px; }
-      /* line 46, ../sass/mobile/_tree.scss */
-      ul.tree li span.tree-item .label .type-icon {
+      /* line 50, ../sass/mobile/_tree.scss */
+      .tree-item .label .type-icon,
+      .search-result-item .label .type-icon {
         top: 9px;
         bottom: auto;
-        height: 16px; }
-  /* line 57, ../sass/mobile/_tree.scss */
-  ul.tree ul.tree {
-    margin-left: 20px; } }
+        height: 16px; } }
diff --git a/platform/commonUI/general/res/sass/mobile/_tree.scss b/platform/commonUI/general/res/sass/mobile/_tree.scss
index 03e8051a14..e6efb4be55 100644
--- a/platform/commonUI/general/res/sass/mobile/_tree.scss
+++ b/platform/commonUI/general/res/sass/mobile/_tree.scss
@@ -22,40 +22,36 @@
 
 @include phoneandtablet {
     ul.tree {
-        //@include menuUlReset();
-        li {
-            //border-top: 1px solid $colorInteriorBorder; // TEMP
-            span.tree-item {
-                height: $mobileTreeItemH;
-                line-height: $mobileTreeItemH;
-                margin-bottom: 0px;
-                .view-control {
-                    //@include test(red);
-                    position: absolute;
-                    font-size: 1.1em;
-                    right: 0px;
-                    width: $mobileTreeRightArrowW;
-                    text-align: center;
-                }
-
-                .label {
-                    left: 0;
-                    right: $mobileTreeRightArrowW + $interiorMargin; // Allows tree item name to stop prior to the arrow
-                    line-height: $mobileTreeItemH;
-                    //font-size: 1.1em; // CH CO
-                    .type-icon {
-                        @include verticalCenterBlock($mobileTreeItemH, $treeTypeIconH);
-                    }
-                    .title-label {
-                    }
-                }
-            }
-        }
-
         // Sets the margin on the left, which causes the
         // running indentation after each folder is made
         ul.tree {
             margin-left: $mobileTreeItemIndent;
         }
     }
+	.tree-item,
+	.search-result-item {
+		height: $mobileTreeItemH;
+		line-height: $mobileTreeItemH;
+		margin-bottom: 0px;
+		.view-control {
+			//@include test(red);
+			position: absolute;
+			font-size: 1.1em;
+			right: 0px;
+			width: $mobileTreeRightArrowW;
+			text-align: center;
+		}
+
+		.label {
+			left: 0;
+			right: $mobileTreeRightArrowW + $interiorMargin; // Allows tree item name to stop prior to the arrow
+			line-height: $mobileTreeItemH;
+			//font-size: 1.1em; // CH CO
+			.type-icon {
+				@include verticalCenterBlock($mobileTreeItemH, $treeTypeIconH);
+			}
+			.title-label {
+			}
+		}
+	}
 }
diff --git a/platform/commonUI/general/res/sass/search/_search.scss b/platform/commonUI/general/res/sass/search/_search.scss
index 4c225437c1..e48baba95f 100644
--- a/platform/commonUI/general/res/sass/search/_search.scss
+++ b/platform/commonUI/general/res/sass/search/_search.scss
@@ -230,83 +230,6 @@
 		max-height: 100%;
 		position: relative;
 
-		.results {
-
-			.search-result-item {
-				// Include transitions (for the highlights)
-				@include single-transition(background-color, 0.25s);
-
-				// Space the results from each other
-				margin-bottom: 2px;
-
-				// Make the highlights the right color and shape.
-				// Attempting to match the style in the tree, but
-				//   while having these be compact.
-				border-radius: 2px;
-				padding-top: 4px;
-				padding-bottom: 2px;
-
-				.label {
-					// Give some padding away from the left side
-					margin-left: $leftMargin;
-
-					.title-label {
-						display: inline-block;
-						position: absolute;
-
-						// Give some padding away from the left side
-						left: $leftMargin + 3px + $iconWidth;
-						// and the right side
-						right: $rightPadding;
-
-						// Size and position the text
-						font-size: .8em;
-						line-height: 17px;
-
-						// Hide overflow text
-						width: auto;
-						overflow: hidden;
-						text-overflow: ellipsis;
-						white-space: nowrap;
-					}
-				}
-
-				// Change styling when it's selected
-				&.selected {
-					$c: #fff;
-					background: $colorKeySelectedBg;
-					color: $c;
-					.view-control {
-						color: $colorItemTreeIcon;
-					}
-					.label .type-icon {
-						color: #fff;
-					}
-				}
-                
-                .label .type-icon .l-icon-link {
-                    @include txtShdwSubtle(1);
-                    z-index: 2;
-                    @include ancillaryIcon(8px, $colorIconLink);
-                    margin-left: -25px;
-                }
-
-				// Change styling when it's being hovered over
-				&:not(.selected) {
-					&:hover {
-						background: lighten($colorBodyBg, 5%);
-						color: lighten($colorBodyFg, 20%);
-						.context-trigger {
-							display: block;
-						}
-						.icon {
-							color: $colorItemTreeIconHover;
-						}
-					}
-				}
-			}
-		}
-
 		.load-icon {
 			position: relative;
 			&.loading {
diff --git a/platform/commonUI/general/res/sass/tree/_tree.scss b/platform/commonUI/general/res/sass/tree/_tree.scss
index 65ddab2a63..330bdeb5d5 100644
--- a/platform/commonUI/general/res/sass/tree/_tree.scss
+++ b/platform/commonUI/general/res/sass/tree/_tree.scss
@@ -25,145 +25,152 @@ ul.tree {
 	li {
 		display: block;
 		position: relative;
-		span.tree-item {
-			$runningItemW: 0;
-			@include box-sizing(border-box);
-			@include border-radius($basicCr);
-			@include single-transition(background-color, 0.25s);
-			display: block;
-			font-size: 0.8em;
-			height: $menuLineH;
-			line-height: $menuLineH;
-			margin-bottom: $interiorMarginSm;
-			position: relative;
+	}
+	ul.tree {
+		margin-left: $treeVCW + $interiorMargin;
+	}
+}
 
-			.view-control {
-				display: inline-block;
-                margin-left: $interiorMargin;
-				font-size: 0.75em;
-				width: $treeVCW;
-				$runningItemW: $interiorMargin + $treeVCW;
-                // NOTE: [Mobile] Removed Hover on Mobile
-                @include desktop {
-                    &:hover {
-                        color: $colorItemTreeVCHover;
-                    }
-                }
+.tree-item,
+.search-result-item {
+	$runningItemW: 0;
+	@include box-sizing(border-box);
+	@include border-radius($basicCr);
+	@include single-transition(background-color, 0.25s);
+	display: block;
+	font-size: 0.8em;
+	height: $menuLineH;
+	line-height: $menuLineH;
+	margin-bottom: $interiorMarginSm;
+	position: relative;
+
+	.view-control {
+		display: inline-block;
+		margin-left: $interiorMargin;
+		font-size: 0.75em;
+		width: $treeVCW;
+		$runningItemW: $interiorMargin + $treeVCW;
+		// NOTE: [Mobile] Removed Hover on Mobile
+		@include desktop {
+			&:hover {
+				color: $colorItemTreeVCHover;
 			}
+		}
+	}
 
-			.label {
-				display: block;
-//				@include test(orange);
-				@include absPosDefault();
-				//left: $runningItemW + $interiorMargin; // Adding pad to left to make room for link icon
-				line-height: $menuLineH;
-				left: $runningItemW;
+	.label {
+		display: block;
+		//				@include test(orange);
+		@include absPosDefault();
+		//left: $runningItemW + $interiorMargin; // Adding pad to left to make room for link icon
+		line-height: $menuLineH;
+		//left: $runningItemW;
 
-				.type-icon {
-					//@include absPosDefault(0, false);
-					$d: $treeTypeIconH; // 16px is crisp size
-					@include txtShdwSubtle(0.6);
-					font-size: $d;
-					color: $colorItemTreeIcon;
-					left: $interiorMargin;
+		.type-icon {
+			//@include absPosDefault(0, false);
+			$d: $treeTypeIconH; // 16px is crisp size
+			@include txtShdwSubtle(0.6);
+			font-size: $d;
+			color: $colorItemTreeIcon;
+			left: $interiorMargin;
+			position: absolute;
+			@include verticalCenterBlock($menuLineHPx, $d);
+			line-height: 100%;
+			right: auto; width: $d;
+
+			.icon {
+				&.l-icon-link,
+				&.l-icon-alert {
+					@include txtShdwSubtle(1);
 					position: absolute;
-					@include verticalCenterBlock($menuLineHPx, $d);
-					line-height: 100%;
-                    right: auto; width: $d;
-
-					.icon {
-						&.l-icon-link,
-						&.l-icon-alert {
-							@include txtShdwSubtle(1);
-							position: absolute;
-							z-index: 2;
-						}
-						&.l-icon-alert {
-							$d: 8px;
-							@include ancillaryIcon($d, $colorAlert);
-							top: 1px;
-							right: -2px;
-						}
-						&.l-icon-link {
-							$d: 8px;
-							@include ancillaryIcon($d, $colorIconLink);
-							left: -3px;
-							bottom: 0px;
-						}
-					}
+					z-index: 2;
 				}
-				.title-label {
-					@include absPosDefault();
+				&.l-icon-alert {
+					$d: 8px;
+					@include ancillaryIcon($d, $colorAlert);
+					top: 1px;
+					right: -2px;
+				}
+				&.l-icon-link {
+					$d: 8px;
+					@include ancillaryIcon($d, $colorIconLink);
+					left: -3px;
+					bottom: 0px;
+				}
+			}
+		}
+		.title-label {
+			@include absPosDefault();
+			display: block;
+			left: $runningItemW + ($interiorMargin * 3);
+			//right: $treeContextTriggerW + $interiorMargin;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			white-space: nowrap;
+		}
+	}
+
+	&.loading {
+		pointer-events: none;
+		.label {
+			opacity: 0.5;
+			.title-label {
+				font-style: italic;
+			}
+		}
+		.wait-spinner {
+			margin-left: 14px;
+		}
+	}
+
+	&.selected {
+		$c: #fff;
+		background: $colorKeySelectedBg;
+		color: $c;
+		.view-control {
+			color: $colorItemTreeIcon;
+		}
+		.label .type-icon {
+			color: #fff; //$colorItemTreeIconHover;
+		}
+	}
+
+	&:not(.selected) {
+		// NOTE: [Mobile] Removed Hover on Mobile
+		@include desktop {
+			&:hover {
+				background: rgba(#fff, 0.1); //lighten($colorBodyBg, 5%);
+				color: lighten($colorBodyFg, 20%);
+				.context-trigger {
 					display: block;
-					left: $runningItemW + ($interiorMargin * 3);
-	                //right: $treeContextTriggerW + $interiorMargin;
-					overflow: hidden;
-					text-overflow: ellipsis;
-					white-space: nowrap;
 				}
-			}
-
-			&.loading {
-				pointer-events: none;
-				.label {
-					opacity: 0.5;
-					.title-label {
-						font-style: italic;
-					}
-				}
-				.wait-spinner {
-					margin-left: 14px;
-				}
-			}
-
-			&.selected {
-				$c: #fff;
-				background: $colorKeySelectedBg;
-				color: $c;
-				.view-control {
-					color: $colorItemTreeIcon;
-				}
-				.label .type-icon {
-					color: #fff; //$colorItemTreeIconHover;
-				}
-			}
-
-			&:not(.selected) {
-                // NOTE: [Mobile] Removed Hover on Mobile
-                @include desktop {
-                    &:hover {
-                        background: rgba(#fff, 0.1); //lighten($colorBodyBg, 5%);
-                        color: lighten($colorBodyFg, 20%);
-                        .context-trigger {
-                            display: block;
-                        }
-                        .icon {
-                            color: $colorItemTreeIconHover;
-                        }
-                    }
-                }
-			}
-
-			&:not(.loading) {
-				cursor: pointer;
-			}
-
-			.context-trigger {
-				$h: 0.9rem;
-				//display: none;
-				top: -1px;
-				position: absolute;
-				right: $interiorMarginSm;
-				.invoke-menu {
-					font-size: 0.75em;
-					height: $h;
-					line-height: $h;
+				.icon {
+					color: $colorItemTreeIconHover;
 				}
 			}
 		}
 	}
 
-	ul.tree {
-		margin-left: $treeVCW + $interiorMargin;
+	&:not(.loading) {
+		cursor: pointer;
+	}
+
+	.context-trigger {
+		$h: 0.9rem;
+		//display: none;
+		top: -1px;
+		position: absolute;
+		right: $interiorMarginSm;
+		.invoke-menu {
+			font-size: 0.75em;
+			height: $h;
+			line-height: $h;
+		}
+	}
+}
+
+.tree-item {
+	.label {
+		left: $interiorMargin + $treeVCW;
 	}
 }
\ No newline at end of file

From a0169ad1585326ff24540b3e3b9860c40212f308 Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Wed, 26 Aug 2015 20:20:16 -0700
Subject: [PATCH 171/209] [Mobile] Browse Controller

Adjusted BrowseController to hide the
back button if current object represented/
selected has no context.
---
 platform/commonUI/browse/src/BrowseController.js | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/platform/commonUI/browse/src/BrowseController.js b/platform/commonUI/browse/src/BrowseController.js
index d1f89d43fb..d1ec4d33e0 100644
--- a/platform/commonUI/browse/src/BrowseController.js
+++ b/platform/commonUI/browse/src/BrowseController.js
@@ -150,9 +150,15 @@ define(
             }
             
             function checkRoot() {
-                var parent = navigationService.getNavigation().getCapability('context').getParent();
-                if (parent.getId() !== ROOT_ID) {
-                    $scope.atRoot = false;
+                var context = navigationService.getNavigation().getCapability('context'),
+                    parent;
+                if (context) {
+                    parent = context.getParent();
+                    if (parent.getId() !== ROOT_ID) {
+                        $scope.atRoot = false;
+                    } else {
+                        $scope.atRoot = true;
+                    }
                 } else {
                     $scope.atRoot = true;
                 }

From bb2f086623c27235fd7566c1d429e566bf7ca1b3 Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Wed, 26 Aug 2015 20:21:36 -0700
Subject: [PATCH 172/209] [Mobile] Leaf Node of Folder/Layout

Domainobjects that can hold an array of
domain objects return '[]' instead of
undefined, when checking for model.composition.
Now checks for empty array and navigates to layout/
folder that has no children.
---
 platform/commonUI/general/res/templates/tree-node.html | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/platform/commonUI/general/res/templates/tree-node.html b/platform/commonUI/general/res/templates/tree-node.html
index 1d5559e668..a40cb9fd7b 100644
--- a/platform/commonUI/general/res/templates/tree-node.html
+++ b/platform/commonUI/general/res/templates/tree-node.html
@@ -29,8 +29,9 @@
                 key="'label'"
 				mct-object="domainObject"
 				ng-model="ngModel"
-				ng-click="!treeNode.checkMobile() || model.composition == undefined ?
-				ngModel.selectedObject = domainObject : toggle.toggle(); treeNode.trackExpansion()"
+				ng-click="!treeNode.checkMobile() || model.composition == undefined ||
+                          model.composition.length == 0 ? ngModel.selectedObject = domainObject : toggle.toggle();
+                          treeNode.trackExpansion()"
 				>
             </mct-representation>
             <span

From 67cb5f8077374c5263903d0bb3ace602d1e33e56 Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Wed, 26 Aug 2015 21:08:33 -0700
Subject: [PATCH 173/209] [Mobile] Tests

Completed test for the BrowseController
Spec that takes in an undefined context.
---
 .../commonUI/browse/test/BrowseControllerSpec.js    | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/platform/commonUI/browse/test/BrowseControllerSpec.js b/platform/commonUI/browse/test/BrowseControllerSpec.js
index 136b44cd30..e5e54e32d6 100644
--- a/platform/commonUI/browse/test/BrowseControllerSpec.js
+++ b/platform/commonUI/browse/test/BrowseControllerSpec.js
@@ -304,6 +304,19 @@ define(
                 );
                 
                 mockScope.checkRoot();
+                
+                mockDomainObject.getCapability.andReturn(undefined);
+                mockNavigationService.getNavigation.andReturn(mockDomainObject);
+                
+                controller = new BrowseController(
+                    mockScope,
+                    mockRoute,
+                    mockLocation,
+                    mockObjectService,
+                    mockNavigationService
+                );
+                
+                mockScope.checkRoot();
             });
             
             // Mocks the back arrow call that

From 8c4c65241a0d8cb8793cab19e2e40f0ddd751bdb Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Thu, 27 Aug 2015 09:02:55 -0700
Subject: [PATCH 174/209] [Mobile] Tree

WHen selecting a leaf node on phone-portrait,
now the left menu will close if you select the
object name or the arrow.
---
 platform/commonUI/general/res/templates/tree-node.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/platform/commonUI/general/res/templates/tree-node.html b/platform/commonUI/general/res/templates/tree-node.html
index a40cb9fd7b..cd77d001a2 100644
--- a/platform/commonUI/general/res/templates/tree-node.html
+++ b/platform/commonUI/general/res/templates/tree-node.html
@@ -30,7 +30,7 @@
 				mct-object="domainObject"
 				ng-model="ngModel"
 				ng-click="!treeNode.checkMobile() || model.composition == undefined ||
-                          model.composition.length == 0 ? ngModel.selectedObject = domainObject : toggle.toggle();
+                          model.composition.length == 0 ? treeNode.setObject(ngModel, domainObject) : toggle.toggle();
                           treeNode.trackExpansion()"
 				>
             </mct-representation>

From 1961adf8d63682534fea5edf493f5bb9b5a632ac Mon Sep 17 00:00:00 2001
From: Charles Hacskaylo <charlesh88@gmail.com>
Date: Thu, 27 Aug 2015 10:33:32 -0700
Subject: [PATCH 175/209] [Mobile] Fixed font-size and line-height problem in
 tree

open #74
---
 platform/commonUI/general/res/css/forms.css          | 4 ++--
 platform/commonUI/general/res/css/theme-espresso.css | 4 ++--
 platform/commonUI/general/res/css/tree.css           | 2 +-
 platform/commonUI/general/res/sass/forms/_elems.scss | 4 ++--
 platform/commonUI/general/res/sass/tree/_tree.scss   | 2 +-
 5 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/platform/commonUI/general/res/css/forms.css b/platform/commonUI/general/res/css/forms.css
index d5e363bcd9..335ceafac1 100644
--- a/platform/commonUI/general/res/css/forms.css
+++ b/platform/commonUI/general/res/css/forms.css
@@ -200,8 +200,8 @@
   .form .form-row.first {
     border-top: none; }
   /* line 52, ../sass/forms/_elems.scss */
-  .form .form-row .label,
-  .form .form-row .controls {
+  .form .form-row > .label,
+  .form .form-row > .controls {
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index b34ca46897..b9be506ef9 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -3545,8 +3545,8 @@ label.checkbox.custom {
   .form .form-row.first {
     border-top: none; }
   /* line 52, ../sass/forms/_elems.scss */
-  .form .form-row .label,
-  .form .form-row .controls {
+  .form .form-row > .label,
+  .form .form-row > .controls {
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
diff --git a/platform/commonUI/general/res/css/tree.css b/platform/commonUI/general/res/css/tree.css
index 770338d9f8..73d260de38 100644
--- a/platform/commonUI/general/res/css/tree.css
+++ b/platform/commonUI/general/res/css/tree.css
@@ -180,7 +180,7 @@ ul.tree {
   -webkit-transition: background-color 0.25s;
   transition: background-color 0.25s;
   display: block;
-  font-size: 0.8em;
+  font-size: 0.8rem;
   height: 1.5rem;
   line-height: 1.5rem;
   margin-bottom: 3px;
diff --git a/platform/commonUI/general/res/sass/forms/_elems.scss b/platform/commonUI/general/res/sass/forms/_elems.scss
index 61825dfd2f..0f430c2391 100644
--- a/platform/commonUI/general/res/sass/forms/_elems.scss
+++ b/platform/commonUI/general/res/sass/forms/_elems.scss
@@ -49,8 +49,8 @@
 			border-top: none;
 		}
 
-		.label,
-		.controls {
+		>.label,
+		>.controls {
 			@include box-sizing(border-box);
 			@include clearfix;
 			font-size: 0.8rem;
diff --git a/platform/commonUI/general/res/sass/tree/_tree.scss b/platform/commonUI/general/res/sass/tree/_tree.scss
index 330bdeb5d5..8a0c4c1e2a 100644
--- a/platform/commonUI/general/res/sass/tree/_tree.scss
+++ b/platform/commonUI/general/res/sass/tree/_tree.scss
@@ -38,7 +38,7 @@ ul.tree {
 	@include border-radius($basicCr);
 	@include single-transition(background-color, 0.25s);
 	display: block;
-	font-size: 0.8em;
+	font-size: 0.8rem;
 	height: $menuLineH;
 	line-height: $menuLineH;
 	margin-bottom: $interiorMarginSm;

From 48136c226528221403cec8b5b44e3543f6cb4f97 Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Thu, 27 Aug 2015 10:42:11 -0700
Subject: [PATCH 176/209] [Context] Back Arrow

Checks the Back Arrow in both checkRoot and
navigateToParent, also checks grandparent in both.
This allows the back arrow to hide in search when
context is unavailable.
---
 .../browse/res/templates/back-arrow.html      |  4 +-
 .../commonUI/browse/src/BrowseController.js   | 44 +++++++++++++------
 2 files changed, 32 insertions(+), 16 deletions(-)

diff --git a/platform/commonUI/browse/res/templates/back-arrow.html b/platform/commonUI/browse/res/templates/back-arrow.html
index c73b4cbdb2..3ed0ec061b 100644
--- a/platform/commonUI/browse/res/templates/back-arrow.html
+++ b/platform/commonUI/browse/res/templates/back-arrow.html
@@ -23,6 +23,6 @@
 <!-- Back Arrow Icon used on mobile-->
 <a ng-controller="BrowseController"
       class='type-icon icon ui-symbol s-back'
-      ng-click='backArrow()'
-      ng-class="checkRoot(); atRoot ? 'hidden' : ''">{
+      ng-class="checkRoot(); atRoot ? 'hidden' : ''"
+      ng-click='backArrow()'>{
 </a>
diff --git a/platform/commonUI/browse/src/BrowseController.js b/platform/commonUI/browse/src/BrowseController.js
index d1ec4d33e0..ca73c8c573 100644
--- a/platform/commonUI/browse/src/BrowseController.js
+++ b/platform/commonUI/browse/src/BrowseController.js
@@ -134,28 +134,44 @@ define(
             // is not the root, then user is navigated to
             // parent
             function navigateToParent() {
-                var parent = navigationService.getNavigation().getCapability('context').getParent(),
-                    grandparent;
-                if (parent.getId() !== ROOT_ID) {
-                    grandparent = parent.getCapability('context').getParent().getId();
-                    navigateTo(parent);
-                    if (grandparent && grandparent !== ROOT_ID) {
-                        $scope.atRoot = false;
-                    } else {
-                        $scope.atRoot = true;
+                var context = navigationService.getNavigation().getCapability('context'),
+                    parentContext,
+                    parent,
+                    grandparentId;
+                
+                // Checks if the current object has a context
+                if (context) {
+                    parent = context.getParent();
+                    parentContext = parent.getCapability('context');
+                    if ((parent.getId() !== ROOT_ID) && parentContext) {
+                        grandparentId = parentContext.getParent().getId();
+                        navigateTo(parent);
+                        if (grandparentId && grandparentId !== ROOT_ID) {
+                            $scope.atRoot = false;
+                        } else {
+                            $scope.atRoot = true;
+                        }
                     }
-                } else {
-                    $scope.atRoot = true;
                 }
             }
             
             function checkRoot() {
                 var context = navigationService.getNavigation().getCapability('context'),
-                    parent;
+                    parentContext,
+                    parent,
+                    grandparent;
+                
+                // Checks if the current object has a context
                 if (context) {
                     parent = context.getParent();
-                    if (parent.getId() !== ROOT_ID) {
-                        $scope.atRoot = false;
+                    parentContext = parent.getCapability('context');
+                    if ((parent.getId() !== ROOT_ID) && parentContext) {
+                        grandparent = parentContext.getParent();
+                        if (!grandparent) {
+                            $scope.atRoot = true;
+                        } else {
+                            $scope.atRoot = false;
+                        }
                     } else {
                         $scope.atRoot = true;
                     }

From f0c64b6b92da569b6a2aa7e1dbb9afb0c64d2537 Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Thu, 27 Aug 2015 10:45:48 -0700
Subject: [PATCH 177/209] [Browse] Back Arrow

Refactored Back Arrow to work same as prior
commit, however with less if else statements.
Returns if not at root, otherwise root is set to
true.
---
 .../commonUI/browse/src/BrowseController.js   | 38 ++++++++++++++-----
 1 file changed, 29 insertions(+), 9 deletions(-)

diff --git a/platform/commonUI/browse/src/BrowseController.js b/platform/commonUI/browse/src/BrowseController.js
index ca73c8c573..4e97ee6f87 100644
--- a/platform/commonUI/browse/src/BrowseController.js
+++ b/platform/commonUI/browse/src/BrowseController.js
@@ -141,16 +141,31 @@ define(
                 
                 // Checks if the current object has a context
                 if (context) {
+                    
+                    // Sets the parent and the parent context
+                    // which is checked
                     parent = context.getParent();
                     parentContext = parent.getCapability('context');
+                    
                     if ((parent.getId() !== ROOT_ID) && parentContext) {
+                        // Gets the grandparent id
                         grandparentId = parentContext.getParent().getId();
+                        
+                        // Navigates to the parent
                         navigateTo(parent);
+                        
+                        // Checks after navigation if the user is located at the 
+                        // root (grandparent of original selected object, after
+                        // navigation, user is at parent of original object and
+                        // child of grandparent)
                         if (grandparentId && grandparentId !== ROOT_ID) {
                             $scope.atRoot = false;
-                        } else {
-                            $scope.atRoot = true;
+                            return;
                         }
+                        
+                        // Set at root if no grandparent exists and
+                        // if grandparent is ROOT, after navigation
+                        $scope.atRoot = true;
                     }
                 }
             }
@@ -167,17 +182,22 @@ define(
                     parentContext = parent.getCapability('context');
                     if ((parent.getId() !== ROOT_ID) && parentContext) {
                         grandparent = parentContext.getParent();
-                        if (!grandparent) {
-                            $scope.atRoot = true;
-                        } else {
+                        
+                        // Checks if the grandparent exists
+                        // if it does not exist (for example in search),
+                        // than do not show the back button
+                        if (grandparent) {
                             $scope.atRoot = false;
+                            return;
                         }
-                    } else {
-                        $scope.atRoot = true;
                     }
-                } else {
-                    $scope.atRoot = true;
                 }
+                
+                // In any other situation where the context or parent
+                // context does not exist or the user is at ROOT, than
+                // hide the back arrow
+                $scope.atRoot = true;
+               
             }
 
             // Load the root object, put it in the scope.

From 63b41d796a2881bda72398cc78f693ab51ba30d6 Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Thu, 27 Aug 2015 12:06:25 -0700
Subject: [PATCH 178/209] [Mobile] Clean Up

Cleaned up context menu gesture
comments with spacing.
---
 platform/representation/src/gestures/ContextMenuGesture.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/platform/representation/src/gestures/ContextMenuGesture.js b/platform/representation/src/gestures/ContextMenuGesture.js
index 158c209beb..4de40586dd 100644
--- a/platform/representation/src/gestures/ContextMenuGesture.js
+++ b/platform/representation/src/gestures/ContextMenuGesture.js
@@ -55,14 +55,17 @@ define(
     
     // When context menu event occurs, show object actions instead
             if (!agentService.isMobile(navigator.userAgent)) {
+                
                 // When context menu event occurs, show object actions instead
                 element.on('contextmenu', showMenu);
             } else if (agentService.isMobile(navigator.userAgent)) {
+                
                 // If on mobile device, then start timeout for the single touch event
                 // during the timeout 'isPressing' is true.
                 element.on('touchstart', function (event) {
                     if (event.touches.length < 2) {
                         isPressing = true;
+                        
                         // After the timeout, if 'isPressing' is
                         // true, display context menu for object
                         $timeout(function () {
@@ -72,6 +75,7 @@ define(
                         }, longTouchTime);
                     }
                 });
+                
                 // Whenever the touch event ends, 'isPressing' is false.
                 element.on('touchend', function (event) {
                     isPressing = false;

From 54bf39344a661344bf245bec916fc5b9237ce5ec Mon Sep 17 00:00:00 2001
From: Charles Hacskaylo <charlesh88@gmail.com>
Date: Thu, 27 Aug 2015 17:05:50 -0700
Subject: [PATCH 179/209] [Mobile] Multiple mobile Safari fixes

open #74
New mixins to prefix '-webkit-' to props and vals;
'flex' classes use new webkit mixins;
Fixed flex layout of .object-browse-bar and
.context-available element;
Migrated CSS to remove small .scss include files;
---
 .../res/templates/browse/object-header.html   |   2 +-
 .../general/res/css/theme-espresso.css        | 273 +++++++++---------
 platform/commonUI/general/res/sass/_flex.scss |  37 ---
 platform/commonUI/general/res/sass/_main.scss |   2 +-
 .../commonUI/general/res/sass/_mixins.scss    |  10 +
 .../general/res/sass/controls/_controls.scss  |  28 +-
 .../general/res/sass/mobile/_layout.scss      |   2 +-
 .../general/res/sass/search/_search.scss      |  16 +-
 .../res/sass/user-environ/_layout.scss        |  35 ++-
 .../res/sass/user-environ/_object-browse.scss |  38 ---
 10 files changed, 197 insertions(+), 246 deletions(-)
 delete mode 100644 platform/commonUI/general/res/sass/_flex.scss
 delete mode 100644 platform/commonUI/general/res/sass/user-environ/_object-browse.scss

diff --git a/platform/commonUI/browse/res/templates/browse/object-header.html b/platform/commonUI/browse/res/templates/browse/object-header.html
index a9652631d9..7ea43a6b9f 100644
--- a/platform/commonUI/browse/res/templates/browse/object-header.html
+++ b/platform/commonUI/browse/res/templates/browse/object-header.html
@@ -22,7 +22,7 @@
 <div class='object-header object-header-mobile'>
     <span class='type-icon ui-symbol'>{{type.getGlyph()}}</span>
     <!--span class='type-name mobile-important-hide'>{{type.getName()}}</span-->
-    <span class="l-elem-wrapper">
+    <span class="l-elem-wrapper l-flex">
         <span ng-if="parameters.mode" class='action'>{{parameters.mode}}</span>
         <span class='title-label'>{{model.name}}</span>
         <mct-representation key="'menu-arrow'" mct-object='domainObject'></mct-representation>
diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index b9be506ef9..87add64e54 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -562,15 +562,8 @@ mct-container {
     .bar.abs .right .icon.major,
     .btn-menu span.bar.l-click-area .right .icon.major {
       margin-left: 15px; }
-/* line 88, ../sass/user-environ/_layout.scss */
-.bar.l-flex {
-  display: flex;
-  flex-flow: row nowrap; }
-  /* line 91, ../sass/user-environ/_layout.scss */
-  .bar.l-flex .left {
-    flex: 1 1 0; }
 
-/* line 99, ../sass/user-environ/_layout.scss */
+/* line 91, ../sass/user-environ/_layout.scss */
 .user-environ .browse-area,
 .user-environ .edit-area,
 .user-environ .editor {
@@ -578,23 +571,23 @@ mct-container {
   right: 10px;
   bottom: 35px;
   left: 10px; }
-/* line 110, ../sass/user-environ/_layout.scss */
+/* line 102, ../sass/user-environ/_layout.scss */
 .user-environ .browse-area > .contents,
 .user-environ .edit-area > .contents {
   left: 0;
   right: 0; }
-/* line 116, ../sass/user-environ/_layout.scss */
+/* line 108, ../sass/user-environ/_layout.scss */
 .user-environ .edit-area {
   top: 45px; }
-  /* line 119, ../sass/user-environ/_layout.scss */
+  /* line 111, ../sass/user-environ/_layout.scss */
   .user-environ .edit-area .tool-bar {
     bottom: auto;
     height: 30px;
     line-height: 25px; }
-  /* line 124, ../sass/user-environ/_layout.scss */
+  /* line 116, ../sass/user-environ/_layout.scss */
   .user-environ .edit-area .work-area {
     top: 40px; }
-/* line 129, ../sass/user-environ/_layout.scss */
+/* line 121, ../sass/user-environ/_layout.scss */
 .user-environ .ue-bottom-bar {
   overflow: hidden;
   position: absolute;
@@ -606,20 +599,20 @@ mct-container {
   height: auto;
   top: auto;
   height: 25px; }
-  /* line 134, ../sass/user-environ/_layout.scss */
+  /* line 126, ../sass/user-environ/_layout.scss */
   .user-environ .ue-bottom-bar .status-holder {
     z-index: 1; }
-  /* line 138, ../sass/user-environ/_layout.scss */
+  /* line 130, ../sass/user-environ/_layout.scss */
   .user-environ .ue-bottom-bar .app-logo {
     left: auto;
     width: 105px;
     z-index: 2; }
 
-/* line 146, ../sass/user-environ/_layout.scss */
+/* line 138, ../sass/user-environ/_layout.scss */
 .cols {
   overflow: hidden;
   *zoom: 1; }
-  /* line 148, ../sass/user-environ/_layout.scss */
+  /* line 140, ../sass/user-environ/_layout.scss */
   .cols .col {
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
@@ -630,111 +623,111 @@ mct-container {
     margin-left: 1.5%;
     padding-left: 5px;
     position: relative; }
-    /* line 156, ../sass/user-environ/_layout.scss */
+    /* line 148, ../sass/user-environ/_layout.scss */
     .cols .col:first-child {
       margin-left: 0;
       padding-left: 0; }
-  /* line 163, ../sass/user-environ/_layout.scss */
+  /* line 155, ../sass/user-environ/_layout.scss */
   .cols.cols-2 .col-1 {
     min-width: 250px;
     width: 48.5%; }
-  /* line 169, ../sass/user-environ/_layout.scss */
+  /* line 161, ../sass/user-environ/_layout.scss */
   .cols.cols-2-ff .col-100px {
     width: 100px; }
-  /* line 176, ../sass/user-environ/_layout.scss */
+  /* line 168, ../sass/user-environ/_layout.scss */
   .cols.cols-6 .col-1 {
     min-width: 83.33333px;
     width: 15.16667%; }
-  /* line 182, ../sass/user-environ/_layout.scss */
+  /* line 174, ../sass/user-environ/_layout.scss */
   .cols.cols-16 .col-1 {
     min-width: 31.25px;
     width: 4.75%; }
-  /* line 185, ../sass/user-environ/_layout.scss */
+  /* line 177, ../sass/user-environ/_layout.scss */
   .cols.cols-16 .col-2 {
     min-width: 62.5px;
     width: 11%; }
-  /* line 188, ../sass/user-environ/_layout.scss */
+  /* line 180, ../sass/user-environ/_layout.scss */
   .cols.cols-16 .col-7 {
     min-width: 218.75px;
     width: 42.25%; }
-  /* line 194, ../sass/user-environ/_layout.scss */
+  /* line 186, ../sass/user-environ/_layout.scss */
   .cols.cols-32 .col-2 {
     min-width: 31.25px;
     width: 4.75%; }
-  /* line 197, ../sass/user-environ/_layout.scss */
+  /* line 189, ../sass/user-environ/_layout.scss */
   .cols.cols-32 .col-15 {
     min-width: 234.375px;
     width: 45.375%; }
-  /* line 201, ../sass/user-environ/_layout.scss */
+  /* line 193, ../sass/user-environ/_layout.scss */
   .cols .l-row {
     overflow: hidden;
     *zoom: 1;
     padding: 5px 0; }
 
-/* line 209, ../sass/user-environ/_layout.scss */
+/* line 201, ../sass/user-environ/_layout.scss */
 .browse-mode .split-layout .split-pane-component.pane.left {
   min-width: 150px;
   max-width: 800px;
   width: 25%; }
 
-/* line 222, ../sass/user-environ/_layout.scss */
+/* line 214, ../sass/user-environ/_layout.scss */
 .edit-mode .split-layout .split-pane-component.pane.right .split-pane-component.pane.bottom {
   min-height: 50px;
   max-height: 80%; }
 
-/* line 230, ../sass/user-environ/_layout.scss */
+/* line 222, ../sass/user-environ/_layout.scss */
 .pane {
   position: absolute; }
-  /* line 233, ../sass/user-environ/_layout.scss */
+  /* line 225, ../sass/user-environ/_layout.scss */
   .pane.treeview.left .create-btn-holder {
     bottom: auto;
     top: 0;
     height: 24px; }
-    /* line 236, ../sass/user-environ/_layout.scss */
+    /* line 228, ../sass/user-environ/_layout.scss */
     .pane.treeview.left .create-btn-holder .wrapper.menu-element {
       position: absolute;
       bottom: 5px; }
-  /* line 241, ../sass/user-environ/_layout.scss */
+  /* line 233, ../sass/user-environ/_layout.scss */
   .pane.treeview.left .search-holder {
     top: 34px; }
-  /* line 244, ../sass/user-environ/_layout.scss */
+  /* line 236, ../sass/user-environ/_layout.scss */
   .pane.treeview.left .tree-holder {
     overflow: auto;
     top: 64px; }
-  /* line 251, ../sass/user-environ/_layout.scss */
+  /* line 243, ../sass/user-environ/_layout.scss */
   .pane.items .object-browse-bar .left.abs, .pane.items .object-browse-bar .btn-menu span.left.l-click-area, .btn-menu .pane.items .object-browse-bar span.left.l-click-area,
   .pane.items .object-browse-bar .right.abs,
   .pane.items .object-browse-bar .btn-menu span.right.l-click-area,
   .btn-menu .pane.items .object-browse-bar span.right.l-click-area {
     top: auto; }
-  /* line 262, ../sass/user-environ/_layout.scss */
+  /* line 254, ../sass/user-environ/_layout.scss */
   .pane.items .object-holder {
     top: 34px; }
-  /* line 266, ../sass/user-environ/_layout.scss */
+  /* line 258, ../sass/user-environ/_layout.scss */
   .pane .object-holder {
     overflow: auto; }
 
-/* line 274, ../sass/user-environ/_layout.scss */
+/* line 266, ../sass/user-environ/_layout.scss */
 .split-layout.horizontal > .pane {
   margin-top: 5px; }
-  /* line 277, ../sass/user-environ/_layout.scss */
+  /* line 269, ../sass/user-environ/_layout.scss */
   .split-layout.horizontal > .pane:first-child {
     margin-top: 0; }
-/* line 284, ../sass/user-environ/_layout.scss */
+/* line 276, ../sass/user-environ/_layout.scss */
 .split-layout.vertical > .pane {
   margin-left: 5px; }
-  /* line 287, ../sass/user-environ/_layout.scss */
+  /* line 279, ../sass/user-environ/_layout.scss */
   .split-layout.vertical > .pane > .holder {
     left: 0;
     right: 0; }
-  /* line 291, ../sass/user-environ/_layout.scss */
+  /* line 283, ../sass/user-environ/_layout.scss */
   .split-layout.vertical > .pane:first-child {
     margin-left: 0; }
-    /* line 293, ../sass/user-environ/_layout.scss */
+    /* line 285, ../sass/user-environ/_layout.scss */
     .split-layout.vertical > .pane:first-child .holder {
       right: 3px; }
 
-/* line 302, ../sass/user-environ/_layout.scss */
+/* line 294, ../sass/user-environ/_layout.scss */
 .object-browse-bar .btn,
 .object-browse-bar .t-btn,
 .object-browse-bar .view-switcher,
@@ -748,12 +741,48 @@ mct-container {
   line-height: 200%;
   vertical-align: top; }
 
-/* line 319, ../sass/user-environ/_layout.scss */
+/* line 311, ../sass/user-environ/_layout.scss */
 .object-browse-bar .view-switcher,
 .top-bar .view-switcher {
   margin-right: 20px; }
 
-/* line 324, ../sass/user-environ/_layout.scss */
+/* line 316, ../sass/user-environ/_layout.scss */
+.object-browse-bar {
+  overflow: visible;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  width: auto;
+  height: auto;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  height: 24px;
+  line-height: 24px;
+  white-space: nowrap; }
+  /* line 324, ../sass/user-environ/_layout.scss */
+  .object-browse-bar .left {
+    padding-right: 20px; }
+    /* line 326, ../sass/user-environ/_layout.scss */
+    .object-browse-bar .left .l-back {
+      display: inline-block;
+      float: left;
+      margin-right: 10px; }
+
+/* line 334, ../sass/user-environ/_layout.scss */
+.l-flex {
+  display: flex;
+  display: -webkit-flex;
+  flex-flow: row nowrap;
+  -webkit-flex-flow: row nowrap; }
+  /* line 337, ../sass/user-environ/_layout.scss */
+  .l-flex .left {
+    flex: 1 1 0;
+    -webkit-flex: 1 1 0; }
+
+/* line 343, ../sass/user-environ/_layout.scss */
 .vscroll {
   overflow-y: auto; }
 
@@ -952,7 +981,8 @@ mct-container {
   /* line 160, ../sass/mobile/_layout.scss */
   .browse-showtree .pane.right-repr {
     left: 0 !important;
-    transform: translateX(90%); }
+    transform: translateX(90%);
+    -webkit-transform: translateX(90%); }
     /* line 163, ../sass/mobile/_layout.scss */
     .browse-showtree .pane.right-repr #content-area {
       opacity: 0; } }
@@ -2527,31 +2557,37 @@ label.checkbox.custom {
 /* line 364, ../sass/controls/_controls.scss */
 .object-header {
   font-size: 1em; }
-  /* line 374, ../sass/controls/_controls.scss */
+  /* line 375, ../sass/controls/_controls.scss */
   .object-header > .type-icon {
     font-size: 120%;
     float: left;
     margin-right: 5px; }
-  /* line 380, ../sass/controls/_controls.scss */
+  /* line 381, ../sass/controls/_controls.scss */
   .object-header .l-elem-wrapper {
-    display: flex;
-    flex-flow: row nowrap;
-    justify-content: flex-start; }
-  /* line 386, ../sass/controls/_controls.scss */
+    justify-content: flex-start;
+    -webkit-justify-content: flex-start; }
+    /* line 384, ../sass/controls/_controls.scss */
+    .object-header .l-elem-wrapper mct-representation {
+      min-width: 0.7em; }
+  /* line 392, ../sass/controls/_controls.scss */
   .object-header .action {
     margin-right: 5px; }
-  /* line 390, ../sass/controls/_controls.scss */
+  /* line 396, ../sass/controls/_controls.scss */
   .object-header .title-label {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
     color: white;
+    flex: 0 1 auto;
+    -webkit-flex: 0 1 auto;
     padding-right: 0.35em; }
-  /* line 397, ../sass/controls/_controls.scss */
+  /* line 405, ../sass/controls/_controls.scss */
   .object-header .context-available {
-    font-size: 0.7em; }
+    font-size: 0.7em;
+    flex: 0 0 1;
+    -webkit-flex: 0 0 1; }
   @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-    /* line 402, ../sass/controls/_controls.scss */
+    /* line 412, ../sass/controls/_controls.scss */
     .object-header .context-available {
       -moz-transition-property: opacity;
       -o-transition-property: opacity;
@@ -2566,12 +2602,12 @@ label.checkbox.custom {
       -webkit-transition-timing-function: ease-in-out;
       transition-timing-function: ease-in-out;
       opacity: 0; }
-    /* line 407, ../sass/controls/_controls.scss */
+    /* line 417, ../sass/controls/_controls.scss */
     .object-header:hover .context-available {
       opacity: 1; } }
 
 /******************************************************** SLIDERS */
-/* line 420, ../sass/controls/_controls.scss */
+/* line 430, ../sass/controls/_controls.scss */
 .slider .slot {
   -moz-border-radius: 2px;
   -webkit-border-radius: 2px;
@@ -2592,7 +2628,7 @@ label.checkbox.custom {
   right: 0;
   bottom: auto;
   left: 0; }
-/* line 431, ../sass/controls/_controls.scss */
+/* line 441, ../sass/controls/_controls.scss */
 .slider .knob {
   background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzUyNTI1MiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzQ1NDU0NSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
   background-size: 100%;
@@ -2675,12 +2711,12 @@ label.checkbox.custom {
     -webkit-transition-timing-function: ease-in-out;
     transition-timing-function: ease-in-out;
     border-color: #0099cc; }
-  /* line 442, ../sass/controls/_controls.scss */
+  /* line 452, ../sass/controls/_controls.scss */
   .slider .knob:before {
     top: 1px;
     bottom: 3px;
     left: 5px; }
-/* line 449, ../sass/controls/_controls.scss */
+/* line 459, ../sass/controls/_controls.scss */
 .slider .range {
   background: rgba(0, 153, 204, 0.6);
   cursor: ew-resize;
@@ -2691,13 +2727,13 @@ label.checkbox.custom {
   left: auto;
   height: auto;
   width: auto; }
-  /* line 459, ../sass/controls/_controls.scss */
+  /* line 469, ../sass/controls/_controls.scss */
   .slider .range:hover {
     background: rgba(0, 153, 204, 0.7); }
 
 /******************************************************** BROWSER ELEMENTS */
 @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-  /* line 468, ../sass/controls/_controls.scss */
+  /* line 478, ../sass/controls/_controls.scss */
   ::-webkit-scrollbar {
     -moz-border-radius: 2px;
     -webkit-border-radius: 2px;
@@ -2714,7 +2750,7 @@ label.checkbox.custom {
     height: 10px;
     width: 10px; }
 
-  /* line 474, ../sass/controls/_controls.scss */
+  /* line 484, ../sass/controls/_controls.scss */
   ::-webkit-scrollbar-thumb {
     background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzY2NjY2NiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzU5NTk1OSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
     background-size: 100%;
@@ -2732,7 +2768,7 @@ label.checkbox.custom {
     -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
     box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
     border-top: 1px solid gray; }
-    /* line 481, ../sass/controls/_controls.scss */
+    /* line 491, ../sass/controls/_controls.scss */
     ::-webkit-scrollbar-thumb:hover {
       background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzgwODA4MCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzczNzM3MyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
       background-size: 100%;
@@ -2741,7 +2777,7 @@ label.checkbox.custom {
       background-image: -webkit-linear-gradient(#808080, #737373 20px);
       background-image: linear-gradient(#808080, #737373 20px); }
 
-  /* line 486, ../sass/controls/_controls.scss */
+  /* line 496, ../sass/controls/_controls.scss */
   ::-webkit-scrollbar-corner {
     background: rgba(0, 0, 0, 0.4); } }
 /*****************************************************************************
@@ -4385,20 +4421,23 @@ input[type="text"] {
 /* line 38, ../sass/search/_search.scss */
 .search {
   display: flex;
+  display: -webkit-flex;
   flex-direction: column;
+  -webkit-flex-direction: column;
   height: 100%; }
-  /* line 49, ../sass/search/_search.scss */
+  /* line 48, ../sass/search/_search.scss */
   .search .search-bar {
     font-size: 0.8em;
+    max-width: 250px;
     position: relative;
     width: 100%; }
-    /* line 66, ../sass/search/_search.scss */
+    /* line 60, ../sass/search/_search.scss */
     .search .search-bar .search-input {
       height: 25px;
       line-height: 25px;
       padding-top: 0;
       padding-bottom: 0; }
-    /* line 73, ../sass/search/_search.scss */
+    /* line 67, ../sass/search/_search.scss */
     .search .search-bar .search-icon,
     .search .search-bar .clear-icon,
     .search .search-bar .menu-icon {
@@ -4412,68 +4451,68 @@ input[type="text"] {
       position: absolute;
       text-align: center;
       top: 4px; }
-    /* line 86, ../sass/search/_search.scss */
+    /* line 80, ../sass/search/_search.scss */
     .search .search-bar .clear-icon,
     .search .search-bar .menu-icon {
       cursor: pointer;
       transition: color .25s; }
-    /* line 93, ../sass/search/_search.scss */
+    /* line 87, ../sass/search/_search.scss */
     .search .search-bar .search-input {
       position: relative;
       width: 100%;
       padding-left: 22px !important;
       padding-right: 44px !important; }
-      /* line 100, ../sass/search/_search.scss */
+      /* line 94, ../sass/search/_search.scss */
       .search .search-bar .search-input input {
         width: 100%; }
-    /* line 105, ../sass/search/_search.scss */
+    /* line 99, ../sass/search/_search.scss */
     .search .search-bar .search-icon {
       color: #737373;
       left: 3px;
       transition: visibility .15s, opacity .15s, color .2s;
       pointer-events: none; }
-    /* line 125, ../sass/search/_search.scss */
+    /* line 119, ../sass/search/_search.scss */
     .search .search-bar .search-input:hover + div.search-icon {
       color: #a6a6a6; }
-    /* line 129, ../sass/search/_search.scss */
+    /* line 123, ../sass/search/_search.scss */
     .search .search-bar .clear-icon {
       right: 22px;
       visibility: hidden;
       opacity: 0;
       transition: visibility .15s, opacity .15s, color .2s; }
-      /* line 138, ../sass/search/_search.scss */
+      /* line 132, ../sass/search/_search.scss */
       .search .search-bar .clear-icon.content {
         visibility: visible;
         opacity: 1; }
-      /* line 143, ../sass/search/_search.scss */
+      /* line 137, ../sass/search/_search.scss */
       .search .search-bar .clear-icon:hover {
         color: #a6a6a6; }
-    /* line 148, ../sass/search/_search.scss */
+    /* line 142, ../sass/search/_search.scss */
     .search .search-bar .menu-icon {
       font-size: 0.8em;
       padding-right: 4px;
       right: 4px;
       text-align: right; }
-      /* line 154, ../sass/search/_search.scss */
+      /* line 148, ../sass/search/_search.scss */
       .search .search-bar .menu-icon:hover {
         color: #a6a6a6; }
-    /* line 159, ../sass/search/_search.scss */
+    /* line 153, ../sass/search/_search.scss */
     .search .search-bar .search-menu-holder {
       float: right;
       left: -20px;
       z-index: 1;
       transition: visibility .05s, opacity .05s; }
-      /* line 169, ../sass/search/_search.scss */
+      /* line 163, ../sass/search/_search.scss */
       .search .search-bar .search-menu-holder.off {
         visibility: hidden;
         opacity: 0; }
-    /* line 176, ../sass/search/_search.scss */
+    /* line 170, ../sass/search/_search.scss */
     .search .search-bar .menu-icon:hover + div.search-menu-holder {
       visibility: visible; }
-    /* line 179, ../sass/search/_search.scss */
+    /* line 173, ../sass/search/_search.scss */
     .search .search-bar div.search-menu-holder:hover {
       visibility: visible; }
-  /* line 184, ../sass/search/_search.scss */
+  /* line 178, ../sass/search/_search.scss */
   .search .active-filter-display {
     -moz-border-radius: 2px;
     -webkit-border-radius: 2px;
@@ -4486,14 +4525,14 @@ input[type="text"] {
     padding-left: 1.4625em;
     font-size: 0.65em;
     margin-top: 3px; }
-    /* line 199, ../sass/search/_search.scss */
+    /* line 193, ../sass/search/_search.scss */
     .search .active-filter-display .clear-filters-icon {
       opacity: 0.4;
       font-size: 0.8em;
       position: absolute;
       left: 1px;
       cursor: pointer; }
-    /* line 210, ../sass/search/_search.scss */
+    /* line 204, ../sass/search/_search.scss */
     .search .active-filter-display.off {
       visibility: hidden;
       opacity: 0;
@@ -4501,7 +4540,7 @@ input[type="text"] {
       margin: 0;
       padding: 0;
       border: 0; }
-  /* line 220, ../sass/search/_search.scss */
+  /* line 214, ../sass/search/_search.scss */
   .search .search-scroll {
     order: 3;
     margin-top: 4px;
@@ -4510,27 +4549,27 @@ input[type="text"] {
     height: auto;
     max-height: 100%;
     position: relative; }
-    /* line 233, ../sass/search/_search.scss */
+    /* line 227, ../sass/search/_search.scss */
     .search .search-scroll .load-icon {
       position: relative; }
-      /* line 235, ../sass/search/_search.scss */
+      /* line 229, ../sass/search/_search.scss */
       .search .search-scroll .load-icon.loading {
         pointer-events: none;
         margin-left: 6px; }
-        /* line 239, ../sass/search/_search.scss */
+        /* line 233, ../sass/search/_search.scss */
         .search .search-scroll .load-icon.loading .title-label {
           font-style: italic;
           font-size: .9em;
           opacity: 0.5;
           margin-left: 26px;
           line-height: 24px; }
-        /* line 249, ../sass/search/_search.scss */
+        /* line 243, ../sass/search/_search.scss */
         .search .search-scroll .load-icon.loading .wait-spinner {
           margin-left: 6px; }
-      /* line 254, ../sass/search/_search.scss */
+      /* line 248, ../sass/search/_search.scss */
       .search .search-scroll .load-icon:not(.loading) {
         cursor: pointer; }
-    /* line 259, ../sass/search/_search.scss */
+    /* line 253, ../sass/search/_search.scss */
     .search .search-scroll .load-more-button {
       margin-top: 5px 0;
       font-size: 0.8em;
@@ -4879,52 +4918,6 @@ input[type="text"] {
     .status.block .status-indicator.caution {
       color: #ffaa00; }
 
-/*****************************************************************************
- * Open MCT Web, Copyright (c) 2014-2015, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT Web is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT Web includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-/* line 22, ../sass/user-environ/_object-browse.scss */
-.object-browse-bar {
-  overflow: visible;
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  width: auto;
-  height: auto;
-  -moz-box-sizing: border-box;
-  -webkit-box-sizing: border-box;
-  box-sizing: border-box;
-  height: 24px;
-  line-height: 24px;
-  white-space: nowrap; }
-  /* line 30, ../sass/user-environ/_object-browse.scss */
-  .object-browse-bar .left {
-    padding-right: 5px; }
-    /* line 32, ../sass/user-environ/_object-browse.scss */
-    .object-browse-bar .left .l-back {
-      display: inline-block;
-      float: left;
-      margin-right: 10px; }
-
 /*****************************************************************************
  * Open MCT Web, Copyright (c) 2014-2015, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
diff --git a/platform/commonUI/general/res/sass/_flex.scss b/platform/commonUI/general/res/sass/_flex.scss
deleted file mode 100644
index 61e8007676..0000000000
--- a/platform/commonUI/general/res/sass/_flex.scss
+++ /dev/null
@@ -1,37 +0,0 @@
-.l-flex {
-    &.l-flex-justify {
-        justify-content: space-between;
-    }
-    .l-flex-row,
-    &.l-flex-row {
-        display: flex;
-        flex-flow: row nowrap;
-        div, span {
-            //@include tmpBorder();
-        }
-        > div, > span {
-            //flex: 1 1 0;
-        }
-    }
-    .l-flex-max {
-        flex: 1 0 !important;
-    }
-
-    .flex-ignore {
-        display: flex;
-        flex-flow: row nowrap;
-        flex: 0 1 auto;
-    }
-}
-
-// TEMP, move out of here once working
-.object-browse-bar.bar > div.abs {
-    @include test(green);
-}
-
-
-.l-flex-row .title-label {
-    @include test(blue);
-    flex: 1 0 !important;
-}
-
diff --git a/platform/commonUI/general/res/sass/_main.scss b/platform/commonUI/general/res/sass/_main.scss
index eff854790b..347087f24f 100644
--- a/platform/commonUI/general/res/sass/_main.scss
+++ b/platform/commonUI/general/res/sass/_main.scss
@@ -68,7 +68,7 @@
 @import "user-environ/frame";
 @import "user-environ/top-bar";
 @import "user-environ/bottom-bar";
-@import "user-environ/object-browse";
+//@import "user-environ/object-browse";
 @import "user-environ/tool-bar";
 @import "helpers/bubbles";
 @import "helpers/splitter";
diff --git a/platform/commonUI/general/res/sass/_mixins.scss b/platform/commonUI/general/res/sass/_mixins.scss
index bc97b6a521..9625ed96af 100644
--- a/platform/commonUI/general/res/sass/_mixins.scss
+++ b/platform/commonUI/general/res/sass/_mixins.scss
@@ -318,6 +318,16 @@
     }
 }
 
+@mixin webkitProp($name, $val) {
+	#{$name}: #{$val};
+	-webkit-#{$name}: #{$val};
+}
+
+@mixin webkitVal($name, $val) {
+	#{$name}: #{$val};
+	#{$name}: -webkit-#{$val};
+}
+
 @mixin verticalCenter {
     /* This doesn't work on an element inside an element with absolute positioning that has height: auto */
     //position: relative;
diff --git a/platform/commonUI/general/res/sass/controls/_controls.scss b/platform/commonUI/general/res/sass/controls/_controls.scss
index 2e7a0e09d3..4fd66df059 100644
--- a/platform/commonUI/general/res/sass/controls/_controls.scss
+++ b/platform/commonUI/general/res/sass/controls/_controls.scss
@@ -365,12 +365,13 @@ label.checkbox.custom {
 	//@include test();
 	font-size: 1em;
 
-	> .title-label,
-	> .type-icon,
-	> .context-available {
-		//@include tmpBorder(#6666ff);
-		//vertical-align: middle;
-	}
+	//> .title-label,
+	//> .type-icon,
+	//> .context-available {
+	//	//@include tmpBorder(#6666ff);
+	//	//vertical-align: middle;
+	//}
+
 	> .type-icon {
 		font-size: 120%;
 		float: left;
@@ -378,9 +379,14 @@ label.checkbox.custom {
 	}
 
 	.l-elem-wrapper {
-		display: flex;
-		flex-flow: row nowrap;
-		justify-content: flex-start;
+		//@include test(#66f, 0.2);
+		@include webkitProp(justify-content, flex-start);
+		mct-representation {
+			// Holds the context-available item
+			// Must have min-width to make flex work properly
+			// in Safari
+			min-width: 0.7em;
+		}
 	}
 
 	.action {
@@ -388,14 +394,18 @@ label.checkbox.custom {
 	}
 
 	.title-label {
+		//@include test(green, 0.9);
 		@include ellipsize();
 		color: lighten($colorBodyFg, 40%);
+		@include webkitProp(flex, '0 1 auto');
 		padding-right: 0.35em; // For context arrow. Done with em's so pad is relative to the scale of the text.
 		//position: relative;
 	}
 
 	.context-available {
 		font-size: 0.7em;
+		@include webkitProp(flex, '0 0 1');
+		//margin-right: $interiorMargin;
 	}
 
 	@include desktop {
diff --git a/platform/commonUI/general/res/sass/mobile/_layout.scss b/platform/commonUI/general/res/sass/mobile/_layout.scss
index 9a88c64a6a..d202ec0450 100644
--- a/platform/commonUI/general/res/sass/mobile/_layout.scss
+++ b/platform/commonUI/general/res/sass/mobile/_layout.scss
@@ -159,7 +159,7 @@
         }
         .pane.right-repr {
             left: 0 !important;
-            transform: translateX($proporMenuOnly);
+	        @include webkitProp(transform, translateX($proporMenuOnly));
             #content-area {
                 opacity: 0;
             }
diff --git a/platform/commonUI/general/res/sass/search/_search.scss b/platform/commonUI/general/res/sass/search/_search.scss
index e48baba95f..34a323e6ef 100644
--- a/platform/commonUI/general/res/sass/search/_search.scss
+++ b/platform/commonUI/general/res/sass/search/_search.scss
@@ -39,26 +39,20 @@
 	$iconWidth: 20px;
 	$leftMargin: 6px;
 	$rightPadding: 5px;
-
-	//padding-right: $rightPadding;
-	//@include test();
-	display: flex; //block;
-	flex-direction: column;
+	@include webkitVal(display, flex);
+	//display: flex;
+	@include webkitProp(flex-direction, column);
+	//flex-direction: column;
 	height: 100%;
 
 	.search-bar {
-		//$heightAdjust: 4px;
 		$textInputHeight: 19px; // This is equal to the default value, 19px
 		$iconEdgeM: 4px;
 		$iconD: $treeSearchInputBarH - ($iconEdgeM*2);
 		font-size: 0.8em;
-
-		//order: 1;
-
+		max-width: 250px;
 		position: relative;
 		width: 100%;
-		//height: $textInputHeight;
-		//margin-top: $heightAdjust;
 		.search-input,
 		.search-icon {
 		}
diff --git a/platform/commonUI/general/res/sass/user-environ/_layout.scss b/platform/commonUI/general/res/sass/user-environ/_layout.scss
index bcb441237f..04b582d123 100644
--- a/platform/commonUI/general/res/sass/user-environ/_layout.scss
+++ b/platform/commonUI/general/res/sass/user-environ/_layout.scss
@@ -85,14 +85,6 @@
             }
         }
     }
-    &.l-flex {
-        display: flex;
-        flex-flow: row nowrap;
-        .left {
-            //@include test(green);
-            flex: 1 1 0;
-        }
-    }
 }
 
 .user-environ {
@@ -321,6 +313,33 @@
     }
 }
 
+.object-browse-bar {
+	//@include test(blue);
+	@include absPosDefault(0, visible);
+	@include box-sizing(border-box);
+	height: $ueTopBarH;
+	line-height: $ueTopBarH;
+	white-space: nowrap;
+
+	.left {
+		padding-right: $interiorMarginLg * 2;
+		.l-back {
+			display: inline-block;
+			float: left;
+			margin-right: $interiorMarginLg;
+		}
+	}
+}
+
+.l-flex {
+	@include webkitVal('display', 'flex');
+	@include webkitProp('flex-flow', 'row nowrap');
+	.left {
+		//@include test(red);
+		@include webkitProp(flex, '1 1 0');
+	}
+}
+
 .vscroll {
     overflow-y: auto;
 }
diff --git a/platform/commonUI/general/res/sass/user-environ/_object-browse.scss b/platform/commonUI/general/res/sass/user-environ/_object-browse.scss
deleted file mode 100644
index 602a8adeae..0000000000
--- a/platform/commonUI/general/res/sass/user-environ/_object-browse.scss
+++ /dev/null
@@ -1,38 +0,0 @@
-/*****************************************************************************
- * Open MCT Web, Copyright (c) 2014-2015, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT Web is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT Web includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-.object-browse-bar {
-    //@include test(blue);
-    @include absPosDefault(0, visible);
-    @include box-sizing(border-box);
-    height: $ueTopBarH;
-    line-height: $ueTopBarH;
-    white-space: nowrap;
-
-    .left {
-        padding-right: $interiorMargin;
-        .l-back {
-            display: inline-block;
-            float: left;
-            margin-right: $interiorMarginLg;
-        }
-    }
-}
\ No newline at end of file

From 5a991076ea4733b2abcc5322f0620c1d59ade466 Mon Sep 17 00:00:00 2001
From: Charles Hacskaylo <charles.f.hacskaylo@nasa.gov>
Date: Mon, 31 Aug 2015 12:34:34 -0700
Subject: [PATCH 180/209] [Frontend] CSS and markup tweaks to enable flex
 layout

open #93
Layout frame and imagery markup modified;
---
 .../general/res/css/theme-espresso.css        | 178 +++++++++---------
 .../general/res/sass/features/_imagery.scss   |   5 -
 .../res/sass/user-environ/_layout.scss        |   7 +
 .../imagery/res/templates/imagery.html        |   2 +-
 4 files changed, 98 insertions(+), 94 deletions(-)

diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index 87add64e54..46bc99f786 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -121,7 +121,7 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-/* line 5, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 5, ../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 html, body, div, span, applet, object, iframe,
 h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 a, abbr, acronym, address, big, cite, code,
@@ -142,38 +142,38 @@ time, mark, audio, video {
   font-size: 100%;
   vertical-align: baseline; }
 
-/* line 22, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 22, ../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 html {
   line-height: 1; }
 
-/* line 24, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 24, ../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 ol, ul {
   list-style: none; }
 
-/* line 26, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 26, ../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 table {
   border-collapse: collapse;
   border-spacing: 0; }
 
-/* line 28, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 28, ../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 caption, th, td {
   text-align: left;
   font-weight: normal;
   vertical-align: middle; }
 
-/* line 30, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 30, ../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 q, blockquote {
   quotes: none; }
-  /* line 103, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+  /* line 103, ../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
   q:before, q:after, blockquote:before, blockquote:after {
     content: "";
     content: none; }
 
-/* line 32, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 32, ../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 a img {
   border: none; }
 
-/* line 116, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 116, ../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
   display: block; }
 
@@ -562,8 +562,15 @@ mct-container {
     .bar.abs .right .icon.major,
     .btn-menu span.bar.l-click-area .right .icon.major {
       margin-left: 15px; }
+  /* line 89, ../sass/user-environ/_layout.scss */
+  .bar.abs .l-flex .left, .btn-menu span.bar.l-click-area .l-flex .left,
+  .bar.abs .l-flex .right,
+  .btn-menu span.bar.l-click-area .l-flex .right, .bar.abs.l-flex .left, .btn-menu span.bar.l-flex.l-click-area .left,
+  .bar.abs.l-flex .right,
+  .btn-menu span.bar.l-flex.l-click-area .right {
+    width: auto; }
 
-/* line 91, ../sass/user-environ/_layout.scss */
+/* line 98, ../sass/user-environ/_layout.scss */
 .user-environ .browse-area,
 .user-environ .edit-area,
 .user-environ .editor {
@@ -571,23 +578,23 @@ mct-container {
   right: 10px;
   bottom: 35px;
   left: 10px; }
-/* line 102, ../sass/user-environ/_layout.scss */
+/* line 109, ../sass/user-environ/_layout.scss */
 .user-environ .browse-area > .contents,
 .user-environ .edit-area > .contents {
   left: 0;
   right: 0; }
-/* line 108, ../sass/user-environ/_layout.scss */
+/* line 115, ../sass/user-environ/_layout.scss */
 .user-environ .edit-area {
   top: 45px; }
-  /* line 111, ../sass/user-environ/_layout.scss */
+  /* line 118, ../sass/user-environ/_layout.scss */
   .user-environ .edit-area .tool-bar {
     bottom: auto;
     height: 30px;
     line-height: 25px; }
-  /* line 116, ../sass/user-environ/_layout.scss */
+  /* line 123, ../sass/user-environ/_layout.scss */
   .user-environ .edit-area .work-area {
     top: 40px; }
-/* line 121, ../sass/user-environ/_layout.scss */
+/* line 128, ../sass/user-environ/_layout.scss */
 .user-environ .ue-bottom-bar {
   overflow: hidden;
   position: absolute;
@@ -599,20 +606,20 @@ mct-container {
   height: auto;
   top: auto;
   height: 25px; }
-  /* line 126, ../sass/user-environ/_layout.scss */
+  /* line 133, ../sass/user-environ/_layout.scss */
   .user-environ .ue-bottom-bar .status-holder {
     z-index: 1; }
-  /* line 130, ../sass/user-environ/_layout.scss */
+  /* line 137, ../sass/user-environ/_layout.scss */
   .user-environ .ue-bottom-bar .app-logo {
     left: auto;
     width: 105px;
     z-index: 2; }
 
-/* line 138, ../sass/user-environ/_layout.scss */
+/* line 145, ../sass/user-environ/_layout.scss */
 .cols {
   overflow: hidden;
   *zoom: 1; }
-  /* line 140, ../sass/user-environ/_layout.scss */
+  /* line 147, ../sass/user-environ/_layout.scss */
   .cols .col {
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
@@ -623,111 +630,111 @@ mct-container {
     margin-left: 1.5%;
     padding-left: 5px;
     position: relative; }
-    /* line 148, ../sass/user-environ/_layout.scss */
+    /* line 155, ../sass/user-environ/_layout.scss */
     .cols .col:first-child {
       margin-left: 0;
       padding-left: 0; }
-  /* line 155, ../sass/user-environ/_layout.scss */
+  /* line 162, ../sass/user-environ/_layout.scss */
   .cols.cols-2 .col-1 {
     min-width: 250px;
     width: 48.5%; }
-  /* line 161, ../sass/user-environ/_layout.scss */
+  /* line 168, ../sass/user-environ/_layout.scss */
   .cols.cols-2-ff .col-100px {
     width: 100px; }
-  /* line 168, ../sass/user-environ/_layout.scss */
+  /* line 175, ../sass/user-environ/_layout.scss */
   .cols.cols-6 .col-1 {
     min-width: 83.33333px;
     width: 15.16667%; }
-  /* line 174, ../sass/user-environ/_layout.scss */
+  /* line 181, ../sass/user-environ/_layout.scss */
   .cols.cols-16 .col-1 {
     min-width: 31.25px;
     width: 4.75%; }
-  /* line 177, ../sass/user-environ/_layout.scss */
+  /* line 184, ../sass/user-environ/_layout.scss */
   .cols.cols-16 .col-2 {
     min-width: 62.5px;
     width: 11%; }
-  /* line 180, ../sass/user-environ/_layout.scss */
+  /* line 187, ../sass/user-environ/_layout.scss */
   .cols.cols-16 .col-7 {
     min-width: 218.75px;
     width: 42.25%; }
-  /* line 186, ../sass/user-environ/_layout.scss */
+  /* line 193, ../sass/user-environ/_layout.scss */
   .cols.cols-32 .col-2 {
     min-width: 31.25px;
     width: 4.75%; }
-  /* line 189, ../sass/user-environ/_layout.scss */
+  /* line 196, ../sass/user-environ/_layout.scss */
   .cols.cols-32 .col-15 {
     min-width: 234.375px;
     width: 45.375%; }
-  /* line 193, ../sass/user-environ/_layout.scss */
+  /* line 200, ../sass/user-environ/_layout.scss */
   .cols .l-row {
     overflow: hidden;
     *zoom: 1;
     padding: 5px 0; }
 
-/* line 201, ../sass/user-environ/_layout.scss */
+/* line 208, ../sass/user-environ/_layout.scss */
 .browse-mode .split-layout .split-pane-component.pane.left {
   min-width: 150px;
   max-width: 800px;
   width: 25%; }
 
-/* line 214, ../sass/user-environ/_layout.scss */
+/* line 221, ../sass/user-environ/_layout.scss */
 .edit-mode .split-layout .split-pane-component.pane.right .split-pane-component.pane.bottom {
   min-height: 50px;
   max-height: 80%; }
 
-/* line 222, ../sass/user-environ/_layout.scss */
+/* line 229, ../sass/user-environ/_layout.scss */
 .pane {
   position: absolute; }
-  /* line 225, ../sass/user-environ/_layout.scss */
+  /* line 232, ../sass/user-environ/_layout.scss */
   .pane.treeview.left .create-btn-holder {
     bottom: auto;
     top: 0;
     height: 24px; }
-    /* line 228, ../sass/user-environ/_layout.scss */
+    /* line 235, ../sass/user-environ/_layout.scss */
     .pane.treeview.left .create-btn-holder .wrapper.menu-element {
       position: absolute;
       bottom: 5px; }
-  /* line 233, ../sass/user-environ/_layout.scss */
+  /* line 240, ../sass/user-environ/_layout.scss */
   .pane.treeview.left .search-holder {
     top: 34px; }
-  /* line 236, ../sass/user-environ/_layout.scss */
+  /* line 243, ../sass/user-environ/_layout.scss */
   .pane.treeview.left .tree-holder {
     overflow: auto;
     top: 64px; }
-  /* line 243, ../sass/user-environ/_layout.scss */
+  /* line 250, ../sass/user-environ/_layout.scss */
   .pane.items .object-browse-bar .left.abs, .pane.items .object-browse-bar .btn-menu span.left.l-click-area, .btn-menu .pane.items .object-browse-bar span.left.l-click-area,
   .pane.items .object-browse-bar .right.abs,
   .pane.items .object-browse-bar .btn-menu span.right.l-click-area,
   .btn-menu .pane.items .object-browse-bar span.right.l-click-area {
     top: auto; }
-  /* line 254, ../sass/user-environ/_layout.scss */
+  /* line 261, ../sass/user-environ/_layout.scss */
   .pane.items .object-holder {
     top: 34px; }
-  /* line 258, ../sass/user-environ/_layout.scss */
+  /* line 265, ../sass/user-environ/_layout.scss */
   .pane .object-holder {
     overflow: auto; }
 
-/* line 266, ../sass/user-environ/_layout.scss */
+/* line 273, ../sass/user-environ/_layout.scss */
 .split-layout.horizontal > .pane {
   margin-top: 5px; }
-  /* line 269, ../sass/user-environ/_layout.scss */
+  /* line 276, ../sass/user-environ/_layout.scss */
   .split-layout.horizontal > .pane:first-child {
     margin-top: 0; }
-/* line 276, ../sass/user-environ/_layout.scss */
+/* line 283, ../sass/user-environ/_layout.scss */
 .split-layout.vertical > .pane {
   margin-left: 5px; }
-  /* line 279, ../sass/user-environ/_layout.scss */
+  /* line 286, ../sass/user-environ/_layout.scss */
   .split-layout.vertical > .pane > .holder {
     left: 0;
     right: 0; }
-  /* line 283, ../sass/user-environ/_layout.scss */
+  /* line 290, ../sass/user-environ/_layout.scss */
   .split-layout.vertical > .pane:first-child {
     margin-left: 0; }
-    /* line 285, ../sass/user-environ/_layout.scss */
+    /* line 292, ../sass/user-environ/_layout.scss */
     .split-layout.vertical > .pane:first-child .holder {
       right: 3px; }
 
-/* line 294, ../sass/user-environ/_layout.scss */
+/* line 301, ../sass/user-environ/_layout.scss */
 .object-browse-bar .btn,
 .object-browse-bar .t-btn,
 .object-browse-bar .view-switcher,
@@ -741,12 +748,12 @@ mct-container {
   line-height: 200%;
   vertical-align: top; }
 
-/* line 311, ../sass/user-environ/_layout.scss */
+/* line 318, ../sass/user-environ/_layout.scss */
 .object-browse-bar .view-switcher,
 .top-bar .view-switcher {
   margin-right: 20px; }
 
-/* line 316, ../sass/user-environ/_layout.scss */
+/* line 323, ../sass/user-environ/_layout.scss */
 .object-browse-bar {
   overflow: visible;
   position: absolute;
@@ -762,27 +769,27 @@ mct-container {
   height: 24px;
   line-height: 24px;
   white-space: nowrap; }
-  /* line 324, ../sass/user-environ/_layout.scss */
+  /* line 331, ../sass/user-environ/_layout.scss */
   .object-browse-bar .left {
     padding-right: 20px; }
-    /* line 326, ../sass/user-environ/_layout.scss */
+    /* line 333, ../sass/user-environ/_layout.scss */
     .object-browse-bar .left .l-back {
       display: inline-block;
       float: left;
       margin-right: 10px; }
 
-/* line 334, ../sass/user-environ/_layout.scss */
+/* line 341, ../sass/user-environ/_layout.scss */
 .l-flex {
   display: flex;
   display: -webkit-flex;
   flex-flow: row nowrap;
   -webkit-flex-flow: row nowrap; }
-  /* line 337, ../sass/user-environ/_layout.scss */
+  /* line 344, ../sass/user-environ/_layout.scss */
   .l-flex .left {
     flex: 1 1 0;
     -webkit-flex: 1 1 0; }
 
-/* line 343, ../sass/user-environ/_layout.scss */
+/* line 350, ../sass/user-environ/_layout.scss */
 .vscroll {
   overflow-y: auto; }
 
@@ -3320,8 +3327,6 @@ label.checkbox.custom {
 .l-image-main-wrapper,
 .l-image-main,
 .l-image-main-controlbar,
-.l-image-main-controlbar .left,
-.l-image-main-controlbar .right,
 .l-image-thumbs-wrapper {
   overflow: false;
   position: absolute;
@@ -3333,82 +3338,79 @@ label.checkbox.custom {
   height: auto; }
 
 /*************************************** MAIN LAYOUT */
-/* line 11, ../sass/features/_imagery.scss */
+/* line 9, ../sass/features/_imagery.scss */
 .l-image-main-wrapper {
   min-height: 100px;
   min-width: 150px; }
-  /* line 18, ../sass/features/_imagery.scss */
+  /* line 16, ../sass/features/_imagery.scss */
   .l-image-main-wrapper .l-image-main {
     background-color: rgba(255, 255, 255, 0.1);
     bottom: 27px; }
-  /* line 22, ../sass/features/_imagery.scss */
+  /* line 20, ../sass/features/_imagery.scss */
   .l-image-main-wrapper .l-image-main-controlbar {
     top: auto;
     height: 22px; }
 
-/* line 28, ../sass/features/_imagery.scss */
+/* line 26, ../sass/features/_imagery.scss */
 .l-image-thumbs-wrapper {
   top: auto;
   height: 168px; }
 
-/* line 34, ../sass/features/_imagery.scss */
+/* line 32, ../sass/features/_imagery.scss */
 .l-date,
 .l-time,
 .l-timezone {
   display: inline-block; }
 
 /*************************************** MAIN IMAGE */
-/* line 42, ../sass/features/_imagery.scss */
+/* line 40, ../sass/features/_imagery.scss */
 .l-image-main,
 .l-image-thumb-item .l-thumb {
   background-size: contain;
   background-position: center;
   background-repeat: no-repeat; }
 
-/* line 53, ../sass/features/_imagery.scss */
+/* line 51, ../sass/features/_imagery.scss */
 .l-image-main-controlbar {
   font-size: 0.8em;
   line-height: 22px; }
-  /* line 57, ../sass/features/_imagery.scss */
+  /* line 55, ../sass/features/_imagery.scss */
   .l-image-main-controlbar .left, .l-image-main-controlbar .right {
     direction: rtl;
     overflow: hidden; }
-  /* line 61, ../sass/features/_imagery.scss */
+  /* line 59, ../sass/features/_imagery.scss */
   .l-image-main-controlbar .left {
-    text-align: left;
-    width: 75% !important; }
-  /* line 66, ../sass/features/_imagery.scss */
+    text-align: left; }
+  /* line 63, ../sass/features/_imagery.scss */
   .l-image-main-controlbar .right {
-    min-width: 40px;
-    width: 25% !important;
     z-index: 2; }
-  /* line 72, ../sass/features/_imagery.scss */
+  /* line 67, ../sass/features/_imagery.scss */
   .l-image-main-controlbar .l-date,
   .l-image-main-controlbar .l-time {
     color: #fff; }
-  /* line 76, ../sass/features/_imagery.scss */
+  /* line 71, ../sass/features/_imagery.scss */
   .l-image-main-controlbar .l-mag {
     direction: ltr;
     display: inline-block; }
-    /* line 80, ../sass/features/_imagery.scss */
+    /* line 75, ../sass/features/_imagery.scss */
     .l-image-main-controlbar .l-mag:before {
       content: "\000049"; }
-  /* line 84, ../sass/features/_imagery.scss */
+  /* line 79, ../sass/features/_imagery.scss */
   .l-image-main-controlbar .s-mag {
     color: #666666; }
-  /* line 87, ../sass/features/_imagery.scss */
+  /* line 82, ../sass/features/_imagery.scss */
   .l-image-main-controlbar .l-btn.show-thumbs {
     display: none; }
 
-/* line 92, ../sass/features/_imagery.scss */
+/* line 87, ../sass/features/_imagery.scss */
 .s-image-main {
   border: 1px solid transparent; }
-  /* line 94, ../sass/features/_imagery.scss */
+  /* line 89, ../sass/features/_imagery.scss */
   .s-image-main.paused {
     border-color: #c56f01; }
 
 /*************************************** THUMBS */
-/* line 101, ../sass/features/_imagery.scss */
+/* line 96, ../sass/features/_imagery.scss */
 .l-image-thumbs-wrapper {
   direction: rtl;
   overflow-x: auto;
@@ -3417,7 +3419,7 @@ label.checkbox.custom {
   white-space: nowrap;
   z-index: 70; }
 
-/* line 111, ../sass/features/_imagery.scss */
+/* line 106, ../sass/features/_imagery.scss */
 .l-image-thumb-item {
   -moz-transition: background-color 0.25s;
   -o-transition: background-color 0.25s;
@@ -3436,30 +3438,30 @@ label.checkbox.custom {
   text-align: left;
   width: 122px;
   white-space: normal; }
-  /* line 116, ../sass/features/_imagery.scss */
+  /* line 111, ../sass/features/_imagery.scss */
   .l-image-thumb-item .l-thumb,
   .l-image-thumb-item .l-date,
   .l-image-thumb-item .l-time {
     display: inline-block; }
-  /* line 121, ../sass/features/_imagery.scss */
+  /* line 116, ../sass/features/_imagery.scss */
   .l-image-thumb-item .l-date,
   .l-image-thumb-item .l-time {
     padding: 2px 3px; }
-  /* line 133, ../sass/features/_imagery.scss */
+  /* line 128, ../sass/features/_imagery.scss */
   .l-image-thumb-item:hover {
     background: rgba(255, 255, 255, 0.2); }
-    /* line 135, ../sass/features/_imagery.scss */
+    /* line 130, ../sass/features/_imagery.scss */
     .l-image-thumb-item:hover .l-date,
     .l-image-thumb-item:hover .l-time {
       color: #fff; }
-  /* line 140, ../sass/features/_imagery.scss */
+  /* line 135, ../sass/features/_imagery.scss */
   .l-image-thumb-item.selected {
     background: #005177; }
-    /* line 142, ../sass/features/_imagery.scss */
+    /* line 137, ../sass/features/_imagery.scss */
     .l-image-thumb-item.selected .l-date,
     .l-image-thumb-item.selected .l-time {
       color: #fff; }
-  /* line 147, ../sass/features/_imagery.scss */
+  /* line 142, ../sass/features/_imagery.scss */
   .l-image-thumb-item .l-thumb {
     background-color: rgba(255, 255, 255, 0.1);
     height: 120px;
@@ -3467,13 +3469,13 @@ label.checkbox.custom {
     margin-top: 0; }
 
 /*************************************** WHEN IN FRAME */
-/* line 157, ../sass/features/_imagery.scss */
+/* line 152, ../sass/features/_imagery.scss */
 .frame .t-imagery .l-image-main-wrapper {
   bottom: 0; }
-  /* line 159, ../sass/features/_imagery.scss */
+  /* line 154, ../sass/features/_imagery.scss */
   .frame .t-imagery .l-image-main-wrapper .l-image-main-controlbar {
     font-size: 0.7em; }
-/* line 168, ../sass/features/_imagery.scss */
+/* line 163, ../sass/features/_imagery.scss */
 .frame .t-imagery .l-image-thumbs-wrapper {
   display: none; }
 
diff --git a/platform/commonUI/general/res/sass/features/_imagery.scss b/platform/commonUI/general/res/sass/features/_imagery.scss
index fa0b092fbf..c86556fd04 100644
--- a/platform/commonUI/general/res/sass/features/_imagery.scss
+++ b/platform/commonUI/general/res/sass/features/_imagery.scss
@@ -1,8 +1,6 @@
 .l-image-main-wrapper,
 .l-image-main,
 .l-image-main-controlbar,
-.l-image-main-controlbar .left,
-.l-image-main-controlbar .right,
 .l-image-thumbs-wrapper {
 	@include absPosDefault(0, false);
 }
@@ -61,12 +59,9 @@
 	.left {
 		//@include test(red);
 		text-align: left;
-		width: 75% !important;
 	}
 	.right {
 		//@include test(green);
-		min-width: 40px;
-		width: 25% !important;
 		z-index: 2;
 	}
 	.l-date,
diff --git a/platform/commonUI/general/res/sass/user-environ/_layout.scss b/platform/commonUI/general/res/sass/user-environ/_layout.scss
index 04b582d123..d5e89c27fb 100644
--- a/platform/commonUI/general/res/sass/user-environ/_layout.scss
+++ b/platform/commonUI/general/res/sass/user-environ/_layout.scss
@@ -84,6 +84,13 @@
                 margin-left: $interiorMargin * 3;
             }
         }
+        .l-flex,
+        &.l-flex {
+            .left,
+            .right {
+                width: auto;
+            }
+        }
     }
 }
 
diff --git a/platform/features/imagery/res/templates/imagery.html b/platform/features/imagery/res/templates/imagery.html
index 80f0813b2b..2b1f8f969e 100644
--- a/platform/features/imagery/res/templates/imagery.html
+++ b/platform/features/imagery/res/templates/imagery.html
@@ -33,7 +33,7 @@
             >
         </div>
 
-        <div class="l-image-main-controlbar bar">
+        <div class="l-image-main-controlbar l-flex bar">
             <div class="left">
                 <a
                     class="t-btn l-btn s-btn s-icon-btn s-very-subtle show-thumbs sm"

From 90f62b92a50864047c4c12c96e6187f23828cb49 Mon Sep 17 00:00:00 2001
From: Charles Hacskaylo <charles.f.hacskaylo@nasa.gov>
Date: Mon, 31 Aug 2015 12:54:52 -0700
Subject: [PATCH 181/209] [Frontend] Super-minor cleanups in .scss files

open #93
---
 platform/commonUI/general/res/css/theme-espresso.css          | 1 -
 platform/commonUI/general/res/sass/_main.scss                 | 1 -
 .../commonUI/general/res/sass/themes/_theme-espresso.scss     | 4 +++-
 platform/commonUI/general/res/sass/tree.scss                  | 2 --
 4 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index 46bc99f786..38c9695ec6 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -99,7 +99,6 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 /* CONSTANTS */
-/*****************************************************************************
 /*****************************************************************************
  * Open MCT Web, Copyright (c) 2014-2015, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
diff --git a/platform/commonUI/general/res/sass/_main.scss b/platform/commonUI/general/res/sass/_main.scss
index 347087f24f..43947dcc51 100644
--- a/platform/commonUI/general/res/sass/_main.scss
+++ b/platform/commonUI/general/res/sass/_main.scss
@@ -1,4 +1,3 @@
-/*****************************************************************************
 /*****************************************************************************
  * Open MCT Web, Copyright (c) 2014-2015, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
diff --git a/platform/commonUI/general/res/sass/themes/_theme-espresso.scss b/platform/commonUI/general/res/sass/themes/_theme-espresso.scss
index d165be8929..edda0a1489 100644
--- a/platform/commonUI/general/res/sass/themes/_theme-espresso.scss
+++ b/platform/commonUI/general/res/sass/themes/_theme-espresso.scss
@@ -19,4 +19,6 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-/* CONSTANTS */
\ No newline at end of file
+/* CONSTANTS */
+//$colorBodyBg: #fff;
+//$colorBodyFg: #666;
\ No newline at end of file
diff --git a/platform/commonUI/general/res/sass/tree.scss b/platform/commonUI/general/res/sass/tree.scss
index 5a28f94641..881b105a7a 100644
--- a/platform/commonUI/general/res/sass/tree.scss
+++ b/platform/commonUI/general/res/sass/tree.scss
@@ -21,8 +21,6 @@
  *****************************************************************************/
 @import "compass";
 @import "compass/css3";
-@import "compass/css3/border-radius";
-@import "compass/css3/opacity";
 @import "compass/utilities";
 
 @import "constants";

From 7ffbc9ad2faae29b906e7a73b638b52839968898 Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Mon, 31 Aug 2015 13:37:22 -0700
Subject: [PATCH 182/209] [Remove Action] Check

Added check for traverseObject
context because prior to this,
was not checked.
---
 platform/commonUI/edit/src/actions/RemoveAction.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/platform/commonUI/edit/src/actions/RemoveAction.js b/platform/commonUI/edit/src/actions/RemoveAction.js
index 2d8e224491..477a7e14a0 100644
--- a/platform/commonUI/edit/src/actions/RemoveAction.js
+++ b/platform/commonUI/edit/src/actions/RemoveAction.js
@@ -93,7 +93,7 @@ define(
                 var traverseObject = (navigationService).getNavigation();
                 
                 // Stop when object is not defined (above ROOT)
-                while (traverseObject) {
+                while (traverseObject && traverseObject.getCapability('context')) {
                     
                     // If object currently traversed to is object being removed
                     // navigate to parent of current object and then exit loop

From d981e7bb1d77dad6d4a4cb0cdbf4159606dd0b5a Mon Sep 17 00:00:00 2001
From: Victor Woeltjen <victor.woeltjen@nasa.gov>
Date: Tue, 15 Sep 2015 12:06:35 -0700
Subject: [PATCH 183/209] [Browse] Separate out back-arrow behavior

Supports integration of changes for mobile, nasa/openmct#95
---
 platform/commonUI/browse/bundle.json          |  20 ++-
 .../browse/res/templates/back-arrow.html      |   7 +-
 .../browse/res/templates/browse-object.html   |   4 +-
 .../browse/src/BackArrowController.js         |  64 +++++++++
 .../commonUI/browse/src/BrowseController.js   |  85 +-----------
 .../browse/test/BrowseControllerSpec.js       | 130 ++----------------
 6 files changed, 100 insertions(+), 210 deletions(-)
 create mode 100644 platform/commonUI/browse/src/BackArrowController.js

diff --git a/platform/commonUI/browse/bundle.json b/platform/commonUI/browse/bundle.json
index c7570b7fcd..b5d6b47678 100644
--- a/platform/commonUI/browse/bundle.json
+++ b/platform/commonUI/browse/bundle.json
@@ -16,7 +16,14 @@
             {
                 "key": "BrowseController",
                 "implementation": "BrowseController.js",
-                "depends": [ "$scope", "$route", "$location", "objectService", "navigationService", "urlService" ]
+                "depends": [
+                    "$scope",
+                    "$route",
+                    "$location",
+                    "objectService",
+                    "navigationService",
+                    "urlService"
+                ]
             },
             {
                 "key": "BrowseObjectController",
@@ -25,17 +32,22 @@
             },
             {
                 "key": "CreateMenuController",
-                "implementation": "creation/CreateMenuController",
+                "implementation": "creation/CreateMenuController.js",
                 "depends": [ "$scope" ]
             },
             {
                 "key": "LocatorController",
-                "implementation": "creation/LocatorController",
+                "implementation": "creation/LocatorController.js",
                 "depends": [ "$scope", "$timeout" ]
             },
             {
                 "key": "MenuArrowController",
-                "implementation": "MenuArrowController",
+                "implementation": "MenuArrowController.js",
+                "depends": [ "$scope" ]
+            },
+            {
+                "key": "BackArrowController",
+                "implementation": "BackArrowController.js",
                 "depends": [ "$scope" ]
             }
         ],
diff --git a/platform/commonUI/browse/res/templates/back-arrow.html b/platform/commonUI/browse/res/templates/back-arrow.html
index 3ed0ec061b..6085b91249 100644
--- a/platform/commonUI/browse/res/templates/back-arrow.html
+++ b/platform/commonUI/browse/res/templates/back-arrow.html
@@ -21,8 +21,7 @@
 -->
 
 <!-- Back Arrow Icon used on mobile-->
-<a ng-controller="BrowseController"
+<a ng-controller="BackArrowController"
       class='type-icon icon ui-symbol s-back'
-      ng-class="checkRoot(); atRoot ? 'hidden' : ''"
-      ng-click='backArrow()'>{
-</a>
+      ng-hide="atRoot"
+      ng-click='navigateToParent()'>{</a>
diff --git a/platform/commonUI/browse/res/templates/browse-object.html b/platform/commonUI/browse/res/templates/browse-object.html
index 80bb313d22..ebe53b368f 100644
--- a/platform/commonUI/browse/res/templates/browse-object.html
+++ b/platform/commonUI/browse/res/templates/browse-object.html
@@ -22,7 +22,9 @@
 <span ng-controller="BrowseObjectController">
     <div class="object-browse-bar bar l-flex">
         <div class="items-select left">
-            <mct-representation key="'back-arrow'" class="l-back"></mct-representation>
+            <mct-representation key="'back-arrow'"
+                                mct-object="domainObject"
+                                class="l-back"></mct-representation>
             <mct-representation key="'object-header'" mct-object="domainObject">
             </mct-representation>
         </div>
diff --git a/platform/commonUI/browse/src/BackArrowController.js b/platform/commonUI/browse/src/BackArrowController.js
new file mode 100644
index 0000000000..b48740d288
--- /dev/null
+++ b/platform/commonUI/browse/src/BackArrowController.js
@@ -0,0 +1,64 @@
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+/*global define*/
+define(
+    function () {
+        'use strict';
+
+        function BackArrowController($scope) {
+            function navigateTo(parentObject) {
+                var action =
+                    parentObject && parentObject.getCapability('action');
+                if (action) {
+                    action.perform('navigate');
+                }
+            }
+
+            function navigateToParent() {
+                var domainObject = $scope.domainObject,
+                    context =
+                        domainObject && domainObject.getCapability('context');
+                if (context) {
+                    navigateTo(context.getParent());
+                }
+            }
+
+            function checkRoot(domainObject) {
+                var context =
+                    domainObject && domainObject.getCapability('context');
+
+                // We don't want to show the arrow if there is no context
+                // for this object, or if there is not a meaningful parent
+                // we can go back to.
+                $scope.atRoot = (!context) || (context.getPath().length < 3);
+            }
+
+            $scope.navigateToParent = navigateToParent;
+            $scope.$watch("domainObject", checkRoot);
+        }
+
+        return BackArrowController;
+
+
+    }
+);
diff --git a/platform/commonUI/browse/src/BrowseController.js b/platform/commonUI/browse/src/BrowseController.js
index 4e97ee6f87..934a6a9f5d 100644
--- a/platform/commonUI/browse/src/BrowseController.js
+++ b/platform/commonUI/browse/src/BrowseController.js
@@ -55,7 +55,7 @@ define(
 
                 unlisten = $scope.$on('$locationChangeSuccess', function () {
                     // Checks path to make sure /browse/ is at front
-                    // if so, change $route.current                    
+                    // if so, change $route.current
                     if ($location.path().indexOf("/browse/") === 0) {
                         $route.current = priorRoute;
                     }
@@ -127,78 +127,6 @@ define(
                     navigateTo(domainObject);
                 }
             }
-            
-            // Uses the current navigation to get the 
-            // current ContextCapability, then the
-            // parent is gotten from that. If the parent
-            // is not the root, then user is navigated to
-            // parent
-            function navigateToParent() {
-                var context = navigationService.getNavigation().getCapability('context'),
-                    parentContext,
-                    parent,
-                    grandparentId;
-                
-                // Checks if the current object has a context
-                if (context) {
-                    
-                    // Sets the parent and the parent context
-                    // which is checked
-                    parent = context.getParent();
-                    parentContext = parent.getCapability('context');
-                    
-                    if ((parent.getId() !== ROOT_ID) && parentContext) {
-                        // Gets the grandparent id
-                        grandparentId = parentContext.getParent().getId();
-                        
-                        // Navigates to the parent
-                        navigateTo(parent);
-                        
-                        // Checks after navigation if the user is located at the 
-                        // root (grandparent of original selected object, after
-                        // navigation, user is at parent of original object and
-                        // child of grandparent)
-                        if (grandparentId && grandparentId !== ROOT_ID) {
-                            $scope.atRoot = false;
-                            return;
-                        }
-                        
-                        // Set at root if no grandparent exists and
-                        // if grandparent is ROOT, after navigation
-                        $scope.atRoot = true;
-                    }
-                }
-            }
-            
-            function checkRoot() {
-                var context = navigationService.getNavigation().getCapability('context'),
-                    parentContext,
-                    parent,
-                    grandparent;
-                
-                // Checks if the current object has a context
-                if (context) {
-                    parent = context.getParent();
-                    parentContext = parent.getCapability('context');
-                    if ((parent.getId() !== ROOT_ID) && parentContext) {
-                        grandparent = parentContext.getParent();
-                        
-                        // Checks if the grandparent exists
-                        // if it does not exist (for example in search),
-                        // than do not show the back button
-                        if (grandparent) {
-                            $scope.atRoot = false;
-                            return;
-                        }
-                    }
-                }
-                
-                // In any other situation where the context or parent
-                // context does not exist or the user is at ROOT, than
-                // hide the back arrow
-                $scope.atRoot = true;
-               
-            }
 
             // Load the root object, put it in the scope.
             // Also, load its immediate children, and (possibly)
@@ -213,13 +141,13 @@ define(
             $scope.treeModel = {
                 selectedObject: navigationService.getNavigation()
             };
-            
+
             // SlideMenu boolean used to hide and show
             // tree menu
             $scope.treeSlide = function () {
                 $scope.treeClass = !$scope.treeClass;
             };
-            
+
             // Listen for changes in navigation state.
             navigationService.addListener(setNavigation);
 
@@ -230,17 +158,12 @@ define(
             $scope.$on("$destroy", function () {
                 navigationService.removeListener(setNavigation);
             });
-            
+
             // If the user has selected an object (and is portrait
             // on a phone), then hide the tree menu
             $scope.$on("select-obj", function () {
                 $scope.treeSlide();
             });
-            
-            $scope.backArrow = navigateToParent;
-            
-            $scope.checkRoot = checkRoot;
-
         }
 
         return BrowseController;
diff --git a/platform/commonUI/browse/test/BrowseControllerSpec.js b/platform/commonUI/browse/test/BrowseControllerSpec.js
index e5e54e32d6..be215bebe4 100644
--- a/platform/commonUI/browse/test/BrowseControllerSpec.js
+++ b/platform/commonUI/browse/test/BrowseControllerSpec.js
@@ -91,7 +91,7 @@ define(
                     "nextObject",
                     [ "getId", "getCapability", "getModel", "useCapability" ]
                 );
-                
+
 
                 mockParentContext = jasmine.createSpyObj('context', ['getParent']);
                 mockParent  = jasmine.createSpyObj(
@@ -159,7 +159,7 @@ define(
                 );
                 expect(mockScope.navigatedObject).toEqual(mockDomainObject);
             });
-            
+
             // Mocks the tree slide call that
             // lets the html code know if the
             // tree menu is open.
@@ -168,7 +168,7 @@ define(
                     "select-obj",
                     jasmine.any(Function)
                 );
-                
+
                 mockScope.$on.calls[1].args[1]();
             });
 
@@ -177,7 +177,7 @@ define(
                     "$destroy",
                     jasmine.any(Function)
                 );
-                
+
                 mockScope.$on.calls[0].args[1]();
                 // Should remove the listener it added earlier
                 expect(mockNavigationService.removeListener).toHaveBeenCalledWith(
@@ -249,132 +249,22 @@ define(
                 mockNavigationService.addListener.mostRecentCall.args[0](
                     mockNextObject
                 );
-                
+
                 // Allows the path index to be checked
-                // prior to setting $route.current                
+                // prior to setting $route.current
                 mockLocation.path.andReturn("/browse/");
-                
+
                 // Exercise the Angular workaround
                 mockScope.$on.mostRecentCall.args[1]();
                 expect(mockUnlisten).toHaveBeenCalled();
-                
-                // location.path to be called with the urlService's 
+
+                // location.path to be called with the urlService's
                 // urlFor function with the next domainObject and mode
                 expect(mockLocation.path).toHaveBeenCalledWith(
                     mockUrlService.urlForLocation(mockMode, mockNextObject)
                 );
             });
-            
-            it("checks if the user is current navigated to the root", function () {
-                var mockContext = jasmine.createSpyObj('context', ['getParent']);
-                
-                mockRoute.current.params.ids = "ROOT/mine";
-                mockParent.getId.andReturn("ROOT");
-                
-                mockDomainObject.getCapability.andCallFake(function (c) {
-                    return c === 'context' && mockContext;
-                });
-                
-                mockNavigationService.getNavigation.andReturn(mockDomainObject);
-                mockContext.getParent.andReturn(mockParent);
-                mockParent.getCapability.andCallFake(function (c) {
-                    return c === 'context' && mockParentContext;
-                });
-                mockParentContext.getParent.andReturn(mockGrandparent);
-                
-                controller = new BrowseController(
-                    mockScope,
-                    mockRoute,
-                    mockLocation,
-                    mockObjectService,
-                    mockNavigationService
-                );
-                
-                mockScope.checkRoot();
-                
-                mockRoute.current.params.ids = "mine/junk";
-                mockParent.getId.andReturn("mine");
-                
-                controller = new BrowseController(
-                    mockScope,
-                    mockRoute,
-                    mockLocation,
-                    mockObjectService,
-                    mockNavigationService
-                );
-                
-                mockScope.checkRoot();
-                
-                mockDomainObject.getCapability.andReturn(undefined);
-                mockNavigationService.getNavigation.andReturn(mockDomainObject);
-                
-                controller = new BrowseController(
-                    mockScope,
-                    mockRoute,
-                    mockLocation,
-                    mockObjectService,
-                    mockNavigationService
-                );
-                
-                mockScope.checkRoot();
-            });
-            
-            // Mocks the back arrow call that
-            // lets the html code know the back
-            // arrow navigation needs to be done
-            it("calls the backArrow function", function () {
-                var mockContext = jasmine.createSpyObj('context', ['getParent']);
-                
-                mockRoute.current.params.ids = "mine/junk";
-                mockParent.getId.andReturn("mine");
-                
-                mockDomainObject.getCapability.andCallFake(function (c) {
-                    return c === 'context' && mockContext;
-                });
-                
-                mockNavigationService.getNavigation.andReturn(mockDomainObject);
-                mockContext.getParent.andReturn(mockParent);
-                mockParent.getCapability.andCallFake(function (c) {
-                    return c === 'context' && mockParentContext;
-                });
-                mockParentContext.getParent.andReturn(mockGrandparent);
-                
-                controller = new BrowseController(
-                    mockScope,
-                    mockRoute,
-                    mockLocation,
-                    mockObjectService,
-                    mockNavigationService
-                );
-                
-                mockScope.backArrow();
-                
-                mockRoute.current.params.ids = "mine/lessjunk/morejunk";
-                mockGrandparent.getId.andReturn("mine");
-                
-                controller = new BrowseController(
-                    mockScope,
-                    mockRoute,
-                    mockLocation,
-                    mockObjectService,
-                    mockNavigationService
-                );
-                
-                mockScope.backArrow();
-                
-                mockRoute.current.params.ids = "ROOT/mine";
-                mockParent.getId.andReturn("ROOT");
-                
-                controller = new BrowseController(
-                    mockScope,
-                    mockRoute,
-                    mockLocation,
-                    mockObjectService,
-                    mockNavigationService
-                );
-                
-                mockScope.backArrow();
-            });
+
         });
     }
 );

From ac48039b90ca28516f72f86fd34f885bacf9fa89 Mon Sep 17 00:00:00 2001
From: Victor Woeltjen <victor.woeltjen@nasa.gov>
Date: Thu, 17 Sep 2015 16:40:18 -0700
Subject: [PATCH 184/209] [Mobile] Create empty bundle for mobile

---
 platform/mobile/bundle.json | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 platform/mobile/bundle.json

diff --git a/platform/mobile/bundle.json b/platform/mobile/bundle.json
new file mode 100644
index 0000000000..05df441424
--- /dev/null
+++ b/platform/mobile/bundle.json
@@ -0,0 +1,5 @@
+{
+    "extensions": {
+
+    }
+}

From 2090b1a95899ab68b8afd8293cf6ab4400906f14 Mon Sep 17 00:00:00 2001
From: Victor Woeltjen <victor.woeltjen@nasa.gov>
Date: Thu, 17 Sep 2015 17:03:35 -0700
Subject: [PATCH 185/209] [Browse] Separate tree expand/collapser

---
 platform/commonUI/browse/bundle.json          |  4 ++
 .../commonUI/browse/res/templates/browse.html | 43 ++++++++-------
 .../commonUI/browse/src/BrowseController.js   | 12 ----
 .../browse/src/BrowseTreeController.js        | 55 +++++++++++++++++++
 4 files changed, 82 insertions(+), 32 deletions(-)
 create mode 100644 platform/commonUI/browse/src/BrowseTreeController.js

diff --git a/platform/commonUI/browse/bundle.json b/platform/commonUI/browse/bundle.json
index b5d6b47678..0f63130f86 100644
--- a/platform/commonUI/browse/bundle.json
+++ b/platform/commonUI/browse/bundle.json
@@ -25,6 +25,10 @@
                     "urlService"
                 ]
             },
+            {
+                "key": "BrowseTreeController",
+                "implementation": "BrowseTreeController.js"
+            },
             {
                 "key": "BrowseObjectController",
                 "implementation": "BrowseObjectController.js",
diff --git a/platform/commonUI/browse/res/templates/browse.html b/platform/commonUI/browse/res/templates/browse.html
index dd97bbea3f..8ba06c122f 100644
--- a/platform/commonUI/browse/res/templates/browse.html
+++ b/platform/commonUI/browse/res/templates/browse.html
@@ -22,27 +22,29 @@
 
 <div class="abs holder-all browse-mode" ng-controller="BrowseController">
     <mct-include key="'topbar-browse'"></mct-include>
-    <div class="holder browse-area s-browse-area abs browse-wrapper" ng-class="treeClass ? 'browse-showtree' : 'browse-hidetree'">
+    <div class="holder browse-area s-browse-area abs browse-wrapper"
+         ng-controller="BrowseTreeController as tree"
+         ng-class="tree.visible() ? 'browse-showtree' : 'browse-hidetree'">
         <mct-split-pane class='contents abs' anchor='left'>
             <div class='split-pane-component treeview pane left'>
-	            <div class="holder abs l-mobile">
-	                <mct-representation key="'create-button'" mct-object="navigatedObject">
-	                </mct-representation>
-	                <div class='holder search-holder abs'
-	                     ng-class="{active: treeModel.search}">
-	                    <mct-representation key="'search'"
-	                                 mct-object="domainObject"
-	                                 ng-model="treeModel">
-	                    </mct-representation>
-	                </div>
-	                <div class='tree-holder abs mobile-tree-holder'
-	                     ng-hide="treeModel.search">
-	                    <mct-representation key="'tree'"
-	                                        mct-object="domainObject"
-	                                        ng-model="treeModel">
-	                    </mct-representation>
-	                </div>
-	            </div>
+                <div class="holder abs l-mobile">
+                    <mct-representation key="'create-button'" mct-object="navigatedObject">
+                    </mct-representation>
+                    <div class='holder search-holder abs'
+                         ng-class="{active: treeModel.search}">
+                        <mct-representation key="'search'"
+                                     mct-object="domainObject"
+                                     ng-model="treeModel">
+                        </mct-representation>
+                    </div>
+                    <div class='tree-holder abs mobile-tree-holder'
+                         ng-hide="treeModel.search">
+                        <mct-representation key="'tree'"
+                                            mct-object="domainObject"
+                                            ng-model="treeModel">
+                        </mct-representation>
+                    </div>
+                </div>
             </div>
 
             <mct-splitter class="mobile-hide"></mct-splitter>
@@ -52,7 +54,8 @@
                     <mct-representation mct-object="navigatedObject" key="'browse-object'">
                     </mct-representation>
                 </div>
-                <div class="key-properties ui-symbol icon mobile-menu-icon desktop-hide" ng-click="treeSlide()">m</div>
+                <div class="key-properties ui-symbol icon mobile-menu-icon desktop-hide"
+                     ng-click="tree.toggle()">m</div>
             </div>
         </mct-split-pane>
     </div>
diff --git a/platform/commonUI/browse/src/BrowseController.js b/platform/commonUI/browse/src/BrowseController.js
index 934a6a9f5d..9f6ca3e077 100644
--- a/platform/commonUI/browse/src/BrowseController.js
+++ b/platform/commonUI/browse/src/BrowseController.js
@@ -142,12 +142,6 @@ define(
                 selectedObject: navigationService.getNavigation()
             };
 
-            // SlideMenu boolean used to hide and show
-            // tree menu
-            $scope.treeSlide = function () {
-                $scope.treeClass = !$scope.treeClass;
-            };
-
             // Listen for changes in navigation state.
             navigationService.addListener(setNavigation);
 
@@ -158,12 +152,6 @@ define(
             $scope.$on("$destroy", function () {
                 navigationService.removeListener(setNavigation);
             });
-
-            // If the user has selected an object (and is portrait
-            // on a phone), then hide the tree menu
-            $scope.$on("select-obj", function () {
-                $scope.treeSlide();
-            });
         }
 
         return BrowseController;
diff --git a/platform/commonUI/browse/src/BrowseTreeController.js b/platform/commonUI/browse/src/BrowseTreeController.js
new file mode 100644
index 0000000000..882d563385
--- /dev/null
+++ b/platform/commonUI/browse/src/BrowseTreeController.js
@@ -0,0 +1,55 @@
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+/*global define,Promise*/
+
+/**
+ * This bundle implements Browse mode.
+ * @namespace platform/commonUI/browse
+ */
+define(
+    [],
+    function () {
+        "use strict";
+
+        function BrowseTreeController() {
+            this.state = true;
+        }
+
+        BrowseTreeController.prototype.toggle = function () {
+            this.state = !this.state;
+        };
+
+        BrowseTreeController.prototype.hide = function () {
+            this.state = false;
+        };
+
+        BrowseTreeController.prototype.show = function () {
+            this.state = true;
+        };
+
+        BrowseTreeController.prototype.visible = function () {
+            return this.state;
+        };
+
+        return BrowseTreeController;
+    }
+);

From 19500c2704b0cd438c98fb23ba96f23203e5cd7b Mon Sep 17 00:00:00 2001
From: Victor Woeltjen <victor.woeltjen@nasa.gov>
Date: Thu, 17 Sep 2015 17:42:23 -0700
Subject: [PATCH 186/209] [Mobile] Restore browse controller from master

---
 .../commonUI/browse/src/BrowseController.js   |  4 +-
 .../browse/test/BrowseControllerSpec.js       | 41 ++++---------------
 2 files changed, 10 insertions(+), 35 deletions(-)

diff --git a/platform/commonUI/browse/src/BrowseController.js b/platform/commonUI/browse/src/BrowseController.js
index 9f6ca3e077..b10e0a598a 100644
--- a/platform/commonUI/browse/src/BrowseController.js
+++ b/platform/commonUI/browse/src/BrowseController.js
@@ -55,7 +55,7 @@ define(
 
                 unlisten = $scope.$on('$locationChangeSuccess', function () {
                     // Checks path to make sure /browse/ is at front
-                    // if so, change $route.current
+                    // if so, change $route.current                    
                     if ($location.path().indexOf("/browse/") === 0) {
                         $route.current = priorRoute;
                     }
@@ -65,6 +65,7 @@ define(
                 // path to new, addressed, path based on
                 // domainObject
                 $location.path(urlService.urlForLocation("browse", domainObject));
+                
             }
 
             // Callback for updating the in-scope reference to the object
@@ -152,6 +153,7 @@ define(
             $scope.$on("$destroy", function () {
                 navigationService.removeListener(setNavigation);
             });
+
         }
 
         return BrowseController;
diff --git a/platform/commonUI/browse/test/BrowseControllerSpec.js b/platform/commonUI/browse/test/BrowseControllerSpec.js
index be215bebe4..ce9296c239 100644
--- a/platform/commonUI/browse/test/BrowseControllerSpec.js
+++ b/platform/commonUI/browse/test/BrowseControllerSpec.js
@@ -39,9 +39,6 @@ define(
                 mockUrlService,
                 mockDomainObject,
                 mockNextObject,
-                mockParentContext,
-                mockParent,
-                mockGrandparent,
                 controller;
 
             function mockPromise(value) {
@@ -55,7 +52,7 @@ define(
             beforeEach(function () {
                 mockScope = jasmine.createSpyObj(
                     "$scope",
-                    [ "$on", "$watch", "treeSlide", "backArrow" ]
+                    [ "$on", "$watch" ]
                 );
                 mockRoute = { current: { params: {} } };
                 mockLocation = jasmine.createSpyObj(
@@ -92,17 +89,6 @@ define(
                     [ "getId", "getCapability", "getModel", "useCapability" ]
                 );
 
-
-                mockParentContext = jasmine.createSpyObj('context', ['getParent']);
-                mockParent  = jasmine.createSpyObj(
-                    "domainObject",
-                    [ "getId", "getCapability", "getModel", "useCapability" ]
-                );
-                mockGrandparent  = jasmine.createSpyObj(
-                    "domainObject",
-                    [ "getId", "getCapability", "getModel", "useCapability" ]
-                );
-
                 mockObjectService.getObjects.andReturn(mockPromise({
                     ROOT: mockRootObject
                 }));
@@ -160,25 +146,12 @@ define(
                 expect(mockScope.navigatedObject).toEqual(mockDomainObject);
             });
 
-            // Mocks the tree slide call that
-            // lets the html code know if the
-            // tree menu is open.
-            it("calls the treeSlide function", function () {
-                expect(mockScope.$on).toHaveBeenCalledWith(
-                    "select-obj",
-                    jasmine.any(Function)
-                );
-
-                mockScope.$on.calls[1].args[1]();
-            });
-
             it("releases its navigation listener when its scope is destroyed", function () {
                 expect(mockScope.$on).toHaveBeenCalledWith(
                     "$destroy",
                     jasmine.any(Function)
                 );
-
-                mockScope.$on.calls[0].args[1]();
+                mockScope.$on.mostRecentCall.args[1]();
                 // Should remove the listener it added earlier
                 expect(mockNavigationService.removeListener).toHaveBeenCalledWith(
                     mockNavigationService.addListener.mostRecentCall.args[0]
@@ -249,16 +222,16 @@ define(
                 mockNavigationService.addListener.mostRecentCall.args[0](
                     mockNextObject
                 );
-
+                
                 // Allows the path index to be checked
-                // prior to setting $route.current
+                // prior to setting $route.current                
                 mockLocation.path.andReturn("/browse/");
-
+                
                 // Exercise the Angular workaround
                 mockScope.$on.mostRecentCall.args[1]();
                 expect(mockUnlisten).toHaveBeenCalled();
-
-                // location.path to be called with the urlService's
+                
+                // location.path to be called with the urlService's 
                 // urlFor function with the next domainObject and mode
                 expect(mockLocation.path).toHaveBeenCalledWith(
                     mockUrlService.urlForLocation(mockMode, mockNextObject)

From 733a282f3ff738a79ea412381fcafa3f4e38f0d5 Mon Sep 17 00:00:00 2001
From: Victor Woeltjen <victor.woeltjen@nasa.gov>
Date: Thu, 17 Sep 2015 17:51:06 -0700
Subject: [PATCH 187/209] [Framework] Obey priority order for controllers et al

Support overriding of controllers between bundles.
---
 platform/framework/src/register/CustomRegistrars.js | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/platform/framework/src/register/CustomRegistrars.js b/platform/framework/src/register/CustomRegistrars.js
index 04c3bbce7a..6b840a4310 100644
--- a/platform/framework/src/register/CustomRegistrars.js
+++ b/platform/framework/src/register/CustomRegistrars.js
@@ -52,6 +52,7 @@ define(
         // named methods on Angular modules, which follow the normal
         // app.method(key, [ deps..., function ]) pattern.
         function customRegistrar(angularFunction) {
+            var registered = {};
             return function (extension, index) {
                 var app = this.app,
                     $log = this.$log,
@@ -67,6 +68,14 @@ define(
                         ", no key specified. ",
                         JSON.stringify(extension)
                     ].join(""));
+                } else if (registered[key]) {
+                    $log.debug([
+                        "Already registered ",
+                        angularFunction,
+                        " with key ",
+                        key,
+                        "; skipping."
+                    ].join(""));
                 } else {
                     $log.info([
                         "Registering ",
@@ -74,6 +83,7 @@ define(
                         ": ",
                         key
                     ].join(""));
+                    registered[key] = true;
                     app[angularFunction](
                         key,
                         dependencies.concat([extension])

From 6aba34dd5ac8bc2e9c2e0e9695547779a9ee5101 Mon Sep 17 00:00:00 2001
From: Victor Woeltjen <victor.woeltjen@nasa.gov>
Date: Thu, 17 Sep 2015 17:54:01 -0700
Subject: [PATCH 188/209] [Mobile] Override browse behavior

Override browse tree behavior such that tree collapses upon
navigation change in mobile.
---
 bundles.json                                  |  1 +
 .../browse/src/BrowseTreeController.js        |  8 ---
 platform/mobile/bundle.json                   |  9 ++-
 .../mobile/src/MobileBrowseTreeController.js  | 59 +++++++++++++++++++
 4 files changed, 68 insertions(+), 9 deletions(-)
 create mode 100644 platform/mobile/src/MobileBrowseTreeController.js

diff --git a/bundles.json b/bundles.json
index 35d6f11728..3364fb75ce 100644
--- a/bundles.json
+++ b/bundles.json
@@ -19,6 +19,7 @@
     "platform/features/events",
     "platform/forms",
     "platform/identity",
+    "platform/mobile",
     "platform/persistence/local",
     "platform/persistence/queue",
     "platform/policy",
diff --git a/platform/commonUI/browse/src/BrowseTreeController.js b/platform/commonUI/browse/src/BrowseTreeController.js
index 882d563385..ee95dc2724 100644
--- a/platform/commonUI/browse/src/BrowseTreeController.js
+++ b/platform/commonUI/browse/src/BrowseTreeController.js
@@ -38,14 +38,6 @@ define(
             this.state = !this.state;
         };
 
-        BrowseTreeController.prototype.hide = function () {
-            this.state = false;
-        };
-
-        BrowseTreeController.prototype.show = function () {
-            this.state = true;
-        };
-
         BrowseTreeController.prototype.visible = function () {
             return this.state;
         };
diff --git a/platform/mobile/bundle.json b/platform/mobile/bundle.json
index 05df441424..0f1e2d2121 100644
--- a/platform/mobile/bundle.json
+++ b/platform/mobile/bundle.json
@@ -1,5 +1,12 @@
 {
     "extensions": {
-
+        "controllers": [
+            {
+                "key": "BrowseTreeController",
+                "implementation": "MobileBrowseTreeController.js",
+                "priority": "preferred",
+                "depends": [ "$scope", "navigationService", "agentService" ]
+            }
+        ]
     }
 }
diff --git a/platform/mobile/src/MobileBrowseTreeController.js b/platform/mobile/src/MobileBrowseTreeController.js
new file mode 100644
index 0000000000..a3c3e60ed0
--- /dev/null
+++ b/platform/mobile/src/MobileBrowseTreeController.js
@@ -0,0 +1,59 @@
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+/*global define,Promise*/
+
+/**
+ * This bundle implements Browse mode.
+ * @namespace platform/commonUI/browse
+ */
+define(
+    [],
+    function () {
+        "use strict";
+
+        function MobileBrowseTreeController($scope, navigationService, agentService) {
+            var object = navigationService.getNavigation();
+
+            // Collapse tree when navigation changes
+            function changeObject(newObject) {
+                if (newObject !== object) {
+                    object = newObject;
+                    this.state = false;
+                }
+            }
+
+            navigationService.listen(changeObject);
+
+            this.state = true;
+        }
+
+        MobileBrowseTreeController.prototype.toggle = function () {
+            this.state = !this.state;
+        };
+
+        MobileBrowseTreeController.prototype.visible = function () {
+            return this.state;
+        };
+
+        return MobileBrowseTreeController;
+    }
+);

From 1d1589da68185188393e6bfb227db2d47f846721 Mon Sep 17 00:00:00 2001
From: Victor Woeltjen <victor.woeltjen@nasa.gov>
Date: Thu, 17 Sep 2015 18:05:45 -0700
Subject: [PATCH 189/209] [Mobile] Move agentService to mobile bundle

...and make API tweaks.
---
 .../general/src/services/AgentService.js      | 103 ------------------
 platform/mobile/bundle.json                   |   7 ++
 platform/mobile/src/AgentService.js           |  92 ++++++++++++++++
 3 files changed, 99 insertions(+), 103 deletions(-)
 delete mode 100644 platform/commonUI/general/src/services/AgentService.js
 create mode 100644 platform/mobile/src/AgentService.js

diff --git a/platform/commonUI/general/src/services/AgentService.js b/platform/commonUI/general/src/services/AgentService.js
deleted file mode 100644
index 1c7c83c9c3..0000000000
--- a/platform/commonUI/general/src/services/AgentService.js
+++ /dev/null
@@ -1,103 +0,0 @@
-/*****************************************************************************
- * Open MCT Web, Copyright (c) 2014-2015, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT Web is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT Web includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-/*global define,Promise*/
-
-/**
- * Module defining AgentService.
- */
-
-define(
-    [],
-    function () {
-        "use strict";
-
-        /**
-         * The query service handles calls for browser and userAgent
-         * info using a comparison between the userAgent and key
-         * device names
-         */
-        function AgentService() {
-            
-            // Gets the UA name if it is one of the following.
-            // If it is not (a desktop for example) nothing is
-            // returned instead
-            function getDeviceUA(ua) {
-                return ua.match(/iPad|iPhone|Android/i) ?
-                        ua.match(/iPad|iPhone|Android/i) : "";
-            }
-            
-            // Checks if gotten device is mobile,
-            // Mobile is defined as a phone or tablet
-            function isMobile(ua) {
-                if (getDeviceUA(ua)) {
-                    return true;
-                } else {
-                    return false;
-                }
-            }
-            
-            // Checks if device is phone,
-            // phone is designated as only an
-            // iPhone device
-            function isPhone(ua) {
-                if (getDeviceUA(ua)[0] === "iPhone") {
-                    return true;
-                } else {
-                    return false;
-                }
-            }
-
-            // Returns the orientation of the device based on the
-            // device's window dimensions, pass in the innerWidth
-            // and innerheight of the current window
-            function getOrientation(innerWidth, innerHeight) {
-                if (innerWidth > innerHeight) {
-                    return "landscape";
-                } else if (innerWidth < innerHeight) {
-                    return "portrait";
-                }
-            }
-         
-            return {
-                /**
-                 * Returns the orientation for the user's device
-                 */
-                getOrientation: getOrientation,
-                
-                /**
-                 * Returns the a boolean checking if the user is
-                 * on a mobile or non-mobile device. (mobile: true,
-                 * non-mobile: false)
-                 */
-                isMobile: isMobile,
-                
-                /**
-                 * Returns the a boolean checking if the user is on
-                 * a phone device. (phone: true, non-phone: false)
-                 */
-                isPhone: isPhone
-            };
-        }
-
-        return AgentService;
-    }
-);
\ No newline at end of file
diff --git a/platform/mobile/bundle.json b/platform/mobile/bundle.json
index 0f1e2d2121..80be27a8b9 100644
--- a/platform/mobile/bundle.json
+++ b/platform/mobile/bundle.json
@@ -7,6 +7,13 @@
                 "priority": "preferred",
                 "depends": [ "$scope", "navigationService", "agentService" ]
             }
+        ],
+        "services": [
+            {
+                "key": "agentService",
+                "implementation": "AgentService.js",
+                "depends": [ "$window" ]
+            }
         ]
     }
 }
diff --git a/platform/mobile/src/AgentService.js b/platform/mobile/src/AgentService.js
new file mode 100644
index 0000000000..7df3e3c77d
--- /dev/null
+++ b/platform/mobile/src/AgentService.js
@@ -0,0 +1,92 @@
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+/*global define,Promise*/
+
+/**
+ * Module defining AgentService.
+ */
+
+define(
+    [],
+    function () {
+        "use strict";
+
+        /**
+         * The query service handles calls for browser and userAgent
+         * info using a comparison between the userAgent and key
+         * device names
+         */
+        function AgentService($window) {
+            var userAgent = $window.navigator.userAgent,
+                matches = ua.match(/iPad|iPhone|Android/i) || [];
+
+            this.mobileName = matches[0];
+            this.portrait = $window.innerWidth < $window.innerHeight;
+        }
+
+        /**
+         * Check if the user is on a mobile device.
+         * @returns {boolean} true on mobile
+         */
+        AgentService.prototype.isMobile = function () {
+            return !!this.mobileName;
+        };
+
+        /**
+         * Check if the user is on a phone-sized mobile device.
+         * @returns {boolean} true on a phone
+         */
+        AgentService.prototype.isPhone = function () {
+            // iOS is test-to device for mobile, so only
+            // make this distinction for iPhones
+            return this.mobileName === 'iPhone';
+        };
+
+        /**
+         * Check if the user is on a tablet-sized mobile device.
+         * @returns {boolean} true on a tablet
+         */
+        AgentService.prototype.isTablet = function () {
+            return this.isMobile() && !this.isPhone();
+        };
+
+        /**
+         * Check if the user's device is in a portrait-style
+         * orientation (display width is narrower than display height.)
+         * @returns {boolean} true in portrait mode
+         */
+        AgentService.prototype.isPortrait = function () {
+            return this.portrait;
+        };
+
+        /**
+         * Check if the user's device is in a landscape-style
+         * orientation (display width is greater than display height.)
+         * @returns {boolean} true in landscape mode
+         */
+        AgentService.prototype.isLandscape = function () {
+            return !this.isPortrait();
+        };
+
+        return AgentService;
+    }
+);

From 158fbf5365f7c2b61c60d5c32cdb62340ec81246 Mon Sep 17 00:00:00 2001
From: Victor Woeltjen <victor.woeltjen@nasa.gov>
Date: Fri, 18 Sep 2015 09:15:08 -0700
Subject: [PATCH 190/209] [Mobile] Check orientation dynamically

Check orientation dynamically from the AgentService
(more specifically, recheck when called - this may
change as a user rotates a device.)
---
 platform/mobile/src/AgentService.js | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/platform/mobile/src/AgentService.js b/platform/mobile/src/AgentService.js
index 7df3e3c77d..df0d7a2d6b 100644
--- a/platform/mobile/src/AgentService.js
+++ b/platform/mobile/src/AgentService.js
@@ -22,9 +22,10 @@
 /*global define,Promise*/
 
 /**
- * Module defining AgentService.
+ * Provides features which support variant behavior on mobile devices.
+ *
+ * @namespace platform/mobile
  */
-
 define(
     [],
     function () {
@@ -34,13 +35,16 @@ define(
          * The query service handles calls for browser and userAgent
          * info using a comparison between the userAgent and key
          * device names
+         * @constructor
+         * @param $window Angular-injected instance of the window
+         * @memberof platform/mobile
          */
         function AgentService($window) {
             var userAgent = $window.navigator.userAgent,
                 matches = ua.match(/iPad|iPhone|Android/i) || [];
 
             this.mobileName = matches[0];
-            this.portrait = $window.innerWidth < $window.innerHeight;
+            this.$window = $window;
         }
 
         /**
@@ -75,7 +79,7 @@ define(
          * @returns {boolean} true in portrait mode
          */
         AgentService.prototype.isPortrait = function () {
-            return this.portrait;
+            return $window.innerWidth < $window.innerHeight;
         };
 
         /**

From dce7253b27e4a9180bafff5f59799e47d6151060 Mon Sep 17 00:00:00 2001
From: Victor Woeltjen <victor.woeltjen@nasa.gov>
Date: Fri, 18 Sep 2015 09:17:01 -0700
Subject: [PATCH 191/209] [Mobile] Move mobile bundle

---
 bundles.json                                                  | 2 +-
 platform/{ => commonUI}/mobile/bundle.json                    | 0
 platform/{ => commonUI}/mobile/src/AgentService.js            | 4 ++--
 .../{ => commonUI}/mobile/src/MobileBrowseTreeController.js   | 0
 4 files changed, 3 insertions(+), 3 deletions(-)
 rename platform/{ => commonUI}/mobile/bundle.json (100%)
 rename platform/{ => commonUI}/mobile/src/AgentService.js (97%)
 rename platform/{ => commonUI}/mobile/src/MobileBrowseTreeController.js (100%)

diff --git a/bundles.json b/bundles.json
index 3364fb75ce..ee554ad9bb 100644
--- a/bundles.json
+++ b/bundles.json
@@ -8,6 +8,7 @@
     "platform/commonUI/dialog",
     "platform/commonUI/general",
     "platform/commonUI/inspect",
+    "platform/commonUI/mobile",
     "platform/containment",
     "platform/execution",
     "platform/telemetry",
@@ -19,7 +20,6 @@
     "platform/features/events",
     "platform/forms",
     "platform/identity",
-    "platform/mobile",
     "platform/persistence/local",
     "platform/persistence/queue",
     "platform/policy",
diff --git a/platform/mobile/bundle.json b/platform/commonUI/mobile/bundle.json
similarity index 100%
rename from platform/mobile/bundle.json
rename to platform/commonUI/mobile/bundle.json
diff --git a/platform/mobile/src/AgentService.js b/platform/commonUI/mobile/src/AgentService.js
similarity index 97%
rename from platform/mobile/src/AgentService.js
rename to platform/commonUI/mobile/src/AgentService.js
index df0d7a2d6b..1f6fcb63e3 100644
--- a/platform/mobile/src/AgentService.js
+++ b/platform/commonUI/mobile/src/AgentService.js
@@ -24,7 +24,7 @@
 /**
  * Provides features which support variant behavior on mobile devices.
  *
- * @namespace platform/mobile
+ * @namespace platform/commonUI/mobile
  */
 define(
     [],
@@ -37,7 +37,7 @@ define(
          * device names
          * @constructor
          * @param $window Angular-injected instance of the window
-         * @memberof platform/mobile
+         * @memberof platform/commonUI/mobile
          */
         function AgentService($window) {
             var userAgent = $window.navigator.userAgent,
diff --git a/platform/mobile/src/MobileBrowseTreeController.js b/platform/commonUI/mobile/src/MobileBrowseTreeController.js
similarity index 100%
rename from platform/mobile/src/MobileBrowseTreeController.js
rename to platform/commonUI/mobile/src/MobileBrowseTreeController.js

From 0b4f44f00d6b98f85e45668a3839139e9a06ee53 Mon Sep 17 00:00:00 2001
From: Victor Woeltjen <victor.woeltjen@nasa.gov>
Date: Fri, 18 Sep 2015 09:18:19 -0700
Subject: [PATCH 192/209] [Mobile] Remove leading slash, redundant declaration

---
 platform/commonUI/general/bundle.json | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/platform/commonUI/general/bundle.json b/platform/commonUI/general/bundle.json
index 602538c47a..4db62bb56b 100644
--- a/platform/commonUI/general/bundle.json
+++ b/platform/commonUI/general/bundle.json
@@ -6,12 +6,8 @@
         "services": [
             {
                 "key": "urlService",
-                "implementation": "/services/UrlService.js",
+                "implementation": "services/UrlService.js",
                 "depends": [ "$location" ]
-            },
-            {
-                "key": "agentService",
-                "implementation": "/services/AgentService.js"
             }
         ],
         "runs": [

From fa186a1556c46170076a2d71393512c1f500b538 Mon Sep 17 00:00:00 2001
From: Victor Woeltjen <victor.woeltjen@nasa.gov>
Date: Fri, 18 Sep 2015 10:07:27 -0700
Subject: [PATCH 193/209] [Mobile] Update agentService usages

---
 .../src/controllers/TreeNodeController.js     | 13 +++++-----
 .../inspect/src/gestures/InfoButtonGesture.js | 12 +++++-----
 .../inspect/src/gestures/InfoGesture.js       |  8 +++----
 .../mobile/src/MobileBrowseTreeController.js  | 11 +++++----
 .../src/actions/ContextMenuAction.js          | 24 ++++++-------------
 .../src/gestures/ContextMenuGesture.js        | 20 ++++++++--------
 6 files changed, 40 insertions(+), 48 deletions(-)

diff --git a/platform/commonUI/general/src/controllers/TreeNodeController.js b/platform/commonUI/general/src/controllers/TreeNodeController.js
index b25d58a025..518ae4f99f 100644
--- a/platform/commonUI/general/src/controllers/TreeNodeController.js
+++ b/platform/commonUI/general/src/controllers/TreeNodeController.js
@@ -19,7 +19,7 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-/*global define,Promise,window*/
+/*global define,Promise*/
 
 /**
  * Module defining TreeNodeController. Created by vwoeltje on 11/10/14.
@@ -77,7 +77,7 @@ define(
                         ((navPath[index] === nodePath[index]) &&
                                 checkPath(nodePath, navPath, index + 1));
             }
-            
+
             // Consider the currently-navigated object and update
             // parameters which support display.
             function checkSelection() {
@@ -176,20 +176,19 @@ define(
         TreeNodeController.prototype.isSelected = function () {
             return this.isSelectedFlag;
         };
-        
+
         // Sets the selected object in the tree, to be the
         // currently represented object. If the user is on phone
         // and in portrait mode, than, hide the tree menu
         TreeNodeController.prototype.setObject = function (ngModel, domainObject) {
             ngModel.selectedObject = domainObject;
-            if (this.agentService.getOrientation(window.innerWidth, window.innerHeight) === "portrait" &&
-                    this.agentService.isPhone(navigator.userAgent)) {
+            if (this.agentService.isPhone() && this.agentService.isPortrait()) {
                 this.$scope.$emit('select-obj');
             }
         };
-            
+
         TreeNodeController.prototype.checkMobile = function () {
-            return this.agentService.isMobile(navigator.userAgent);
+            return this.agentService.isMobile();
         };
 
         return TreeNodeController;
diff --git a/platform/commonUI/inspect/src/gestures/InfoButtonGesture.js b/platform/commonUI/inspect/src/gestures/InfoButtonGesture.js
index 9dd3cf251c..9ef0222e54 100644
--- a/platform/commonUI/inspect/src/gestures/InfoButtonGesture.js
+++ b/platform/commonUI/inspect/src/gestures/InfoButtonGesture.js
@@ -58,11 +58,11 @@ define(
                     dismissBubble();
                     dismissBubble = undefined;
                 }
-                
+
                 // Detaches body touch listener
                 body.off('touchstart', hideBubble);
             }
-            
+
             // Displays the bubble by tracking position of
             // touch, using infoService to display the bubble,
             // and then on any body touch the bubble is dismissed
@@ -77,7 +77,7 @@ define(
                     domainObject.useCapability('metadata'),
                     touchPosition
                 );
-                
+
                 // On any touch on the body, default body touches/events
                 // are prevented, the bubble is dismissed, and the touchstart
                 // body event is unbound, reallowing gestures
@@ -87,12 +87,12 @@ define(
                     body.unbind('touchstart');
                 });
             }
-            
+
             // Checks if you are on a mobile device, if the device is
             // mobile (agentService.isMobile() = true), then
-            // the a click on something (info button) brings up 
+            // the a click on something (info button) brings up
             // the bubble
-            if (agentService.isMobile(navigator.userAgent)) {
+            if (agentService.isMobile()) {
                 element.on('click', showBubble);
             }
 
diff --git a/platform/commonUI/inspect/src/gestures/InfoGesture.js b/platform/commonUI/inspect/src/gestures/InfoGesture.js
index 1eb9b595c8..09740841e4 100644
--- a/platform/commonUI/inspect/src/gestures/InfoGesture.js
+++ b/platform/commonUI/inspect/src/gestures/InfoGesture.js
@@ -65,11 +65,11 @@ define(
             this.infoService = infoService;
             this.delay = delay;
             this.domainObject = domainObject;
-            
+
             // Checks if you are on a mobile device, if the device is
             // not mobile (agentService.isMobile() = false), then
             // the pendingBubble and therefore hovering is allowed
-            if (!agentService.isMobile(navigator.userAgent)) {
+            if (!agentService.isMobile()) {
                 // Show bubble (on a timeout) on mouse over
                 element.on('mouseenter', this.showBubbleCallback);
             }
@@ -99,7 +99,7 @@ define(
             // arrays allocated while user mouses over things
             this.mousePosition = undefined;
         };
-            
+
         InfoGesture.prototype.showBubble = function (event) {
             var self = this;
 
@@ -132,7 +132,7 @@ define(
 
             this.element.on('mouseleave', this.hideBubbleCallback);
         };
-            
+
 
         /**
          * Detach any event handlers associated with this gesture.
diff --git a/platform/commonUI/mobile/src/MobileBrowseTreeController.js b/platform/commonUI/mobile/src/MobileBrowseTreeController.js
index a3c3e60ed0..ca1abeb50a 100644
--- a/platform/commonUI/mobile/src/MobileBrowseTreeController.js
+++ b/platform/commonUI/mobile/src/MobileBrowseTreeController.js
@@ -31,17 +31,20 @@ define(
         "use strict";
 
         function MobileBrowseTreeController($scope, navigationService, agentService) {
-            var object = navigationService.getNavigation();
+            var object = navigationService.getNavigation(),
+                self = this;
 
             // Collapse tree when navigation changes
             function changeObject(newObject) {
-                if (newObject !== object) {
+                if (newObject !== object && agentService.isPortrait()) {
                     object = newObject;
-                    this.state = false;
+                    self.state = false;
                 }
             }
 
-            navigationService.listen(changeObject);
+            if (agentService.isMobile()) {
+                navigationService.listen(changeObject);
+            }
 
             this.state = true;
         }
diff --git a/platform/representation/src/actions/ContextMenuAction.js b/platform/representation/src/actions/ContextMenuAction.js
index fec5938c61..56e5fa33f9 100644
--- a/platform/representation/src/actions/ContextMenuAction.js
+++ b/platform/representation/src/actions/ContextMenuAction.js
@@ -71,6 +71,7 @@ define(
                 scope = $rootScope.$new(),
                 goLeft = eventCoors[0] + menuDim[0] > winDim[0],
                 goUp = eventCoors[1] + menuDim[1] > winDim[1],
+                initiatingEvent = this.agentService.isMobile() ? 'touchstart' : 'mousedown',
                 menu;
 
             // Remove the context menu
@@ -107,27 +108,16 @@ define(
             body.append(menu);
 
             // Stop propagation so that clicks or touches on the menu do not close the menu
-            if (!(this.agentService.isMobile(navigator.userAgent))) {
-                menu.on('mousedown', function (event) {
-                    event.stopPropagation();
-                });
-            } else if ((this.agentService.isMobile(navigator.userAgent))) {
-                menu.on('touchstart', function (event) {
-                    event.stopPropagation();
-                });
-            }
+            menu.on(initiatingEvent, function (event) {
+                event.stopPropagation();
+            });
 
             // Dismiss the menu when body is clicked/touched elsewhere
             // ('mousedown' because 'click' breaks left-click context menus)
             // ('touchstart' because 'touch' breaks context menus up)
-            if (!(this.agentService.isMobile(navigator.userAgent))) {
-                body.on('mousedown', dismiss);
-                // NOTE: Apply to mobile?
-                menu.on('click', dismiss);
-            } else if (this.agentService.isMobile(navigator.userAgent)) {
-                body.on('touchstart', dismiss);
-            }
-            
+            body.on(initiatingEvent, dismiss);
+            // NOTE: Apply to mobile?
+            menu.on('click', dismiss);
 
             // Don't launch browser's context menu
             actionContext.event.preventDefault();
diff --git a/platform/representation/src/gestures/ContextMenuGesture.js b/platform/representation/src/gestures/ContextMenuGesture.js
index 4de40586dd..e7c0c7ba9f 100644
--- a/platform/representation/src/gestures/ContextMenuGesture.js
+++ b/platform/representation/src/gestures/ContextMenuGesture.js
@@ -22,7 +22,7 @@
 /*global define,Promise*/
 
 /**
- * Module defining ContextMenuGesture. 
+ * Module defining ContextMenuGesture.
  * Created by vwoeltje on 11/17/14. Modified by shale on 06/30/2015.
  */
 define(
@@ -44,7 +44,7 @@ define(
         function ContextMenuGesture($timeout, agentService, element, domainObject) {
             var isPressing,
                 longTouchTime = 500;
-    
+
             function showMenu(event) {
                 domainObject.getCapability('action').perform({
                     key: 'menu',
@@ -52,20 +52,20 @@ define(
                     event: event
                 });
             }
-    
-    // When context menu event occurs, show object actions instead
-            if (!agentService.isMobile(navigator.userAgent)) {
-                
+
+            // When context menu event occurs, show object actions instead
+            if (!agentService.isMobile()) {
+
                 // When context menu event occurs, show object actions instead
                 element.on('contextmenu', showMenu);
-            } else if (agentService.isMobile(navigator.userAgent)) {
-                
+            } else if (agentService.isMobile()) {
+
                 // If on mobile device, then start timeout for the single touch event
                 // during the timeout 'isPressing' is true.
                 element.on('touchstart', function (event) {
                     if (event.touches.length < 2) {
                         isPressing = true;
-                        
+
                         // After the timeout, if 'isPressing' is
                         // true, display context menu for object
                         $timeout(function () {
@@ -75,7 +75,7 @@ define(
                         }, longTouchTime);
                     }
                 });
-                
+
                 // Whenever the touch event ends, 'isPressing' is false.
                 element.on('touchend', function (event) {
                     isPressing = false;

From 4c5808c8c9cf5c327b92bab5c43e4484b88b4267 Mon Sep 17 00:00:00 2001
From: Victor Woeltjen <victor.woeltjen@nasa.gov>
Date: Fri, 18 Sep 2015 11:01:54 -0700
Subject: [PATCH 194/209] [Mobile] Move mobile-specific behavior to template

---
 platform/commonUI/general/bundle.json         |  2 +-
 .../general/res/templates/tree-node.html      | 49 ++++++++++++-------
 .../src/controllers/TreeNodeController.js     | 17 +------
 3 files changed, 32 insertions(+), 36 deletions(-)

diff --git a/platform/commonUI/general/bundle.json b/platform/commonUI/general/bundle.json
index 4db62bb56b..281357dc65 100644
--- a/platform/commonUI/general/bundle.json
+++ b/platform/commonUI/general/bundle.json
@@ -60,7 +60,7 @@
             {
                 "key": "TreeNodeController",
                 "implementation": "controllers/TreeNodeController.js",
-                "depends": [ "$scope", "$timeout", "agentService" ]
+                "depends": [ "$scope", "$timeout" ]
             },
             {
                 "key": "ActionGroupController",
diff --git a/platform/commonUI/general/res/templates/tree-node.html b/platform/commonUI/general/res/templates/tree-node.html
index cd77d001a2..518f7980f5 100644
--- a/platform/commonUI/general/res/templates/tree-node.html
+++ b/platform/commonUI/general/res/templates/tree-node.html
@@ -22,27 +22,38 @@
 <span ng-controller="ToggleController as toggle">
     <span ng-controller="TreeNodeController as treeNode">
         <span
-	        class="tree-item menus-to-left"
-	        ng-class="{selected: treeNode.isSelected()}"
-	        >
-            <mct-representation
-                key="'label'"
-				mct-object="domainObject"
-				ng-model="ngModel"
-				ng-click="!treeNode.checkMobile() || model.composition == undefined ||
-                          model.composition.length == 0 ? treeNode.setObject(ngModel, domainObject) : toggle.toggle();
-                          treeNode.trackExpansion()"
-				>
-            </mct-representation>
+            class="tree-item menus-to-left"
+            ng-class="{selected: treeNode.isSelected()}"
+            >
             <span
-	            class='ui-symbol view-control'
+                class='ui-symbol view-control mobile-hide'
+                ng-click="toggle.toggle(); treeNode.trackExpansion()"
+                ng-if="model.composition !== undefined"
+                >
+                {{toggle.isActive() ? "v" : ">"}}
+            </span>
+
+            <mct-representation
+                class="mobile-hide"
+                key="'label'"
                 mct-object="domainObject"
+                ng-click="ngModel.selectedObject = domainObject"
+                >
+            </mct-representation>
+            <mct-representation
+                class="desktop-hide"
+                key="'label'"
+                mct-object="domainObject"
+                ng-click="toggle.toggle(); treeNode.trackExpansion()"
+                >
+            </mct-representation>
+
+            <span
+                class='ui-symbol view-control desktop-hide'
                 ng-model="ngModel"
-				ng-click="treeNode.checkMobile() ? treeNode.setObject(ngModel, domainObject) :
-                          toggle.toggle(); treeNode.trackExpansion()"
-				ng-if="model.composition !== undefined || treeNode.checkMobile()"
-				>
-                {{treeNode.checkMobile() ? "}" : toggle.isActive() ? "v" : ">"}}
+                ng-click="ngModel.selectedObject = domainObject"
+                >
+                }
             </span>
         </span>
         <span
@@ -58,4 +69,4 @@
 
         </span>
     </span>
-</span>
\ No newline at end of file
+</span>
diff --git a/platform/commonUI/general/src/controllers/TreeNodeController.js b/platform/commonUI/general/src/controllers/TreeNodeController.js
index 518ae4f99f..7c21ee46aa 100644
--- a/platform/commonUI/general/src/controllers/TreeNodeController.js
+++ b/platform/commonUI/general/src/controllers/TreeNodeController.js
@@ -51,7 +51,7 @@ define(
          * @memberof platform/commonUI/general
          * @constructor
          */
-        function TreeNodeController($scope, $timeout, agentService) {
+        function TreeNodeController($scope, $timeout) {
             var self = this,
                 selectedObject = ($scope.ngModel || {}).selectedObject,
                 isSelected = false,
@@ -133,7 +133,6 @@ define(
             this.isSelectedFlag = false;
             this.hasBeenExpandedFlag = false;
             this.$timeout = $timeout;
-            this.agentService = agentService;
             this.$scope = $scope;
 
             // Listen for changes which will effect display parameters
@@ -177,20 +176,6 @@ define(
             return this.isSelectedFlag;
         };
 
-        // Sets the selected object in the tree, to be the
-        // currently represented object. If the user is on phone
-        // and in portrait mode, than, hide the tree menu
-        TreeNodeController.prototype.setObject = function (ngModel, domainObject) {
-            ngModel.selectedObject = domainObject;
-            if (this.agentService.isPhone() && this.agentService.isPortrait()) {
-                this.$scope.$emit('select-obj');
-            }
-        };
-
-        TreeNodeController.prototype.checkMobile = function () {
-            return this.agentService.isMobile();
-        };
-
         return TreeNodeController;
     }
 );

From 70bcb723efe7a5e98f859039668d7623d97cf86f Mon Sep 17 00:00:00 2001
From: Victor Woeltjen <victor.woeltjen@nasa.gov>
Date: Fri, 18 Sep 2015 12:13:05 -0700
Subject: [PATCH 195/209] [Mobile] Small tweaks/bug fixes

Small tweaks/fixes (use appropriate variable names etc) for
refactoring mobile support classes.
---
 platform/commonUI/mobile/src/AgentService.js               | 4 ++--
 platform/commonUI/mobile/src/MobileBrowseTreeController.js | 5 ++++-
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/platform/commonUI/mobile/src/AgentService.js b/platform/commonUI/mobile/src/AgentService.js
index 1f6fcb63e3..26bb173ee7 100644
--- a/platform/commonUI/mobile/src/AgentService.js
+++ b/platform/commonUI/mobile/src/AgentService.js
@@ -41,7 +41,7 @@ define(
          */
         function AgentService($window) {
             var userAgent = $window.navigator.userAgent,
-                matches = ua.match(/iPad|iPhone|Android/i) || [];
+                matches = userAgent.match(/iPad|iPhone|Android/i) || [];
 
             this.mobileName = matches[0];
             this.$window = $window;
@@ -79,7 +79,7 @@ define(
          * @returns {boolean} true in portrait mode
          */
         AgentService.prototype.isPortrait = function () {
-            return $window.innerWidth < $window.innerHeight;
+            return this.$window.innerWidth < this.$window.innerHeight;
         };
 
         /**
diff --git a/platform/commonUI/mobile/src/MobileBrowseTreeController.js b/platform/commonUI/mobile/src/MobileBrowseTreeController.js
index ca1abeb50a..a88aa63088 100644
--- a/platform/commonUI/mobile/src/MobileBrowseTreeController.js
+++ b/platform/commonUI/mobile/src/MobileBrowseTreeController.js
@@ -43,7 +43,10 @@ define(
             }
 
             if (agentService.isMobile()) {
-                navigationService.listen(changeObject);
+                navigationService.addListener(changeObject);
+                $scope.$on("$destroy", function () {
+                    navigationService.removeListener(changeObject);
+                });
             }
 
             this.state = true;

From c057ba38a5a732a6229aa264bfb0137cec5b37be Mon Sep 17 00:00:00 2001
From: Victor Woeltjen <victor.woeltjen@nasa.gov>
Date: Fri, 18 Sep 2015 12:13:37 -0700
Subject: [PATCH 196/209] [Mobile] Add mct-device directive

Add directive which can be used to include certain elements
only on specific devices.
---
 .../commonUI/browse/res/templates/browse.html |   1 +
 platform/commonUI/mobile/bundle.json          |   7 ++
 platform/commonUI/mobile/src/MCTDevice.js     | 104 ++++++++++++++++++
 3 files changed, 112 insertions(+)
 create mode 100644 platform/commonUI/mobile/src/MCTDevice.js

diff --git a/platform/commonUI/browse/res/templates/browse.html b/platform/commonUI/browse/res/templates/browse.html
index 8ba06c122f..0e510fd014 100644
--- a/platform/commonUI/browse/res/templates/browse.html
+++ b/platform/commonUI/browse/res/templates/browse.html
@@ -55,6 +55,7 @@
                     </mct-representation>
                 </div>
                 <div class="key-properties ui-symbol icon mobile-menu-icon desktop-hide"
+                     mct-device="mobile"
                      ng-click="tree.toggle()">m</div>
             </div>
         </mct-split-pane>
diff --git a/platform/commonUI/mobile/bundle.json b/platform/commonUI/mobile/bundle.json
index 80be27a8b9..0037a45259 100644
--- a/platform/commonUI/mobile/bundle.json
+++ b/platform/commonUI/mobile/bundle.json
@@ -8,6 +8,13 @@
                 "depends": [ "$scope", "navigationService", "agentService" ]
             }
         ],
+        "directives": [
+            {
+                "key": "mctDevice",
+                "implementation": "MCTDevice.js",
+                "depends": [ "agentService" ]
+            }
+        ],
         "services": [
             {
                 "key": "agentService",
diff --git a/platform/commonUI/mobile/src/MCTDevice.js b/platform/commonUI/mobile/src/MCTDevice.js
new file mode 100644
index 0000000000..87f16d721f
--- /dev/null
+++ b/platform/commonUI/mobile/src/MCTDevice.js
@@ -0,0 +1,104 @@
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+/*global define,Promise*/
+
+define(
+    function () {
+        'use strict';
+
+        var DEVICE_MATCHERS = {
+            mobile: function (agentService) {
+                return agentService.isMobile();
+            },
+            phone: function (agentService) {
+                return agentService.isPhone();
+            },
+            tablet: function (agentService) {
+                return agentService.isTablet();
+            },
+            desktop: function (agentService) {
+                return !agentService.isMobile();
+            },
+            portrait: function (agentService) {
+                return agentService.isPortrait();
+            },
+            landscape: function (agentService) {
+                return agentService.isLandscape();
+            }
+        };
+
+
+        /**
+         * The `mct-device` directive, when applied as an attribute,
+         * only includes the element when the device being used matches
+         * a set of characteristics required.
+         *
+         * Required characteristics are given as space-separated strings
+         * as the value to this attribute, e.g.:
+         *
+         *    <span mct-device="mobile portrait">Hello world!</span>
+         *
+         * ...will only show Hello world! when viewed on a mobile device
+         * in the portrait orientation.
+         *
+         * Valid device characteristics to detect are:
+         *
+         * * `mobile`: Phones or tablets.
+         * * `phone`: Phones specifically.
+         * * `tablet`: Tablets specifically.
+         * * `desktop`: Non-mobile devices.
+         * * `portrait`: Devices in a portrait-style orientation.
+         * * `landscape`: Devices in a landscape-style orientation.
+         *
+         * @param {AgentService} agentService used to detect device type
+         *        based on information about the user agent
+         */
+        function MCTDevice(agentService) {
+
+            function deviceMatches(tokens) {
+                tokens = tokens || "";
+                return tokens.split(" ").every(function (token) {
+                    var fn = DEVICE_MATCHERS[token];
+                    return fn && fn(agentService);
+                });
+            }
+
+            function link(scope, element, attrs, ctrl, transclude) {
+                if (deviceMatches(attrs.mctDevice)) {
+                    transclude(function (clone) {
+                        element.parent().append(clone);
+                    });
+                }
+            }
+
+            return {
+                link: link,
+                // We are transcluding the whole element (like ng-if)
+                transclude: 'element',
+                // Only apply as an attribute
+                restrict: "A"
+            };
+        }
+
+        return MCTDevice;
+    }
+);

From bf05e55d020984d51571c8140c6a6dc81ee8fab1 Mon Sep 17 00:00:00 2001
From: Victor Woeltjen <victor.woeltjen@nasa.gov>
Date: Fri, 18 Sep 2015 12:25:51 -0700
Subject: [PATCH 197/209] [Mobile] Use mct-device in tree nodes

---
 .../commonUI/general/res/templates/tree-node.html | 15 ++++++++++++---
 platform/commonUI/mobile/src/MCTDevice.js         |  4 ++++
 2 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/platform/commonUI/general/res/templates/tree-node.html b/platform/commonUI/general/res/templates/tree-node.html
index 518f7980f5..a6d3560ee0 100644
--- a/platform/commonUI/general/res/templates/tree-node.html
+++ b/platform/commonUI/general/res/templates/tree-node.html
@@ -26,7 +26,8 @@
             ng-class="{selected: treeNode.isSelected()}"
             >
             <span
-                class='ui-symbol view-control mobile-hide'
+                mct-device="desktop"
+                class='ui-symbol view-control'
                 ng-click="toggle.toggle(); treeNode.trackExpansion()"
                 ng-if="model.composition !== undefined"
                 >
@@ -34,6 +35,7 @@
             </span>
 
             <mct-representation
+                mct-device="desktop"
                 class="mobile-hide"
                 key="'label'"
                 mct-object="domainObject"
@@ -41,15 +43,22 @@
                 >
             </mct-representation>
             <mct-representation
+                mct-device="mobile"
                 class="desktop-hide"
                 key="'label'"
                 mct-object="domainObject"
-                ng-click="toggle.toggle(); treeNode.trackExpansion()"
+                ng-click="ngModel.selectedObject =
+                              model.composition === undefined ?
+                                  domainObject : ngModel.selectedObject;
+                          toggle.toggle();
+                          treeNode.trackExpansion();
+                          "
                 >
             </mct-representation>
 
             <span
-                class='ui-symbol view-control desktop-hide'
+                mct-device="mobile"
+                class='ui-symbol view-control'
                 ng-model="ngModel"
                 ng-click="ngModel.selectedObject = domainObject"
                 >
diff --git a/platform/commonUI/mobile/src/MCTDevice.js b/platform/commonUI/mobile/src/MCTDevice.js
index 87f16d721f..7928d34112 100644
--- a/platform/commonUI/mobile/src/MCTDevice.js
+++ b/platform/commonUI/mobile/src/MCTDevice.js
@@ -94,6 +94,10 @@ define(
                 link: link,
                 // We are transcluding the whole element (like ng-if)
                 transclude: 'element',
+                // 1 more than ng-if
+                priority: 601,
+                // Also terminal, since element will be transcluded
+                terminal: true,
                 // Only apply as an attribute
                 restrict: "A"
             };

From 88bb2131620cb257d93256a6d03ac076ad3479cc Mon Sep 17 00:00:00 2001
From: Victor Woeltjen <victor.woeltjen@nasa.gov>
Date: Fri, 18 Sep 2015 14:34:14 -0700
Subject: [PATCH 198/209] [Mobile] Move spec for AgentService

---
 platform/commonUI/general/test/suite.json                      | 3 +--
 .../{general/test/services => mobile/test}/AgentServiceSpec.js | 0
 2 files changed, 1 insertion(+), 2 deletions(-)
 rename platform/commonUI/{general/test/services => mobile/test}/AgentServiceSpec.js (100%)

diff --git a/platform/commonUI/general/test/suite.json b/platform/commonUI/general/test/suite.json
index 085c1795ba..45c554d2c2 100644
--- a/platform/commonUI/general/test/suite.json
+++ b/platform/commonUI/general/test/suite.json
@@ -13,7 +13,6 @@
     "directives/MCTDrag",
     "directives/MCTResize",
     "directives/MCTScroll",
-    "services/AgentService",
     "services/UrlService",
     "StyleSheetLoader"
-]
\ No newline at end of file
+]
diff --git a/platform/commonUI/general/test/services/AgentServiceSpec.js b/platform/commonUI/mobile/test/AgentServiceSpec.js
similarity index 100%
rename from platform/commonUI/general/test/services/AgentServiceSpec.js
rename to platform/commonUI/mobile/test/AgentServiceSpec.js

From 5a1c83fca829c8306b41738192e4b96e03d09d3d Mon Sep 17 00:00:00 2001
From: Victor Woeltjen <victor.woeltjen@nasa.gov>
Date: Fri, 18 Sep 2015 14:53:14 -0700
Subject: [PATCH 199/209] [Mobile] Update spec for AgentService

---
 .../commonUI/mobile/test/AgentServiceSpec.js  | 87 +++++++++++--------
 1 file changed, 52 insertions(+), 35 deletions(-)

diff --git a/platform/commonUI/mobile/test/AgentServiceSpec.js b/platform/commonUI/mobile/test/AgentServiceSpec.js
index e24cc8e7f7..8e0f600020 100644
--- a/platform/commonUI/mobile/test/AgentServiceSpec.js
+++ b/platform/commonUI/mobile/test/AgentServiceSpec.js
@@ -21,49 +21,66 @@
  *****************************************************************************/
 /*global define,Promise,describe,it,expect,beforeEach,waitsFor,jasmine*/
 
-/**
- * MCTRepresentationSpec. Created by vwoeltje on 11/6/14.
- */
+
 define(
-    ["../../src/services/AgentService"],
+    ["../src/AgentService"],
     function (AgentService) {
         "use strict";
 
-        describe("The url service", function () {
-            var agentService,
-                mockWindow,
-                mockNavigator;
+        var TEST_USER_AGENTS = {
+            DESKTOP: "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/44.0.2403.89 Safari/537.36",
+            IPHONE: "Mozilla/5.0 (iPad; CPU OS 7_0 like Mac OS X) AppleWebKit/537.51.1 (KHTML, like Gecko) Version/7.0 Mobile/11A465 Safari/9537.53",
+            IPAD: "Mozilla/5.0 (iPhone; CPU iPhone OS 7_0 like Mac OS X; en-us) AppleWebKit/537.51.1 (KHTML, like Gecko) Version/7.0 Mobile/11A465 Safari/9537.53"
+        };
+
+        describe("The AgentService", function () {
+            var testWindow, agentService;
 
             beforeEach(function () {
-                // Creates a mockLocation, used to 
-                // do the view search
-                mockWindow = jasmine.createSpyObj(
-                    "window",
-                    [ "innerWidth", "innerHeight" ]
-                );
-                
-                mockNavigator = jasmine.createSpyObj(
-                    "navigator",
-                    [ "userAgent" ]
-                );
-                
-                agentService = new AgentService();
+                testWindow = {
+                    innerWidth: 640,
+                    innerHeight: 480,
+                    navigator: {
+                        userAgent: TEST_USER_AGENTS.DESKTOP
+                    }
+                };
             });
-            
-            it("get current device user agent", function () {
-                mockNavigator.userAgent = "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/44.0.2403.89 Safari/537.36";
-                agentService.isMobile(mockNavigator.userAgent);
-                agentService.isPhone(mockNavigator.userAgent);
-                mockNavigator.userAgent = "Mozilla/5.0 (iPad; CPU OS 7_0 like Mac OS X) AppleWebKit/537.51.1 (KHTML, like Gecko) Version/7.0 Mobile/11A465 Safari/9537.53";
-                agentService.isMobile(mockNavigator.userAgent);
-                mockNavigator.userAgent = "Mozilla/5.0 (iPhone; CPU iPhone OS 7_0 like Mac OS X; en-us) AppleWebKit/537.51.1 (KHTML, like Gecko) Version/7.0 Mobile/11A465 Safari/9537.53";
-                agentService.isPhone(mockNavigator.userAgent);
+
+            it("recognizes desktop devices as non-mobile", function () {
+                testWindow.navigator.userAgent = TEST_USER_AGENTS.DESKTOP;
+                agentService = new AgentService(testWindow);
+                expect(agentService.isMobile()).toBeFalsy();
+                expect(agentService.isPhone()).toBeFalsy();
+                expect(agentService.isTablet()).toBeFalsy();
             });
-            
-            it("get orientation of the current device", function () {
-                agentService.getOrientation(1024, 768);
-                agentService.getOrientation(768, 1024);
+
+            it("detects iPhones", function () {
+                testWindow.navigator.userAgent = TEST_USER_AGENTS.IPHONE;
+                agentService = new AgentService(testWindow);
+                expect(agentService.isMobile()).toBeTruthy();
+                expect(agentService.isPhone()).toBeTruthy();
+                expect(agentService.isTablet()).toBeFalsy();
+            });
+
+            it("detects iPads", function () {
+                testWindow.navigator.userAgent = TEST_USER_AGENTS.IPAD;
+                agentService = new AgentService(testWindow);
+                expect(agentService.isMobile()).toBeTruthy();
+                expect(agentService.isPhone()).toBeFalsy();
+                expect(agentService.isTablet()).toBeTruthy();
+            });
+
+            it("detects display orientation", function () {
+                var agentService = new AgentService(testWindow);
+                testWindow.innerWidth = 1024;
+                testWindow.innerHeight = 400;
+                expect(agentService.isPortrait()).toBeFalsy();
+                expect(agentService.isLandscape()).toBeTruthy();
+                testWindow.innerWidth = 400;
+                testWindow.innerHeight = 1024;
+                expect(agentService.isPortrait()).toBeTruthy();
+                expect(agentService.isLandscape()).toBeFalsy();
             });
         });
     }
-);
\ No newline at end of file
+);

From befa66a9e259160c4f988d0b5e33202bc7650991 Mon Sep 17 00:00:00 2001
From: Victor Woeltjen <victor.woeltjen@nasa.gov>
Date: Fri, 18 Sep 2015 14:54:37 -0700
Subject: [PATCH 200/209] [Mobile] Remove obsolete test cases

...for functionality that has been moved out of TreeNodeController.
---
 .../test/controllers/TreeNodeControllerSpec.js  | 17 +++--------------
 1 file changed, 3 insertions(+), 14 deletions(-)

diff --git a/platform/commonUI/general/test/controllers/TreeNodeControllerSpec.js b/platform/commonUI/general/test/controllers/TreeNodeControllerSpec.js
index 247120cdec..f2e5d1ae2d 100644
--- a/platform/commonUI/general/test/controllers/TreeNodeControllerSpec.js
+++ b/platform/commonUI/general/test/controllers/TreeNodeControllerSpec.js
@@ -52,10 +52,10 @@ define(
                     "domainObject",
                     [ "getId", "getCapability", "getModel", "useCapability" ]
                 );
-                
+
                 mockAgentService.getOrientation.andReturn("portrait");
                 mockAgentService.isPhone.andReturn(true);
-                
+
                 controller = new TreeNodeController(mockScope, mockTimeout, mockAgentService);
             });
 
@@ -196,17 +196,6 @@ define(
                 expect(controller.isSelected()).toBeFalsy();
 
             });
-            
-            it("check if tree node is in a mobile device", function () {
-                if (controller) {
-                    controller.checkMobile();
-                }
-            });
-            
-            it("allows a set object to emit select-obj", function () {
-                controller.setObject(mockNgModel, mockDomainObject);
-                expect(mockScope.$emit).toHaveBeenCalledWith('select-obj');
-            });
         });
     }
-);
\ No newline at end of file
+);

From d236fd10c3f533b83cbce2b0ef3de05a0257eaad Mon Sep 17 00:00:00 2001
From: Victor Woeltjen <victor.woeltjen@nasa.gov>
Date: Fri, 18 Sep 2015 15:02:32 -0700
Subject: [PATCH 201/209] [Framework] Move registration-tracking

Move registration-tracking for Angular built-ins such that
these are correctly tracked at the instance level.
---
 platform/framework/src/register/CustomRegistrars.js | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/platform/framework/src/register/CustomRegistrars.js b/platform/framework/src/register/CustomRegistrars.js
index 6b840a4310..0051105036 100644
--- a/platform/framework/src/register/CustomRegistrars.js
+++ b/platform/framework/src/register/CustomRegistrars.js
@@ -39,6 +39,7 @@ define(
         function CustomRegistrars(app, $log) {
             this.app = app;
             this.$log = $log;
+            this.registered = {}; // Track registered keys by extension
         }
 
         // Utility; bind a function to a "this" pointer
@@ -52,12 +53,14 @@ define(
         // named methods on Angular modules, which follow the normal
         // app.method(key, [ deps..., function ]) pattern.
         function customRegistrar(angularFunction) {
-            var registered = {};
             return function (extension, index) {
                 var app = this.app,
                     $log = this.$log,
                     key = extension.key,
-                    dependencies = extension.depends || [];
+                    dependencies = extension.depends || [],
+                    registered = this.registered[angularFunction] || {};
+
+                this.registered[angularFunction] = registered;
 
                 if (!key) {
                     $log.warn([

From b163b45a5e26e64ee7ae7d08e74f5c489e4c4451 Mon Sep 17 00:00:00 2001
From: Victor Woeltjen <victor.woeltjen@nasa.gov>
Date: Fri, 18 Sep 2015 15:10:21 -0700
Subject: [PATCH 202/209] [Framework] Update spec

Update spec to verify that app.controller et al
are not called multiple times with the same key.
---
 .../test/register/CustomRegistrarsSpec.js     | 21 ++++++++++++++++++-
 1 file changed, 20 insertions(+), 1 deletion(-)

diff --git a/platform/framework/test/register/CustomRegistrarsSpec.js b/platform/framework/test/register/CustomRegistrarsSpec.js
index b8380fa575..5083e63f88 100644
--- a/platform/framework/test/register/CustomRegistrarsSpec.js
+++ b/platform/framework/test/register/CustomRegistrarsSpec.js
@@ -113,6 +113,25 @@ define(
                 // Notably, keys are not needed for run calls
             });
 
+            it("does not re-register duplicate keys", function () {
+                // Verify preconditions, invoke, expect to have been called
+                expect(mockApp.directive.calls.length).toEqual(0);
+                customRegistrars.directives([{ key: "a" }, { key: "a" }]);
+                expect(mockApp.directive.calls.length).toEqual(1);
+
+                expect(mockApp.controller.calls.length).toEqual(0);
+                customRegistrars.controllers([{ key: "c" }, { key: "c" }, { key: "c" }]);
+                expect(mockApp.controller.calls.length).toEqual(1);
+
+                expect(mockApp.service.calls.length).toEqual(0);
+                customRegistrars.services([{ key: "b" }, { key: "b" }]);
+                expect(mockApp.service.calls.length).toEqual(1);
+
+                // None of this should have warned, this is all
+                // nominal behavior
+                expect(mockLog.warn.calls.length).toEqual(0);
+            });
+
             it("allows routes to be registered", function () {
                 var mockRouteProvider = jasmine.createSpyObj(
                         "$routeProvider",
@@ -166,4 +185,4 @@ define(
             });
         });
     }
-);
\ No newline at end of file
+);

From e86e61c2ac2b4ed3c37a6110d13e72471a80a541 Mon Sep 17 00:00:00 2001
From: Victor Woeltjen <victor.woeltjen@nasa.gov>
Date: Fri, 18 Sep 2015 15:12:48 -0700
Subject: [PATCH 203/209] [Mobile] Fix test setup error

Use correct user agent strings for iPhone/iPad
(these had been reversed in the spec.)
---
 platform/commonUI/mobile/test/AgentServiceSpec.js | 4 ++--
 platform/commonUI/mobile/test/suite.json          | 3 +++
 2 files changed, 5 insertions(+), 2 deletions(-)
 create mode 100644 platform/commonUI/mobile/test/suite.json

diff --git a/platform/commonUI/mobile/test/AgentServiceSpec.js b/platform/commonUI/mobile/test/AgentServiceSpec.js
index 8e0f600020..c0735e3f4c 100644
--- a/platform/commonUI/mobile/test/AgentServiceSpec.js
+++ b/platform/commonUI/mobile/test/AgentServiceSpec.js
@@ -29,8 +29,8 @@ define(
 
         var TEST_USER_AGENTS = {
             DESKTOP: "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/44.0.2403.89 Safari/537.36",
-            IPHONE: "Mozilla/5.0 (iPad; CPU OS 7_0 like Mac OS X) AppleWebKit/537.51.1 (KHTML, like Gecko) Version/7.0 Mobile/11A465 Safari/9537.53",
-            IPAD: "Mozilla/5.0 (iPhone; CPU iPhone OS 7_0 like Mac OS X; en-us) AppleWebKit/537.51.1 (KHTML, like Gecko) Version/7.0 Mobile/11A465 Safari/9537.53"
+            IPAD: "Mozilla/5.0 (iPad; CPU OS 7_0 like Mac OS X) AppleWebKit/537.51.1 (KHTML, like Gecko) Version/7.0 Mobile/11A465 Safari/9537.53",
+            IPHONE: "Mozilla/5.0 (iPhone; CPU iPhone OS 7_0 like Mac OS X; en-us) AppleWebKit/537.51.1 (KHTML, like Gecko) Version/7.0 Mobile/11A465 Safari/9537.53"
         };
 
         describe("The AgentService", function () {
diff --git a/platform/commonUI/mobile/test/suite.json b/platform/commonUI/mobile/test/suite.json
new file mode 100644
index 0000000000..4cf0d3ee0d
--- /dev/null
+++ b/platform/commonUI/mobile/test/suite.json
@@ -0,0 +1,3 @@
+[
+    "AgentService"
+]

From cf97b30084ecf9f2ccbe272d2dafa6dc6cd00f89 Mon Sep 17 00:00:00 2001
From: Victor Woeltjen <victor.woeltjen@nasa.gov>
Date: Fri, 18 Sep 2015 15:21:23 -0700
Subject: [PATCH 204/209] [Mobile] Add empty specs

---
 .../browse/test/BackArrowControllerSpec.js    | 28 ++++++++++++++++++
 .../browse/test/BrowseTreeControllerSpec.js   | 28 ++++++++++++++++++
 platform/commonUI/browse/test/suite.json      |  2 ++
 .../commonUI/mobile/test/MCTDeviceSpec.js     | 29 +++++++++++++++++++
 .../test/MobileBrowseTreeControllerSpec.js    | 29 +++++++++++++++++++
 platform/commonUI/mobile/test/suite.json      |  4 ++-
 6 files changed, 119 insertions(+), 1 deletion(-)
 create mode 100644 platform/commonUI/browse/test/BackArrowControllerSpec.js
 create mode 100644 platform/commonUI/browse/test/BrowseTreeControllerSpec.js
 create mode 100644 platform/commonUI/mobile/test/MCTDeviceSpec.js
 create mode 100644 platform/commonUI/mobile/test/MobileBrowseTreeControllerSpec.js

diff --git a/platform/commonUI/browse/test/BackArrowControllerSpec.js b/platform/commonUI/browse/test/BackArrowControllerSpec.js
new file mode 100644
index 0000000000..9dfe0b5d2e
--- /dev/null
+++ b/platform/commonUI/browse/test/BackArrowControllerSpec.js
@@ -0,0 +1,28 @@
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+/*global define,Promise,describe,it,expect,beforeEach,waitsFor,jasmine*/
+
+define(
+    ["../src/BackArrowController"],
+    function (BackArrowController) {
+    }
+);
diff --git a/platform/commonUI/browse/test/BrowseTreeControllerSpec.js b/platform/commonUI/browse/test/BrowseTreeControllerSpec.js
new file mode 100644
index 0000000000..7783d163d6
--- /dev/null
+++ b/platform/commonUI/browse/test/BrowseTreeControllerSpec.js
@@ -0,0 +1,28 @@
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+/*global define,Promise,describe,it,expect,beforeEach,waitsFor,jasmine*/
+
+define(
+    ["../src/BrowseTreeController"],
+    function (BrowseTreeController) {
+    }
+);
diff --git a/platform/commonUI/browse/test/suite.json b/platform/commonUI/browse/test/suite.json
index e3a8f11c28..546cff128e 100644
--- a/platform/commonUI/browse/test/suite.json
+++ b/platform/commonUI/browse/test/suite.json
@@ -1,6 +1,8 @@
 [
+    "BackArrowController",
     "BrowseController",
     "BrowseObjectController",
+    "BrowseTreeController",
     "MenuArrowController",
     "creation/CreateAction",
     "creation/CreateActionProvider",
diff --git a/platform/commonUI/mobile/test/MCTDeviceSpec.js b/platform/commonUI/mobile/test/MCTDeviceSpec.js
new file mode 100644
index 0000000000..3b9bf9dcff
--- /dev/null
+++ b/platform/commonUI/mobile/test/MCTDeviceSpec.js
@@ -0,0 +1,29 @@
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+/*global define,Promise,describe,it,expect,beforeEach,waitsFor,jasmine*/
+
+define(
+    ['../src/MCTDevice'],
+    function (MCTDevice) {
+        "use strict";
+    }
+);
diff --git a/platform/commonUI/mobile/test/MobileBrowseTreeControllerSpec.js b/platform/commonUI/mobile/test/MobileBrowseTreeControllerSpec.js
new file mode 100644
index 0000000000..daefa35e62
--- /dev/null
+++ b/platform/commonUI/mobile/test/MobileBrowseTreeControllerSpec.js
@@ -0,0 +1,29 @@
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+/*global define,Promise,describe,it,expect,beforeEach,waitsFor,jasmine*/
+
+define(
+    ['../src/MobileBrowseTreeController'],
+    function (MobileBrowseTreeController) {
+        "use strict";
+    }
+);
diff --git a/platform/commonUI/mobile/test/suite.json b/platform/commonUI/mobile/test/suite.json
index 4cf0d3ee0d..4858ba366e 100644
--- a/platform/commonUI/mobile/test/suite.json
+++ b/platform/commonUI/mobile/test/suite.json
@@ -1,3 +1,5 @@
 [
-    "AgentService"
+    "AgentService",
+    "MCTDevice",
+    "MobileBrowseTreeController"
 ]

From 24586ae37805e1268bf0ed5d3d930f66574080d3 Mon Sep 17 00:00:00 2001
From: Victor Woeltjen <victor.woeltjen@nasa.gov>
Date: Fri, 18 Sep 2015 15:27:14 -0700
Subject: [PATCH 205/209] [Mobile] Remove BackArrowController

Remove BackArrowController; behavior can be implemented
in template.
---
 platform/commonUI/browse/bundle.json          |  7 +-
 .../browse/res/templates/back-arrow.html      | 10 +--
 .../browse/src/BackArrowController.js         | 64 -------------------
 .../browse/test/BackArrowControllerSpec.js    | 28 --------
 platform/commonUI/browse/test/suite.json      |  1 -
 5 files changed, 7 insertions(+), 103 deletions(-)
 delete mode 100644 platform/commonUI/browse/src/BackArrowController.js
 delete mode 100644 platform/commonUI/browse/test/BackArrowControllerSpec.js

diff --git a/platform/commonUI/browse/bundle.json b/platform/commonUI/browse/bundle.json
index 0f63130f86..9478213a0b 100644
--- a/platform/commonUI/browse/bundle.json
+++ b/platform/commonUI/browse/bundle.json
@@ -48,11 +48,6 @@
                 "key": "MenuArrowController",
                 "implementation": "MenuArrowController.js",
                 "depends": [ "$scope" ]
-            },
-            {
-                "key": "BackArrowController",
-                "implementation": "BackArrowController.js",
-                "depends": [ "$scope" ]
             }
         ],
         "controls": [
@@ -101,7 +96,7 @@
             },
             {
                 "key": "back-arrow",
-                "uses": [ "type", "action" ],
+                "uses": [ "context" ],
                 "templateUrl": "templates/back-arrow.html"
             }
         ],
diff --git a/platform/commonUI/browse/res/templates/back-arrow.html b/platform/commonUI/browse/res/templates/back-arrow.html
index 6085b91249..daa29de67a 100644
--- a/platform/commonUI/browse/res/templates/back-arrow.html
+++ b/platform/commonUI/browse/res/templates/back-arrow.html
@@ -21,7 +21,9 @@
 -->
 
 <!-- Back Arrow Icon used on mobile-->
-<a ng-controller="BackArrowController"
-      class='type-icon icon ui-symbol s-back'
-      ng-hide="atRoot"
-      ng-click='navigateToParent()'>{</a>
+<a
+   class='type-icon icon ui-symbol s-back'
+   ng-show="context.getPath().length > 2"
+   ng-click="context.getParent().getCapability('action').perform('navigate')">
+    {
+</a>
diff --git a/platform/commonUI/browse/src/BackArrowController.js b/platform/commonUI/browse/src/BackArrowController.js
deleted file mode 100644
index b48740d288..0000000000
--- a/platform/commonUI/browse/src/BackArrowController.js
+++ /dev/null
@@ -1,64 +0,0 @@
-/*****************************************************************************
- * Open MCT Web, Copyright (c) 2014-2015, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT Web is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT Web includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-/*global define*/
-define(
-    function () {
-        'use strict';
-
-        function BackArrowController($scope) {
-            function navigateTo(parentObject) {
-                var action =
-                    parentObject && parentObject.getCapability('action');
-                if (action) {
-                    action.perform('navigate');
-                }
-            }
-
-            function navigateToParent() {
-                var domainObject = $scope.domainObject,
-                    context =
-                        domainObject && domainObject.getCapability('context');
-                if (context) {
-                    navigateTo(context.getParent());
-                }
-            }
-
-            function checkRoot(domainObject) {
-                var context =
-                    domainObject && domainObject.getCapability('context');
-
-                // We don't want to show the arrow if there is no context
-                // for this object, or if there is not a meaningful parent
-                // we can go back to.
-                $scope.atRoot = (!context) || (context.getPath().length < 3);
-            }
-
-            $scope.navigateToParent = navigateToParent;
-            $scope.$watch("domainObject", checkRoot);
-        }
-
-        return BackArrowController;
-
-
-    }
-);
diff --git a/platform/commonUI/browse/test/BackArrowControllerSpec.js b/platform/commonUI/browse/test/BackArrowControllerSpec.js
deleted file mode 100644
index 9dfe0b5d2e..0000000000
--- a/platform/commonUI/browse/test/BackArrowControllerSpec.js
+++ /dev/null
@@ -1,28 +0,0 @@
-/*****************************************************************************
- * Open MCT Web, Copyright (c) 2014-2015, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT Web is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT Web includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-/*global define,Promise,describe,it,expect,beforeEach,waitsFor,jasmine*/
-
-define(
-    ["../src/BackArrowController"],
-    function (BackArrowController) {
-    }
-);
diff --git a/platform/commonUI/browse/test/suite.json b/platform/commonUI/browse/test/suite.json
index 546cff128e..aa73dd358d 100644
--- a/platform/commonUI/browse/test/suite.json
+++ b/platform/commonUI/browse/test/suite.json
@@ -1,5 +1,4 @@
 [
-    "BackArrowController",
     "BrowseController",
     "BrowseObjectController",
     "BrowseTreeController",

From 884d36ad6def6f7471d739d6e5477bba75a5000f Mon Sep 17 00:00:00 2001
From: Victor Woeltjen <victor.woeltjen@nasa.gov>
Date: Fri, 18 Sep 2015 15:49:55 -0700
Subject: [PATCH 206/209] [Mobile] Test BrowseTreeController variants

---
 .../browse/src/BrowseTreeController.js        | 18 +++-
 .../browse/test/BrowseTreeControllerSpec.js   | 15 +++
 .../mobile/src/MobileBrowseTreeController.js  |  2 +-
 .../test/MobileBrowseTreeControllerSpec.js    | 98 ++++++++++++++++++-
 4 files changed, 126 insertions(+), 7 deletions(-)

diff --git a/platform/commonUI/browse/src/BrowseTreeController.js b/platform/commonUI/browse/src/BrowseTreeController.js
index ee95dc2724..1ad50b8c1e 100644
--- a/platform/commonUI/browse/src/BrowseTreeController.js
+++ b/platform/commonUI/browse/src/BrowseTreeController.js
@@ -21,23 +21,33 @@
  *****************************************************************************/
 /*global define,Promise*/
 
-/**
- * This bundle implements Browse mode.
- * @namespace platform/commonUI/browse
- */
 define(
     [],
     function () {
         "use strict";
 
+
+        /**
+         * Controller to provide the ability to show/hide the tree in
+         * Browse mode.
+         * @constructor
+         * @memberof platform/commonUI/browse
+         */
         function BrowseTreeController() {
             this.state = true;
         }
 
+        /**
+         * Toggle the visibility of the tree.
+         */
         BrowseTreeController.prototype.toggle = function () {
             this.state = !this.state;
         };
 
+        /**
+         * Get the desired visibility state of the tree.
+         * @returns {boolean} true when visible
+         */
         BrowseTreeController.prototype.visible = function () {
             return this.state;
         };
diff --git a/platform/commonUI/browse/test/BrowseTreeControllerSpec.js b/platform/commonUI/browse/test/BrowseTreeControllerSpec.js
index 7783d163d6..4c605dd7b4 100644
--- a/platform/commonUI/browse/test/BrowseTreeControllerSpec.js
+++ b/platform/commonUI/browse/test/BrowseTreeControllerSpec.js
@@ -24,5 +24,20 @@
 define(
     ["../src/BrowseTreeController"],
     function (BrowseTreeController) {
+        'use strict';
+        describe("The BrowseTreeController", function () {
+            var controller = new BrowseTreeController();
+
+            it("is initially visible", function () {
+                expect(controller.visible()).toBeTruthy();
+            });
+
+            it("allows visibility to be toggled", function () {
+                controller.toggle();
+                expect(controller.visible()).toBeFalsy();
+                controller.toggle();
+                expect(controller.visible()).toBeTruthy();
+            });
+        });
     }
 );
diff --git a/platform/commonUI/mobile/src/MobileBrowseTreeController.js b/platform/commonUI/mobile/src/MobileBrowseTreeController.js
index a88aa63088..9cb31fcc5a 100644
--- a/platform/commonUI/mobile/src/MobileBrowseTreeController.js
+++ b/platform/commonUI/mobile/src/MobileBrowseTreeController.js
@@ -42,7 +42,7 @@ define(
                 }
             }
 
-            if (agentService.isMobile()) {
+            if (agentService.isPhone()) {
                 navigationService.addListener(changeObject);
                 $scope.$on("$destroy", function () {
                     navigationService.removeListener(changeObject);
diff --git a/platform/commonUI/mobile/test/MobileBrowseTreeControllerSpec.js b/platform/commonUI/mobile/test/MobileBrowseTreeControllerSpec.js
index daefa35e62..a3be9b0652 100644
--- a/platform/commonUI/mobile/test/MobileBrowseTreeControllerSpec.js
+++ b/platform/commonUI/mobile/test/MobileBrowseTreeControllerSpec.js
@@ -22,8 +22,102 @@
 /*global define,Promise,describe,it,expect,beforeEach,waitsFor,jasmine*/
 
 define(
-    ['../src/MobileBrowseTreeController'],
+    ["../src/MobileBrowseTreeController"],
     function (MobileBrowseTreeController) {
-        "use strict";
+        'use strict';
+
+        describe("The mobile variant of the BrowseTreeController", function () {
+            var mockScope,
+                mockNavigationService,
+                mockAgentService,
+                mockDomainObjects,
+                controller;
+
+            // We want to reinstantiate for each test case
+            // because device state can influence constructor-time behavior
+            function instantiateController() {
+                return new MobileBrowseTreeController(
+                    mockScope,
+                    mockNavigationService,
+                    mockAgentService
+                );
+            }
+
+            beforeEach(function () {
+                mockScope = jasmine.createSpyObj("$scope", [ "$on" ]);
+                mockNavigationService = jasmine.createSpyObj(
+                    "navigationService",
+                    [ "getNavigation", "addListener", "removeListener" ]
+                );
+                mockDomainObjects = ['a', 'b'].map(function (id) {
+                    var mockDomainObject = jasmine.createSpyObj(
+                        'domainObject-' + id,
+                        [ 'getId', 'getModel', 'getCapability' ]
+                    );
+
+                    mockDomainObject.getId.andReturn(id);
+                    mockDomainObject.getModel.andReturn({});
+
+                    return mockDomainObject;
+                });
+                mockAgentService = jasmine.createSpyObj(
+                    "agentService",
+                    [ "isMobile", "isPhone", "isTablet", "isPortrait", "isLandscape" ]
+                );
+
+                mockNavigationService.getNavigation.andReturn(mockDomainObjects[0]);
+            });
+
+            it("is initially visible", function () {
+                expect(instantiateController().visible()).toBeTruthy();
+            });
+
+            it("allows visibility to be toggled", function () {
+                controller = instantiateController();
+                controller.toggle();
+                expect(controller.visible()).toBeFalsy();
+                controller.toggle();
+                expect(controller.visible()).toBeTruthy();
+            });
+
+            it("collapses on navigation changes on portrait-oriented phones", function () {
+                mockAgentService.isMobile.andReturn(true);
+                mockAgentService.isPhone.andReturn(true);
+                mockAgentService.isPortrait.andReturn(true);
+                controller = instantiateController();
+                expect(controller.visible()).toBeTruthy();
+
+                // Simulate a navigation change
+                mockNavigationService.getNavigation.andReturn(mockDomainObjects[1]);
+                mockNavigationService.addListener.calls.forEach(function (call) {
+                    call.args[0](mockDomainObjects[1]);
+                });
+
+                // Tree should have collapsed
+                expect(controller.visible()).toBeFalsy();
+            });
+
+            it("detaches registered listeners when the scope is destroyed", function () {
+                mockAgentService.isMobile.andReturn(true);
+                mockAgentService.isPhone.andReturn(true);
+                mockAgentService.isPortrait.andReturn(true);
+                controller = instantiateController();
+
+                // Verify precondition
+                expect(mockNavigationService.removeListener)
+                    .not.toHaveBeenCalled();
+
+                mockScope.$on.calls.forEach(function (call) {
+                    if (call.args[0] === '$destroy') {
+                        call.args[1]();
+                    }
+                });
+
+                expect(mockNavigationService.removeListener)
+                    .toHaveBeenCalledWith(
+                        mockNavigationService.addListener.mostRecentCall.args[0]
+                    );
+            });
+        });
     }
 );

From 1e6c4732f121423e290b60d91f2427cff46a54c5 Mon Sep 17 00:00:00 2001
From: Victor Woeltjen <victor.woeltjen@nasa.gov>
Date: Fri, 18 Sep 2015 15:55:58 -0700
Subject: [PATCH 207/209] [Mobile] Consolidate BrowseTreeController

Make mobile variant of BrowseTreeController the regular version
of that controller; Browse mode has a dependency on mobile by
way of the mct-device directive anyway.
---
 platform/commonUI/browse/bundle.json          |   4 +-
 .../browse/src/BrowseTreeController.js        |  24 +++-
 .../browse/test/BrowseTreeControllerSpec.js   |  84 +++++++++++-
 platform/commonUI/mobile/bundle.json          |   8 --
 .../mobile/src/MobileBrowseTreeController.js  |  65 ---------
 .../test/MobileBrowseTreeControllerSpec.js    | 123 ------------------
 platform/commonUI/mobile/test/suite.json      |   3 +-
 7 files changed, 108 insertions(+), 203 deletions(-)
 delete mode 100644 platform/commonUI/mobile/src/MobileBrowseTreeController.js
 delete mode 100644 platform/commonUI/mobile/test/MobileBrowseTreeControllerSpec.js

diff --git a/platform/commonUI/browse/bundle.json b/platform/commonUI/browse/bundle.json
index 9478213a0b..602884c09f 100644
--- a/platform/commonUI/browse/bundle.json
+++ b/platform/commonUI/browse/bundle.json
@@ -27,7 +27,9 @@
             },
             {
                 "key": "BrowseTreeController",
-                "implementation": "BrowseTreeController.js"
+                "implementation": "BrowseTreeController.js",
+                "priority": "preferred",
+                "depends": [ "$scope", "navigationService", "agentService" ]
             },
             {
                 "key": "BrowseObjectController",
diff --git a/platform/commonUI/browse/src/BrowseTreeController.js b/platform/commonUI/browse/src/BrowseTreeController.js
index 1ad50b8c1e..a5a408c747 100644
--- a/platform/commonUI/browse/src/BrowseTreeController.js
+++ b/platform/commonUI/browse/src/BrowseTreeController.js
@@ -21,19 +21,39 @@
  *****************************************************************************/
 /*global define,Promise*/
 
+
 define(
     [],
     function () {
         "use strict";
 
-
         /**
          * Controller to provide the ability to show/hide the tree in
          * Browse mode.
          * @constructor
          * @memberof platform/commonUI/browse
          */
-        function BrowseTreeController() {
+        function BrowseTreeController($scope, navigationService, agentService) {
+            var object = navigationService.getNavigation(),
+                self = this;
+
+            // Collapse tree when navigation changes
+            function changeObject(newObject) {
+                if (newObject !== object && agentService.isPortrait()) {
+                    object = newObject;
+                    self.state = false;
+                }
+            }
+
+            // On phones, trees should collapse in portrait mode
+            // when something is navigated-to.
+            if (agentService.isPhone()) {
+                navigationService.addListener(changeObject);
+                $scope.$on("$destroy", function () {
+                    navigationService.removeListener(changeObject);
+                });
+            }
+
             this.state = true;
         }
 
diff --git a/platform/commonUI/browse/test/BrowseTreeControllerSpec.js b/platform/commonUI/browse/test/BrowseTreeControllerSpec.js
index 4c605dd7b4..341a76c82d 100644
--- a/platform/commonUI/browse/test/BrowseTreeControllerSpec.js
+++ b/platform/commonUI/browse/test/BrowseTreeControllerSpec.js
@@ -25,19 +25,99 @@ define(
     ["../src/BrowseTreeController"],
     function (BrowseTreeController) {
         'use strict';
+
         describe("The BrowseTreeController", function () {
-            var controller = new BrowseTreeController();
+            var mockScope,
+                mockNavigationService,
+                mockAgentService,
+                mockDomainObjects,
+                controller;
+
+            // We want to reinstantiate for each test case
+            // because device state can influence constructor-time behavior
+            function instantiateController() {
+                return new BrowseTreeController(
+                    mockScope,
+                    mockNavigationService,
+                    mockAgentService
+                );
+            }
+
+            beforeEach(function () {
+                mockScope = jasmine.createSpyObj("$scope", [ "$on" ]);
+                mockNavigationService = jasmine.createSpyObj(
+                    "navigationService",
+                    [ "getNavigation", "addListener", "removeListener" ]
+                );
+                mockDomainObjects = ['a', 'b'].map(function (id) {
+                    var mockDomainObject = jasmine.createSpyObj(
+                        'domainObject-' + id,
+                        [ 'getId', 'getModel', 'getCapability' ]
+                    );
+
+                    mockDomainObject.getId.andReturn(id);
+                    mockDomainObject.getModel.andReturn({});
+
+                    return mockDomainObject;
+                });
+                mockAgentService = jasmine.createSpyObj(
+                    "agentService",
+                    [ "isMobile", "isPhone", "isTablet", "isPortrait", "isLandscape" ]
+                );
+
+                mockNavigationService.getNavigation.andReturn(mockDomainObjects[0]);
+            });
 
             it("is initially visible", function () {
-                expect(controller.visible()).toBeTruthy();
+                expect(instantiateController().visible()).toBeTruthy();
             });
 
             it("allows visibility to be toggled", function () {
+                controller = instantiateController();
                 controller.toggle();
                 expect(controller.visible()).toBeFalsy();
                 controller.toggle();
                 expect(controller.visible()).toBeTruthy();
             });
+
+            it("collapses on navigation changes on portrait-oriented phones", function () {
+                mockAgentService.isMobile.andReturn(true);
+                mockAgentService.isPhone.andReturn(true);
+                mockAgentService.isPortrait.andReturn(true);
+                controller = instantiateController();
+                expect(controller.visible()).toBeTruthy();
+
+                // Simulate a navigation change
+                mockNavigationService.getNavigation.andReturn(mockDomainObjects[1]);
+                mockNavigationService.addListener.calls.forEach(function (call) {
+                    call.args[0](mockDomainObjects[1]);
+                });
+
+                // Tree should have collapsed
+                expect(controller.visible()).toBeFalsy();
+            });
+
+            it("detaches registered listeners when the scope is destroyed", function () {
+                mockAgentService.isMobile.andReturn(true);
+                mockAgentService.isPhone.andReturn(true);
+                mockAgentService.isPortrait.andReturn(true);
+                controller = instantiateController();
+
+                // Verify precondition
+                expect(mockNavigationService.removeListener)
+                    .not.toHaveBeenCalled();
+
+                mockScope.$on.calls.forEach(function (call) {
+                    if (call.args[0] === '$destroy') {
+                        call.args[1]();
+                    }
+                });
+
+                expect(mockNavigationService.removeListener)
+                    .toHaveBeenCalledWith(
+                        mockNavigationService.addListener.mostRecentCall.args[0]
+                    );
+            });
         });
     }
 );
diff --git a/platform/commonUI/mobile/bundle.json b/platform/commonUI/mobile/bundle.json
index 0037a45259..1ac308a84b 100644
--- a/platform/commonUI/mobile/bundle.json
+++ b/platform/commonUI/mobile/bundle.json
@@ -1,13 +1,5 @@
 {
     "extensions": {
-        "controllers": [
-            {
-                "key": "BrowseTreeController",
-                "implementation": "MobileBrowseTreeController.js",
-                "priority": "preferred",
-                "depends": [ "$scope", "navigationService", "agentService" ]
-            }
-        ],
         "directives": [
             {
                 "key": "mctDevice",
diff --git a/platform/commonUI/mobile/src/MobileBrowseTreeController.js b/platform/commonUI/mobile/src/MobileBrowseTreeController.js
deleted file mode 100644
index 9cb31fcc5a..0000000000
--- a/platform/commonUI/mobile/src/MobileBrowseTreeController.js
+++ /dev/null
@@ -1,65 +0,0 @@
-/*****************************************************************************
- * Open MCT Web, Copyright (c) 2014-2015, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT Web is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT Web includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-/*global define,Promise*/
-
-/**
- * This bundle implements Browse mode.
- * @namespace platform/commonUI/browse
- */
-define(
-    [],
-    function () {
-        "use strict";
-
-        function MobileBrowseTreeController($scope, navigationService, agentService) {
-            var object = navigationService.getNavigation(),
-                self = this;
-
-            // Collapse tree when navigation changes
-            function changeObject(newObject) {
-                if (newObject !== object && agentService.isPortrait()) {
-                    object = newObject;
-                    self.state = false;
-                }
-            }
-
-            if (agentService.isPhone()) {
-                navigationService.addListener(changeObject);
-                $scope.$on("$destroy", function () {
-                    navigationService.removeListener(changeObject);
-                });
-            }
-
-            this.state = true;
-        }
-
-        MobileBrowseTreeController.prototype.toggle = function () {
-            this.state = !this.state;
-        };
-
-        MobileBrowseTreeController.prototype.visible = function () {
-            return this.state;
-        };
-
-        return MobileBrowseTreeController;
-    }
-);
diff --git a/platform/commonUI/mobile/test/MobileBrowseTreeControllerSpec.js b/platform/commonUI/mobile/test/MobileBrowseTreeControllerSpec.js
deleted file mode 100644
index a3be9b0652..0000000000
--- a/platform/commonUI/mobile/test/MobileBrowseTreeControllerSpec.js
+++ /dev/null
@@ -1,123 +0,0 @@
-/*****************************************************************************
- * Open MCT Web, Copyright (c) 2014-2015, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT Web is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT Web includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-/*global define,Promise,describe,it,expect,beforeEach,waitsFor,jasmine*/
-
-define(
-    ["../src/MobileBrowseTreeController"],
-    function (MobileBrowseTreeController) {
-        'use strict';
-
-        describe("The mobile variant of the BrowseTreeController", function () {
-            var mockScope,
-                mockNavigationService,
-                mockAgentService,
-                mockDomainObjects,
-                controller;
-
-            // We want to reinstantiate for each test case
-            // because device state can influence constructor-time behavior
-            function instantiateController() {
-                return new MobileBrowseTreeController(
-                    mockScope,
-                    mockNavigationService,
-                    mockAgentService
-                );
-            }
-
-            beforeEach(function () {
-                mockScope = jasmine.createSpyObj("$scope", [ "$on" ]);
-                mockNavigationService = jasmine.createSpyObj(
-                    "navigationService",
-                    [ "getNavigation", "addListener", "removeListener" ]
-                );
-                mockDomainObjects = ['a', 'b'].map(function (id) {
-                    var mockDomainObject = jasmine.createSpyObj(
-                        'domainObject-' + id,
-                        [ 'getId', 'getModel', 'getCapability' ]
-                    );
-
-                    mockDomainObject.getId.andReturn(id);
-                    mockDomainObject.getModel.andReturn({});
-
-                    return mockDomainObject;
-                });
-                mockAgentService = jasmine.createSpyObj(
-                    "agentService",
-                    [ "isMobile", "isPhone", "isTablet", "isPortrait", "isLandscape" ]
-                );
-
-                mockNavigationService.getNavigation.andReturn(mockDomainObjects[0]);
-            });
-
-            it("is initially visible", function () {
-                expect(instantiateController().visible()).toBeTruthy();
-            });
-
-            it("allows visibility to be toggled", function () {
-                controller = instantiateController();
-                controller.toggle();
-                expect(controller.visible()).toBeFalsy();
-                controller.toggle();
-                expect(controller.visible()).toBeTruthy();
-            });
-
-            it("collapses on navigation changes on portrait-oriented phones", function () {
-                mockAgentService.isMobile.andReturn(true);
-                mockAgentService.isPhone.andReturn(true);
-                mockAgentService.isPortrait.andReturn(true);
-                controller = instantiateController();
-                expect(controller.visible()).toBeTruthy();
-
-                // Simulate a navigation change
-                mockNavigationService.getNavigation.andReturn(mockDomainObjects[1]);
-                mockNavigationService.addListener.calls.forEach(function (call) {
-                    call.args[0](mockDomainObjects[1]);
-                });
-
-                // Tree should have collapsed
-                expect(controller.visible()).toBeFalsy();
-            });
-
-            it("detaches registered listeners when the scope is destroyed", function () {
-                mockAgentService.isMobile.andReturn(true);
-                mockAgentService.isPhone.andReturn(true);
-                mockAgentService.isPortrait.andReturn(true);
-                controller = instantiateController();
-
-                // Verify precondition
-                expect(mockNavigationService.removeListener)
-                    .not.toHaveBeenCalled();
-
-                mockScope.$on.calls.forEach(function (call) {
-                    if (call.args[0] === '$destroy') {
-                        call.args[1]();
-                    }
-                });
-
-                expect(mockNavigationService.removeListener)
-                    .toHaveBeenCalledWith(
-                        mockNavigationService.addListener.mostRecentCall.args[0]
-                    );
-            });
-        });
-    }
-);
diff --git a/platform/commonUI/mobile/test/suite.json b/platform/commonUI/mobile/test/suite.json
index 4858ba366e..b56625efb4 100644
--- a/platform/commonUI/mobile/test/suite.json
+++ b/platform/commonUI/mobile/test/suite.json
@@ -1,5 +1,4 @@
 [
     "AgentService",
-    "MCTDevice",
-    "MobileBrowseTreeController"
+    "MCTDevice"
 ]

From ae4313253cc9769f4295fbd433614b64fe7359c3 Mon Sep 17 00:00:00 2001
From: Victor Woeltjen <victor.woeltjen@nasa.gov>
Date: Fri, 18 Sep 2015 16:47:50 -0700
Subject: [PATCH 208/209] [Mobile] Test mct-device

---
 .../commonUI/mobile/test/MCTDeviceSpec.js     | 136 ++++++++++++++++++
 1 file changed, 136 insertions(+)

diff --git a/platform/commonUI/mobile/test/MCTDeviceSpec.js b/platform/commonUI/mobile/test/MCTDeviceSpec.js
index 3b9bf9dcff..7396c704d7 100644
--- a/platform/commonUI/mobile/test/MCTDeviceSpec.js
+++ b/platform/commonUI/mobile/test/MCTDeviceSpec.js
@@ -25,5 +25,141 @@ define(
     ['../src/MCTDevice'],
     function (MCTDevice) {
         "use strict";
+
+        var JQLITE_METHODS = [ 'parent', 'append' ];
+
+        describe("The mct-device directive", function () {
+            var mockAgentService,
+                mockTransclude,
+                mockElement,
+                mockParent,
+                mockClone,
+                testAttrs,
+                directive;
+
+            function link() {
+                directive.link(null, mockElement, testAttrs, null, mockTransclude);
+            }
+
+            beforeEach(function () {
+                mockAgentService = jasmine.createSpyObj(
+                    "agentService",
+                    [ "isMobile", "isPhone", "isTablet", "isPortrait", "isLandscape" ]
+                );
+                mockTransclude = jasmine.createSpy("$transclude");
+                mockElement = jasmine.createSpyObj(name, JQLITE_METHODS);
+                mockParent = jasmine.createSpyObj(name, JQLITE_METHODS);
+                mockClone = jasmine.createSpyObj(name, JQLITE_METHODS);
+
+                mockElement.parent.andReturn(mockParent);
+
+                mockTransclude.andCallFake(function (fn) {
+                    fn(mockClone);
+                });
+
+                // Look desktop-like by default
+                mockAgentService.isLandscape.andReturn(true);
+
+                testAttrs = {};
+
+                directive = new MCTDevice(mockAgentService);
+            });
+
+            it("is applicable at the attribute level", function () {
+                expect(directive.restrict).toEqual("A");
+            });
+
+            it("transcludes at the elmeent level", function () {
+                expect(directive.transclude).toEqual('element');
+            });
+
+            it("has a greater priority number than ng-if", function () {
+                expect(directive.priority > 600).toBeTruthy();
+            });
+
+            it("restricts element inclusion for mobile devices", function () {
+                testAttrs.mctDevice = "mobile";
+                link();
+                expect(mockParent.append).not.toHaveBeenCalled();
+
+                mockAgentService.isMobile.andReturn(true);
+                link();
+                expect(mockParent.append).toHaveBeenCalledWith(mockClone);
+            });
+
+            it("restricts element inclusion for tablet devices", function () {
+                testAttrs.mctDevice = "tablet";
+                mockAgentService.isMobile.andReturn(true);
+                link();
+                expect(mockParent.append).not.toHaveBeenCalled();
+
+                mockAgentService.isTablet.andReturn(true);
+                link();
+                expect(mockParent.append).toHaveBeenCalledWith(mockClone);
+            });
+
+            it("restricts element inclusion for phone devices", function () {
+                testAttrs.mctDevice = "phone";
+                mockAgentService.isMobile.andReturn(true);
+                link();
+                expect(mockParent.append).not.toHaveBeenCalled();
+
+                mockAgentService.isPhone.andReturn(true);
+                link();
+                expect(mockParent.append).toHaveBeenCalledWith(mockClone);
+            });
+
+            it("restricts element inclusion for desktop devices", function () {
+                testAttrs.mctDevice = "desktop";
+                mockAgentService.isMobile.andReturn(true);
+                link();
+                expect(mockParent.append).not.toHaveBeenCalled();
+
+                mockAgentService.isMobile.andReturn(false);
+                link();
+                expect(mockParent.append).toHaveBeenCalledWith(mockClone);
+            });
+
+            it("restricts element inclusion for portrait orientation", function () {
+                testAttrs.mctDevice = "portrait";
+                link();
+                expect(mockParent.append).not.toHaveBeenCalled();
+
+                mockAgentService.isPortrait.andReturn(true);
+                link();
+                expect(mockParent.append).toHaveBeenCalledWith(mockClone);
+            });
+
+            it("restricts element inclusion for landscape orientation", function () {
+                testAttrs.mctDevice = "landscape";
+                mockAgentService.isLandscape.andReturn(false);
+                mockAgentService.isPortrait.andReturn(true);
+                link();
+                expect(mockParent.append).not.toHaveBeenCalled();
+
+                mockAgentService.isLandscape.andReturn(true);
+                link();
+                expect(mockParent.append).toHaveBeenCalledWith(mockClone);
+            });
+
+            it("allows multiple device characteristics to be requested", function () {
+                // Won't try to test every permutation here, just
+                // make sure the multi-characteristic feature has support.
+                testAttrs.mctDevice = "portrait mobile";
+                link();
+                // Neither portrait nor mobile, not called
+                expect(mockParent.append).not.toHaveBeenCalled();
+
+                mockAgentService.isPortrait.andReturn(true);
+                link();
+
+                // Was portrait, but not mobile, so no
+                expect(mockParent.append).not.toHaveBeenCalled();
+
+                mockAgentService.isMobile.andReturn(true);
+                link();
+                expect(mockParent.append).toHaveBeenCalledWith(mockClone);
+            });
+        });
     }
 );

From 0c1f77cfabbcb6e87b79821d091cb112db1eef0b Mon Sep 17 00:00:00 2001
From: Victor Woeltjen <victor.woeltjen@nasa.gov>
Date: Mon, 21 Sep 2015 10:53:45 -0700
Subject: [PATCH 209/209] [Mobile] Collapse tree on click

Collapse tree any time a user does an action in the
tree that would select an object; don't only do this
on navigation changes, because this fails to detect
occasions where user clicks the already-navigated-to
object.
---
 platform/commonUI/browse/bundle.json          |  2 +-
 .../commonUI/browse/res/templates/browse.html |  4 +-
 .../browse/src/BrowseTreeController.js        | 39 ++++++++++---------
 .../browse/test/BrowseTreeControllerSpec.js   | 37 +-----------------
 .../general/res/templates/subtree.html        |  1 +
 .../general/res/templates/tree-node.html      | 12 +++---
 .../commonUI/general/res/templates/tree.html  |  3 +-
 .../src/controllers/TreeNodeController.js     | 25 ++++++++++++
 .../controllers/TreeNodeControllerSpec.js     | 17 +++++++-
 9 files changed, 75 insertions(+), 65 deletions(-)

diff --git a/platform/commonUI/browse/bundle.json b/platform/commonUI/browse/bundle.json
index 602884c09f..558dc389c1 100644
--- a/platform/commonUI/browse/bundle.json
+++ b/platform/commonUI/browse/bundle.json
@@ -29,7 +29,7 @@
                 "key": "BrowseTreeController",
                 "implementation": "BrowseTreeController.js",
                 "priority": "preferred",
-                "depends": [ "$scope", "navigationService", "agentService" ]
+                "depends": [ "$scope", "agentService" ]
             },
             {
                 "key": "BrowseObjectController",
diff --git a/platform/commonUI/browse/res/templates/browse.html b/platform/commonUI/browse/res/templates/browse.html
index 0e510fd014..e6255bcb55 100644
--- a/platform/commonUI/browse/res/templates/browse.html
+++ b/platform/commonUI/browse/res/templates/browse.html
@@ -41,6 +41,7 @@
                          ng-hide="treeModel.search">
                         <mct-representation key="'tree'"
                                             mct-object="domainObject"
+                                            parameters="tree"
                                             ng-model="treeModel">
                         </mct-representation>
                     </div>
@@ -51,7 +52,8 @@
 
             <div class='split-pane-component items pane right-repr'>
                 <div class='holder abs l-mobile' id='content-area'>
-                    <mct-representation mct-object="navigatedObject" key="'browse-object'">
+                    <mct-representation mct-object="navigatedObject"
+                                        key="'browse-object'">
                     </mct-representation>
                 </div>
                 <div class="key-properties ui-symbol icon mobile-menu-icon desktop-hide"
diff --git a/platform/commonUI/browse/src/BrowseTreeController.js b/platform/commonUI/browse/src/BrowseTreeController.js
index a5a408c747..31875de4fa 100644
--- a/platform/commonUI/browse/src/BrowseTreeController.js
+++ b/platform/commonUI/browse/src/BrowseTreeController.js
@@ -33,28 +33,29 @@ define(
          * @constructor
          * @memberof platform/commonUI/browse
          */
-        function BrowseTreeController($scope, navigationService, agentService) {
-            var object = navigationService.getNavigation(),
-                self = this;
+        function BrowseTreeController($scope, agentService) {
+            var self = this;
+            this.agentService = agentService;
+            this.state = true;
 
-            // Collapse tree when navigation changes
-            function changeObject(newObject) {
-                if (newObject !== object && agentService.isPortrait()) {
-                    object = newObject;
+            /**
+             * Callback to invoke when any selection occurs in the tree.
+             * This controller can be passed in as the `parameters` object
+             * to the tree representation.
+             *
+             * @property {Function} callback
+             * @memberof platform/commonUI/browse.BrowseTreeController#
+             */
+            this.callback = function () {
+                // Note that, since this is a callback to pass, this is not
+                // declared as a method but as a property which happens to
+                // be a function.
+                if (agentService.isPhone() && agentService.isPortrait()) {
+                    // On phones, trees should collapse in portrait mode
+                    // when something is navigated-to.
                     self.state = false;
                 }
-            }
-
-            // On phones, trees should collapse in portrait mode
-            // when something is navigated-to.
-            if (agentService.isPhone()) {
-                navigationService.addListener(changeObject);
-                $scope.$on("$destroy", function () {
-                    navigationService.removeListener(changeObject);
-                });
-            }
-
-            this.state = true;
+            };
         }
 
         /**
diff --git a/platform/commonUI/browse/test/BrowseTreeControllerSpec.js b/platform/commonUI/browse/test/BrowseTreeControllerSpec.js
index 341a76c82d..077855febf 100644
--- a/platform/commonUI/browse/test/BrowseTreeControllerSpec.js
+++ b/platform/commonUI/browse/test/BrowseTreeControllerSpec.js
@@ -28,7 +28,6 @@ define(
 
         describe("The BrowseTreeController", function () {
             var mockScope,
-                mockNavigationService,
                 mockAgentService,
                 mockDomainObjects,
                 controller;
@@ -38,17 +37,12 @@ define(
             function instantiateController() {
                 return new BrowseTreeController(
                     mockScope,
-                    mockNavigationService,
                     mockAgentService
                 );
             }
 
             beforeEach(function () {
                 mockScope = jasmine.createSpyObj("$scope", [ "$on" ]);
-                mockNavigationService = jasmine.createSpyObj(
-                    "navigationService",
-                    [ "getNavigation", "addListener", "removeListener" ]
-                );
                 mockDomainObjects = ['a', 'b'].map(function (id) {
                     var mockDomainObject = jasmine.createSpyObj(
                         'domainObject-' + id,
@@ -64,8 +58,6 @@ define(
                     "agentService",
                     [ "isMobile", "isPhone", "isTablet", "isPortrait", "isLandscape" ]
                 );
-
-                mockNavigationService.getNavigation.andReturn(mockDomainObjects[0]);
             });
 
             it("is initially visible", function () {
@@ -87,37 +79,12 @@ define(
                 controller = instantiateController();
                 expect(controller.visible()).toBeTruthy();
 
-                // Simulate a navigation change
-                mockNavigationService.getNavigation.andReturn(mockDomainObjects[1]);
-                mockNavigationService.addListener.calls.forEach(function (call) {
-                    call.args[0](mockDomainObjects[1]);
-                });
+                // Simulate a change from the tree by invoking controller's
+                controller.callback();
 
                 // Tree should have collapsed
                 expect(controller.visible()).toBeFalsy();
             });
-
-            it("detaches registered listeners when the scope is destroyed", function () {
-                mockAgentService.isMobile.andReturn(true);
-                mockAgentService.isPhone.andReturn(true);
-                mockAgentService.isPortrait.andReturn(true);
-                controller = instantiateController();
-
-                // Verify precondition
-                expect(mockNavigationService.removeListener)
-                    .not.toHaveBeenCalled();
-
-                mockScope.$on.calls.forEach(function (call) {
-                    if (call.args[0] === '$destroy') {
-                        call.args[1]();
-                    }
-                });
-
-                expect(mockNavigationService.removeListener)
-                    .toHaveBeenCalledWith(
-                        mockNavigationService.addListener.mostRecentCall.args[0]
-                    );
-            });
         });
     }
 );
diff --git a/platform/commonUI/general/res/templates/subtree.html b/platform/commonUI/general/res/templates/subtree.html
index f459e8ebf8..637b73a8c4 100644
--- a/platform/commonUI/general/res/templates/subtree.html
+++ b/platform/commonUI/general/res/templates/subtree.html
@@ -29,6 +29,7 @@
     <li ng-repeat="child in composition">
         <mct-representation key="'tree-node'"
                             mct-object="child"
+                            parameters="parameters"
                             ng-model="ngModel">
         </mct-representation>
     </li>
diff --git a/platform/commonUI/general/res/templates/tree-node.html b/platform/commonUI/general/res/templates/tree-node.html
index a6d3560ee0..885646d606 100644
--- a/platform/commonUI/general/res/templates/tree-node.html
+++ b/platform/commonUI/general/res/templates/tree-node.html
@@ -39,7 +39,7 @@
                 class="mobile-hide"
                 key="'label'"
                 mct-object="domainObject"
-                ng-click="ngModel.selectedObject = domainObject"
+                ng-click="treeNode.select()"
                 >
             </mct-representation>
             <mct-representation
@@ -47,12 +47,9 @@
                 class="desktop-hide"
                 key="'label'"
                 mct-object="domainObject"
-                ng-click="ngModel.selectedObject =
-                              model.composition === undefined ?
-                                  domainObject : ngModel.selectedObject;
+                ng-click="(model.composition === undefined) && treeNode.select();
                           toggle.toggle();
-                          treeNode.trackExpansion();
-                          "
+                          treeNode.trackExpansion();"
                 >
             </mct-representation>
 
@@ -60,7 +57,7 @@
                 mct-device="mobile"
                 class='ui-symbol view-control'
                 ng-model="ngModel"
-                ng-click="ngModel.selectedObject = domainObject"
+                ng-click="treeNode.select()"
                 >
                 }
             </span>
@@ -73,6 +70,7 @@
 
             <mct-representation key="'subtree'"
                                 ng-model="ngModel"
+                                parameters="parameters"
                                 mct-object="treeNode.hasBeenExpanded() && domainObject">
             </mct-representation>
 
diff --git a/platform/commonUI/general/res/templates/tree.html b/platform/commonUI/general/res/templates/tree.html
index bf807991b6..5ecdfb98c7 100644
--- a/platform/commonUI/general/res/templates/tree.html
+++ b/platform/commonUI/general/res/templates/tree.html
@@ -23,7 +23,8 @@
     <li>
         <mct-representation key="'tree-node'"
                             mct-object="domainObject"
-                            ng-model="ngModel">
+                            ng-model="ngModel"
+                            parameters="parameters">
         </mct-representation>
     </li>
 </ul>
diff --git a/platform/commonUI/general/src/controllers/TreeNodeController.js b/platform/commonUI/general/src/controllers/TreeNodeController.js
index 7c21ee46aa..3efcf82d28 100644
--- a/platform/commonUI/general/src/controllers/TreeNodeController.js
+++ b/platform/commonUI/general/src/controllers/TreeNodeController.js
@@ -48,6 +48,15 @@ define(
          * node expansion when this tree node's _subtree_ will contain
          * the navigated object (recursively, this becomes an
          * expand-to-show-navigated-object behavior.)
+         *
+         * Finally, if a `callback` property is passed in through the
+         * `parameters` attribute of the `tree-node`, that callback
+         * will be invoked whenever a user clicks in a manner which
+         * would result in a selection. This callback is invoked
+         * even if the selection does not change (if you are only
+         * interested in changes, watch the `selectedObject` property
+         * of the object passed in `ng-model` instead.)
+         *
          * @memberof platform/commonUI/general
          * @constructor
          */
@@ -140,6 +149,22 @@ define(
             $scope.$watch("domainObject", checkSelection);
         }
 
+        /**
+         * Select the domain object represented by this node in the tree.
+         * This will both update the `selectedObject` property in
+         * the object passed in via `ng-model`, and will fire any `callback`
+         * passed in via `parameters`.
+         */
+        TreeNodeController.prototype.select = function () {
+            if (this.$scope.ngModel) {
+                this.$scope.ngModel.selectedObject =
+                    this.$scope.domainObject;
+            }
+            if ((this.$scope.parameters || {}).callback) {
+                this.$scope.parameters.callback(this.$scope.domainObject);
+            }
+        };
+
         /**
          * This method should be called when a node is expanded
          * to record that this has occurred, to support one-time
diff --git a/platform/commonUI/general/test/controllers/TreeNodeControllerSpec.js b/platform/commonUI/general/test/controllers/TreeNodeControllerSpec.js
index f2e5d1ae2d..52a8271bf2 100644
--- a/platform/commonUI/general/test/controllers/TreeNodeControllerSpec.js
+++ b/platform/commonUI/general/test/controllers/TreeNodeControllerSpec.js
@@ -47,7 +47,6 @@ define(
                 mockScope = jasmine.createSpyObj("$scope", ["$watch", "$on", "$emit"]);
                 mockTimeout = jasmine.createSpy("$timeout");
                 mockAgentService = jasmine.createSpyObj("agentService", ["isMobile", "isPhone", "getOrientation"]);
-                mockNgModel = jasmine.createSpyObj("ngModel", ["selectedObject"]);
                 mockDomainObject = jasmine.createSpyObj(
                     "domainObject",
                     [ "getId", "getCapability", "getModel", "useCapability" ]
@@ -196,6 +195,22 @@ define(
                 expect(controller.isSelected()).toBeFalsy();
 
             });
+
+            it("exposes selected objects in scope", function () {
+                mockScope.domainObject = mockDomainObject;
+                mockScope.ngModel = {};
+                controller.select();
+                expect(mockScope.ngModel.selectedObject)
+                    .toEqual(mockDomainObject);
+            });
+
+            it("invokes optional callbacks upon selection", function () {
+                mockScope.parameters =
+                    { callback: jasmine.createSpy('callback') };
+                controller.select();
+                expect(mockScope.parameters.callback).toHaveBeenCalled();
+            });
+
         });
     }
 );