mirror of
https://github.com/nasa/openmct.git
synced 2024-12-22 06:27:48 +00:00
[Mobile] Create Menu
Create menu's is specified/overwritten with 1000% (change) to fit on mobile). Also gets rid of the right bar in that view.
This commit is contained in:
parent
0d7387080d
commit
272c6bca97
@ -836,7 +836,7 @@ mct-container {
|
|||||||
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 117, ../sass/mobile/_layout.scss */
|
/* line 115, ../sass/mobile/_layout.scss */
|
||||||
.button-pos {
|
.button-pos {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
-moz-transition-duration: 0.2s;
|
-moz-transition-duration: 0.2s;
|
||||||
@ -846,50 +846,18 @@ mct-container {
|
|||||||
transition-timing-function: ease; } }
|
transition-timing-function: ease; } }
|
||||||
|
|
||||||
@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 124, ../sass/mobile/_layout.scss */
|
/* line 122, ../sass/mobile/_layout.scss */
|
||||||
.object-header-mobile {
|
.object-header-mobile {
|
||||||
position: relative;
|
position: relative;
|
||||||
left: 30px; } }
|
left: 30px; } }
|
||||||
|
|
||||||
/* line 131, ../sass/mobile/_layout.scss */
|
|
||||||
.mobile-menu-icon {
|
|
||||||
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) {
|
|
||||||
/* line 131, ../sass/mobile/_layout.scss */
|
|
||||||
.mobile-menu-icon {
|
|
||||||
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) {
|
|
||||||
/* line 131, ../sass/mobile/_layout.scss */
|
|
||||||
.mobile-menu-icon {
|
|
||||||
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) {
|
|
||||||
/* line 131, ../sass/mobile/_layout.scss */
|
|
||||||
.mobile-menu-icon {
|
|
||||||
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 144, ../sass/mobile/_layout.scss */
|
/* line 129, ../sass/mobile/_layout.scss */
|
||||||
.mobile-super-menu {
|
|
||||||
width: 100% !important; } }
|
|
||||||
|
|
||||||
/* line 150, ../sass/mobile/_layout.scss */
|
|
||||||
.mobile-super-menu-text {
|
|
||||||
overflow-x: hidden !important;
|
|
||||||
text-overflow: ellipsis !important; }
|
|
||||||
|
|
||||||
@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 155, ../sass/mobile/_layout.scss */
|
|
||||||
.mobile-right-create {
|
|
||||||
width: 0px !important;
|
|
||||||
padding: 0px !important; } }
|
|
||||||
|
|
||||||
@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 162, ../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 168, ../sass/mobile/_layout.scss */
|
/* line 135, ../sass/mobile/_layout.scss */
|
||||||
.phone-hide {
|
.phone-hide {
|
||||||
display: none; } }
|
display: none; } }
|
||||||
|
|
||||||
@ -2895,6 +2863,41 @@ label.checkbox.custom {
|
|||||||
right: 0;
|
right: 0;
|
||||||
width: auto; }
|
width: auto; }
|
||||||
|
|
||||||
|
/* line 2, ../sass/mobile/controls/_menus.scss */
|
||||||
|
.mobile-menu-icon {
|
||||||
|
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) {
|
||||||
|
/* line 2, ../sass/mobile/controls/_menus.scss */
|
||||||
|
.mobile-menu-icon {
|
||||||
|
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) {
|
||||||
|
/* line 2, ../sass/mobile/controls/_menus.scss */
|
||||||
|
.mobile-menu-icon {
|
||||||
|
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) {
|
||||||
|
/* line 2, ../sass/mobile/controls/_menus.scss */
|
||||||
|
.mobile-menu-icon {
|
||||||
|
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) {
|
||||||
|
/* line 15, ../sass/mobile/controls/_menus.scss */
|
||||||
|
.mobile-super-menu {
|
||||||
|
width: 100% !important;
|
||||||
|
height: 1000% !important;
|
||||||
|
border-right: 0px !important;
|
||||||
|
padding-right: 0px !important; } }
|
||||||
|
|
||||||
|
/* line 24, ../sass/mobile/controls/_menus.scss */
|
||||||
|
.mobile-super-menu-text {
|
||||||
|
overflow-x: hidden !important;
|
||||||
|
text-overflow: ellipsis !important; }
|
||||||
|
|
||||||
|
@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 29, ../sass/mobile/controls/_menus.scss */
|
||||||
|
.mobile-right-create {
|
||||||
|
width: 0px !important;
|
||||||
|
padding: 0px !important; } }
|
||||||
|
|
||||||
/* line 1, ../sass/controls/_time-controller.scss */
|
/* line 1, ../sass/controls/_time-controller.scss */
|
||||||
.l-time-controller {
|
.l-time-controller {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
@ -49,6 +49,7 @@
|
|||||||
@import "controls/controls";
|
@import "controls/controls";
|
||||||
@import "controls/lists";
|
@import "controls/lists";
|
||||||
@import "controls/menus";
|
@import "controls/menus";
|
||||||
|
@import "mobile/controls/menus";
|
||||||
@import "controls/time-controller";
|
@import "controls/time-controller";
|
||||||
@import "edit/editor";
|
@import "edit/editor";
|
||||||
@import "features/imagery";
|
@import "features/imagery";
|
||||||
|
@ -112,8 +112,6 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.button-pos {
|
.button-pos {
|
||||||
@include phoneandtablet {
|
@include phoneandtablet {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
@ -128,37 +126,6 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.mobile-menu-icon {
|
|
||||||
display: inline-block;
|
|
||||||
@include phone {
|
|
||||||
font-size: 125%;
|
|
||||||
}
|
|
||||||
@include tablet {
|
|
||||||
font-size: 175%;
|
|
||||||
}
|
|
||||||
@include desktop {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.mobile-super-menu {
|
|
||||||
@include phoneandtablet {
|
|
||||||
width: 100% !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.mobile-super-menu-text {
|
|
||||||
overflow-x: hidden !important;
|
|
||||||
text-overflow: ellipsis !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mobile-right-create {
|
|
||||||
@include phoneandtablet {
|
|
||||||
width: 0px !important;
|
|
||||||
padding: 0px !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.mobile-hide {
|
.mobile-hide {
|
||||||
@include phoneandtablet {
|
@include phoneandtablet {
|
||||||
display: none;
|
display: none;
|
||||||
|
@ -0,0 +1,34 @@
|
|||||||
|
|
||||||
|
.mobile-menu-icon {
|
||||||
|
display: inline-block;
|
||||||
|
@include phone {
|
||||||
|
font-size: 125%;
|
||||||
|
}
|
||||||
|
@include tablet {
|
||||||
|
font-size: 175%;
|
||||||
|
}
|
||||||
|
@include desktop {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-super-menu {
|
||||||
|
@include phoneandtablet {
|
||||||
|
width: 100% !important;
|
||||||
|
height: 1000% !important;
|
||||||
|
border-right: 0px !important;
|
||||||
|
padding-right: 0px !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-super-menu-text {
|
||||||
|
overflow-x: hidden !important;
|
||||||
|
text-overflow: ellipsis !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-right-create {
|
||||||
|
@include phoneandtablet {
|
||||||
|
width: 0px !important;
|
||||||
|
padding: 0px !important;
|
||||||
|
}
|
||||||
|
}
|
Loading…
Reference in New Issue
Block a user