From ecfa8756bf1c6d3f8955a025b22001ea246ebdcd Mon Sep 17 00:00:00 2001
From: pginer <pginer@wikimedia.org>
Date: Thu, 29 Nov 2012 10:03:07 +0100
Subject: [PATCH] Make ULS ready for mobile

This provides support for adapting the ULs to small screens:
* A mobile-specific CSS, that is only applied when the ULS uses .uls-mobile class, has been created (based on Foundation.css mobile rules + some specifics) to support mobile-specific classes.
* The core HTML has been modified to include some clases that in case mobile CSS is enabled dictate which elements can behidden and the number of columns to use in the mobile grid (4-column based).
* An index-mobile.html example has been set-up to illustrate the changes. Some of the changes required for a correct mobile experience are still done with JQuery modifications. Someone should probably update the ULS API to allow the inclusion of optional classes (such as uls-mobile) and overriding positioning parameters.
---
 css/jquery.uls.mobile.css  | 319 +++++++++++++++++++++++++++++++++++++
 examples/index-mobile.html |  61 +++++++
 2 files changed, 380 insertions(+)
 create mode 100644 css/jquery.uls.mobile.css
 create mode 100644 examples/index-mobile.html

diff --git a/css/jquery.uls.mobile.css b/css/jquery.uls.mobile.css
new file mode 100644
index 0000000..bf0275b
--- /dev/null
+++ b/css/jquery.uls.mobile.css
@@ -0,0 +1,319 @@
+@media only screen and (max-width: 767px) {
+
+	.uls-mobile.uls-menu {
+		width: 95%;
+		left: 2.5%;
+	}
+
+	.uls-mobile .uls-language-list {
+		-webkit-overflow-scrolling: touch;
+	}
+
+	.uls-mobile .uls-language-block {
+		padding-left: 15px !important;
+	}
+
+	.uls-mobile .uls-language-block ul {
+		min-height: 14em;
+	}
+
+	.uls-mobile .uls-language-block a {
+		font-size: 16px;
+		line-height: 1.7em;
+	}
+
+	.uls-mobile div.uls-region {
+		width: 33% !important;
+		float: left !important;
+	}
+
+	.uls-mobile div.map-block a,
+	.uls-mobile div.map-block {
+		opacity: 1 !important;
+	}
+
+	.uls-mobile .row {
+		width: auto;
+		min-width: 0;
+		margin-left: 0;
+		margin-right: 0;
+	}
+
+	.uls-mobile  .column, 
+	.uls-mobile .columns {
+		width: auto !important;
+		float: none;
+	}
+
+	.uls-mobile  .column:last-child,
+	.uls-mobile .columns:last-child {
+		float: none;
+	}
+	
+	.uls-mobile  [class*="column"] + [class*="column"]:last-child {
+		float: none;
+	}
+	
+	.uls-mobile  .column:before,
+	.uls-mobile .uls-mobile .columns:before,
+	.uls-mobile .column:after,
+	.columns:after {
+		content: "";
+		display: table;
+	}
+
+	.uls-mobile .column:after,
+	.uls-mobile .columns:after {
+		clear: both;
+	}
+
+	.uls-mobile .offset-by-one,
+	.uls-mobile .offset-by-two,
+	.uls-mobile .offset-by-three,
+	.uls-mobile .offset-by-four,
+	.uls-mobile .offset-by-five,
+	.uls-mobile .offset-by-six,
+	.uls-mobile .offset-by-seven,
+	.uls-mobile .offset-by-eight,
+	.uls-mobile .offset-by-nine,
+	.uls-mobile .offset-by-ten {
+		margin-left: 0 !important;
+	}
+
+	.uls-mobile  .push-two,
+	.uls-mobile .push-three,
+	.uls-mobile .push-four,
+	.uls-mobile .push-five,
+	.uls-mobile .push-six,
+	.uls-mobile .push-seven,
+	.uls-mobile .push-eight,
+	.uls-mobile .push-nine,
+	.uls-mobile .push-ten {
+		left: auto;
+	}
+
+	.uls-mobile  .pull-two,
+	.uls-mobile .pull-three,
+	.uls-mobile .pull-four,
+	.uls-mobile .pull-five,
+	.uls-mobile .pull-six,
+	.uls-mobile .pull-seven,
+	.uls-mobile .pull-eight,
+	.uls-mobile .pull-nine,
+	.uls-mobile .pull-ten {
+		right: auto;
+	}
+
+	/* Mobile 4-column Grid */
+	.uls-mobile  .row .mobile-one {
+		width: 25% !important;
+		float: left;
+		padding: 0 4px;
+	}
+
+	.uls-mobile .row .mobile-one:last-child {
+		float: right;
+	}
+
+	.uls-mobile .row.collapse .mobile-one {
+		padding: 0;
+	}
+
+	.uls-mobile  .row .mobile-two {
+		width: 50% !important;
+		float: left;
+		padding: 0 4px;
+	}
+
+	.uls-mobile .row .mobile-two:last-child {
+		float: right;
+	}
+
+	.uls-mobile  .row.collapse .mobile-two {
+		padding: 0;
+	}
+
+	.uls-mobile .row .mobile-three {
+		width: 75% !important;
+		float: left;
+		padding: 0 4px;
+	}
+
+	.uls-mobile .row .mobile-three:last-child {
+		float: right;
+	}
+
+	.uls-mobile .row.collapse .mobile-three {
+		padding: 0;
+	}
+
+	.uls-mobile .row .mobile-four {
+		width: 100% !important;
+		float: left;
+		padding: 0 4px;
+	}
+
+	.uls-mobile .row .mobile-four:last-child {
+		float: right;
+	}
+
+	.uls-mobile  .row.collapse .mobile-four {
+		padding: 0;
+	}
+
+	.uls-mobile  .push-one-mobile {
+		left: 25%;
+	}
+
+	.uls-mobile  .pull-one-mobile {
+		right: 25%;
+	}
+
+	.uls-mobile  .push-two-mobile {
+		left: 50%;
+	}
+
+	.uls-mobile  .pull-two-mobile {
+		right: 50%;
+	}
+
+	.uls-mobile  .push-three-mobile {
+		left: 75%;
+	}
+
+	.uls-mobile  .pull-three-mobile {
+		right: 75%;
+	}
+}
+
+/* Visibility Classes ---------------------- */
+/* Standard (large) display targeting */
+.uls-mobile .show-for-small,
+.uls-mobile .show-for-medium,
+.uls-mobile .show-for-medium-down,
+.uls-mobile .hide-for-large,
+.uls-mobile .hide-for-large-up,
+.uls-mobile .show-for-xlarge {
+	display: none !important;
+}
+
+.uls-mobile .hide-for-xlarge,
+.uls-mobile .show-for-large,
+.uls-mobile .show-for-large-up,
+.uls-mobile .hide-for-small,
+.uls-mobile .hide-for-medium,
+.uls-mobile .hide-for-medium-down {
+	display: block !important;
+}
+
+/* Very large display targeting */
+@media only screen and (min-width: 1441px) {
+
+	.uls-mobile .hide-for-small,
+	.uls-mobile .hide-for-medium,
+	.uls-mobile .hide-for-medium-down,
+	.hide-for-large, .show-for-large-up,
+	.show-for-xlarge {
+		display: block !important;
+	}
+
+	.show-for-small,
+	.uls-mobile .show-for-medium,
+	.uls-mobile .show-for-medium-down,
+	.uls-mobile .show-for-large,
+	.uls-mobile .hide-for-large-up,
+	.uls-mobile .hide-for-xlarge {
+		display: none !important;
+	}
+}
+/* Medium display targeting */
+@media only screen and (max-width: 1279px) and (min-width: 768px) {
+
+	.uls-mobile .hide-for-small,
+	.uls-mobile .show-for-medium,
+	.uls-mobile .show-for-medium-down,
+	.uls-mobile .hide-for-large,
+	.uls-mobile .hide-for-large-up,
+	.uls-mobile .hide-for-xlarge {
+		display: block !important;
+	}
+	
+	.uls-mobile .show-for-small,
+	.uls-mobile .hide-for-medium,
+	.uls-mobile .hide-for-medium-down,
+	.uls-mobile .show-for-large,
+	.uls-mobile .show-for-large-up,
+	.uls-mobile .show-for-xlarge {
+		display: none !important;
+	}
+}
+/* Small display targeting */
+@media only screen and (max-width: 767px) {
+
+	.uls-mobile .show-for-small,
+	.uls-mobile .hide-for-medium,
+	.uls-mobile .show-for-medium-down,
+	.uls-mobile .hide-for-large,
+	.uls-mobile .hide-for-large-up,
+	.uls-mobile .hide-for-xlarge {
+		display: block !important;
+	}
+	.uls-mobile .hide-for-small,
+	.uls-mobile .show-for-medium,
+	.uls-mobile .hide-for-medium-down,
+	.uls-mobile .show-for-large,
+	.uls-mobile .show-for-large-up,
+	.uls-mobile .show-for-xlarge {
+		display: none !important;
+	}
+}
+
+/* Orientation targeting */
+.uls-mobile .show-for-landscape,
+.uls-mobile .hide-for-portrait {
+	display: block !important;
+}
+
+.uls-mobile .hide-for-landscape,
+.uls-mobile .show-for-portrait {
+	display: none !important;
+}
+
+@media screen and (orientation: landscape) {
+	.uls-mobile .show-for-landscape,
+	.uls-mobile .hide-for-portrait {
+		display: block !important;
+	}
+	.uls-mobile .hide-for-landscape,
+	.uls-mobile .show-for-portrait {
+		display: none !important;
+	}
+}
+
+@media screen and (orientation: portrait) {
+	.uls-mobile .show-for-portrait,
+	.uls-mobile .hide-for-landscape {
+		display: block !important;
+	}
+	.uls-mobile .hide-for-portrait,
+	.uls-mobile .show-for-landscape {
+		display: none !important;
+	}
+}
+
+/* Touch-enabled device targeting */
+.uls-mobile .show-for-touch {
+	display: none !important;
+}
+
+.uls-mobile .hide-for-touch {
+	display: block !important;
+}
+
+.uls-mobile .touch .show-for-touch {
+	display: block !important;
+}
+
+.uls-mobile .touch .hide-for-touch {
+	display: none !important;
+}
\ No newline at end of file
diff --git a/examples/index-mobile.html b/examples/index-mobile.html
new file mode 100644
index 0000000..9871ca4
--- /dev/null
+++ b/examples/index-mobile.html
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+	<head>
+		<meta charset="utf-8"/>
+
+		<!--
+		Always force latest IE rendering engine (even in intranet) & Chrome Frame
+		Remove this if you use the .htaccess
+		-->
+		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
+		<meta name="viewport" content="width=320">
+		<title>Universal Language Selector</title>
+		<!-- <link rel="shortcut icon" href="/favicon.ico"/> -->
+		<!-- <link rel="apple-touch-icon" href="/apple-touch-icon.png"/> -->
+		<!-- <meta name="description" content=""/> -->
+		<meta name="author" content="Santhosh Thottingal"/>
+		<link href="../css/jquery.uls.css" rel="stylesheet"/>
+		<link href="../css/jquery.uls.grid.css" rel="stylesheet"/>
+		<link href="../css/jquery.uls.lcd.css" rel="stylesheet"/>
+		<link href="../css/jquery.uls.mobile.css" rel="stylesheet"/>
+		<!-- demo -->
+		<link href="resources/demo.css" rel="stylesheet"/>
+		<!-- Libs -->
+		<script src="resources/jquery.js"></script>
+		<!-- Source -->
+		<script src="../src/jquery.uls.data.js"></script>
+		<script src="../src/jquery.uls.data.utils.js"></script>
+		<script src="../src/jquery.uls.lcd.js"></script>
+		<script src="../src/jquery.uls.languagefilter.js"></script>
+		<script src="../src/jquery.uls.regionfilter.js"></script>
+		<script src="../src/jquery.uls.core.js"></script>
+		<script>
+			$( document ).ready( function() {
+				$( '.uls-trigger' ).uls( {
+					onSelect : function( language ) {
+						var languageName = $.uls.data.getAutonym( language );
+						$( '.uls-trigger' ).text( languageName );
+					},
+					quickList: ['en', 'hi', 'he', 'ml', 'ta','fr'] //FIXME
+				} );
+				$('.uls-trigger').click(function() {
+					//Hacks I need to make afterwards. ULS API should be probably modified to allow optional classes and not force position:
+					$('.uls-menu').removeClass('uls-wide');
+					$('.uls-menu').addClass('uls-mobile');
+					$('.uls-menu').css('left',"2.5%")	
+				});
+			} );
+		</script>
+	</head>
+
+	<body>
+		<div class="navbar navbar-fixed-top">
+			<span class="active uls-trigger">Select Language</span>
+			<h1>Universal Language Selector</h1>
+			<p>
+				Demonstration of jquery plugin
+			</p>
+		</div>
+		<div class="container"></div>
+	</body>
+</html>