Fix alignment of action icons and invalid bar with css grid

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 }}"

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,14 @@
     }
 }
 
-.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;
-        }
-    }
+    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 +127,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 +142,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 +158,8 @@
 
 .at-RowItem--labels {
     line-height: @at-line-height-list-row-item-labels;
+    display: flex;
+    flex-wrap: wrap;
 }
 
 .at-RowItem-header {
@@ -179,6 +167,7 @@
 }
 
 .at-RowItem-tagContainer {
+    display: flex;
     margin-left: @at-margin-left-list-row-item-tag-container;
 }
 
@@ -211,8 +200,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;
 }

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.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>