Amber Decorator

A project I’ve been continuously developing is a decorator (or navigational wrapper) that pairs with the Amber styles and tools. It’s built on top of bootstrap and JQuery, and the first version is completed and in production. I have the pieces broken into a custom JSP tag library so they can be easily wrapped around a page!

Amber decorator example
The latest version of the decorator on our Faculty List Info Editor application
Developer info panel

Features

Collapsible developer info panel

This tab shows up only when rendering anywhere except the production server. It includes info about the dev environment and a link to the live version of a page. Collapsing into a small button at the top of the page keeps this info non-intrusive.

Custom top-level navigation

This part is not new, but we are doing a refresh of our resources, so I am setting up the infrastructure to make this more data-driven and possibly adaptable based on the type of user (e.i. faculty and staff will see a different set of menus for some contexts)

Page identity icon

Like a piece of flare, each page gets an icon for the top right corner to help the user identify the page. Because many of the reports have similar info on them, any extra clues we can put out there to help people tell them apart may be helpful. It also gives the pages a bit of personality!

User options toolbar

user options toolbar
User options toolbar

For data reports that BCS creates for division personnel specialists, and other similar data lists, we are making an effort to provide a consistent set of tools in addition to tablesorter, which allows the user to sort and filter by column. These additional tools hang in the top right side of the page.

Excel download

Queries the DOM for the data currently displayed and downloads it as an excel file (so it captures only non-filtered data)

Legend

This is not implemented yet, but the idea is to include with each report a list of definitions for technical terminology (database or vocation-specific)

Feedback form - modal dialog
Feedback form

Feedback tool

To give our users a consistent way to give us feedback on any page, I’ve implemented the tried-and-true footer feedback button, which pops up a simple comment form in a modal dialog. The form gets emailed to our case-tracking system with the URL of the page and some basic info about the user.

Preloader

A CSS3 loading animation overlays the main content panel while the data is loading from the server to prevent a flash of unstyled content.

 

Wrapping up

The goal of this effort is to create brand consistency, streamline implementation, and most importantly, to equip our users a reliable set of tools for getting the info they need.