WordPress.org

Make WordPress Core

Opened 6 months ago

Closed 6 weeks ago

#46941 closed defect (bug) (fixed)

Need to add 5px space in selected admin widget items

Reported by: ketanumretiya030 Owned by: audrasjb
Milestone: 5.3 Priority: normal
Severity: normal Version:
Component: Widgets Keywords: has-screenshots has-patch
Focuses: ui, administration Cc:
PR Number:

Description

On mobile view display widget item very close to each other need to add some space between two widget item.

Attachments (8)

widget.png (37.4 KB) - added by ketanumretiya030 6 months ago.
Widget mobiel view
46941.diff (283 bytes) - added by mukesh27 6 months ago.
Patch.
46941.patch (365 bytes) - added by mukesh27 6 months ago.
Updated patch.
Capture d’écran 2019-08-16 à 23.58.53.png (31.0 KB) - added by audrasjb 2 months ago.
46941.2.diff result
9587a380e85775cc6bbc5166aaabc786.gif (112.0 KB) - added by audrasjb 2 months ago.
46941.2.diff (434 bytes) - added by audrasjb 2 months ago.
Patch refresh and CSS small declaration changes
46941.3.diff (300 bytes) - added by afercia 7 weeks ago.
a5de79bcab0bdde9f9f9c7484c5d876d.gif (122.6 KB) - added by audrasjb 7 weeks ago.
46941.3.diff

Download all attachments as: .zip

Change History (23)

@ketanumretiya030
6 months ago

Widget mobiel view

#1 @SergeyBiryukov
6 months ago

  • Component changed from General to Widgets
  • Focuses ui administration added

@mukesh27
6 months ago

Patch.

#2 @mukesh27
6 months ago

  • Keywords has-patch has-screenshots added

Need to remove margin from class div.widget in 480px media query.

#3 @SergeyBiryukov
6 months ago

  • Keywords needs-design-feedback added
  • Summary changed from Need to add 5px space in selected admin widge items to Need to add 5px space in selected admin widget items

#4 @desrosj
6 months ago

  • Version set to 3.8.1

#5 @afercia
6 months ago

  • Keywords needs-refresh added; needs-design-feedback removed

See also #42001.

Some widgets have an "extra wide" interface which is discussed in #42001. For now, the left and right margins shouldn't be changed.

However, the top and bottom margin shouldn't be reset to 0. It's not about design, it's a functional thing: when dragging a widget, the other widgets "jump" because the dashed "placeholder" has some margin:

http://cldup.com/d_w7BD28ZA.png

This "jump" should be avoided. @mukesh27 approach looks good but instead of removing the margin property entirely I'd suggest to keep margin-left and margin-right to auto !important.

@mukesh27
6 months ago

Updated patch.

#6 @mukesh27
6 months ago

  • Keywords needs-refresh removed

#7 @andraganescu
6 months ago

  • Keywords commit added
  • Version changed from 3.8.1 to trunk

Good work @mukesh27 the updated patch works very good!

#8 @SergeyBiryukov
6 months ago

  • Milestone changed from Awaiting Review to 5.3
  • Version trunk deleted

Removing the trunk version, as this doesn't seem to be a regression in 5.2.

#9 @audrasjb
5 months ago

  • Keywords commit removed
  • Owner set to audrasjb
  • Status changed from assigned to reviewing

Removing commit keyword as this patch still needs some review. Putting this one on my list :-)

#10 @audrasjb
2 months ago

I refreshed the patch with a full margin declaration and a 5px margin bottom (see screenshot below).

@audrasjb
2 months ago

46941.2.diff result

#11 @audrasjb
2 months ago

  • Status changed from reviewing to accepted

@afercia the last patch fix the margin gap (see animated screenshot below).
I also removed the !important declaration since it works well without using it.

@audrasjb
2 months ago

Patch refresh and CSS small declaration changes

@afercia
7 weeks ago

#12 @afercia
7 weeks ago

I'd tend to think the margin shouldn't be reduced from the original 10 pixels to 5 pixels. Especially on small screens, having more margin helps touch interaction to better target the right widget.

Looking a bit better into this, the breaking change comes from [41602] / #41614. At that time, the !important made the declaration conflict with the desired styling within the Customizer. Instead of adding CSS to fix this, seems to me it's better to remove the declaration. The necessary margin is already inherited from the desktop view styles.

Some quick testing of 46941.3.diff would be nice :) Please also check the widgets panel in the Customizer.

#13 @audrasjb
7 weeks ago

Alright @afercia , I tested 46941.3.diff (see animated screenshot above) and it's even better 👍

#14 @mukesh27
6 weeks ago

@afercia 46941.3.diff patch works fine for me also.

#15 @afercia
6 weeks ago

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

In 46028:

Widgets: Fix "jumpiness" when reordering widgets by dragging them.

Props ketanumretiya030, mukesh27, andraganescu, audrasjb.
Fixes #46941.

Note: See TracTickets for help on using tickets.