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;
|
||||
}
|
||||
Reference in New Issue
Block a user