Dashboard jobs widget

Fixed responsiveness of the dashboard jobs widget.

awx/ui/static/js/helpers/EventViewer.js

@@ -23,7 +23,7 @@ angular.module('EventViewerHelper', ['ModalDialog', 'Utilities', 'EventsViewerFo
 
             // show scope.events[idx]
             function showEvent(idx) {
-                var elem, data = scope.events[idx];
+                var show_tabs = false, elem, data = scope.events[idx];
                 current_event = idx;
 
                 $('#status-form-container').empty();
@@ -41,14 +41,17 @@ angular.module('EventViewerHelper', ['ModalDialog', 'Utilities', 'EventsViewerFo
                 EventAddTable({ scope: scope, id: 'status-form-container', event: data, section: 'Event' });
 
                 if (EventAddTable({ scope: scope, id: 'results-form-container', event: data, section: 'Results'})) {
+                    show_tabs = true;
                     $('#eventview-tabs li:eq(1)').show();
                 }
 
                 if (EventAddTable({ scope: scope, id: 'timing-form-container', event: data, section: 'Timing' })) {
+                    show_tabs = true;
                     $('#eventview-tabs li:eq(2)').show();
                 }
 
                 if (data.stdout) {
+                    show_tabs = true;
                     $('#eventview-tabs li:eq(3)').show();
                     EventAddPreFormattedText({
                         id: 'stdout-form-container',
@@ -57,6 +60,7 @@ angular.module('EventViewerHelper', ['ModalDialog', 'Utilities', 'EventsViewerFo
                 }
 
                 if (data.stderr) {
+                    show_tabs = true;
                     $('#eventview-tabs li:eq(4)').show();
                     EventAddPreFormattedText({
                         id: 'stderr-form-container',
@@ -65,6 +69,7 @@ angular.module('EventViewerHelper', ['ModalDialog', 'Utilities', 'EventsViewerFo
                 }
 
                 if (data.traceback) {
+                    show_tabs = true;
                     $('#eventview-tabs li:eq(5)').show();
                     EventAddPreFormattedText({
                         id: 'traceback-form-container',
@@ -72,10 +77,19 @@ angular.module('EventViewerHelper', ['ModalDialog', 'Utilities', 'EventsViewerFo
                     });
                 }
 
+                if (!show_tabs) {
+                    $('#eventview-tabs').hide();
+                }
+
                 elem = angular.element(document.getElementById('eventviewer-modal-dialog'));
                 $compile(elem)(scope);
             }
 
+            function setButtonMargin() {
+                var width = ($('.ui-dialog[aria-describedby=["eventviewer-modal-dialog"] .ui-dialog-buttonpane').innerWidth() / 2) - $('#events-next-button').outerWidth();
+                console.log('width: ' + width);
+            }
+
             if (scope.removeModalReady) {
                 scope.removeModalReady();
             }

awx/ui/static/js/widgets/DashboardJobs.js

@@ -33,7 +33,7 @@ angular.module('DashboardJobsWidget', ['RestServices', 'Utilities'])
         html += "<div  id=\"dashboard-tab-content\" class=\"tab-content \">\n";
         html += "<div class=\"tab-pane active\" id=\"active-jobs-tab\">\n";
         html += "<div class=\"row search-row\">\n";
-        html += "<div class=\"col-lg-6 col-md-6 col-sm-6\" id=\"active-jobs-search-container\"></div>\n";
+        html += "<div class=\"col-lg-6 col-md-6\" id=\"active-jobs-search-container\"></div>\n";
         html += "</div>\n"; //row
         html += "<div class=\"job-list\" id=\"active-jobs-container\">\n";
         html += "<div id=\"active-jobs\" class=\"job-list-target\"></div>\n";
@@ -120,7 +120,7 @@ angular.module('DashboardJobsWidget', ['RestServices', 'Utilities'])
      // Set the height of each container and calc max number of rows containers can hold
         function setDashboardJobsHeight() {
             var docw = $(window).width(),
-            available_height, search_row, page_row, height, header, row_height;
+                box_height, available_height, search_row, page_row, height, header, row_height;
 
             available_height = Math.floor(($(window).height() - $('#main-menu-container .navbar').outerHeight() - $('#count-container').outerHeight() - 93)/2);
             $('.dashboard-jobs-list-container').height(available_height);
@@ -128,12 +128,31 @@ angular.module('DashboardJobsWidget', ['RestServices', 'Utilities'])
             page_row = Math.max($('.page-row:eq(0)').outerHeight(), 33);
             header = Math.max($('#completed_jobs_table thead').height(), 41);
             height = Math.floor(available_height) - header - page_row - search_row -30 ;
-            row_height = (docw < 1415) ? 47 : 27;
+            if (docw < 765 && docw >= 493) {
+                row_height = 27;
+            }
+            else if (docw < 493) {
+                row_height = 47;
+            }
+            else if (docw < 865) {
+                row_height = 87;
+            }
+            else if (docw < 925) {
+                row_height = 67;
+            }
+            else if (docw < 1415) {
+                row_height = 47;
+            }
+            else {
+                row_height = 27;
+            }
             max_rows = Math.floor(height / row_height);
-
             if (max_rows < 5){
-                $('.dashboard-jobs-list-container').height(header+page_row+search_row+40+(5*row_height));
+                box_height = header+page_row + search_row + 40 + (5 * row_height);
-                // $('.dashboard-jobs-list-container').height(500);
+                if (docw < 1140) {
+                    box_height += 40;
+                }
+                $('.dashboard-jobs-list-container').height(box_height);
                 max_rows = 5;
             }
         }

awx/ui/static/less/ansible-ui.less

@@ -319,10 +319,12 @@ hr {
       }
   }
 
+/*
 th.actions-column,
 td.actions {
   white-space: nowrap;
 }
+*/
 
 .tab-content {
   padding-top: 15px;

awx/ui/static/less/event-viewer.less

@@ -20,10 +20,6 @@
     }
 }
 
-#events-next-button {
-    margin-right: 60px;
-}
-
 table.eventviewer-status {
     margin-top: 20px;
 

awx/ui/static/less/new-dashboard.less

@@ -85,7 +85,7 @@
   padding-bottom: 15px;
 }
 
- @media (min-width: 1024px) {
+ @media (min-width: 769px) {
       .left-side {
           padding-right: 7px;
       }