• 
      

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

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

    Information

    Review Board
    release-4.0.x
    1c4efcd...

    Reviewers

    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
    Admin.

    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

    ? -> >

    daviddavid
    chipx86
    chipx86
    chipx86
    david
    1. 
        
    2. Show all issues

      ? -> >

    3. 
        
    chipx86
    david
    1. Ship It!
    2. 
        
    chipx86
    Review request changed
    Status:
    Completed
    Change Summary:
    Pushed to release-4.0.x (f07553a)