Merge pull request #52 from pauginer/mobile-classes
Make ULS ready for mobile
This commit is contained in:
Amir E. Aharoni
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