Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Fixes #3898 - Header/footer mini button styles cleaned up. Footer but…

…tons are no longer subject to the same left/right button logic as headers. Default mini/inline styles can now be overridden by setting either attribute to “false”.
  • Loading branch information...
commit bbe901dd0180a6fd67f7d8d4ef87c465498d99ca 1 parent 9f6b2a7
@Wilto Wilto authored
View
22 css/structure/jquery.mobile.button.css
@@ -3,9 +3,14 @@
.ui-btn-inner { padding: .6em 25px; display: block; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; position: relative; zoom: 1; }
.ui-btn input, .ui-btn button { z-index: 2; }
.ui-btn-left, .ui-btn-right, .ui-btn-inline { display: inline-block; }
+.ui-btn-block { display: block; }
+
+.ui-header .ui-btn,
+.ui-footer .ui-btn { display: inline-block; margin: 0; }
+
.ui-header .ui-btn-inner,
.ui-footer .ui-btn-inner,
-.ui-mini .ui-btn-inner { font-size: 13px; padding: .55em 1.5em .5em; }
+.ui-mini .ui-btn-inner { font-size: 13px; padding: .55em 1.25em .5em; }
.ui-header .ui-fullsize .ui-btn-inner,
.ui-footer .ui-fullsize .ui-btn-inner { font-size: 16px; padding: .6em 25px; }
@@ -30,10 +35,17 @@
.ui-btn-icon-top .ui-icon { top: 10px; }
.ui-btn-icon-bottom .ui-icon { top: auto; bottom: 10px; }
-.ui-mini.ui-btn-icon-left .ui-icon { left: 8px; }
-.ui-mini.ui-btn-icon-right .ui-icon { right: 8px; }
-.ui-mini.ui-btn-icon-top .ui-icon { top: 8px; }
-.ui-mini.ui-btn-icon-bottom .ui-icon { bottom: 8px; }
+.ui-btn-icon-left .ui-icon { left: 10px; }
+.ui-btn-icon-right .ui-icon { right: 10px; }
+.ui-btn-icon-top .ui-icon { top: 10px; }
+.ui-btn-icon-bottom .ui-icon { top: auto; bottom: 10px; }
+
+.ui-header .ui-btn-icon-left .ui-icon,
+.ui-footer .ui-btn-icon-left .ui-icon,
+.ui-mini.ui-btn-icon-left .ui-icon { left: 7px; }
+.ui-mini.ui-btn-icon-right .ui-icon { right: 7px; }
+.ui-mini.ui-btn-icon-top .ui-icon { top: 7px; }
+.ui-mini.ui-btn-icon-bottom .ui-icon { bottom: 7px; }
/*hiding native button,inputs */
.ui-btn-hidden { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -webkit-appearance: button; opacity: .1; cursor: pointer; background: #fff; background: rgba(255,255,255,0); filter: Alpha(Opacity=.0001); font-size: 1px; border: none; text-indent: -9999px; }
View
2  css/structure/jquery.mobile.core.css
@@ -48,7 +48,7 @@ div.ui-mobile-viewport { overflow-x: hidden; }
.ui-header .ui-btn-left,
.ui-header .ui-btn-right,
.ui-footer .ui-btn-left,
-.ui-footer .ui-btn-right { position: absolute; top: -5px; }
+.ui-footer .ui-btn-right { position: absolute; top: 3px; }
.ui-header .ui-btn-left,
.ui-footer .ui-btn-left { left: 5px; }
.ui-header .ui-btn-right,
View
7 js/jquery.mobile.buttonMarkup.js
@@ -78,6 +78,12 @@ $.fn.buttonMarkup = function( options ) {
buttonClass += o.mini ? " ui-mini" : " ui-fullsize";
}
+ if ( o.inline !== undefined ) {
+ // Used to control styling in headers/footers, where buttons default to `mini` style.
+ buttonClass += o.inline === false ? " ui-btn-block" : " ui-btn-inline";
+ }
+
+
if ( o.icon ) {
o.icon = "ui-icon-" + o.icon;
o.iconpos = o.iconpos || "left";
@@ -155,7 +161,6 @@ $.fn.buttonMarkup.defaults = {
corners: true,
shadow: true,
iconshadow: true,
- inline: false,
wrapperEls: "span"
};
View
1  js/jquery.mobile.navbar.js
@@ -34,6 +34,7 @@ $.widget( "mobile.navbar", $.mobile.widget, {
$navbtns.buttonMarkup({
corners: false,
shadow: false,
+ inline: true,
iconpos: iconpos
});
View
14 js/jquery.mobile.page.sections.js
@@ -46,14 +46,16 @@ $( document ).delegate( ":jqmData(role='page'), :jqmData(role='dialog')", "pagec
// Add ARIA role
.attr( "role", role === "header" ? "banner" : "contentinfo" );
- // Right,left buttons
- $headeranchors = $this.children( "a" );
- leftbtn = $headeranchors.hasClass( "ui-btn-left" );
- rightbtn = $headeranchors.hasClass( "ui-btn-right" );
+ if( role === "header") {
+ // Right,left buttons
+ $headeranchors = $this.children( "a" );
+ leftbtn = $headeranchors.hasClass( "ui-btn-left" );
+ rightbtn = $headeranchors.hasClass( "ui-btn-right" );
- leftbtn = leftbtn || $headeranchors.eq( 0 ).not( ".ui-btn-right" ).addClass( "ui-btn-left" ).length;
+ leftbtn = leftbtn || $headeranchors.eq( 0 ).not( ".ui-btn-right" ).addClass( "ui-btn-left" ).length;
- rightbtn = rightbtn || $headeranchors.eq( 1 ).addClass( "ui-btn-right" ).length;
+ rightbtn = rightbtn || $headeranchors.eq( 1 ).addClass( "ui-btn-right" ).length;
+ }
// Auto-add back btn on pages beyond first view
if ( o.addBackBtn &&

2 comments on commit bbe901d

@Wilto

This is likely going to need a bit more work and/or cleanup before RC2.

@scottjehl

Hey Mat. Looks like this change made the buttons in header toolbars really tight to the top.

Check out this page for an example http://jquerymobile.com/test/docs/pages/index.html

Please sign in to comment.
Something went wrong with that request. Please try again.