From: Jinhyuk Jun <jinhyuk.jun@samsung.com>
Date: Fri, 3 May 2013 07:29:24 +0000 (+0900)
Subject: Orientation : add landscape UX
X-Git-Tag: accepted/tizen/20130520.101609~1^2~2
X-Git-Url: http://review.tizen.org/git/?p=platform%2Fframework%2Fweb%2Fweb-ui-fw.git;a=commitdiff_plain;h=cab890c3fcf175d5981ec57c069946d026813800

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
--- 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
--- 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;
+}
+
+}