Opened 11 years ago

Closed 11 years ago

#19900 closed Cleanup/optimization (fixed)

Update admin buttons to use CSS rounded corners

Reported by: Pedro Mourelle <pedromagnus@…> 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.

http://dl.dropbox.com/u/26036998/Captura%20de%20pantalla%202013-02-23%20a%20las%2016.19.05.png

Attachments (1)

ie8_square_borders.png (2.6 KB ) - added by matiasb 11 years ago.
Screenshot from IE8.

Download all attachments as: .zip

Change History (18)

comment:1 by Pedro Mourelle <pedromagnus@…>, 11 years ago

Owner: changed from nobody to anonymous
Status: newassigned

comment:2 by Aymeric Augustin, 11 years ago

Triage Stage: UnreviewedAccepted

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

comment:3 by Pedro Mourelle <pedromagnus@…>, 11 years ago

Has patch: set
Type: UncategorizedCleanup/optimization

comment:4 by Claude Paroz, 11 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 Pedro Mourelle <pedromagnus@…>, 11 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 Aymeric Augustin, 11 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 Pedro Mourelle <pedromagnus@…>, 11 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.

by matiasb, 11 years ago

Attachment: ie8_square_borders.png added

Screenshot from IE8.

comment:8 by Ramiro Morales, 11 years ago

Triage Stage: AcceptedReady for checkin

comment:9 by Idan Gazit, 11 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:

  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.
  1. 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 pedromagnus, 11 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 loic84, 11 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 Aymeric Augustin, 11 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 Tim Graham, 11 years ago

Patch needs improvement: set
Triage Stage: Ready for checkinAccepted

The discussion suggests that this is not actually RFC.

comment:14 by Tim Graham, 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?

in reply to:  14 comment:15 by Aymeric Augustin, 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 Tim Graham, 11 years ago

Patch needs improvement: unset
Summary: Upgrade admin buttonsUpdate admin buttons to use CSS rounded corners

comment:17 by Tim Graham <timograham@…>, 11 years ago

Resolution: fixed
Status: assignedclosed

In fb052b528ad5f0a92f7420ab8ade16462b6435fd:

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

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