alihan/openmct
1
0
Fork 0
Code Issues Pull Requests 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
Download Patch File Download Diff File Expand all files Collapse all files

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