From e433a15e9108a05474ee3e6723c253b4b8bef21e Mon Sep 17 00:00:00 2001 From: Jasper de Groot Date: Tue, 12 Jun 2012 16:30:05 +0200 Subject: [PATCH 1/5] Fixes #2270 and #2159 - Adjusted grid blocks percentage width to prevent wrapping on older browsers and set it back for modern browsers. Minor adjustment for grid-a to fix BB5 issue. --- css/structure/jquery.mobile.grid.css | 22 ++++++++++++---------- 1 file changed, 12 insertions(+), 10 deletions(-) diff --git a/css/structure/jquery.mobile.grid.css b/css/structure/jquery.mobile.grid.css index 39a3850a3e2..f938d6019fb 100644 --- a/css/structure/jquery.mobile.grid.css +++ b/css/structure/jquery.mobile.grid.css @@ -1,22 +1,24 @@ /* content configurations. */ .ui-grid-a, .ui-grid-b, .ui-grid-c, .ui-grid-d { overflow: hidden; } -.ui-block-a, .ui-block-b, .ui-block-c, .ui-block-d, .ui-block-e { margin: 0; padding: 0; border: 0; float: left; min-height:1px;} +.ui-block-a, .ui-block-b, .ui-block-c, .ui-block-d, .ui-block-e { margin: 0; padding: 0; border: 0; float: left; min-height:1px; } /* grid solo: 100 - single item fallback */ -.ui-grid-solo .ui-block-a { width: 100%; float: none; } - +.ui-grid-solo .ui-block-a { display: block; float: none; } +/* Lower percentages for older browsers (i.e. IE7) to prevent wrapping */ /* grid a: 50/50 */ -.ui-grid-a .ui-block-a, .ui-grid-a .ui-block-b { width: 50%; } +.ui-grid-a .ui-block-a, .ui-grid-a .ui-block-b { width: 49.955%; } +/* -.5px to fix BB5 wrap issue. */ +.ui-grid-a > :nth-child(n) { width: 50%; margin-right: -.5px; } .ui-grid-a .ui-block-a { clear: left; } - /* grid b: 33/33/33 */ -.ui-grid-b .ui-block-a, .ui-grid-b .ui-block-b, .ui-grid-b .ui-block-c { width: 33.333%; } +.ui-grid-b .ui-block-a, .ui-grid-b .ui-block-b, .ui-grid-b .ui-block-c { width: 33.3%; } +.ui-grid-b > :nth-child(n) { width: 33.333%; } .ui-grid-b .ui-block-a { clear: left; } - /* grid c: 25/25/25/25 */ -.ui-grid-c .ui-block-a, .ui-grid-c .ui-block-b, .ui-grid-c .ui-block-c, .ui-grid-c .ui-block-d { width: 25%; } +.ui-grid-c .ui-block-a, .ui-grid-c .ui-block-b, .ui-grid-c .ui-block-c, .ui-grid-c .ui-block-d { width: 24.955%; } +.ui-grid-c > :nth-child(n) { width: 25%; } .ui-grid-c .ui-block-a { clear: left; } - /* grid d: 20/20/20/20/20 */ -.ui-grid-d .ui-block-a, .ui-grid-d .ui-block-b, .ui-grid-d .ui-block-c, .ui-grid-d .ui-block-d, .ui-grid-d .ui-block-e { width: 20%; } +.ui-grid-d .ui-block-a, .ui-grid-d .ui-block-b, .ui-grid-d .ui-block-c, .ui-grid-d .ui-block-d, .ui-grid-d .ui-block-e { width: 19.955%; } +.ui-grid-d > :nth-child(n) { width: 20%; } .ui-grid-d .ui-block-a { clear: left; } From ae3ac0513f98f68f40f6b6bc34a939c143477511 Mon Sep 17 00:00:00 2001 From: Jasper de Groot Date: Tue, 12 Jun 2012 16:39:12 +0200 Subject: [PATCH 2/5] Fixes #3341 - Filled gap caused by subpixel problem with negative margin. --- css/structure/jquery.mobile.navbar.css | 22 +++++++++++++++++----- 1 file changed, 17 insertions(+), 5 deletions(-) diff --git a/css/structure/jquery.mobile.navbar.css b/css/structure/jquery.mobile.navbar.css index 4549b8467f4..92ccbbd430b 100644 --- a/css/structure/jquery.mobile.navbar.css +++ b/css/structure/jquery.mobile.navbar.css @@ -1,8 +1,20 @@ -.ui-navbar { overflow: hidden; } -.ui-navbar ul { list-style:none; padding: 0; margin: 0; position: relative; display: block; border: 0;} -.ui-navbar li .ui-btn { display: block; font-size: 12px; text-align: center; margin: 0; border-right-width: 0; max-width: 100%; } -.ui-navbar li .ui-btn { margin-right: -1px; } -.ui-navbar li:last-child .ui-btn { margin-right: 0; } +.ui-navbar { max-width: 100%; } +.ui-navbar ul { list-style:none; margin: 0; padding: 0; position: relative; display: block; border: 0; max-width: 100%; overflow:hidden; } +.ui-navbar li .ui-btn { display: block; text-align: center; margin: 0 -1px 0 0; border-right-width: 0; } +.ui-navbar li .ui-btn-icon-right .ui-icon { right: 6px; } + +/* fixing gaps caused by subpixel problem */ +.ui-header .ui-navbar .ui-grid-b li.ui-block-c .ui-btn, +.ui-footer .ui-navbar .ui-grid-b li.ui-block-c .ui-btn { margin-right: -5px; } +.ui-header .ui-navbar .ui-grid-c li.ui-block-d .ui-btn, +.ui-footer .ui-navbar .ui-grid-c li.ui-block-d .ui-btn { margin-right: -3px; } +.ui-header .ui-navbar .ui-grid-d li.ui-block-e .ui-btn, +.ui-footer .ui-navbar .ui-grid-d li.ui-block-e .ui-btn { margin-right: -4px; } +.ui-header .ui-navbar .ui-grid-b li.ui-block-c .ui-btn-icon-right .ui-icon, +.ui-footer .ui-navbar .ui-grid-b li.ui-block-c .ui-btn-icon-right .ui-icon { right: 8px; } +.ui-header .ui-navbar .ui-grid-d li.ui-block-e .ui-btn-icon-right .ui-icon, +.ui-footer .ui-navbar .ui-grid-d li.ui-block-e .ui-btn-icon-right .ui-icon { right: 7px; } + .ui-header .ui-navbar li .ui-btn, .ui-footer .ui-navbar li .ui-btn { border-top-width: 0; border-bottom-width: 0; } .ui-navbar .ui-btn-inner { padding-left: 2px; padding-right: 2px; } From ce54079d3fb525b860dfcde01d865d365940861f Mon Sep 17 00:00:00 2001 From: Jasper de Groot Date: Tue, 12 Jun 2012 16:43:18 +0200 Subject: [PATCH 3/5] Mini styling for navbar with adjusted padding top and bottom. Set right border on last button when not in toolbar. --- css/structure/jquery.mobile.navbar.css | 18 ++++++++++++++---- js/jquery.mobile.grid.js | 1 + js/jquery.mobile.navbar.js | 6 +----- 3 files changed, 16 insertions(+), 9 deletions(-) diff --git a/css/structure/jquery.mobile.navbar.css b/css/structure/jquery.mobile.navbar.css index 92ccbbd430b..0c1ff4dc12b 100644 --- a/css/structure/jquery.mobile.navbar.css +++ b/css/structure/jquery.mobile.navbar.css @@ -3,6 +3,17 @@ .ui-navbar li .ui-btn { display: block; text-align: center; margin: 0 -1px 0 0; border-right-width: 0; } .ui-navbar li .ui-btn-icon-right .ui-icon { right: 6px; } +/* add border if not in header/footer (full width) */ +.ui-navbar li:last-child .ui-btn, +.ui-navbar .ui-grid-duo .ui-block-b .ui-btn { margin-right: 0; border-right-width: 1px; } +.ui-header .ui-navbar li:last-child .ui-btn, +.ui-footer .ui-navbar li:last-child .ui-btn, +.ui-header .ui-navbar .ui-grid-duo .ui-block-b .ui-btn, +.ui-footer .ui-navbar .ui-grid-duo .ui-block-b .ui-btn { margin-right: -1px; border-right-width: 0; } +.ui-navbar .ui-grid-duo li.ui-block-a:last-child .ui-btn { margin-right: -1px; border-right-width: 1px; } +.ui-header .ui-navbar li .ui-btn, +.ui-footer .ui-navbar li .ui-btn { border-top-width: 0; border-bottom-width: 0; } + /* fixing gaps caused by subpixel problem */ .ui-header .ui-navbar .ui-grid-b li.ui-block-c .ui-btn, .ui-footer .ui-navbar .ui-grid-b li.ui-block-c .ui-btn { margin-right: -5px; } @@ -15,7 +26,6 @@ .ui-header .ui-navbar .ui-grid-d li.ui-block-e .ui-btn-icon-right .ui-icon, .ui-footer .ui-navbar .ui-grid-d li.ui-block-e .ui-btn-icon-right .ui-icon { right: 7px; } -.ui-header .ui-navbar li .ui-btn, -.ui-footer .ui-navbar li .ui-btn { border-top-width: 0; border-bottom-width: 0; } -.ui-navbar .ui-btn-inner { padding-left: 2px; padding-right: 2px; } -.ui-navbar-noicons li .ui-btn .ui-btn-inner { padding-top: .8em; padding-bottom: .9em; } +.ui-navbar li .ui-btn .ui-btn-inner { padding-top: .7em; padding-bottom: .8em } +.ui-navbar li .ui-btn-icon-top .ui-btn-inner { padding-top: 30px; } +.ui-navbar li .ui-btn-icon-bottom .ui-btn-inner { padding-bottom: 30px; } diff --git a/js/jquery.mobile.grid.js b/js/jquery.mobile.grid.js index 1cc59daa039..46f38ab09d4 100644 --- a/js/jquery.mobile.grid.js +++ b/js/jquery.mobile.grid.js @@ -30,6 +30,7 @@ $.fn.grid = function( options ) { } } else { grid = "a"; + $this.addClass( "ui-grid-duo" ); } } iterator = gridCols[grid]; diff --git a/js/jquery.mobile.navbar.js b/js/jquery.mobile.navbar.js index 0ca5ee71dbe..e7d21c312b0 100644 --- a/js/jquery.mobile.navbar.js +++ b/js/jquery.mobile.navbar.js @@ -24,16 +24,12 @@ $.widget( "mobile.navbar", $.mobile.widget, { iconpos = $navbtns.filter( ":jqmData(icon)" ).length ? this.options.iconpos : undefined; - $navbar.addClass( "ui-navbar" ) + $navbar.addClass( "ui-navbar ui-mini" ) .attr( "role","navigation" ) .find( "ul" ) .jqmEnhanceable() .grid({ grid: this.options.grid }); - if ( !iconpos ) { - $navbar.addClass( "ui-navbar-noicons" ); - } - $navbtns.buttonMarkup({ corners: false, shadow: false, From 5fbe6d3b7c0d0b672adae95bc36f59d3b6fcf993 Mon Sep 17 00:00:00 2001 From: Jasper de Groot Date: Wed, 13 Jun 2012 01:44:44 +0200 Subject: [PATCH 4/5] Adjustments to grid-b and -c to fix BB Storm and Curve. Adjustements to percentages for older browsers (wrapping still occured on IE7 on certain screen widths). --- css/structure/jquery.mobile.grid.css | 15 +++++++-------- css/structure/jquery.mobile.navbar.css | 8 +++++--- 2 files changed, 12 insertions(+), 11 deletions(-) diff --git a/css/structure/jquery.mobile.grid.css b/css/structure/jquery.mobile.grid.css index f938d6019fb..102d52732cb 100644 --- a/css/structure/jquery.mobile.grid.css +++ b/css/structure/jquery.mobile.grid.css @@ -4,21 +4,20 @@ /* grid solo: 100 - single item fallback */ .ui-grid-solo .ui-block-a { display: block; float: none; } -/* Lower percentages for older browsers (i.e. IE7) to prevent wrapping */ +/* Lower percentages for older browsers (i.e. IE7) to prevent wrapping. -.5px to fix BB5 wrap issue. */ /* grid a: 50/50 */ -.ui-grid-a .ui-block-a, .ui-grid-a .ui-block-b { width: 49.955%; } -/* -.5px to fix BB5 wrap issue. */ +.ui-grid-a .ui-block-a, .ui-grid-a .ui-block-b { width: 49.95%; } .ui-grid-a > :nth-child(n) { width: 50%; margin-right: -.5px; } .ui-grid-a .ui-block-a { clear: left; } /* grid b: 33/33/33 */ -.ui-grid-b .ui-block-a, .ui-grid-b .ui-block-b, .ui-grid-b .ui-block-c { width: 33.3%; } -.ui-grid-b > :nth-child(n) { width: 33.333%; } +.ui-grid-b .ui-block-a, .ui-grid-b .ui-block-b, .ui-grid-b .ui-block-c { width: 33.25%; } +.ui-grid-b > :nth-child(n) { width: 33.333%; margin-right: -.5px; } .ui-grid-b .ui-block-a { clear: left; } /* grid c: 25/25/25/25 */ -.ui-grid-c .ui-block-a, .ui-grid-c .ui-block-b, .ui-grid-c .ui-block-c, .ui-grid-c .ui-block-d { width: 24.955%; } -.ui-grid-c > :nth-child(n) { width: 25%; } +.ui-grid-c .ui-block-a, .ui-grid-c .ui-block-b, .ui-grid-c .ui-block-c, .ui-grid-c .ui-block-d { width: 24.925%; } +.ui-grid-c > :nth-child(n) { width: 25%; margin-right: -.5px; } .ui-grid-c .ui-block-a { clear: left; } /* grid d: 20/20/20/20/20 */ -.ui-grid-d .ui-block-a, .ui-grid-d .ui-block-b, .ui-grid-d .ui-block-c, .ui-grid-d .ui-block-d, .ui-grid-d .ui-block-e { width: 19.955%; } +.ui-grid-d .ui-block-a, .ui-grid-d .ui-block-b, .ui-grid-d .ui-block-c, .ui-grid-d .ui-block-d, .ui-grid-d .ui-block-e { width: 19.925%; } .ui-grid-d > :nth-child(n) { width: 20%; } .ui-grid-d .ui-block-a { clear: left; } diff --git a/css/structure/jquery.mobile.navbar.css b/css/structure/jquery.mobile.navbar.css index 0c1ff4dc12b..4e9b170744f 100644 --- a/css/structure/jquery.mobile.navbar.css +++ b/css/structure/jquery.mobile.navbar.css @@ -18,13 +18,15 @@ .ui-header .ui-navbar .ui-grid-b li.ui-block-c .ui-btn, .ui-footer .ui-navbar .ui-grid-b li.ui-block-c .ui-btn { margin-right: -5px; } .ui-header .ui-navbar .ui-grid-c li.ui-block-d .ui-btn, -.ui-footer .ui-navbar .ui-grid-c li.ui-block-d .ui-btn { margin-right: -3px; } +.ui-footer .ui-navbar .ui-grid-c li.ui-block-d .ui-btn, .ui-header .ui-navbar .ui-grid-d li.ui-block-e .ui-btn, .ui-footer .ui-navbar .ui-grid-d li.ui-block-e .ui-btn { margin-right: -4px; } .ui-header .ui-navbar .ui-grid-b li.ui-block-c .ui-btn-icon-right .ui-icon, -.ui-footer .ui-navbar .ui-grid-b li.ui-block-c .ui-btn-icon-right .ui-icon { right: 8px; } +.ui-footer .ui-navbar .ui-grid-b li.ui-block-c .ui-btn-icon-right .ui-icon, +.ui-header .ui-navbar .ui-grid-c li.ui-block-d .ui-btn-icon-right .ui-icon, +.ui-footer .ui-navbar .ui-grid-c li.ui-block-d .ui-btn-icon-right .ui-icon, .ui-header .ui-navbar .ui-grid-d li.ui-block-e .ui-btn-icon-right .ui-icon, -.ui-footer .ui-navbar .ui-grid-d li.ui-block-e .ui-btn-icon-right .ui-icon { right: 7px; } +.ui-footer .ui-navbar .ui-grid-d li.ui-block-e .ui-btn-icon-right .ui-icon { right: 8px; } .ui-navbar li .ui-btn .ui-btn-inner { padding-top: .7em; padding-bottom: .8em } .ui-navbar li .ui-btn-icon-top .ui-btn-inner { padding-top: 30px; } From 875d07858b0822d934f9f6178c0764fea9549a2f Mon Sep 17 00:00:00 2001 From: Jasper de Groot Date: Fri, 15 Jun 2012 13:11:07 +0200 Subject: [PATCH 5/5] Added box-sizing border-box to grid blocks so they don't break when padding or border is set (note: not supported by IE7) --- css/structure/jquery.mobile.grid.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/css/structure/jquery.mobile.grid.css b/css/structure/jquery.mobile.grid.css index 102d52732cb..fd0e5cdd173 100644 --- a/css/structure/jquery.mobile.grid.css +++ b/css/structure/jquery.mobile.grid.css @@ -1,6 +1,6 @@ /* content configurations. */ .ui-grid-a, .ui-grid-b, .ui-grid-c, .ui-grid-d { overflow: hidden; } -.ui-block-a, .ui-block-b, .ui-block-c, .ui-block-d, .ui-block-e { margin: 0; padding: 0; border: 0; float: left; min-height:1px; } +.ui-block-a, .ui-block-b, .ui-block-c, .ui-block-d, .ui-block-e { margin: 0; padding: 0; border: 0; float: left; min-height: 1px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } /* grid solo: 100 - single item fallback */ .ui-grid-solo .ui-block-a { display: block; float: none; }