mirror of
https://github.com/nasa/openmct.git
synced 2024-12-20 13:43:09 +00:00
[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;
This commit is contained in:
Charles Hacskaylo
parent
3484b315cf
commit
67592def90
@ -24,7 +24,7 @@
|
||||
<div class='contents abs'>
|
||||
<div class='top-bar bar abs'>
|
||||
<div class='ui-symbol profile' title='Shared'>O</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'>
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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'></a>
|
||||
|
||||
|
||||
@ -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(
|
||||
|
||||
Loading…
Reference in New Issue
Block a user