WordPress.org

Make WordPress Core

Opened 5 weeks ago

Closed 5 weeks ago

Last modified 12 days ago

#42215 closed defect (bug) (fixed)

Some minor UI issues in theme's panel in small screen

Reported by: sayedwp Owned by: celloexpressions
Milestone: 4.9 Priority: normal
Severity: normal Version: 4.9
Component: Customize Keywords: has-patch
Focuses: ui Cc:

Description

1. "Filter Themes" button goes down in small screen.

https://user-images.githubusercontent.com/6297436/31561176-ad0e4078-b074-11e7-96ec-2786250ef32e.png

2. "Preview and Install" button is not vertically aligned with the same space on top and bottom in small screen.

https://user-images.githubusercontent.com/6297436/31561240-dc4cc404-b074-11e7-947f-b1aaf6f2d736.png

3. This is more of a suggestion that the search should match the widget search style.

So this should have an icon

https://user-images.githubusercontent.com/6297436/31561361-3e194fea-b075-11e7-8302-dda8a1ca25ca.png

like this

https://user-images.githubusercontent.com/6297436/31561430-723eba3a-b075-11e7-9566-e351c8a13602.png

4. The navigation arrow not vertically aligned in small screen

https://user-images.githubusercontent.com/6297436/31561570-f63075ea-b075-11e7-86a2-6a36a0dae311.png

Attachments (4)

42215.diff (5.7 KB) - added by Mahvash Fatima 5 weeks ago.
42215.1.diff (396 bytes) - added by Mahvash Fatima 5 weeks ago.
42215.2.diff (10.2 KB) - added by Mahvash Fatima 5 weeks ago.
42215.3.diff (10.4 KB) - added by Mahvash Fatima 5 weeks ago.

Download all attachments as: .zip

Change History (16)

#1 @westonruter
5 weeks ago

  • Keywords needs-patch added
  • Milestone changed from Awaiting Review to 4.9
  • Owner set to celloexpressions
  • Status changed from new to assigned

@Mahvash Fatima
5 weeks ago

#2 @Mahvash Fatima
5 weeks ago

I found one more issue in theme's panel on small screen. There is no padding on the right side in theme list. 42215.1.diff is to fix that.

https://user-images.githubusercontent.com/12367607/31574772-d991f610-b0f3-11e7-9ae2-7ae25e989780.png

#3 @melchoyce
5 weeks ago

This is looking really good @Mahvash Fatima, thanks for adding your patches.

I noticed some things that still needs to be tweaked:

  • The background behind the "live preview" button on smaller screens. When the buttons become larger at one of the small screen media queries, the background behind them pushes up into the border: https://cloudup.com/c2_cwJab15E
  • There also seems to be a period where the border on the sidebar disappears, along with the "help" icon and toggles: https://cloudup.com/iMEku6VEKJ2

@celloexpressions would you also be able to give this patch a review?

#4 @celloexpressions
5 weeks ago

42215.1.diff and 42215.diff look like a good first pass. I think we need to refine the adjustments a bit more - the buttons still look a couple of pixels too low or high in some places.

The background behind the "live preview" button on smaller screens. When the buttons become larger at one of the small screen media queries, the background behind them pushes up into the border: https://cloudup.com/c2_cwJab15E

We may also want to move the buttons below the theme names - it doesn't look like there's enough space there currently one you get down to phone sizes.

There also seems to be a period where the border on the sidebar disappears, along with the "help" icon and toggles: https://cloudup.com/iMEku6VEKJ2

It looks like there are conflicts (likely due to other changes) between 600px and 640px being the width breakpoint where we switch to a single-column layout with a toggle for the preview area. Themes are using 600px currently, which used to be what the customize sidebar used as well. That seems to have changed recently, causing this bug. However, the sidebar also has a max-width of 600px. So that other change should probably be reverted, or otherwise revisited, to ensure that the single-column layout is used starting at 600px everywhere.

#5 @Mahvash Fatima
5 weeks ago

I have made the required changes. Please see the attached patch.

#6 @melchoyce
5 weeks ago

  • Keywords has-patch added; needs-patch removed
  • Status changed from assigned to reviewing

#7 @melchoyce
5 weeks ago

Latest patch looks good to me 👍

#8 @westonruter
5 weeks ago

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

In 41893:

Customize: Improve theme browsing UI on small screens.

Props Mahvash-Fatima, melchoyce, celloexpressions.
See #37661.
Fixes #42215.

#9 @westonruter
5 weeks ago

In 41949:

Customize: Fix alignment of Customize, Activate, and Live Preview buttons appearing on the Themes admin screen.

Amends [41893].
Props Mahvash-Fatima.
See #42215.
Fixes #42275.

#10 @westonruter
3 weeks ago

In 42036:

Customize: Fix mobile placement of panes for available widgets and nav menu items.

Props Mahvash-Fatima.
Amends [41893].
See #42215.
Fixes #42359.

#11 @westonruter
12 days ago

In 42132:

Customize: Restore search icon to available widgets pane incorrectly removed in [41893].

See #42215.
Fixes #42472 for trunk.

#12 @westonruter
12 days ago

In 42133:

Customize: Restore search icon to available widgets pane incorrectly removed in [41893].

See #42215.
Fixes #42472 for 4.9.

Note: See TracTickets for help on using tickets.