mirror of
https://github.com/nasa/openmct.git
synced 2024-12-20 13:43:09 +00:00
[Mobile] Clean-up
Cleaned up scss and also, the edit/new tab/full screen buttons are hidden in mobile, temporarily.
This commit is contained in:
parent
f3678d9d52
commit
6f07a21bb8
@ -25,8 +25,8 @@
|
|||||||
<mct-representation key="'object-header'" mct-object="domainObject">
|
<mct-representation key="'object-header'" mct-object="domainObject">
|
||||||
</mct-representation>
|
</mct-representation>
|
||||||
</div>
|
</div>
|
||||||
|
<!-- For now, on mobile the button bar is hidden-->
|
||||||
<div class="btn-bar right abs">
|
<div class="btn-bar right abs mobile-hide">
|
||||||
<mct-representation key="'action-group'"
|
<mct-representation key="'action-group'"
|
||||||
mct-object="domainObject"
|
mct-object="domainObject"
|
||||||
parameters="{ category: 'view-control' }">
|
parameters="{ category: 'view-control' }">
|
||||||
|
@ -42,7 +42,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</mct-split-pane>
|
</mct-split-pane>
|
||||||
<div class="s-very-subtle key-properties ui-symbol mobile-menu-icon button-hide" ng-class="treeClass ? 'button-show' : 'button-hide'"
|
<div class="s-very-subtle key-properties ui-symbol mobile-menu-icon button-pos"
|
||||||
ng-click="treeSlide()">m</div>
|
ng-click="treeSlide()">m</div>
|
||||||
</div>
|
</div>
|
||||||
<mct-include key="'bottombar'"></mct-include>
|
<mct-include key="'bottombar'"></mct-include>
|
||||||
|
@ -767,7 +767,7 @@ mct-container {
|
|||||||
left: 0px; } }
|
left: 0px; } }
|
||||||
|
|
||||||
/* line 47, ../sass/mobile/_layout.scss */
|
/* line 47, ../sass/mobile/_layout.scss */
|
||||||
.button-show {
|
.button-pos {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
-moz-transition-duration: 0.2s;
|
-moz-transition-duration: 0.2s;
|
||||||
-o-transition-duration: 0.2s;
|
-o-transition-duration: 0.2s;
|
||||||
@ -775,76 +775,60 @@ mct-container {
|
|||||||
transition-duration: 0.2s; }
|
transition-duration: 0.2s; }
|
||||||
@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 47, ../sass/mobile/_layout.scss */
|
/* line 47, ../sass/mobile/_layout.scss */
|
||||||
.button-show {
|
.button-pos {
|
||||||
left: 257px; } }
|
left: 257px; } }
|
||||||
@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) {
|
@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 47, ../sass/mobile/_layout.scss */
|
/* line 47, ../sass/mobile/_layout.scss */
|
||||||
.button-show {
|
.button-pos {
|
||||||
left: 399.5px; } }
|
left: 399.5px; } }
|
||||||
|
|
||||||
/* line 58, ../sass/mobile/_layout.scss */
|
/* line 58, ../sass/mobile/_layout.scss */
|
||||||
.button-hide {
|
|
||||||
position: absolute;
|
|
||||||
-moz-transition-duration: 0.2s;
|
|
||||||
-o-transition-duration: 0.2s;
|
|
||||||
-webkit-transition-duration: 0.2s;
|
|
||||||
transition-duration: 0.2s; }
|
|
||||||
@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 58, ../sass/mobile/_layout.scss */
|
|
||||||
.button-hide {
|
|
||||||
left: 257px; } }
|
|
||||||
@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 58, ../sass/mobile/_layout.scss */
|
|
||||||
.button-hide {
|
|
||||||
left: 399.5px; } }
|
|
||||||
|
|
||||||
/* line 69, ../sass/mobile/_layout.scss */
|
|
||||||
.object-header-mobile {
|
.object-header-mobile {
|
||||||
position: relative; }
|
position: relative; }
|
||||||
@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 69, ../sass/mobile/_layout.scss */
|
/* line 58, ../sass/mobile/_layout.scss */
|
||||||
.object-header-mobile {
|
.object-header-mobile {
|
||||||
left: 25.7px; } }
|
left: 25.7px; } }
|
||||||
@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) {
|
@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 69, ../sass/mobile/_layout.scss */
|
/* line 58, ../sass/mobile/_layout.scss */
|
||||||
.object-header-mobile {
|
.object-header-mobile {
|
||||||
left: 39.95px; } }
|
left: 39.95px; } }
|
||||||
|
|
||||||
/* line 79, ../sass/mobile/_layout.scss */
|
/* line 68, ../sass/mobile/_layout.scss */
|
||||||
.mobile-menu-icon {
|
.mobile-menu-icon {
|
||||||
top: 5px; }
|
top: 5px; }
|
||||||
@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 79, ../sass/mobile/_layout.scss */
|
/* line 68, ../sass/mobile/_layout.scss */
|
||||||
.mobile-menu-icon {
|
.mobile-menu-icon {
|
||||||
font-size: 125%; } }
|
font-size: 125%; } }
|
||||||
@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) {
|
@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 79, ../sass/mobile/_layout.scss */
|
/* line 68, ../sass/mobile/_layout.scss */
|
||||||
.mobile-menu-icon {
|
.mobile-menu-icon {
|
||||||
font-size: 175%; } }
|
font-size: 175%; } }
|
||||||
@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 79, ../sass/mobile/_layout.scss */
|
/* line 68, ../sass/mobile/_layout.scss */
|
||||||
.mobile-menu-icon {
|
.mobile-menu-icon {
|
||||||
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 92, ../sass/mobile/_layout.scss */
|
/* line 81, ../sass/mobile/_layout.scss */
|
||||||
.mobile-hide {
|
.mobile-hide {
|
||||||
display: none; } }
|
display: none; } }
|
||||||
@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) {
|
@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 92, ../sass/mobile/_layout.scss */
|
/* line 81, ../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 101, ../sass/mobile/_layout.scss */
|
/* line 90, ../sass/mobile/_layout.scss */
|
||||||
.browse-manage {
|
.browse-manage {
|
||||||
width: 257px; } }
|
width: 257px; } }
|
||||||
@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) {
|
@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 101, ../sass/mobile/_layout.scss */
|
/* line 90, ../sass/mobile/_layout.scss */
|
||||||
.browse-manage {
|
.browse-manage {
|
||||||
width: 399.5px; } }
|
width: 399.5px; } }
|
||||||
@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 101, ../sass/mobile/_layout.scss */
|
/* line 90, ../sass/mobile/_layout.scss */
|
||||||
.browse-manage {
|
.browse-manage {
|
||||||
min-width: 150px;
|
min-width: 150px;
|
||||||
max-width: 800px;
|
max-width: 800px;
|
||||||
|
@ -44,7 +44,7 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.button-show {
|
.button-pos {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
@include transition-duration(.2s);
|
@include transition-duration(.2s);
|
||||||
@include phone {
|
@include phone {
|
||||||
@ -55,17 +55,6 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.button-hide {
|
|
||||||
position: absolute;
|
|
||||||
@include transition-duration(.2s);
|
|
||||||
@include phone {
|
|
||||||
left: $phoneSlideMenuWidth;
|
|
||||||
}
|
|
||||||
@include tablet {
|
|
||||||
left: $tabletSlideMenuWidth;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.object-header-mobile {
|
.object-header-mobile {
|
||||||
position: relative;
|
position: relative;
|
||||||
@include phone {
|
@include phone {
|
||||||
|
Loading…
Reference in New Issue
Block a user