Make WordPress Core

Opened 2 years ago

Closed 21 months ago

#54813 closed defect (bug) (fixed)

Issue on mobile device in user listing page

Reported by: sumitsingh's profile sumitsingh Owned by: audrasjb's profile audrasjb
Milestone: 6.1 Priority: normal
Severity: normal Version: 5.8.3
Component: Users Keywords: has-screenshots has-patch needs-testing
Focuses: css, administration Cc:

Description

I think we need to space on both filters. More information see SS.

Attachments (9)

Screenshot_2022-01-13-19-29-57-195_com.android.chrome.jpg (270.2 KB) - added by sumitsingh 2 years ago.
Button Issue ss
54813.diff (386 bytes) - added by shreyasikhar26 2 years ago.
Added patch file with the changes required
Screenshot 2022-01-14 at 6.13.30 PM.png (420.5 KB) - added by shreyasikhar26 2 years ago.
Screenshot after applying the changes from the patch 54813.diff
users-screen-item-overlap-600.png (4.7 KB) - added by sabernhardt 2 years ago.
item count overlapping Change button at 600px wide
54813.2.diff (517 bytes) - added by sabernhardt 21 months ago.
option to fix both the margin and the positioning overlap
Users-actions-English-with-diff-782px.png (6.8 KB) - added by sabernhardt 21 months ago.
stacking actions controls on screens up to 782px wide with 54813.2.diff
Users-actions-French-with-diff-320px.png (6.9 KB) - added by sabernhardt 21 months ago.
adding a small bottom margin to the select element could help with certain languages on small screens (54813.2.diff)
Capture d’écran 2022-10-10 à 00.53.51.png (74.2 KB) - added by audrasjb 21 months ago.
Before patch
Capture d’écran 2022-10-10 à 00.54.10.png (93.4 KB) - added by audrasjb 21 months ago.
After patch

Download all attachments as: .zip

Change History (22)

#1 @sabernhardt
2 years ago

  • Component changed from General to Users
  • Focuses css administration added

This ticket was mentioned in PR #2163 on WordPress/wordpress-develop by shreyasikhar.


2 years ago
#2

  • Keywords has-patch added

@shreyasikhar26
2 years ago

Added patch file with the changes required

@shreyasikhar26
2 years ago

Screenshot after applying the changes from the patch 54813.diff

#3 @shreyasikhar26
2 years ago

  • Keywords needs-testing added

@sabernhardt
2 years ago

item count overlapping Change button at 600px wide

#4 @sabernhardt
2 years ago

  • Milestone changed from Awaiting Review to 6.0

Thanks for the patch!

There still is a related issue with the item count overlapping the Change button at certain widths. I think I have seen that before on another ticket, but I am unable to find it now. (The overlap could be fixed separately.)

Last edited 2 years ago by sabernhardt (previous) (diff)

#5 @sabernhardt
2 years ago

  • Milestone changed from 6.0 to 6.1

This ticket was mentioned in PR #3238 on WordPress/wordpress-develop by robinwpdeveloper.


21 months ago
#6

Fixes spacing issue between action buttons on Users list table page. Issue occurs on the mobile devices.
10px margin bottom added to match the bottom input and search spacing.

Trac ticket: 54813

Screenshot after applying the change:
https://i0.wp.com/user-images.githubusercontent.com/86726198/190062029-1d9ed020-97f9-4806-b75c-1f85813a2fe9.png

robinwpdeveloper commented on PR #3238:


21 months ago
#7

Unwanted commits are pushed. So closing this one.

This ticket was mentioned in PR #3239 on WordPress/wordpress-develop by robinwpdeveloper.


21 months ago
#8

Fixes spacing issue between action buttons on Users list table page. Issue occurs on the mobile devices.
10px margin bottom added to match the bottom input and search spacing.

Trac ticket: 54813

Screenshot after applying the change:
https://i0.wp.com/user-images.githubusercontent.com/86726198/190063629-78d16198-7e03-4c56-b921-797bb8fdb3e3.png

https://i0.wp.com/user-images.githubusercontent.com/86726198/190063582-658ad2f7-b5ae-4c57-bc25-0d0b6d0afe45.png

This ticket was mentioned in Slack in #core by robinwpdeveloper. View the logs.


21 months ago

@sabernhardt
21 months ago

option to fix both the margin and the positioning overlap

@sabernhardt
21 months ago

stacking actions controls on screens up to 782px wide with 54813.2.diff

@sabernhardt
21 months ago

adding a small bottom margin to the select element could help with certain languages on small screens (54813.2.diff)

#10 @sabernhardt
21 months ago

PR 3239 is a viable option; I agree that the distance between these controls should be (at least) as much as the distance between the User search input and its button.

However, I suggest using 54813.2.diff to fix the absolute positioning overlap, together with the margin fix. It clears the float on the second .actions element and only adds a margin on that. For languages with wider controls, the patch includes a bottom margin for the select elements in case the button wraps to the next line on small screens, to give a little space for focus outlines.

Both patch options increase empty space before the Search on other list tables screens: 10 pixels with the PR, 15 pixels with the .diff patch. (The second .actions element has no content on those screens, but it is not exactly empty to use the CSS :empty in 54813.2.diff.)

This ticket was mentioned in Slack in #core-css by sabernhardt. View the logs.


21 months ago

#12 @audrasjb
21 months ago

  • Owner set to audrasjb
  • Status changed from new to accepted

Self assigning for final review, testing and hopefully, commit.

#13 @audrasjb
21 months ago

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

In 54429:

Users: Fix Users list bottom filters margins on small screens.

This changeset fixes bottom filters margins of the Users list screen on small screens.

Props sumitsingh, sabernhardt, shreyasikhar26, audrasjb.
Fixes #54813.

Note: See TracTickets for help on using tickets.