Make WordPress Core

Opened 2 years ago

Last modified 21 months ago

#54764 reopened defect (bug)

UI issue in mobile device on add new theme page

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

Download all attachments as: .zip

Change History (22)

@sumitsingh
2 years ago

UI issue in mobile device on add new theme page

#1 @costdev
2 years 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
2 years ago

patch file to fix the issue

#2 @shreyasikhar26
2 years ago

  • Keywords has-patch added; needs-patch removed

@shreyasikhar26
2 years ago

Screenshot after applying the changes from the patch

#4 @shreyasikhar26
2 years ago

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

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

@shreyasikhar26
2 years ago

Latest patch file with changes suggested by @costdev

@shreyasikhar26
2 years ago

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

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

#8 in reply to: ↑ 7 @shreyasikhar26
2 years ago

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

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

#9 @SergeyBiryukov
2 years ago

  • Component changed from General to Themes

#10 in reply to: ↑ 7 @SergeyBiryukov
2 years 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 2 years ago by SergeyBiryukov (previous) (diff)

#11 @SergeyBiryukov
2 years 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.

#13 follow-up: @joyously
21 months ago

This fix caused other problems. See https://meta.trac.wordpress.org/ticket/6376

#14 in reply to: ↑ 13 @SergeyBiryukov
21 months ago

Replying to joyously:

This fix caused other problems. See https://meta.trac.wordpress.org/ticket/6376

Thanks for catching that! Since this ticket was closed on a completed milestone, let's continue in #56097.

#15 @SergeyBiryukov
21 months ago

In 53663:

Themes: Revert the change of theme preview width on Add Themes screen.

The intention was for the preview ratio to remain accurate for the user's screen size when the sidebar is open, but this appears to have caused unintended side effects to the preview alignment.

Follow-up to [52647].

Props superbthemescom, Presskopp.
Fixes #56097. See #54764.

#16 @SergeyBiryukov
21 months ago

In 53664:

Themes: Revert the change of theme preview width on Add Themes screen.

The intention was for the preview ratio to remain accurate for the user's screen size when the sidebar is open, but this appears to have caused unintended side effects to the preview alignment.

Follow-up to [52647].

Props superbthemescom, Presskopp.
Merges [53663] to the 6.0 branch.
Fixes #56097. See #54764.

#17 @SergeyBiryukov
21 months ago

  • Keywords good-first-bug commit removed
  • Milestone changed from 6.0 to Future Release
  • Resolution fixed deleted
  • Status changed from closed to reopened

Reopening, as this was reverted in the commits above.

A new patch and more testing is needed to avoid the issues raised in #56097.

Note: See TracTickets for help on using tickets.