From 3182197287d27c94261828e0e5b0e070f66ac25c Mon Sep 17 00:00:00 2001
From: mabashian <mabashia@redhat.com>
Date: Fri, 27 Sep 2019 15:40:57 -0400
Subject: [PATCH] Makes notification toggles more responsive on smaller
 screens.

---
 .../src/notifications/notifications.list.js       | 15 ++++++++-------
 .../shared/column-sort/column-sort.partial.html   |  2 +-
 .../list-generator/list-generator.factory.js      |  1 +
 3 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/awx/ui/client/src/notifications/notifications.list.js b/awx/ui/client/src/notifications/notifications.list.js
index a08dd7692e..756588d200 100644
--- a/awx/ui/client/src/notifications/notifications.list.js
+++ b/awx/ui/client/src/notifications/notifications.list.js
@@ -25,19 +25,20 @@ export default ['i18n', 'templateUrl', function(i18n, templateUrl){
             name: {
                 key: true,
                 label: i18n._('Name'),
-                columnClass: 'col-md-4 col-sm-9 col-xs-9',
-                linkTo: '/#/notification_templates/{{notification.id}}'
+                columnClass: 'col-sm-9 col-xs-9',
+                linkTo: '/#/notification_templates/{{notification.id}}',
+                columnNgClass: "{'col-lg-4 col-md-2': showApprovalColumn, 'col-lg-5 col-md-3': !showApprovalColumn}"
             },
             notification_type: {
                 label: i18n._('Type'),
                 searchType: 'select',
                 searchOptions: [],
                 excludeModal: true,
-                columnClass: 'd-none d-sm-flex col-md-4 col-sm-3'
+                columnClass: 'd-none d-sm-flex col-lg-4 col-md-2 col-sm-3',
             },
             notification_templates_approvals: {
                 label: i18n._('Approval'),
-                columnClass: 'd-none d-md-flex justify-content-start col-md-1',
+                columnClass: 'd-none d-md-flex justify-content-start col-lg-1 col-md-2',
                 flag: 'notification_templates_approvals',
                 type: "toggle",
                 ngClick: "toggleNotification($event, notification.id, 'notification_templates_approvals')",
@@ -58,7 +59,7 @@ export default ['i18n', 'templateUrl', function(i18n, templateUrl){
                 dataTipWatch: "schedule.play_tip",
                 dataPlacement: "right",
                 nosort: true,
-                columnClass: 'd-none d-md-flex justify-content-start col-md-1'
+                columnClass: 'd-none d-md-flex justify-content-start col-lg-1 col-md-2'
             },
             notification_templates_success: {
                 label: i18n._('Success'),
@@ -70,11 +71,11 @@ export default ['i18n', 'templateUrl', function(i18n, templateUrl){
                 dataTipWatch: "schedule.play_tip",
                 dataPlacement: "right",
                 nosort: true,
-                columnClass: 'd-none d-md-flex justify-content-start col-md-1'
+                columnClass: 'd-none d-md-flex justify-content-start col-lg-1 col-md-2'
             },
             notification_templates_error: {
                 label: i18n._('Failure'),
-                columnClass: 'd-none d-md-flex justify-content-start col-md-1 NotifierList-lastColumn',
+                columnClass: 'd-none d-md-flex justify-content-start col-lg-1 col-md-2 NotifierList-lastColumn',
                 flag: 'notification_templates_error',
                 type: "toggle",
                 ngClick: "toggleNotification($event, notification.id, 'notification_templates_error')",
diff --git a/awx/ui/client/src/shared/column-sort/column-sort.partial.html b/awx/ui/client/src/shared/column-sort/column-sort.partial.html
index c250ad4571..2efe6d8db5 100644
--- a/awx/ui/client/src/shared/column-sort/column-sort.partial.html
+++ b/awx/ui/client/src/shared/column-sort/column-sort.partial.html
@@ -1,4 +1,4 @@
-<div id="{{columnIterator}}-{{columnField}}-header" class="List-tableHeader list-header {{columnCustomClass}}" ng-click="columnNoSort !== 'true' && toggleColumnOrderBy()" ng-class="{'list-header-noSort' : columnNoSort === 'true'}" >
+<div id="{{columnIterator}}-{{columnField}}-header" class="List-tableHeader list-header {{columnCustomClass}}" ng-click="columnNoSort !== 'true' && toggleColumnOrderBy()" >
     {{columnLabel | translate}}
     <i ng-if="columnNoSort !== 'true'" class="fa columnSortIcon" ng-class="orderByIcon()">
 </div>
diff --git a/awx/ui/client/src/shared/list-generator/list-generator.factory.js b/awx/ui/client/src/shared/list-generator/list-generator.factory.js
index b63fa96f9b..3b0b15e32c 100644
--- a/awx/ui/client/src/shared/list-generator/list-generator.factory.js
+++ b/awx/ui/client/src/shared/list-generator/list-generator.factory.js
@@ -558,6 +558,7 @@ export default ['$compile', 'Attr', 'Icon',
                             column-no-sort="${list.fields[fld].nosort}"
                             column-label="${list.fields[fld].label}"
                             column-custom-class="${customClass}"
+                            ng-class="${list.fields[fld].columnNgClass || `{'list-header-noSort': ${list.fields[fld].nosort ? true : false}}`}"
                             query-set="${list.iterator}_queryset">
                         </div>`;
                     }