From 55378c635edf7032e7653bf02ad18699cd2b0a3a Mon Sep 17 00:00:00 2001
From: Alex Corey <alex.swansboro@gmail.com>
Date: Mon, 30 Sep 2019 15:20:43 -0400
Subject: [PATCH 1/2] Makes template list responive

---
 .../DataListCheck/DataListCheck.jsx           | 11 +++--
 .../TemplateList/TemplateListItem.jsx         | 45 +++++++++++++++----
 2 files changed, 44 insertions(+), 12 deletions(-)

diff --git a/awx/ui_next/src/components/DataListCheck/DataListCheck.jsx b/awx/ui_next/src/components/DataListCheck/DataListCheck.jsx
index a6f0b5503c..511cc8d9a8 100644
--- a/awx/ui_next/src/components/DataListCheck/DataListCheck.jsx
+++ b/awx/ui_next/src/components/DataListCheck/DataListCheck.jsx
@@ -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;
+    }
   }
 `;
diff --git a/awx/ui_next/src/screens/Template/TemplateList/TemplateListItem.jsx b/awx/ui_next/src/screens/Template/TemplateList/TemplateListItem.jsx
index e37fd2eaee..53f191ec78 100644
--- a/awx/ui_next/src/screens/Template/TemplateList/TemplateListItem.jsx
+++ b/awx/ui_next/src/screens/Template/TemplateList/TemplateListItem.jsx
@@ -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>

From 6c443a0a6ae1b13f7bc19c6eea1117ad8b35fa8f Mon Sep 17 00:00:00 2001
From: Alex Corey <alex.swansboro@gmail.com>
Date: Mon, 30 Sep 2019 16:38:51 -0400
Subject: [PATCH 2/2] fix lint error

---
 .../TemplateList/TemplateListItem.jsx         | 20 +++++++++++++++----
 1 file changed, 16 insertions(+), 4 deletions(-)

diff --git a/awx/ui_next/src/screens/Template/TemplateList/TemplateListItem.jsx b/awx/ui_next/src/screens/Template/TemplateList/TemplateListItem.jsx
index 53f191ec78..bc0fce6dfd 100644
--- a/awx/ui_next/src/screens/Template/TemplateList/TemplateListItem.jsx
+++ b/awx/ui_next/src/screens/Template/TemplateList/TemplateListItem.jsx
@@ -48,7 +48,7 @@ const RightDataListCell = styled(DataListCell)`
     && {
       padding-top: 0px;
       flex: 0 0 33%;
-      padding-right: 20px
+      padding-right: 20px;
     }
   }
 `;
@@ -81,13 +81,25 @@ class TemplateListItem extends Component {
                 </span>
               </LeftDataListCell>,
               <RightDataListCell
-                css="padding-left: 40px;" righthalf="true" key="type">
+                css="padding-left: 40px;"
+                righthalf="true"
+                key="type"
+              >
                 {toTitleCase(template.type)}
               </RightDataListCell>,
-              <RightDataListCell css="flex: 1;" righthalf="true" key="sparkline">
+              <RightDataListCell
+                css="flex: 1;"
+                righthalf="true"
+                key="sparkline"
+              >
                 <Sparkline jobs={template.summary_fields.recent_jobs} />
               </RightDataListCell>,
-              <RightDataListCell css="max-width: 40px;" righthalf="true" lastcolumn="true" key="launch">
+              <RightDataListCell
+                css="max-width: 40px;"
+                righthalf="true"
+                lastcolumn="true"
+                key="launch"
+              >
                 {canLaunch && template.type === 'job_template' && (
                   <Tooltip content={i18n._(t`Launch`)} position="top">
                     <LaunchButton