WordPress.org

Make WordPress Core

Opened 2 weeks ago

Last modified 8 days ago

#54764 new defect (bug)

UI issue in mobile device on add new theme page

Reported by: sumitsingh Owned by:
Milestone: 6.0 Priority: normal
Severity: normal Version: 5.8.2
Component: General Keywords: has-screenshots good-first-bug has-patch commit
Focuses: ui, css Cc:

Description

Hi,

UI issue in mobile device on add new theme page. when i am preview theme details then somthing wromg UI with popup width.

siteurl/wp-admin/theme-install.php?browse=new

More information check SS.

Attachments (5)

image (5).png (136.6 KB) - added by sumitsingh 2 weeks ago.
UI issue in mobile device on add new theme page
54764.diff (560 bytes) - added by shreyasikhar26 9 days ago.
patch file to fix the issue
Screenshot 2022-01-12 at 7.12.29 PM.png (626.9 KB) - added by shreyasikhar26 9 days ago.
Screenshot after applying the changes from the patch
54764.2.diff (380 bytes) - added by shreyasikhar26 9 days ago.
Latest patch file with changes suggested by @costdev
Screenshot 2022-01-12 at 8.28.18 PM.png (247.3 KB) - added by shreyasikhar26 9 days ago.
Screenshot after applying the changes from the latest patch 54764.2.diff

Download all attachments as: .zip

Change History (13)

@sumitsingh
2 weeks ago

UI issue in mobile device on add new theme page

#1 @costdev
13 days ago

  • Focuses ui css added
  • Keywords has-screenshots needs-patch good-first-bug added
  • Milestone changed from Awaiting Review to 6.0

Can reproduce the view shown in the screenshot. This provides an inaccurate preview for the user's screen size and I agree that this should be fixed.

As far as I can see, this has two options:

  1. Make the sidebar full-width at max-width: 600px. This makes the theme preview only visible when "Collapse" has been triggered. This is similar to how the Customizer works - at max-width: 600px, the sidebar is full-width and the preview can only be seen once triggering "Preview".
  2. Set the width of the theme preview (.theme-install-overlay iframe) to 100vw instead of 100%. This way, the theme preview will remain in proportion to the user's current screen (i.e. a true preview), rather than being limited to the available space when the sidebar is expanded. Triggering the sidebar's "Collapse" will smoothly slide the preview into place.

Milestoning for 6.0 and marking as a good-first-bug.

To save new contributors a little bit of time, the related CSS will be in src/wp-admin/css/themes.css which should be minified to src/wp-admin/css/themes.min.css .

@shreyasikhar26
9 days ago

patch file to fix the issue

#2 @shreyasikhar26
9 days ago

  • Keywords has-patch added; needs-patch removed

@shreyasikhar26
9 days ago

Screenshot after applying the changes from the patch

#4 @shreyasikhar26
9 days ago

The contents from the 54764.2.patch are as per the suggestion of @costdev.

Last edited 9 days ago by shreyasikhar26 (previous) (diff)

@shreyasikhar26
9 days ago

Latest patch file with changes suggested by @costdev

@shreyasikhar26
9 days ago

Screenshot after applying the changes from the latest patch 54764.2.diff

#6 follow-up: @costdev
9 days ago

  • Keywords commit added

The "squashed" preview occurs both when viewing the Theme Details .theme-overlay iframe and the Customizer #customize-container iframe.

PR 2146 changes the width from 100% to 100vw. In doing so, a previously "squashed" preview (based on remaining available container space) becomes a "true" preview (based on the user's viewport width).

As expected, this PR resolves the issue in both locations.

Great work @shreyasikhar26! Marking with commit for final review.

#7 in reply to: ↑ 6 ; follow-up: @shreyasikhar26
8 days ago

Replying to costdev:

The "squashed" preview occurs both when viewing the Theme Details .theme-overlay iframe and the Customizer #customize-container iframe.

PR 2146 changes the width from 100% to 100vw. In doing so, a previously "squashed" preview (based on remaining available container space) becomes a "true" preview (based on the user's viewport width).

As expected, this PR resolves the issue in both locations.

Great work @shreyasikhar26! Marking with commit for final review.

Thank you for the appreciation.

Can we add css overflow to the parent of iframe (for which the width property is modified in the added patch), as current patch is not allowing to scroll new theme preview horizontally to see the complete content of the theme ?

Last edited 8 days ago by shreyasikhar26 (previous) (diff)

#8 in reply to: ↑ 7 @shreyasikhar26
8 days ago

Please let me know if you are able to scroll on your end. @costdev

Last edited 8 days ago by shreyasikhar26 (previous) (diff)
Note: See TracTickets for help on using tickets.