Opened 21 months ago

Closed 21 months ago

Last modified 21 months ago

#27743 closed Cleanup/optimization (fixed)

CSS fix of "viewsitelink", "golink" and "addlink" buttons for Django admin

Reported by: Nick Mavrakis Owned by: nobody
Component: contrib.admin Version: master
Severity: Normal Keywords: admin, css, background-position, icon
Cc: elky Triage Stage: Accepted
Has patch: yes Needs documentation: no
Needs tests: no Patch needs improvement: no
Easy pickings: no UI/UX: yes

Description

This is a minor fix but, in my opinion, its very helpful!

Inside the Django admin change list page, in the upper right corner (ADD OBJECT button), if the text is too long then the "+" icon overlaps the text as you can see in the image. This is due to the background-position: 93% center (https://github.com/django/django/blob/master/django/contrib/admin/static/admin/css/base.css#L741).

PROPOSED FIX: Because background-position can take up to 4 values due to background position edge offsets (http://caniuse.com/#feat=css-background-offsets), we can change the above line to:

background-position: right 7px center;

The same applies to the other button, VIEW ON SITE (https://docs.djangoproject.com/en/dev/ref/contrib/admin/#django.contrib.admin.ModelAdmin.view_on_site), as well.

Attachments (1)

icon_not_align_right.png (27.7 KB) - added by Nick Mavrakis 21 months ago.
django admin list display view, "+" icon overlaps text

Download all attachments as: .zip

Change History (7)

Changed 21 months ago by Nick Mavrakis

Attachment: icon_not_align_right.png added

django admin list display view, "+" icon overlaps text

comment:1 Changed 21 months ago by Tim Graham

Cc: elky added
Easy pickings: unset
Triage Stage: UnreviewedAccepted

ekly, could you review? Nick, could you create a pull request?

comment:2 Changed 21 months ago by elky

background-position: right 7px center; fix is totally fine. It will work well in all major browsers.

comment:3 Changed 21 months ago by Nick Mavrakis

Sure. I'll make a PR this afternoon!

comment:4 Changed 21 months ago by Nick Mavrakis

Pull request created (https://github.com/django/django/pull/7914). Thank you!

comment:5 Changed 21 months ago by Tim Graham <timograham@…>

Resolution: fixed
Status: newclosed

In e5c2e43:

Fixed #27743 -- Prevented admin's "+" button icon from overlapping its label.

comment:6 Changed 21 months ago by Tim Graham <timograham@…>

In fb55247d:

[1.11.x] Fixed #27743 -- Prevented admin's "+" button icon from overlapping its label.

Backport of e5c2e43cc832028a974399af07a1c3ba6afa2467 from master

Note: See TracTickets for help on using tickets.
Back to Top