Make Open Library Fully Mobile Responsive

[mekarpeles]

Currently, the homepage is the only page which is fully mobile responsive. We accomplish this within the plugin/openlibary/home.py view by injecting v2 as an attribute into the page template after it is rendered and then by changing the templates/site.html content based on whether the page has this v2 attribute to conditionally include a viewport metatag as well as other necessary changes.

This issue concerns (is the parent for) all changes towards mobile responsiveness on Openlibrary.org

How do we get there?

• migrate all pages to the new v2. Find issues to help with this!
• While doing the above, identify components in every single page and make them responsive to mobile devices Manage components CSS in separate style files and remove legacy.less #1092
• Throw out all v2 code and make it the default.
• Redo CSS for all types of pages and throw out redundancy (Simplify the CSS used on the subject page #1541, 1313)
• Remove legacy stylesheets.

[mekarpeles]

cc: @html5cat

[html5cat]

@mekarpeles could you outline the key pages and relevant files that are highest priority? Any relevant tips/tricks appreciated too!

[vigneshtdev]

Hi I would like to help out with this.

[mekarpeles]

Hi @vigneshtdev! As a first step, I think we should prioritize the /search page because it's relatively high traffic and there aren't that many "moving parts".

The goal would be (in the mobile view) to take everything that is currently displayed under the Zoom In facet sidebar and turn it into a drop down menu which can be triggered by something like a filter icon. With the sidebar moved under the dropdown in the mobile view, the books would be able to take up 100% of the width.

[mekarpeles]

@vigneshtdev we'd love your help if you're still open to trying this :)

Let us know and we'll be happy to invite you to our slack channel

[vigneshtdev]

yeah sure, your guidance will be very helpful. :)

[mekarpeles]

@vigneshtdev, I'm happy to help! Ask away. Have you had a chance to get a developer environment setup yet?

If you send me a message to mek@archive.org, we'll be happy to add you to our community slack channel.

[vigneshtdev]

I have indeed set up a dev environment. As you pointed out before that first we ought to focus on /serach pages so the current state on an iPhone is:

So what are major changes you think should be implemented to make it more responsive?

[mekarpeles]

Thanks! If you make a search, you'll notice the search results interface looks like:

I imagine we want something a bit closer to:

[psyked]

I've started some work towards this on a branch: https://github.com/psyked/openlibrary/tree/679/feature/fully-responsive-design

For the most part, it's a case of replacing any hardcoded element widths with fluid versions or max-width versions, but there are some elements, such as the carousels, which will require a little more effort.

[jdlrobson]

Hurraahhhh

[jdlrobson]

I'll cut open more specific tasks as there are still likely to be many problems with mobile friendliness!

[BrittanyBunk]

Do we have specific #'s on this? I only see #685.

[BrittanyBunk]

One of the issues (I don't see it posed, but correct me if I'm wrong) is that the editions table in works is really bad. I needs:

• better breaks between editions
• simplified boxes: 1) the read button could be smaller, as I feel people do want to listen more than read and the read button's crowding out finding the listen button, 2) I think we could simplify it to just the year for the wording (image is too small to see, the title's the same - so just repeat - waste of space, publisher - not really important enough to show). Let's take out "libraries near you" and say "nearby: WorldCat", "buy: betterworldbooks". I think it is important for people to find a book nearby in a library or buy it on their phone, so that's good. I just think it goes below the 'read/audio' part.

[BrittanyBunk]

there's more (including the IA), but we'll start there.