diff --git a/src/components/DataListToolbar/DataListToolbar.jsx b/src/components/DataListToolbar/DataListToolbar.jsx index 070c56359f..f55f57a693 100644 --- a/src/components/DataListToolbar/DataListToolbar.jsx +++ b/src/components/DataListToolbar/DataListToolbar.jsx @@ -4,8 +4,6 @@ import { I18n } from '@lingui/react'; import { t } from '@lingui/macro'; import { Checkbox, - Level, - LevelItem, Toolbar as PFToolbar, ToolbarGroup as PFToolbarGroup, ToolbarItem, @@ -22,15 +20,15 @@ const AWXToolbar = styled.div` --awx-toolbar--BorderColor: #ebebeb; --awx-toolbar--BorderWidth: var(--pf-global--BorderWidth--sm); + --pf-global--target-size--MinHeight: 0; + --pf-global--target-size--MinWidth: 0; + --pf-global--FontSize--md: 14px; + border-bottom: var(--awx-toolbar--BorderWidth) solid var(--awx-toolbar--BorderColor); background-color: var(--awx-toolbar--BackgroundColor); display: flex; min-height: 70px; - padding-top: 5px; - - --pf-global--target-size--MinHeight: 0px; - --pf-global--target-size--MinWidth: 0px; - --pf-global--FontSize--md: 14px; + flex-grow: 1; `; const Toolbar = styled(PFToolbar)` @@ -43,6 +41,35 @@ const ToolbarGroup = styled(PFToolbarGroup)` margin: 0; } `; + +const ColumnLeft = styled.div` + display: flex; + flex-basis: 100%; + justify-content: flex-start; + align-items: center; + padding: 10px 0 8px 0; + + @media screen and (min-width: 980px) { + flex-basis: 50%; + } +`; + +const ColumnRight = styled(ColumnLeft)` + margin-left: 60px; + padding: 8px 0 10px 0; + + @media screen and (min-width: 980px) { + margin-left: 0; + padding: 10px 0 8px 0; + } +`; + +const AdditionalControlsWrapper = styled.div` + display: flex; + flex-grow: 1; + justify-content: flex-end; +`; + class DataListToolbar extends React.Component { render () { const { @@ -65,24 +92,20 @@ class DataListToolbar extends React.Component { return ( {({ i18n }) => ( - - - - - { showSelectAll && ( - - - - - - - )} - + + + { showSelectAll && ( + + + + + + - - + + - - { (showExpandCollapse || additionalControls.length) ? ( - - ) : null} - {showExpandCollapse && ( - - - - - { additionalControls && ( - - )} - - )} - - - - {additionalControls} - - + { (showExpandCollapse || additionalControls.length) ? ( + + ) : null} + {showExpandCollapse && ( + + + + + { additionalControls && ( + + )} + + )} + + {additionalControls} + + + + )} + + )} ); diff --git a/src/components/Search/Search.jsx b/src/components/Search/Search.jsx index 4df3abf9bc..8b12a1b0ec 100644 --- a/src/components/Search/Search.jsx +++ b/src/components/Search/Search.jsx @@ -112,7 +112,6 @@ class Search extends React.Component { {({ i18n }) => (