Responsive Shelves

We've rolled out a new book shelf component across several pages on LibraryThing — starting with tagmash and a few other discovery pages. It's a ground-up rewrite of the shelf code that's been running (mostly unchanged) for over a decade, and we think it's a meaningful improvement.

The old shelves calculated how many books to fit by doing math against a hardcoded pixel budget at render time. This worked reasonably well on the screen sizes of 2010, but on phones, wide monitors, or anything in between, it often got the math wrong — covers would get cut off on the right side, or you'd get awkward gaps where another book almost fit. The new shelves use CSS grid and let the browser handle layout, so books always fill the available space correctly at any width.

Here's what's new or improved:

• Responsive layout — the grid reflows correctly on phones, tablets, wide monitors, and everything in between. No more cut-off covers on the right edge.


• Drag to resize —
  NEW! You can now control how many rows you see ANY place we use these new shelf views.
  Just grab the handle at the bottom-right corner and drag to show more (or fewer) rows.
  Your preference is saved so it sticks across visits. On home page modules,
  dragging saves directly to that module's settings — the same as if you'd gone into the
  module preferences and changed the row count there.


• Smart Pagination — prev/next controls let you page through long result sets even if you change the size of the view and the number of items on screen changes.


• Filter bar — many pages like tagmash now have a cleaner filter bar with Publication date and Media type dropdowns, replacing the old pillbox UI that didn't adapt well on small screens.


• "Have it" checkmarks — the green checkmarks showing which books are in your library are still there, now with slightly cleaner rendering.

If you spot anything odd let us know here.

(The work for this feature was done by @conceptDawg)

Oh, the glory, the Recently Added homepage module no longer has random gaps between covers. It bugged my like a pebble in my shoe, haha. Played around with resizing, works great. Thank you

Really nice. Thank you! I'll second >2 SandraArdnas:

Neat! I liked the way the "recently added" module on the home page did a slight overlap of covers, then realized it's because the size setting is adjusting the amount of space around the covers. Unexpected side effects on mobile, maybe?

I've attached screencaps of Tiny, Medium, and XXL settings.

i like the new system in that module!

BTW, is there a reason why Cover/List buttons on tag pages are a dropdown, rather than next to each other as in Recently Added? It makes it clearer there's two options and faster to change.

I like this but on my homepage in "Recent Automatic Recommendations" and "Recent Automatic Recommendations" (and other similiar modules) it overrides my "Number of books to show in titles mode" setting (which is set to 10) to show 50 titles when I select list.

>5 SandraArdnas: The big reason is to save space. It works better on all page sizes and browser sizes, and it keeps it consistent. And most people are not switching back and forth very often. They leave it on onw view style.

>6 rarm: ah, that's probably just a bug. We'll get that fixed.

>4 keristars: that's actually a bug. It should be in a clean grid. It's likely just because that browser that you're using doesn't read part of our CSS styling, I suspect nested CSS. Can you tell me what browser you're using?

>4 keristars: you should be seeing a clean grid now, or at least in the next few minutes.
>6 rarm: the list settings should now be respected. Your lists should be showing the correct number of items, and pagination should work too.

Can you roll this out to my physical shelves of paper books, please? :-)

It's full of span tag translation problems, looks very ugly.

>12 anglemark: Fixing.

>12 anglemark: Fixed.

>7 conceptDawg: I don't think us veterans care, we generally prefer one or the other and stick to it. I asked because this way it's not obvious to those new/newish there's a choice. You need to notice the arrow and check it out to realize you can view it s a list if you prefer.

I came here to complain I could no longer "show all" of a series, but discovered the super "Drag to resize" option which replaces it.
This is great, but not self-evident on first viewing.

>9 conceptDawg: I'm using Vivaldi for Android, I think 1 version out of date.*

I *like* the overlap, I think it's cute skumorphism! (and still showing overlapped when i refresh the homepage)

* waiting to update on my phone until the version on my tablet gets some features back that i use heavily

>16 kleh: but you did discover it. Which underscores the ability to discover it. 😊

>12 anglemark: fixing those

>18 keristars: I had the same (initial) reaction! It was giving infinite book stack vibes. And a little reminiscent of Apple's cover flow.

>19 conceptDawg: And I see we now have "Show All" back. Perfect!

>9 conceptDawg: I am also seeing this in Waterfox 1.2.2, AS: 149.0, OS: Android 15 (rebranded Firefox stable, more or less). But only on recently added, not recommendations

>23 tallpaul: Thanks. I'll check on that. Likely that browser also not using more modern CSS layout standards. Not a bug, per se, but I can fall back to not using those rules without too much trouble.

>24 conceptDawg: Looks good now