Make WordPress Core

Opened 7 years ago

Closed 7 years ago

#41614 closed defect (bug) (fixed)

Customizer: Improve small-screen styles in Widgets panel

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

Change History (36)

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

Improved button spacing

#3 @mrasharirfan
7 years ago

  • Keywords has-patch added; needs-patch removed

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

FIX: Button Spacing for Image Media Widget on Small Screens

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

@mrahmadawais
7 years ago

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

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

@mrahmadawais
7 years ago

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

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

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

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

#11 @melchoyce
7 years ago

Thanks @mrasharirfan!

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


7 years ago

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


7 years ago

#16 @melchoyce
7 years ago

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

#17 follow-up: @mrasharirfan
7 years ago

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

#18 in reply to: ↑ 17 @melchoyce
7 years ago

Replying to mrasharirfan:

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

Thanks!

@mrasharirfan
7 years ago

Replaced the generic core class with widget specific classes.

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

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


7 years ago

#21 @celloexpressions
7 years ago

  • Keywords has-patch added; needs-patch removed

41614.6.diff looks good to me.

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