Opened 12 years ago
Closed 11 years ago
#19900 closed Cleanup/optimization (fixed)
Update admin buttons to use CSS rounded corners
Reported by: | Owned by: | anonymous | |
---|---|---|---|
Component: | contrib.admin | Version: | |
Severity: | Normal | Keywords: | sprints-django-ar |
Cc: | Triage Stage: | Accepted | |
Has patch: | yes | Needs documentation: | no |
Needs tests: | no | Patch needs improvement: | no |
Easy pickings: | no | UI/UX: | yes |
Description
Top action buttons in admin are using an quite old approach. It still uses GIFs to simulate rounded borders when css is completely capable of it since years ago.
Rounded GIFs should be replaced by just css with border-radius setted.
The GIF used to render the '+' should be replaced by the real character and really simple css.
Gains:
- Zoom in/out (scalability) renders smoothly perfect without the limitation of actual image resolution because no image at all will be used.
- Simplifies further button customization, and guess why! because no image at all will be used.
Attachments (1)
Change History (18)
comment:1 by , 12 years ago
Owner: | changed from | to
---|---|
Status: | new → assigned |
comment:2 by , 12 years ago
Triage Stage: | Unreviewed → Accepted |
---|
comment:3 by , 12 years ago
Has patch: | set |
---|---|
Type: | Uncategorized → Cleanup/optimization |
Patch in pull-request: https://github.com/django/django/pull/845
comment:4 by , 12 years ago
I'm not a IE fan, but still could we know how does the new code degrade on IE < 9? Could someone make a screenshot? (I have no IE at hand).
comment:5 by , 12 years ago
To be honest, I didn't even considere IE on this (my bad). The thing is that border-radius (and its prefixed versions) works really nice and smooth. IE < 9 are the only exceptions, for those browsers the fallback would be just to be squared :/
An (awful) alternative s to use a JS like curvycurves: https://code.google.com/p/curvycorners/source/browse/trunk/curvycorners.src.js just for those IE cases.
comment:6 by , 12 years ago
I do not care too much if the buttons are square under old IEs as long as the layout doesn't break and the UI is usable.
comment:7 by , 12 years ago
Well, sadly for the example (but luckily for me) I have no IE at hand either, but border-radius fallbacks simple to not understand it, so the only difference is that corners remain squared.
comment:8 by , 12 years ago
Triage Stage: | Accepted → Ready for checkin |
---|
comment:9 by , 12 years ago
I'm fine with IE7/8 seeing cosmetic degradations and using CSS for rounded corners.
Two suggestions for improvement, neither of which need to happen for this to get checked in:
- perhaps in lieu of images we could use :after with the rightwards black arrow (➡, http://codepoints.net/U+27A1) and heavy greek cross (✚, http://codepoints.net/U+271A). Cursory glance at the affected selectors doesn't show an easy way to do this without changing markup, though.
- include SVG images with PNG fallbacks, which is a cheap way to be retina-friendly.
.object-tools a.viewsitelink, .object-tools a.golink { background: #999 url(../img/tooltag-arrowright.png) 95% center no-repeat; background: none, #999 url(../img/tooltag-arrowright.svg) 95% center no-repeat; }
Because all browsers that support SVG also support multiple BG images, so we can safely deliver SVGs using this technique.
comment:10 by , 12 years ago
Idan, great suggestions. Maybe second is easier to control when page is zoomed, although I do like the idea of having a font-icon to scale properly.
If you think one of that options should make it, then I can do it in this same ticket.
comment:11 by , 12 years ago
I've been toying around with :after
and it works without changing the markup. We do need to define how far back we want to support IE since in that case, IE7 would be missing the icon as well as the rounded corner.
Also do we really want to keep a darker background color under the icon? That bit I didn't manage yet.
Also the unicode characters that Idan suggested are rather ugly with the current admin font, it's not as polished as the current icons. If we go with this technique, could we adopt a nice graphic font such as GLYPHICONS or Font Awesome and do away with a few more icons used by the admin?
comment:12 by , 12 years ago
I'm not comfortable with dropping support for IE7 yet.
Can we try option 2 -- the SVG with PNG fallback?
comment:13 by , 12 years ago
Patch needs improvement: | set |
---|---|
Triage Stage: | Ready for checkin → Accepted |
The discussion suggests that this is not actually RFC.
follow-up: 15 comment:14 by , 11 years ago
I'd like to check this in. Can we defer the SVG/PNG issue to a separate ticket?
According to css tricks, we can probably drop the vendor prefixes for border-radius. Any objection to that?
comment:15 by , 11 years ago
Replying to timo:
I'd like to check this in. Can we defer the SVG/PNG issue to a separate ticket?
Yes, better check-in the part that works rather than let it rot.
According to css tricks, we can probably drop the vendor prefixes for border-radius. Any objection to that?
I'm in favor of not including vendor prefixes when we have a sufficient excuse to do so :) http://caniuse.com/#feat=css-boxshadow shows that recent versions of browsers don't require vendor prefixes. At worst, shadows aren't a big deal.
comment:16 by , 11 years ago
Patch needs improvement: | unset |
---|---|
Summary: | Upgrade admin buttons → Update admin buttons to use CSS rounded corners |
comment:17 by , 11 years ago
Resolution: | → fixed |
---|---|
Status: | assigned → closed |
Absolutely — this defect is noticeable on hipster-displays (aka retina).