Make WordPress Core

Opened 5 months ago

Closed 4 months ago

Last modified 4 months ago

#54764 closed defect (bug) (fixed)

UI issue in mobile device on add new theme page

Reported by: sumitsingh's profile sumitsingh Owned by: sergeybiryukov's profile SergeyBiryukov
Milestone: 6.0 Priority: normal
Severity: normal Version: 5.8.2
Component: Themes 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 5 months ago.
UI issue in mobile device on add new theme page
54764.diff (560 bytes) - added by shreyasikhar26 5 months ago.
patch file to fix the issue
Screenshot 2022-01-12 at 7.12.29 PM.png (626.9 KB) - added by shreyasikhar26 5 months ago.
Screenshot after applying the changes from the patch
54764.2.diff (380 bytes) - added by shreyasikhar26 5 months 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 5 months ago.
Screenshot after applying the changes from the latest patch 54764.2.diff

Download all attachments as: .zip

Change History (17)

@sumitsingh
5 months ago

UI issue in mobile device on add new theme page

#1 @costdev
5 months 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
5 months ago

patch file to fix the issue

#2 @shreyasikhar26
5 months ago

  • Keywords has-patch added; needs-patch removed

@shreyasikhar26
5 months ago

Screenshot after applying the changes from the patch

#4 @shreyasikhar26
5 months ago

The contents from the 54764.patch are as per the suggestion of @costdev.
In addition to that, I have added css overflow to the parent of the theme previewer's iframe to view the entire theme preview by scrolling horizontally and vertically on mobile/tablet devices.

Version 0, edited 5 months ago by shreyasikhar26 (next)

@shreyasikhar26
5 months ago

Latest patch file with changes suggested by @costdev

@shreyasikhar26
5 months ago

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

#6 follow-up: @costdev
5 months 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-ups: @shreyasikhar26
5 months 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 5 months ago by shreyasikhar26 (previous) (diff)

#8 in reply to: ↑ 7 @shreyasikhar26
5 months ago

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

Last edited 5 months ago by shreyasikhar26 (previous) (diff)

#9 @SergeyBiryukov
4 months ago

  • Component changed from General to Themes

#10 in reply to: ↑ 7 @SergeyBiryukov
4 months ago

Replying to shreyasikhar26:

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 ?

Thanks for the PR! I don't think a horizontal scrollbar is necessary here, as one can simply collapse the sidebar to preview the theme. The way I see it, this ticket is more about the preview being squashed when the sidebar is open, rather than being able to really preview the theme on a small screen with the sidebar open.

Of course, this can always be reconsidered later if someone feels strongly either way.

Last edited 4 months ago by SergeyBiryukov (previous) (diff)

#11 @SergeyBiryukov
4 months ago

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

In 52647:

Themes: Correct the width of theme preview on Add Themes screen.

This ensures that the preview ratio remains accurate for the user's screen size when the sidebar is open.

Follow-up to [19995], [20110], [20133], [20138], [28033].

Props shreyasikhar26, costdev, sumitsingh, SergeyBiryukov.
Fixes #54764.

Note: See TracTickets for help on using tickets.