ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-02-03 01:30:44 +00:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

[Mobile] Resize

Browse Source 
Resized the height of each
item in grid based on new
tablet/phone widths.
This commit is contained in:
Dave 2015-07-07 14:01:57 -07:00
parent 8a0b77ec5c
commit 1ddb00c8d6
3 changed files with 28 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -137,12 +137,12 @@
margin-bottom: 3px; margin-bottom: 3px;
margin-right: 3px; margin-right: 3px;
position: relative; } position: relative; }
@media screen and (max-width: 400px) { @media screen and (max-width: 514px) {
/* line 29, ../sass/items/_item.scss */ /* line 29, ../sass/items/_item.scss */
.items-holder .item.grid-item { .items-holder .item.grid-item {
width: 100%; width: 100%;
height: 50px; } } height: 50px; } }
@media screen and (min-width: 401px) and (max-width: 800px) { @media screen and (min-width: 515px) and (max-width: 800px) {
/* line 29, ../sass/items/_item.scss */ /* line 29, ../sass/items/_item.scss */
.items-holder .item.grid-item { .items-holder .item.grid-item {
width: 100%; width: 100%;
@ -214,12 +214,20 @@
.items-holder .item.grid-item .item-main { .items-holder .item.grid-item .item-main {
line-height: 160px; line-height: 160px;
z-index: 1; } z-index: 1; }
/* line 105, ../sass/items/_item.scss */ @media screen and (max-width: 514px) {
/* line 99, ../sass/items/_item.scss */
.items-holder .item.grid-item .item-main {
display: none; } }
@media screen and (min-width: 515px) and (max-width: 800px) {
/* line 99, ../sass/items/_item.scss */
.items-holder .item.grid-item .item-main {
display: none; } }
/* line 112, ../sass/items/_item.scss */
.items-holder .item.grid-item .item-main .item-type { .items-holder .item.grid-item .item-main .item-type {
color: #737373; color: #737373;
text-align: center; text-align: center;
font-size: 6em; } font-size: 6em; }
/* line 111, ../sass/items/_item.scss */ /* line 118, ../sass/items/_item.scss */
.items-holder .item.grid-item .item-main .item-open { .items-holder .item.grid-item .item-main .item-open {
-moz-transition-property: "opacity"; -moz-transition-property: "opacity";
-o-transition-property: "opacity"; -o-transition-property: "opacity";
@ -239,17 +247,17 @@
width: 50px; width: 50px;
pointer-events: none; pointer-events: none;
text-align: right; } text-align: right; }
/* line 123, ../sass/items/_item.scss */ /* line 130, ../sass/items/_item.scss */
.items-holder .item.grid-item .title { .items-holder .item.grid-item .title {
text-shadow: rgba(0, 0, 0, 0.1) 0 1px 2px; text-shadow: rgba(0, 0, 0, 0.1) 0 1px 2px;
color: #cccccc; color: #cccccc;
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; } text-overflow: ellipsis; }
/* line 131, ../sass/items/_item.scss */ /* line 138, ../sass/items/_item.scss */
.items-holder .item.grid-item .details { .items-holder .item.grid-item .details {
font-size: 0.8em; } font-size: 0.8em; }
/* line 134, ../sass/items/_item.scss */ /* line 141, ../sass/items/_item.scss */
.items-holder .item.grid-item.selected { .items-holder .item.grid-item.selected {
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzBhYzJmZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwYjRmMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzBhYzJmZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwYjRmMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
background-size: 100%; background-size: 100%;
@ -286,15 +294,15 @@
/* line 182, ../sass/_mixins.scss */ /* line 182, ../sass/_mixins.scss */
.items-holder .item.grid-item.selected.btn-menu .invoke-menu { .items-holder .item.grid-item.selected.btn-menu .invoke-menu {
color: #52d4ff; } color: #52d4ff; }
/* line 139, ../sass/items/_item.scss */ /* line 146, ../sass/items/_item.scss */
.items-holder .item.grid-item.selected .item-type, .items-holder .item.grid-item.selected .top-bar .icon:not(.alert) { .items-holder .item.grid-item.selected .item-type, .items-holder .item.grid-item.selected .top-bar .icon:not(.alert) {
color: #80dfff; } color: #80dfff; }
/* line 140, ../sass/items/_item.scss */ /* line 147, ../sass/items/_item.scss */
.items-holder .item.grid-item.selected .item-main .item-open { .items-holder .item.grid-item.selected .item-main .item-open {
color: #80dfff; } color: #80dfff; }
/* line 141, ../sass/items/_item.scss */ /* line 148, ../sass/items/_item.scss */
.items-holder .item.grid-item.selected .title { .items-holder .item.grid-item.selected .title {
color: white; } color: white; }
/* line 143, ../sass/items/_item.scss */ /* line 150, ../sass/items/_item.scss */
.items-holder .item.grid-item.selected:hover .item-main .item-type { .items-holder .item.grid-item.selected:hover .item-main .item-type {
color: white !important; } color: white !important; }

4
platform/commonUI/general/res/sass/_constants.scss
View File

@ -34,8 +34,8 @@ $smallCr: 2px;
$badgeW: 35px; $badgeW: 35px;
/************************** WINDOW DIMENSIONS FOR RWD */ /************************** WINDOW DIMENSIONS FOR RWD */
$phoMaxW: 400px; $phoMaxW: 514px;
$tabMinW: 401px; $tabMinW: 515px;
$tabMaxW: 800px; $tabMaxW: 800px;
$compMinW: 801px; $compMinW: 801px;
$compMinH: 1281px; $compMinH: 1281px;

7
platform/commonUI/general/res/sass/items/_item.scss
View File

@ -97,6 +97,13 @@
} }
} }
.item-main { .item-main {
@include phone {
display: none;
}
@include tablet {
display: none;
}
$h: $ueBrowseGridItemLg; $h: $ueBrowseGridItemLg;
$lh: $h * 0.8; $lh: $h * 0.8;
//top: $ueBrowseGridItemTopBarH; bottom: $ueBrowseGridItemBottomBarH; //top: $ueBrowseGridItemTopBarH; bottom: $ueBrowseGridItemBottomBarH;