Update admin buttons to use CSS rounded corners

[Pedro Mourelle <pedromagnus@…>]

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.

[Aymeric Augustin]

Absolutely — this defect is noticeable on hipster-displays (aka retina).

[Pedro Mourelle <pedromagnus@…>]

Patch in pull-request: ​https://github.com/django/django/pull/845

[Claude Paroz]

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).

[Pedro Mourelle <pedromagnus@…>]

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.

[Aymeric Augustin]

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.

[Pedro Mourelle <pedromagnus@…>]

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.

[matiasb]

Screenshot from IE8.

[Idan Gazit]

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:

1. 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.

2. 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.

[pedromagnus]

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.

[loic84]

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?

[Aymeric Augustin]

I'm not comfortable with dropping support for IE7 yet.

Can we try option 2 -- the SVG with PNG fallback?

[Tim Graham]

The discussion suggests that this is not actually RFC.

[Tim Graham]

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?

[Aymeric Augustin]

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.

[Tim Graham <timograham@…>]

In fb052b528ad5f0a92f7420ab8ade16462b6435fd:

Fixed #19900 -- Updated admin buttons to use CSS3 rounded corners.