ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-06-17 14:48:13 +00:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

[Mobile] Portrait & Landsc.

Browse Source 
Specifies amounts based on phone and tablet's
orientation. Not tested for the actual device,
but emulator. Also currently makes the create
button appear/disappear instead of smoothly sliding.
This commit is contained in:
Shivam Dave
2015-07-16 11:50:55 -07:00
parent ce75d19480
commit e9314898d2
4 changed files with 132 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
platform/commonUI/browse/res/templates/browse.html
View File

@ -31,7 +31,7 @@
<!-- TREE MENU: ADDED THE PANE LEFT HERE, similar to .pane.left example--> <!-- TREE MENU: ADDED THE PANE LEFT HERE, similar to .pane.left example-->
<div class='split-pane-component treeview pane pane-special left desktop-browse'> <div class='split-pane-component treeview pane pane-special left desktop-browse'>
<mct-representation key="'create-button'" mct-object="navigatedObject"> <mct-representation key="'create-button'" mct-object="navigatedObject" class="createBtnPos">
</mct-representation> </mct-representation>
<div class='holder tree-holder abs'> <div class='holder tree-holder abs'>
<mct-representation key="'tree'" <mct-representation key="'tree'"

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

@ -749,6 +749,10 @@ mct-container {
/* line 25, ../sass/mobile/_layout.scss */ /* line 25, ../sass/mobile/_layout.scss */
.browse-wrapper, .browse-wrapper,
.pane-special { .pane-special {
-moz-transition-duration: 0.2s;
-o-transition-duration: 0.2s;
-webkit-transition-duration: 0.2s;
transition-duration: 0.2s;
position: absolute; position: absolute;
left: 0; left: 0;
top: 0; top: 0;
@ -758,39 +762,26 @@ mct-container {
height: 100%; } } height: 100%; } }
@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 49, ../sass/mobile/_layout.scss */ /* line 51, ../sass/mobile/_layout.scss */
.desktop-browse { .desktop-browse {
min-width: 150px; min-width: 150px;
max-width: 800px; max-width: 800px;
width: 25%; } } width: 25%; } }
@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 58, ../sass/mobile/_layout.scss */ /* line 60, ../sass/mobile/_layout.scss */
.browse-hidetree .pane-special.left { .browse-hidetree .pane-special.left {
-moz-transition-duration: 0.2s; -moz-transition-duration: 0.2s;
-o-transition-duration: 0.2s; -o-transition-duration: 0.2s;
-webkit-transition-duration: 0.2s; -webkit-transition-duration: 0.2s;
transition-duration: 0.2s; transition-duration: 0.2s;
display: none !important; } } width: 0px !important;
@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) { right: auto !important; }
/* line 58, ../sass/mobile/_layout.scss */ /* line 66, ../sass/mobile/_layout.scss */
.browse-hidetree .pane-special.left { .browse-hidetree .pane-special.left .createBtnPos {
-moz-transition-duration: 0.2s; display: none; } }
-o-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), 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) {
-webkit-transition-duration: 0.2s; /* line 72, ../sass/mobile/_layout.scss */
transition-duration: 0.2s;
display: none !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) {
/* line 69, ../sass/mobile/_layout.scss */
.browse-hidetree .pane-special.right {
-moz-transition-duration: 0.2s;
-o-transition-duration: 0.2s;
-webkit-transition-duration: 0.2s;
transition-duration: 0.2s;
width: auto !important;
left: 0px !important; } }
@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 */
.browse-hidetree .pane-special.right { .browse-hidetree .pane-special.right {
-moz-transition-duration: 0.2s; -moz-transition-duration: 0.2s;
-o-transition-duration: 0.2s; -o-transition-duration: 0.2s;
@ -799,8 +790,8 @@ mct-container {
width: auto !important; width: auto !important;
left: 0px !important; } } left: 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) { @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) {
/* line 84, ../sass/mobile/_layout.scss */ /* line 82, ../sass/mobile/_layout.scss */
.browse-showtree .pane-special.left { .browse-showtree .pane-special.left {
-moz-transition-duration: 0.2s; -moz-transition-duration: 0.2s;
-o-transition-duration: 0.2s; -o-transition-duration: 0.2s;
@ -809,18 +800,38 @@ mct-container {
display: block !important; display: block !important;
width: 80% !important; width: 80% !important;
right: auto !important; } } right: auto !important; } }
@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: 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 84, ../sass/mobile/_layout.scss */ /* line 82, ../sass/mobile/_layout.scss */
.browse-showtree .pane-special.left { .browse-showtree .pane-special.left {
-moz-transition-duration: 0.2s; -moz-transition-duration: 0.2s;
-o-transition-duration: 0.2s; -o-transition-duration: 0.2s;
-webkit-transition-duration: 0.2s; -webkit-transition-duration: 0.2s;
transition-duration: 0.2s; transition-duration: 0.2s;
display: block !important; display: block !important;
width: 60% !important; width: 30% !important;
right: auto !important; } } right: auto !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) { @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) {
/* line 99, ../sass/mobile/_layout.scss */ /* line 82, ../sass/mobile/_layout.scss */
.browse-showtree .pane-special.left {
-moz-transition-duration: 0.2s;
-o-transition-duration: 0.2s;
-webkit-transition-duration: 0.2s;
transition-duration: 0.2s;
display: block !important;
width: 30% !important;
right: auto !important; } }
@media 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 82, ../sass/mobile/_layout.scss */
.browse-showtree .pane-special.left {
-moz-transition-duration: 0.2s;
-o-transition-duration: 0.2s;
-webkit-transition-duration: 0.2s;
transition-duration: 0.2s;
display: block !important;
width: 25% !important;
right: auto !important; } }
@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) {
/* line 109, ../sass/mobile/_layout.scss */
.browse-showtree .pane-special.right { .browse-showtree .pane-special.right {
-moz-transition-duration: 0.2s; -moz-transition-duration: 0.2s;
-o-transition-duration: 0.2s; -o-transition-duration: 0.2s;
@ -828,26 +839,40 @@ mct-container {
transition-duration: 0.2s; transition-duration: 0.2s;
left: 80% !important; left: 80% !important;
width: auto !important; } } width: auto !important; } }
@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: 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 99, ../sass/mobile/_layout.scss */ /* line 109, ../sass/mobile/_layout.scss */
.browse-showtree .pane-special.right { .browse-showtree .pane-special.right {
-moz-transition-duration: 0.2s; -moz-transition-duration: 0.2s;
-o-transition-duration: 0.2s; -o-transition-duration: 0.2s;
-webkit-transition-duration: 0.2s; -webkit-transition-duration: 0.2s;
transition-duration: 0.2s; transition-duration: 0.2s;
left: 60% !important; left: 30% !important;
width: auto !important; } }
@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) {
/* line 109, ../sass/mobile/_layout.scss */
.browse-showtree .pane-special.right {
-moz-transition-duration: 0.2s;
-o-transition-duration: 0.2s;
-webkit-transition-duration: 0.2s;
transition-duration: 0.2s;
left: 30% !important;
width: auto !important; } }
@media 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 109, ../sass/mobile/_layout.scss */
.browse-showtree .pane-special.right {
-moz-transition-duration: 0.2s;
-o-transition-duration: 0.2s;
-webkit-transition-duration: 0.2s;
transition-duration: 0.2s;
left: 25% !important;
width: auto !important; } } width: auto !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) { @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 113, ../sass/mobile/_layout.scss */ /* line 133, ../sass/mobile/_layout.scss */
.mobile-splitter {
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) {
/* line 113, ../sass/mobile/_layout.scss */
.mobile-splitter { .mobile-splitter {
display: none; } } display: none; } }
/* line 124, ../sass/mobile/_layout.scss */ /* line 141, ../sass/mobile/_layout.scss */
.button-pos { .button-pos {
position: absolute; position: absolute;
-moz-transition-duration: 0.2s; -moz-transition-duration: 0.2s;
@ -855,44 +880,35 @@ mct-container {
-webkit-transition-duration: 0.2s; -webkit-transition-duration: 0.2s;
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), 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 129, ../sass/mobile/_layout.scss */ /* line 146, ../sass/mobile/_layout.scss */
.object-header-mobile {
position: relative;
left: 30px; } }
@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 129, ../sass/mobile/_layout.scss */
.object-header-mobile { .object-header-mobile {
position: relative; position: relative;
left: 30px; } } left: 30px; } }
/* line 140, ../sass/mobile/_layout.scss */ /* line 153, ../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 140, ../sass/mobile/_layout.scss */ /* line 153, ../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 140, ../sass/mobile/_layout.scss */ /* line 153, ../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 140, ../sass/mobile/_layout.scss */ /* line 153, ../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), 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 154, ../sass/mobile/_layout.scss */ /* line 167, ../sass/mobile/_layout.scss */
.mobile-hide {
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) {
/* line 154, ../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 163, ../sass/mobile/_layout.scss */ /* line 173, ../sass/mobile/_layout.scss */
.phone-hide { .phone-hide {
display: none; } } display: none; } }

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

@ -24,7 +24,6 @@
.browse-wrapper, .browse-wrapper,
.pane-special { .pane-special {
// @include transition-duration(.2s);
@include phone { @include phone {
position: absolute; position: absolute;
left: 0; top: 0; left: 0; top: 0;
@ -33,6 +32,7 @@
height: 100%; height: 100%;
} }
@include tablet { @include tablet {
@include transition-duration(.2s);
position: absolute; position: absolute;
left: 0; top: 0; left: 0; top: 0;
right: 0; left: 0; right: 0; left: 0;
@ -41,8 +41,10 @@
} }
} }
$phoneMenuSize: 80%; $phoneMenuSizePortrait: 80%;
$tabletMenuSize: 60%; $phoneMenuSizeLandscape: 30%;
$tabletMenuSizePortrait: 40%;
$tabletMenuSizeLandscape: 25%;
$desktopMenuSize: 25%; $desktopMenuSize: 25%;
@ -56,23 +58,19 @@ $desktopMenuSize: 25%;
.browse-hidetree { .browse-hidetree {
.pane-special.left { .pane-special.left {
@include phone { @include phoneandtablet {
@include transition-duration(.2s); @include transition-duration(.2s);
display: none !important; width: 0px !important;
} right: auto !important;
@include tablet {
@include transition-duration(.2s); .createBtnPos {
display: none !important; display: none;
}
} }
} }
.pane-special.right { .pane-special.right {
@include phone { @include phoneandtablet {
@include transition-duration(.2s);
width: auto !important;
left: 0px !important;
}
@include tablet {
@include transition-duration(.2s); @include transition-duration(.2s);
width: auto !important; width: auto !important;
left: 0px !important; left: 0px !important;
@ -82,39 +80,58 @@ $desktopMenuSize: 25%;
.browse-showtree { .browse-showtree {
.pane-special.left { .pane-special.left {
@include phone { @include phonePortrait {
@include transition-duration(.2s); @include transition-duration(.2s);
display: block !important; display: block !important;
width: $phoneMenuSize !important; width: $phoneMenuSizePortrait !important;
right: auto !important; right: auto !important;
} }
@include tablet { @include phoneLandscape {
@include transition-duration(.2s); @include transition-duration(.2s);
display: block !important; display: block !important;
width: $tabletMenuSize !important; width: $phoneMenuSizeLandscape !important;
right: auto !important;
}
@include tabletPortrait {
@include transition-duration(.2s);
display: block !important;
width: $tabletMenuSizePortrait !important;
right: auto !important;
}
@include tabletLandscape {
@include transition-duration(.2s);
display: block !important;
width: $tabletMenuSizeLandscape !important;
right: auto !important; right: auto !important;
} }
} }
.pane-special.right { .pane-special.right {
@include phone { @include phonePortrait {
@include transition-duration(.2s); @include transition-duration(.2s);
left: $phoneMenuSize !important; left: $phoneMenuSizePortrait !important;
width: auto !important; width: auto !important;
} }
@include tablet { @include phoneLandscape {
@include transition-duration(.2s); @include transition-duration(.2s);
left: $tabletMenuSize !important; left: $phoneMenuSizeLandscape !important;
width: auto !important;
}
@include tabletPortrait {
@include transition-duration(.2s);
left: $tabletMenuSizePortrait !important;
width: auto !important;
}
@include tabletLandscape {
@include transition-duration(.2s);
left: $tabletMenuSizeLandscape !important;
width: auto !important; width: auto !important;
} }
} }
} }
.mobile-splitter { .mobile-splitter {
@include phone { @include phoneandtablet {
display: none;
}
@include tablet {
display: none; display: none;
} }
} }
@ -127,11 +144,7 @@ $desktopMenuSize: 25%;
} }
.object-header-mobile { .object-header-mobile {
@include phone { @include phoneandtablet {
position: relative;
left: 30px;
}
@include tablet {
position: relative; position: relative;
left: 30px; left: 30px;
} }
@ -152,10 +165,7 @@ $desktopMenuSize: 25%;
.mobile-hide { .mobile-hide {
@include phone { @include phoneandtablet {
display: none;
}
@include tablet {
display: none; display: none;
} }
} }

11
platform/commonUI/general/res/sass/mobile/_mixins.scss
View File

@ -63,6 +63,17 @@
} }
} }
@mixin phoneandtablet {
@media #{$phonePortrait},
#{$phoneLandscape},
#{$phoneLandscapeEmu},
#{$tabletPortrait},
#{$tabletLandscape},
#{$tabletLandscapeEmu}{
@content
}
}
@mixin desktop { @mixin desktop {
@media #{$desktopPortrait}, @media #{$desktopPortrait},
#{$desktopLandscape} { #{$desktopLandscape} {