WordPress.org

Make WordPress Core

Opened 4 months ago

Closed 2 months ago

#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 4 months ago.
Screen Shot 2017-08-11 at 11.34.54 AM.png (461.6 KB) - added by melchoyce 4 months ago.
Screen Shot 2017-08-11 at 11.35.10 AM.png (95.0 KB) - added by melchoyce 4 months ago.
Screen Shot 2017-08-11 at 11.35.19 AM.png (133.0 KB) - added by melchoyce 4 months ago.
better spacing.png (535.6 KB) - added by melchoyce 4 months ago.
41614.diff (1.1 KB) - added by mrasharirfan 4 months ago.
Improved button spacing
41614.2.diff (428 bytes) - added by mrahmadawais 4 months ago.
FIX: Button Spacing for Image Media Widget on Small Screens
41614.3.diff (778 bytes) - added by mrahmadawais 4 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 4 months ago.
41614.4.diff (1.3 KB) - added by mrahmadawais 3 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 3 months ago.
after-patch4.png (317.9 KB) - added by melchoyce 3 months ago.
41614.5.diff (1.8 KB) - added by mrasharirfan 3 months ago.
Improved spacing of Reorder button and '+' icon in the Add a Widget button.
41614.6.diff (644 bytes) - added by mrasharirfan 2 months ago.
Replaced the generic core class with widget specific classes.

Change History (36)

#1 follow-up: @westonruter
4 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
4 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
4 months ago

Improved button spacing

#3 @mrasharirfan
4 months ago

  • Keywords has-patch added; needs-patch removed

#4 @westonruter
4 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
4 months ago

FIX: Button Spacing for Image Media Widget on Small Screens

#5 @mrahmadawais
4 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 4 months ago by mrahmadawais (previous) (diff)

@mrahmadawais
4 months ago

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

#6 @mrahmadawais
4 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
4 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
3 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 3 months ago by mrahmadawais (previous) (diff)

@mrahmadawais
3 months ago

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

#9 @melchoyce
3 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
3 months ago

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

#10 @mrasharirfan
3 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 3 months ago by mrasharirfan (previous) (diff)

#11 @melchoyce
3 months ago

Thanks @mrasharirfan!

#12 @melchoyce
3 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.


3 months ago

#14 @celloexpressions
3 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.


2 months ago

#16 @melchoyce
2 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
2 months ago

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

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

Replying to mrasharirfan:

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

Thanks!

@mrasharirfan
2 months ago

Replaced the generic core class with widget specific classes.

#19 @mrasharirfan
2 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 2 months ago by mrasharirfan (previous) (diff)

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


2 months ago

#21 @celloexpressions
2 months ago

  • Keywords has-patch added; needs-patch removed

41614.6.diff looks good to me.

#22 @melchoyce
2 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.