alihan/openmct
1
0
Fork 0
Code Issues Pull Requests 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
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>
</div> </div>
</mct-split-pane> </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> ng-click="treeSlide()">m</div>
</div> </div>
<mct-include key="'bottombar'"></mct-include> <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. * at runtime from the About dialog for additional information.
*****************************************************************************/ *****************************************************************************/
@media screen and (max-width: 514px) { @media screen and (max-width: 514px) {
/* line 26, ../sass/mobile/_layout.scss */ /* line 32, ../sass/mobile/_layout.scss */
.holder-hide { .holder-hide {
-moz-transition-duration: 0.2s; -moz-transition-duration: 0.2s;
-o-transition-duration: 0.2s; -o-transition-duration: 0.2s;
-webkit-transition-duration: 0.2s; -webkit-transition-duration: 0.2s;
transition-duration: 0.2s; transition-duration: 0.2s;
left: -108px; } } left: -82.8%; } }
@media screen and (min-width: 515px) and (max-width: 800px) { @media screen and (min-width: 515px) and (max-width: 800px) {
/* line 26, ../sass/mobile/_layout.scss */ /* line 32, ../sass/mobile/_layout.scss */
.holder-hide { .holder-hide {
-moz-transition-duration: 0.2s; -moz-transition-duration: 0.2s;
-o-transition-duration: 0.2s; -o-transition-duration: 0.2s;
-webkit-transition-duration: 0.2s; -webkit-transition-duration: 0.2s;
transition-duration: 0.2s; transition-duration: 0.2s;
left: -150px; } } left: -38.64%; } }
@media screen and (max-width: 800px) { @media screen and (max-width: 800px) {
/* line 37, ../sass/mobile/_layout.scss */ /* line 43, ../sass/mobile/_layout.scss */
.holder-show { .holder-show {
-moz-transition-duration: 0.2s; -moz-transition-duration: 0.2s;
-o-transition-duration: 0.2s; -o-transition-duration: 0.2s;
@@ -757,7 +757,27 @@ mct-container {
transition-duration: 0.2s; transition-duration: 0.2s;
left: 0px; } } 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 { .button-hide {
position: absolute; position: absolute;
-moz-transition-duration: 0.2s; -moz-transition-duration: 0.2s;
@@ -765,44 +785,44 @@ mct-container {
-webkit-transition-duration: 0.2s; -webkit-transition-duration: 0.2s;
transition-duration: 0.2s; } transition-duration: 0.2s; }
@media screen and (max-width: 514px) { @media screen and (max-width: 514px) {
/* line 44, ../sass/mobile/_layout.scss */ /* line 62, ../sass/mobile/_layout.scss */
.button-hide { .button-hide {
left: 108px; } } left: 46%; } }
@media screen and (min-width: 515px) and (max-width: 800px) { @media screen and (min-width: 515px) and (max-width: 800px) {
/* line 44, ../sass/mobile/_layout.scss */ /* line 62, ../sass/mobile/_layout.scss */
.button-hide { .button-hide {
left: 150px; } } left: 28%; } }
/* line 55, ../sass/mobile/_layout.scss */ /* line 73, ../sass/mobile/_layout.scss */
.object-header-mobile { .object-header-mobile {
position: relative; } position: relative; }
@media screen and (max-width: 514px) { @media screen and (max-width: 514px) {
/* line 55, ../sass/mobile/_layout.scss */ /* line 73, ../sass/mobile/_layout.scss */
.object-header-mobile { .object-header-mobile {
left: 23px; } } left: 4.6%; } }
@media screen and (min-width: 515px) and (max-width: 800px) { @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 { .object-header-mobile {
left: 15px; } } left: 2.8%; } }
/* line 65, ../sass/mobile/_layout.scss */ /* line 83, ../sass/mobile/_layout.scss */
.mobile-menu-icon { .mobile-menu-icon {
top: 5px; } top: 5px; }
@media screen and (min-width: 801px) { @media screen and (min-width: 801px) {
/* line 65, ../sass/mobile/_layout.scss */ /* line 83, ../sass/mobile/_layout.scss */
.mobile-menu-icon { .mobile-menu-icon {
display: none; } } display: none; } }
@media screen and (max-width: 514px) { @media screen and (max-width: 514px) {
/* line 72, ../sass/mobile/_layout.scss */ /* line 90, ../sass/mobile/_layout.scss */
.browse-manage { .browse-manage {
width: 100px; } } width: 46%; } }
@media screen and (min-width: 515px) and (max-width: 800px) { @media screen and (min-width: 515px) and (max-width: 800px) {
/* line 72, ../sass/mobile/_layout.scss */ /* line 90, ../sass/mobile/_layout.scss */
.browse-manage { .browse-manage {
width: 150px; } } width: 28%; } }
@media screen and (min-width: 801px) { @media screen and (min-width: 801px) {
/* line 72, ../sass/mobile/_layout.scss */ /* line 90, ../sass/mobile/_layout.scss */
.browse-manage { .browse-manage {
min-width: 150px; min-width: 150px;
max-width: 800px; 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%;" // style="min-width: 150px; max-width: 800px; width: 25%;"
// NOTE: Added to adjust the browse folder tree list view // NOTE: Added to adjust the browse folder tree list view
$leftPhone: 46%;
$leftTab: 28%;
$hideRatioPhone: 1.8;
$hideRatioTab: 1.38;
.holder-hide { .holder-hide {
@include phone { @include phone {
@include transition-duration(.2s); @include transition-duration(.2s);
left: -108px; left: (-1 * $hideRatioPhone) * $leftPhone;
} }
@include tablet { @include tablet {
@include transition-duration(.2s); @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 { .button-hide {
position: absolute; position: absolute;
@include transition-duration(.2s); @include transition-duration(.2s);
@include phone { @include phone {
left: 108px; left: $leftPhone;
} }
@include tablet { @include tablet {
left: 150px; left: $leftTab;
} }
} }
.object-header-mobile { .object-header-mobile {
position: relative; position: relative;
@include phone { @include phone {
left: 23px; left: $leftPhone/10;
} }
@include tablet { @include tablet {
left: 15px; left: $leftTab/10;
} }
} }
@@ -71,10 +89,10 @@
.browse-manage { .browse-manage {
@include phone { @include phone {
width: 100px; width: $leftPhone;
} }
@include tablet { @include tablet {
width: 150px; width: $leftTab;
} }
@include desktop { @include desktop {
min-width: 150px; min-width: 150px;