WordPress.org

Making WordPress.org

Opened 5 years ago

Closed 2 years ago

#467 closed enhancement (fixed)

Make the handbooks responsive

Reported by: samuelsidler Owned by: morganestes
Milestone: Priority: normal
Component: Handbooks Keywords: has-patch
Cc:

Description

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

Attachments (7)

polyglot-handbook_mobile_comp-1b.jpg (181.4 KB) - added by samuelsidler 5 years ago.
polyglot-handbook_mobile_rev1.jpg (212.8 KB) - added by samuelsidler 5 years ago.
467.diff (1.8 KB) - added by paulbremer 5 years ago.
467.2.diff (1.0 KB) - added by paulbremer 5 years ago.
467.3.diff (674 bytes) - added by paulbremer 5 years ago.
handbook-widget.js (1.1 KB) - added by morganestes 4 years ago.
Enable toggling of handbook chapter widget on small screens
handbook.diff (2.3 KB) - added by morganestes 4 years ago.
Handbook plugin patch with new JS file enqueued

Download all attachments as: .zip

Change History (28)

#1 @samuelsidler
5 years ago

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

@paulbremer
5 years ago

#2 @paulbremer
5 years ago

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

@paulbremer
5 years ago

#3 @paulbremer
5 years ago

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!

#4 @samuelsidler
5 years ago

In 603:

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

@paulbremer
5 years ago

#5 @paulbremer
5 years ago

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

#6 @samuelsidler
5 years ago

In 604:

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

#7 @samuelsidler
5 years ago

In 617:

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

#8 @samuelsidler
5 years ago

In 619:

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

#9 follow-up: @paulbremer
5 years ago

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.

#10 in reply to: ↑ 9 @samuelsidler
5 years ago

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.

#11 @paulbremer
5 years ago

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

#12 @samuelsidler
4 years ago

#1273 was marked as a duplicate.

@morganestes
4 years ago

Enable toggling of handbook chapter widget on small screens

#13 @morganestes
4 years ago

@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
4 years ago

Handbook plugin patch with new JS file enqueued

#14 @morganestes
4 years ago

  • Keywords has-patch added

@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.

#15 @samuelsidler
4 years ago

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.

#16 @samuelsidler
4 years ago

@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. :)

#17 @morganestes
4 years ago

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.

This ticket was mentioned in Slack in #meta by ocean90. View the logs.


3 years ago

#19 @ocean90
3 years ago

  • Owner set to morganestes
  • Status changed from new to assigned

#20 @melchoyce
2 years ago

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

#21 @coffee2code
2 years ago

  • Resolution set to fixed
  • Status changed from assigned to closed

Seems fixed to me too.

Note: See TracTickets for help on using tickets.