Customizer: Improve small-screen styles in Widgets panel

[melchoyce]

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.

[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)?

[melchoyce]

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]

Improved button spacing

[mrahmadawais]

FIX: Button Spacing for Image Media Widget on Small Screens

[mrahmadawais]

@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.

[mrahmadawais]

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

[mrahmadawais]

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)

Cheers!

[melchoyce]

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).

[mrahmadawais]

@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

AFTER

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.

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

[mrahmadawais]

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

[melchoyce]

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]

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

[mrasharirfan]

Hey @melchoyce @mrahmadawais 👋

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

Related Screenshot:

Cheers!

[melchoyce]

Thanks @mrasharirfan!

[melchoyce]

In 41602:

Customizer: Improve small-screen styles in Widgets panel.

Props mrasharirfan, mrahmadawais.
Fixes #41614.

[celloexpressions]

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.

[melchoyce]

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

[mrasharirfan]

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

[melchoyce]

Replying to mrasharirfan:

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

Thanks!

[mrasharirfan]

Replaced the generic core class with widget specific classes.

[mrasharirfan]

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

[celloexpressions]

41614.6.diff​ looks good to me.

[melchoyce]

In 41837:

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

Props mrasharirfan, celloexpressions.
Fixes #41614.