Make the handbooks responsive

[samuelsidler]

The handbooks need a responsive design implemented. The design is attached. @paulbremer is working on the CSS.

[samuelsidler]

And of course I forgot to mention... Designs courtesy @sonjanyc.

[paulbremer]

I have attached a patch with some css changes for the handbook page for responsive screens (max-width: 480px).

[paulbremer]

I made a patch that will show the sidebar on top of the main section on single-handbook and archive-handbook but not on other templates, this way the sidebar can be shown on top of the content on responsive screens. Also, made it during contributor day!

[samuelsidler]

In 603:

P2 Child theme: Add sidebar calls before content to handbook pages. See #467. props @paulbremer

[paulbremer]

Added a fix that will show the sidebar on small devices like the iPhone, before the sidebar was hidden by default.

[samuelsidler]

In 604:

P2 child theme: Add some responsive styles for handbooks. See #467. props @paulbremer

[samuelsidler]

In 617:

P2 child theme: More handbook clean and responsive fixes. see #467

[samuelsidler]

In 619:

P2 child theme: More responsive styles for handbook. See #467

[paulbremer]

I made a little proof of concept of how the collapsable items could work on mobile devices. Every H2 tag becomes clickable and all the elements after that H2 untill the next H2 slides down/up. This is all jQuery and there are no changes to the HTML. You can see the proof of concept here ​http://codepen.io/paulbremer/pen/AnyDd

Any feedback is welcome.

[samuelsidler]

Replying to paulbremer:

Any feedback is welcome.

I like it! We'll want to apply it only on small screens (320? 480?) and might speed it up to 100ms instead of 200, but that looks and works good. Since we already include jQuery on the page, this shouldn't be hard to add, though I don't know th best way to add JS to parts of WordPress.org.

[paulbremer]

I updated it so only viewports 480px and smaller get the collapsed view and changed the speed to 100ms ​http://codepen.io/paulbremer/pen/AnyDd?editors=001

[samuelsidler]

#1273 was marked as a duplicate.

[morganestes]

Enable toggling of handbook chapter widget on small screens

[morganestes]

@samuelsidler: This isn't the prettiest I've created, but it's working in my current tests. I don't have a good way yet to check on browser resize without firing off all sorts of events, so for now I'm just checking window size on ready to see if the window is at or below the 700px breakpoint where the widget stacks on top of the page.

[morganestes]

Handbook plugin patch with new JS file enqueued

[morganestes]

@samuelsidler The handbook.diff patch is my attempt at using the meta environment to generate a patch. I did svn diff wp-content/plugins/handbook/ from inside the wordpressorg.dev/public_html/ directory since it contains the SVN data for Make/Core. If there's a better way let me know so I can figure out how to keep a local dev environment running for Meta.

[samuelsidler]

In 2016:

Handbook Plugin: Allow toggling of Chapters list on small screens.

This adds a new JavaScript file that allows toggling of the Chapters list when the screen size is < 700 pixels.

Props morganestes.
See #467.

[samuelsidler]

@morganestes: One small issue I noticed was when resizing to a small width, then back to large, I could toggle. Not a deal breaker, of course. :)

[morganestes]

I cheated and only looked for the window size on ready(); I'll see if I can tweak it to also watch for the end of the resize event and fire the changes then, too.

[melchoyce]

Seems fixed in the new handbook design. Okay to close?

[coffee2code]

Seems fixed to me too.