WordPress.org

Make WordPress Core

Opened 4 years ago

Closed 3 years ago

Last modified 3 years ago

#43221 closed defect (bug) (fixed)

Don't hide the Help tab on small screens

Reported by: afercia Owned by: pento
Milestone: 5.1 Priority: normal
Severity: normal Version:
Component: Administration Keywords: has-patch has-ui-feedback
Focuses: ui, accessibility Cc:

Description

#40985 is going to make the Screen Options tab available also on small screens, as hiding it in the responsive view prevents access to important options.

In the same way, there's apparently no good reason to hide the Help: users need the Help content also on small screens. The current behavior is probably inspired to the first days of the responsive design, where hiding features to "remove clutter" was considered a viable approach. Today, better responsive design transforms the UI without hiding features.

I'd like to propose to try to find a way to keep the Help tab toggle visible also on small screens. Worth noting the Help panel content and the Screen Options content (as mentioned in #40985) would need some improvements for the responsive view, but that's out of the scope of this ticket.

Attachments (9)

43221.diff (894 bytes) - added by xkon 4 years ago.
Show Help Tab and add some responsive css fixes
43221-preview-1.png (17.1 KB) - added by xkon 4 years ago.
Preview 1 of 43221.diff
43221-preview-2.png (23.5 KB) - added by xkon 4 years ago.
Preview 2 of 43221.diff
43221.1.diff (1020 bytes) - added by jobthomas 3 years ago.
Screenshot 2018-10-02 at 10.46.12.png (51.9 KB) - added by jobthomas 3 years ago.
diff43221.1before.png (51.9 KB) - added by jobthomas 3 years ago.
diff43221.1after.png (49.6 KB) - added by jobthomas 3 years ago.
Screen Shot 2018-10-02 at 2.38.53 pm.png (98.3 KB) - added by pento 3 years ago.
43221.2.diff (1.1 KB) - added by jobthomas 3 years ago.

Download all attachments as: .zip

Change History (29)

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.


4 years ago

#2 @afercia
4 years ago

  • Milestone changed from Awaiting Review to Future Release

@xkon
4 years ago

Show Help Tab and add some responsive css fixes

@xkon
4 years ago

Preview 1 of 43221.diff

@xkon
4 years ago

Preview 2 of 43221.diff

#3 @xkon
4 years ago

  • Keywords has-patch added

43221.diff gives it a shot on making the Help tab visible on devices under 768px width.

Also it adds some minor css edits to make the text responsive as well.

The 'Help Tab Sidebar' that includes the links to Forums etc was actually 2nd in place as a div so I made it hidden for small devices to not interupt the flow of 'title -> content', but we can figure that out in the future I guess if we want to show it as well on small devices.

#4 @melchoyce
4 years ago

  • Keywords ui-feedback added

#5 @printsachen1
3 years ago

@wcretreat in Germany at the Contributing we are looking at this ticket.
We think it's helpful and works on mobile.

#6 @SergeyBiryukov
3 years ago

  • Milestone changed from Future Release to 5.0

This ticket was mentioned in Slack in #accessibility by rianrietveld. View the logs.


3 years ago

@jobthomas
3 years ago

#8 follow-up: @jobthomas
3 years ago

Works well - just added a bit of spacing below the links to not squash the "Add new" button below the title on wider mobile screens.

#9 @pento
3 years ago

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

#10 @pento
3 years ago

Thanks for the updated patch, @jobthomas!

It looks like menu items are slightly too wide of the container: the right edge of the selected item border is cut off.

@jobthomas
3 years ago

#11 @jobthomas
3 years ago

@pento it actually wasn't the width, but a combination of the margin and the overflow of the container. I've updated that and changed around some margin and padding to prevent the overflow: visible adding white space at the top.

#12 in reply to: ↑ 8 @jameskockelbergh
3 years ago

I think that this solution works well. Good job.

Replying to jobthomas:

Works well - just added a bit of spacing below the links to not squash the "Add new" button below the title on wider mobile screens.

This ticket was mentioned in Slack in #design by karmatosed. View the logs.


3 years ago

#14 @JoshuaWold
3 years ago

I agree with moving the add new button to the new location. That looks great!

#15 @boemedia
3 years ago

Tested the last patch, looks good to me!

#16 @boemedia
3 years ago

  • Keywords has-ui-feedback added; ui-feedback removed

#17 @pento
3 years ago

  • Milestone changed from 5.0 to 5.1

#18 @afercia
3 years ago

Looks good to me. Was only wondering why the relevant CSS is already in a media query based on 771px while the switch to the responsive view happens at 782px. Guess it's a leftover and this change https://core.trac.wordpress.org/changeset/29125 has to do with it, it was related to the plugin banners /cc @ocean90

#19 @pento
3 years ago

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

In 44588:

Admin: Make the Help tab available on small screens.

Props jobthomas, xkon.
Fixes #43221.

#20 @afercia
3 years ago

In 44604:

Admin: Use the correct CSS media query for the Help tab on small screens after [44588].

See #43221

Note: See TracTickets for help on using tickets.