WordPress.org

Make WordPress Core

Opened 6 months ago

Closed 6 months ago

Last modified 4 months ago

#46949 closed defect (bug) (fixed)

Site Health page item and type alignments need improvement for mobile version

Reported by: subrataemfluence Owned by: afercia
Milestone: 5.2 Priority: normal
Severity: normal Version: 5.2
Component: Site Health Keywords: has-patch site-health commit
Focuses: ui, administration Cc:
PR Number:

Description

On wp-admin/site-health.php, alignments and spacing of Titles and their Type (e.g. Security, Performance etc.) look ugly. They need to be laid out in a proper manner.

Please see screenshots before and after applying patch.

Uploading patch in a few minutes.

Attachments (13)

current-view.png (29.8 KB) - added by subrataemfluence 6 months ago.
Current view of the page in mobile device
after-patch-is-applied.png (33.3 KB) - added by subrataemfluence 6 months ago.
View of he page after applying patch
46949.diff (1.0 KB) - added by subrataemfluence 6 months ago.
Proposed patch.
360.png (21.7 KB) - added by man4toman 6 months ago.
46949-2.diff (1.0 KB) - added by subrataemfluence 6 months ago.
Patch updated to consider 320px as the minimum.
46949.3.diff (433 bytes) - added by chetan200891 6 months ago.
accordion-style-mobile.png (57.7 KB) - added by chetan200891 6 months ago.
Screenshot after applying 46949.3.diff patch.
long-title-and-arrow-issue.png (28.5 KB) - added by mukesh27 6 months ago.
left.png (98.4 KB) - added by afercia 6 months ago.
46949.4.diff (906 bytes) - added by chetan200891 6 months ago.
Updated patch to fix long title and left align badges.
accordion-style-mobile-after.png (56.1 KB) - added by chetan200891 6 months ago.
Screenshot after applying 46949.4.diff patch. Based on Andrea's suggestion. It looks good.
button-overlap-with-title .png (92.1 KB) - added by mukesh27 6 months ago.
46949.2.diff (888 bytes) - added by mukesh27 6 months ago.
Updated patch to remove title and button overlapping

Download all attachments as: .zip

Change History (36)

@subrataemfluence
6 months ago

Current view of the page in mobile device

@subrataemfluence
6 months ago

View of he page after applying patch

@subrataemfluence
6 months ago

Proposed patch.

#1 @subrataemfluence
6 months ago

  • Keywords has-patch added
  • Summary changed from Site Health page item and type alignments needs improvement in mobile version to Site Health page item and type alignments need improvement for mobile version

#2 @SergeyBiryukov
6 months ago

  • Focuses administration added
  • Keywords site-health added
  • Milestone changed from Awaiting Review to 5.2

Related: #46939

#3 @man4toman
6 months ago

  • Keywords needs-refresh added

The patch works fine for 384px to 768px, but what about 360px or 320px sizes?
I think the patch needs refresh.

Last edited 6 months ago by man4toman (previous) (diff)

@man4toman
6 months ago

#4 @subrataemfluence
6 months ago

@man4toman thanks for pointing out. I will refresh the patch to use 320 as min.

@subrataemfluence
6 months ago

Patch updated to consider 320px as the minimum.

#5 @subrataemfluence
6 months ago

Please check if the modified patch works ok.

#6 @afercia
6 months ago

  • Keywords needs-design-feedback added
  • Version set to trunk

#7 @man4toman
6 months ago

  • Keywords needs-refresh removed

@subrataemfluence
Good, it works for me :)

#8 @garrett-eclipse
6 months ago

  • Keywords needs-refresh added

Thanks @subrataemfluence some minor feedback;

  1. Drop the min-width as it's unnecessary to specifically exclude tiny mobiles.
  2. Combine and move the media queries to the bottom to follow the CS rules for CSS;

“It is generally advisable to keep media queries grouped by media at the bottom of the stylesheet.”
Reference - https://make.wordpress.org/core/handbook/best-practices/coding-standards/css/#media-queries

Otherwise this works nicely.
Cheers

#9 @chetan200891
6 months ago

#46939 has been closed. So I am attaching my patch 46949.3.diff for fix accordion style on this ticket.

@chetan200891
6 months ago

Screenshot after applying 46949.3.diff patch.

#10 @garrett-eclipse
6 months ago

Thanks @chetan200891
Comparing the two approaches although @chetan200891 solution is simpler code-wise without needing a media query I do prefer the one presented by @subrataemfluence as it's visually cleaner to have the text and badges centered.

Last edited 6 months ago by garrett-eclipse (previous) (diff)

#11 @afercia
6 months ago

I guess this needs some design feedback :)
If the centered version is preferable, the approach in 46949-2.diff is a good start (can be done with way less CSS). Otherwise, 46949.3.diff looks good to keep the left alignment.

#12 @mukesh27
6 months ago

Need to adjust some css for title and arrow icon, In responsive device( 360px width ) it is not display good as per above screenshot.

#13 @afercia
6 months ago

Yep, long titles are a problem. Another approach could be to left-align also the badge and reserve some space on the right to make the text not overlap the chevron icon. (See attached screenshot)

@afercia
6 months ago

#14 @man4toman
6 months ago

Left version looks good.

@chetan200891
6 months ago

Updated patch to fix long title and left align badges.

#15 @melchoyce
6 months ago

+1 to left align 👍

#16 @garrett-eclipse
6 months ago

Seeing @afercia's screen for left align, I agree left-align does look cleaner than the center align. Cheers

@chetan200891
6 months ago

Screenshot after applying 46949.4.diff patch. Based on Andrea's suggestion. It looks good.

#17 @karmatosed
6 months ago

  • Keywords needs-design-feedback removed

Left align looks good to me. I am removing the design feedback label, please add that back in if needed.

#18 @mukesh27
6 months ago

@chetan200891 patch looks fine for me one small issue is there button is overlapping with title.

@mukesh27
6 months ago

Updated patch to remove title and button overlapping

#19 @Clorith
6 months ago

  • Keywords commit added

This looks good, let's make sure our small-screen users get a good experience.

#20 @man4toman
6 months ago

The patch is OK on small screen with Firefox and Edge too.

#21 @afercia
6 months ago

  • Owner set to afercia
  • Resolution set to fixed
  • Status changed from new to closed

In 45229:

Site Health: Improve the accordions styles for small screens.

Also, changes the hex color values to lowercase.

Props subrataemfluence, man4toman, garrett-eclipse, chetan200891, mukesh27, melchoyce, karmatosed, Clorith.
Fixes #46949.

#22 @afercia
6 months ago

  • Keywords needs-refresh removed

#23 @spacedmonkey
4 months ago

  • Component changed from Administration to Site Health
Note: See TracTickets for help on using tickets.