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

[Mobile] Grid List/Gestures

Browse Source 
Context menu only shown with contextmenu
click on desktops (non-mobile devices). Also
edited items list in a folder's representation
to show the icon on the left side, with text
centered horizontally (only mobile).
This commit is contained in:
Shivam Dave
2015-07-23 16:47:57 -07:00
parent 7993e4c03f
commit a89f9eed42
4 changed files with 86 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -355,18 +355,42 @@
/* line 28, ../sass/mobile/_item.scss */
.items-holder .item.grid-item {
width: 100%;
height: 50px; } }
height: 50px; }
/* line 38, ../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 */
.items-holder .item.grid-item .title {
text-align: center; }
/* line 57, ../sass/mobile/_item.scss */
.items-holder .item.grid-item .details {
text-align: center; } }
@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 */
.items-holder .item.grid-item {
width: 100%;
height: 100px; } }
height: 66.66667px; }
/* line 69, ../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 */
.items-holder .item.grid-item .title {
text-align: center; }
/* line 88, ../sass/mobile/_item.scss */
.items-holder .item.grid-item .details {
text-align: center; } }
@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 */
.items-holder .item.grid-item {
width: 200px;
height: 200px; } }
@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 52, ../sass/mobile/_item.scss */
.items-holder .item.grid-item .icon {
display: none; } }

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

@@ -33,13 +33,61 @@
$dHei: $ueBrowseGridItemLg/4;
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/5;
text-align: left;
}
.item-open {
// NOTE: [Mobile] Icon for the open item inside folder
display: none;
}
}
.title {
text-align: center;
}
.details {
text-align: center;
}
}
@include tablet {
$dWid: 100%;
$dHei: $ueBrowseGridItemLg/2;
$dHei: $ueBrowseGridItemLg/3;
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;
}
}
.title {
text-align: center;
}
.details {
text-align: center;
}
}
@include desktop {
@@ -48,12 +96,6 @@
width: $dWid;
height: $dHei;
}
.icon {
@include phoneandtablet {
display: none;
}
}
}
}
}