Skip to content
This repository
Browse code

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
Mat Marquis authored
22  css/structure/jquery.mobile.button.css
@@ -3,9 +3,14 @@
3 3
 .ui-btn-inner { padding: .6em 25px; display: block; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; position: relative; zoom: 1; }
4 4
 .ui-btn input, .ui-btn button { z-index: 2; }
5 5
 .ui-btn-left, .ui-btn-right, .ui-btn-inline { display: inline-block; }
  6
+.ui-btn-block { display: block; }
  7
+
  8
+.ui-header .ui-btn,
  9
+.ui-footer .ui-btn { display: inline-block; margin: 0; }
  10
+
6 11
 .ui-header .ui-btn-inner,
7 12
 .ui-footer .ui-btn-inner,
8  
-.ui-mini .ui-btn-inner { font-size: 13px; padding: .55em 1.5em .5em; }
  13
+.ui-mini .ui-btn-inner { font-size: 13px; padding: .55em 1.25em .5em; }
9 14
 
10 15
 .ui-header .ui-fullsize .ui-btn-inner,
11 16
 .ui-footer .ui-fullsize .ui-btn-inner { font-size: 16px; padding: .6em 25px; }
@@ -30,10 +35,17 @@
30 35
 .ui-btn-icon-top .ui-icon { top: 10px; }
31 36
 .ui-btn-icon-bottom .ui-icon { top: auto; bottom: 10px; }
32 37
 
33  
-.ui-mini.ui-btn-icon-left .ui-icon { left: 8px; }
34  
-.ui-mini.ui-btn-icon-right .ui-icon { right: 8px; }
35  
-.ui-mini.ui-btn-icon-top .ui-icon { top: 8px; }
36  
-.ui-mini.ui-btn-icon-bottom .ui-icon { bottom: 8px; }
  38
+.ui-btn-icon-left .ui-icon { left: 10px; }
  39
+.ui-btn-icon-right .ui-icon { right: 10px; }
  40
+.ui-btn-icon-top .ui-icon { top: 10px; }
  41
+.ui-btn-icon-bottom .ui-icon { top: auto; bottom: 10px; }
  42
+
  43
+.ui-header .ui-btn-icon-left .ui-icon,
  44
+.ui-footer .ui-btn-icon-left .ui-icon,
  45
+.ui-mini.ui-btn-icon-left .ui-icon { left: 7px; }
  46
+.ui-mini.ui-btn-icon-right .ui-icon { right: 7px; }
  47
+.ui-mini.ui-btn-icon-top .ui-icon { top: 7px; }
  48
+.ui-mini.ui-btn-icon-bottom .ui-icon { bottom: 7px; }
37 49
 
38 50
 /*hiding native button,inputs */
39 51
 .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; }
2  css/structure/jquery.mobile.core.css
@@ -48,7 +48,7 @@ div.ui-mobile-viewport { overflow-x: hidden; }
48 48
 .ui-header .ui-btn-left,
49 49
 .ui-header .ui-btn-right,
50 50
 .ui-footer .ui-btn-left,
51  
-.ui-footer .ui-btn-right { position: absolute; top: -5px; }
  51
+.ui-footer .ui-btn-right { position: absolute; top: 3px; }
52 52
 .ui-header .ui-btn-left,
53 53
 .ui-footer .ui-btn-left { left: 5px; }
54 54
 .ui-header .ui-btn-right,
7  js/jquery.mobile.buttonMarkup.js
@@ -78,6 +78,12 @@ $.fn.buttonMarkup = function( options ) {
78 78
 			buttonClass += o.mini ? " ui-mini" : " ui-fullsize";
79 79
 		}
80 80
 		
  81
+		if ( o.inline !== undefined ) {			
  82
+			// Used to control styling in headers/footers, where buttons default to `mini` style.
  83
+			buttonClass += o.inline === false ? " ui-btn-block" : " ui-btn-inline";
  84
+		}
  85
+		
  86
+		
81 87
 		if ( o.icon ) {
82 88
 			o.icon = "ui-icon-" + o.icon;
83 89
 			o.iconpos = o.iconpos || "left";
@@ -155,7 +161,6 @@ $.fn.buttonMarkup.defaults = {
155 161
 	corners: true,
156 162
 	shadow: true,
157 163
 	iconshadow: true,
158  
-	inline: false,
159 164
 	wrapperEls: "span"
160 165
 };
161 166
 
1  js/jquery.mobile.navbar.js
@@ -34,6 +34,7 @@ $.widget( "mobile.navbar", $.mobile.widget, {
34 34
 		$navbtns.buttonMarkup({
35 35
 			corners:	false,
36 36
 			shadow:		false,
  37
+			inline:     true,
37 38
 			iconpos:	iconpos
38 39
 		});
39 40
 
14  js/jquery.mobile.page.sections.js
@@ -46,14 +46,16 @@ $( document ).delegate( ":jqmData(role='page'), :jqmData(role='dialog')", "pagec
46 46
 				// Add ARIA role
47 47
 				.attr( "role", role === "header" ? "banner" : "contentinfo" );
48 48
 
49  
-			// Right,left buttons
50  
-			$headeranchors	= $this.children( "a" );
51  
-			leftbtn	= $headeranchors.hasClass( "ui-btn-left" );
52  
-			rightbtn = $headeranchors.hasClass( "ui-btn-right" );
  49
+			if( role === "header") {
  50
+				// Right,left buttons
  51
+				$headeranchors	= $this.children( "a" );
  52
+				leftbtn	= $headeranchors.hasClass( "ui-btn-left" );
  53
+				rightbtn = $headeranchors.hasClass( "ui-btn-right" );
53 54
 
54  
-			leftbtn = leftbtn || $headeranchors.eq( 0 ).not( ".ui-btn-right" ).addClass( "ui-btn-left" ).length;
  55
+				leftbtn = leftbtn || $headeranchors.eq( 0 ).not( ".ui-btn-right" ).addClass( "ui-btn-left" ).length;
55 56
 
56  
-			rightbtn = rightbtn || $headeranchors.eq( 1 ).addClass( "ui-btn-right" ).length;
  57
+				rightbtn = rightbtn || $headeranchors.eq( 1 ).addClass( "ui-btn-right" ).length;
  58
+			}
57 59
 
58 60
 			// Auto-add back btn on pages beyond first view
59 61
 			if ( o.addBackBtn &&

2 notes on commit bbe901d

Mat Marquis

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

Scott Jehl

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.