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.
This commit is contained in:
pginer
319
css/jquery.uls.mobile.css
Normal file
319
css/jquery.uls.mobile.css
Normal file
@@ -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;
|
||||
}
|
||||
61
examples/index-mobile.html
Normal file
61
examples/index-mobile.html
Normal file
@@ -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>
|
||||
Reference in New Issue
Block a user