From c71f1fe447133c93596e281e91181d0d9e577960 Mon Sep 17 00:00:00 2001 From: Charles Hacskaylo Date: Tue, 25 Aug 2015 13:34:37 -0700 Subject: [PATCH] [Mobile] IN PROGRESS: Significant refactor in mobile/_layout.scss open #74 Made view-switcher visible when browsing via mobile; Fixed class in browse.html markup from left-menu to left; Moved object-browse-bar, top-bar classes from _controls into _layout; Renamed and simplified menu widths in mobile _constants; Really significant refactor of mobiles/_layout; Tweaks in user-environ/_layout; TO-DO: figure out why object-browse-bar flex styles not working in mobile; --- .../browse/res/templates/browse-object.html | 7 +- .../commonUI/browse/res/templates/browse.html | 2 +- .../general/res/css/theme-espresso.css | 321 ++++++------------ .../general/res/sass/controls/_controls.scss | 4 +- .../general/res/sass/mobile/_constants.scss | 7 +- .../general/res/sass/mobile/_layout.scss | 233 ++++--------- .../res/sass/user-environ/_layout.scss | 9 +- 7 files changed, 188 insertions(+), 395 deletions(-) diff --git a/platform/commonUI/browse/res/templates/browse-object.html b/platform/commonUI/browse/res/templates/browse-object.html index fb1ae37740..80bb313d22 100644 --- a/platform/commonUI/browse/res/templates/browse-object.html +++ b/platform/commonUI/browse/res/templates/browse-object.html @@ -26,15 +26,16 @@ - -
+
+ + parameters="{ category: 'view-control' }" + class="mobile-hide">
diff --git a/platform/commonUI/browse/res/templates/browse.html b/platform/commonUI/browse/res/templates/browse.html index 8bb6b7fa8e..402cf7a197 100644 --- a/platform/commonUI/browse/res/templates/browse.html +++ b/platform/commonUI/browse/res/templates/browse.html @@ -24,7 +24,7 @@
-
+
.pane { margin-top: 5px; } - /* line 274, ../sass/user-environ/_layout.scss */ + /* line 275, ../sass/user-environ/_layout.scss */ .split-layout.horizontal > .pane:first-child { margin-top: 0; } -/* line 281, ../sass/user-environ/_layout.scss */ +/* line 282, ../sass/user-environ/_layout.scss */ .split-layout.vertical > .pane { margin-left: 5px; } - /* line 284, ../sass/user-environ/_layout.scss */ + /* line 285, ../sass/user-environ/_layout.scss */ .split-layout.vertical > .pane > .holder { left: 0; right: 0; } - /* line 288, ../sass/user-environ/_layout.scss */ + /* line 289, ../sass/user-environ/_layout.scss */ .split-layout.vertical > .pane:first-child { margin-left: 0; } - /* line 290, ../sass/user-environ/_layout.scss */ + /* line 291, ../sass/user-environ/_layout.scss */ .split-layout.vertical > .pane:first-child .holder { right: 3px; } -/* line 299, ../sass/user-environ/_layout.scss */ +/* line 300, ../sass/user-environ/_layout.scss */ .object-browse-bar .btn, .object-browse-bar .t-btn, .object-browse-bar .view-switcher, @@ -748,12 +745,12 @@ mct-container { line-height: 200%; vertical-align: top; } -/* line 316, ../sass/user-environ/_layout.scss */ +/* line 317, ../sass/user-environ/_layout.scss */ .object-browse-bar .view-switcher, .top-bar .view-switcher { margin-right: 20px; } -/* line 321, ../sass/user-environ/_layout.scss */ +/* line 322, ../sass/user-environ/_layout.scss */ .vscroll { overflow-y: auto; } @@ -786,183 +783,115 @@ mct-container { top: 0 !important; right: 0; bottom: 0; - left: 0; } } + left: 0; } -@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 35, ../sass/mobile/_layout.scss */ + /* line 32, ../sass/mobile/_layout.scss */ + .mobile-pane.right-repr { + -moz-transition-duration: 0.35s; + -o-transition-duration: 0.35s; + -webkit-transition-duration: 0.35s; + transition-duration: 0.35s; + transition-timing-function: ease; + backface-visibility: hidden; + margin-left: 0 !important; } + + /* line 38, ../sass/mobile/_layout.scss */ .user-environ .browse-area, .user-environ .edit-area, .user-environ .editor { top: 0; left: 0; right: 0; - bottom: 25px; } } + bottom: 25px; } -@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 44, ../sass/mobile/_layout.scss */ .holder.l-mobile { top: 10px !important; right: 10px !important; bottom: 10px !important; - left: 10px !important; } } + left: 10px !important; } -@media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) { - /* line 56, ../sass/mobile/_layout.scss */ - .desktop-browse { - min-width: 150px; - max-width: 800px; - 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), 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 67, ../sass/mobile/_layout.scss */ + /* line 54, ../sass/mobile/_layout.scss */ .browse-hidetree { -moz-user-select: -moz-none; -ms-user-select: none; -webkit-user-select: none; - user-select: 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 78, ../sass/mobile/_layout.scss */ - .browse-hidetree .mobile-pane.left-menu { - -moz-transition-property: opacity; - -o-transition-property: opacity; - -webkit-transition-property: opacity; - transition-property: opacity; - -moz-transition-duration: 0.4s; - -o-transition-duration: 0.4s; - -webkit-transition-duration: 0.4s; - transition-duration: 0.4s; - -moz-transition-timing-function: ease-in-out; - -o-transition-timing-function: ease-in-out; - -webkit-transition-timing-function: ease-in-out; - transition-timing-function: ease-in-out; - opacity: 0; - right: 100% !important; - width: auto !important; - overflow-y: hidden; - overflow-x: hidden; } } -@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 91, ../sass/mobile/_layout.scss */ - .browse-hidetree .mobile-pane.right-repr { - -moz-transition-duration: 0.35s; - -o-transition-duration: 0.35s; - -webkit-transition-duration: 0.35s; - transition-duration: 0.35s; - transition-timing-function: ease; - backface-visibility: hidden; - left: auto !important; - width: 100% !important; } } + user-select: none; } + /* line 58, ../sass/mobile/_layout.scss */ + .browse-hidetree .mobile-pane.left { + opacity: 0; + right: 100% !important; + width: auto !important; + overflow-y: hidden; + overflow-x: hidden; } + /* line 67, ../sass/mobile/_layout.scss */ + .browse-hidetree .mobile-pane.right-repr { + left: 0 !important; } -/* line 100, ../sass/mobile/_layout.scss */ -.mobile-tree-holder { - top: 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), 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 109, ../sass/mobile/_layout.scss */ + /* line 74, ../sass/mobile/_layout.scss */ .browse-showtree { -moz-user-select: -moz-none; -ms-user-select: none; -webkit-user-select: none; - user-select: 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 120, ../sass/mobile/_layout.scss */ - .browse-showtree .mobile-pane.left-menu { - -moz-transition-property: opacity; - -o-transition-property: opacity; - -webkit-transition-property: opacity; - transition-property: opacity; - -moz-transition-duration: 0.4s; - -o-transition-duration: 0.4s; - -webkit-transition-duration: 0.4s; - transition-duration: 0.4s; - -moz-transition-timing-function: ease-in-out; - -o-transition-timing-function: ease-in-out; - -webkit-transition-timing-function: ease-in-out; - transition-timing-function: ease-in-out; - background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuNSIgeDI9IjEuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSI5OCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC4wIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuMyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); - background-size: 100%; - background-image: -moz-linear-gradient(0deg, rgba(0, 0, 0, 0) 98%, rgba(0, 0, 0, 0.3) 100%); - background-image: -webkit-linear-gradient(0deg, rgba(0, 0, 0, 0) 98%, rgba(0, 0, 0, 0.3) 100%); - background-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 98%, rgba(0, 0, 0, 0.3) 100%); - opacity: 1; - display: block !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) { - /* line 120, ../sass/mobile/_layout.scss */ - .browse-showtree .mobile-pane.left-menu { - right: 10% !important; } } -@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 120, ../sass/mobile/_layout.scss */ - .browse-showtree .mobile-pane.left-menu { - right: 60% !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 120, ../sass/mobile/_layout.scss */ - .browse-showtree .mobile-pane.left-menu { - right: 500px !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 120, ../sass/mobile/_layout.scss */ - .browse-showtree .mobile-pane.left-menu { - right: 70% !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 144, ../sass/mobile/_layout.scss */ - .browse-showtree .mobile-pane.right-repr { - -moz-transition-duration: 0.35s; - -o-transition-duration: 0.35s; - -webkit-transition-duration: 0.35s; - transition-duration: 0.35s; - transition-timing-function: ease; - backface-visibility: hidden; - left: 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 144, ../sass/mobile/_layout.scss */ - .browse-showtree .mobile-pane.right-repr { - left: 0 !important; - transform: translateX(90%); } } -@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 144, ../sass/mobile/_layout.scss */ - .browse-showtree .mobile-pane.right-repr { - width: 60% !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 144, ../sass/mobile/_layout.scss */ - .browse-showtree .mobile-pane.right-repr { - width: 500px !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 144, ../sass/mobile/_layout.scss */ - .browse-showtree .mobile-pane.right-repr { - width: 70% !important; } } + user-select: none; } + /* line 83, ../sass/mobile/_layout.scss */ + .browse-showtree .mobile-pane.left { + -moz-transition-property: opacity; + -o-transition-property: opacity; + -webkit-transition-property: opacity; + transition-property: opacity; + -moz-transition-duration: 0.4s; + -o-transition-duration: 0.4s; + -webkit-transition-duration: 0.4s; + transition-duration: 0.4s; + -moz-transition-timing-function: ease-in-out; + -o-transition-timing-function: ease-in-out; + -webkit-transition-timing-function: ease-in-out; + transition-timing-function: ease-in-out; + background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuNSIgeDI9IjEuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSI5OCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC4wIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuMyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); + background-size: 100%; + background-image: -moz-linear-gradient(0deg, rgba(0, 0, 0, 0) 98%, rgba(0, 0, 0, 0.3) 100%); + background-image: -webkit-linear-gradient(0deg, rgba(0, 0, 0, 0) 98%, rgba(0, 0, 0, 0.3) 100%); + background-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 98%, rgba(0, 0, 0, 0.3) 100%); + opacity: 1; + display: block !important; + right: auto !important; + width: 40% !important; } + /* line 93, ../sass/mobile/_layout.scss */ + .browse-showtree .mobile-pane.right-repr { + left: 40% !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 171, ../sass/mobile/_layout.scss */ + /* line 103, ../sass/mobile/_layout.scss */ .mobile-menu-icon { font-size: 110%; position: absolute; top: 12px; left: 10px; } - /* line 178, ../sass/mobile/_layout.scss */ - .object-browse-bar { - display: block !important; - left: 35px !important; } - /* line 183, ../sass/mobile/_layout.scss */ - .object-browse-bar .context-available { - opacity: 1 !important; } + /* line 113, ../sass/mobile/_layout.scss */ + .object-browse-bar .context-available { + opacity: 1 !important; } + /* line 116, ../sass/mobile/_layout.scss */ + .object-browse-bar .view-switcher { + margin-right: 0 !important; } - /* line 188, ../sass/mobile/_layout.scss */ + /* line 121, ../sass/mobile/_layout.scss */ .tree-holder { overflow-x: hidden !important; } - /* line 192, ../sass/mobile/_layout.scss */ + /* line 125, ../sass/mobile/_layout.scss */ .mobile-disable-select { -moz-user-select: -moz-none; -ms-user-select: none; -webkit-user-select: none; user-select: none; } - /* line 197, ../sass/mobile/_layout.scss */ + /* line 130, ../sass/mobile/_layout.scss */ .mobile-hide, .mobile-hide-important { display: none !important; } - /* line 202, ../sass/mobile/_layout.scss */ + /* line 135, ../sass/mobile/_layout.scss */ .mobile-back-hide { pointer-events: none; -moz-transition-property: opacity; @@ -979,7 +908,7 @@ mct-container { transition-timing-function: ease-in-out; opacity: 0; } - /* line 207, ../sass/mobile/_layout.scss */ + /* line 140, ../sass/mobile/_layout.scss */ .mobile-back-unhide { pointer-events: all; -moz-transition-property: opacity; @@ -995,54 +924,18 @@ mct-container { -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; opacity: 1; } } +@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) { + /* line 149, ../sass/mobile/_layout.scss */ + .browse-showtree .mobile-pane.left { + width: 90% !important; } + /* line 152, ../sass/mobile/_layout.scss */ + .browse-showtree .mobile-pane.right-repr { + left: 0 !important; + transform: translateX(90%); } } @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) { - /* line 214, ../sass/mobile/_layout.scss */ + /* line 160, ../sass/mobile/_layout.scss */ .desktop-hide { display: none; } } - -/* - -.mobile-back-hide { - @include phoneandtablet { - pointer-events: none; - @include trans-prop-nice(opacity, .4s); - opacity: 0; - } -} - - -// Hides objects on phone and tablet -.mobile-back-unhide { - @include phoneandtablet { - pointer-events: all; - @include trans-prop-nice(opacity, .4s); - opacity: 1; - } -} - - -// Hides objects only on the phone -.phone-hide { - @include phone { - display: none; - } -} - -.tree-holder { - @include phoneandtablet { - .tree-holder { - overflow-x: hidden !important; - } - } -} -.mobile-disable-select { - @include phoneandtablet { - .mobile-disable-select { - @include user-select(none); - } - } -} -*/ /***************************************************************************** * Open MCT Web, Copyright (c) 2014-2015, United States Government * as represented by the Administrator of the National Aeronautics and Space @@ -2401,7 +2294,8 @@ a.l-btn span { } } */ -/*.object-browse-bar .btn, +/* line 177, ../sass/controls/_controls.scss */ +.object-browse-bar .btn, .object-browse-bar .t-btn, .object-browse-bar .view-switcher, .top-bar .buttons-main .btn, @@ -2409,12 +2303,11 @@ a.l-btn span { .top-bar .view-switcher, .tool-bar .btn, .tool-bar .t-btn { - $h: $btnToolbarH; - display: inline-block; - font-size: $h * $btnFontSizeToH; - line-height: 200%; - vertical-align: top; -}*/ + display: inline-block; + font-size: 11.25px; + line-height: 200%; + vertical-align: top; } + /* line 192, ../sass/controls/_controls.scss */ label.checkbox.custom { cursor: pointer; diff --git a/platform/commonUI/general/res/sass/controls/_controls.scss b/platform/commonUI/general/res/sass/controls/_controls.scss index 4671d7d48a..bcec870f95 100644 --- a/platform/commonUI/general/res/sass/controls/_controls.scss +++ b/platform/commonUI/general/res/sass/controls/_controls.scss @@ -174,7 +174,7 @@ } */ -/*.object-browse-bar .btn, +.object-browse-bar .btn, .object-browse-bar .t-btn, .object-browse-bar .view-switcher, .top-bar .buttons-main .btn, @@ -187,7 +187,7 @@ font-size: $h * $btnFontSizeToH; line-height: 200%; vertical-align: top; -}*/ +} label.checkbox.custom { $bg: lighten($colorBodyBg, $ltGamma); diff --git a/platform/commonUI/general/res/sass/mobile/_constants.scss b/platform/commonUI/general/res/sass/mobile/_constants.scss index aedd4c3abd..737c06ac63 100644 --- a/platform/commonUI/general/res/sass/mobile/_constants.scss +++ b/platform/commonUI/general/res/sass/mobile/_constants.scss @@ -81,8 +81,5 @@ $desktopPortrait: "screen and #{$desktopPortraitCheck}"; $desktopLandscape: "screen and #{$desktopLandscapeCheck}"; /************************** DEVICE PARAMETERS FOR MENUS/REPRESENTATIONS */ -$phoneRepSizePortrait: 10%; -$phoneRepSizeLandscape: 60%; -$tabletRepSizePortrait: 500px; -$tabletRepSizeLandscape: 70%; -$desktopMenuSize: 25%; +$proporMenuOnly: 90%; +$proporMenuWithView: 40%; diff --git a/platform/commonUI/general/res/sass/mobile/_layout.scss b/platform/commonUI/general/res/sass/mobile/_layout.scss index e13334ec61..c073a65134 100644 --- a/platform/commonUI/general/res/sass/mobile/_layout.scss +++ b/platform/commonUI/general/res/sass/mobile/_layout.scss @@ -20,154 +20,86 @@ * at runtime from the About dialog for additional information. *****************************************************************************/ -// Wrapper of the entire 2 panes, only enacted on -// phone and tablet. Also for the panes - -.browse-wrapper, -.mobile-pane { - @include phoneandtablet { +@include phoneandtablet { + // Wrapper of the entire 2 panes, only enacted on + // phone and tablet. Also for the panes + .browse-wrapper, + .mobile-pane { position: absolute; top: 0 !important; right: 0; bottom: 0; left: 0; - //white-space: nowrap; // CH CO } -} -.user-environ .browse-area, -.user-environ .edit-area, -.user-environ .editor { - @include phoneandtablet { - //@include test(red); + .mobile-pane.right-repr { + //@include test(); + @include slMenuTransitions; + margin-left: 0 !important; + } + + .user-environ .browse-area, + .user-environ .edit-area, + .user-environ .editor { top: 0; left: 0; right: 0; bottom: $ueFooterH; } -} -.holder.l-mobile { - @include phoneandtablet { - //@include test(); + .holder.l-mobile { top: $bodyMargin !important; right: $bodyMargin !important; bottom: $bodyMargin !important; left: $bodyMargin !important; } -} -// Default views of the panels -// if in desktop browser -.desktop-browse { - @include desktop { - min-width: 150px; - max-width: 800px; - width: $desktopMenuSize; - } -} - -// When the tree is hidden, these are the -// classes used for the left menu and the -// right representation. -.browse-hidetree { - // NOTE: DISABLED SELECTION - // Selection disabled in both panes - // causing cut/copy/paste menu to - // not appear. Should me moved in - // future to properly work - @include phoneandtablet { + // When the tree is hidden, these are the + // classes used for the left menu and the + // right representation. + .browse-hidetree { @include user-select(none); - } - // Sets the left tree menu when the tree - // is hidden. - .mobile-pane.left-menu { - @include phoneandtablet { - @include trans-prop-nice(opacity, .4s); + // Sets the left tree menu when the tree + // is hidden. + .mobile-pane.left { opacity: 0; right: 100% !important; width: auto !important; overflow-y: hidden; overflow-x: hidden; } - } - - // Sets the right represenation when - // the tree is hidden. - .mobile-pane.right-repr { - @include phoneandtablet { - @include slMenuTransitions; - left: auto !important; - width: 100% !important; + // Sets the right represenation when + // the tree is hidden. + .mobile-pane.right-repr { + //@include slMenuTransitions; + left: 0 !important; + //width: 100% !important; } } -} -.mobile-tree-holder { - top: 30px; -} - -// When the tree is shown, these are -// the classes used for the left menu -// and the right menu (for each device & -// orientation combination, separate -// parameters are used) -.browse-showtree { - // NOTE: DISABLED SELECTION - // Selection disabled in both panes - // causing cut/copy/paste menu to - // not appear. Should me moved in - // future to properly work - @include phoneandtablet { + .browse-showtree { + // NOTE: DISABLED SELECTION + // Selection disabled in both panes + // causing cut/copy/paste menu to + // not appear. Should me moved in + // future to properly work @include user-select(none); - } - // Sets the left tree menu when the tree - // is shown. - .mobile-pane.left-menu { - @include phoneandtablet { + + // Sets the left tree menu when the tree is shown. + .mobile-pane.left { @include trans-prop-nice(opacity, .4s); @include background-image(linear-gradient(90deg, rgba(black, 0) 98%, rgba(black, 0.3) 100%)); opacity: 1; display: block !important; - width: auto !important; + //width: auto !important; // CH CO + right: auto !important; + width: $proporMenuWithView !important; } - // On both phones and tablets, the amount of - // space allowed for the right pane is specified - @include phonePortrait { - right: $phoneRepSizePortrait !important; - } - @include phoneLandscape { - right: $phoneRepSizeLandscape !important; - } - @include tabletPortrait { - right: $tabletRepSizePortrait !important; - } - @include tabletLandscape { - right: $tabletRepSizeLandscape !important; - } - } - // Sets the right representation when the tree is shown. - .mobile-pane.right-repr { - @include phoneandtablet { - @include slMenuTransitions; - left: auto !important; - } - // On both phones and tablets, the width of - // the right pane is specified - @include phonePortrait { - //width: $phoneRepSizePortrait !important; - left: 0 !important; - transform: translateX(100% - $phoneRepSizePortrait); - } - @include phoneLandscape { - width: $phoneRepSizeLandscape !important; - } - @include tabletPortrait { - //@include test(green); - width: $tabletRepSizePortrait !important; - } - @include tabletLandscape { - //@include test(orange); - width: $tabletRepSizeLandscape !important; - } - } -} + // Sets the right representation when the tree is shown. + .mobile-pane.right-repr { + //@include slMenuTransitions; CH MOVED + left: $proporMenuWithView !important; + //width: auto !important; + + //left: 0 !important; + //transform: translateX($proporMenuWithView); + } + } -@include phoneandtablet { .mobile-menu-icon { font-size: 110%; position: absolute; @@ -177,12 +109,13 @@ .object-browse-bar { //@include test(); - display: block !important; - //font-size: 0.95em; - left: 35px !important; + //left: 35px !important; // TEMP .context-available { opacity: 1 !important; } + .view-switcher { + margin-right: 0 !important; + } } .tree-holder { @@ -211,52 +144,20 @@ } } -.desktop-hide { - @include desktop { - display: none; - } -} - -/* - -.mobile-back-hide { - @include phoneandtablet { - pointer-events: none; - @include trans-prop-nice(opacity, .4s); - opacity: 0; - } -} - - -// Hides objects on phone and tablet -.mobile-back-unhide { - @include phoneandtablet { - pointer-events: all; - @include trans-prop-nice(opacity, .4s); - opacity: 1; - } -} - - -// Hides objects only on the phone -.phone-hide { - @include phone { - display: none; - } -} - -.tree-holder { - @include phoneandtablet { - .tree-holder { - overflow-x: hidden !important; +@include phonePortrait { + .browse-showtree { + .mobile-pane.left { + width: $proporMenuOnly !important; + } + .mobile-pane.right-repr { + left: 0 !important; + transform: translateX($proporMenuOnly); } } } -.mobile-disable-select { - @include phoneandtablet { - .mobile-disable-select { - @include user-select(none); - } + +@include desktop { + .desktop-hide { + display: none; } -} -*/ \ No newline at end of file +} \ No newline at end of file diff --git a/platform/commonUI/general/res/sass/user-environ/_layout.scss b/platform/commonUI/general/res/sass/user-environ/_layout.scss index b06b00100c..1c87dc6d0e 100644 --- a/platform/commonUI/general/res/sass/user-environ/_layout.scss +++ b/platform/commonUI/general/res/sass/user-environ/_layout.scss @@ -88,8 +88,8 @@ &.l-flex { display: flex; flex-flow: row nowrap; - align-items: stretch; .left { + @include test(green); flex: 1 1 auto; } } @@ -208,7 +208,8 @@ .split-layout { .split-pane-component.pane.left { min-width: 150px; - max-width: 50%; + max-width: 800px; + width: $ueBrowseLeftPaneW; } } } @@ -216,8 +217,8 @@ .edit-mode { .split-layout { .split-pane-component.pane.right { - min-width: 150px; - max-width: 50%; + //min-width: 150px; + //max-width: 50%; .split-pane-component.pane.bottom { min-height: 50px; max-height: 80%;