• 
      

    Add a CSS component for standard headers over areas of content.

    Review Request #10786 — Created Nov. 5, 2019 and submitted — Latest diff uploaded

    Information

    Review Board
    release-4.0.x
    80ed9cc...

    Reviewers

    This introduces the rb-c-content-header component, which provides a
    consistent header above an area of content. This can be used for the
    main page header (sitting in-between the page's header bar and the
    content area) or above sections of forms, lists of items, etc.

    The content area allows for a title and a list of actions, which are
    placed immediately to the right of the title.

    Headers currently support two section levels. The -is-main modifier
    indicates the header is the main one for the page (a level 1 heading),
    which gives it some standardized padding and a slightly bigger font
    size. Otherwise, it's a level 2 heading, which doesn't have any
    margins/padding by default and uses a smaller font size.

    There's also a #rb-ns-ui.content-header.add-title-styles() mixin
    function available that injects the color, font, and uppercase styles
    into an element to give the title appearance, helping other components
    (such as the sidebar) keep a consistent look.

    Content headers can be put into a mobile mode by using
    #rb-ns-ui.content-header.set-mobile-mode-max-width(). Any viewport
    width less than or equal to the provided width will result in the header
    being in mobile mode, which slightly increases the font size (to better
    differentiate between it and any content below it -- since in mobile
    mode the content box area will not have any border), and to adjust
    padding appropriately.

    This component is currently being used on datagrid pages (in place of
    the older styles for the datagrid header), and specialized through a
    rb-c-datagrid-header component (currently only used to alter padding
    for the case of tabs above datagrids).

    The new Administration UI will make use of this component in several
    pages.

    Tested that all datagrid pages are still looking and working fine in
    desktop and mobile modes.

    Tested that the sidebar still looks correct with the usage of
    add-title-styles().

    Tested the component with upcoming administration UI work.