Make WordPress Core

Opened 13 months ago

Closed 10 months ago

Last modified 10 months ago

#57977 closed enhancement (fixed)

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

Reported by: dhrumilk's profile dhrumilk Owned by: audrasjb's profile audrasjb
Milestone: 6.3 Priority: normal
Severity: normal Version:
Component: Help/About Keywords: has-screenshots good-first-bug has-patch
Focuses: ui, css Cc:

Description

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.

Attachments (10)

before design.png (39.1 KB) - added by dhrumilk 13 months ago.
after design.png (32.7 KB) - added by dhrumilk 13 months ago.
core57977.diff (1.1 KB) - added by prashantbhivsane 12 months ago.
screenshot-resp.png (14.5 KB) - added by prashantbhivsane 12 months ago.
braked design ss.png (47.2 KB) - added by dhrumilk 12 months ago.
@prashantbhivsane applied patch design screen short. (It's not working fine).
screen options.png (42.4 KB) - added by ababir 11 months ago.
For small screen, Screen Option check box can stack up like this to make it more easy to use in mobile device.
core57977-new.diff (399 bytes) - added by prashantbhivsane 11 months ago.
57977.diff (2.7 KB) - added by chiragrathod103 11 months ago.
Diff with the responsive CSS should apply
mobile-view.png (127.2 KB) - added by tb1909 11 months ago.
Check after 57977
6b85113bc27c2409b912a6a40af6633b.gif (1.1 MB) - added by audrasjb 10 months ago.
Testing PR4674

Download all attachments as: .zip

Change History (45)

#1 @dhrumilk
13 months ago

  • Summary changed from Screen elements in dashboard - design update in small device. to Screen elements in dashboard - design update in small device - feature request.

#2 @oglekler
12 months ago

  • Component changed from Administration to Help/About
  • Focuses css added
  • Keywords needs-patch has-screenshots good-first-bug added; reporter-feedback dev-feedback removed

#3 @prashantbhivsane
12 months ago

  • Keywords has-patch reporter-feedback added; needs-patch removed

#4 @prashantbhivsane
12 months ago

@oglekler can this be assigned to me?

This ticket was mentioned in PR #4437 on WordPress/wordpress-develop by @prashantbhivsane.


12 months ago
#5

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

#57977

#6 @marybaum
12 months ago

  • Milestone changed from Awaiting Review to 6.3
  • Owner set to dhrumilk
  • Status changed from new to assigned

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!

#7 @prashantbhivsane
12 months ago

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

#8 @dhrumilk
12 months ago

  • Keywords needs-patch added; has-patch removed

@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
12 months ago

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

#9 @prashantbhivsane
12 months ago

@dhrumilk could you provide the following? :

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

#10 @dhruvishah2203
12 months ago

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

#11 @dhrumilk
12 months ago

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

#12 @prashantbhivsane
12 months ago

@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
Last edited 12 months ago by prashantbhivsane (previous) (diff)

#13 @dhrumilk
12 months ago

  • Keywords has-patch added; needs-patch removed

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

#14 @prashantbhivsane
12 months ago

@dhrumilk no worries!

#15 @dhrumilk
12 months ago

  • Keywords reporter-feedback removed

@ababir
11 months ago

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

#16 follow-up: @prashantbhivsane
11 months ago

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.

#17 in reply to: ↑ 16 @ababir
11 months ago

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.

#18 @dhrumilk
11 months ago

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

#19 @prashantbhivsane
11 months ago

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

#21 @dhrumilk
11 months ago

@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
11 months ago

Diff with the responsive CSS should apply

#22 @dhrumilk
11 months ago

57977.diff looks good to me.

#24 @oglekler
11 months ago

  • Keywords needs-testing added

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

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

This ticket was mentioned in Slack in #core-test by boniu91. View the logs.


11 months ago

@tb1909
11 months ago

Check after 57977

#26 @tb1909
11 months ago

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: https://core.trac.wordpress.org/raw-attachment/ticket/57977/mobile-view.png

#27 @jahidcse
10 months ago

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

Last edited 10 months ago by jahidcse (previous) (diff)

#28 @audrasjb
10 months ago

  • Keywords needs-design-feedback removed
  • Owner changed from dhrumilk to audrasjb
  • Status changed from assigned to reviewing

Self assigning for final review (and hopefully commit).

#29 @audrasjb
10 months ago

  • Keywords needs-patch added; has-patch removed

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.

This ticket was mentioned in PR #4674 on WordPress/wordpress-develop by @audrasjb.


10 months ago
#30

  • Keywords has-patch added; needs-patch removed

@audrasjb commented on PR #4437:


10 months ago
#31

Closing in favor of #4674.

@audrasjb
10 months ago

Testing PR4674

#32 @audrasjb
10 months ago

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

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.

#35 @monzuralam
10 months ago

  • Keywords needs-testing removed
Note: See TracTickets for help on using tickets.