WordPress.org

Make WordPress Core

Opened 3 months ago

Last modified 5 weeks ago

#43586 new enhancement

Minor UI adjustments to the Author box in the Edit Comment screen

Reported by: birgire Owned by:
Milestone: 5.0 Priority: low
Severity: normal Version:
Component: Comments Keywords: ui-feedback has-screenshots good-first-bug has-patch
Focuses: ui, administration Cc:

Description

Here are few suggestions for the Author box in the Edit Comment screen:

  • Add an underline for the Author title (like in meta-box headers).
  • Remove the colons as they are not (usually?) used before inputs in wp-admin.
  • Adjust the padding/margin, similar to other meta-boxes.

Location example: /wp-admin/comment.php?action=editcomment&c=123

Attachments (14)

author-before.jpg (24.7 KB) - added by birgire 3 months ago.
author-after.jpg (24.0 KB) - added by birgire 3 months ago.
43586_1.diff (446 bytes) - added by abdullahramzan 3 months ago.
43586_2.diff (604 bytes) - added by abdullahramzan 3 months ago.
43586_3.diff (609 bytes) - added by abdullahramzan 3 months ago.
Balance the top bottom padding.
43586.diff (1.7 KB) - added by rhetorical 3 months ago.
43586.4.diff (1.7 KB) - added by rhetorical 3 months ago.
43586.5.diff (1.9 KB) - added by rhetorical 3 months ago.
43586.6.diff (2.9 KB) - added by rhetorical 3 months ago.
author-box-with-43586.6.diff.jpg (19.6 KB) - added by birgire 3 months ago.
author-box-in-mobile-viewport-with-43586.6.diff.jpg (21.6 KB) - added by birgire 3 months ago.
author-box-10px-padding.jpg (19.7 KB) - added by birgire 3 months ago.
43586.7.diff (3.3 KB) - added by rhetorical 3 months ago.
author-box-in-mobile-viewport-with-43586.7.diff.jpg (26.4 KB) - added by rhetorical 3 months ago.

Download all attachments as: .zip

Change History (30)

@birgire
3 months ago

#1 @birgire
3 months ago

  • Keywords has-screenshots added

The author-before.jpg screenshot shows the current layout.

The author-after.jpg shows a mockup example.

#2 @melchoyce
3 months ago

  • Keywords needs-patch good-first-bug added

This looks way better. Adding a divider and adjusting the spacing makes the form fields much more grounded in the container.

#3 @birgire
3 months ago

@melchoyce thanks for the feedback, I'm also creating a similar ticket for the Status box ;-)

#5 @abdullahramzan
3 months ago

  • Keywords has-patch added; needs-patch removed

Added following two patches:

  • 43586_1.diff for horizontal line.
  • 43586_2.diff for style.

@abdullahramzan
3 months ago

Balance the top bottom padding.

#6 @abdullahramzan
3 months ago

Added 43586_3.diff to balance the top bottom padding according to the design. Consider 43586_3.diff and discard the 43586_1.diff

#7 @birgire
3 months ago

Thanks for the patches @abdullahramzan

Removing the <br /> looks good, but I'm not sure we should add a new <hr> tag for the underline. It seems to be more common to use e.g.:

border-bottom: 1px solid #eee;

as we can see for the meta-boxes.

It's also more convenient to have a single patch, to make it easier for others to test.

@rhetorical
3 months ago

@rhetorical
3 months ago

#8 @rhetorical
3 months ago

@birgire, sorry I did not realize that I there were tickets already uploaded. I have uploaded it with the correct diff numbering no please ignore my first one.

In regards to the margins for the the "Author" information, I've kept the left margin inline with the form fields. Please let me know if there are any questions.

#9 @SergeyBiryukov
3 months ago

  • Milestone changed from Awaiting Review to 5.0

@rhetorical
3 months ago

#10 @rhetorical
3 months ago

better left padding fix on new 43586.5.diff

#11 @birgire
3 months ago

Thanks for the patch @rhetorical

I tested 43586.5.diff.

In regards to the margins for the the "Author" information, I've kept the left margin inline with the form fields.

I like it.

I think it would also be nicer if the amount of white space (around the form, below the border line) would be the same at top/bottom/left/right. What do you think?

But note that the patch also modifies all the meta-boxes on the post edit screen too. So that need to be avoided.

@rhetorical
3 months ago

#12 @rhetorical
3 months ago

Thanks for the review @birgire.

I agree with the changes on the white space around the form. I've made the adjustments there.

I've also updated the css so that I don't modify the meta-boxes css.

Let me know what you think or if you think anything else needs to be changed.

Thanks!

#13 @birgire
3 months ago

@rhetorical thanks for the update.

I noticed that the h2 header in meta-boxes have padding: 8px 12px but the content of (some) meta-boxes have padding: 10px.

I therefore wonder if the surrounding padding should also be 10px here, like shown in author-box-10px-padding.jpg, compared to the current layout from the 43586.6.diff patch: author-box-with-43586.6.diff.jpg

The mobile viewport needs adjustments (see author-box-in-mobile-viewport-with-43586.6.diff.jpg

#14 @rhetorical
3 months ago

@birgire thanks for the comments.

I believe you're right about the padding it should be 10px, I measured the padding on the form and 10 would align it perfectly left with the label.

In regards to the overall padding, textfields have a width of 98 percent, in general they would never meet up with the right padding. Should I make a special exception for this form only just so they match up with the 10px margin?

I'll also take a look at the mobile viewport, forgot about that one.

@rhetorical
3 months ago

#15 @rhetorical
3 months ago

I updated the padding to the 10px and adjusted the mobile viewport. I tried to match that up closely to the padding on the "quick-editor" comment form.

#16 in reply to: ↑ description @iticiti
5 weeks ago

Last edited 5 weeks ago by iticiti (previous) (diff)
Note: See TracTickets for help on using tickets.