alihan/openmct
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[Mobile] Menu

Browse Source 
Added margin to top of tree list items.
Also removed hovering Info coming
up on mobile devices.
This commit is contained in:
Shivam Dave
2015-07-21 16:19:59 -07:00
parent 0842f464db
commit 827cb27f28
5 changed files with 48 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
platform/commonUI/general/res/css/tree.css
View File

@@ -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; } }

3
platform/commonUI/general/res/sass/mobile/_tree.scss
View File

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

8
platform/commonUI/general/res/templates/tree-node.html
View File

@@ -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"