ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-05-14 22:43:40 +00:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

[Mobile] Sanding of mobile styles continues, in progress

Browse Source 
open #74
CSS and markup changes for split pane holders;
drop shadow added to tree area;
Tree item cleanups;
This or earlier commit broke treeview nav action;
TO-DO: fix treeview nav action to hide menu;
This commit is contained in:
Charles Hacskaylo 2015-08-20 18:36:44 -07:00
parent 67592def90
commit da8eb334e3
13 changed files with 202 additions and 164 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -20,30 +20,31 @@
at runtime from the About dialog for additional information. at runtime from the About dialog for additional information.
--> -->
<div content="jquery-wrapper" class="abs holder-all browse-mode" ng-controller="BrowseController"> <div class="abs holder-all browse-mode" ng-controller="BrowseController">
<mct-include key="'topbar-browse'"></mct-include> <mct-include key="'topbar-browse'"></mct-include>
<div class="holder browse-area s-browse-area abs browse-wrapper" ng-class="treeClass ? 'browse-showtree' : 'browse-hidetree'"> <div class="holder browse-area s-browse-area abs browse-wrapper" ng-class="treeClass ? 'browse-showtree' : 'browse-hidetree'">
<mct-split-pane class='contents abs' anchor='left'> <mct-split-pane class='contents abs' anchor='left'>
<div class='split-pane-component treeview pane mobile-pane left-menu desktop-browse'> <div class='split-pane-component treeview pane mobile-pane left-menu desktop-browse'>
<div class='holder tree-holder abs mobile-tree-holder'> <div class="holder abs l-mobile">
<mct-representation key="'tree'" <div class='tree-holder abs mobile-tree-holder'>
mct-object="domainObject" <mct-representation key="'tree'"
ng-model="treeModel"> mct-object="domainObject"
</mct-representation> ng-model="treeModel">
</div> </mct-representation>
</div>
<mct-representation key="'create-button'" mct-object="navigatedObject"> <mct-representation key="'create-button'" mct-object="navigatedObject">
</mct-representation> </mct-representation>
</div>
</div> </div>
<mct-splitter class="mobile-hide"></mct-splitter> <mct-splitter class="mobile-hide"></mct-splitter>
<div class='split-pane-component items pane mobile-pane right-repr'> <div class='split-pane-component items pane mobile-pane right-repr'>
<div class='holder abs' id='content-area'> <div class='holder abs l-mobile' id='content-area'>
<mct-representation mct-object="navigatedObject" key="'browse-object'"> <mct-representation mct-object="navigatedObject" key="'browse-object'">
</mct-representation> </mct-representation>
</div> </div>
<div class="left s-very-subtle key-properties ui-symbol mobile-menu-icon button-pos" <div class="left key-properties ui-symbol icon mobile-menu-icon" ng-click="treeSlide()">m</div>
ng-click="treeSlide()">m</div> </div>
</div>
</mct-split-pane> </mct-split-pane>
</div> </div>
<mct-include key="'bottombar'"></mct-include> <mct-include key="'bottombar'"></mct-include>

4
platform/commonUI/browse/res/templates/browse/object-header.html
View File

@ -22,9 +22,9 @@
<div class='object-header object-header-mobile'> <div class='object-header object-header-mobile'>
<span class="label s-label"> <span class="label s-label">
<mct-representation class="desktop-hide" key="'back-arrow'"></mct-representation> <mct-representation class="desktop-hide" key="'back-arrow'"></mct-representation>
<span class='type-icon icon ui-symbol'>{{type.getGlyph()}}</span> <span class='type-icon ui-symbol'>{{type.getGlyph()}}</span>
<span ng-if="parameters.mode" class='action'>{{parameters.mode}}</span> <span ng-if="parameters.mode" class='action'>{{parameters.mode}}</span>
<span class='type-name mobile-important-hide'>{{type.getName()}}</span> <!--span class='type-name mobile-important-hide'>{{type.getName()}}</span-->
<span class='title-label'>{{model.name}}</span> <span class='title-label'>{{model.name}}</span>
<mct-representation key="'menu-arrow'" mct-object='domainObject'></mct-representation> <mct-representation key="'menu-arrow'" mct-object='domainObject'></mct-representation>
</span> </span>

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

@ -216,23 +216,23 @@
bottom: 10px; bottom: 10px;
left: 10px; } left: 10px; }
/* line 63, ../sass/items/_item.scss */ /* line 63, ../sass/items/_item.scss */
.items-holder .item.grid-item .bar.top-bar.abs { .items-holder .item.grid-item .bar.top-bar {
bottom: auto; bottom: auto;
height: 20px; height: 20px;
line-height: 20px; line-height: 20px;
text-align: right; text-align: right;
z-index: 5; } z-index: 5; }
/* line 69, ../sass/items/_item.scss */ /* line 69, ../sass/items/_item.scss */
.items-holder .item.grid-item .bar.top-bar.abs .left, .items-holder .item.grid-item .bar.top-bar.abs .right { .items-holder .item.grid-item .bar.top-bar .left, .items-holder .item.grid-item .bar.top-bar .right {
width: auto; } width: auto; }
/* line 71, ../sass/items/_item.scss */ /* line 71, ../sass/items/_item.scss */
.items-holder .item.grid-item .bar.top-bar.abs .left .icon, .items-holder .item.grid-item .bar.top-bar.abs .right .icon { .items-holder .item.grid-item .bar.top-bar .left .icon, .items-holder .item.grid-item .bar.top-bar .right .icon {
margin-left: 3px; } margin-left: 3px; }
/* line 73, ../sass/items/_item.scss */ /* line 73, ../sass/items/_item.scss */
.items-holder .item.grid-item .bar.top-bar.abs .left .icon.l-icon-link, .items-holder .item.grid-item .bar.top-bar.abs .right .icon.l-icon-link { .items-holder .item.grid-item .bar.top-bar .left .icon.l-icon-link, .items-holder .item.grid-item .bar.top-bar .right .icon.l-icon-link {
color: #49dedb; } color: #49dedb; }
/* line 79, ../sass/items/_item.scss */ /* line 79, ../sass/items/_item.scss */
.items-holder .item.grid-item .bar.bottom-bar.abs { .items-holder .item.grid-item .bar.bottom-bar {
top: auto; top: auto;
height: 30px; } height: 30px; }
/* line 84, ../sass/items/_item.scss */ /* line 84, ../sass/items/_item.scss */
@ -415,12 +415,12 @@
line-height: 50px !important; } line-height: 50px !important; }
/* line 82, ../sass/mobile/_item.scss */ /* line 82, ../sass/mobile/_item.scss */
.items-holder .item.grid-item .bar.bottom-bar { .items-holder .item.grid-item .bar.bottom-bar {
top: 7px !important; top: 7px;
bottom: auto; bottom: auto;
height: 35px; } height: 35px; }
/* line 87, ../sass/mobile/_item.scss */ /* line 87, ../sass/mobile/_item.scss */
.items-holder .item.grid-item .item-main .item-type { .items-holder .item.grid-item .item-main .item-type {
top: 10px !important; top: 10px;
bottom: auto; bottom: auto;
height: 30px; } height: 30px; }
/* line 90, ../sass/mobile/_item.scss */ /* line 90, ../sass/mobile/_item.scss */
@ -435,12 +435,12 @@
line-height: 66px !important; } line-height: 66px !important; }
/* line 104, ../sass/mobile/_item.scss */ /* line 104, ../sass/mobile/_item.scss */
.items-holder .item.grid-item .bar.bottom-bar { .items-holder .item.grid-item .bar.bottom-bar {
top: 15px !important; top: 15px;
bottom: auto; bottom: auto;
height: 35px; } height: 35px; }
/* line 109, ../sass/mobile/_item.scss */ /* line 109, ../sass/mobile/_item.scss */
.items-holder .item.grid-item .item-main .item-type { .items-holder .item.grid-item .item-main .item-type {
top: 18px !important; top: 18px;
bottom: auto; bottom: auto;
height: 30px; } height: 30px; }
/* line 112, ../sass/mobile/_item.scss */ /* line 112, ../sass/mobile/_item.scss */

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

@ -759,27 +759,45 @@ mct-container {
.browse-wrapper, .browse-wrapper,
.mobile-pane { .mobile-pane {
position: absolute; position: absolute;
left: 0; top: 0 !important;
top: 0;
right: 0; right: 0;
white-space: nowrap; } } bottom: 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 */
.user-environ .browse-area,
.user-environ .edit-area,
.user-environ .editor {
top: 0;
left: 0;
right: 0;
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; } }
@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 38, ../sass/mobile/_layout.scss */ /* line 56, ../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), 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 49, ../sass/mobile/_layout.scss */ /* line 67, ../sass/mobile/_layout.scss */
.browse-hidetree { .browse-hidetree {
-moz-user-select: -moz-none; -moz-user-select: -moz-none;
-ms-user-select: none; -ms-user-select: none;
-webkit-user-select: none; -webkit-user-select: none;
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) { @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 60, ../sass/mobile/_layout.scss */ /* line 78, ../sass/mobile/_layout.scss */
.browse-hidetree .mobile-pane.left-menu { .browse-hidetree .mobile-pane.left-menu {
-moz-transition-property: opacity; -moz-transition-property: opacity;
-o-transition-property: opacity; -o-transition-property: opacity;
@ -799,7 +817,7 @@ mct-container {
overflow-y: hidden; overflow-y: hidden;
overflow-x: 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) { @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 73, ../sass/mobile/_layout.scss */ /* line 91, ../sass/mobile/_layout.scss */
.browse-hidetree .mobile-pane.right-repr { .browse-hidetree .mobile-pane.right-repr {
-moz-transition-duration: 0.35s; -moz-transition-duration: 0.35s;
-o-transition-duration: 0.35s; -o-transition-duration: 0.35s;
@ -810,19 +828,19 @@ mct-container {
left: auto !important; left: auto !important;
width: 100% !important; } } width: 100% !important; } }
/* line 82, ../sass/mobile/_layout.scss */ /* line 100, ../sass/mobile/_layout.scss */
.mobile-tree-holder { .mobile-tree-holder {
top: 30px; } 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) { @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 */ /* line 109, ../sass/mobile/_layout.scss */
.browse-showtree { .browse-showtree {
-moz-user-select: -moz-none; -moz-user-select: -moz-none;
-ms-user-select: none; -ms-user-select: none;
-webkit-user-select: none; -webkit-user-select: none;
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) { @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 102, ../sass/mobile/_layout.scss */ /* line 120, ../sass/mobile/_layout.scss */
.browse-showtree .mobile-pane.left-menu { .browse-showtree .mobile-pane.left-menu {
-moz-transition-property: opacity; -moz-transition-property: opacity;
-o-transition-property: opacity; -o-transition-property: opacity;
@ -836,27 +854,32 @@ mct-container {
-o-transition-timing-function: ease-in-out; -o-transition-timing-function: ease-in-out;
-webkit-transition-timing-function: ease-in-out; -webkit-transition-timing-function: ease-in-out;
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; opacity: 1;
display: block !important; display: block !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) { @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) {
/* line 102, ../sass/mobile/_layout.scss */ /* line 120, ../sass/mobile/_layout.scss */
.browse-showtree .mobile-pane.left-menu { .browse-showtree .mobile-pane.left-menu {
right: 19px !important; } } right: 19px !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) { @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 102, ../sass/mobile/_layout.scss */ /* line 120, ../sass/mobile/_layout.scss */
.browse-showtree .mobile-pane.left-menu { .browse-showtree .mobile-pane.left-menu {
right: 66% !important; } } 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) { @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 102, ../sass/mobile/_layout.scss */ /* line 120, ../sass/mobile/_layout.scss */
.browse-showtree .mobile-pane.left-menu { .browse-showtree .mobile-pane.left-menu {
right: 500px !important; } } 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) { @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 102, ../sass/mobile/_layout.scss */ /* line 120, ../sass/mobile/_layout.scss */
.browse-showtree .mobile-pane.left-menu { .browse-showtree .mobile-pane.left-menu {
right: 78% !important; } } 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) { @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 126, ../sass/mobile/_layout.scss */ /* line 144, ../sass/mobile/_layout.scss */
.browse-showtree .mobile-pane.right-repr { .browse-showtree .mobile-pane.right-repr {
-moz-transition-duration: 0.35s; -moz-transition-duration: 0.35s;
-o-transition-duration: 0.35s; -o-transition-duration: 0.35s;
@ -866,53 +889,56 @@ mct-container {
backface-visibility: hidden; backface-visibility: hidden;
left: auto !important; } } 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) { @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) {
/* line 126, ../sass/mobile/_layout.scss */ /* line 144, ../sass/mobile/_layout.scss */
.browse-showtree .mobile-pane.right-repr { .browse-showtree .mobile-pane.right-repr {
width: 19px !important; } } width: 19px !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) { @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 126, ../sass/mobile/_layout.scss */ /* line 144, ../sass/mobile/_layout.scss */
.browse-showtree .mobile-pane.right-repr { .browse-showtree .mobile-pane.right-repr {
width: 66% !important; } } 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) { @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 126, ../sass/mobile/_layout.scss */ /* line 144, ../sass/mobile/_layout.scss */
.browse-showtree .mobile-pane.right-repr { .browse-showtree .mobile-pane.right-repr {
background-color: rgba(0, 128, 0, 0.2);
width: 500px !important; } } 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) { @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 126, ../sass/mobile/_layout.scss */ /* line 144, ../sass/mobile/_layout.scss */
.browse-showtree .mobile-pane.right-repr { .browse-showtree .mobile-pane.right-repr {
width: 78% !important; } } background-color: rgba(255, 165, 0, 0.2);
width: 70% !important; } }
/* line 168, ../sass/mobile/_layout.scss */
.mobile-menu-icon {
position: absolute;
top: 10px;
left: 10px; }
@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 149, ../sass/mobile/_layout.scss */ /* line 176, ../sass/mobile/_layout.scss */
.button-pos {
position: absolute; } }
@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 158, ../sass/mobile/_layout.scss */
.object-header { .object-header {
position: relative; position: relative;
left: 44px; } left: 44px; }
/* line 163, ../sass/mobile/_layout.scss */ /* line 181, ../sass/mobile/_layout.scss */
.object-header .label .context-available { .object-header .label .context-available {
opacity: 1 !important; } } opacity: 1 !important; } }
@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 170, ../sass/mobile/_layout.scss */ /* line 188, ../sass/mobile/_layout.scss */
.desktop-hide { .desktop-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), 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 177, ../sass/mobile/_layout.scss */ /* line 195, ../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), 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 183, ../sass/mobile/_layout.scss */ /* line 201, ../sass/mobile/_layout.scss */
.mobile-important-hide { .mobile-important-hide {
display: none !important; } } 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), 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 189, ../sass/mobile/_layout.scss */ /* line 207, ../sass/mobile/_layout.scss */
.mobile-back-hide { .mobile-back-hide {
pointer-events: none; pointer-events: none;
-moz-transition-property: opacity; -moz-transition-property: opacity;
@ -930,7 +956,7 @@ mct-container {
opacity: 0; } } opacity: 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) { @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 198, ../sass/mobile/_layout.scss */ /* line 216, ../sass/mobile/_layout.scss */
.mobile-back-unhide { .mobile-back-unhide {
pointer-events: all; pointer-events: all;
-moz-transition-property: opacity; -moz-transition-property: opacity;
@ -948,17 +974,17 @@ mct-container {
opacity: 1; } } 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), 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 207, ../sass/mobile/_layout.scss */ /* line 225, ../sass/mobile/_layout.scss */
.phone-hide { .phone-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), 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 213, ../sass/mobile/_layout.scss */ /* line 231, ../sass/mobile/_layout.scss */
.tree-holder { .tree-holder {
overflow-x: hidden !important; } } overflow-x: hidden !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) { @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 218, ../sass/mobile/_layout.scss */ /* line 236, ../sass/mobile/_layout.scss */
.mobile-disable-select { .mobile-disable-select {
-moz-user-select: -moz-none; -moz-user-select: -moz-none;
-ms-user-select: none; -ms-user-select: none;
@ -3026,8 +3052,7 @@ label.checkbox.custom {
@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 25, ../sass/mobile/controls/_menus.scss */ /* line 25, ../sass/mobile/controls/_menus.scss */
.mobile-menu-icon { .mobile-menu-icon {
font-size: 21px; font-size: 21px; } }
padding-top: 1px; } }
@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 25, ../sass/mobile/controls/_menus.scss */ /* line 25, ../sass/mobile/controls/_menus.scss */
.mobile-menu-icon { .mobile-menu-icon {

109
platform/commonUI/general/res/css/tree.css
View File

@ -163,6 +163,9 @@ ul.tree {
position: relative; } position: relative; }
/* line 28, ../sass/tree/_tree.scss */ /* line 28, ../sass/tree/_tree.scss */
ul.tree li span.tree-item { ul.tree li span.tree-item {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-moz-border-radius: 2px; -moz-border-radius: 2px;
-webkit-border-radius: 2px; -webkit-border-radius: 2px;
border-radius: 2px; border-radius: 2px;
@ -176,17 +179,17 @@ ul.tree {
line-height: 1.5rem; line-height: 1.5rem;
margin-bottom: 3px; margin-bottom: 3px;
position: relative; } position: relative; }
/* line 39, ../sass/tree/_tree.scss */ /* line 40, ../sass/tree/_tree.scss */
ul.tree li span.tree-item .view-control { ul.tree li span.tree-item .view-control {
display: inline-block; display: inline-block;
margin-left: 5px; margin-left: 5px;
font-size: 0.75em; font-size: 0.75em;
width: 10px; } width: 10px; }
@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 47, ../sass/tree/_tree.scss */ /* line 48, ../sass/tree/_tree.scss */
ul.tree li span.tree-item .view-control:hover { ul.tree li span.tree-item .view-control:hover {
color: #ffc700; } } color: #ffc700; } }
/* line 53, ../sass/tree/_tree.scss */ /* line 54, ../sass/tree/_tree.scss */
ul.tree li span.tree-item .label { ul.tree li span.tree-item .label {
display: block; display: block;
overflow: hidden; overflow: hidden;
@ -198,25 +201,25 @@ ul.tree {
width: auto; width: auto;
height: auto; height: auto;
left: 15px; } left: 15px; }
/* line 60, ../sass/tree/_tree.scss */ /* line 61, ../sass/tree/_tree.scss */
ul.tree li span.tree-item .label .type-icon { ul.tree li span.tree-item .label .type-icon {
text-shadow: rgba(0, 0, 0, 0.6) 0 1px 2px; text-shadow: rgba(0, 0, 0, 0.6) 0 1px 2px;
font-size: 16px; font-size: 16px;
color: #0099cc; color: #0099cc;
left: 5px; left: 5px;
position: absolute; position: absolute;
top: 4px !important; top: 4px;
bottom: auto; bottom: auto;
height: 16px; height: 16px;
line-height: 100%; line-height: 100%;
right: auto; right: auto;
width: 16px; } width: 16px; }
/* line 73, ../sass/tree/_tree.scss */ /* line 74, ../sass/tree/_tree.scss */
ul.tree li span.tree-item .label .type-icon .icon.l-icon-link, ul.tree li span.tree-item .label .type-icon .icon.l-icon-alert { ul.tree li span.tree-item .label .type-icon .icon.l-icon-link, ul.tree li span.tree-item .label .type-icon .icon.l-icon-alert {
text-shadow: black 0 1px 2px; text-shadow: black 0 1px 2px;
position: absolute; position: absolute;
z-index: 2; } z-index: 2; }
/* line 79, ../sass/tree/_tree.scss */ /* line 80, ../sass/tree/_tree.scss */
ul.tree li span.tree-item .label .type-icon .icon.l-icon-alert { ul.tree li span.tree-item .label .type-icon .icon.l-icon-alert {
color: #ff3c00; color: #ff3c00;
font-size: 8px; font-size: 8px;
@ -225,7 +228,7 @@ ul.tree {
width: 8px; width: 8px;
top: 1px; top: 1px;
right: -2px; } right: -2px; }
/* line 85, ../sass/tree/_tree.scss */ /* line 86, ../sass/tree/_tree.scss */
ul.tree li span.tree-item .label .type-icon .icon.l-icon-link { ul.tree li span.tree-item .label .type-icon .icon.l-icon-link {
color: #49dedb; color: #49dedb;
font-size: 8px; font-size: 8px;
@ -234,7 +237,7 @@ ul.tree {
width: 8px; width: 8px;
left: -3px; left: -3px;
bottom: 0px; } bottom: 0px; }
/* line 93, ../sass/tree/_tree.scss */ /* line 94, ../sass/tree/_tree.scss */
ul.tree li span.tree-item .label .title-label { ul.tree li span.tree-item .label .title-label {
overflow: hidden; overflow: hidden;
position: absolute; position: absolute;
@ -249,53 +252,53 @@ ul.tree {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; } white-space: nowrap; }
/* line 104, ../sass/tree/_tree.scss */ /* line 105, ../sass/tree/_tree.scss */
ul.tree li span.tree-item.loading { ul.tree li span.tree-item.loading {
pointer-events: none; } pointer-events: none; }
/* line 106, ../sass/tree/_tree.scss */ /* line 107, ../sass/tree/_tree.scss */
ul.tree li span.tree-item.loading .label { ul.tree li span.tree-item.loading .label {
opacity: 0.5; } opacity: 0.5; }
/* line 108, ../sass/tree/_tree.scss */ /* line 109, ../sass/tree/_tree.scss */
ul.tree li span.tree-item.loading .label .title-label { ul.tree li span.tree-item.loading .label .title-label {
font-style: italic; } font-style: italic; }
/* line 112, ../sass/tree/_tree.scss */ /* line 113, ../sass/tree/_tree.scss */
ul.tree li span.tree-item.loading .wait-spinner { ul.tree li span.tree-item.loading .wait-spinner {
margin-left: 14px; } margin-left: 14px; }
/* line 117, ../sass/tree/_tree.scss */ /* line 118, ../sass/tree/_tree.scss */
ul.tree li span.tree-item.selected { ul.tree li span.tree-item.selected {
background: #005177; background: #005177;
color: #fff; } color: #fff; }
/* line 121, ../sass/tree/_tree.scss */ /* line 122, ../sass/tree/_tree.scss */
ul.tree li span.tree-item.selected .view-control { ul.tree li span.tree-item.selected .view-control {
color: #0099cc; } color: #0099cc; }
/* line 124, ../sass/tree/_tree.scss */ /* line 125, ../sass/tree/_tree.scss */
ul.tree li span.tree-item.selected .label .type-icon { ul.tree li span.tree-item.selected .label .type-icon {
color: #fff; } color: #fff; }
@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 132, ../sass/tree/_tree.scss */ /* line 133, ../sass/tree/_tree.scss */
ul.tree li span.tree-item:not(.selected):hover { ul.tree li span.tree-item:not(.selected):hover {
background: #404040; background: #404040;
color: #cccccc; } color: #cccccc; }
/* line 135, ../sass/tree/_tree.scss */ /* line 136, ../sass/tree/_tree.scss */
ul.tree li span.tree-item:not(.selected):hover .context-trigger { ul.tree li span.tree-item:not(.selected):hover .context-trigger {
display: block; } display: block; }
/* line 138, ../sass/tree/_tree.scss */ /* line 139, ../sass/tree/_tree.scss */
ul.tree li span.tree-item:not(.selected):hover .icon { ul.tree li span.tree-item:not(.selected):hover .icon {
color: #33ccff; } } color: #33ccff; } }
/* line 145, ../sass/tree/_tree.scss */ /* line 146, ../sass/tree/_tree.scss */
ul.tree li span.tree-item:not(.loading) { ul.tree li span.tree-item:not(.loading) {
cursor: pointer; } cursor: pointer; }
/* line 149, ../sass/tree/_tree.scss */ /* line 150, ../sass/tree/_tree.scss */
ul.tree li span.tree-item .context-trigger { ul.tree li span.tree-item .context-trigger {
top: -1px; top: -1px;
position: absolute; position: absolute;
right: 3px; } right: 3px; }
/* line 155, ../sass/tree/_tree.scss */ /* line 156, ../sass/tree/_tree.scss */
ul.tree li span.tree-item .context-trigger .invoke-menu { ul.tree li span.tree-item .context-trigger .invoke-menu {
font-size: 0.75em; font-size: 0.75em;
height: 0.9rem; height: 0.9rem;
line-height: 0.9rem; } line-height: 0.9rem; }
/* line 164, ../sass/tree/_tree.scss */ /* line 165, ../sass/tree/_tree.scss */
ul.tree ul.tree { ul.tree ul.tree {
margin-left: 15px; } margin-left: 15px; }
@ -321,38 +324,28 @@ ul.tree {
* at runtime from the About dialog for additional information. * at runtime from the About dialog for additional information.
*****************************************************************************/ *****************************************************************************/
@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 24, ../sass/mobile/_tree.scss */ /* line 30, ../sass/mobile/_tree.scss */
ul.tree { ul.tree li span.tree-item {
margin: 0; height: 35px;
padding: 0; } line-height: 35px;
/* line 314, ../sass/_mixins.scss */ margin-bottom: 0px; }
ul.tree li { /* line 35, ../sass/mobile/_tree.scss */
list-style-type: none; ul.tree li span.tree-item .view-control {
margin: 0; position: absolute;
padding: 0; } font-size: 1.1em;
/* line 29, ../sass/mobile/_tree.scss */ right: 0px;
ul.tree li span.tree-item { width: 30px;
height: 38px; text-align: center; }
line-height: 38px; /* line 44, ../sass/mobile/_tree.scss */
padding-top: 3px; ul.tree li span.tree-item .label {
padding-bottom: 3px; left: 0;
margin-bottom: 0px; } right: 35px;
/* line 36, ../sass/mobile/_tree.scss */ font-size: 1.2em; }
ul.tree li span.tree-item .view-control { /* line 51, ../sass/mobile/_tree.scss */
position: absolute; ul.tree li span.tree-item .label .type-icon {
right: 13px; top: 9px;
font-size: 1.8em; bottom: auto;
right: 0px; height: 16px; }
width: 35px; /* line 62, ../sass/mobile/_tree.scss */
text-align: center; } ul.tree ul.tree {
/* line 45, ../sass/mobile/_tree.scss */ margin-left: 20px; } }
ul.tree li span.tree-item .label {
left: 3px;
right: 45px;
font-size: 1.2em; }
/* line 54, ../sass/mobile/_tree.scss */
ul.tree li span.tree-item .label .title-label {
right: 16.9px; }
/* line 63, ../sass/mobile/_tree.scss */
ul.tree ul.tree {
margin-left: 7px; } }

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

@ -110,6 +110,7 @@ $ueBrowseGridItemBottomBarH: 30px;
$itemPadLR: 5px; $itemPadLR: 5px;
// Tree // Tree
$treeVCW: 10px; $treeVCW: 10px;
$treeTypeIconH: 16px;
$treeTypeIconW: 20px; $treeTypeIconW: 20px;
$treeContextTriggerW: 20px; $treeContextTriggerW: 20px;
$colorItemTreeIcon: $colorKey; $colorItemTreeIcon: $colorKey;

2
platform/commonUI/general/res/sass/_mixins.scss
View File

@ -328,7 +328,7 @@
} }
@mixin verticalCenterBlock($holderH, $itemH) { @mixin verticalCenterBlock($holderH, $itemH) {
top: floor(($holderH - $itemH) / 2) !important; top: floor(($holderH - $itemH) / 2);
bottom: auto; bottom: auto;
height: $itemH; height: $itemH;
} }

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

@ -60,7 +60,7 @@
top: $m; right: $m; bottom: $m; left: $m; top: $m; right: $m; bottom: $m; left: $m;
} }
.bar { .bar {
&.top-bar.abs { &.top-bar {
bottom: auto; bottom: auto;
height: $ueBrowseGridItemTopBarH; height: $ueBrowseGridItemTopBarH;
line-height: $ueBrowseGridItemTopBarH; line-height: $ueBrowseGridItemTopBarH;
@ -76,7 +76,7 @@
} }
} }
} }
&.bottom-bar.abs { &.bottom-bar {
top: auto; top: auto;
height: $ueBrowseGridItemBottomBarH; height: $ueBrowseGridItemBottomBarH;
} }

10
platform/commonUI/general/res/sass/mobile/_constants.scss
View File

@ -29,10 +29,10 @@ $phoneItemH: floor($ueBrowseGridItemLg/4);
$tabletItemH: floor($ueBrowseGridItemLg/3); $tabletItemH: floor($ueBrowseGridItemLg/3);
/************************** MOBILE TREE MENU DIMENSIONS */ /************************** MOBILE TREE MENU DIMENSIONS */
$mobile-treeHeight: 38px; $mobileTreeItemH: 35px;
$mobile-startingTreeLeft: 3px; $mobile-startingTreeLeft: 3px;
$mobile-runningTreeLeft: 7px; $mobileTreeItemIndent: 20px;
$mobile-treeRight: 13px; $mobileTreeRightArrowW: 30px;
/************************** WINDOW DIMENSIONS FOR RWD */ /************************** WINDOW DIMENSIONS FOR RWD */
$phoMaxW: 514px; $phoMaxW: 514px;
@ -82,7 +82,7 @@ $desktopLandscape: "screen and #{$desktopLandscapeCheck}";
/************************** DEVICE PARAMETERS FOR MENUS/REPRESENTATIONS */ /************************** DEVICE PARAMETERS FOR MENUS/REPRESENTATIONS */
$phoneRepSizePortrait: 19px; $phoneRepSizePortrait: 19px;
$phoneRepSizeLandscape: 66%; $phoneRepSizeLandscape: 60%;
$tabletRepSizePortrait: 500px; $tabletRepSizePortrait: 500px;
$tabletRepSizeLandscape: 78%; $tabletRepSizeLandscape: 70%;
$desktopMenuSize: 25%; $desktopMenuSize: 25%;

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

@ -27,9 +27,27 @@
.mobile-pane { .mobile-pane {
@include phoneandtablet { @include phoneandtablet {
position: absolute; position: absolute;
left: 0; top: 0; top: 0 !important; right: 0; bottom: 0; left: 0;
right: 0; //white-space: nowrap; // CH CO
white-space: nowrap; }
}
.user-environ .browse-area,
.user-environ .edit-area,
.user-environ .editor {
@include phoneandtablet {
//@include test(red);
top: 0; left: 0; right: 0; bottom: $ueFooterH;
}
}
.holder.l-mobile {
@include phoneandtablet {
//@include test();
top: $bodyMargin !important;
right: $bodyMargin !important;
bottom: $bodyMargin !important;
left: $bodyMargin !important;
} }
} }
@ -39,8 +57,8 @@
@include desktop { @include desktop {
min-width: 150px; min-width: 150px;
max-width: 800px; max-width: 800px;
width: $desktopMenuSize; width: $desktopMenuSize;
} }
} }
// When the tree is hidden, these are the // When the tree is hidden, these are the
@ -56,7 +74,7 @@
@include user-select(none); @include user-select(none);
} }
// Sets the left tree menu when the tree // Sets the left tree menu when the tree
// is hidden. // is hidden.
.mobile-pane.left-menu { .mobile-pane.left-menu {
@include phoneandtablet { @include phoneandtablet {
@include trans-prop-nice(opacity, .4s); @include trans-prop-nice(opacity, .4s);
@ -64,19 +82,19 @@
right: 100% !important; right: 100% !important;
width: auto !important; width: auto !important;
overflow-y: hidden; overflow-y: hidden;
overflow-x: hidden; overflow-x: hidden;
} }
} }
// Sets the right represenation when // Sets the right represenation when
// the tree is hidden. // the tree is hidden.
.mobile-pane.right-repr { .mobile-pane.right-repr {
@include phoneandtablet { @include phoneandtablet {
@include slMenuTransitions; @include slMenuTransitions;
left: auto !important; left: auto !important;
width: 100% !important; width: 100% !important;
} }
} }
} }
.mobile-tree-holder { .mobile-tree-holder {
@ -86,7 +104,7 @@
// When the tree is shown, these are // When the tree is shown, these are
// the classes used for the left menu // the classes used for the left menu
// and the right menu (for each device & // and the right menu (for each device &
// orientation combination, separate // orientation combination, separate
// parameters are used) // parameters are used)
.browse-showtree { .browse-showtree {
// NOTE: DISABLED SELECTION // NOTE: DISABLED SELECTION
@ -98,10 +116,11 @@
@include user-select(none); @include user-select(none);
} }
// Sets the left tree menu when the tree // Sets the left tree menu when the tree
// is shown. // is shown.
.mobile-pane.left-menu { .mobile-pane.left-menu {
@include phoneandtablet { @include phoneandtablet {
@include trans-prop-nice(opacity, .4s); @include trans-prop-nice(opacity, .4s);
@include background-image(linear-gradient(90deg, rgba(black, 0) 98%, rgba(black, 0.3) 100%));
opacity: 1; opacity: 1;
display: block !important; display: block !important;
width: auto !important; width: auto !important;
@ -121,8 +140,7 @@
right: $tabletRepSizeLandscape !important; right: $tabletRepSizeLandscape !important;
} }
} }
// Sets the right represenation when // Sets the right representation when the tree is shown.
// the tree is shown.
.mobile-pane.right-repr { .mobile-pane.right-repr {
@include phoneandtablet { @include phoneandtablet {
@include slMenuTransitions; @include slMenuTransitions;
@ -137,19 +155,19 @@
width: $phoneRepSizeLandscape !important; width: $phoneRepSizeLandscape !important;
} }
@include tabletPortrait { @include tabletPortrait {
//@include test(green);
width: $tabletRepSizePortrait !important; width: $tabletRepSizePortrait !important;
} }
@include tabletLandscape { @include tabletLandscape {
//@include test(orange);
width: $tabletRepSizeLandscape !important; width: $tabletRepSizeLandscape !important;
} }
} }
} }
// Button position is set as absolute with transitions .mobile-menu-icon {
.button-pos { position: absolute;
@include phoneandtablet { top: $bodyMargin; left: $bodyMargin;
position: absolute;
}
} }
// Object header must be moved // Object header must be moved

27
platform/commonUI/general/res/sass/mobile/_tree.scss
View File

@ -24,21 +24,20 @@
ul.tree { ul.tree {
// Only applies to phones and tablets // Only applies to phones and tablets
@include phoneandtablet { @include phoneandtablet {
@include menuUlReset(); //@include menuUlReset();
li { li {
//border-top: 1px solid $colorInteriorBorder; // TEMP
span.tree-item { span.tree-item {
// Adds some space to the top of each tree item // Adds some space to the top of each tree item
height: $mobile-treeHeight; height: $mobileTreeItemH;
line-height: $mobile-treeHeight; line-height: $mobileTreeItemH;
padding-top: $interiorMarginSm;
padding-bottom: $interiorMarginSm;
margin-bottom: 0px; margin-bottom: 0px;
.view-control { .view-control {
//@include test(red);
position: absolute; position: absolute;
right: $mobile-treeRight; font-size: 1.1em;
font-size: 1.8em;
right: 0px; right: 0px;
width: 35px; width: $mobileTreeRightArrowW;
text-align: center; text-align: center;
} }
@ -46,13 +45,13 @@ ul.tree {
// Designates the starting left margin // Designates the starting left margin
// (indentation) of 'My Items' // (indentation) of 'My Items'
// Also adds right space for selection button // Also adds right space for selection button
left: $mobile-startingTreeLeft; left: 0;
right: 45px; right: $mobileTreeRightArrowW + $interiorMargin; // Allows tree item name to stop prior to the arrow
font-size: 1.2em; font-size: 1.2em;
// Allows tree item name to stop prior .type-icon {
// to the arrow @include verticalCenterBlock($mobileTreeItemH, $treeTypeIconH);
}
.title-label { .title-label {
right: $mobile-treeRight * 1.3;
} }
} }
} }
@ -61,7 +60,7 @@ ul.tree {
// Sets the margin on the left, which causes the // Sets the margin on the left, which causes the
// running indentation after each folder is made // running indentation after each folder is made
ul.tree { ul.tree {
margin-left: $mobile-runningTreeLeft; margin-left: $mobileTreeItemIndent;
} }
} }
} }

2
platform/commonUI/general/res/sass/mobile/controls/_menus.scss
View File

@ -26,7 +26,7 @@
display: inline-block; display: inline-block;
@include phoneandtablet { @include phoneandtablet {
font-size: 21px; font-size: 21px;
padding-top: $imageThumbPad; //padding-top: $imageThumbPad;
} }
@include desktop { @include desktop {
display: none; display: none;

3
platform/commonUI/general/res/sass/tree/_tree.scss
View File

@ -27,6 +27,7 @@ ul.tree {
position: relative; position: relative;
span.tree-item { span.tree-item {
$runningItemW: 0; $runningItemW: 0;
@include box-sizing(border-box);
@include border-radius($basicCr); @include border-radius($basicCr);
@include single-transition(background-color, 0.25s); @include single-transition(background-color, 0.25s);
display: block; display: block;
@ -59,7 +60,7 @@ ul.tree {
.type-icon { .type-icon {
//@include absPosDefault(0, false); //@include absPosDefault(0, false);
$d: 16px; // 16px is crisp size $d: $treeTypeIconH; // 16px is crisp size
@include txtShdwSubtle(0.6); @include txtShdwSubtle(0.6);
font-size: $d; font-size: $d;
color: $colorItemTreeIcon; color: $colorItemTreeIcon;