Merge pull request #37 from marshmalien/ux/fix/jobs

UX Hit List: Jobs

awx/ui/client/legacy-styles/lists.less

@@ -155,6 +155,7 @@ table, tbody {
     font-weight: normal;
     padding: 2px 10px;
     height: 14px;
+    line-height: 10px;
     margin: 0;
     background-color: @list-title-badge;
     border-radius: 5px;

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

@@ -147,7 +147,7 @@
     padding-top: 2px;
     padding-bottom: 2px;
     width: 75px;
-    flex: initial;
+    flex: 1 0 70px;
     user-select: none;
     -moz-user-select: none;
     -webkit-user-select: none;
@@ -191,7 +191,7 @@
 }
 
 .JobResultsStdOut-footer {
-    height: 10px;
+    height: 20px;
     border-bottom-right-radius: 5px;
     border-bottom-left-radius: 5px;
     background-color: @default-secondary-bg;
@@ -199,6 +199,8 @@
     border-radius: 5px;
     border-top-left-radius: 0px;
     border-top-right-radius: 0px;
+    overflow: hidden;
+    margin-top: -1px;
 }
 
 .JobResultsStdOut-footerNumberColumn {
@@ -209,19 +211,28 @@
 }
 
 .JobResultsStdOut-followAnchor {
-    height: 20px;
+    height: 0px;
-    width: 100%;
-    border-left: 70px solid @default-list-header-bg;
-    background-color: @default-secondary-bg;
 }
 
 .JobResultsStdOut-toTop {
-    margin-right: 20px;
     color: @default-icon;
     cursor: pointer;
-    text-align: right;
     font-family: monaco;
-    border-left: 1px solid @d7grey;
+    font-size: 10px;
+    margin-right: 20px;
+    text-align: right;
+    display: flex;
+
+    span {
+        margin-left: auto;
+    }
+}
+
+.JobResultsStdOut-toTop--numberColumn {
+    background: @default-list-header-bg;
+    height: 40px;
+    width: 70px;
+    border-right: 1px solid #D7D7D7;
 }
 
 .JobResultsStdOut-toTop:hover {
@@ -247,9 +258,7 @@
     }
 
     .JobResultsStdOut-followAnchor {
-        height: 20px;
+        height: 0px;
-        width: 100%;
-        border-left: 70px solid @default-list-header-bg;
     }
 
     .JobResultsStdOut-stdoutContainer {

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

@@ -37,7 +37,7 @@
         <div class="JobResultsStdOut-aLineOfStdOut"
             ng-show="tooManyEvents || tooManyPastEvents || showLegacyJobErrorMessage">
             <div class="JobResultsStdOut-lineNumberColumn">
-                <span class="JobResultsStdOut-lineExpander">  </span>
+                 <span class="JobResultsStdOut-lineExpander">  </span>
             </div>
             <div class="JobResultsStdOut-stdoutColumn JobResultsStdOut-stdoutColumn--tooMany"
                 ng-show="tooManyEvents">The standard output is too large to display.  Please specify additional filters to narrow the standard out.</div>
@@ -51,14 +51,15 @@
         <div class="next_is_1"></div>
         <div id="followAnchor"
             class="JobResultsStdOut-followAnchor">
-            <div class="JobResultsStdOut-toTop"
-                ng-click="toTop()"
-                ng-show="stdoutOverflowed">
-                ^ TOP
-            </div>
         </div>
     </div>
     <div class="JobResultsStdOut-footer">
+        <div class="JobResultsStdOut-toTop"
+            ng-show="stdoutOverflowed">
+            <div class="JobResultsStdOut-toTop--numberColumn">
+            </div>
+            <span ng-click="toTop()">^ TOP</span>
+        </div>
         <div class="JobResultsStdOut-footerNumberColumn"></div>
     </div>
 </div>

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

@@ -12,7 +12,7 @@
 
 .JobResults-leftSide {
     .OnePlusTwo-left--panel(100%, @breakpoint-md);
-    max-width: 33%;
+    max-width: 30%;
     height: ~"calc(100vh - 177px)";
 
     @media screen and (max-width: @breakpoint-md) {
@@ -69,7 +69,7 @@
 .JobResults-resultRowLabel {
     text-transform: uppercase;
     color: @default-interface-txt;
-    font-size: 14px;
+    font-size: 12px;
     font-weight: normal!important;
     width: 30%;
     margin-right: 20px;