ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-03-24 04:55:21 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

[Mobile] Items List

Browse Source 
Flushes items left and
vertically centers the
title/details. Also cleaned
up the items classes in sass
files.
This commit is contained in:
Shivam Dave 2015-07-24 11:46:58 -07:00
parent 200c6e49fc
commit 2355d354b3
6 changed files with 82 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
platform/commonUI/general/res/css/forms.css
View File

@ -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 */

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

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

1
platform/commonUI/general/res/css/theme-espresso.css
View File

@ -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 */

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

@ -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 */

7
platform/commonUI/general/res/sass/mobile/_constants.scss
View File

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

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

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