External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-05-07 01:17:37 -02:30
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #4856 from AlexSCorey/4247-ResponsveTemplateList

Browse Source 
Makes template list Responsive

Reviewed-by: Alex Corey <Alex.swansboro@gmail.com>
             https://github.com/AlexSCorey
This commit is contained in:
softwarefactory-project-zuul[bot]
2019-10-04 18:50:24 +00:00
committed by GitHub
parent 353692a0ba 6c443a0a6a
commit 8d3ecf708b
2 changed files with 56 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;
}
} }
`; `;

57
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,34 @@ 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 resource={template}> <LaunchButton resource={template}>
@@ -72,7 +111,7 @@ class TemplateListItem extends Component {
</LaunchButton> </LaunchButton>
</Tooltip> </Tooltip>
)} )}
</DataListCell>, </RightDataListCell>,
]} ]}
/> />
</DataListItemRow> </DataListItemRow>