diff --git a/awx/ui/client/features/jobs/jobsList.view.html b/awx/ui/client/features/jobs/jobsList.view.html index e9325b18f1..38237e0e93 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/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/launchTemplateButton/_index.less b/awx/ui/client/lib/components/launchTemplateButton/_index.less index d5c39547ff..f0d68bd3d8 100644 --- a/awx/ui/client/lib/components/launchTemplateButton/_index.less +++ b/awx/ui/client/lib/components/launchTemplateButton/_index.less @@ -1,6 +1,4 @@ .at-LaunchTemplate { - margin-left: 15px; - &--button { font-size: 16px; height: 30px; @@ -8,8 +6,9 @@ color: #848992; background-color: inherit; border: none; - border-radius: 4px; + border-radius: 5px; } + &--button:hover { background-color: @at-blue; color: white; diff --git a/awx/ui/client/lib/components/list/_index.less b/awx/ui/client/lib/components/list/_index.less index d488e14cde..dfcb74adad 100644 --- a/awx/ui/client/lib/components/list/_index.less +++ b/awx/ui/client/lib/components/list/_index.less @@ -68,12 +68,8 @@ } .at-Row { - display: flex; - flex-direction: row; - justify-content: space-between; - align-items: center; - padding: @at-padding-list-row; - position: relative; + display: grid; + grid-template-columns: 10px 1fr; } .at-Row--active { @@ -86,15 +82,21 @@ border-left: @at-white solid 1px; } +.at-Row--active .at-Row-content { + margin-left: -5px; +} + +.at-Row ~ .at-Row { + border-top-left-radius: 0px; + border-top-right-radius: 0px; + border-top: @at-border-default-width solid @at-color-list-border; +} + .at-Row--invalid { align-items: center; background: @at-color-error; display: flex; - height: 100%; justify-content: center; - left: 0; - position: absolute; - width: @at-space-2x; .at-Popover { padding: 0; @@ -109,31 +111,15 @@ } } -.at-Row ~ .at-Row { - border-top-left-radius: 0px; - border-top-right-radius: 0px; - border-top: @at-border-default-width solid @at-color-list-border; -} - -.at-Row--rowLayout { +.at-Row-content { + align-items: center; display: flex; - flex-direction: row; - - .at-RowItem { - margin-right: @at-space-4x; - - &-label { - width: auto; - } - } + flex-wrap: wrap; + grid-column-start: 2; + padding: @at-padding-list-row; } -.at-RowStatus { - align-self: flex-start; - margin: 0 10px 0 0; -} - -.at-Row-firstColumn { +.at-Row-toggle { margin-right: @at-space-4x; } @@ -142,12 +128,12 @@ } .at-Row-items { - align-self: flex-start; flex: 1; } .at-RowItem { - display: flex; + display: grid; + grid-template-columns: 120px 1fr; align-items: center; line-height: @at-height-list-row-item; } @@ -157,6 +143,7 @@ } .at-RowItem--isHeader { + display: flex; color: @at-color-body-text; margin-bottom: @at-margin-bottom-list-header; line-height: @at-line-height-list-row-item-header; @@ -172,6 +159,12 @@ .at-RowItem--labels { line-height: @at-line-height-list-row-item-labels; + display: flex; + flex-wrap: wrap; + + * { + font-size: 10px; + } } .at-RowItem-header { @@ -179,6 +172,7 @@ } .at-RowItem-tagContainer { + display: flex; margin-left: @at-margin-left-list-row-item-tag-container; } @@ -211,8 +205,6 @@ .at-RowItem-label { text-transform: uppercase; - width: auto; - width: @at-width-list-row-item-label; color: @at-color-list-row-item-label; font-size: @at-font-size; } @@ -281,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/lib/components/list/row.partial.html b/awx/ui/client/lib/components/list/row.partial.html index b8b70d4a84..0f1d88d22d 100644 --- a/awx/ui/client/lib/components/list/row.partial.html +++ b/awx/ui/client/lib/components/list/row.partial.html @@ -2,5 +2,5 @@
- +
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.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; 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
+