From 92a742af9831123b28ffc8dba4ef983f75649f1d Mon Sep 17 00:00:00 2001 From: Marliana Lara Date: Mon, 16 Apr 2018 14:55:43 -0400 Subject: [PATCH 1/2] Fix alignment of action icons and invalid bar with css grid --- .../client/features/jobs/jobsList.view.html | 22 +++---- .../launchTemplateButton/_index.less | 5 +- awx/ui/client/lib/components/list/_index.less | 59 ++++++++----------- .../lib/components/list/row.partial.html | 2 +- .../capacity-bar/capacity-bar.block.less | 4 ++ .../instances/instances-list.partial.html | 17 +++--- .../list/instance-groups-list.partial.html | 5 +- .../templates/labels/labelsList.partial.html | 10 ++-- 8 files changed, 59 insertions(+), 65 deletions(-) diff --git a/awx/ui/client/features/jobs/jobsList.view.html b/awx/ui/client/features/jobs/jobsList.view.html index e9325b18f1..71fd2d875e 100644 --- a/awx/ui/client/features/jobs/jobsList.view.html +++ b/awx/ui/client/features/jobs/jobsList.view.html @@ -24,16 +24,18 @@ header-link="{{ vm.getLink(job) }}" header-tag="{{ vm.jobTypes[job.type] }}"> - - - - +
+ + + + +
- +
diff --git a/awx/ui/client/src/instance-groups/capacity-bar/capacity-bar.block.less b/awx/ui/client/src/instance-groups/capacity-bar/capacity-bar.block.less index 658f3eca02..daee752b84 100644 --- a/awx/ui/client/src/instance-groups/capacity-bar/capacity-bar.block.less +++ b/awx/ui/client/src/instance-groups/capacity-bar/capacity-bar.block.less @@ -46,4 +46,8 @@ capacity-bar { .Capacity-details--percentage { width: 40px; } + + &:only-child { + margin-right: 50px; + } } \ No newline at end of file diff --git a/awx/ui/client/src/instance-groups/instances/instances-list.partial.html b/awx/ui/client/src/instance-groups/instances/instances-list.partial.html index a75448dc22..59d459a70b 100644 --- a/awx/ui/client/src/instance-groups/instances/instances-list.partial.html +++ b/awx/ui/client/src/instance-groups/instances/instances-list.partial.html @@ -35,7 +35,7 @@ -
+
diff --git a/awx/ui/client/src/instance-groups/list/instance-groups-list.partial.html b/awx/ui/client/src/instance-groups/list/instance-groups-list.partial.html index e168dfcd53..e09f28cbe5 100644 --- a/awx/ui/client/src/instance-groups/list/instance-groups-list.partial.html +++ b/awx/ui/client/src/instance-groups/list/instance-groups-list.partial.html @@ -39,11 +39,12 @@ header-link="/#/instance_groups/{{ instance_group.id }}"> -
+
@@ -51,10 +52,10 @@ label-value="Running Jobs" label-link="/#/instance_groups/{{ instance_group.id }}/jobs" value="{{ instance_group.jobs_running }}" + inline="true" badge="true">
-
diff --git a/awx/ui/client/src/templates/labels/labelsList.partial.html b/awx/ui/client/src/templates/labels/labelsList.partial.html index 6275d6c0c6..fce351f800 100644 --- a/awx/ui/client/src/templates/labels/labelsList.partial.html +++ b/awx/ui/client/src/templates/labels/labelsList.partial.html @@ -12,10 +12,11 @@ ng-click="seeMore()" ng-if="!isRowItem">View More
View Less
-
-
- Labels -
+
+
+ Labels +
+
{{ label.name }} @@ -30,4 +31,5 @@ ng-click="seeMore()">View More
View Less
+
From 763afc72457f4a1400b26120a49fd1987a5358be Mon Sep 17 00:00:00 2001 From: Marliana Lara Date: Thu, 19 Apr 2018 13:13:13 -0400 Subject: [PATCH 2/2] Fix row label bugs and responsive actions button alignment --- .../client/features/jobs/jobsList.view.html | 2 +- .../templates/templatesList.view.html | 2 +- awx/ui/client/lib/components/list/_index.less | 6 ++++ .../templates/labels/labelsList.block.less | 4 +++ .../templates/labels/labelsList.directive.js | 31 +++++++++---------- 5 files changed, 26 insertions(+), 19 deletions(-) diff --git a/awx/ui/client/features/jobs/jobsList.view.html b/awx/ui/client/features/jobs/jobsList.view.html index 71fd2d875e..38237e0e93 100644 --- a/awx/ui/client/features/jobs/jobsList.view.html +++ b/awx/ui/client/features/jobs/jobsList.view.html @@ -66,7 +66,7 @@ tag-values="job.summary_fields.credentials" tags-are-creds="true"> - +
diff --git a/awx/ui/client/features/templates/templatesList.view.html b/awx/ui/client/features/templates/templatesList.view.html index 7713e153db..fee9f2b31a 100644 --- a/awx/ui/client/features/templates/templatesList.view.html +++ b/awx/ui/client/features/templates/templatesList.view.html @@ -83,7 +83,7 @@ label-value="{{:: vm.strings.get('list.ROW_ITEM_LABEL_RAN') }}" value="{{ vm.getLastRan(template) }}"> - +
diff --git a/awx/ui/client/lib/components/list/_index.less b/awx/ui/client/lib/components/list/_index.less index c4fc0df98c..dfcb74adad 100644 --- a/awx/ui/client/lib/components/list/_index.less +++ b/awx/ui/client/lib/components/list/_index.less @@ -114,6 +114,7 @@ .at-Row-content { align-items: center; display: flex; + flex-wrap: wrap; grid-column-start: 2; padding: @at-padding-list-row; } @@ -160,6 +161,10 @@ line-height: @at-line-height-list-row-item-labels; display: flex; flex-wrap: wrap; + + * { + font-size: 10px; + } } .at-RowItem-header { @@ -268,6 +273,7 @@ @media screen and (max-width: @at-breakpoint-compact-list) { .at-Row-actions { flex-direction: column; + align-items: center; } .at-RowAction { diff --git a/awx/ui/client/src/templates/labels/labelsList.block.less b/awx/ui/client/src/templates/labels/labelsList.block.less index ccec1c058e..39041117a0 100644 --- a/awx/ui/client/src/templates/labels/labelsList.block.less +++ b/awx/ui/client/src/templates/labels/labelsList.block.less @@ -6,6 +6,9 @@ align-items: flex-start; } +.LabelList-tagContainer { + height: fit-content; +} .LabelList-tagContainer, .LabelList-seeMoreLess { @@ -70,6 +73,7 @@ .LabelList-name { flex: initial; max-width: 100%; + word-break: break-word; } .LabelList-tag--deletable > .LabelList-name { diff --git a/awx/ui/client/src/templates/labels/labelsList.directive.js b/awx/ui/client/src/templates/labels/labelsList.directive.js index 3763998427..422f04da33 100644 --- a/awx/ui/client/src/templates/labels/labelsList.directive.js +++ b/awx/ui/client/src/templates/labels/labelsList.directive.js @@ -12,7 +12,9 @@ export default function(templateUrl, Wait, Rest, GetBasePath, ProcessErrors, Prompt, $q, $filter, $state) { return { restrict: 'E', - scope: false, + scope: { + state: '=' + }, templateUrl: templateUrl('templates/labels/labelsList'), link: function(scope, element, attrs) { scope.showDelete = attrs.showDelete === 'true'; @@ -33,7 +35,9 @@ export default scope.seeMore = function () { var seeMoreResolve = $q.defer(); - Rest.setUrl(scope[scope.$parent.list.iterator].related.labels); + if (scope.state) { + Rest.setUrl(scope.state.related.labels); + } Rest.get() .then(({data}) => { if (data.next) { @@ -92,23 +96,16 @@ export default }); }; - if (scope.$parent.$parent.template) { - if (_.has(scope, '$parent.$parent.template.summary_fields.labels.results')) { - scope.labels = scope.$parent.$parent.template.summary_fields.labels.results.slice(0, 5); - scope.count = scope.$parent.$parent.template.summary_fields.labels.count; - } - } else if (scope.$parent.$parent.job) { - if (_.has(scope, '$parent.$parent.job.summary_fields.labels.results')) { - scope.labels = scope.$parent.$parent.job.summary_fields.labels.results.slice(0, 5); - scope.count = scope.$parent.$parent.job.summary_fields.labels.count; - } - } else { - scope.$watchCollection(scope.$parent.list.iterator, function() { + if (_.has(scope.state, 'summary_fields.labels.results')) { + scope.labels = scope.state.summary_fields.labels.results.slice(0, 5); + scope.count = scope.state.summary_fields.labels.count; + } else { + scope.$watchCollection(scope.state, function() { // 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.slice(0, 5); - scope.count = scope[scope.$parent.list.iterator].summary_fields.labels.count; + if (scope.state.summary_fields.labels){ + scope.labels = scope.state.summary_fields.labels.results.slice(0, 5); + scope.count = scope.state.summary_fields.labels.count; } else{ scope.labels = null;