External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-01-15 03:40:42 -03: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
commit 8d3ecf708b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 56 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;
}
}
`;

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