Skip to content
This repository was archived by the owner on Oct 8, 2021. It is now read-only.

Fixes #4017 (Count bubble) and #4114 (Mini Listviews) #4154

Closed
jaspermdegroot wants to merge 4 commits into from
Closed

Fixes #4017 (Count bubble) and #4114 (Mini Listviews) #4154

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
d22975d
Fixed count bubble postion/padding problems (select and listview) and…
jaspermdegroot Apr 21, 2012
e8b43ea
Fixes incorrect padding left and right for mini inline buttons and mi…
jaspermdegroot Apr 21, 2012
3cf373f
Fixed: select button with data icon false still had class ui-btn-icon…
jaspermdegroot Apr 21, 2012
db437f8
Docs: added data-mini to attr ref for listview, added 60px square siz…
jaspermdegroot Apr 21, 2012
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 8 additions & 4 deletions css/structure/jquery.mobile.button.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;}
Expand Down
12 changes: 8 additions & 4 deletions css/structure/jquery.mobile.forms.select.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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; }
Expand Down
38 changes: 27 additions & 11 deletions css/structure/jquery.mobile.listview.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,37 +5,53 @@
.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; }
@media all and (min-width: 480px){
.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; }
Expand Down
4 changes: 4 additions & 0 deletions docs/api/data-attributes.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -335,6 +335,10 @@ <h2><a href="../lists/docs-lists.html">Listview</a></h2>
<th>data-inset</th>
<td>true | <strong>false</strong></td>
</tr>
<tr>
<th>data-mini</th>
<td>true | <strong>false</strong> - Compact sized version</td>
</tr>
<tr>
<th>data-split-icon</th>
<td>home | delete | plus | arrow-u | arrow-d | check | gear | grid | star | custom | arrow-r | arrow-l | minus | refresh | forward | back | alert | info | search</td>
Expand Down
2 changes: 1 addition & 1 deletion docs/lists/docs-lists.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -104,7 +104,7 @@ <h2>Text formatting &amp; counts</h2>
<a href="lists-formatting.html" data-role="button" data-icon="arrow-r" data-iconpos="right">List with text formatting</a>

<h2>Thumbnails &amp; icons</h2>
<p>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 <code>ui-li-icon</code> to the image element.</p>
<p>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 <code>ui-li-icon</code> to the image element.</p>
<a href="lists-thumbnails.html" data-role="button" data-icon="arrow-r" data-iconpos="right">List with thumbnail images</a>
<a href="lists-icons.html" data-role="button" data-icon="arrow-r" data-iconpos="right">List with icon images</a>

Expand Down
2 changes: 1 addition & 1 deletion js/jquery.mobile.forms.select.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down