From cc192246d953ff71e6720913a23537fbff80aa3a Mon Sep 17 00:00:00 2001
From: Kia Lam <digitalanime@gmail.com>
Date: Mon, 13 May 2019 18:42:08 -0400
Subject: [PATCH] Make Orgs List page responsive.

---
 src/app.scss                                  | 11 ----
 .../components/OrganizationListItem.jsx       | 54 ++++++++++++++-----
 2 files changed, 42 insertions(+), 23 deletions(-)

diff --git a/src/app.scss b/src/app.scss
index c2f8b84d53..af1f7b47ca 100644
--- a/src/app.scss
+++ b/src/app.scss
@@ -128,17 +128,6 @@
   --pf-c-data-list__cell--PaddingTop: 16px;
   --pf-c-data-list__cell-cell--PaddingTop: 16px;
 
-  .awx-c-list-group {
-    display: inline-flex;
-    margin-right: 20px;
-
-    &--badge {
-      align-items: center;
-      display: flex;
-      justify-content: center;
-      margin-left: 10px;
-    }
-  }
 
   &.pf-c-data-list__cell--divider {
     --pf-c-data-list__cell-cell--MarginRight: 0;
diff --git a/src/pages/Organizations/components/OrganizationListItem.jsx b/src/pages/Organizations/components/OrganizationListItem.jsx
index f250f5ce75..865fa4e3c0 100644
--- a/src/pages/Organizations/components/OrganizationListItem.jsx
+++ b/src/pages/Organizations/components/OrganizationListItem.jsx
@@ -2,20 +2,52 @@ import React from 'react';
 import { string, bool, func } from 'prop-types';
 import { Trans } from '@lingui/macro';
 import {
-  Badge,
+  Badge as PFBadge,
   DataListItem,
   DataListItemRow,
   DataListItemCells,
   DataListCheck,
-  DataListCell,
+  DataListCell as PFDataListCell,
 } from '@patternfly/react-core';
 import {
   Link
 } from 'react-router-dom';
 
+import styled from 'styled-components';
+
 import VerticalSeparator from '../../../components/VerticalSeparator';
 import { Organization } from '../../../types';
 
+const Badge = styled(PFBadge)`
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  margin-left: 10px;
+`;
+
+const ListGroup = styled.span`
+  display: flex;
+  margin-left: 40px;
+
+  @media screen and (min-width: 768px) {
+    margin-left: 20px;
+
+    &:first-of-type {
+      margin-left: 0;
+    }
+  }
+`;
+
+const DataListCell = styled(PFDataListCell)`
+  display: flex;
+  align-items: center;
+  padding-bottom: ${props => (props.righthalf ? '16px' : '8px')};
+
+  @media screen and (min-width: 768px) {
+    padding-bottom: 0;
+  }
+`;
+
 class OrganizationListItem extends React.Component {
   static propTypes = {
     organization: Organization.isRequired,
@@ -42,10 +74,8 @@ class OrganizationListItem extends React.Component {
             aria-labelledby={labelId}
           />
           <DataListItemCells dataListCells={[
-            <DataListCell key="divider" className="pf-c-data-list__cell--divider">
+            <DataListCell key="divider">
               <VerticalSeparator />
-            </DataListCell>,
-            <DataListCell key="org-name">
               <span id={labelId}>
                 <Link
                   to={`${detailUrl}`}
@@ -54,19 +84,19 @@ class OrganizationListItem extends React.Component {
                 </Link>
               </span>
             </DataListCell>,
-            <DataListCell key="org-members" width={2}>
-              <span className="awx-c-list-group">
+            <DataListCell key="org-members" righthalf="true" width={2}>
+              <ListGroup>
                 <Trans>Members</Trans>
-                <Badge className="awx-c-list-group--badge" isRead>
+                <Badge isRead>
                   {organization.summary_fields.related_field_counts.users}
                 </Badge>
-              </span>
-              <span className="awx-c-list-group">
+              </ListGroup>
+              <ListGroup>
                 <Trans>Teams</Trans>
-                <Badge className="awx-c-list-group--badge" isRead>
+                <Badge isRead>
                   {organization.summary_fields.related_field_counts.teams}
                 </Badge>
-              </span>
+              </ListGroup>
             </DataListCell>
           ]}
           />