Moved stdout to an iframe and improved auto-sizing.

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'];
+JobStdoutController.$inject = [ '$scope', '$compile', '$routeParams', 'ClearScope', 'GetBasePath', 'Wait', 'Rest', 'ProcessErrors' ];

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;
+    text-align: center;
-  background-color: @black;
+    background-color: @black;
-  border-left: 1px solid #686868;
+    border-left: 1px solid #686868;
-  border-right: 1px solid #686868;
+    border-right: 1px solid #686868;
-  border-top: 1px solid #686868;
+    border-top: 1px solid #686868;
-  border-top-left-radius: 6px;
+    border-top-left-radius: 6px;
-  border-top-right-radius: 6px;
+    border-top-right-radius: 6px;
 }
 
 .login-header img {
-  width: 327px;
+    width: 327px;
 }
 
 .form-title {
-  display: inline-block;
+    display: inline-block;
-  width: 100%;
+    width: 100%;
-  vertical-align: middle;
+    vertical-align: middle;
-  font-weight: bold;
+    font-weight: bold;
-  padding-left: 15px;
+    padding-left: 15px;
-  margin-bottom: 10px;
+    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;
-      }
-  }
-
 }

awx/ui/static/partials/job_stdout.html

@@ -16,7 +16,7 @@
 
         <div class="row">
             <div class="col-md-12">
-                <div id="stdout-container"></div>
+                <iframe id="stdout-iframe"></iframe>
             </div>
         </div>
     </div>

awx/ui/templates/ui/index.html

@@ -73,13 +73,14 @@
   <script src="{{ STATIC_URL }}js/controllers/Home.js"></script>
   <script src="{{ STATIC_URL }}js/controllers/Teams.js"></script>
   <script src="{{ STATIC_URL }}js/controllers/Credentials.js"></script>
-  <script src="{{ STATIC_URL }}js/controllers/JobStdout.js"></script>
   <script src="{{ STATIC_URL }}js/controllers/Sockets.js"></script>
   <script src="{{ STATIC_URL }}js/controllers/Projects.js"></script>
   <script src="{{ STATIC_URL }}js/controllers/Jobs.js"></script>
   <script src="{{ STATIC_URL }}js/controllers/JobDetail.js"></script>
   <script src="{{ STATIC_URL }}js/controllers/JobEvents.js"></script>
   <script src="{{ STATIC_URL }}js/controllers/JobHosts.js"></script>
+  <script src="{{ STATIC_URL }}js/controllers/JobTemplates.js"></script>
+  <script src="{{ STATIC_URL }}js/controllers/JobStdout.js"></script>
   <script src="{{ STATIC_URL }}js/controllers/Permissions.js"></script>
   <script src="{{ STATIC_URL }}js/controllers/Schedules.js"></script>
   <script src="{{ STATIC_URL }}js/controllers/Sockets.js"></script>
@@ -355,7 +356,7 @@
     </div><!-- modal -->
 
     <!-- Help dialog -->
-    <div id="help-modal"></div>
+    <div id="help-modal" style="display: none;"></div>
 
   </div><!-- container -->