will_paginate for mobiles

I’ve been using ElasticSearch + Tire to (finally!) build Player FM search and they’ve worked well.

One little trick I used just now is a responsive pagination. I’m using will_paginate and bootstrap_will_paginate gems for this.

Normally, you get this clutter on mobile:

messed up!

Fortunately, will_paginate marks classes semantically, so you can do this instead:

responsive joy

using a SASS media query:

  1. .pagination
  2.   @media (max-width: 480px)
  3.     li  
  4.       display: none
  5.       &.active,&.prev,&.next
  6.         display: inline

I think there are some other ways to do it via server-side mobile detection, but this was a simple and reliable trick.

2 thoughts on will_paginate for mobiles

Leave a Reply