Netflix and Zillow – Manipulating lists

In order to create an app like appearance with jQuery mobile that imitates already exisiting Native Apps I have to spend a lot of time tweaking css – 1px this way 2px that way.

This is a short article about manipulating lists which is the most commonly used element in Native Apps, where would we be without lists. In this example I use the Netflix App and Zillow App to demonstrate how easy it is.

For the Netflix style first we change the list icons making the background circle white and the arrow black, also A sight sharp shadow is added using the box-shadow parameter.

/* Change the list icons to black */
.netflix .ui-icon,.ui-icon-searchfield::after {
background: #FFF;
background-image:url(../../vendors/jquery.mobile/images/icons-18-black.png);
background-repeat:no-repeat;
-moz-border-radius:9px;
-webkit-border-radius:9px;
border-radius:9px;
}

.netflix .ui-icon-arrow-r {
background-position:-108px 50%;
}

.netflix .ui-icon-shadow {
-moz-box-shadow:0 1px 0 transparent;
-webkit-box-shadow:0 1px 0 transparent;
box-shadow:0 1px 0 transparent;
}

 
In order to fit in the movie posters or DVD covers of the listed movies our list element needs to be taller then usual.

Change this by setting a max-height: which in this case is 160px, a max-width of 86px is also added to take care of any badly propotioned images.

This means that the list heights may vary slightly in pixels but the images fit snuggly and the height difference is hardly noticible.   

/* Change size of usual thumb to fit film covers */
.netflix .ui-li-thumb {
position:relative;
max-height:160px;
max-width:86px;
border:1px solid #666!important;
}

/* Change lists thumb link to give padding around the thumb */
.netflix .ui-li .ui-btn-inner a.ui-link-inherit {
padding:6px 30px 6px 8px;
}

 
Finish up the perfect film thumbnails with some padding, the right hand padding has been set to 30px in preperation for adding the play button detail later on.

Next we want to change the way each list items header and text are displayed, this takes a bit of tweeking to get the pixel margin and wordspacing correct for movie specific information.

.netflix .ui-li-heading {
margin:2px;
}

.netflix .info {
font-weight:900;
color:#666;
margin:4px 2px;
word-spacing:8px;
font-size:14px;
}

 
Finally we finish up by adding the play button, which we have already prepared the list for by adding 3opx of padding and is of course a unique added element for video playback sites.

.netflix .play {
background:url(Netflix/play.png);
width:40px;
height:40px;
position:absolute;
left:34px;
top:52px;
}

.netflix .ui-content .ui-listview {
margin:0;
}

 
Next up is the Zillow style Web App page, this is a much easier transition because the Zillow App is much closer to a traditional iPhone App feel and the jQuery mobile default theme.

To have list headings display like that of a native App is a common request for Web Apps, even though this traditional style does not match the more recent iOS software.

To do this I have removed the padding setting both top and bottom to 0px, changed the font-size to 14px and added a shadow to the now white headings.    

/* Changing List divider to look like iphone apps headers */
.z-list .ui-li-divider {
padding-top:0;
padding-bottom:0;
padding-left:8px;
color:#fff;
font-size:18px;
font-weight:700;
text-shadow:1px 1px 1px #666;
background-image:0;
border-color:#aaa;
}

 
A quick nip to fit all of the text in and create a cleaner border between thumbnail and text, with a slightly extended padding of the thumbnail link to 92px. Change the text size and then match the link color to that of the theme, in this case #497BAE which is a nice bold blue.

/* Changing List style to fit all lines of text */
.z-list .ui-li .ui-btn-inner a.ui-link-inherit {
padding-top:2px;
padding-bottom:2px;
padding-left:92px;
}

.z-list .ui-li-heading {
font-size:14px;
margin-top:6px;
}

/*and add blue text */
.z-list .note {
color:#497BAE;
font-weight:700;
}

  
and your done!

For a tutorial on creating a back button similar to that of the Zillow App visit: http://appcropolis.com/how-to-make-iphone-back-button-in-jquery-mobile/