Redo how sidebars are represented, themed, and populated on the page.

Review Request #10714 — Created Sept. 12, 2019 and submitted

Review Board

When we introduced sidebars initially, we had an area where a sidebar
could go on the page for desktop mode, and a separate area for mobile
mode. The mobile sidebar was a bit different, in that it had links for
logging in/out, changing settings, and going to Docs, Support, and

It was up to each page to populate both sidebars, and styling wasn't
consistent across both. This made it a bit of a pain to manage both
types of sidebars, making it all more error-prone. The aesthetic of the
sidebar was also a bit old-looking, resembling the Review Board 2.0 UI a
bit too much. On top of that, our CSS transitions often broke when
opening the sidebar, making things look really sloppy.

This change fully redesigns the sidebar. There is now a single, standard
template block where sidebar content can go, housing either the
new-style or old-style CSS components for sidebar content. This defaults
to containing the Review Board navigation bar (New Review Request, My
Dashboard, etc.), followed by the page's sidebar content. Styling is
consistent (and improved if using the new CSS components), transitions
work correctly, and on top of it, the sidebar's look matches that of the
page theme (blue for Dashboard, brown for review requests, etc.).

This should mostly Just Work (TM) for any pages already making use of
sidebars, but those pages will definitely be improved, aesthetically, if
they try to use the new components. Going forward, we'll want to
eventually remove support for the old sidebar styling.

There are some areas in which things will not work, however. For
instance, the New Review Request page tries to move the desktop version
of the sidebar back into view for navigation purposes, which will not
work with the new design. As it was a bit of a hack on top of the
sidebar code, a more formal, future-proof solution will be needed, and
that will be tackled separately.

The elements are defined as a new .rb-c-page-sidebar component, which
provides standard styling and room for future expansion. This groups the
sidebar into multiple layers, one of which can be shown at a time.
Layers can contain a .rb-c-sidebar, or any other content as needed by
the page.

Some of the styling and the mixin functions for the new rb-c-sidebar
component have also been moved for this, allowing sidebars to be styled
independent of their place on the page. This will further evolve in
upcoming changes.

Tested all the current sidebars in mobile and desktop mode.

Tested this along with the upcoming sidebar work in the new Admin UI.

Description From Last Updated

? -> >

  1. Ship It!
Review request changed

Status: Closed (submitted)

Change Summary:

Pushed to release-4.0.x (f07553a)