External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-01-17 12:41:19 -03: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
Show Stats 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';
export default styled(PFDataListCheck)`
.pf-c-data-list__check {
display: flex;
align-items: center;
padding-top: 18px;
@media screen and (min-width: 768px) {
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 {
DataListItem,
DataListItemRow,
DataListItemCells,
DataListItemCells as PFDataListItemCells,
Tooltip,
Button as PFButton,
} from '@patternfly/react-core';
@ -27,6 +27,32 @@ const StyledButton = styled(PFButton)`
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 {
render() {
const { i18n, template, isSelected, onSelect } = this.props;
@ -46,21 +72,22 @@ class TemplateListItem extends Component {
/>
<DataListItemCells
dataListCells={[
<DataListCell key="divider">
<LeftDataListCell key="divider">
<VerticalSeparator />
<span>
<Link to={`/templates/${template.type}/${template.id}`}>
<b>{template.name}</b>
</Link>
</span>
</DataListCell>,
<DataListCell key="type">
</LeftDataListCell>,
<RightDataListCell
css="padding-left: 40px;" righthalf="true" key="type">
{toTitleCase(template.type)}
</DataListCell>,
<DataListCell key="sparkline">
</RightDataListCell>,
<RightDataListCell css="flex: 1;" righthalf="true" key="sparkline">
<Sparkline jobs={template.summary_fields.recent_jobs} />
</DataListCell>,
<DataListCell lastcolumn="true" key="launch">
</RightDataListCell>,
<RightDataListCell css="max-width: 40px;" righthalf="true" lastcolumn="true" key="launch">
{canLaunch && template.type === 'job_template' && (
<Tooltip content={i18n._(t`Launch`)} position="top">
<LaunchButton
@ -76,7 +103,7 @@ class TemplateListItem extends Component {
</LaunchButton>
</Tooltip>
)}
</DataListCell>,
</RightDataListCell>,
]}
/>
</DataListItemRow>