Data page should be v2

[jdlrobson]

Bug

Evidence: What is happening? What are the symptoms? (screenshot here if possible)

Visit https://openlibrary.org/data
on a mobile device. The page is not mobile optimised:

Expectation: What should by happening?

it should be limited to the viewport like the home page https://openlibrary.org

Details: Logged in? Browser type/version? Operating system? Production/dev/local? (if relevant)

All mobile devices

Solution: Proposed solution? Solution requirements?

To migrate a page do the following

• Set v2 on the page object passed to any templates (e.g. 8d79b57)
• confirm #test-body-mobile is present in the HTML
• Load the page and view source. Identify all script tags in the page
• Ensure the inline scripts in the page are wrapped in a window.q handler
• Test the page - is everything working as before?
• Open the page in a mobile browser - is everything working as before. Do any components need optimising for mobile?

Using the window.q handler

e.g.

$( function () {
  doSomething();
} )

becomes:

window.q.push( function () {
  doSomething();
} )

Here's an example for the subject page: 0abff2f

Optimising the page for mobile

Do not change any CSS, instead move any problematic styles on mobile into a media query scoped to desktop. Problematic style properties tend to be float, width and problems relating to the box-sizing model.

Any inline styles should be moved into a component or the legacy.less file.

Here's an example for the subject page:
0fd34b5