#46949 closed defect (bug) (fixed)
Site Health page item and type alignments need improvement for mobile version
Reported by: |
|
Owned by: |
|
---|---|---|---|
Milestone: | 5.2 | Priority: | normal |
Severity: | normal | Version: | 5.2 |
Component: | Site Health | Keywords: | has-patch site-health commit |
Focuses: | ui, administration | Cc: |
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)
Change History (36)
#1
@
6 years 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
@
6 years ago
- Focuses administration added
- Keywords site-health added
- Milestone changed from Awaiting Review to 5.2
Related: #46939
#3
@
6 years 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.
#8
@
6 years ago
- Keywords needs-refresh added
Thanks @subrataemfluence some minor feedback;
- Drop the
min-width
as it's unnecessary to specifically exclude tiny mobiles. - 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
@
6 years ago
#46939 has been closed. So I am attaching my patch 46949.3.diff for fix accordion style on this ticket.
#10
@
6 years 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.
#11
@
6 years 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
@
6 years 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
@
6 years 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)
#16
@
6 years ago
Seeing @afercia's screen for left align, I agree left-align does look cleaner than the center align. Cheers
@
6 years ago
Screenshot after applying 46949.4.diff patch. Based on Andrea's suggestion. It looks good.
#17
@
6 years 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
@
6 years ago
@chetan200891 patch looks fine for me one small issue is there button is overlapping with title.
#19
@
6 years ago
- Keywords commit added
This looks good, let's make sure our small-screen users get a good experience.
Current view of the page in mobile device