Respondr Regions Feature

Background

In uPortal we often use portlets that are not a part of the tab/column hierarchy.  These portlets appear in special areas on the page, such as in the header or footer.  In Universality we achieved this setup by giving portlets a 'role' attribute at publish time (which indicates where they appear) and adding them to layout folders with type=header.  There are a couple issues with this approach:

• The word 'role' is misleading;  these portlets could have any purpose, but their role attribute determines where they appear on the page
• This concept isn't really a publish-time setting;  we might want to use the same portlet in different areas of the page, including a tab/column setup

For these reasons, we're updating these practices in Respondr.

Regions

For Respondr we will support 'regions' – special areas on the page where portlets may be placed.  If there are portlets present in a region, it will be given appropriate space on the page.  If no portlets are present in a region, it will gracefully disappear (or not appear).

List of Regions

• hidden-top
• page-top
• detached-banner (only shown when detached window state is used)
• pre-header (uP4)
• eyebrow (uP5+)
• header-top (not yet implemented)
• header-left
• header-right
• header-bottom
• nav
• customize
• mezzanine (uPortal 5.0+)
• sidebar-left
• pre-content
• content  (in a layout file do not specify a folder with type="content", folders of type="regular" are placed in this region due to historic use of type="regular" for tab content)
• post-content
• sidebar-right
• footer-first
• footer-second
• page-bottom
• hidden-bottom

These are listed in rough top-to-bottom, left-to-right order;  part of the advantage of this approach is that placement of regions can be adjusted on the page.

Rules for Regions (RfR)

1. An empty region – one with no portlets – MUST not render any markup at all.
2. The outer-most element of a (non-empty) region MUST be a <div> element and MUST define an id attribute of region-{region_name}.
3. All portlets within a region MUST be "decorated" (wrapped) in a <section> element with an id attribute of portlet_{portlet_id} and at least two classes:  up-portlet-wrapper and {portlet_fname}.  (Additional classes may be present.)
4. CSS styles that apply to regions or portlets within regions MUST be defined in the regions.less file.
5. Markup with Bootstrap classes that define page structure – e.g. container, row, and col-sm-{x}, etc. – MUST be generated by the theme;  such markup MUST NOT be generated by the portlets.  (Internal portlet markup, however, may leverage Bootstrap internally if desired and if it can be done without interference to the broader page.)
6. Regions are responsible for choosing the following style characteristics for the portlets that appear within them:
   1. Value of the CSS display attribute;  typically block or inline-block (applied to the <section> decorator);  this setting determines whether the portlets display top-to-bottom (block) or left-to-right (inline-block)
   2. Horizontal alignment of portlets within the region (i.e. left, center, or right)
   3. Background (color or image) of the region, including portlets within it;  portlets may override for portions of their content for a reasonable purpose
   4. Text color of the region, including portlets within it;  portlets may override for portions of their content for a reasonable purpose
   5. Hyperlink color, hover effects, etc. of the region, including portlets within it;  portlets may override for portions of their content for a reasonable purpose

Layout Regions

Normal Regions:

Detached Window State Regions: