From d22975d043b82726c3f28e2851e480f812089fc8 Mon Sep 17 00:00:00 2001 From: Jasper de Groot Date: Sat, 21 Apr 2012 18:45:25 +0200 Subject: [PATCH 1/4] Fixed count bubble postion/padding problems (select and listview) and made all types of listviews compatible with data-mini="true" --- css/structure/jquery.mobile.forms.select.css | 12 ++++--- css/structure/jquery.mobile.listview.css | 38 ++++++++++++++------ 2 files changed, 35 insertions(+), 15 deletions(-) diff --git a/css/structure/jquery.mobile.forms.select.css b/css/structure/jquery.mobile.forms.select.css index db8356fe7a8..6a63c53a131 100644 --- a/css/structure/jquery.mobile.forms.select.css +++ b/css/structure/jquery.mobile.forms.select.css @@ -9,10 +9,14 @@ @-moz-document url-prefix() {.ui-select .ui-btn select { opacity: 0.0001; }} .ui-select .ui-btn select.ui-select-nativeonly { opacity: 1; text-indent: 0; } -.ui-select .ui-btn-icon-right .ui-btn-inner { padding-right: 45px; } -.ui-select .ui-btn-icon-right .ui-icon { right: 15px; } -.ui-select .ui-mini.ui-btn-icon-right .ui-icon { right: 7px; } - +.ui-select .ui-btn-icon-right .ui-btn-inner, .ui-select .ui-li-has-count .ui-btn-inner { padding-right: 45px; } +.ui-select .ui-mini.ui-btn-icon-right .ui-btn-inner { padding-right: 32px; } +.ui-select .ui-btn-icon-right.ui-li-has-count .ui-btn-inner { padding-right: 80px; } +.ui-select .ui-mini.ui-btn-icon-right.ui-li-has-count .ui-btn-inner { padding-right: 67px; } +.ui-select .ui-btn-icon-right .ui-icon { right: 15px; } +.ui-select .ui-mini.ui-btn-icon-right .ui-icon { right: 7px; } +.ui-select .ui-btn-icon-right.ui-li-has-count .ui-li-count { right: 45px; } +.ui-select .ui-mini.ui-btn-icon-right.ui-li-has-count .ui-li-count { right: 32px; } /* labels */ label.ui-select { font-size: 16px; line-height: 1.4; font-weight: normal; margin: 0 0 .3em; display: block; } diff --git a/css/structure/jquery.mobile.listview.css b/css/structure/jquery.mobile.listview.css index 8bbda67818a..ff4e27d8181 100644 --- a/css/structure/jquery.mobile.listview.css +++ b/css/structure/jquery.mobile.listview.css @@ -5,23 +5,32 @@ .ui-li, .ui-li.ui-field-contain { display: block; margin:0; position: relative; overflow: visible; text-align: left; border-width: 0; border-top-width: 1px; } .ui-li .ui-btn-text a.ui-link-inherit { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } .ui-li-divider, .ui-li-static { padding: .5em 15px; font-size: 14px; font-weight: bold; } +.ui-mini .ui-li-divider, .ui-mini .ui-li-static { padding: .55em 11px .5em; font-size: 12.5px; } .ui-li-divider { counter-reset: listnumbering; } ol.ui-listview .ui-link-inherit:before, ol.ui-listview .ui-li-static:before, .ui-li-dec { font-size: .8em; display: inline-block; padding-right: .3em; font-weight: normal;counter-increment: listnumbering; content: counter(listnumbering) ". "; } ol.ui-listview .ui-li-jsnumbering:before { content: "" !important; } /* to avoid chance of duplication */ .ui-listview-inset .ui-li { border-right-width: 1px; border-left-width: 1px; } .ui-li:last-child, .ui-li.ui-field-contain:last-child { border-bottom-width: 1px; } -.ui-li>.ui-btn-inner { display: block; position: relative; padding: 0; } +.ui-li>.ui-btn-inner, .ui-mini .ui-li>.ui-btn-inner { display: block; position: relative; padding: 0; } .ui-li .ui-btn-inner a.ui-link-inherit, .ui-li-static.ui-li { padding: .7em 15px .7em 15px; display: block; } +.ui-mini .ui-li .ui-btn-inner a.ui-link-inherit, .ui-mini .ui-li-static.ui-li { padding: .55em 11px .5em; } .ui-li-has-thumb .ui-btn-inner a.ui-link-inherit, .ui-li-static.ui-li-has-thumb { min-height: 60px; padding-left: 100px; } +.ui-mini .ui-li-has-thumb .ui-btn-inner a.ui-link-inherit, .ui-mini .ui-li-static.ui-li-has-thumb { min-height: 50px; padding-left: 75px; } .ui-li-has-icon .ui-btn-inner a.ui-link-inherit, .ui-li-static.ui-li-has-icon { min-height: 20px; padding-left: 40px; } -.ui-li-has-count .ui-btn-inner a.ui-link-inherit, .ui-li-static.ui-li-has-count { padding-right: 45px; } -.ui-li-has-arrow .ui-btn-inner a.ui-link-inherit, .ui-li-static.ui-li-has-arrow { padding-right: 30px; } +.ui-mini .ui-li-has-icon .ui-btn-inner a.ui-link-inherit, .ui-mini .ui-li-static.ui-li-has-icon { padding-left: 28px; } +.ui-li-has-count .ui-btn-inner a.ui-link-inherit, .ui-li-static.ui-li-has-count, .ui-li-divider.ui-li-has-count { padding-right: 45px; } +.ui-mini .ui-li-has-count .ui-btn-inner a.ui-link-inherit, .ui-mini .ui-li-static.ui-li-has-count, .ui-mini .ui-li-divider.ui-li-has-count { padding-right: 40px; } +.ui-li-has-arrow .ui-btn-inner a.ui-link-inherit, .ui-li-static.ui-li-has-arrow { padding-right: 40px; } +.ui-mini .ui-li-has-arrow .ui-btn-inner a.ui-link-inherit, .ui-mini .ui-li-static.ui-li-has-arrow { padding-right: 30px; } .ui-li-has-arrow.ui-li-has-count .ui-btn-inner a.ui-link-inherit, .ui-li-static.ui-li-has-arrow.ui-li-has-count { padding-right: 75px; } -.ui-li-has-count .ui-btn-text { padding-right: 15px; } +.ui-mini .ui-li-has-arrow.ui-li-has-count .ui-btn-inner a.ui-link-inherit, .ui-mini .ui-li-static.ui-li-has-arrow.ui-li-has-count { padding-right: 65px; } .ui-li-heading { font-size: 16px; font-weight: bold; display: block; margin: .6em 0; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } +.ui-mini .ui-li-heading { font-size: 14px; } .ui-li-desc { font-size: 12px; font-weight: normal; display: block; margin: -.5em 0 .6em; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } .ui-li-thumb, .ui-listview .ui-li-icon { position: absolute; left: 1px; top: 0; max-height: 80px; max-width: 80px; } -.ui-listview .ui-li-icon { max-height: 40px; max-width: 40px; left: 10px; top: .9em; } +.ui-mini .ui-li-thumb { max-height: 60px; max-width: 60px; } +.ui-listview .ui-li-icon { max-height: 16px; max-width: 16px; left: 10px; top: .9em; } +.ui-listview.ui-mini .ui-li-icon { left: 5px; top: .75em; } .ui-li-thumb, .ui-listview .ui-li-icon, .ui-li-content { float: left; margin-right: 10px; } .ui-li-aside { float: right; width: 50%; text-align: right; margin: .3em 0; } @@ -29,13 +38,20 @@ ol.ui-listview .ui-li-jsnumbering:before { content: "" !important; } /* to avoid .ui-li-aside { width: 45%; } } .ui-li-divider { cursor: default; } -.ui-li-has-alt .ui-btn-inner a.ui-link-inherit, .ui-li-static.ui-li-has-alt { padding-right: 95px; } -.ui-li-has-count .ui-li-count { position: absolute; font-size: 11px; font-weight: bold; padding: .2em .5em; top: 50%; margin-top: -.9em; right: 48px; } -.ui-li-divider .ui-li-count, .ui-li-static .ui-li-count { right: 10px; } -.ui-li-has-alt .ui-li-count { right: 55px; } +.ui-li-has-alt .ui-btn-inner a.ui-link-inherit, .ui-li-static.ui-li-has-alt { padding-right: 53px; } +.ui-mini .ui-li-has-alt .ui-btn-inner a.ui-link-inherit, .ui-mini .ui-li-static.ui-li-has-alt { min-height: 20px; padding-right: 48px; } +.ui-li-has-alt.ui-li-has-count .ui-btn-inner a.ui-link-inherit, .ui-li-static.ui-li-has-alt.ui-li-has-count { padding-right: 88px; } +.ui-mini .ui-li-has-alt.ui-li-has-count .ui-btn-inner a.ui-link-inherit, .ui-mini .ui-li-static.ui-li-has-alt.ui-li-has-count { padding-right: 83px; } +.ui-li-has-count .ui-li-count { position: absolute; font-size: 11px; font-weight: bold; padding: .2em .5em; top: 50%; margin-top: -.9em; right: 10px; } +.ui-li-has-count .ui-link-inherit .ui-li-count { margin-top: -.95em; } +.ui-mini .ui-li-has-count .ui-li-count { right: 5px; } +.ui-li-has-arrow.ui-li-has-count .ui-li-count { right: 40px; } +.ui-mini .ui-li-has-arrow.ui-li-has-count .ui-li-count { right: 30px; } +.ui-li-has-alt.ui-li-has-count .ui-li-count { right: 53px; } +.ui-mini .ui-li-has-alt.ui-li-has-count .ui-li-count { right: 48px; } .ui-li-link-alt { position: absolute; width: 40px; height: 100%; border-width: 0; border-left-width: 1px; top: 0; right: 0; margin: 0; padding: 0; z-index: 2; } -.ui-li-link-alt .ui-btn { overflow: hidden; position: absolute; right: 8px; top: 50%; margin: -11px 0 0 0; border-bottom-width: 1px; z-index: -1;} -.ui-li-link-alt .ui-btn-inner { padding: 0; height: 100%; position: absolute; width: 100%; top: 0; left: 0;} +.ui-li-link-alt .ui-btn { overflow: hidden; position: absolute; right: 8px; top: 50%; margin: -13px 0 0 0; border-bottom-width: 1px; z-index: -1;} +.ui-li-has-alt .ui-li-link-alt .ui-btn-inner { padding: 0; height: 100%; position: absolute; width: 100%; top: 0; left: 0;} .ui-li-link-alt .ui-btn .ui-icon { right: 50%; margin-right: -9px; } .ui-listview * .ui-btn-inner > .ui-btn > .ui-btn-inner { border-top: 0px; } From e8b43ea16a9483b5545e31e8237646e3209510f6 Mon Sep 17 00:00:00 2001 From: Jasper de Groot Date: Sat, 21 Apr 2012 18:50:28 +0200 Subject: [PATCH 2/4] Fixes incorrect padding left and right for mini inline buttons and mini controlgroup buttons --- css/structure/jquery.mobile.button.css | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/css/structure/jquery.mobile.button.css b/css/structure/jquery.mobile.button.css index 6fdc9ee6e63..bfd68a1fe3a 100644 --- a/css/structure/jquery.mobile.button.css +++ b/css/structure/jquery.mobile.button.css @@ -29,16 +29,20 @@ .ui-header .ui-btn-icon-left .ui-btn-inner, .ui-footer .ui-btn-icon-left .ui-btn-inner, +.ui-mini.ui-btn-icon-left .ui-btn-inner, .ui-mini .ui-btn-icon-left .ui-btn-inner { padding-left: 30px; } .ui-header .ui-btn-icon-right .ui-btn-inner, .ui-footer .ui-btn-icon-right .ui-btn-inner, +.ui-mini.ui-btn-icon-right .ui-btn-inner, .ui-mini .ui-btn-icon-right .ui-btn-inner { padding-right: 30px; } .ui-header .ui-btn-icon-top .ui-btn-inner, -.ui-footer .ui-btn-icon-top .ui-btn-inner, -.ui-mini .ui-btn-icon-top .ui-btn-inner { padding: 30px 3px .5em 3px; } +.ui-footer .ui-btn-icon-top .ui-btn-inner { padding: 30px 3px .5em 3px; } +.ui-mini.ui-btn-icon-top .ui-btn-inner, +.ui-mini .ui-btn-icon-top .ui-btn-inner { padding-top: 30px; } .ui-header .ui-btn-icon-bottom .ui-btn-inner, -.ui-footer .ui-btn-icon-bottom .ui-btn-inner, -.ui-mini .ui-btn-icon-bottom .ui-btn-inner { padding: .55em 3px 30px 3px; } +.ui-footer .ui-btn-icon-bottom .ui-btn-inner { padding: .55em 3px 30px 3px; } +.ui-mini.ui-btn-icon-bottom .ui-btn-inner, +.ui-mini .ui-btn-icon-bottom .ui-btn-inner { padding-bottom: 30px; } /*btn icon positioning*/ .ui-btn-icon-notext .ui-icon { display: block; z-index: 0;} From 3cf373f65884e5e8ef04a04b4ac7c6beb0fa35a4 Mon Sep 17 00:00:00 2001 From: Jasper de Groot Date: Sat, 21 Apr 2012 18:52:26 +0200 Subject: [PATCH 3/4] Fixed: select button with data icon false still had class ui-btn-icon-right --- js/jquery.mobile.forms.select.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/jquery.mobile.forms.select.js b/js/jquery.mobile.forms.select.js index 407ecd95b7b..8ea860886f3 100644 --- a/js/jquery.mobile.forms.select.js +++ b/js/jquery.mobile.forms.select.js @@ -99,7 +99,7 @@ $.widget( "mobile.selectmenu", $.mobile.widget, { .buttonMarkup( { theme: options.theme, icon: options.icon, - iconpos: options.iconpos, + iconpos: options.icon ? options.iconpos : false, inline: options.inline, corners: options.corners, shadow: options.shadow, From db437f8c221a5561761e810ef5cbdc756a6adbdc Mon Sep 17 00:00:00 2001 From: Jasper de Groot Date: Sat, 21 Apr 2012 18:55:46 +0200 Subject: [PATCH 4/4] Docs: added data-mini to attr ref for listview, added 60px square size for mini version thumb list in List basics --- docs/api/data-attributes.html | 4 ++++ docs/lists/docs-lists.html | 2 +- 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/docs/api/data-attributes.html b/docs/api/data-attributes.html index 832467664a6..a6a2d6a4077 100644 --- a/docs/api/data-attributes.html +++ b/docs/api/data-attributes.html @@ -335,6 +335,10 @@

Listview

data-inset true | false + + data-mini + true | false - Compact sized version + data-split-icon home | delete | plus | arrow-u | arrow-d | check | gear | grid | star | custom | arrow-r | arrow-l | minus | refresh | forward | back | alert | info | search diff --git a/docs/lists/docs-lists.html b/docs/lists/docs-lists.html index b99612a5a13..b43d93b2b7f 100644 --- a/docs/lists/docs-lists.html +++ b/docs/lists/docs-lists.html @@ -104,7 +104,7 @@

Text formatting & counts

List with text formatting

Thumbnails & icons

-

To add thumbnails to the left of a list item, simply add an image inside a list item as the first child element. The framework will scale the image to 80 pixels square. To use standard 16x16 pixel icons in list items, add the class of ui-li-icon to the image element.

+

To add thumbnails to the left of a list item, simply add an image inside a list item as the first child element. The framework will scale the image to 80 pixels (60 pixels for mini version) square. To use standard 16x16 pixel icons in list items, add the class of ui-li-icon to the image element.

List with thumbnail images List with icon images