responsive tower

awx/ui/client/src/job-results/job-results-stdout/job-results-stdout.block.less

@@ -111,13 +111,14 @@
 }
 
 .JobResultsStdOut-numberColumnPreload {
-    background-color: #EBEBEB;
+    background-color: @default-list-header-bg;
     width: 70px;
     position: fixed;
     top: 148px;
     bottom: 20px;
     margin-top: 65px;
     margin-bottom: 65px;
+
 }
 
 .JobResultsStdOut-aLineOfStdOut {
@@ -203,9 +204,30 @@
     color: @default-interface-txt;
 }
 
-.foo {
+@media (max-width: 1199px) {
-    margin-right: auto;
+    .JobResultsStdOut-numberColumnPreload {
-    margin-top: 8px;
+        display: none;
-    margin-left: 20px;
+    }
-    font-weight: bold;
+
+    .JobResultsStdOut-topAnchor {
+        position: static;
+        width: 100%;
+        top: -20px;
+        margin-top: -250px;
+        margin-bottom: 250px;
+    }
+
+    .JobResultsStdOut-followAnchor {
+        height: 20px;
+        width: 100%;
+        border-left: 70px solid @default-list-header-bg;
+    }
+
+    .JobResultsStdOut-stdoutContainer {
+        overflow-y: auto;
+    }
+
+    .JobResultsStdOut-lineAnchor {
+        display: none !important;
+    }
 }

awx/ui/client/src/job-results/job-results-stdout/job-results-stdout.directive.js

@@ -57,28 +57,70 @@ export default [ 'templateUrl', '$timeout', '$location', '$anchorScroll',
                 scope.parentVisLine = parentItem;
             };
 
-            var lastScrollTop = 0;
+            // find when window changes from mobile to desktop width
-            scope.stdoutOverflowed = false;
+            if (window.innerWidth < 1200) {
-            $(".JobResultsStdOut-stdoutContainer").on('scroll', function() {
+                scope.isMobile = true;
-                var st = $(this).scrollTop();
+            } else {
+                scope.isMobile = false;
+            }
+            $( window ).resize(function() {
+                if (window.innerWidth < 1200 && !scope.isMobile) {
+                    scope.isMobile = true;
+                } else if (window.innerWidth >= 1200 & scope.isMobile) {
+                    scope.isMobile = false;
+                }
+            });
+
+            var lastScrollTop;
+
+            var initScrollTop = function() {
+                lastScrollTop = 0;
+            }
+            var scrollWatcher = function() {
+                var st = $(this).scrollTop(),
+                    fullHeight;
                 if (st < lastScrollTop){
                     // user up scrolled, so disengage follow
                     scope.followEngaged = false;
                 }
 
+                if (scope.isMobile) {
+                    fullHeight = $("body").height();
+                } else {
+                    fullHeight = $(this)[0].scrollHeight - 25;
+                }
+
                 if($(this).scrollTop() + $(this).innerHeight() >=
-                    $(this)[0].scrollHeight - 25) {
+                    fullHeight) {
                     // user scrolled all the way to bottom, so engage
                     // follow
                     scope.followEngaged = true;
                 }
 
                 // pane is now overflowed, show top indicator
-                if (st > 0) {
+                if (st > 0 && !scope.isMobile) {
                     scope.stdoutOverflowed = true;
                 }
 
                 lastScrollTop = st;
+            }
+
+            scope.$watch('isMobile', function(val) {
+                if (val === true) {
+                    // make sure ^ TOP always shown
+                    scope.stdoutOverflowed = true;
+
+                    initScrollTop();
+                    $(".JobResultsStdOut-stdoutContainer")
+                        .unbind('scroll');
+                    $(window).on('scroll', scrollWatcher);
+
+                } else if (val === false) {
+                    initScrollTop();
+                    $(window).unbind('scroll');
+                    $(".JobResultsStdOut-stdoutContainer").on('scroll',
+                        scrollWatcher);
+                }
             });
 
             scope.followScroll = function() {

awx/ui/client/src/job-results/job-results-stdout/job-results-stdout.partial.html

@@ -31,9 +31,9 @@
         </div>
     </div>
     <div class="JobResultsStdOut-stdoutContainer">
-        <div id="topAnchor"></div>
+        <div id="topAnchor" class="JobResultsStdOut-topAnchor"></div>
         <div class="JobResultsStdOut-numberColumnPreload"></div>
-        <div id='lineAnchor'></div>
+        <div id='lineAnchor' class="JobResultsStdOut-lineAnchor"></div>
         <div id="followAnchor"
             class="JobResultsStdOut-followAnchor">
             <div class="JobResultsStdOut-toTop"

awx/ui/client/src/job-results/job-results.block.less

@@ -114,3 +114,13 @@
     text-transform: uppercase;
     margin-left: 20px;
 }
+
+@media (max-width: 1199px) {
+    .JobResults-detailsPanel {
+        overflow-y: auto;
+    }
+
+    .JobResults-rightSide {
+        height: inherit;
+    }
+}