Permalink
Browse files

Listviews: ui-first-child/ui-last-child for corner and border styling

  • Loading branch information...
1 parent 3cdc244 commit c2f1e6eb6fb44e1020b5f3c25e66601fed03f731 @jaspermdegroot jaspermdegroot committed Nov 9, 2012
Showing with 34 additions and 21 deletions.
  1. +16 −20 css/structure/jquery.mobile.listview.css
  2. +1 −0 js/widgets/listview.filter.js
  3. +17 −1 js/widgets/listview.js
@@ -5,54 +5,50 @@ ol.ui-listview, ol.ui-listview .ui-li-divider { counter-reset: listnumbering; }
.ui-content .ui-listview-inset { margin: 1em 0; }
.ui-collapsible-content .ui-listview-inset { margin: .5em 0; }
.ui-listview, .ui-li { list-style: none; padding: 0; }
-.ui-li, .ui-li.ui-field-contain { display: block; margin: 0; position: relative; overflow: visible; text-align: left; border-width: 1px 0 1px 0; }
-.ui-li.ui-btn, .ui-li.ui-field-contain, .ui-li-static { margin: 0 0 -1px; }
-.ui-listview-inset .ui-li.ui-btn, .ui-listview-inset .ui-li-divider, .ui-listview-inset .ui-li.ui-field-contain, .ui-listview-inset .ui-li-static { border-right-width: 1px; border-left-width: 1px; }
-.ui-collapsible-themed-content .ui-listview:not(.ui-listview-inset) .ui-listview > .ui-li:last-child { border-bottom-width: 0; }
-.ui-collapsible-content > .ui-listview:not(.ui-listview-inset) > .ui-li:first-child { border-top-width: 0; }
+.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, .ui-li.ui-field-contain, .ui-li-divider, .ui-li-static { margin: 0; }
+.ui-listview-inset .ui-li { border-right-width: 1px; border-left-width: 1px; }
+.ui-li.ui-last-child, .ui-li.ui-field-contain.ui-last-child { border-bottom-width: 1px; }
+.ui-collapsible-content > .ui-listview:not(.ui-listview-inset) > .ui-li.ui-first-child { border-top-width: 0; }
+.ui-collapsible-themed-content .ui-listview:not(.ui-listview-inset) > .ui-li.ui-last-child { border-bottom-width: 0; }
.ui-li .ui-btn-text a.ui-link-inherit { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
.ui-li-static { background-image: none; }
.ui-li-divider { padding: .5em 15px; font-size: 14px; font-weight: bold; }
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 */
-/* Corner styling */
-.ui-listview > .ui-li:first-child,
-.ui-listview .ui-btn:first-child > .ui-li > .ui-btn-text > .ui-link-inherit {
+
+.ui-listview > .ui-li.ui-first-child,
+.ui-listview .ui-btn.ui-first-child > .ui-li > .ui-btn-text > .ui-link-inherit {
-webkit-border-top-right-radius: inherit;
border-top-right-radius: inherit;
-webkit-border-top-left-radius: inherit;
border-top-left-radius: inherit;
}
-.ui-listview > .ui-li:last-child,
-.ui-listview .ui-btn:last-child > .ui-li > .ui-btn-text > .ui-link-inherit,
+.ui-listview > .ui-li.ui-last-child,
+.ui-listview .ui-btn.ui-last-child > .ui-li > .ui-btn-text > .ui-link-inherit,
.ui-collapsible-content > .ui-listview:not(.ui-listview-inset),
-.ui-collapsible-content > .ui-listview:not(.ui-listview-inset) .ui-li:last-child {
+.ui-collapsible-content > .ui-listview:not(.ui-listview-inset) .ui-li.ui-last-child {
-webkit-border-bottom-right-radius: inherit;
border-bottom-right-radius: inherit;
-webkit-border-bottom-left-radius: inherit;
border-bottom-left-radius: inherit;
}
-.ui-listview > .ui-li:first-child .ui-li-link-alt {
+.ui-listview > .ui-li.ui-first-child .ui-li-link-alt {
-webkit-border-top-right-radius: inherit;
border-top-right-radius: inherit;
}
-.ui-listview > .ui-li:last-child .ui-li-link-alt {
+.ui-listview > .ui-li.ui-last-child .ui-li-link-alt {
-webkit-border-bottom-right-radius: inherit;
border-bottom-right-radius: inherit;
}
-.ui-listview > .ui-li:first-child .ui-li-thumb {
+.ui-listview > .ui-li.ui-first-child .ui-li-thumb:not(.ui-li-icon) {
-webkit-border-top-left-radius: inherit;
border-top-left-radius: inherit;
}
-.ui-listview > .ui-li:last-child .ui-li-thumb {
+.ui-listview > .ui-li.ui-last-child .ui-li-thumb:not(.ui-li-icon) {
-webkit-border-bottom-left-radius: inherit;
border-bottom-left-radius: inherit;
}
-.ui-listview > .ui-li:first-child .ui-li-icon,
-.ui-listview > .ui-li:last-child .ui-li-icon {
- -webkit-border-radius: 0;
- border-radius: 0;
-}
.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; display: block; }
.ui-li-has-thumb .ui-btn-inner a.ui-link-inherit, .ui-li-static.ui-li-has-thumb { min-height: 60px; padding-left: 100px; }
@@ -114,6 +114,7 @@ $( document ).delegate( "ul, ol", "listviewcreate", function() {
//filtervalue is empty => show all
listItems.toggleClass( "ui-screen-hidden", !!listview.options.filterReveal );
}
+ listview._addFirstLastClasses();
})
.appendTo( wrapper )
.textinput();
@@ -49,6 +49,21 @@ $.widget( "mobile.listview", $.mobile.widget, {
t.refresh( true );
},
+ _addFirstLastClasses: function( create ) {
+ var lis = this.element.children( "li" ),
+ visiblelis;
+
+ lis.removeClass( "ui-first-child ui-last-child" );
+ // At create time and when autodividers calls refresh the li are not visible yet so we need to rely on .ui-screen-hidden
+ visiblelis = create || lis.filter( ":visible" ).length === 0 ? lis.not( ".ui-screen-hidden" ) : lis.filter( ":visible" );
+
+ visiblelis.eq( 0 ).addClass( "ui-first-child" ).end().last().addClass( "ui-last-child" );
+
+ if ( !create ) {
+ this.element.trigger( "updatelayout" );
+ }
+ },
+
// This is a generic utility method for finding the first
// node with a given nodeName. It uses basic DOM traversal
// to be fast and is meant to be a substitute for simple
@@ -278,7 +293,8 @@ $.widget( "mobile.listview", $.mobile.widget, {
this._addThumbClasses( li );
this._addThumbClasses( $list.find( ".ui-link-inherit" ) );
-
+
+ this._addFirstLastClasses( create );
// autodividers binds to this to redraw dividers after the listview refresh
this._trigger( "afterrefresh" );
},

0 comments on commit c2f1e6e

Please sign in to comment.