Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

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

Closed
wants to merge 4 commits into from

3 participants

@jaspermdegroot
Collaborator

Select and Listview CSS:
Added/adjusted padding and absolute position rules for count bubble (fullsize and mini) and mini listview (all types of lists).

Button CSS:
Fixed: The padding left and right used for header/footer buttons with icon top or bottom should not apply to mini inline buttons and mini controlgroup buttons. Also, mini inline buttons had same padding as fullsize inline buttons at the side where the icon is.

Select JS:
When data-icon="false" is used on a select button it still gets the default data-iconpos="right". The small change I made set data-iconpos to false. This fixes the issue: no class ui-btn-icon-right anymore, which means no unwanted padding right.
Looking at the Selectmenu widget and ButtonMarkup I didn't see a solution to completely remove the data attribute, since there is a default value.
[Update: removed note about same happening for listview items with data-icon false]

Docs:
These changes are only applicable when mini listviews are going to be used. Added data-mini as option to the data attribute reference. Added thumb size info in the Thumbnails & icons section on the List basics & API page.

I created a test page with all types of buttons that are affected. One version where you can see the results and one version how buttons currently look for comparison.
To keep overview I made an Excel file with a schematic representation of the buttons and the values of padding and absolute positioning. The XLS and PDF prints of it can be found at the test page as well.

Link to test page: [edit: removed this link; link to new test page will be added to new PR]

This PR fixes #3979 (Count Bubble position problem) and #4114 (Listview data-mini="true")

This PR replaces #4017 and #4018

@jaspermdegroot
Collaborator

Something that just crossed my mind...

When a custom select button has data-mini="true" it would be nice when the modal/dialog that opens is also mini version.

Next project :-)

@toddparker

Wow, this is incredibly detailed. Nice work @uGoMobi!

@toddparker

I just asked @Wilto to review this.

@Wilto

Man oh man.

I’ll review this first thing Monday. Great work.

@jaspermdegroot
Collaborator

Thanks guys!

@Wilto See @toddparker his comment on issue #4114 about probably not supporting mini listviews. I have a version of the Listview CSS file without the additions/changes for mini listviews. So just let me know if you prefer that one.

@jaspermdegroot
Collaborator

Fixes #4233

@jaspermdegroot
Collaborator

Fixes #4252

@jaspermdegroot
Collaborator

Fixes #2195

@toddparker

Looks like this PR might need an update.

@jaspermdegroot
Collaborator

@toddparker

Yes it does indeed. I think it's better to close this PR and split it up. One new PR to remove the mini listview option from the JS and all the other changes to a new PR for "standardize buttons and forms".

@jaspermdegroot
Collaborator

New PR for disabling option mini listview: #4464

I am closing this PR now and will move the other changes - without mini listview CSS - to the new PR for buttons and form.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Apr 21, 2012
  1. @jaspermdegroot

    Fixed count bubble postion/padding problems (select and listview) and…

    jaspermdegroot authored
    … made all types of listviews compatible with data-mini="true"
  2. @jaspermdegroot
  3. @jaspermdegroot
  4. @jaspermdegroot

    Docs: added data-mini to attr ref for listview, added 60px square siz…

    jaspermdegroot authored
    …e for mini version thumb list in List basics
This page is out of date. Refresh to see the latest.
View
12 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;}
View
12 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; }
View
38 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; }
View
4 docs/api/data-attributes.html
@@ -336,6 +336,10 @@
<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>
</tr>
View
2  docs/lists/docs-lists.html
@@ -104,7 +104,7 @@
<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>
View
2  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,
Something went wrong with that request. Please try again.