Gap and flipping

[maxforsyth]

Alex, this is a wonderful function you've written. Here are my issues with it.

The albums don't line up as I would expect them to on my iPod Touch.

In the images below, Chrome 31.0.1650.18 for iOS 6.1.5 (10B400) displays the results of the function called on my account for 20 albums (http://max.fivefourteen.net/albums/) in both portrait and landscape modes.

There's a split that occurs at the halfway point, between albums 10 and 11.

Aesthetically, the function would please me more if it didn't add an arbitrary blank space. Functionally, removing the blank space would eliminate some ambiguity and suspicion that it, along with the blurry-lined-paper icons chosen by Last.fm, is an album for which they have yet no cover.

Also, though I don't know how you intend for the mobile interface to work, I'm expecting albums to flip back over when I touch them a second time. Unfortunately for me, albums only flip back over when I flip another album.

Keep up the good work!

[alexcash]

I tracked down what's happening with the gaps in your grid, and I'll have a (css) patch for that this evening.

As for the flipping behavior on your iPod, have you tried the click behavior instead of hover? e.g.

$('.albums').lfm({ APIkey: 'foo',  User: 'bar' , Behavior: "click",  limit: 20, period: "3month" });

If you'd like to have it work with the hover handler on desktop, and click on mobile you could do some UA detection to decide which handler to use.

if (/(iPad|iPhone|iPod)/g.test( navigator.userAgent )) {
   // use click handler
} else {
 // use hover
}

[maxforsyth]

Thanks for the pointer! I got it working the way I wanted by changing the

Behavior: "hover"

line to

Behavior: /(iPad|iPhone|iPod)/g.test( navigator.platform )? "click" : "hover",

in both main.js and jquery.last.fm.js.

FYI, assuming your patch didn't somehow sneak onto my server already, the albums line up properly now on my iPod. Aside from the UA-test addition, I fixed a discrepancy I missed in the period variable between the two files (one was 1month and the other was 3month).

[alexcash]

Glad to hear you were able to get the behavior you desired.

The gap issue involves album artwork that is not perfectly square being returned from Last.fm. Is it possible you listened to some more music and it changed the albums on your grid?

The issue doesn't seem to be common but the css should be resilient, and albums should be square regardless of the image size returned from the API. I'm going to keep this bug open until I can make that happen.