External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-03-09 05:29:26 -02:30
Code Issues Packages Projects Releases Wiki Activity

Makes template list responive

Browse Source
This commit is contained in:
Alex Corey
2019-09-30 15:20:43 -04:00
parent 640e5391f3
commit 55378c635e
2 changed files with 44 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
awx/ui_next/src/components/DataListCheck/DataListCheck.jsx
View File

@@ -2,8 +2,13 @@ import { DataListCheck as PFDataListCheck } from '@patternfly/react-core';
import styled from 'styled-components'; import styled from 'styled-components';
export default styled(PFDataListCheck)` export default styled(PFDataListCheck)`
.pf-c-data-list__check { padding-top: 18px;
display: flex; @media screen and (min-width: 768px) {
align-items: center; padding-top: 16px;
justify-content: ${props => (props.lastcolumn ? 'flex-end' : 'inherit')};
.pf-c-data-list__check {
display: flex;
align-items: center;
}
} }
`; `;

45
awx/ui_next/src/screens/Template/TemplateList/TemplateListItem.jsx
View File

@@ -3,7 +3,7 @@ import { Link } from 'react-router-dom';
import { import {
DataListItem, DataListItem,
DataListItemRow, DataListItemRow,
DataListItemCells, DataListItemCells as PFDataListItemCells,
Tooltip, Tooltip,
Button as PFButton, Button as PFButton,
} from '@patternfly/react-core'; } from '@patternfly/react-core';
@@ -27,6 +27,32 @@ const StyledButton = styled(PFButton)`
color: white; color: white;
} }
`; `;
const DataListItemCells = styled(PFDataListItemCells)`
display: flex;
@media screen and (max-width: 768px) {
flex-wrap: wrap;
justify-content: space-between;
}
`;
const LeftDataListCell = styled(DataListCell)`
@media screen and (max-width: 768px) {
&& {
padding-bottom: 16px;
flex: 1 1 100%;
}
}
`;
const RightDataListCell = styled(DataListCell)`
@media screen and (max-width: 768px) {
&& {
padding-top: 0px;
flex: 0 0 33%;
padding-right: 20px
}
}
`;
class TemplateListItem extends Component { class TemplateListItem extends Component {
render() { render() {
const { i18n, template, isSelected, onSelect } = this.props; const { i18n, template, isSelected, onSelect } = this.props;
@@ -46,21 +72,22 @@ class TemplateListItem extends Component {
/> />
<DataListItemCells <DataListItemCells
dataListCells={[ dataListCells={[
<DataListCell key="divider"> <LeftDataListCell key="divider">
<VerticalSeparator /> <VerticalSeparator />
<span> <span>
<Link to={`/templates/${template.type}/${template.id}`}> <Link to={`/templates/${template.type}/${template.id}`}>
<b>{template.name}</b> <b>{template.name}</b>
</Link> </Link>
</span> </span>
</DataListCell>, </LeftDataListCell>,
<DataListCell key="type"> <RightDataListCell
css="padding-left: 40px;" righthalf="true" key="type">
{toTitleCase(template.type)} {toTitleCase(template.type)}
</DataListCell>, </RightDataListCell>,
<DataListCell key="sparkline"> <RightDataListCell css="flex: 1;" righthalf="true" key="sparkline">
<Sparkline jobs={template.summary_fields.recent_jobs} /> <Sparkline jobs={template.summary_fields.recent_jobs} />
</DataListCell>, </RightDataListCell>,
<DataListCell lastcolumn="true" key="launch"> <RightDataListCell css="max-width: 40px;" righthalf="true" lastcolumn="true" key="launch">
{canLaunch && template.type === 'job_template' && ( {canLaunch && template.type === 'job_template' && (
<Tooltip content={i18n._(t`Launch`)} position="top"> <Tooltip content={i18n._(t`Launch`)} position="top">
<LaunchButton <LaunchButton
@@ -76,7 +103,7 @@ class TemplateListItem extends Component {
</LaunchButton> </LaunchButton>
</Tooltip> </Tooltip>
)} )}
</DataListCell>, </RightDataListCell>,
]} ]}
/> />
</DataListItemRow> </DataListItemRow>