Merge pull request #1396 from marshmalien/fix/1342-css-gridify-lists

Fix alignment of list action icons and invalid item bar

awx/ui/client/features/jobs/jobsList.view.html

@@ -24,16 +24,18 @@
                     header-link="{{ vm.getLink(job) }}"
                     header-tag="{{ vm.jobTypes[job.type] }}">
                 </at-row-item>
-                <at-row-item
-                    label-value="{{:: vm.strings.get('list.ROW_ITEM_LABEL_STARTED') }}"
-                    value="{{ job.started | longDate }}"
-                    inline="true">
-                </at-row-item>
-                <at-row-item
-                    label-value="{{:: vm.strings.get('list.ROW_ITEM_LABEL_FINISHED') }}"
-                    value="{{ job.finished | longDate }}"
-                    inline="true">
-                </at-row-item>
+                <div class="at-Row--inline">
+                    <at-row-item
+                        label-value="{{:: vm.strings.get('list.ROW_ITEM_LABEL_STARTED') }}"
+                        value="{{ job.started | longDate }}"
+                        inline="true">
+                    </at-row-item>
+                    <at-row-item
+                        label-value="{{:: vm.strings.get('list.ROW_ITEM_LABEL_FINISHED') }}"
+                        value="{{ job.finished | longDate }}"
+                        inline="true">
+                    </at-row-item>
+                </div>
                 <at-row-item
                     label-value="{{:: vm.strings.get('list.ROW_ITEM_LABEL_WORKFLOW_JOB') }}"
                     value="{{ job.summary_fields.source_workflow_job.name }}"
@@ -64,7 +66,7 @@
                     tag-values="job.summary_fields.credentials"
                     tags-are-creds="true">
                 </at-row-item>
-                <labels-list class="LabelList" show-delete="false" is-row-item="true">
+                <labels-list class="LabelList" show-delete="false" is-row-item="true" state="job">
                 </labels-list>
             </div>
             <div class="at-Row-actions">

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) }}">
                 </at-row-item>
-                <labels-list class="LabelList" show-delete="false" is-row-item="true">
+                <labels-list class="LabelList" show-delete="false" is-row-item="true" state="template">
                 </labels-list>
             </div>
             <div class="at-Row-actions">

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;

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 {

awx/ui/client/lib/components/list/row.partial.html

@@ -2,5 +2,5 @@
     <div class="at-Row--invalid" ng-show="invalid">
         <at-popover state="invalidTooltip"></at-popover>
     </div>
-    <ng-transclude></ng-transclude>
+    <div class="at-Row-content" ng-transclude></div>
 </div>

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;
+    }
 }

awx/ui/client/src/instance-groups/instances/instances-list.partial.html

@@ -35,7 +35,7 @@
         <at-list results='vm.instances'>
             <at-row ng-repeat="instance in vm.instances"
                 ng-class="{'at-Row--active': (instance.id === vm.activeId)}">
-                <div class="at-Row-firstColumn">
+                <div class="at-Row-toggle">
                     <div class="ScheduleToggle"
                         ng-class="{'is-on': instance.enabled}">
                         <button ng-show="instance.enabled"
@@ -53,14 +53,13 @@
 
                 <div class="at-Row-items">
                     <at-row-item header-value="{{ instance.hostname }}"></at-row-item>
-                    <div class="at-Row--rowLayout">
-                        <at-row-item
-                            label-value="Running Jobs"
-                            label-state="instanceGroups.instanceJobs({instance_group_id: {{vm.instance_group_id}}, instance_id: {{instance.id}}})"
-                            value="{{ instance.jobs_running }}"
-                            badge="true">
-                        </at-row-item>
-                    </div>
+                    <at-row-item
+                        label-value="Running Jobs"
+                        label-state="instanceGroups.instanceJobs({instance_group_id: {{vm.instance_group_id}}, instance_id: {{instance.id}}})"
+                        value="{{ instance.jobs_running }}"
+                        inline="true"
+                        badge="true">
+                    </at-row-item>
                 </div>
 
                 <div class="at-Row-actions">

awx/ui/client/src/instance-groups/list/instance-groups-list.partial.html

@@ -39,11 +39,12 @@
                         header-link="/#/instance_groups/{{ instance_group.id }}">
                     </at-row-item>
 
-                    <div class="at-Row--rowLayout">
+                    <div class="at-Row--inline">
                         <at-row-item
                             label-value="Instances"
                             label-link="/#/instance_groups/{{ instance_group.id }}/instances"
                             value="{{ instance_group.instances }}"
+                            inline="true"
                             badge="true">
                         </at-row-item>
 
@@ -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">
                         </at-row-item>
                     </div>
-
                 </div>
 
                 <div class="at-Row-actions">

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 {

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;

awx/ui/client/src/templates/labels/labelsList.partial.html

@@ -12,10 +12,11 @@
     ng-click="seeMore()" ng-if="!isRowItem">View More</div>
 <div class="LabelList-seeMoreLess" ng-show="count > 5 && !seeMoreInactive"
     ng-click="seeLess()" ng-if="!isRowItem">View Less</div>
-<div class="at-RowItem at-RowItem--labels" ng-show="count > 0" ng-if="isRowItem">
-        <div class="at-RowItem-label">
-            Labels
-        </div>
+<div class="at-RowItem" ng-show="count > 0" ng-if="isRowItem">
+    <div class="at-RowItem-label">
+        Labels
+    </div>
+    <div class="at-RowItem--labels">
         <div class="LabelList-tagContainer" ng-repeat="label in labels">
             <div class="LabelList-tag" ng-class="{'LabelList-tag--deletable' : (showDelete && template.summary_fields.user_capabilities.edit)}">
                 <span class="LabelList-name">{{ label.name }}</span>
@@ -30,4 +31,5 @@
             ng-click="seeMore()">View More</div>
         <div class="LabelList-seeMoreLess" ng-show="count > 5 && !seeMoreInactive"
             ng-click="seeLess()">View Less</div>
+    </div>
 </div>