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

[Mobile] Info Button

Browse Source 
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.
This commit is contained in:
Shivam Dave
2015-07-31 11:13:52 -07:00
parent eca52a8ca6
commit 560a2e035e
6 changed files with 162 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
platform/commonUI/general/res/css/items.css
View File

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

21
platform/commonUI/general/res/sass/mobile/_item.scss
View File

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