-
Notifications
You must be signed in to change notification settings - Fork 2
User interface patterns
The intent of this page is to collect and document the UI elements / templates / widgets / patterns used throughout the site, so that design changes can be approached consistently and with an accurate picture of what is used where.
Modal forms fetch their content via AJAX calls to the server and display in a lightbox-style popup. When the form is submitted control returns to the primary page. The modal forms use the jQuery UI Dialog widget (http://jqueryui.com/demos/dialog/) which is set up and invoked via ad-hoc Javascript in various places (grep -r dialog static/js/mods/ static/js/pages/ to find them -- but there is also some in ./records/templates/records/_chart.js it seems)
Their layout is almost entirely controlled by jQuery UI theme CSS which is currently using the Lightness Themeroller theme without modifications.
Instances of modal popup forms on the site:
- Event Detail > Add Hosts
- Event Detail > Add Guests
- Event Detail > Invite Guests
- Group Detail > Invite Users
Related tickets:
The tabbed interfaces arrange information into tabs according to logical groupings of information. Tab data is all loaded synchronously at initial page load, not with AJAX. Tabs are implemented using the jQuery UI Tabs widget (http://jqueryui.com/demos/tabs/) which is set up in a central location, js/pages/base.js, hooked on to any DOM element in any page with class="tabs".
The CSS for tabbed interfaces is almost entirely controlled through custom CSS in static/css/common.css. The jQuery UI Theme CSS from the Lightness Theme conflicts badly with the site's palette, design and layout and must be disabled for tabs. This is easier said than done; I did it by commenting out almost all of the the tab-related CSS in static/theme/jquery.ui.custom.css and also trying to narrow the scope of the generic CSS in that same file since much of the generic CSS also breaks the layout when applied to tabs -- but must be in place for calendars and modal dialogs. (See https://github.com/350org/localpower/issues/67 and https://github.com/350org/localpower/issues/68)
The tab navigation elements and tab content elements must all be within the DOM element with class="tabs" in order for the Javascript to work properly.
The tab navigation elements should each look like <li><a href="#identifier">Title Text</a></li> within a single <ul id="tab_nav" class="plain_list">.
The tab content elements must each be wrapped with a <div id="#identifier"> that needs no special class attributes but must be within the same class="tabs" element as the tab navigation list. Each href in the navigation list's li a descendants must be matched with a corresponding <div> id -- otherwise the jQuery UI Tabs Javascript will fail during initialization.
In addition to the real tab navigation elements, there may be a single "external link" element in the tab navigation <ul>. This will be pushed to the right-hand side of the tab bar, be styled like a link instead of a tab, and will change the window location instead of pulling up a new tab. For consistency across pages, this element should be a relevant "Edit" link visible only to users with the necessary permissions. If present, this element must look like <span class="tab_nav_link"><a href="/external-link">Title Text</a></span> -- it must not be in an ``<li>`` (see https://github.com/350org/localpower/issues/69)
TODO:
- describe and enumerate the "detail template" tab instances.
- describe and enumerate the "edit form template" tab instances.