Cleanup portlet styling and markup

[Paul Everitt]

As we found in My Communities, the portlet markup and styling is too clever. It got fragile and complex with hacks to overcome hacks.

In this task, find other portlets (such as My Tags on profile, the Related Tags tagbox on viewing a tag, etc.) and clean up the markup and styling:

1) Find all the boxes using that "tag_page_side" class.

2) Stop using the <dl> approach.

3) Convert the #my-communities-portlet identifier to something generic that can apply across other portlets.

4) Make sure no JS anticipated using it.

5) Reduce the CSS if possible. Don't leave fossils behind.

6) Make the <h3> title on the box centered, with less padding above/below to save space.

7) Try to get a little whitespace on the left, so text such as the bio or the communities listing don't run right into the left border of the box.

8) Consider use of alternating row color to make separation between community names easier. If this works, decrease the padding between rows to fit more on the screen at once.

9) Other suggestions from the screencast I sent Chrissy: http://www.screencast.com/t/ZTk0ODNiYTY

Estimated effort: 5 hours

[Paul Everitt (paul-agendaless)]

We just started m43, so I'll put this in m44.

[Paul Everitt (paul-agendaless)]

Re-assigning this to Chrissy. I'll post some comments in just a second.

[Carlos de la Guardia (cguardia)]

The current my communities portlet is not using dl anymore and may serve as a basis for this. I abandoned the 'tag-page-side' class and added a generic-portlet class, together with portlet-item, portlet-help and others. The 'my-communities-list' div inside the communities portlet is the one used by js.

[Paul Everitt (paul-agendaless)]

Hi Chrissy. On this one, OSI will need to review any really big changes, such as alternating colors. So for the first step, take the structure Carlos did for my-communities-portlet and try to get that woven into any other portlets. As noted in the task, grep for tag_page_side in the ZPTs.

[Chrissy Wainwright (chrissy)]

all portlets and their surrounding space should all be the same now. I removed the CSS that is now no longer used.

[Paul Everitt (paul-agendaless)]

Assigning back to Chrissy. The other portlets are not formatted at all, at least not in IE7 on osi.staging.sixfeetup.com which was updated from trunk. I'll attach a screenshot in a second.

[Paul Everitt (paul-agendaless)]

This screenshot shows "My Tags" on the "MY PROFILE" screen in IE7. The same problem exhibits itself on other boxes, such as viewing a tag:

  http://staging.osi.sixfeetup.com/showtag/advocacy

[Paul Everitt (paul-agendaless)]

Seems staging wasn't completely restarted, looks fine now. Assigning to JimP who can do testing after we update.

[JimPGlenn (jpglenn09)]

fixed