WordPress.org

Make WordPress Core

#41614 closed defect (bug) (fixed)

Customizer: Improve small-screen styles in Widgets panel

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

Description

Some things I've noticed:

  • Image widget buttons poorly spaced on smaller screens
  • "Add a widget" button and "reorder" are misaligned
  • Widgets list has awkward spacing; could be condensed

Attaching a bunch of examples to this point.

Attachments (14)

Screen Shot 2017-08-11 at 11.34.43 AM.png (491.2 KB) - added by melchoyce 22 months ago.
Screen Shot 2017-08-11 at 11.34.54 AM.png (461.6 KB) - added by melchoyce 22 months ago.
Screen Shot 2017-08-11 at 11.35.10 AM.png (95.0 KB) - added by melchoyce 22 months ago.
Screen Shot 2017-08-11 at 11.35.19 AM.png (133.0 KB) - added by melchoyce 22 months ago.
better spacing.png (535.6 KB) - added by melchoyce 22 months ago.
41614.diff (1.1 KB) - added by mrasharirfan 22 months ago.
Improved button spacing
41614.2.diff (428 bytes) - added by mrahmadawais 22 months ago.
FIX: Button Spacing for Image Media Widget on Small Screens
41614.3.diff (778 bytes) - added by mrahmadawais 22 months ago.
FIX: Button Spacing for Image Media Widget & Widget List Margin on Small Screens
Screen Shot 2017-08-18 at 1.31.36 PM.png (477.3 KB) - added by melchoyce 22 months ago.
41614.4.diff (1.3 KB) - added by mrahmadawais 21 months ago.
FIX: Button Spacing for Image Media Widget & Widget List Margin on Small/Tab Screens
before-patch4.png (313.8 KB) - added by melchoyce 21 months ago.
after-patch4.png (317.9 KB) - added by melchoyce 21 months ago.
41614.5.diff (1.8 KB) - added by mrasharirfan 21 months ago.
Improved spacing of Reorder button and '+' icon in the Add a Widget button.
41614.6.diff (644 bytes) - added by mrasharirfan 20 months ago.
Replaced the generic core class with widget specific classes.

Change History (36)

#1 follow-up: @westonruter
22 months ago

  • Keywords good-first-bug needs-patch added

Image widget buttons poorly spaced on smaller screens

Do you mean there is a lack of adequate margin between the image/placeholder and button(s)?

#2 in reply to: ↑ 1 @melchoyce
22 months ago

Replying to westonruter:

Image widget buttons poorly spaced on smaller screens

Do you mean there is a lack of adequate margin between the image/placeholder and button(s)?

Yes, see the attachment I just added for an example of the kind of spacing it should have. (This is probably just a media widget issue, now that I'm looking again.)

@mrasharirfan
22 months ago

Improved button spacing

#3 @mrasharirfan
22 months ago

  • Keywords has-patch added; needs-patch removed

#4 @westonruter
22 months ago

  • Keywords good-first-bug removed
  • Milestone changed from Awaiting Review to 4.9
  • Owner set to melchoyce
  • Status changed from new to reviewing

@mrahmadawais
22 months ago

FIX: Button Spacing for Image Media Widget on Small Screens

#5 @mrahmadawais
22 months ago

@melchoyce @westonruter @mrasharirfan

Looks like the margin-bottom property was messing things around. So, I added margin-top: 12px; as per the standard spacing in other places like the fourth image you shared. So, for now, it looks great!

Looking into improving the spacing for the widget list. It does look weird.

https://i.imgur.com/VwIfF3X.png

https://i.imgur.com/HFaWfZQ.png

Last edited 22 months ago by mrahmadawais (previous) (diff)

@mrahmadawais
22 months ago

FIX: Button Spacing for Image Media Widget & Widget List Margin on Small Screens

#6 @mrahmadawais
22 months ago

OK, found the bug! It was a bottom margin !important on div.widget class for a media query below 480px.

Looks a lot better now.

Complimentary gif for before (more/bad space) after (magin-bottom:0)

https://i.imgur.com/P6BbuOB.gif

Cheers!

#7 @melchoyce
22 months ago

Thanks @mrahmadawais :)

I noticed that there's still some spacing issues in in-between points, like in Shot 2017-08-18 at 1.31.36 PM.png, which is between ~664–774px.

I also noticed that once it hits 774px and lower in Chrome on OSX, the spacing between the buttons disappears.

FIX: Button Spacing for Image Media Widget & Widget List Margin on Small Screens

This looks good 👍 Happy for that to go in as-is, though it might also be nice to try decreasing the vertical padding overall to something like 15px 15px 15px 60px to save space. The touch-target would still be about 66px, which is above the recommended minimum size on iOS (44px).

#8 @mrahmadawais
21 months ago

@melchoyce coming back to it now.

I noticed that there's still some spacing issues in in-between points, like in Shot 2017-08-18 at 1.31.36 PM.png, which is between ~664–774px.

I just fixed that, all addressed the 782px media query and it looks all good now.

BEFORE

http://on.ahmda.ws/me8P/c

AFTER
http://on.ahmda.ws/mfBS/c

though it might also be nice to try decreasing the vertical padding overall to something like 15px 15px 15px 60px to save space. The touch-target would still be about 66px, which is above the recommended minimum size on iOS (44px).

Right. It's 68px high. I just did that as well.

This is how it looks now.

http://on.ahmda.ws/meIQ/c

@melchoyce Go ahead and commit this one. It looks good to me. 👍

Last edited 21 months ago by mrahmadawais (previous) (diff)

@mrahmadawais
21 months ago

FIX: Button Spacing for Image Media Widget & Widget List Margin on Small/Tab Screens

#9 @melchoyce
21 months ago

Thanks @mrahmadawais 👍

I noticed one bug in the current patch: the "reorder" button becomes misaligned with the change in space between widgets. See before-patch4.png and after-patch4.png.

(The + Add a Widget label inside the button is also misaligned, but that's the same as it is now... however if someone wanted to fix that it would make me very happy 🙂 )

@mrasharirfan
21 months ago

Improved spacing of Reorder button and '+' icon in the Add a Widget button.

#10 @mrasharirfan
21 months ago

Hey @melchoyce @mrahmadawais 👋

I have improved the spacing of Reorder Button and + icon in the Add a Widget button 🙂

Related Screenshot:
https://i.imgur.com/SR6OAMX.png

Cheers!

Last edited 21 months ago by mrasharirfan (previous) (diff)

#11 @melchoyce
21 months ago

Thanks @mrasharirfan!

#12 @melchoyce
21 months ago

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

In 41602:

Customizer: Improve small-screen styles in Widgets panel.

Props mrasharirfan, mrahmadawais.
Fixes #41614.

This ticket was mentioned in Slack in #core-customize by celloexpressions. View the logs.


21 months ago

#14 @celloexpressions
21 months ago

  • Keywords needs-patch added; has-patch removed
  • Resolution fixed deleted
  • Status changed from closed to reopened

See slack comment linked above - margin changes on buttons scoped (essentially) only to .wp-customizer are very likely to cause layout breakage elsewhere. Suggest only changing properties on widget-specific classes to fix the issues noted in this ticket, and reverting changes to .wp-core-ui.wp-customizer .button and related generic selectors.

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


20 months ago

#16 @melchoyce
20 months ago

@mrasharirfan @mrahmadawais Would either of you be interested in taking a second look at this, based on @celloexpressions' comment?

#17 follow-up: @mrasharirfan
20 months ago

@melchoyce Yes, I will take a look at it today.

#18 in reply to: ↑ 17 @melchoyce
20 months ago

Replying to mrasharirfan:

@melchoyce Yes, I will take a look at it today.

Thanks!

@mrasharirfan
20 months ago

Replaced the generic core class with widget specific classes.

#19 @mrasharirfan
20 months ago

I have replaced the generic core class, .wp-core-ui.wp-customizer .button with widget specific classes. And they are working fine. Hope this solves the issue raised by @celloexpressions

Last edited 20 months ago by mrasharirfan (previous) (diff)

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


20 months ago

#21 @celloexpressions
20 months ago

  • Keywords has-patch added; needs-patch removed

41614.6.diff looks good to me.

#22 @melchoyce
20 months ago

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

In 41837:

Customizer: Improve specificity of small-screen styles in Widgets panel.

Props mrasharirfan, celloexpressions.
Fixes #41614.

Note: See TracTickets for help on using tickets.