diff --git a/platform/commonUI/browse/res/templates/browse.html b/platform/commonUI/browse/res/templates/browse.html index 12755dd3f1..b8ab9845cb 100644 --- a/platform/commonUI/browse/res/templates/browse.html +++ b/platform/commonUI/browse/res/templates/browse.html @@ -31,16 +31,16 @@
-
- - -
+
+ + +
diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css index 6fb970f646..33838faa7f 100644 --- a/platform/commonUI/general/res/css/theme-espresso.css +++ b/platform/commonUI/general/res/css/theme-espresso.css @@ -754,124 +754,130 @@ mct-container { 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 46, ../sass/mobile/_layout.scss */ + /* line 48, ../sass/mobile/_layout.scss */ .browse-hidetree .pane-special.left { - -moz-transition-duration: 0.2s; - -o-transition-duration: 0.2s; - -webkit-transition-duration: 0.2s; - transition-duration: 0.2s; + -moz-transition-duration: 0.5s; + -o-transition-duration: 0.5s; + -webkit-transition-duration: 0.5s; + transition-duration: 0.5s; + transition-timing-function: ease; width: 0px !important; right: auto !important; } - /* line 52, ../sass/mobile/_layout.scss */ + /* line 54, ../sass/mobile/_layout.scss */ .browse-hidetree .pane-special.left .createBtnPos { 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 59, ../sass/mobile/_layout.scss */ + /* line 61, ../sass/mobile/_layout.scss */ .browse-hidetree .pane-special.right { - -moz-transition-duration: 0.2s; - -o-transition-duration: 0.2s; - -webkit-transition-duration: 0.2s; - transition-duration: 0.2s; + -moz-transition-duration: 0.5s; + -o-transition-duration: 0.5s; + -webkit-transition-duration: 0.5s; + transition-duration: 0.5s; + transition-timing-function: ease; width: auto !important; left: 0px !important; } } @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) { - /* line 69, ../sass/mobile/_layout.scss */ + /* line 71, ../sass/mobile/_layout.scss */ .browse-showtree .pane-special.left { - -moz-transition-duration: 0.2s; - -o-transition-duration: 0.2s; - -webkit-transition-duration: 0.2s; - transition-duration: 0.2s; + -moz-transition-duration: 0.5s; + -o-transition-duration: 0.5s; + -webkit-transition-duration: 0.5s; + transition-duration: 0.5s; + transition-timing-function: ease; display: block !important; right: auto !important; } - /* line 75, ../sass/mobile/_layout.scss */ + /* line 77, ../sass/mobile/_layout.scss */ .browse-showtree .pane-special.left .createBtnPos { + height: inherit; 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) { - /* line 69, ../sass/mobile/_layout.scss */ + /* line 71, ../sass/mobile/_layout.scss */ .browse-showtree .pane-special.left { width: 80% !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 69, ../sass/mobile/_layout.scss */ + /* line 71, ../sass/mobile/_layout.scss */ .browse-showtree .pane-special.left { width: 30% !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 69, ../sass/mobile/_layout.scss */ + /* line 71, ../sass/mobile/_layout.scss */ .browse-showtree .pane-special.left { - width: 40% !important; } } + width: 35% !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 69, ../sass/mobile/_layout.scss */ + /* line 71, ../sass/mobile/_layout.scss */ .browse-showtree .pane-special.left { width: 25% !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 94, ../sass/mobile/_layout.scss */ + /* line 97, ../sass/mobile/_layout.scss */ .browse-showtree .pane-special.right { - -moz-transition-duration: 0.2s; - -o-transition-duration: 0.2s; - -webkit-transition-duration: 0.2s; - transition-duration: 0.2s; + -moz-transition-duration: 0.5s; + -o-transition-duration: 0.5s; + -webkit-transition-duration: 0.5s; + transition-duration: 0.5s; + transition-timing-function: ease; 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 94, ../sass/mobile/_layout.scss */ + /* line 97, ../sass/mobile/_layout.scss */ .browse-showtree .pane-special.right { left: 80% !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 94, ../sass/mobile/_layout.scss */ + /* line 97, ../sass/mobile/_layout.scss */ .browse-showtree .pane-special.right { left: 30% !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 94, ../sass/mobile/_layout.scss */ + /* line 97, ../sass/mobile/_layout.scss */ .browse-showtree .pane-special.right { - left: 40% !important; } } + left: 35% !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 94, ../sass/mobile/_layout.scss */ + /* line 97, ../sass/mobile/_layout.scss */ .browse-showtree .pane-special.right { left: 25% !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 114, ../sass/mobile/_layout.scss */ + /* line 117, ../sass/mobile/_layout.scss */ .mobile-splitter { display: none; } } -/* line 122, ../sass/mobile/_layout.scss */ +/* line 125, ../sass/mobile/_layout.scss */ .button-pos { position: absolute; - -moz-transition-duration: 0.2s; - -o-transition-duration: 0.2s; - -webkit-transition-duration: 0.2s; - transition-duration: 0.2s; } + -moz-transition-duration: 0.5s; + -o-transition-duration: 0.5s; + -webkit-transition-duration: 0.5s; + transition-duration: 0.5s; + transition-timing-function: ease; } @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 127, ../sass/mobile/_layout.scss */ + /* line 130, ../sass/mobile/_layout.scss */ .object-header-mobile { position: relative; left: 30px; } } -/* line 134, ../sass/mobile/_layout.scss */ +/* line 137, ../sass/mobile/_layout.scss */ .mobile-menu-icon { top: 5px; } @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) { - /* line 134, ../sass/mobile/_layout.scss */ + /* line 137, ../sass/mobile/_layout.scss */ .mobile-menu-icon { font-size: 125%; } } @media screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) { - /* line 134, ../sass/mobile/_layout.scss */ + /* line 137, ../sass/mobile/_layout.scss */ .mobile-menu-icon { font-size: 175%; } } @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) { - /* line 134, ../sass/mobile/_layout.scss */ + /* line 137, ../sass/mobile/_layout.scss */ .mobile-menu-icon { 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) { - /* line 148, ../sass/mobile/_layout.scss */ + /* line 151, ../sass/mobile/_layout.scss */ .mobile-hide { 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) { - /* line 154, ../sass/mobile/_layout.scss */ + /* line 157, ../sass/mobile/_layout.scss */ .phone-hide { display: none; } } diff --git a/platform/commonUI/general/res/sass/mobile/_constants.scss b/platform/commonUI/general/res/sass/mobile/_constants.scss index 1c10f59395..2886b8a7e6 100644 --- a/platform/commonUI/general/res/sass/mobile/_constants.scss +++ b/platform/commonUI/general/res/sass/mobile/_constants.scss @@ -69,6 +69,6 @@ $desktopLandscape: "screen and #{$desktopLanscapeCheck}"; /************************** DEVICE PARAMETERS FOR MENUS */ $phoneMenuSizePortrait: 80%; $phoneMenuSizeLandscape: 30%; -$tabletMenuSizePortrait: 40%; +$tabletMenuSizePortrait: 35%; $tabletMenuSizeLandscape: 25%; $desktopMenuSize: 25%; \ No newline at end of file diff --git a/platform/commonUI/general/res/sass/mobile/_layout.scss b/platform/commonUI/general/res/sass/mobile/_layout.scss index a59713c236..0cb3ac5307 100644 --- a/platform/commonUI/general/res/sass/mobile/_layout.scss +++ b/platform/commonUI/general/res/sass/mobile/_layout.scss @@ -42,10 +42,12 @@ } } + + .browse-hidetree { .pane-special.left { @include phoneandtablet { - @include transition-duration(.2s); + @include slMenuTransitions; width: 0px !important; right: auto !important; @@ -58,7 +60,7 @@ .pane-special.right { @include phoneandtablet { - @include transition-duration(.2s); + @include slMenuTransitions; width: auto !important; left: 0px !important; } @@ -68,14 +70,15 @@ .browse-showtree { .pane-special.left { @include phoneandtablet { - @include transition-duration(.2s); + @include slMenuTransitions; display: block !important; right: auto !important; .createBtnPos { + height: inherit; overflow-y: hidden; overflow-x: hidden; - } + } } @include phonePortrait { width: $phoneMenuSizePortrait !important; @@ -93,8 +96,8 @@ .pane-special.right { @include phoneandtablet { - @include transition-duration(.2s); - width: auto !important; + @include slMenuTransitions; + width: auto !important; } @include phonePortrait { left: $phoneMenuSizePortrait !important; @@ -121,7 +124,7 @@ .button-pos { position: absolute; - @include transition-duration(.2s); + @include slMenuTransitions; } .object-header-mobile { diff --git a/platform/commonUI/general/res/sass/mobile/_mixins.scss b/platform/commonUI/general/res/sass/mobile/_mixins.scss index 85d4a78b7a..764fdfd098 100644 --- a/platform/commonUI/general/res/sass/mobile/_mixins.scss +++ b/platform/commonUI/general/res/sass/mobile/_mixins.scss @@ -80,3 +80,8 @@ @content } } + +@mixin slMenuTransitions { + @include transition-duration(.5s); + transition-timing-function: ease; +}