From 85a875bbfe36df6ddf137a0e0a7fbad72d0e918e Mon Sep 17 00:00:00 2001
From: Kia Lam <digitalanime@gmail.com>
Date: Wed, 23 Jan 2019 11:49:54 -0500
Subject: [PATCH] Styling changes.

---
 awx/ui/client/lib/components/list/_index.less | 79 +++++++++++++++++--
 awx/ui/client/lib/components/tag/_index.less  |  6 +-
 .../templates/labels/labelsList.block.less    |  8 +-
 3 files changed, 80 insertions(+), 13 deletions(-)

diff --git a/awx/ui/client/lib/components/list/_index.less b/awx/ui/client/lib/components/list/_index.less
index 072780a456..2127f0a823 100644
--- a/awx/ui/client/lib/components/list/_index.less
+++ b/awx/ui/client/lib/components/list/_index.less
@@ -58,16 +58,68 @@
     right: 0;
 }
 
+.at-List-toolbar--attached {
+    display: flex;
+    justify-content: flex-end;
+    border: @at-border-default-width solid @at-color-list-border;
+    border-bottom: none;
+    border-radius: @at-border-radius;
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+}
+
+.at-List-toolbar-item {
+    padding: 2px 10px;
+    border-left: 1px solid @at-color-list-border;
+    border-right: 1px solid @at-color-list-border;
+
+    &:hover {
+        cursor: pointer;
+        background: @at-gray-f2;
+    }
+
+    &:first-of-type {
+        border-right: none;
+    }
+
+    &:last-of-type {
+        border: none;
+    }
+
+    &:first-child {
+        border-left: 1px solid @at-color-list-border;
+    }
+
+    &.active {
+        background: @at-blue;
+        color: @at-white;
+    }
+}
+
 .at-List-container {
     border: @at-border-default-width solid @at-color-list-border;
     border-radius: @at-border-radius;
 }
 
+// Remove top left and right rounded corners of a list if there is a toolbar above it
+.at-List-toolbar--attached + .at-List > .at-List-container {
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+}
+
+.at-List-toolbar--attached + .at-List {
+    margin-top: 0;
+}
+
 .at-Row {
     display: grid;
     grid-template-columns: 10px 1fr;
+    overflow: hidden;
 }
 
+.at-Row--collapsed {
+    max-height: 50px !important;
+}
 .at-Row--active {
     border-left: @at-border-style-list-active-indicator;
     border-top-left-radius: @at-border-radius;
@@ -122,6 +174,7 @@
 
 .at-Row-actions {
     display: flex;
+    flex-wrap: wrap;
 }
 
 .at-Row-items {
@@ -129,12 +182,12 @@
 }
 
 .at-RowItem {
-    display: grid;
-    grid-template-columns: 120px 1fr;
     align-items: center;
     line-height: @at-height-list-row-item;
     word-wrap: break-word;
     word-break: break-all;
+    display: block;
+    margin-right: 10px;
 }
 
 .at-RowItem-status {
@@ -151,6 +204,16 @@
     line-height: @at-line-height-list-row-item-header;
 }
 
+.at-Row-container {
+    display: flex;
+    justify-content: space-between;
+}
+
+.at-Row-container--wrapped {
+    display: flex;
+    flex-wrap: wrap;
+}
+
 .at-RowItem--isHeaderLink {
     color: @at-blue;
     cursor: pointer;
@@ -161,8 +224,7 @@
 
 .at-RowItem--labels {
     line-height: @at-line-height-list-row-item-labels;
-    display: flex;
-    flex-wrap: wrap;
+    display: inline-block;
 
     * {
         font-size: 10px;
@@ -174,8 +236,7 @@
 }
 
 .at-RowItem-tagContainer {
-    display: flex;
-    margin-left: @at-margin-left-list-row-item-tag-container;
+    display: inline-block;
     flex-wrap: wrap;
     line-height: initial;
 }
@@ -186,7 +247,7 @@
     border-radius: @at-border-radius;
     color: @at-color-list-row-item-tag;
     font-size: @at-font-size-list-row-item-tag;
-    margin: @at-space;
+    margin: @at-space @at-space-4x;
     padding: @at-padding-list-row-item-tag;
     line-height: @at-line-height-list-row-item-tag;
     word-break: keep-all;
@@ -207,13 +268,17 @@
 }
 
 .at-RowItem-label {
+    display: inline-block;
     text-transform: uppercase;
     color: @at-color-list-row-item-label;
     font-size: @at-font-size;
+    margin-right: 10px;
 }
 
 .at-RowItem-value {
+    display: inline-block;
     font-size: @at-font-size-3x;
+    margin-right: 20px;
 }
 
 .at-RowItem-badge {
diff --git a/awx/ui/client/lib/components/tag/_index.less b/awx/ui/client/lib/components/tag/_index.less
index 5834c5208d..4d13212442 100644
--- a/awx/ui/client/lib/components/tag/_index.less
+++ b/awx/ui/client/lib/components/tag/_index.less
@@ -10,7 +10,11 @@
     min-height: @at-space-4x;
     overflow: hidden;
     max-width: 200px;
-    margin: @at-space;
+    margin: @at-space 0;
+
+    &:last-of-type {
+        margin-right: 20px;
+    }
 }
 
 .TagComponent-name {
diff --git a/awx/ui/client/src/templates/labels/labelsList.block.less b/awx/ui/client/src/templates/labels/labelsList.block.less
index 9796abc56f..63910ffc00 100644
--- a/awx/ui/client/src/templates/labels/labelsList.block.less
+++ b/awx/ui/client/src/templates/labels/labelsList.block.less
@@ -7,19 +7,16 @@
 }
 
 .LabelList-tagContainer {
-    height: fit-content;
+    display: inline-block;
 }
 
-.LabelList-tagContainer,
-.LabelList-seeMoreLess {
-    display: flex;
+.LabelList-tagContainer {
     max-width: 200px;
 }
 
 .LabelList-tag, .JobSubmission-previewTag {
     border-radius: 5px;
     padding: 2px 10px;
-    margin: 3px 0px;
     font-size: 12px;
     color: @default-interface-txt;
     background-color: @default-list-header-bg;
@@ -36,6 +33,7 @@
     cursor: pointer;
     border-radius: 5px;
     font-size: 11px;
+    display: inherit;
 }
 
 .LabelList-seeMoreLess:hover {