diff --git a/awx/ui_next/src/components/PaginatedTable/HeaderRow.jsx b/awx/ui_next/src/components/PaginatedTable/HeaderRow.jsx index a70ca52232..5ea13ee6b3 100644 --- a/awx/ui_next/src/components/PaginatedTable/HeaderRow.jsx +++ b/awx/ui_next/src/components/PaginatedTable/HeaderRow.jsx @@ -71,6 +71,7 @@ export function HeaderCell({ sortBy, columnIndex, idPrefix, + className, children, }) { const sort = sortKey @@ -81,7 +82,11 @@ export function HeaderCell({ } : null; return ( - + {children} ); diff --git a/awx/ui_next/src/screens/Inventory/InventoryList/InventoryList.jsx b/awx/ui_next/src/screens/Inventory/InventoryList/InventoryList.jsx index c9594e4e17..fe3dffdf35 100644 --- a/awx/ui_next/src/screens/Inventory/InventoryList/InventoryList.jsx +++ b/awx/ui_next/src/screens/Inventory/InventoryList/InventoryList.jsx @@ -1,5 +1,6 @@ import React, { useState, useCallback, useEffect } from 'react'; import { useLocation, useRouteMatch, Link } from 'react-router-dom'; +import styled from 'styled-components'; import { withI18n } from '@lingui/react'; import { t } from '@lingui/macro'; import { Card, PageSection, DropdownItem } from '@patternfly/react-core'; @@ -18,6 +19,14 @@ import useWsInventories from './useWsInventories'; import AddDropDownButton from '../../../components/AddDropDownButton'; import InventoryListItem from './InventoryListItem'; +const ResponsiveHeaderCell = styled(HeaderCell)` + @media (max-width: 992px) { + && { + display: none; + } + } +`; + const QS_CONFIG = getQSConfig('inventory', { page: 1, page_size: 20, @@ -195,9 +204,9 @@ function InventoryList({ i18n }) { {i18n._(t`Status`)} {i18n._(t`Type`)} {i18n._(t`Organization`)} - {i18n._(t`Groups`)} - {i18n._(t`Hosts`)} - {i18n._(t`Sources`)} + {i18n._(t`Groups`)} + {i18n._(t`Hosts`)} + {i18n._(t`Sources`)} {i18n._(t`Actions`)} } diff --git a/awx/ui_next/src/screens/Inventory/InventoryList/InventoryListItem.jsx b/awx/ui_next/src/screens/Inventory/InventoryList/InventoryListItem.jsx index d10dbf2a0a..354affdf3b 100644 --- a/awx/ui_next/src/screens/Inventory/InventoryList/InventoryListItem.jsx +++ b/awx/ui_next/src/screens/Inventory/InventoryList/InventoryListItem.jsx @@ -6,6 +6,7 @@ import { Tr, Td } from '@patternfly/react-table'; import { PencilAltIcon } from '@patternfly/react-icons'; import { t } from '@lingui/macro'; import { Link } from 'react-router-dom'; +import styled from 'styled-components'; import { timeOfDay } from '../../../util/dates'; import { InventoriesAPI } from '../../../api'; import { Inventory } from '../../../types'; @@ -13,6 +14,14 @@ import { ActionsTd, ActionItem } from '../../../components/PaginatedTable'; import CopyButton from '../../../components/CopyButton'; import StatusLabel from '../../../components/StatusLabel'; +const ResponsiveTd = styled(Td)` + @media (max-width: 992px) { + && { + display: none; + } + } +`; + function InventoryListItem({ inventory, rowIndex, @@ -89,11 +98,15 @@ function InventoryListItem({ {inventory?.summary_fields?.organization?.name} - {inventory.total_groups} - {inventory.total_hosts} - + + {inventory.total_groups} + + + {inventory.total_hosts} + + {inventory.total_inventory_sources} - + {inventory.pending_deletion ? (