Improve styling for author page with regard to search bar

[RayBB]

Problem

There are several issues on the author search page in regards to the search bar.

Evidence / Screenshot

Relevant URL(s)

https://openlibrary.org/authors/OL31676A/Noam_Chomsky
https://openlibrary.org/authors/OL8278562A/Morgan_G._Ames

Reproducing the bug

Issues on desktop:

• no spacing between the search bar and first result when there is no pagination
• When there is a lot of pagination it doesn't look too good either, not well aligned.

Issues on mobile:

• Spacing doesn't match the search results
• When there is pagination it is very chaotic

Context

n/a

Notes from this Issue's Lead

Proposal & constraints

We'll need someone with a careful eye at design to take a look at this one.

Related files

Stakeholders

---

Instructions for Contributors

• Please run these commands to ensure your repository is up to date before creating a new branch to work on this issue and each time after pushing code to Github, because the pre-commit bot may add commits to your PRs upstream.

[sbwhitt]

I've been toying with this. I tried moving the navigation options above the page numbers and centered all of the pagination. The spacing problems are also easily fixable. Let me know if this looks any better and I can take this and put these changes up for review.

[RayBB]

@sbwhitt I think yours is a big improvement!

At the same time, I think we should drastically simplify the design long term. Just have next/prev (and maybe first/last).
For comparison sake I made a small album of how other sites do this: https://albums.ente.io/?t=Rc69oqWF#4Fb3FuJxeD1xqEy5kStywnrqTCMZXpwtUVXcnwJtnoPG

To make it beyond my opinion I'd recommend the following:

1. Collect analytics for how often each navigation button is clicked. To support drastic design changes.
2. If it's not too much work, make a PR for your layout changes (chichi don't remove buttons) because they're an improvement in any case.
3. Decide on removing buttons after a month or so about analytics
4. Consider adding auto loading like most modern apps have (with a fallback to the old navigation for people without JS).

In short, I'd support you making a PR for your proposed changes :)

[sbwhitt]

I agree it could be simplified further. I would like to remove the text like some of the examples you showed, and maybe reduce the amount of page numbers as well. If you want to assign to me I can keep messing with it and put up a PR in a bit.

[RayBB]

@sbwhitt I assigned you. I know it'll be a slow next month or so as the team is away for the holidays but it would be awesome if you wanted to come up with some simpler mockups.

Also if you want to do an analytics PR maybe we can sneak that out before the holidays to collect data and justify simplifying it. If you need an analytics example I have a recent PR for wikidata analytics.

[sbwhitt]

That's totally fine. I am just getting back into things so no rush. Also, I'd be up for that. I haven't worked with that before so an example would be helpful. Thanks for the help!

[RayBB]

#10069 is the example. Might have to put a little thinking into what they keys will be for each state. I think they probably should be relative like the words are the words but the others could be +1 +2 +3 or something like that to see how often people are skipping ahead or back more than one from where they currently are.