Orientation : add landscape UX

Change-Id: I534deba77111f4956ad1cb147b53185168de9b9e

diff --git a/src/themes/tizen/common/jquery.mobile.theme.less b/src/themes/tizen/common/jquery.mobile.theme.less
index cb2340c..83c3f10 100644 (file)
--- a/src/themes/tizen/common/jquery.mobile.theme.less
+++ b/src/themes/tizen/common/jquery.mobile.theme.less
@@ -620,3 +620,119 @@ a.ui-link-inherit {
        pointer-events: none;
 }
 
+
+
+/************************************************************************
+                       Landscape mode
+************************************************************************/
+@media all and (orientation:landscape) and (device-aspect-ratio : 16/9) {
+.ui-bar-s {
+       > .ui-btn.ui-btn-back,
+       > .ui-btn.ui-btn-footer-down {
+               .ui-icon-header-back-btn {
+                       top : 5 * @unit_base;
+               }
+       }
+}
+
+.ui-header.ui-bar-s{
+       min-height : 45 * @unit_base;
+
+       .ui-title {
+               min-height : 25 * @unit_base;
+               max-height : 29 * @unit_base; /* tuning UX guide(title height too large)*/
+               font-size  : 25 * @unit_base;
+
+               margin: 12*@unit_base 8*@unit_base 4*@unit_base 8*@unit_base;/* tuning UX guide(title height too large)*/
+       }
+
+       >.ui-btn:not(.ui-btn-icon_only),
+       >.naviframe-button.ui-btn:not(.ui-btn-icon_only) {
+               width : 53 * @unit_base;
+               height : 18 * @unit_base;
+
+               bottom : 10 * @unit_base;
+       }
+
+       > .ui-btn.ui-btn-back,
+       > .ui-btn.ui-btn-footer-down {
+               right : 13 * @unit_base;
+       }
+
+       img {
+               margin-top : 16 * @unit_base;
+               height: 22 * @unit_base;
+               width: 22 * @unit_base;
+       }
+
+       .ui-title-text-sub {
+               top : 26 * @unit_base;
+       }
+
+       > .ui-btn,
+       > .naviframe-button.ui-btn {
+               top : 8 * @unit_base;
+
+               height : 34 * @unit_base;
+               width : 34 * @unit_base;
+       }
+       &.ui-title-tabbar >.ui-btn {
+               top: 8 * @unit_base;
+       }
+
+       &.ui-title-multiline {
+               img {
+                       margin-top : 12 * @unit_base;
+               }
+
+               .ui-title {
+                       min-height : 21 * @unit_base;
+                       max-height : 21 * @unit_base; /* temporary UX strange */
+                       font-size  : 19 * @unit_base;
+                       margin: 5*@unit_base 8*@unit_base 19*@unit_base 8*@unit_base;
+
+                       display : block;
+               }
+       }
+}
+
+.ui-footer.ui-bar-s {
+       height : 42 * @unit_base;
+       >.ui-btn.ui-btn-back,
+       >.ui-btn.ui-btn-footer-down,
+       >[data-icon="naviframe-more"] {
+               >.ui-btn-icon-only {
+                       width : 56 * @unit_base;
+                       height : 42 * @unit_base;
+               }
+                .ui-icon-down {
+                        top : 5 * @unit_base;
+               }
+       }
+
+       [data-icon="naviframe-more"] {
+               .ui-icon-naviframe-more {
+                       top : 5 * @unit_base;
+               }
+       }
+
+       [data-role="controlgroup"] {
+               margin-top : 6 * @unit_base; /* temp value */
+               margin-bottom : 6 * @unit_base; /* temp value */
+               padding-left : 58 * @unit_base;
+               padding-right : 58 * @unit_base;
+
+
+               [data-role="button"] {
+                       padding : 0px;
+                       margin-left : -4 * @unit_base;
+                       margin-right : -5 * @unit_base;
+                       top : -4 * @unit_base;
+               }
+       }
+
+       > [data-role="button"]:not([data-icon="naviframe-more"]) {
+               top : 3 * @unit_base;
+       }
+}
+}

diff --git a/src/themes/tizen/common/jquery.mobile.tizen.tabbar.less b/src/themes/tizen/common/jquery.mobile.tizen.tabbar.less
index 712fd27..711212a 100644 (file)
--- a/src/themes/tizen/common/jquery.mobile.tizen.tabbar.less
+++ b/src/themes/tizen/common/jquery.mobile.tizen.tabbar.less
@@ -270,3 +270,104 @@
        right : 0px;
        background-image: url(images/00_effect_title_tab_bounce_right.png);
 }
+
+
+/************************************************************************
+                       Landscape mode
+************************************************************************/
+@media all and (orientation:landscape) and (device-aspect-ratio : 16/9) {
+
+.ui-tabbar {
+       a.ui-btn {
+               padding-top : 14 * @unit_base;
+               padding-bottom : 14 * @unit_base;
+       }
+
+       .ui-btn-inner {
+               .ui-icon {
+                       top : 10 * @unit_base;
+               }
+       }
+
+       &.ui-tabbar-notext {
+               a.ui-btn {
+                       padding-top : 6 * @unit_base;
+                       padding-bottom : 5 * @unit_base;
+               }
+               .ui-btn-inner {
+                       height : 34 * @unit_base;
+               }
+       }
+}
+
+/* title font size when title tabbar */
+.ui-header.ui-bar-s.ui-title-tabbar {
+       .ui-title {
+               font-size : 19 * @unit_base;
+               margin-top : 8 * @unit_base;
+       }
+
+       .ui-tabbar {
+               &.ui-tabbar-noicons {
+                       a.ui-btn {
+                               padding-top : 10 * @unit_base;
+                               padding-bottom : 8 * @unit_base;
+                       }
+               }
+
+               &.ui-tabbar-notext {
+                       a.ui-btn {
+                               padding-top : 3 * @unit_base;
+                               padding-bottom : 2 * @unit_base;
+                       }
+               }
+       }
+}
+
+.ui-header.ui-bar-s {
+       &.ui-title-tabbar-multiline {
+               .ui-tabbar {
+                       a.ui-btn {
+                               padding-top : 6 * @unit_base;
+                               padding-bottom : 5 * @unit_base;
+                               .ui-btn-inner {
+                                       height : 54 * @unit_base;
+                                       .ui-btn-text {
+                                               line-height : 15 * @unit_base;
+                                       }
+                               }
+                       }
+               }
+       }
+}
+
+.ui-footer.ui-bar-s {
+       .ui-tabbar {
+               height : 42 * @unit_base;
+
+               a.ui-btn {
+                       padding-top : 13 * @unit_base;
+                       padding-bottom : 12 * @unit_base;
+               }
+
+               &.ui-tabbar-notext {
+                       a.ui-btn {
+                               padding-top : 4 * @unit_base;
+                               padding-bottom : 4 * @unit_base;
+                       }
+               }
+       }
+}
+
+.ui-tabbar-s.ui-navbar-noicons {
+       font-size : 19 * @unit_base;
+}
+
+/* Scrollable tabbar */
+
+.ui-tabbar-divider {
+       width : 81 * @unit_base;
+       height : 55 * @unit_base;
+}
+
+}