Screen elements in dashboard - design update in small device - feature request.

[dhrumilk]

we need to update the design for the screen option check box in small devices to look good for the small device user.

we need to set the checkbox in 2 columns.

Dashboard > home > click on the screen option.

[prashantbhivsane]

@oglekler can this be assigned to me?

Added a 2x2 grid for the screen options preferences for smaller screens.

#57977

[marybaum]

Welcome! I agree with you, and while I just told Olga I'd be happy to make a patch, I'm just as happy to assign this to you. I see you already have a patch — great! Next step, then, is testing. We will test your patch, and I invite you to invite all your friends to test it as well — in a local installation you use for development and testing, of course!

[prashantbhivsane]

@dhrumilk could you please test the patch and let me know if there's any feeedback?

[dhrumilk]

@prashantbhivsane I have checked your patch and also apply on my local but it's not working fine it's breaking the other design. Also, I have added braked design Screen short.

[dhrumilk]

@prashantbhivsane applied patch design screen short. (It's not working fine).

[prashantbhivsane]

@dhrumilk could you provide the following? :

1. Plugins you have installed 2. Theme you are using

[dhruvishah2203]

@prashantbhivsane
It's not working on my pc as well. Please check the screenshot given below.
Screenshot : ​https://prnt.sc/9lh9QqenoYm2

[dhrumilk]

@prashantbhivsane I have checked again by removing all plugins and using the Twenty Twenty-Two wordpress theme but it's not working fine and it looks like the current design. but yes I have removed all plugins so the above design is fixed.

Currently, your patch looks like same as the @dhruvishah2203 screenshot.

[prashantbhivsane]

@dhruvishah2203 @dhrumilk would you let me know how you applied the patch? as it is a CSS change (common.css), it should be reflected in the minified css after building the WP

common.min.css

[dhrumilk]

@prashantbhivsane oho sorry I forgot to run my docker. and yes your Patch is working fine for me.
Thank you for correcting me.

[prashantbhivsane]

@dhrumilk no worries!

[ababir]

For small screen, Screen Option check box can stack up like this to make it more easy to use in mobile device.

[prashantbhivsane]

hi @ababir that looks good, but would not that mean screen would have to be scrolled more for additional items? stacking in 2 columns will halve that scrolling.

[ababir]

Replying to prashantbhivsane:

hi @ababir that looks good, but would not that mean screen would have to be scrolled more for additional items? stacking in 2 columns will halve that scrolling.

Hello @prashantbhivsane. You are absolutely right about the scrolling part. Thank you for pointing it out. You have to scroll a bit for additional items. But what I was thinking is this particular section is hidden by default, as this is a drop-down. So, this might not be an issue. On top of that, it will give a clean UI to interact with on a smaller device.

[dhrumilk]

@ababir Your screenshot is more looks good to me. and also it will not create issues in user experience because of the dropdown.
So can you create the diff file for that?

[prashantbhivsane]

@ababir agree with you, I will update the patch.

[prashantbhivsane]

have updated the PR ​https://github.com/WordPress/wordpress-develop/pull/4437

[dhrumilk]

@prashantbhivsane I have verified your PR there are some minor changes. we need to apply CSS for the small device only current will apply for all devices.

[chiragrathod103]

Diff with the responsive CSS should apply

[dhrumilk]

57977.diff looks good to me.

[prashantbhivsane]

PR Updated

[oglekler]

Thank you, @prashantbhivsane and @dhrumilk for good team work 🙌

I am adding needs-testing to bring another tester to take a look too.

[tb1909]

Check after 57977

[tb1909]

Test Report

This report validates that the indicated patch addresses the issue.

Patch tested: #57977

Environment

• OS: macOS 13.4
• Web Server: Nginx
• PHP: 8.1.19
• WordPress: 6.3-alpha-55505-src
• Browser: Google Chrome 114.0.5735.106
• Theme: Twenty Twenty-Three
• Active Plugins:
  • none

Actual Results

• ✅ Working with the result of the patch 57977

Additional Notes

• Any additional details worth mention.

Supplemental Artifacts

Add Inline:

[jahidcse]

Test Report

Environment

• OS: Windows 11
• Browser: Firefox 114.0.1 (64-bit)
• Server: Apache/2.4.56
• PHP: 8.0.29
• WordPress: 6.3-alpha-55905
• Theme: twentytwentythree v1.1
• Active Plugins: gutenberg v16.0.0-rc.4

Steps to Test

1. Login WordPress Dashboard
2. Change Browser viewpoint to mobile
3. Apply patch & Back to WordPress Board & Click Screen Options

Expected Results

• ✅ The patch working as well.

Supplemental Artifacts

Image:
Before applying the patch - ​https://prnt.sc/y7apHE2URyaW
After applying the patch - ​https://prnt.sc/t3G-dGmpxJSE

[audrasjb]

Self assigning for final review (and hopefully commit).

[audrasjb]

The existing PR is not good to ship in my opinion:

• CSS: The media query should be between intermediate and very small screens MQ
• There's an unwanted indentation change on class-wp-screen.php
• There's an unrelated change on another PHP file (user.php)

I'm gonna put together another PR and close the previous one.

https://core.trac.wordpress.org/ticket/57977

Closing in favor of #4674.

[audrasjb]

Testing PR4674

[audrasjb]

In 55984:

Help/About: Improve Dashboard screen options behavior on small screens.

This changeset improve Dashboard screen options by stacking them vertically on small screens.

Props dhrumilk, prashantbhivsane, marybaum, dhruvishah2203, ababir, mukesh27, chiragrathod103, oglekler, tb1909, jahidcse, audrasjb.
Fixes #57977.

committed in https://core.trac.wordpress.org/changeset/55984

committed in https://core.trac.wordpress.org/changeset/55984