Add a CSS component for standard headers over areas of content.
Review Request #10786 — Created Nov. 5, 2019 and submitted
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.
- Change Summary:
-
- Moved to a margin instead of padding around the header, to keep some layouts simpler.
- Added a more mobile-friendly appearance.
- Changed how the datagrid filters are layed out in mobile mode to deal with the above changes.
- Description:
-
This introduces the
rb-c-content-header
component, which provides aconsistent 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
modifierindicates 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 ~ 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()
mixinfunction 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 paddingfor the case of tabs above datagrids). The new Administration UI will make use of this component in several
pages. - Commit:
-
1eca029239376fcd47fdf552b9dec18a709232f97a58ae8a875df4d57fdec3258c85d9ae35009c3e