External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-03-01 16:58:46 -03:30
Code Issues Packages Projects Releases Wiki Activity

Make Orgs List page responsive.

Browse Source
This commit is contained in:
Kia Lam
2019-05-13 18:42:08 -04:00
parent 82c7052d6f
commit cc192246d9
2 changed files with 42 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/app.scss
View File

@@ -128,17 +128,6 @@
--pf-c-data-list__cell--PaddingTop: 16px; --pf-c-data-list__cell--PaddingTop: 16px;
--pf-c-data-list__cell-cell--PaddingTop: 16px; --pf-c-data-list__cell-cell--PaddingTop: 16px;
.awx-c-list-group {
display: inline-flex;
margin-right: 20px;
&--badge {
align-items: center;
display: flex;
justify-content: center;
margin-left: 10px;
}
}
&.pf-c-data-list__cell--divider { &.pf-c-data-list__cell--divider {
--pf-c-data-list__cell-cell--MarginRight: 0; --pf-c-data-list__cell-cell--MarginRight: 0;

54
src/pages/Organizations/components/OrganizationListItem.jsx
View File

@@ -2,20 +2,52 @@ import React from 'react';
import { string, bool, func } from 'prop-types'; import { string, bool, func } from 'prop-types';
import { Trans } from '@lingui/macro'; import { Trans } from '@lingui/macro';
import { import {
Badge, Badge as PFBadge,
DataListItem, DataListItem,
DataListItemRow, DataListItemRow,
DataListItemCells, DataListItemCells,
DataListCheck, DataListCheck,
DataListCell, DataListCell as PFDataListCell,
} from '@patternfly/react-core'; } from '@patternfly/react-core';
import { import {
Link Link
} from 'react-router-dom'; } from 'react-router-dom';
import styled from 'styled-components';
import VerticalSeparator from '../../../components/VerticalSeparator'; import VerticalSeparator from '../../../components/VerticalSeparator';
import { Organization } from '../../../types'; import { Organization } from '../../../types';
const Badge = styled(PFBadge)`
align-items: center;
display: flex;
justify-content: center;
margin-left: 10px;
`;
const ListGroup = styled.span`
display: flex;
margin-left: 40px;
@media screen and (min-width: 768px) {
margin-left: 20px;
&:first-of-type {
margin-left: 0;
}
}
`;
const DataListCell = styled(PFDataListCell)`
display: flex;
align-items: center;
padding-bottom: ${props => (props.righthalf ? '16px' : '8px')};
@media screen and (min-width: 768px) {
padding-bottom: 0;
}
`;
class OrganizationListItem extends React.Component { class OrganizationListItem extends React.Component {
static propTypes = { static propTypes = {
organization: Organization.isRequired, organization: Organization.isRequired,
@@ -42,10 +74,8 @@ class OrganizationListItem extends React.Component {
aria-labelledby={labelId} aria-labelledby={labelId}
/> />
<DataListItemCells dataListCells={[ <DataListItemCells dataListCells={[
<DataListCell key="divider" className="pf-c-data-list__cell--divider"> <DataListCell key="divider">
<VerticalSeparator /> <VerticalSeparator />
</DataListCell>,
<DataListCell key="org-name">
<span id={labelId}> <span id={labelId}>
<Link <Link
to={`${detailUrl}`} to={`${detailUrl}`}
@@ -54,19 +84,19 @@ class OrganizationListItem extends React.Component {
</Link> </Link>
</span> </span>
</DataListCell>, </DataListCell>,
<DataListCell key="org-members" width={2}> <DataListCell key="org-members" righthalf="true" width={2}>
<span className="awx-c-list-group"> <ListGroup>
<Trans>Members</Trans> <Trans>Members</Trans>
<Badge className="awx-c-list-group--badge" isRead> <Badge isRead>
{organization.summary_fields.related_field_counts.users} {organization.summary_fields.related_field_counts.users}
</Badge> </Badge>
</span> </ListGroup>
<span className="awx-c-list-group"> <ListGroup>
<Trans>Teams</Trans> <Trans>Teams</Trans>
<Badge className="awx-c-list-group--badge" isRead> <Badge isRead>
{organization.summary_fields.related_field_counts.teams} {organization.summary_fields.related_field_counts.teams}
</Badge> </Badge>
</span> </ListGroup>
</DataListCell> </DataListCell>
]} ]}
/> />