From cc350dde68e09b604f926c0b5f3f24b06c941132 Mon Sep 17 00:00:00 2001 From: chouseknecht Date: Wed, 14 May 2014 11:46:07 -0400 Subject: [PATCH] Moved stdout to an iframe and improved auto-sizing. --- awx/ui/static/js/controllers/JobStdout.js | 26 +++++-- awx/ui/static/less/ansible-ui.less | 82 +++++++++++++++-------- awx/ui/static/partials/job_stdout.html | 2 +- awx/ui/templates/ui/index.html | 5 +- 4 files changed, 80 insertions(+), 35 deletions(-) diff --git a/awx/ui/static/js/controllers/JobStdout.js b/awx/ui/static/js/controllers/JobStdout.js index 72123175b8..a0061da88c 100644 --- a/awx/ui/static/js/controllers/JobStdout.js +++ b/awx/ui/static/js/controllers/JobStdout.js @@ -11,7 +11,7 @@ function JobStdoutController ($scope, $compile, $routeParams, ClearScope, GetBas ClearScope(); - var job_id = $routeParams.id; + var available_height, job_id = $routeParams.id; Wait('start'); @@ -23,14 +23,32 @@ function JobStdoutController ($scope, $compile, $routeParams, ClearScope, GetBas Rest.get() .success(function(data) { Wait('stop'); - $('#stdout-container').empty().html(data); + $('#stdout-iframe').attr('srcdoc', data); }) .error(function(data, status) { ProcessErrors($scope, data, status, null, { hdr: 'Error!', msg: 'Failed to retrieve stdout for job: ' + job_id + '. GET returned: ' + status }); }); }); - + + function resizeToFit() { + available_height = $(window).height() - $('.main-menu').outerHeight() - $('#main_tabs').outerHeight() - + $('#breadcrumb-container').outerHeight() - $('.site-footer').outerHeight(); + if ($(window).width() < 768) { + available_height += 55; + } + else { + available_height += 5; + } + $('#stdout-iframe').height(available_height); + //$('#stdout-container').mCustomScrollbar("update"); + } + resizeToFit(); + + $(window).resize(_.debounce(function() { + resizeToFit(); + }, 500)); + Rest.setUrl(GetBasePath('jobs') + job_id + '/'); Rest.get() .success(function(data) { @@ -43,4 +61,4 @@ function JobStdoutController ($scope, $compile, $routeParams, ClearScope, GetBas }); } -JobStdoutController.$inject = [ '$scope', '$compile', '$routeParams', 'ClearScope', 'GetBasePath', 'Wait', 'Rest', 'ProcessErrors']; \ No newline at end of file +JobStdoutController.$inject = [ '$scope', '$compile', '$routeParams', 'ClearScope', 'GetBasePath', 'Wait', 'Rest', 'ProcessErrors' ]; \ No newline at end of file diff --git a/awx/ui/static/less/ansible-ui.less b/awx/ui/static/less/ansible-ui.less index c9bf5b8cf4..57b349f146 100644 --- a/awx/ui/static/less/ansible-ui.less +++ b/awx/ui/static/less/ansible-ui.less @@ -389,11 +389,13 @@ dd { content: ""; display: block; } - .site-footer, #wrap:after { - height: @footer-height; + + #wrap:after { + height: @push-height; } .site-footer { + height: @footer-height; margin-top: @footer-margin; } @@ -515,28 +517,27 @@ dd { } } - .modal-header.login-header { - text-align: center; - background-color: @black; - border-left: 1px solid #686868; - border-right: 1px solid #686868; - border-top: 1px solid #686868; - border-top-left-radius: 6px; - border-top-right-radius: 6px; + text-align: center; + background-color: @black; + border-left: 1px solid #686868; + border-right: 1px solid #686868; + border-top: 1px solid #686868; + border-top-left-radius: 6px; + border-top-right-radius: 6px; } .login-header img { - width: 327px; + width: 327px; } .form-title { - display: inline-block; - width: 100%; - vertical-align: middle; - font-weight: bold; - padding-left: 15px; - margin-bottom: 10px; + display: inline-block; + width: 100%; + vertical-align: middle; + font-weight: bold; + padding-left: 15px; + margin-bottom: 10px; } .form-group { @@ -1634,6 +1635,13 @@ tr td button i { } } +/* job stdout */ + + #stdout-iframe { + width: 100%; + border-radius: 4px; + margin: 0; + } /* ng-cloak directive */ @@ -1704,6 +1712,35 @@ tr td button i { /* Landscape phone to portrait tablet */ @media (max-width: 767px) { + + /* The sticky footer: http://css-tricks.com/snippets/css/sticky-footer, with less variables */ + @footer-height: 140px; + @footer-margin: 15px; + @push-height: (@footer-height + @footer-margin); + #wrap { + min-height: 100%; + height: 100%; + height: auto !important; + margin-bottom: -(@push-height); + } + #wrap:after { + content: ""; + display: block; + } + #wrap:after { + height: @push-height; + } + .site-footer { + height: @footer-height; + margin-top: @footer-margin; + padding-top: 5px; + padding-bottom: 5px; + .logo { + text-align: center; + padding-top: 10px; + margin-bottom: 10px; + } + } /* Job events */ @@ -1752,15 +1789,4 @@ tr td button i { display: none; } - .site-footer { - height: 145px; - padding-top: 5px; - padding-bottom: 5px; - .logo { - text-align: center; - padding-top: 10px; - margin-bottom: 10px; - } - } - } diff --git a/awx/ui/static/partials/job_stdout.html b/awx/ui/static/partials/job_stdout.html index 8cd13adb52..b394083842 100644 --- a/awx/ui/static/partials/job_stdout.html +++ b/awx/ui/static/partials/job_stdout.html @@ -16,7 +16,7 @@
-
+
diff --git a/awx/ui/templates/ui/index.html b/awx/ui/templates/ui/index.html index 4b9f8977dd..491fff95ef 100644 --- a/awx/ui/templates/ui/index.html +++ b/awx/ui/templates/ui/index.html @@ -73,13 +73,14 @@ - + + @@ -355,7 +356,7 @@ -
+