ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-02-20 17:33:23 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

[Mobile] Adjust

Browse Source 
Adjusted the tablet amount
that the slide occurs.
This commit is contained in:
Dave 2015-07-09 13:42:07 -07:00
parent 82c8d26264
commit dfd08000f1
3 changed files with 69 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -42,7 +42,7 @@
</div>
</div>
</mct-split-pane>
<div class="s-very-subtle key-properties button-hide ui-symbol mobile-menu-icon"
<div class="s-very-subtle key-properties ui-symbol mobile-menu-icon button-hide" ng-class="treeCl ? 'button-show' : 'button-hide'"
ng-click="treeSlide()">m</div>
</div>
<mct-include key="'bottombar'"></mct-include>

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

@ -732,24 +732,24 @@ mct-container {
* at runtime from the About dialog for additional information.
*****************************************************************************/
@media screen and (max-width: 514px) {
/* line 26, ../sass/mobile/_layout.scss */
/* line 32, ../sass/mobile/_layout.scss */
.holder-hide {
-moz-transition-duration: 0.2s;
-o-transition-duration: 0.2s;
-webkit-transition-duration: 0.2s;
transition-duration: 0.2s;
left: -108px; } }
left: -82.8%; } }
@media screen and (min-width: 515px) and (max-width: 800px) {
/* line 26, ../sass/mobile/_layout.scss */
/* line 32, ../sass/mobile/_layout.scss */
.holder-hide {
-moz-transition-duration: 0.2s;
-o-transition-duration: 0.2s;
-webkit-transition-duration: 0.2s;
transition-duration: 0.2s;
left: -150px; } }
left: -38.64%; } }
@media screen and (max-width: 800px) {
/* line 37, ../sass/mobile/_layout.scss */
/* line 43, ../sass/mobile/_layout.scss */
.holder-show {
-moz-transition-duration: 0.2s;
-o-transition-duration: 0.2s;
@ -757,7 +757,27 @@ mct-container {
transition-duration: 0.2s;
left: 0px; } }
/* line 44, ../sass/mobile/_layout.scss */
/* line 50, ../sass/mobile/_layout.scss */
.button-show {
position: absolute; }
@media screen and (max-width: 514px) {
/* line 50, ../sass/mobile/_layout.scss */
.button-show {
-moz-transition-duration: 0.2s;
-o-transition-duration: 0.2s;
-webkit-transition-duration: 0.2s;
transition-duration: 0.2s;
left: 82.8%; } }
@media screen and (min-width: 515px) and (max-width: 800px) {
/* line 50, ../sass/mobile/_layout.scss */
.button-show {
-moz-transition-duration: 0.2s;
-o-transition-duration: 0.2s;
-webkit-transition-duration: 0.2s;
transition-duration: 0.2s;
left: 38.64%; } }
/* line 62, ../sass/mobile/_layout.scss */
.button-hide {
position: absolute;
-moz-transition-duration: 0.2s;
@ -765,44 +785,44 @@ mct-container {
-webkit-transition-duration: 0.2s;
transition-duration: 0.2s; }
@media screen and (max-width: 514px) {
/* line 44, ../sass/mobile/_layout.scss */
/* line 62, ../sass/mobile/_layout.scss */
.button-hide {
left: 108px; } }
left: 46%; } }
@media screen and (min-width: 515px) and (max-width: 800px) {
/* line 44, ../sass/mobile/_layout.scss */
/* line 62, ../sass/mobile/_layout.scss */
.button-hide {
left: 150px; } }
left: 28%; } }
/* line 55, ../sass/mobile/_layout.scss */
/* line 73, ../sass/mobile/_layout.scss */
.object-header-mobile {
position: relative; }
@media screen and (max-width: 514px) {
/* line 55, ../sass/mobile/_layout.scss */
/* line 73, ../sass/mobile/_layout.scss */
.object-header-mobile {
left: 23px; } }
left: 4.6%; } }
@media screen and (min-width: 515px) and (max-width: 800px) {
/* line 55, ../sass/mobile/_layout.scss */
/* line 73, ../sass/mobile/_layout.scss */
.object-header-mobile {
left: 15px; } }
left: 2.8%; } }
/* line 65, ../sass/mobile/_layout.scss */
/* line 83, ../sass/mobile/_layout.scss */
.mobile-menu-icon {
top: 5px; }
@media screen and (min-width: 801px) {
/* line 65, ../sass/mobile/_layout.scss */
/* line 83, ../sass/mobile/_layout.scss */
.mobile-menu-icon {
display: none; } }
@media screen and (max-width: 514px) {
/* line 72, ../sass/mobile/_layout.scss */
/* line 90, ../sass/mobile/_layout.scss */
.browse-manage {
width: 100px; } }
width: 46%; } }
@media screen and (min-width: 515px) and (max-width: 800px) {
/* line 72, ../sass/mobile/_layout.scss */
/* line 90, ../sass/mobile/_layout.scss */
.browse-manage {
width: 150px; } }
width: 28%; } }
@media screen and (min-width: 801px) {
/* line 72, ../sass/mobile/_layout.scss */
/* line 90, ../sass/mobile/_layout.scss */
.browse-manage {
min-width: 150px;
max-width: 800px;

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

@ -23,14 +23,20 @@
// style="min-width: 150px; max-width: 800px; width: 25%;"
// NOTE: Added to adjust the browse folder tree list view
$leftPhone: 46%;
$leftTab: 28%;
$hideRatioPhone: 1.8;
$hideRatioTab: 1.38;
.holder-hide {
@include phone {
@include transition-duration(.2s);
left: -108px;
left: (-1 * $hideRatioPhone) * $leftPhone;
}
@include tablet {
@include transition-duration(.2s);
left: -150px;
left: (-1 * $hideRatioTab) * $leftTab;
}
}
@ -41,24 +47,36 @@
}
}
.button-show {
position: absolute;
@include phone {
@include transition-duration(.2s);
left: ($hideRatioPhone) * $leftPhone;
}
@include tablet {
@include transition-duration(.2s);
left: ($hideRatioTab) * $leftTab;
}
}
.button-hide {
position: absolute;
@include transition-duration(.2s);
@include phone {
left: 108px;
left: $leftPhone;
}
@include tablet {
left: 150px;
left: $leftTab;
}
}
.object-header-mobile {
position: relative;
@include phone {
left: 23px;
left: $leftPhone/10;
}
@include tablet {
left: 15px;
left: $leftTab/10;
}
}
@ -71,10 +89,10 @@
.browse-manage {
@include phone {
width: 100px;
width: $leftPhone;
}
@include tablet {
width: 150px;
width: $leftTab;
}
@include desktop {
min-width: 150px;