Redesign the paginator

Merged
#1391 · Created  · Last updated

Merged pull request

Merge remote-tracking branch 'chirlu/css-paginator' into beta

3a3a439·Author: ·Closed by: ·2015-02-16

Description

This redesigns the paginator, both in the way the links are presented and how they're styled.

For the presentation of the links:

  • I moved the previous and next links to the beginning and end, respectively. These are most likely the most useful links if you're trying to go between pages and having them at the ends makes them easier to pick out so that you can click them. It also makes more sense with the other changes.

  • I replaced the first and "last" page links with the actual page numbers. If there are pages being skipped between the first/"last" and the current range, it represents that with "...".

  • I replaced the previous/next page arrows with the words "Previous" and "Next". This makes them bigger and easier to click (see above). It also makes it clearer what they will do. Right now I find the arrows pretty unintuitive, mostly because there are two and I have to pause and think about which one is the one which will do what I want. We could probably still have arrows for previous/next, but for me the angle quotes are not really big enough to work well for that. FontAwesome has some pretty decent looking ones that would probably be a lot better if we want to add the arrows back later.

  • I added another "..." after the "last" page number when there are actually more pages. It's slightly weird, but I think it's even weirder that the "last" page is not really the last page - something we definitely don't convey properly right now.

  • Since both the current page, total number of known pages and whether or not it's exact are now shown in the page numbers, I removed the text saying "Page x of (at least) y".

For the styling:

  • I increased the font size and added more padding, this makes the links easier to click, since the clickable area is now quite a bit bigger.

  • I removed the spacing between the links. Mostly I think it looks much better visually not having so many vertical lines, but I also think it feels much better too for reasons I can't describe.

  • I changed the current page to use a purple background instead of orange, which distinguishes it from the orange background when hovering over a link. And more purple is always good. :P

  • I changed the borders to be light grey so that they're more subtle and make the text stand out more.

It's currently on my sandbox, e.g. http://nikki.mbsandbox.org/search?page=155&query=foo&type=artist&limit=25&method=indexed for a known number of pages and http://nikki.mbsandbox.org/edit/open?page=46 for an unknown number, but since that'll change at some point, a screenshot of the old/new ones for both in my Chromium: http://i.imgur.com/UGryBWK.png

While I was at it, I also changed the syntax to match Bootstrap's - http://getbootstrap.com/components/#pagination which will make it easier to use Bootstrap later if we want to.

0 attachments

0 comments

Loading commits...