From 4ff2293914d02d95b625d745e1e074007301a3b7 Mon Sep 17 00:00:00 2001 From: Chris Houseknecht Date: Wed, 16 Jul 2014 15:14:58 -0400 Subject: [PATCH] Dashboard jobs widget Fixed responsiveness of the dashboard jobs widget. --- awx/ui/static/js/helpers/EventViewer.js | 16 ++++++++++- awx/ui/static/js/widgets/DashboardJobs.js | 33 ++++++++++++++++++----- awx/ui/static/less/ansible-ui.less | 2 ++ awx/ui/static/less/event-viewer.less | 4 --- awx/ui/static/less/new-dashboard.less | 2 +- 5 files changed, 44 insertions(+), 13 deletions(-) diff --git a/awx/ui/static/js/helpers/EventViewer.js b/awx/ui/static/js/helpers/EventViewer.js index b908971fd6..333cde59fb 100644 --- a/awx/ui/static/js/helpers/EventViewer.js +++ b/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(); } diff --git a/awx/ui/static/js/widgets/DashboardJobs.js b/awx/ui/static/js/widgets/DashboardJobs.js index 2731689a0c..54c062e2d5 100644 --- a/awx/ui/static/js/widgets/DashboardJobs.js +++ b/awx/ui/static/js/widgets/DashboardJobs.js @@ -33,7 +33,7 @@ angular.module('DashboardJobsWidget', ['RestServices', 'Utilities']) html += "
\n"; html += "
\n"; html += "
\n"; - html += "
\n"; + html += "
\n"; html += "
\n"; //row html += "
\n"; html += "
\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)); - // $('.dashboard-jobs-list-container').height(500); + if (max_rows < 5){ + box_height = header+page_row + search_row + 40 + (5 * row_height); + if (docw < 1140) { + box_height += 40; + } + $('.dashboard-jobs-list-container').height(box_height); max_rows = 5; } } diff --git a/awx/ui/static/less/ansible-ui.less b/awx/ui/static/less/ansible-ui.less index 41853e8e4e..0a383f8ada 100644 --- a/awx/ui/static/less/ansible-ui.less +++ b/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; diff --git a/awx/ui/static/less/event-viewer.less b/awx/ui/static/less/event-viewer.less index ecf3f40e1f..2a4fc4d0ff 100644 --- a/awx/ui/static/less/event-viewer.less +++ b/awx/ui/static/less/event-viewer.less @@ -20,10 +20,6 @@ } } -#events-next-button { - margin-right: 60px; -} - table.eventviewer-status { margin-top: 20px; diff --git a/awx/ui/static/less/new-dashboard.less b/awx/ui/static/less/new-dashboard.less index 8265902b22..d780643686 100644 --- a/awx/ui/static/less/new-dashboard.less +++ b/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; }