Single approach to rounded corners

Bug #602858 reported by Paul Everitt
6
This bug affects 1 person
Affects Status Importance Assigned to Milestone
KARL3
Fix Released
Medium
JimPGlenn

Bug Description

Goals
========

1) Decrease number of loaded resources and thus speed up first-page load.

2) Have a consistent approach to rounding corners.

3) Round some corners not currently rounded.

Background
==============

KARL has rounded corners in a number of places. Some of the tabs (PEOPLE, COMMUNITIES, TAGS) have corner rounding, as do the little pillboxes that display tags on a resource. The calendar also makes heavy use of tabs.

However, we do things differently. The site tabs (PEOPLE etc.) were one of the first things implemented in KARL, and thus have a circa-2006 approach. They load small PNGs for each kind of corner. Tagboxes are rounded, but not on IE, as they use the CSS border-radius. Calendar is the most recent, and the CSS guy for that (Derek) worked hard at a sane solution.

We aren't highly motivated by how many resources are loaded: we have a versioned-URL approach that ensures all static resources are browser-cached for a very long time. Unfortunately, we have some rumors that some flavors of IE behind proxies don't obey the rules. So in the back of our minds, loading a ton of static resources is a concern.

Derek's Approach
================

As I understand it, Derek's approach is the right one. He uses border-radius where supported, and uses a well-regarded jQuery plugin for IE. There *might* be newer/better approaches since he did his around 10 months ago. But let's use his approach, as shown in calendar and new-style buttons, as the starting point.

If you find something better, deprecate his and replace.

Tasks
==========

0) Work on an svn branch.

1) Confirm Derek's approach is the best.

2) Convert any other tab approaches to use whatever is the approved method. Primarily, the site tabs. Rip out (remove from svn) old cruft: CSS rules, the little PNGs for the tab corners, etc.

3) Round things that aren't currently rounded. Tag boxes, the "sub tabs" on the PEOPLE section. Community tabs. The [GO] button on search. Any other form buttons that don't have the jQuery UI CSS Framework styling for newstyle buttons.

4) Consider changing the look/and/feel of the actions menu (add/edit/delete) making it look a bit more like Calendar's buttons. Note that in some very isolated cases (on the intranet offices side) the "add" is a pulldown.

5) Do some R&D to see if we can speed up our page loading strategy. In particular, rounding corners on IE doesn't happen until after we've loaded everything else. Can we get that moved up the ordering so that it happens faster?

Changed in karl3:
assignee: nobody → Chrissy Wainwright (chrissy)
importance: Undecided → Medium
milestone: none → m43
status: New → Confirmed
Revision history for this message
Paul Everitt (paul-agendaless) wrote :

As an FYI, Balazs is about to start a branch where he does some JS overhaul. First, he'll upgrade us to the latest jQuery and jQuery UI. Then, he'll upgrade TinyMCE.

Revision history for this message
Paul Everitt (paul-agendaless) wrote :

Moving this to M44, shouldn't have been scheduled for completion this week.

Changed in karl3:
milestone: m43 → m44
Revision history for this message
Paul Everitt (paul-agendaless) wrote :

I just realized some extra-crispy crumminess in our KARL layout. The site tabs (PEOPLE, COMMUNITIES, TAGS) are images for the entire thing. Also, they aren't done as a macro in snippets.pt but instead have the div#spo-header repeated in each of the layouts (generic_layout.pt etc.)

I wonder if you can get something as attractive as the current tabs, but without resorting to having an image for it.

Revision history for this message
Paul Everitt (paul-agendaless) wrote :

Assigned to Jim for testing after rollout.

Changed in karl3:
assignee: Chrissy Wainwright (chrissy) → JimPGlenn (jpglenn09)
status: Confirmed → Fix Committed
Revision history for this message
JimPGlenn (jpglenn09) wrote :

fixed

Changed in karl3:
status: Fix Committed → Fix Released
To post a comment you must log in.
This report contains Public information  
Everyone can see this information.

Other bug subscribers

Remote bug watches

Bug watches keep track of this bug in other bug trackers.