Opened 3 years ago

Closed 2 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 2 years ago.
Screenshot from IE8.

Download all attachments as: .zip

Change History (18)

comment:1 Changed 3 years ago by Pedro Mourelle <pedromagnus@…>

  • Needs documentation unset
  • Needs tests unset
  • Owner changed from nobody to anonymous
  • Patch needs improvement unset
  • Status changed from new to assigned

comment:2 Changed 3 years ago by aaugustin

  • Triage Stage changed from Unreviewed to Accepted

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

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

  • Has patch set
  • Type changed from Uncategorized to Cleanup/optimization

comment:4 Changed 3 years ago by claudep

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 Changed 3 years ago by 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.

comment:6 Changed 3 years ago by aaugustin

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 Changed 3 years ago by 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.

Changed 2 years ago by matiasb

Screenshot from IE8.

comment:8 Changed 2 years ago by ramiro

  • Triage Stage changed from Accepted to Ready for checkin

comment:9 Changed 2 years ago by idangazit

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 Changed 2 years ago by 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.

comment:11 Changed 2 years ago by 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?

comment:12 Changed 2 years ago by aaugustin

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

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

comment:13 Changed 2 years ago by timo

  • Patch needs improvement set
  • Triage Stage changed from Ready for checkin to Accepted

The discussion suggests that this is not actually RFC.

comment:14 follow-up: Changed 2 years ago by timo

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 in reply to: ↑ 14 Changed 2 years ago by aaugustin

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 Changed 2 years ago by timo

  • Patch needs improvement unset
  • Summary changed from Upgrade admin buttons to Update admin buttons to use CSS rounded corners

comment:17 Changed 2 years ago by Tim Graham <timograham@…>

  • Resolution set to fixed
  • Status changed from assigned to closed

In fb052b528ad5f0a92f7420ab8ade16462b6435fd:

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

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