Fix #1177: Usability problem with sidebar on mobile devices #1182

nienn · 2021-08-03T14:45:20Z

Changes

Added a close button inside the sidebar just above the toctree
CSS: Made the button visible only on small screens
CSS: Made the sidebar 100%, when open, on small screens
(before it was set to 85% width so the original hamburger button that toggles the sidebar could still be accessed with the menu opened. now the close button was added inside the menu itself, so there's no need to access that button while the menu is opened)
CSS: Made the .rst-versions 100% width accordingly.

See bellow screenshots of before and after changes, both displaying the full window with the menu open

Before:

After:

Fixes #1177

ericholscher · 2021-08-03T15:26:39Z

sphinx_rtd_theme/layout.html

+
+          {#- MOBILE NAV, TRIGGLES SIDE NAV ON TOGGLE #}
+          <div class="wy-close-top">
+            <i data-toggle="wy-nav-top" class="fa fa-close"></i>


Is there a way to make this more accessible? I wasn't really sure what hitting the X would do when I tried to use it -- perhaps even some text along with the X like Close Sidebar X? I'm guessing there's also an aria-label we should be using here for screen readers?

It looks like a close button is the example in these docs, so I think we should definitely include one: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute#examples

aria-label is the best solution here, yeah. Verbose text would fill out too much space and would need to be translated, which introduces other horizontal spacing concerns.

I do wonder about something a bit more explicit that it's closing the menu, but I agree that translation point is a good one. Do the aria labels also need to be translated?

Yeah, aria elements should also be translated. The theme actually has pretty active translations, so localization is definitely a bit more effective here.

nienn · 2021-08-03T16:44:20Z

Added aria-label and some extra padding to the close button so it's easier to click.

agjohnson

This is a great upgrade, the 85% menu always bothered me a bit.

Do you think there is anything we can easily to do put the close button at the top of the navigation pane?

The top left position would position the close button right over where the hamburger menu was before opening the menu, though top right also feels intuitive.

I don't feel like there are good options that don't either 1) bump the content below the button down awkwardly or 2) potentially overlap elements if we make the close button float or fixed position. Neither are great, really. This PR could be a good interim location for the close button, but might not be as discoverable.

Ultimately, I could see us moving towards a menu that includes the top navigation bar as well. It would be nice to preserve the project title in both views probably. Something like:

This would most certainly be a larger change though, and probably not something to jump right into unless it's easy. The HTML structure for the top bar and the side navigation probably makes this a bit more work.

We can continue discussion separately if we want to do this in multiple steps.

sphinx_rtd_theme/layout.html

agjohnson · 2021-08-03T17:38:32Z

src/sass/_theme_badge.sass

@@ -88,7 +88,7 @@

 +media($tablet)
  .rst-versions
-    width: 85%
+    width: 100%


100% width on the menu and content is way better 👍

HYNNSDPG

Realme edit

agjohnson · 2021-08-03T19:00:51Z

Also, going to wait to merge until 1.0 is tagged.

Co-authored-by: Anthony <aj@ohess.org>

nienn · 2021-08-04T10:15:19Z

@agjohnson

Do you think there is anything we can easily to do put the close button at the top of the navigation pane?

I agree that the top of the navigation pane would be the best place for the close button.
In it's current layout however, I fear it would cause more problems:

It would make the top pane, which is already a bit too tall for a good user experience on mobile devices, even taller
It would invite miss-clicks on the logo link

There are several ways to solve these but all involve more design decisions.

We can continue discussion separately if we want to do this in multiple steps.

👍 Completely agree! A better UX could definitely be accomplished here by redesigning the top pane and integrating the close button.

agjohnson · 2021-08-04T21:27:00Z

Sounds like we have a plan then. It definitely does seem like a larger project to do this the way we want, we can address this in stages though.

In it's current layout however, I fear it would cause more problems

These are both good points. I actually almost posted a version with the logo removed. It might be worth considering removing the logo in the mobile menu. It's already hidden in the menu and it feels to me to really interfere with usability of the menu on mobile. We have a horizontal logo too. For projects with square or vertical logos the menu gets even more cramped on mobile.

Blendify · 2021-08-05T00:16:29Z

I want to point out that I also made changes that work towards improving this as part of much larger refactors/rewrites. See: #1122

The PR listed above makes several changes to HTML structure, layout, and breakpoints. Making it a slightly bigger change but also a slightly different UX compared to this patch.

Can you two look at the UX and tell me what you think? I can extract those changes from that PR if we like that UX more than this one.

The one benefit of this patch is that it removes the hamburger icon, which is a plus because the icon is rather confusing and is being removed across global UI design patterns.

nienn · 2021-08-05T07:55:02Z

@agjohnson

It might be worth considering removing the logo in the mobile menu

Definitely and option. Or maybe have a second logo version, different from the desktop menu.

@Blendify

See: #1122

Removing the hamburger button is a big plus! I don't think that making the sidebar a fixed width would be the best option here.
Moving to the new tags would be great thought, but because of Sphinx 3.5 lack of support for html5 I don't think we can do that yet (or could we use html5 on the sidebar, where Sphinx does not interfere?)

agjohnson · 2021-08-12T00:00:58Z

I commented on #1122 -- changing the HTML structure of the navigation is tricky because we have customer and users restyling our theme and expecting the existing current HTML structure. We are already discussing a big backwards incompatible change with bootstrap, and users will have to already port their styles to new HTML and classes once, I'd hate to make that twice for users.

I think we'll be in a better place to make better UX on some of the underlying structure after we have dropped some older Sphinx versions, we only have HTML5 output to worry about, and we are done messing around with the main HTML structures with a Bootstrap port. Until then, I think we're mostly in maintenance mode to get a final release out supporting old Sphinx/etc.

benjaoming · 2022-08-19T16:31:57Z

We'll be bumping the Sphinx requirements for 2.0, so perhaps that's a good milestone for this?

nienn added 2 commits August 3, 2021 15:13

Mobile Menu - Added close btn & made 100% width

56fe085

Add compiled css files

6296159

nienn requested review from agjohnson and a team August 3, 2021 14:45

ericholscher reviewed Aug 3, 2021

View reviewed changes

nienn added 2 commits August 3, 2021 17:41

Adds aria-label and extra btn padding

282d970

Fix build

268a893

Adds aria-label to the hamburger btn too

16f6569

agjohnson reviewed Aug 3, 2021

View reviewed changes

HYNNSDPG approved these changes Aug 3, 2021

View reviewed changes

agjohnson added this to the 1.1 milestone Aug 3, 2021

agjohnson added the Status: blocked Issue is blocked on another issue label Aug 3, 2021

nienn and others added 2 commits August 4, 2021 10:45

Update sphinx_rtd_theme/layout.html

7dc4522

Co-authored-by: Anthony <aj@ohess.org>

Added translations to aria labels

e344c58

benjaoming modified the milestones: 1.1, 2.0 Aug 19, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Fix #1177: Usability problem with sidebar on mobile devices #1182

Fix #1177: Usability problem with sidebar on mobile devices #1182

nienn commented Aug 3, 2021

ericholscher Aug 3, 2021

ericholscher Aug 3, 2021

agjohnson Aug 3, 2021 •

edited

ericholscher Aug 3, 2021

agjohnson Aug 3, 2021

nienn commented Aug 3, 2021

agjohnson left a comment

agjohnson Aug 3, 2021

HYNNSDPG left a comment •

edited

agjohnson commented Aug 3, 2021 •

edited

nienn commented Aug 4, 2021 •

edited

agjohnson commented Aug 4, 2021

Blendify commented Aug 5, 2021

nienn commented Aug 5, 2021

agjohnson commented Aug 12, 2021

benjaoming commented Aug 19, 2022

Fix #1177: Usability problem with sidebar on mobile devices #1182

Are you sure you want to change the base?

Fix #1177: Usability problem with sidebar on mobile devices #1182

Conversation

nienn commented Aug 3, 2021

Changes

ericholscher Aug 3, 2021

Choose a reason for hiding this comment

ericholscher Aug 3, 2021

Choose a reason for hiding this comment

agjohnson Aug 3, 2021 • edited

Choose a reason for hiding this comment

ericholscher Aug 3, 2021

Choose a reason for hiding this comment

agjohnson Aug 3, 2021

Choose a reason for hiding this comment

nienn commented Aug 3, 2021

agjohnson left a comment

Choose a reason for hiding this comment

agjohnson Aug 3, 2021

Choose a reason for hiding this comment

HYNNSDPG left a comment • edited

Choose a reason for hiding this comment

agjohnson commented Aug 3, 2021 • edited

nienn commented Aug 4, 2021 • edited

agjohnson commented Aug 4, 2021

Blendify commented Aug 5, 2021

nienn commented Aug 5, 2021

agjohnson commented Aug 12, 2021

benjaoming commented Aug 19, 2022

agjohnson Aug 3, 2021 •

edited

HYNNSDPG left a comment •

edited

agjohnson commented Aug 3, 2021 •

edited

nienn commented Aug 4, 2021 •

edited