From 9b78a919fb0e09acd1f9d04bc2c1bda5cec255d7 Mon Sep 17 00:00:00 2001
From: Marliana Lara <marliana.lara@gmail.com>
Date: Mon, 1 May 2017 15:18:08 -0400
Subject: [PATCH] Fix padding and wrap of Labels section in Template

Issue #5484
*Add top and bottom padding in Labels table cell
*Show View More link when there are more than 5 labels
*Add word-wrap to labels
*Add left padding between Activity and Label sections when page
shrinks
*Change table row border color to #E1E1E1
---
 awx/ui/client/legacy-styles/lists.less             |  5 ++---
 .../src/templates/labels/labelsList.block.less     | 14 +++++++++-----
 .../src/templates/labels/labelsList.directive.js   |  4 ++--
 .../src/templates/labels/labelsList.partial.html   |  4 ++--
 4 files changed, 15 insertions(+), 12 deletions(-)

diff --git a/awx/ui/client/legacy-styles/lists.less b/awx/ui/client/legacy-styles/lists.less
index 7e36f610cc..c1fc2b1164 100644
--- a/awx/ui/client/legacy-styles/lists.less
+++ b/awx/ui/client/legacy-styles/lists.less
@@ -60,7 +60,7 @@ table, tbody {
     height: 40px;
     font-size: 14px;
     color: @list-item;
-    border-bottom: 1px solid #d7d7d7;
+    border-bottom: 1px solid #E1E1E1;
 }
 
 .List-tableRow:last-of-type {
@@ -81,8 +81,7 @@ table, tbody {
 }
 
 .List-tableCell {
-    padding-left: 15px;
-    padding-right: 15px;
+    padding: 7px 15px;
     border-top:0px!important;
     word-wrap: break-word;
 }
diff --git a/awx/ui/client/src/templates/labels/labelsList.block.less b/awx/ui/client/src/templates/labels/labelsList.block.less
index 9eab78e389..b384579314 100644
--- a/awx/ui/client/src/templates/labels/labelsList.block.less
+++ b/awx/ui/client/src/templates/labels/labelsList.block.less
@@ -7,10 +7,11 @@
     align-items: flex-start;
 }
 
-.LabelList-tagContainer,
+
+.LabelList-tagContainer, 
 .LabelList-seeMoreLess {
     display: flex;
-    max-width: 100%;
+    max-width: 200px;
 }
 
 .LabelList-tag {
@@ -22,9 +23,6 @@
     background-color: @default-list-header-bg;
     margin-right: 5px;
     max-width: 100%;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    overflow: hidden;
 }
 
 .LabelList-seeMoreLess {
@@ -86,3 +84,9 @@
 .LabelList-deleteContainer:hover > .LabelList-tagDelete {
     color: @default-bg;
 }
+
+@media (max-width: 1200px) {
+    .List-tableCell.col-md-4 {
+        padding-left: 40px;
+    }
+}
\ No newline at end of file
diff --git a/awx/ui/client/src/templates/labels/labelsList.directive.js b/awx/ui/client/src/templates/labels/labelsList.directive.js
index 69a2295549..ba7bc06d1b 100644
--- a/awx/ui/client/src/templates/labels/labelsList.directive.js
+++ b/awx/ui/client/src/templates/labels/labelsList.directive.js
@@ -50,7 +50,7 @@ export default
 
                     scope.seeLess = function() {
                         // Trim the labels array back down to 10 items
-                        scope.labels = scope.labels.slice(0, 10);
+                        scope.labels = scope.labels.slice(0, 5);
                         // Re-set the seeMoreInteractive flag so that the "See More" will be displayed
                         scope.seeMoreInactive = true;
                     };
@@ -95,7 +95,7 @@ export default
                         // To keep the array of labels fresh, we need to set up a watcher - otherwise, the
                         // array will get set initially and then never be updated as labels are removed
                         if (scope[scope.$parent.list.iterator].summary_fields.labels){
-                            scope.labels = scope[scope.$parent.list.iterator].summary_fields.labels.results;
+                            scope.labels = scope[scope.$parent.list.iterator].summary_fields.labels.results.slice(0, 5);
                             scope.count = scope[scope.$parent.list.iterator].summary_fields.labels.count;
                         }
                         else{
diff --git a/awx/ui/client/src/templates/labels/labelsList.partial.html b/awx/ui/client/src/templates/labels/labelsList.partial.html
index e614692a6e..15ca1e905a 100644
--- a/awx/ui/client/src/templates/labels/labelsList.partial.html
+++ b/awx/ui/client/src/templates/labels/labelsList.partial.html
@@ -8,7 +8,7 @@
         <span class="LabelList-name">{{ label.name }}</span>
     </div>
 </div>
-<div class="LabelList-seeMoreLess" ng-show="count > 10 && seeMoreInactive"
+<div class="LabelList-seeMoreLess" ng-show="count > 5 && seeMoreInactive"
     ng-click="seeMore()">View More</div>
-<div class="LabelList-seeMoreLess" ng-show="count > 10 && !seeMoreInactive"
+<div class="LabelList-seeMoreLess" ng-show="count > 5 && !seeMoreInactive"
     ng-click="seeLess()">View Less</div>