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

[Mobile] Size Adjustment

Browse Source 
Adjusted indentation size
on the tree. Also change size of the
hamburger icon to match the
object icon and moved it slightly
down.
This commit is contained in:
Shivam Dave 2015-07-24 12:35:19 -07:00
parent 2355d354b3
commit b37ee19fbc
8 changed files with 29 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -353,18 +353,18 @@
* at runtime from the About dialog for additional information. * 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) { @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 */ /* line 35, ../sass/mobile/_item.scss */
.items-holder .item.grid-item .bar.bottom-bar.abs { .items-holder .item.grid-item .bar.bottom-bar.abs {
top: 0px; top: 0px;
height: auto; } height: auto; }
/* line 43, ../sass/mobile/_item.scss */ /* line 41, ../sass/mobile/_item.scss */
.items-holder .item.grid-item .item-main .item-type { .items-holder .item.grid-item .item-main .item-type {
font-size: 30px; font-size: 30px;
text-align: left; } text-align: left; }
/* line 48, ../sass/mobile/_item.scss */ /* line 45, ../sass/mobile/_item.scss */
.items-holder .item.grid-item .item-main .item-open { .items-holder .item.grid-item .item-main .item-open {
display: none; } display: none; }
/* line 53, ../sass/mobile/_item.scss */ /* line 49, ../sass/mobile/_item.scss */
.items-holder .item.grid-item .title, .items-holder .item.grid-item .details { .items-holder .item.grid-item .title, .items-holder .item.grid-item .details {
margin-left: 30px; } } 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) { @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) {
@ -372,14 +372,14 @@
.items-holder .item.grid-item { .items-holder .item.grid-item {
width: 100%; width: 100%;
height: 50px; } height: 50px; }
/* line 63, ../sass/mobile/_item.scss */ /* line 59, ../sass/mobile/_item.scss */
.items-holder .item.grid-item .item-main .item-type { .items-holder .item.grid-item .item-main .item-type {
line-height: 40px; } line-height: 40px; }
/* line 68, ../sass/mobile/_item.scss */ /* line 63, ../sass/mobile/_item.scss */
.items-holder .item.grid-item .title { .items-holder .item.grid-item .title {
margin-right: 10px; margin-right: 10px;
line-height: 25px; } line-height: 25px; }
/* line 74, ../sass/mobile/_item.scss */ /* line 67, ../sass/mobile/_item.scss */
.items-holder .item.grid-item .details { .items-holder .item.grid-item .details {
margin-right: 10px; margin-right: 10px;
line-height: 0px; } } line-height: 0px; } }
@ -388,15 +388,15 @@
.items-holder .item.grid-item { .items-holder .item.grid-item {
width: 100%; width: 100%;
height: 66.66667px; } height: 66.66667px; }
/* line 86, ../sass/mobile/_item.scss */ /* line 78, ../sass/mobile/_item.scss */
.items-holder .item.grid-item .item-main .item-type { .items-holder .item.grid-item .item-main .item-type {
font-size: 30px; font-size: 30px;
line-height: 50px; } line-height: 50px; }
/* line 93, ../sass/mobile/_item.scss */ /* line 83, ../sass/mobile/_item.scss */
.items-holder .item.grid-item .title { .items-holder .item.grid-item .title {
margin-right: 10px; margin-right: 10px;
line-height: 38px; } line-height: 38px; }
/* line 99, ../sass/mobile/_item.scss */ /* line 87, ../sass/mobile/_item.scss */
.items-holder .item.grid-item .details { .items-holder .item.grid-item .details {
margin-right: 10px; margin-right: 10px;
line-height: 0px; } } line-height: 0px; } }

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

@ -851,29 +851,24 @@ mct-container {
.button-pos { .button-pos {
position: absolute; } } position: absolute; } }
@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) { @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 138, ../sass/mobile/_layout.scss */ /* line 138, ../sass/mobile/_layout.scss */
.object-header-mobile { .object-header-mobile {
position: relative; position: relative;
left: 30px; } } left: 44px; } }
@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 138, ../sass/mobile/_layout.scss */
.object-header-mobile {
position: relative;
left: 35px; } }
@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) { @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 150, ../sass/mobile/_layout.scss */ /* line 146, ../sass/mobile/_layout.scss */
.mobile-hide { .mobile-hide {
display: none; } } display: none; } }
@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) { @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 157, ../sass/mobile/_layout.scss */ /* line 153, ../sass/mobile/_layout.scss */
.phone-hide { .phone-hide {
display: none; } } display: none; } }
@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) { @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 163, ../sass/mobile/_layout.scss */ /* line 159, ../sass/mobile/_layout.scss */
.tree-holder { .tree-holder {
overflow-x: hidden !important; } } overflow-x: hidden !important; } }
@ -2903,14 +2898,11 @@ label.checkbox.custom {
/* line 25, ../sass/mobile/controls/_menus.scss */ /* line 25, ../sass/mobile/controls/_menus.scss */
.mobile-menu-icon { .mobile-menu-icon {
display: inline-block; } display: inline-block; }
@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) { @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 25, ../sass/mobile/controls/_menus.scss */ /* line 25, ../sass/mobile/controls/_menus.scss */
.mobile-menu-icon { .mobile-menu-icon {
font-size: 25px; } } font-size: 21px;
@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) { margin-top: 1px; } }
/* line 25, ../sass/mobile/controls/_menus.scss */
.mobile-menu-icon {
font-size: 29px; } }
@media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) { @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
/* line 25, ../sass/mobile/controls/_menus.scss */ /* line 25, ../sass/mobile/controls/_menus.scss */
.mobile-menu-icon { .mobile-menu-icon {

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

@ -341,5 +341,4 @@ ul.tree {
right: 16.9px; } right: 16.9px; }
/* line 58, ../sass/mobile/_tree.scss */ /* line 58, ../sass/mobile/_tree.scss */
ul.tree ul.tree { ul.tree ul.tree {
margin-left: 0px; margin-left: 7px; } }
padding-left: 3px; } }

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

@ -29,7 +29,8 @@ $tablet-itemHeight: $ueBrowseGridItemLg/3;
/************************** MOBILE TREE MENU DIMENSIONS */ /************************** MOBILE TREE MENU DIMENSIONS */
$mobile-treeHeight: 38px; $mobile-treeHeight: 38px;
$mobile-treeLeft: 3px; $mobile-startingTreeLeft: 3px;
$mobile-runningTreeLeft: 7px;
$mobile-treeRight: 13px; $mobile-treeRight: 13px;
/************************** WINDOW DIMENSIONS FOR RWD */ /************************** WINDOW DIMENSIONS FOR RWD */

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

@ -31,25 +31,21 @@
$dHei: $ueBrowseGridItemLg; $dHei: $ueBrowseGridItemLg;
@include phoneandtablet { @include phoneandtablet {
$dWid: 100%; $dWid: 100%;
.bar { .bar {
&.bottom-bar.abs { &.bottom-bar.abs {
top: 0px; top: 0px;
height: auto; height: auto;
} }
} }
.item-main { .item-main {
.item-type { .item-type {
font-size: $mobile-listIcon; font-size: $mobile-listIcon;
text-align: left; text-align: left;
} }
.item-open { .item-open {
display: none; display: none;
} }
} }
.title, .details { .title, .details {
margin-left: $mobile-listIcon; margin-left: $mobile-listIcon;
} }
@ -64,13 +60,10 @@
line-height: $phone-itemHeight * .8; line-height: $phone-itemHeight * .8;
} }
} }
.title { .title {
margin-right: $mobile-listRight; margin-right: $mobile-listRight;
line-height: $phone-itemHeight * .5; line-height: $phone-itemHeight * .5;
} }
.details { .details {
margin-right: $mobile-listRight; margin-right: $mobile-listRight;
line-height: 0px; line-height: 0px;
@ -81,21 +74,16 @@
$dHei: $tablet-itemHeight; $dHei: $tablet-itemHeight;
width: $dWid; width: $dWid;
height: $dHei; height: $dHei;
.item-main { .item-main {
.item-type { .item-type {
font-size: $mobile-listIcon; font-size: $mobile-listIcon;
line-height: $tablet-itemHeight * .75; line-height: $tablet-itemHeight * .75;
} }
} }
.title { .title {
margin-right: $mobile-listRight; margin-right: $mobile-listRight;
line-height: $tablet-itemHeight * .57; line-height: $tablet-itemHeight * .57;
} }
.details { .details {
margin-right: $mobile-listRight; margin-right: $mobile-listRight;
line-height: 0px; line-height: 0px;

8
platform/commonUI/general/res/sass/mobile/_layout.scss
View File

@ -136,13 +136,9 @@
// over to make space for the // over to make space for the
// hamburger icon // hamburger icon
.object-header-mobile { .object-header-mobile {
@include phone { @include phoneandtablet {
position: relative; position: relative;
left: 30px; left: 44px;
}
@include tablet {
position: relative;
left: 35px;
} }
} }

5
platform/commonUI/general/res/sass/mobile/_tree.scss
View File

@ -42,7 +42,7 @@ ul.tree {
.label { .label {
// Designates the starting left margin // Designates the starting left margin
// (indentation) of 'My Items' // (indentation) of 'My Items'
left: $mobile-treeLeft; left: $mobile-startingTreeLeft;
font-size: 1.2em; font-size: 1.2em;
// Allows tree item name to stop prior // Allows tree item name to stop prior
// to the arrow // to the arrow
@ -56,8 +56,7 @@ ul.tree {
// Sets the margin on the left, which causes the // Sets the margin on the left, which causes the
// running indentation after each folder is made // running indentation after each folder is made
ul.tree { ul.tree {
margin-left: 0px; margin-left: $mobile-runningTreeLeft;
padding-left: $mobile-treeLeft;
} }
} }
} }

8
platform/commonUI/general/res/sass/mobile/controls/_menus.scss
View File

@ -24,12 +24,10 @@
// sized according to the device // sized according to the device
.mobile-menu-icon { .mobile-menu-icon {
display: inline-block; display: inline-block;
@include phone { @include phoneandtablet {
font-size: 25px; font-size: 21px;
margin-top: 1px;
} }
@include tablet {
font-size: 29px;
}
@include desktop { @include desktop {
display: none; display: none;
} }